@milkdown/crepe 7.4.0 → 7.5.0

package/lib/esm/index-8QJbxTYk.js

@@ -0,0 +1,1145 @@
+import { w as withMeta, G as dragHandleIcon, H as alignRightIcon, I as alignCenterIcon, J as alignLeftIcon, r as removeIcon, B as plusIcon } from './todoList-M-PGJKde.js';
+import { $ as $ctx, e as editorViewCtx, C as findTable, u as commandsCtx, D as selectColCommand, E as moveColCommand, F as selectRowCommand, G as moveRowCommand, H as addRowAfterCommand, I as addRowBeforeCommand, J as addColAfterCommand, K as addColBeforeCommand, L as deleteSelectedCellsCommand, M as setAlignCommand, N as tableSchema } from './index-LAdX6LsO.js';
+import { NodeSelection } from '@milkdown/prose/state';
+import { findParent } from '@milkdown/prose';
+import { CellSelection } from '@milkdown/prose/tables';
+import { d as defIfNotExists } from './helper-wZAtC67x.js';
+import { useHost, useMemo, useEffect, useCallback, c, useRef, useLayoutEffect, html } from 'atomico';
+import { c as clsx } from './clsx-RxCLxYpD.js';
+import { t as throttle } from './index-uP9BKsTM.js';
+import { c as computePosition, o as offset } from './floating-ui.dom-CAYjY8Gv.js';
+import { $ as $view } from './_view-IlZC8FA6.js';
+import '@milkdown/prose/model';
+import '@milkdown/prose/commands';
+import '@milkdown/prose/inputrules';
+import '@milkdown/prose/keymap';
+import '@milkdown/prose/view';
+import '@milkdown/prose/schema-list';
+import '@milkdown/prose/transform';
+import '@milkdown/prose/history';
+
+const defaultTableBlockConfig = {
+  renderButton: (renderType) => {
+    switch (renderType) {
+      case "add_row":
+        return "+";
+      case "add_col":
+        return "+";
+      case "delete_row":
+        return "-";
+      case "delete_col":
+        return "-";
+      case "align_col_left":
+        return "left";
+      case "align_col_center":
+        return "center";
+      case "align_col_right":
+        return "right";
+      case "col_drag_handle":
+        return "=";
+      case "row_drag_handle":
+        return "=";
+    }
+  }
+};
+const tableBlockConfig = $ctx({ ...defaultTableBlockConfig }, "tableBlockConfigCtx");
+withMeta(tableBlockConfig, {
+  displayName: "Config<table-block>",
+  group: "TableBlock"
+});
+
+function findNodeIndex(parent, child) {
+  for (let i = 0; i < parent.childCount; i++) {
+    if (parent.child(i) === child)
+      return i;
+  }
+  return -1;
+}
+function findPointerIndex(event, view) {
+  var _a, _b, _c;
+  if (!view)
+    return;
+  const posAtCoords = view.posAtCoords({ left: event.clientX, top: event.clientY });
+  if (!posAtCoords)
+    return;
+  const pos = posAtCoords == null ? void 0 : posAtCoords.inside;
+  if (pos == null || pos < 0)
+    return;
+  const $pos = view.state.doc.resolve(pos);
+  const node = view.state.doc.nodeAt(pos);
+  if (!node)
+    return;
+  const cellType = ["table_cell", "table_header"];
+  const rowType = ["table_row", "table_header_row"];
+  const cell = cellType.includes(node.type.name) ? node : (_a = findParent((node2) => cellType.includes(node2.type.name))($pos)) == null ? void 0 : _a.node;
+  const row = (_b = findParent((node2) => rowType.includes(node2.type.name))($pos)) == null ? void 0 : _b.node;
+  const table = (_c = findParent((node2) => node2.type.name === "table")($pos)) == null ? void 0 : _c.node;
+  if (!cell || !row || !table)
+    return;
+  const columnIndex = findNodeIndex(row, cell);
+  const rowIndex = findNodeIndex(table, row);
+  return [rowIndex, columnIndex];
+}
+function getRelatedDOM(contentWrapperRef, [rowIndex, columnIndex]) {
+  const content = contentWrapperRef.current;
+  if (!content)
+    return;
+  const rows = content.querySelectorAll("tr");
+  const row = rows[rowIndex];
+  if (!row)
+    return;
+  const firstRow = rows[0];
+  if (!firstRow)
+    return;
+  const headerCol = firstRow.children[columnIndex];
+  if (!headerCol)
+    return;
+  const col = row.children[columnIndex];
+  if (!col)
+    return;
+  return {
+    row,
+    col,
+    headerCol
+  };
+}
+function recoveryStateBetweenUpdate(refs, ctx, node) {
+  if (!ctx)
+    return;
+  if (!node)
+    return;
+  const { selection } = ctx.get(editorViewCtx).state;
+  if (!(selection instanceof CellSelection))
+    return;
+  const { $from } = selection;
+  const table = findTable($from);
+  if (!table || table.node !== node)
+    return;
+  if (selection.isColSelection()) {
+    const { $head } = selection;
+    const colIndex = $head.index($head.depth - 1);
+    computeColHandlePositionByIndex({
+      refs,
+      index: [0, colIndex],
+      before: (handleDOM) => {
+        var _a;
+        (_a = handleDOM.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "true");
+      }
+    });
+    return;
+  }
+  if (selection.isRowSelection()) {
+    const { $head } = selection;
+    const rowNode = findParent((node2) => node2.type.name === "table_row" || node2.type.name === "table_header_row")($head);
+    if (!rowNode)
+      return;
+    const rowIndex = findNodeIndex(table.node, rowNode.node);
+    computeRowHandlePositionByIndex({
+      refs,
+      index: [rowIndex, 0],
+      before: (handleDOM) => {
+        var _a;
+        if (rowIndex > 0)
+          (_a = handleDOM.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "true");
+      }
+    });
+  }
+}
+function computeColHandlePositionByIndex({
+  refs,
+  index,
+  before,
+  after
+}) {
+  const {
+    contentWrapperRef,
+    colHandleRef,
+    hoverIndex
+  } = refs;
+  const colHandle = colHandleRef.current;
+  if (!colHandle)
+    return;
+  hoverIndex.current = index;
+  const dom = getRelatedDOM(contentWrapperRef, index);
+  if (!dom)
+    return;
+  const { headerCol: col } = dom;
+  colHandle.dataset.show = "true";
+  if (before)
+    before(colHandle);
+  computePosition(col, colHandle, { placement: "top" }).then(({ x, y }) => {
+    Object.assign(colHandle.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+    if (after)
+      after(colHandle);
+  });
+}
+function computeRowHandlePositionByIndex({
+  refs,
+  index,
+  before,
+  after
+}) {
+  const {
+    contentWrapperRef,
+    rowHandleRef,
+    hoverIndex
+  } = refs;
+  const rowHandle = rowHandleRef.current;
+  if (!rowHandle)
+    return;
+  hoverIndex.current = index;
+  const dom = getRelatedDOM(contentWrapperRef, index);
+  if (!dom)
+    return;
+  const { row } = dom;
+  rowHandle.dataset.show = "true";
+  if (before)
+    before(rowHandle);
+  computePosition(row, rowHandle, { placement: "left" }).then(({ x, y }) => {
+    Object.assign(rowHandle.style, {
+      left: `${x}px`,
+      top: `${y}px`
+    });
+    if (after)
+      after(rowHandle);
+  });
+}
+
+function prepareDndContext(refs) {
+  const {
+    dragPreviewRef,
+    tableWrapperRef,
+    contentWrapperRef,
+    yLineHandleRef,
+    xLineHandleRef,
+    colHandleRef,
+    rowHandleRef
+  } = refs;
+  const preview = dragPreviewRef.current;
+  if (!preview)
+    return;
+  const wrapper = tableWrapperRef.current;
+  if (!wrapper)
+    return;
+  const content = contentWrapperRef.current;
+  if (!content)
+    return;
+  const contentRoot = content.querySelector("tbody");
+  if (!contentRoot)
+    return;
+  const previewRoot = preview.querySelector("tbody");
+  if (!previewRoot)
+    return;
+  const yHandle = yLineHandleRef.current;
+  if (!yHandle)
+    return;
+  const xHandle = xLineHandleRef.current;
+  if (!xHandle)
+    return;
+  const colHandle = colHandleRef.current;
+  if (!colHandle)
+    return;
+  const rowHandle = rowHandleRef.current;
+  if (!rowHandle)
+    return;
+  const context = {
+    preview,
+    wrapper,
+    content,
+    contentRoot,
+    previewRoot,
+    yHandle,
+    xHandle,
+    colHandle,
+    rowHandle
+  };
+  return context;
+}
+function handleDrag(refs, event, ctx, fn) {
+  const view = ctx == null ? void 0 : ctx.get(editorViewCtx);
+  if (!(view == null ? void 0 : view.editable))
+    return;
+  event.stopPropagation();
+  if (event.dataTransfer)
+    event.dataTransfer.effectAllowed = "move";
+  const context = prepareDndContext(refs);
+  if (!context)
+    return;
+  requestAnimationFrame(() => {
+    fn(context);
+  });
+}
+function createDragRowHandler(refs, ctx) {
+  return (event) => {
+    handleDrag(refs, event, ctx, ({
+      preview,
+      content,
+      previewRoot,
+      yHandle,
+      xHandle,
+      colHandle,
+      rowHandle
+    }) => {
+      var _a;
+      const { hoverIndex, dragInfo } = refs;
+      xHandle.dataset.displayType = "indicator";
+      yHandle.dataset.show = "false";
+      colHandle.dataset.show = "false";
+      (_a = rowHandle.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "false");
+      const [rowIndex] = hoverIndex.current;
+      dragInfo.current = {
+        startCoords: [event.clientX, event.clientY],
+        startIndex: rowIndex,
+        endIndex: rowIndex,
+        type: "row"
+      };
+      preview.dataset.direction = "vertical";
+      const rows = content.querySelectorAll("tr");
+      while (previewRoot.firstChild)
+        previewRoot.removeChild(previewRoot.firstChild);
+      const row = rows[rowIndex];
+      if (!row)
+        return;
+      previewRoot.appendChild(row.cloneNode(true));
+      const height = row.getBoundingClientRect().height;
+      const { width } = content.querySelector("tbody").getBoundingClientRect();
+      Object.assign(preview.style, {
+        width: `${width}px`,
+        height: `${height}px`
+      });
+      preview.dataset.show = "true";
+    });
+  };
+}
+function createDragColHandler(refs, ctx) {
+  return (event) => {
+    handleDrag(refs, event, ctx, ({
+      preview,
+      content,
+      previewRoot,
+      yHandle,
+      xHandle,
+      colHandle,
+      rowHandle
+    }) => {
+      var _a;
+      const { hoverIndex, dragInfo } = refs;
+      xHandle.dataset.show = "false";
+      yHandle.dataset.displayType = "indicator";
+      rowHandle.dataset.show = "false";
+      (_a = colHandle.querySelector(".button-group")) == null ? void 0 : _a.setAttribute("data-show", "false");
+      const [_, colIndex] = hoverIndex.current;
+      dragInfo.current = {
+        startCoords: [event.clientX, event.clientY],
+        startIndex: colIndex,
+        endIndex: colIndex,
+        type: "col"
+      };
+      preview.dataset.direction = "horizontal";
+      const rows = content.querySelectorAll("tr");
+      while (previewRoot.firstChild)
+        previewRoot.removeChild(previewRoot.firstChild);
+      let width;
+      Array.from(rows).forEach((row) => {
+        const col = row.children[colIndex];
+        if (!col)
+          return;
+        if (width === void 0)
+          width = col.getBoundingClientRect().width;
+        const tr = col.parentElement.cloneNode(false);
+        const clone = col.cloneNode(true);
+        tr.appendChild(clone);
+        previewRoot.appendChild(tr);
+      });
+      const { height } = content.querySelector("tbody").getBoundingClientRect();
+      Object.assign(preview.style, {
+        width: `${width}px`,
+        height: `${height}px`
+      });
+      preview.dataset.show = "true";
+    });
+  };
+}
+function createDragOverHandler(refs) {
+  return throttle((e) => {
+    const context = prepareDndContext(refs);
+    if (!context)
+      return;
+    const {
+      preview,
+      content,
+      contentRoot,
+      xHandle,
+      yHandle
+    } = context;
+    const {
+      dragInfo,
+      hoverIndex
+    } = refs;
+    if (preview.dataset.show === "false")
+      return;
+    const dom = getRelatedDOM(refs.contentWrapperRef, hoverIndex.current);
+    if (!dom)
+      return;
+    const firstRow = contentRoot.querySelector("tr");
+    if (!firstRow)
+      return;
+    const info = dragInfo.current;
+    if (!info)
+      return;
+    const wrapperOffsetTop = contentRoot.offsetParent.offsetTop;
+    const wrapperOffsetLeft = contentRoot.offsetParent.offsetLeft;
+    if (info.type === "col") {
+      const width = dom.col.getBoundingClientRect().width;
+      const { left, width: fullWidth } = contentRoot.getBoundingClientRect();
+      const leftGap = wrapperOffsetLeft - left;
+      const previewLeft = e.clientX + leftGap - width / 2;
+      const previewRight = e.clientX + leftGap + width / 2;
+      const [startX] = info.startCoords;
+      const direction = startX < e.clientX ? "right" : "left";
+      preview.style.top = `${wrapperOffsetTop}px`;
+      const previewLeftOffset = previewLeft < left + leftGap - 20 ? left + leftGap - 20 : previewLeft > left + fullWidth + leftGap - width + 20 ? left + fullWidth + leftGap - width + 20 : previewLeft;
+      preview.style.left = `${previewLeftOffset}px`;
+      const children = Array.from(firstRow.children);
+      const col = children.find((col2, index) => {
+        const boundary = col2.getBoundingClientRect();
+        const boundaryLeft = boundary.left + wrapperOffsetLeft - left;
+        const boundaryRight = boundary.right + wrapperOffsetLeft - left;
+        if (direction === "right") {
+          if (boundaryLeft <= previewRight && boundaryRight >= previewRight)
+            return true;
+          if (index === firstRow.children.length - 1 && previewRight > boundaryRight)
+            return true;
+        } else {
+          if (boundaryLeft <= previewLeft && boundaryRight >= previewLeft)
+            return true;
+          if (index === 0 && previewLeft < boundaryLeft)
+            return true;
+        }
+        return false;
+      });
+      if (col) {
+        const yHandleWidth = yHandle.getBoundingClientRect().width;
+        const contentBoundary = content.getBoundingClientRect();
+        const index = children.indexOf(col);
+        info.endIndex = index;
+        computePosition(col, yHandle, {
+          placement: direction === "left" ? "left" : "right",
+          middleware: [offset(direction === "left" ? -1 * yHandleWidth : 0)]
+        }).then(({ x }) => {
+          yHandle.dataset.show = "true";
+          Object.assign(yHandle.style, {
+            height: `${contentBoundary.height}px`,
+            left: `${x}px`,
+            top: `${wrapperOffsetTop}px`
+          });
+        });
+      }
+    } else if (info.type === "row") {
+      const height = dom.row.getBoundingClientRect().height;
+      const { top, height: fullHeight } = contentRoot.getBoundingClientRect();
+      const topGap = wrapperOffsetTop - top;
+      const previewTop = e.clientY + topGap - height / 2;
+      const previewBottom = e.clientY + topGap + height / 2;
+      const [_, startY] = info.startCoords;
+      const direction = startY < e.clientY ? "down" : "up";
+      const previewTopOffset = previewTop < top + topGap - 20 ? top + topGap - 20 : previewTop > top + fullHeight + topGap - height + 20 ? top + fullHeight + topGap - height + 20 : previewTop;
+      preview.style.top = `${previewTopOffset}px`;
+      preview.style.left = `${wrapperOffsetLeft}px`;
+      const rows = Array.from(contentRoot.querySelectorAll("tr"));
+      const row = rows.find((row2, index) => {
+        const boundary = row2.getBoundingClientRect();
+        const boundaryTop = boundary.top + wrapperOffsetTop - top;
+        const boundaryBottom = boundary.bottom + wrapperOffsetTop - top;
+        if (direction === "down") {
+          if (boundaryTop <= previewBottom && boundaryBottom >= previewBottom)
+            return true;
+          if (index === rows.length - 1 && previewBottom > boundaryBottom)
+            return true;
+        } else {
+          if (boundaryTop <= previewTop && boundaryBottom >= previewTop)
+            return true;
+          if (index === 0 && previewTop < boundaryTop)
+            return true;
+        }
+        return false;
+      });
+      if (row) {
+        const xHandleHeight = xHandle.getBoundingClientRect().height;
+        const contentBoundary = content.getBoundingClientRect();
+        const index = rows.indexOf(row);
+        info.endIndex = index;
+        computePosition(row, xHandle, {
+          placement: direction === "up" ? "top" : "bottom",
+          middleware: [offset(direction === "up" ? -1 * xHandleHeight : 0)]
+        }).then(({ y }) => {
+          xHandle.dataset.show = "true";
+          Object.assign(xHandle.style, {
+            width: `${contentBoundary.width}px`,
+            top: `${y}px`
+          });
+        });
+      }
+    }
+  }, 20);
+}
+function useDragHandlers(refs, ctx, getPos) {
+  const {
+    dragPreviewRef,
+    yLineHandleRef,
+    xLineHandleRef,
+    dragInfo
+  } = refs;
+  const host = useHost();
+  const root = useMemo(() => host.current.getRootNode(), [host]);
+  const dragRow = useMemo(() => createDragRowHandler(refs, ctx), [refs]);
+  const dragCol = useMemo(() => createDragColHandler(refs, ctx), [refs]);
+  useEffect(() => {
+    const onDragEnd = () => {
+      const preview = dragPreviewRef.current;
+      if (!preview)
+        return;
+      if (preview.dataset.show === "false")
+        return;
+      const previewRoot = preview == null ? void 0 : preview.querySelector("tbody");
+      while (previewRoot == null ? void 0 : previewRoot.firstChild)
+        previewRoot == null ? void 0 : previewRoot.removeChild(previewRoot.firstChild);
+      if (preview)
+        preview.dataset.show = "false";
+    };
+    const onDrop = () => {
+      var _a;
+      const preview = dragPreviewRef.current;
+      if (!preview)
+        return;
+      const yHandle = yLineHandleRef.current;
+      if (!yHandle)
+        return;
+      const xHandle = xLineHandleRef.current;
+      if (!xHandle)
+        return;
+      const info = dragInfo.current;
+      if (!info)
+        return;
+      if (!ctx)
+        return;
+      if (preview.dataset.show === "false")
+        return;
+      const colHandle = refs.colHandleRef.current;
+      if (!colHandle)
+        return;
+      const rowHandle = refs.rowHandleRef.current;
+      if (!rowHandle)
+        return;
+      yHandle.dataset.show = "false";
+      xHandle.dataset.show = "false";
+      if (info.startIndex === info.endIndex)
+        return;
+      const commands = ctx.get(commandsCtx);
+      const payload = {
+        from: info.startIndex,
+        to: info.endIndex,
+        pos: ((_a = getPos == null ? void 0 : getPos()) != null ? _a : 0) + 1
+      };
+      if (info.type === "col") {
+        commands.call(selectColCommand.key, {
+          pos: payload.pos,
+          index: info.startIndex
+        });
+        commands.call(moveColCommand.key, payload);
+        const index = [0, info.endIndex];
+        computeColHandlePositionByIndex({
+          refs,
+          index
+        });
+      } else {
+        commands.call(selectRowCommand.key, {
+          pos: payload.pos,
+          index: info.startIndex
+        });
+        commands.call(moveRowCommand.key, payload);
+        const index = [info.endIndex, 0];
+        computeRowHandlePositionByIndex({
+          refs,
+          index
+        });
+      }
+    };
+    const onDragOver = createDragOverHandler(refs);
+    root.addEventListener("dragover", onDragOver);
+    root.addEventListener("dragend", onDragEnd);
+    root.addEventListener("drop", onDrop);
+    return () => {
+      root.removeEventListener("dragover", onDragOver);
+      root.removeEventListener("dragend", onDragEnd);
+      root.removeEventListener("drop", onDrop);
+    };
+  }, []);
+  return {
+    dragRow,
+    dragCol
+  };
+}
+
+function createPointerMoveHandler(refs, view) {
+  return throttle((e) => {
+    if (!(view == null ? void 0 : view.editable))
+      return;
+    const {
+      contentWrapperRef,
+      yLineHandleRef,
+      xLineHandleRef,
+      colHandleRef,
+      rowHandleRef,
+      hoverIndex,
+      lineHoverIndex
+    } = refs;
+    const yHandle = yLineHandleRef.current;
+    if (!yHandle)
+      return;
+    const xHandle = xLineHandleRef.current;
+    if (!xHandle)
+      return;
+    const content = contentWrapperRef.current;
+    if (!content)
+      return;
+    const rowHandle = rowHandleRef.current;
+    if (!rowHandle)
+      return;
+    const colHandle = colHandleRef.current;
+    if (!colHandle)
+      return;
+    const index = findPointerIndex(e, view);
+    if (!index)
+      return;
+    const dom = getRelatedDOM(contentWrapperRef, index);
+    if (!dom)
+      return;
+    const [rowIndex, colIndex] = index;
+    const boundary = dom.col.getBoundingClientRect();
+    const closeToBoundaryLeft = Math.abs(e.clientX - boundary.left) < 8;
+    const closeToBoundaryRight = Math.abs(boundary.right - e.clientX) < 8;
+    const closeToBoundaryTop = Math.abs(e.clientY - boundary.top) < 8;
+    const closeToBoundaryBottom = Math.abs(boundary.bottom - e.clientY) < 8;
+    const closeToBoundary = closeToBoundaryLeft || closeToBoundaryRight || closeToBoundaryTop || closeToBoundaryBottom;
+    const rowButtonGroup = rowHandle.querySelector(".button-group");
+    const colButtonGroup = colHandle.querySelector(".button-group");
+    if (rowButtonGroup)
+      rowButtonGroup.dataset.show = "false";
+    if (colButtonGroup)
+      colButtonGroup.dataset.show = "false";
+    if (closeToBoundary) {
+      const contentBoundary = content.getBoundingClientRect();
+      rowHandle.dataset.show = "false";
+      colHandle.dataset.show = "false";
+      xHandle.dataset.displayType = "tool";
+      yHandle.dataset.displayType = "tool";
+      const yHandleWidth = yHandle.getBoundingClientRect().width;
+      const xHandleHeight = xHandle.getBoundingClientRect().height;
+      if (closeToBoundaryLeft || closeToBoundaryRight) {
+        lineHoverIndex.current[1] = closeToBoundaryLeft ? colIndex : colIndex + 1;
+        computePosition(dom.col, yHandle, {
+          placement: closeToBoundaryLeft ? "left" : "right",
+          middleware: [offset(closeToBoundaryLeft ? -1 * yHandleWidth : 0)]
+        }).then(({ x }) => {
+          yHandle.dataset.show = "true";
+          Object.assign(yHandle.style, {
+            height: `${contentBoundary.height}px`,
+            left: `${x}px`
+          });
+        });
+      } else {
+        yHandle.dataset.show = "false";
+      }
+      if (index[0] !== 0 && (closeToBoundaryTop || closeToBoundaryBottom)) {
+        lineHoverIndex.current[0] = closeToBoundaryTop ? rowIndex : rowIndex + 1;
+        computePosition(dom.row, xHandle, {
+          placement: closeToBoundaryTop ? "top" : "bottom",
+          middleware: [offset(closeToBoundaryTop ? -1 * xHandleHeight : 0)]
+        }).then(({ y }) => {
+          xHandle.dataset.show = "true";
+          Object.assign(xHandle.style, {
+            width: `${contentBoundary.width}px`,
+            top: `${y}px`
+          });
+        });
+      } else {
+        xHandle.dataset.show = "false";
+      }
+      return;
+    }
+    lineHoverIndex.current = [-1, -1];
+    yHandle.dataset.show = "false";
+    xHandle.dataset.show = "false";
+    rowHandle.dataset.show = "true";
+    colHandle.dataset.show = "true";
+    computeRowHandlePositionByIndex({
+      refs,
+      index
+    });
+    computeColHandlePositionByIndex({
+      refs,
+      index
+    });
+    hoverIndex.current = index;
+  }, 20);
+}
+function createPointerLeaveHandler(refs) {
+  return () => {
+    const {
+      rowHandleRef,
+      colHandleRef,
+      yLineHandleRef,
+      xLineHandleRef
+    } = refs;
+    setTimeout(() => {
+      const rowHandle = rowHandleRef.current;
+      if (!rowHandle)
+        return;
+      const colHandle = colHandleRef.current;
+      if (!colHandle)
+        return;
+      const yHandle = yLineHandleRef.current;
+      if (!yHandle)
+        return;
+      const xHandle = xLineHandleRef.current;
+      if (!xHandle)
+        return;
+      rowHandle.dataset.show = "false";
+      colHandle.dataset.show = "false";
+      yHandle.dataset.show = "false";
+      xHandle.dataset.show = "false";
+    }, 200);
+  };
+}
+function usePointerHandlers(refs, view) {
+  const pointerMove = useMemo(() => createPointerMoveHandler(refs, view), []);
+  const pointerLeave = useMemo(() => createPointerLeaveHandler(refs), []);
+  return {
+    pointerMove,
+    pointerLeave
+  };
+}
+
+function useOperation(refs, ctx, getPos) {
+  const {
+    xLineHandleRef,
+    contentWrapperRef,
+    colHandleRef,
+    rowHandleRef,
+    hoverIndex,
+    lineHoverIndex
+  } = refs;
+  const onAddRow = useCallback(() => {
+    var _a, _b, _c;
+    if (!ctx)
+      return;
+    const xHandle = xLineHandleRef.current;
+    if (!xHandle)
+      return;
+    const [rowIndex] = lineHoverIndex.current;
+    if (rowIndex < 0)
+      return;
+    if (!ctx.get(editorViewCtx).editable)
+      return;
+    const rows = Array.from((_b = (_a = contentWrapperRef.current) == 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 === rowIndex) {
+      commands.call(selectRowCommand.key, { pos, index: rowIndex - 1 });
+      commands.call(addRowAfterCommand.key);
+    } else {
+      commands.call(selectRowCommand.key, { pos, index: rowIndex });
+      commands.call(addRowBeforeCommand.key);
+    }
+    commands.call(selectRowCommand.key, { pos, index: rowIndex });
+    xHandle.dataset.show = "false";
+  }, []);
+  const onAddCol = useCallback(() => {
+    var _a, _b, _c, _d;
+    if (!ctx)
+      return;
+    const xHandle = xLineHandleRef.current;
+    if (!xHandle)
+      return;
+    const [_, colIndex] = lineHoverIndex.current;
+    if (colIndex < 0)
+      return;
+    if (!ctx.get(editorViewCtx).editable)
+      return;
+    const cols = Array.from((_c = (_b = (_a = contentWrapperRef.current) == 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 === colIndex) {
+      commands.call(selectColCommand.key, { pos, index: colIndex - 1 });
+      commands.call(addColAfterCommand.key);
+    } else {
+      commands.call(selectColCommand.key, { pos, index: colIndex });
+      commands.call(addColBeforeCommand.key);
+    }
+    commands.call(selectColCommand.key, { pos, index: colIndex });
+  }, []);
+  const selectCol = useCallback(() => {
+    var _a, _b;
+    if (!ctx)
+      return;
+    const [_, colIndex] = hoverIndex.current;
+    const commands = ctx.get(commandsCtx);
+    const pos = ((_a = getPos == null ? void 0 : getPos()) != null ? _a : 0) + 1;
+    commands.call(selectColCommand.key, { pos, index: colIndex });
+    const buttonGroup = (_b = colHandleRef.current) == null ? void 0 : _b.querySelector(".button-group");
+    if (buttonGroup)
+      buttonGroup.dataset.show = buttonGroup.dataset.show === "true" ? "false" : "true";
+  }, []);
+  const selectRow = useCallback(() => {
+    var _a, _b;
+    if (!ctx)
+      return;
+    const [rowIndex, _] = hoverIndex.current;
+    const commands = ctx.get(commandsCtx);
+    const pos = ((_a = getPos == null ? void 0 : getPos()) != null ? _a : 0) + 1;
+    commands.call(selectRowCommand.key, { pos, index: rowIndex });
+    const buttonGroup = (_b = rowHandleRef.current) == null ? void 0 : _b.querySelector(".button-group");
+    if (buttonGroup && rowIndex > 0)
+      buttonGroup.dataset.show = buttonGroup.dataset.show === "true" ? "false" : "true";
+  }, []);
+  const deleteSelected = useCallback((e) => {
+    if (!ctx)
+      return;
+    if (!ctx.get(editorViewCtx).editable)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    const commands = ctx.get(commandsCtx);
+    commands.call(deleteSelectedCellsCommand.key);
+  }, []);
+  const onAlign = useCallback((direction) => (e) => {
+    if (!ctx)
+      return;
+    if (!ctx.get(editorViewCtx).editable)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    const commands = ctx.get(commandsCtx);
+    commands.call(setAlignCommand.key, direction);
+  }, []);
+  return {
+    onAddRow,
+    onAddCol,
+    selectCol,
+    selectRow,
+    deleteSelected,
+    onAlign
+  };
+}
+
+const tableComponent = ({
+  view,
+  ctx,
+  getPos,
+  node,
+  config
+}) => {
+  const host = useHost();
+  const contentWrapperRef = useRef();
+  const colHandleRef = useRef();
+  const rowHandleRef = useRef();
+  const xLineHandleRef = useRef();
+  const yLineHandleRef = useRef();
+  const tableWrapperRef = useRef();
+  const dragPreviewRef = useRef();
+  const hoverIndex = useRef([0, 0]);
+  const lineHoverIndex = useRef([-1, -1]);
+  const dragInfo = useRef();
+  const refs = useMemo(() => {
+    return {
+      dragPreviewRef,
+      tableWrapperRef,
+      contentWrapperRef,
+      yLineHandleRef,
+      xLineHandleRef,
+      colHandleRef,
+      rowHandleRef,
+      hoverIndex,
+      lineHoverIndex,
+      dragInfo
+    };
+  }, []);
+  useLayoutEffect(() => {
+    const current = contentWrapperRef.current;
+    if (!current)
+      return;
+    const contentDOM = host.current.querySelector("[data-content-dom]");
+    if (contentDOM)
+      current.appendChild(contentDOM);
+    if (view == null ? void 0 : view.editable)
+      recoveryStateBetweenUpdate(refs, ctx, node);
+  }, []);
+  const { pointerLeave, pointerMove } = usePointerHandlers(refs, view);
+  const { dragRow, dragCol } = useDragHandlers(refs, ctx, getPos);
+  const {
+    onAddRow,
+    onAddCol,
+    selectCol,
+    selectRow,
+    deleteSelected,
+    onAlign
+  } = useOperation(refs, ctx, getPos);
+  return html`
+    <host
+      class=${clsx(!(view == null ? void 0 : view.editable) && "readonly")}
+      ondragstart=${(e) => e.preventDefault()}
+      ondragover=${(e) => e.preventDefault()}
+      ondragleave=${(e) => e.preventDefault()}
+      onpointermove=${pointerMove}
+      onpointerleave=${pointerLeave}
+    >
+      <button
+        data-show="false"
+        contenteditable="false"
+        draggable="true"
+        data-role="col-drag-handle"
+        class="handle cell-handle"
+        ondragstart=${dragCol}
+        onclick=${selectCol}
+        onpointerdown=${(e) => e.stopPropagation()}
+        onpointermove=${(e) => e.stopPropagation()}
+        ref=${colHandleRef}
+      >
+        ${config == null ? void 0 : config.renderButton("col_drag_handle")}
+        <div
+          data-show="false"
+          class="button-group"
+          onpointermove=${(e) => e.stopPropagation}
+        >
+          <button onpointerdown=${onAlign("left")}>
+            ${config == null ? void 0 : config.renderButton("align_col_left")}
+          </button>
+          <button onpointerdown=${onAlign("center")}>
+            ${config == null ? void 0 : config.renderButton("align_col_center")}
+          </button>
+          <button onpointerdown=${onAlign("right")}>
+            ${config == null ? void 0 : config.renderButton("align_col_right")}
+          </button>
+          <button onpointerdown=${deleteSelected}>
+            ${config == null ? void 0 : config.renderButton("delete_col")}
+          </button>
+        </div>
+      </button>
+      <button
+        data-show="false"
+        contenteditable="false"
+        draggable="true"
+        data-role="row-drag-handle"
+        class="handle cell-handle"
+        ondragstart=${dragRow}
+        onclick=${selectRow}
+        onpointerdown=${(e) => e.stopPropagation()}
+        onpointermove=${(e) => e.stopPropagation()}
+        ref=${rowHandleRef}
+      >
+        ${config == null ? void 0 : config.renderButton("row_drag_handle")}
+        <div
+          data-show="false"
+          class="button-group"
+          onpointermove=${(e) => e.stopPropagation}
+        >
+          <button onpointerdown=${deleteSelected}>
+            ${config == null ? void 0 : config.renderButton("delete_row")}
+          </button>
+        </div>
+      </button>
+      <div class="table-wrapper" ref=${tableWrapperRef}>
+        <div
+          data-show="false"
+          class="drag-preview"
+          data-direction="vertical"
+          ref=${dragPreviewRef}
+        >
+          <table>
+            <tbody>
+            </tbody>
+          </table>
+        </div>
+        <div
+          data-show="false"
+          contenteditable="false"
+          data-display-type="tool"
+          data-role="x-line-drag-handle"
+          class="handle line-handle"
+          onpointermove=${(e) => e.stopPropagation}
+          ref=${xLineHandleRef}
+        >
+          <button onclick=${onAddRow} class="add-button">
+            ${config == null ? void 0 : config.renderButton("add_row")}
+          </button>
+        </div>
+        <div
+          data-show="false"
+          contenteditable="false"
+          data-display-type="tool"
+          data-role="y-line-drag-handle"
+          class="handle line-handle"
+          onpointermove=${(e) => e.stopPropagation}
+          ref=${yLineHandleRef}
+        >
+          <button onclick=${onAddCol} class="add-button">
+            ${config == null ? void 0 : config.renderButton("add_col")}
+          </button>
+        </div>
+        <table ref=${contentWrapperRef} class="children"></table>
+      </div>
+    </host>
+  `;
+};
+tableComponent.props = {
+  getPos: Function,
+  view: Object,
+  ctx: Object,
+  node: Object,
+  config: Object
+};
+const TableElement = c(tableComponent);
+
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _TableNodeView_instances, handleClick_fn;
+class TableNodeView {
+  constructor(ctx, node, view, getPos) {
+    this.ctx = ctx;
+    this.node = node;
+    this.view = view;
+    this.getPos = getPos;
+    __privateAdd(this, _TableNodeView_instances);
+    const dom = document.createElement("milkdown-table-block");
+    this.dom = dom;
+    dom.view = view;
+    dom.ctx = ctx;
+    dom.getPos = getPos;
+    dom.node = node;
+    dom.config = ctx.get(tableBlockConfig.key);
+    const contentDOM = document.createElement("tbody");
+    this.contentDOM = contentDOM;
+    contentDOM.setAttribute("data-content-dom", "true");
+    contentDOM.classList.add("content-dom");
+    dom.appendChild(contentDOM);
+  }
+  update(node) {
+    if (node.type !== this.node.type)
+      return false;
+    if (node.sameMarkup(this.node) && node.content.eq(this.node.content))
+      return false;
+    this.node = node;
+    this.dom.node = node;
+    return true;
+  }
+  stopEvent(e) {
+    if (e.type === "drop" || e.type.startsWith("drag"))
+      return true;
+    if (e.type === "mousedown") {
+      if (e.target instanceof HTMLButtonElement)
+        return true;
+      const target = e.target;
+      if (target instanceof HTMLElement && (target.closest("th") || target.closest("td"))) {
+        const event = e;
+        return __privateMethod(this, _TableNodeView_instances, handleClick_fn).call(this, event);
+      }
+    }
+    return false;
+  }
+  ignoreMutation(mutation) {
+    if (!this.dom || !this.contentDOM)
+      return true;
+    if (mutation.type === "selection")
+      return false;
+    if (this.contentDOM === mutation.target && mutation.type === "attributes")
+      return true;
+    if (this.contentDOM.contains(mutation.target))
+      return false;
+    return true;
+  }
+}
+_TableNodeView_instances = new WeakSet();
+handleClick_fn = function(event) {
+  const view = this.view;
+  if (!view.editable)
+    return false;
+  const { state, dispatch } = view;
+  const pos = view.posAtCoords({ left: event.clientX, top: event.clientY });
+  if (!pos)
+    return false;
+  const $pos = state.doc.resolve(pos.inside);
+  const node = findParent((node2) => node2.type.name === "table_cell" || node2.type.name === "table_header")($pos);
+  if (!node)
+    return false;
+  const { from } = node;
+  const selection = NodeSelection.create(state.doc, from + 1);
+  if (state.selection.eq(selection))
+    return false;
+  if (state.selection instanceof CellSelection) {
+    setTimeout(() => {
+      dispatch(state.tr.setSelection(selection).scrollIntoView());
+    }, 20);
+  } else {
+    requestAnimationFrame(() => {
+      dispatch(state.tr.setSelection(selection).scrollIntoView());
+    });
+  }
+  return true;
+};
+defIfNotExists("milkdown-table-block", TableElement);
+const tableBlockView = $view(tableSchema.node, (ctx) => {
+  return (initialNode, view, getPos) => {
+    return new TableNodeView(ctx, initialNode, view, getPos);
+  };
+});
+withMeta(tableBlockView, {
+  displayName: "NodeView<table-block>",
+  group: "TableBlock"
+});
+
+const tableBlock = [
+  tableBlockConfig,
+  tableBlockView
+];
+
+const defineFeature = (editor, config) => {
+  editor.config((ctx) => {
+    ctx.update(tableBlockConfig.key, (defaultConfig) => ({
+      ...defaultConfig,
+      renderButton: (renderType) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+        switch (renderType) {
+          case "add_row":
+            return (_b = (_a = config == null ? void 0 : config.addRowIcon) == null ? void 0 : _a.call(config)) != null ? _b : plusIcon;
+          case "add_col":
+            return (_d = (_c = config == null ? void 0 : config.addColIcon) == null ? void 0 : _c.call(config)) != null ? _d : plusIcon;
+          case "delete_row":
+            return (_f = (_e = config == null ? void 0 : config.deleteRowIcon) == null ? void 0 : _e.call(config)) != null ? _f : removeIcon;
+          case "delete_col":
+            return (_h = (_g = config == null ? void 0 : config.deleteColIcon) == null ? void 0 : _g.call(config)) != null ? _h : removeIcon;
+          case "align_col_left":
+            return (_j = (_i = config == null ? void 0 : config.alignLeftIcon) == null ? void 0 : _i.call(config)) != null ? _j : alignLeftIcon;
+          case "align_col_center":
+            return (_l = (_k = config == null ? void 0 : config.alignCenterIcon) == null ? void 0 : _k.call(config)) != null ? _l : alignCenterIcon;
+          case "align_col_right":
+            return (_n = (_m = config == null ? void 0 : config.alignRightIcon) == null ? void 0 : _m.call(config)) != null ? _n : alignRightIcon;
+          case "col_drag_handle":
+            return (_p = (_o = config == null ? void 0 : config.colDragHandleIcon) == null ? void 0 : _o.call(config)) != null ? _p : dragHandleIcon;
+          case "row_drag_handle":
+            return (_r = (_q = config == null ? void 0 : config.rowDragHandleIcon) == null ? void 0 : _q.call(config)) != null ? _r : dragHandleIcon;
+        }
+      }
+    }));
+  }).use(tableBlock);
+};
+
+export { defineFeature };
+//# sourceMappingURL=index-8QJbxTYk.js.map