@jvs-milkdown/components 1.1.9 → 1.2.0

package/lib/table-block/index.js

@@ -556,6 +556,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 +568,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 +580,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 +593,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 +732,60 @@ 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 widths = [];
       const hasBounds = colBounds.value.length === colCount;
       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);
+        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 (hasBounds) {
+                  widths.push(Math.round(colBounds.value[i].width));
+                } else {
+                  widths.push(0);
+                }
+              } else {
+                if (Array.isArray(colwidth) && colwidth[0]) {
+                  widths.push(colwidth[0]);
+                } else if (hasBounds) {
+                  widths.push(Math.round(colBounds.value[i].width));
+                } else {
+                  widths.push(0);
+                }
+              }
+              found = true;
+            }
+            colIdx += colspan;
+          });
+        });
+        if (!found) {
+          widths.push(hasBounds ? Math.round(colBounds.value[i].width) : 0);
         }
       }
       colWidths.value = widths;
@@ -839,15 +881,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 +1021,7 @@ const TableBlock = defineComponent({
     });
     watch(node, () => {
       dispatchListener();
+      requestAnimationFrame(updateBounds);
     });
     onBeforeUnmount(() => {
       view.dom.removeEventListener("keyup", dispatchListener);
@@ -1012,7 +1063,7 @@ const TableBlock = defineComponent({
             contenteditable: "false",
             onPointerdown: (e) => e.stopPropagation()
           },
-          /* @__PURE__ */ h(
+          canMerge.value ? /* @__PURE__ */ h(
             "button",
             {
               type: "button",
@@ -1020,8 +1071,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 +1079,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 +1110,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 +1154,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 +1210,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 +1221,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),