@jvs-milkdown/components 1.1.9 → 1.2.1

package/lib/table-block/index.js

@@ -1,8 +1,8 @@
 import { $ctx, $view } from '@jvs-milkdown/utils';
-import { selectColCommand, moveColCommand, selectRowCommand, moveRowCommand, mergeCellsCommand, setAlignCommand, deleteSelectedCellsCommand, addColAfterCommand, addColBeforeCommand, addRowAfterCommand, addRowBeforeCommand, tableSchema } from '@jvs-milkdown/preset-gfm';
+import { selectColCommand, moveColCommand, selectRowCommand, moveRowCommand, mergeCellsCommand, setAlignCommand, deleteSelectedCellsCommand, addRowWithAlignment, tableSchema } from '@jvs-milkdown/preset-gfm';
 import { h, defineComponent, ref, onMounted, watch, onBeforeUnmount, shallowRef, createApp, triggerRef } from 'vue';
 import { computePosition, offset } from '@floating-ui/dom';
-import { findTable, CellSelection, selectedRect, splitCellWithType, mergeCells, splitCell } from '@jvs-milkdown/prose/tables';
+import { findTable, CellSelection, selectedRect, splitCellWithType, TableMap, addColumn, mergeCells, splitCell } from '@jvs-milkdown/prose/tables';
 import clsx from 'clsx';
 import DOMPurify from 'dompurify';
 import { editorViewCtx, commandsCtx } from '@jvs-milkdown/core';
@@ -502,40 +502,52 @@ function useDragHandlers(refs, ctx, getPos) {
 }
 
 function useOperation(refs, ctx, getPos) {
-  const { contentWrapperRef, hoverIndex } = refs;
+  const { hoverIndex } = refs;
   const addRowByIndex = (index) => {
-    var _a, _b, _c;
     if (!ctx || !ctx.get(editorViewCtx).editable) return;
-    const rows = Array.from(
-      (_b = (_a = contentWrapperRef.value) == null ? void 0 : _a.querySelectorAll("tr")) != null ? _b : []
-    );
-    const commands = ctx.get(commandsCtx);
-    const pos = ((_c = getPos == null ? void 0 : getPos()) != null ? _c : 0) + 1;
-    if (rows.length === index) {
-      commands.call(selectRowCommand.key, { pos, index: index - 1 });
-      commands.call(addRowAfterCommand.key);
-    } else {
-      commands.call(selectRowCommand.key, { pos, index });
-      commands.call(addRowBeforeCommand.key);
-    }
-    commands.call(selectRowCommand.key, { pos, index });
+    const view = ctx.get(editorViewCtx);
+    const tablePos = getPos == null ? void 0 : getPos();
+    if (tablePos == null) return;
+    const table = view.state.doc.nodeAt(tablePos);
+    if (!table) return;
+    const tableStart = tablePos + 1;
+    const map = TableMap.get(table);
+    const insertRow = Math.min(index, map.height);
+    const tr = view.state.tr;
+    const rect = {
+      map,
+      tableStart,
+      table,
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height
+    };
+    addRowWithAlignment(ctx, tr, rect, insertRow);
+    view.dispatch(tr);
   };
   const addColByIndex = (index) => {
-    var _a, _b, _c, _d;
     if (!ctx || !ctx.get(editorViewCtx).editable) return;
-    const cols = Array.from(
-      (_c = (_b = (_a = contentWrapperRef.value) == null ? void 0 : _a.querySelector("tr")) == null ? void 0 : _b.children) != null ? _c : []
-    );
-    const commands = ctx.get(commandsCtx);
-    const pos = ((_d = getPos == null ? void 0 : getPos()) != null ? _d : 0) + 1;
-    if (cols.length === index) {
-      commands.call(selectColCommand.key, { pos, index: index - 1 });
-      commands.call(addColAfterCommand.key);
-    } else {
-      commands.call(selectColCommand.key, { pos, index });
-      commands.call(addColBeforeCommand.key);
-    }
-    commands.call(selectColCommand.key, { pos, index });
+    const view = ctx.get(editorViewCtx);
+    const tablePos = getPos == null ? void 0 : getPos();
+    if (tablePos == null) return;
+    const table = view.state.doc.nodeAt(tablePos);
+    if (!table) return;
+    const tableStart = tablePos + 1;
+    const map = TableMap.get(table);
+    const insertCol = Math.min(index, map.width);
+    const tr = view.state.tr;
+    const rect = {
+      map,
+      tableStart,
+      table,
+      left: 0,
+      right: map.width,
+      top: 0,
+      bottom: map.height
+    };
+    addColumn(tr, rect, insertCol);
+    view.dispatch(tr);
   };
   const selectCol = () => {
     var _a;
@@ -556,6 +568,7 @@ function useOperation(refs, ctx, getPos) {
   const deleteSelected = (e) => {
     if (!ctx) return;
     if (!ctx.get(editorViewCtx).editable) return;
+    if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
     const commands = ctx.get(commandsCtx);
@@ -567,6 +580,7 @@ function useOperation(refs, ctx, getPos) {
   const onAlign = (direction) => (e) => {
     if (!ctx) return;
     if (!ctx.get(editorViewCtx).editable) return;
+    if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
     const commands = ctx.get(commandsCtx);
@@ -578,6 +592,7 @@ function useOperation(refs, ctx, getPos) {
   const onMergeCells = (e) => {
     if (!ctx) return;
     if (!ctx.get(editorViewCtx).editable) return;
+    if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
     const commands = ctx.get(commandsCtx);
@@ -590,6 +605,7 @@ function useOperation(refs, ctx, getPos) {
     var _a, _b;
     if (!ctx) return;
     if (!ctx.get(editorViewCtx).editable) return;
+    if (e.button !== 0) return;
     e.preventDefault();
     e.stopPropagation();
     const view = ctx.get(editorViewCtx);
@@ -728,22 +744,68 @@ const TableBlock = defineComponent({
     const xLineHandleRef = ref();
     const resizingCol = ref(-1);
     const colWidths = ref([]);
+    const getColCount = () => {
+      let maxCols = 0;
+      node.value.forEach((row) => {
+        let cols = 0;
+        row.forEach((cell) => {
+          cols += cell.attrs.colspan || 1;
+        });
+        if (cols > maxCols) maxCols = cols;
+      });
+      return maxCols;
+    };
     const syncColWidths = () => {
       if (resizingCol.value >= 0) return;
-      const firstRow = node.value.firstChild;
-      if (!firstRow) return;
-      const colCount = firstRow.content.childCount;
+      const colCount = getColCount();
+      const prevColCount = colWidths.value.length;
       const widths = [];
-      const hasBounds = colBounds.value.length === colCount;
+      const hasBounds = colBounds.value.length >= colCount;
+      const existingNonZero = colWidths.value.filter((w) => w > 0);
+      const avgWidth = existingNonZero.length > 0 ? Math.round(
+        existingNonZero.reduce((a, b) => a + b, 0) / existingNonZero.length
+      ) : 0;
       for (let i = 0; i < colCount; i++) {
-        const cell = firstRow.content.child(i);
-        const w = cell.attrs.colwidth;
-        if (Array.isArray(w) && w[0]) {
-          widths.push(w[0]);
-        } else if (hasBounds) {
-          widths.push(Math.round(colBounds.value[i].width));
-        } else {
-          widths.push(0);
+        const isNewColumn = i >= prevColCount;
+        let found = false;
+        node.value.forEach((row) => {
+          if (found) return;
+          let colIdx = 0;
+          row.forEach((cell) => {
+            if (found) return;
+            const colspan = cell.attrs.colspan || 1;
+            const colwidth = cell.attrs.colwidth;
+            if (colIdx === i) {
+              if (colspan > 1) {
+                if (Array.isArray(colwidth) && colwidth.length > 0) {
+                  const totalW = colwidth.reduce(
+                    (sum, w) => sum + (w || 0),
+                    0
+                  );
+                  widths.push(Math.round(totalW / colspan));
+                } else if (!isNewColumn && hasBounds && colBounds.value[i]) {
+                  widths.push(Math.round(colBounds.value[i].width));
+                } else {
+                  widths.push(avgWidth);
+                }
+              } else {
+                if (Array.isArray(colwidth) && colwidth[0]) {
+                  widths.push(colwidth[0]);
+                } else if (!isNewColumn && hasBounds && colBounds.value[i]) {
+                  widths.push(Math.round(colBounds.value[i].width));
+                } else {
+                  widths.push(avgWidth);
+                }
+              }
+              found = true;
+            }
+            colIdx += colspan;
+          });
+        });
+        if (!found) {
+          widths.push(
+            !isNewColumn && hasBounds && colBounds.value[i] ? Math.round(colBounds.value[i].width) : avgWidth
+          );
         }
       }
       colWidths.value = widths;
@@ -839,15 +901,23 @@ const TableBlock = defineComponent({
     const updateBounds = () => {
       const content = contentWrapperRef.value;
       if (!content) return;
-      const firstRow = content.querySelector("tr");
+      const rows = content.querySelectorAll("tr");
       const tableRect = content.getBoundingClientRect();
-      if (firstRow) {
-        colBounds.value = Array.from(firstRow.children).map((c) => {
+      const expectedColCount = getColCount();
+      let bestRow = null;
+      rows.forEach((row) => {
+        if (bestRow) return;
+        if (row.children.length === expectedColCount) {
+          bestRow = row;
+        }
+      });
+      const measureRow = bestRow != null ? bestRow : content.querySelector("tr");
+      if (measureRow) {
+        colBounds.value = Array.from(measureRow.children).map((c) => {
           const rect = c.getBoundingClientRect();
           return { left: rect.left - tableRect.left, width: rect.width };
         });
       }
-      const rows = content.querySelectorAll("tr");
       rowBounds.value = Array.from(rows).map((c) => {
         const rect = c.getBoundingClientRect();
         return { top: rect.top - tableRect.top, height: rect.height };
@@ -971,6 +1041,7 @@ const TableBlock = defineComponent({
     });
     watch(node, () => {
       dispatchListener();
+      requestAnimationFrame(updateBounds);
     });
     onBeforeUnmount(() => {
       view.dom.removeEventListener("keyup", dispatchListener);
@@ -1012,7 +1083,7 @@ const TableBlock = defineComponent({
             contenteditable: "false",
             onPointerdown: (e) => e.stopPropagation()
           },
-          /* @__PURE__ */ h(
+          canMerge.value ? /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -1020,8 +1091,7 @@ const TableBlock = defineComponent({
               onPointerdown: onMergeCells
             },
             /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })
-          ),
-          /* @__PURE__ */ h(
+          ) : canSplit.value ? /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -1029,7 +1099,7 @@ const TableBlock = defineComponent({
               onPointerdown: onSplitCell
             },
             /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") })
-          )
+          ) : void 0
         ),
         /* @__PURE__ */ h("div", { class: "table-wrapper", ref: tableWrapperRef }, /* @__PURE__ */ h("div", { contenteditable: "false", class: "fixed-handles-col" }, colBounds.value.map((bound, i) => /* @__PURE__ */ h(
           "div",
@@ -1060,6 +1130,7 @@ const TableBlock = defineComponent({
               "data-show": activeColIndex.value === i ? "true" : "false",
               onPointermove: (e) => e.stopPropagation()
             },
+            canMerge.value ? /* @__PURE__ */ h("button", { type: "button", onPointerdown: onMergeCells }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })) : canSplit.value ? /* @__PURE__ */ h("button", { type: "button", onPointerdown: onSplitCell }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") })) : void 0,
             /* @__PURE__ */ h(
               "button",
               {
@@ -1103,9 +1174,7 @@ const TableBlock = defineComponent({
                 }
               },
               /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_col") })
-            ),
-            canMerge.value && /* @__PURE__ */ h("button", { type: "button", onPointerdown: onMergeCells }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })),
-            canSplit.value && /* @__PURE__ */ h("button", { type: "button", onPointerdown: onSplitCell }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") }))
+            )
           )
         ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "add-dots-col" }, [
           ...colBounds.value.map((b) => b.left),
@@ -1161,6 +1230,7 @@ const TableBlock = defineComponent({
               "data-show": activeRowIndex.value === i ? "true" : "false",
               onPointermove: (e) => e.stopPropagation()
             },
+            canMerge.value ? /* @__PURE__ */ h("button", { type: "button", onPointerdown: onMergeCells }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })) : canSplit.value ? /* @__PURE__ */ h("button", { type: "button", onPointerdown: onSplitCell }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") })) : void 0,
             /* @__PURE__ */ h(
               "button",
               {
@@ -1171,9 +1241,7 @@ const TableBlock = defineComponent({
                 }
               },
               /* @__PURE__ */ h(Icon, { icon: config.renderButton("delete_row") })
-            ),
-            canMerge.value && /* @__PURE__ */ h("button", { type: "button", onPointerdown: onMergeCells }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("merge_cells") })),
-            canSplit.value && /* @__PURE__ */ h("button", { type: "button", onPointerdown: onSplitCell }, /* @__PURE__ */ h(Icon, { icon: config.renderButton("split_cell") }))
+            )
           )
         ))), /* @__PURE__ */ h("div", { contenteditable: "false", class: "add-dots-row" }, [
           ...rowBounds.value.map((b) => b.top),
@@ -1217,13 +1285,16 @@ const TableBlock = defineComponent({
             class: "handle line-handle",
             ref: yLineHandleRef
           }
-        ), /* @__PURE__ */ h("table", { ref: contentWrapperFunctionRef, class: "children" }, /* @__PURE__ */ h("colgroup", null, colWidths.value.map((w, i) => /* @__PURE__ */ h(
-          "col",
-          {
-            key: i,
-            style: w > 0 ? { width: `${w}px` } : void 0
-          }
-        )))))
+        ), /* @__PURE__ */ h("table", { ref: contentWrapperFunctionRef, class: "children" }, /* @__PURE__ */ h("colgroup", null, Array.from({ length: getColCount() }, (_, i) => {
+          const w = colWidths.value[i];
+          return /* @__PURE__ */ h(
+            "col",
+            {
+              key: i,
+              style: w && w > 0 ? { width: `${w}px` } : void 0
+            }
+          );
+        }))))
       );
     };
   }