feat: table 编辑

Author: jay

README.md

@@ -103,6 +103,26 @@ patches back to the selected local file automatically. Rapid changes are batched
 after 1.2 seconds of inactivity, with a 5 second maximum wait during continuous
 adjustments. File switching and Reload flush pending changes before continuing.
 
+## Table Editing
+
+Text inside table cells uses the same inline text and range-formatting tools as
+other page text. When no text range is active, selecting content inside a
+regular rectangular table replaces the element duplicate/delete menu with row
+and column actions:
+
+- insert a row above or below
+- insert a column to the left or right
+- delete the current row or column
+
+New rows and columns preserve the presentation attributes of the neighboring
+row or cell, start with empty content, and do not copy element IDs. The preview
+updates immediately and the same semantic operation is applied to the source
+HTML during auto-save.
+
+Structural editing is deliberately disabled for tables that use `rowspan`,
+`colspan`, `colgroup`, or inconsistent cell counts. Their cell text remains
+editable, but changing their grid safely requires a span-aware table model.
+
 ## Publishing
 
 Publishing is handled by [`.github/workflows/publish.yml`](.github/workflows/publish.yml).

htmlPatch.js

@@ -1,5 +1,6 @@
 import { parseDocument } from "htmlparser2";
 import { selectAll } from "css-select";
+import { patchTableElementHtml } from "./tablePatch.js";
 
 const allowedStyleProperties = new Set([
   "box-sizing",
@@ -476,6 +477,12 @@ function patchElementHtml(elementHtml, node, operations) {
       continue;
     }
 
+    if (String(operation.type || "").startsWith("table-")
+      && operations.length === 1
+      && node.name === "table") {
+      return patchTableElementHtml(next, node, operation);
+    }
+
     // Structural operations replace the resolved source range and therefore
     // must be the final operation in one patch request.
     if (operation.type === "duplicate-element" && index === operations.length - 1) {

package.json

@@ -30,6 +30,7 @@
     "projectContext.js",
     "public",
     "server.js",
+    "tablePatch.js",
     "README.md"
   ],
   "scripts": {

public/app.js

@@ -14,12 +14,12 @@ import {
   shouldCommitInlineEdit,
   shouldEnsureFixedWidthWrap,
 } from "./inlineEdit.js?v=editor-interactions-v4";
-import { createCanvasTextEditor } from "./canvasTextEditor.js?v=editor-interactions-v3";
+import { createCanvasTextEditor } from "./canvasTextEditor.js?v=editor-interactions-v5";
 import { createAutoSaveController } from "./autoSaveController.js";
 import { positionStart } from "./canvasEditorMath.js";
 import { createEditorHistory } from "./editorHistory.js";
 import { appendStructuralPatch, appendStylePatch } from "./patchQueue.js";
-import { dragTargetAtPoint } from "./pointerIntent.js?v=editor-interactions-v3";
+import { dragTargetAtPoint } from "./pointerIntent.js?v=editor-interactions-v4";
 import { activateEmbeddedPreview } from "./previewLifecycle.js";
 import {
   injectPreviewBase,
@@ -32,6 +32,10 @@ import {
   planTextFieldContentOperations,
   textStructureSignature,
 } from "./textFieldModel.js?v=editor-interactions-v4";
+import {
+  applyTableAction,
+  tableContextForElement,
+} from "./tableEditing.js?v=table-editing-v1";
 
 // state 保存编辑器运行时状态；真正的 HTML 内容仍然在 iframe 文档里。
 const state = {
@@ -764,6 +768,27 @@ function injectEditorLayer() {
       markDirty();
       clearSelection();
     },
+    onTableAction(action, context) {
+      const tableTarget = targetForElement(context.table);
+      const result = applyTableAction(context, action);
+      if (!result.changed) {
+        setStatus(result.reason || "This table operation is unavailable", "error");
+        state.canvasEditor?.refresh();
+        return;
+      }
+
+      queueStructuralPatch(tableTarget, result.operation);
+      // A table operation changes its text fingerprint and DOM paths. Cache the
+      // new identity so a second operation in the same auto-save batch resolves
+      // against the source produced by the first operation.
+      state.elementTargets.set(
+        context.table,
+        createElementTarget(context.table, selectorFor(context.table)),
+      );
+      markDirty();
+      if (result.selectedCell?.isConnected) selectElement(result.selectedCell);
+      else clearSelection();
+    },
     onSelectionChange() {
       syncInspector();
     },
@@ -839,7 +864,8 @@ function injectEditorLayer() {
       applyDragMarker(dragTarget);
       return;
     }
-    const target = resolveEditableTextTarget(event.target);
+    const tableCell = event.target.closest?.("td, th");
+    const target = resolveEditableTextTarget(event.target) || tableCell;
     if (!target) {
       event.preventDefault();
       event.stopImmediatePropagation();
@@ -950,18 +976,22 @@ function handleEditorShortcut(event) {
   }
   const element = selectedElement();
   if (!element || isFormControl(event.target)) return;
+  const tableContext = tableContextForElement(element);
 
   if (modifier && key === "d") {
     event.preventDefault();
+    if (tableContext) return;
     state.canvasEditor?.duplicateSelected();
     return;
   }
   if (event.key === "Delete" || event.key === "Backspace") {
     event.preventDefault();
+    if (tableContext) return;
     state.canvasEditor?.deleteSelected();
     return;
   }
   if (["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) {
+    if (tableContext) return;
     event.preventDefault();
     recordHistory();
     const step = event.shiftKey ? 10 : 1;