@prosekit/web 0.3.12 → 0.3.14

package/dist/prosekit-web-table-handle.js

@@ -0,0 +1,440 @@
+import {
+  useEditorExtension
+} from "./chunk-MZSYOTZT.js";
+import {
+  defineCustomElement
+} from "./chunk-LCDA7GFP.js";
+
+// src/components/table-handle/table-handle-column-root/element.gen.ts
+import { ElementBuilder } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-column-root/props.ts
+import {
+  defaultOverlayPositionerProps
+} from "@aria-ui/overlay";
+var defaultTableHandleColumnRootProps = Object.freeze({
+  ...defaultOverlayPositionerProps,
+  editor: null,
+  placement: "top"
+});
+
+// src/components/table-handle/table-handle-column-root/state.ts
+import {
+  createComputed,
+  createSignal,
+  mapSignals,
+  useAttribute,
+  useEffect
+} from "@aria-ui/core";
+import { defaultMenuRootProps, useMenuRoot } from "@aria-ui/menu";
+import { useOverlayPositionerState } from "@aria-ui/overlay";
+import { usePresence } from "@aria-ui/presence";
+
+// src/components/table-handle/context.ts
+import { createContext } from "@aria-ui/core";
+var tableHandleRootContext = createContext(
+  "prosekit-table-handle-root-context",
+  null
+);
+
+// src/components/table-handle/table-handle-column-root/state.ts
+function useTableHandleColumnRoot(host, state) {
+  const { editor, ...overlayState } = state;
+  const rootContext = tableHandleRootContext.consume(host);
+  const colFirstCellPos = createComputed(() => {
+    var _a;
+    return (_a = rootContext.get()) == null ? void 0 : _a.colFirstCellPos;
+  });
+  const referenceCell = createComputed(() => {
+    var _a;
+    const pos = colFirstCellPos.get();
+    const view = (_a = editor.get()) == null ? void 0 : _a.view;
+    if (!pos || !view) return null;
+    return view.nodeDOM(pos);
+  });
+  const contentOpen = createSignal(false);
+  useEffect(host, () => {
+    colFirstCellPos.get();
+    contentOpen.set(false);
+  });
+  useOverlayPositionerState(host, overlayState, {
+    reference: referenceCell
+  });
+  const presence = createComputed(() => !!referenceCell.get());
+  useAttribute(host, "data-state", () => presence.get() ? "open" : "closed");
+  usePresence(host, presence);
+  useMenuRoot(host, {
+    ...mapSignals(defaultMenuRootProps),
+    open: contentOpen
+  });
+}
+
+// src/components/table-handle/table-handle-column-root/element.gen.ts
+var TableHandleColumnRootElement = class extends ElementBuilder(useTableHandleColumnRoot, defaultTableHandleColumnRootProps) {
+};
+defineCustomElement("prosekit-table-handle-column-root", TableHandleColumnRootElement);
+
+// src/components/table-handle/table-handle-column-trigger/element.gen.ts
+import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-column-trigger/props.ts
+var defaultTableHandleColumnTriggerProps = Object.freeze({
+  editor: null
+});
+
+// src/components/table-handle/table-handle-column-trigger/state.ts
+import {
+  useEventListener
+} from "@aria-ui/core";
+import { useMenuTrigger } from "@aria-ui/menu";
+import { selectTableColumn } from "@prosekit/extensions/table";
+function useTableHandleColumnTrigger(host, state) {
+  useMenuTrigger(host);
+  const context = tableHandleRootContext.consume(host);
+  useEventListener(host, "pointerdown", () => {
+    var _a;
+    const editor = state.editor.peek();
+    const cellPos = (_a = context.peek()) == null ? void 0 : _a.cellPos;
+    if (!editor || !cellPos) return;
+    editor.exec(selectTableColumn({ head: cellPos }));
+  });
+}
+
+// src/components/table-handle/table-handle-column-trigger/element.gen.ts
+var TableHandleColumnTriggerElement = class extends ElementBuilder2(useTableHandleColumnTrigger, defaultTableHandleColumnTriggerProps) {
+};
+defineCustomElement("prosekit-table-handle-column-trigger", TableHandleColumnTriggerElement);
+
+// src/components/table-handle/table-handle-popover-content/element.gen.ts
+import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-popover-content/props.ts
+import { defaultMenuContentProps } from "@aria-ui/menu";
+var defaultTableHandlePopoverContentProps = Object.freeze({
+  ...defaultMenuContentProps,
+  placement: "right-start",
+  offset: { mainAxis: -4, crossAxis: 4 },
+  editor: null
+});
+
+// src/components/table-handle/table-handle-popover-content/state.ts
+import {
+  createComputed as createComputed2,
+  createSignal as createSignal2,
+  mapSignals as mapSignals2,
+  useEffect as useEffect2
+} from "@aria-ui/core";
+import {
+  defaultMenuContentProps as defaultMenuContentProps2,
+  useMenuContent
+} from "@aria-ui/menu";
+function useTableHandlePopoverContent(host, state) {
+  const rootContext = tableHandleRootContext.consume(host);
+  const open = createComputed2(() => !!rootContext.get());
+  const onKeydownHandlerAdd = useKeyboardHandler(host, open);
+  const menuContentProps = {
+    ...mapSignals2({
+      ...defaultMenuContentProps2,
+      onKeydownHandlerAdd
+    }),
+    placement: state.placement,
+    offset: state.offset
+  };
+  useMenuContent(host, menuContentProps);
+}
+function useKeyboardHandler(element, open) {
+  const keydownHandler = createSignal2(
+    null
+  );
+  let disposeKeydownHandler;
+  useEffect2(element, () => {
+    const keydownHandlerValue = keydownHandler.get();
+    if (!keydownHandlerValue) {
+      return;
+    }
+    const handleKeydown = (event) => {
+      if (event.isComposing || event.defaultPrevented || !open.get()) {
+        return false;
+      }
+      keydownHandlerValue(event);
+    };
+    document.addEventListener("keydown", handleKeydown);
+    disposeKeydownHandler = () => {
+      document.removeEventListener("keydown", handleKeydown);
+    };
+  });
+  return (keydownHandlerValue) => {
+    keydownHandler.set(keydownHandlerValue);
+    return () => {
+      disposeKeydownHandler == null ? void 0 : disposeKeydownHandler();
+      disposeKeydownHandler = void 0;
+    };
+  };
+}
+
+// src/components/table-handle/table-handle-popover-content/element.gen.ts
+var TableHandlePopoverContentElement = class extends ElementBuilder3(useTableHandlePopoverContent, defaultTableHandlePopoverContentProps) {
+};
+defineCustomElement("prosekit-table-handle-popover-content", TableHandlePopoverContentElement);
+
+// src/components/table-handle/table-handle-popover-item/element.gen.ts
+import { ElementBuilder as ElementBuilder4 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-popover-item/props.ts
+import { defaultMenuItemProps } from "@aria-ui/menu";
+var defaultTableHandlePopoverItemProps = Object.freeze({
+  ...defaultMenuItemProps,
+  disabled: false
+});
+
+// src/components/table-handle/table-handle-popover-item/state.ts
+import {
+  useAttribute as useAttribute2
+} from "@aria-ui/core";
+import { useMenuItem } from "@aria-ui/menu";
+function useTableHandlePopoverItem(element, state) {
+  useAttribute2(
+    element,
+    "data-disabled",
+    () => {
+      var _a;
+      return ((_a = state.disabled) == null ? void 0 : _a.get()) ? "true" : "false";
+    }
+  );
+  useMenuItem(element, state);
+}
+
+// src/components/table-handle/table-handle-popover-item/element.gen.ts
+var TableHandlePopoverItemElement = class extends ElementBuilder4(useTableHandlePopoverItem, defaultTableHandlePopoverItemProps) {
+};
+defineCustomElement("prosekit-table-handle-popover-item", TableHandlePopoverItemElement);
+
+// src/components/table-handle/table-handle-root/element.gen.ts
+import { ElementBuilder as ElementBuilder5 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-root/props.ts
+var defaultTableHandleRootProps = Object.freeze({
+  editor: null
+});
+
+// src/components/table-handle/table-handle-root/state.ts
+import {
+  createSignal as createSignal4,
+  useEffect as useEffect3
+} from "@aria-ui/core";
+import { defineDOMEventHandler as defineDOMEventHandler2 } from "@prosekit/core";
+
+// src/hooks/use-editor-typing.ts
+import {
+  createSignal as createSignal3
+} from "@aria-ui/core";
+import { defineDOMEventHandler, union } from "@prosekit/core";
+function useEditorTyping(host, editor) {
+  const typing = createSignal3(false);
+  const handleKeypress = () => {
+    typing.set(true);
+  };
+  const handlePointerMove = () => {
+    typing.set(false);
+  };
+  const extension = union(
+    defineDOMEventHandler("keypress", handleKeypress),
+    defineDOMEventHandler("pointermove", handlePointerMove)
+  );
+  useEditorExtension(host, editor, extension);
+  return typing;
+}
+
+// src/components/table-handle/utils.ts
+import { cellAround, TableMap } from "prosemirror-tables";
+function isHoveringCellInfoEqual(a, b) {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return a.rowIndex === b.rowIndex && a.colIndex === b.colIndex && a.cellPos === b.cellPos && a.rowFirstCellPos === b.rowFirstCellPos && a.colFirstCellPos === b.colFirstCellPos;
+}
+function domCellAround(target) {
+  var _a;
+  while (target && target.nodeName != "TD" && target.nodeName != "TH") {
+    target = ((_a = target.classList) == null ? void 0 : _a.contains("ProseMirror")) ? null : target.parentNode;
+  }
+  return target;
+}
+function getHoveringCell(view, event) {
+  const domCell = domCellAround(event.target);
+  if (!domCell) return;
+  const { left, top, width, height } = domCell.getBoundingClientRect();
+  const eventPos = view.posAtCoords({
+    // Use the center coordinates of the cell to ensure we're within the
+    // selected cell. This prevents potential issues when the mouse is on the
+    // border of two cells.
+    left: left + width / 2,
+    top: top + height / 2
+  });
+  if (!eventPos) return;
+  const $cellPos = cellAround(view.state.doc.resolve(eventPos.pos));
+  if (!$cellPos) return;
+  const map = TableMap.get($cellPos.node(-1));
+  const tableStart = $cellPos.start(-1);
+  const cellRect = map.findCell($cellPos.pos - tableStart);
+  const rowIndex = cellRect.top;
+  const colIndex = cellRect.left;
+  return {
+    rowIndex,
+    colIndex,
+    cellPos: $cellPos.pos,
+    rowFirstCellPos: getCellPos(map, tableStart, rowIndex, 0),
+    colFirstCellPos: getCellPos(map, tableStart, 0, colIndex)
+  };
+}
+function getCellPos(map, tableStart, rowIndex, colIndex) {
+  const cellIndex = getCellIndex(map, rowIndex, colIndex);
+  const posInTable = map.map[cellIndex];
+  return tableStart + posInTable;
+}
+function getCellIndex(map, rowIndex, colIndex) {
+  return map.width * rowIndex + colIndex;
+}
+
+// src/components/table-handle/table-handle-root/state.ts
+function useTableHandleRoot(host, state) {
+  const { editor } = state;
+  const context = createSignal4(null);
+  const hoveringCell = useHoveringCell(host, editor);
+  const typing = useEditorTyping(host, editor);
+  useEffect3(host, () => {
+    const typingValue = typing.get();
+    const hoveringCellValue = hoveringCell.get();
+    context.set(typingValue ? null : hoveringCellValue);
+  });
+  tableHandleRootContext.provide(host, context);
+}
+function useHoveringCell(host, editor) {
+  const hoveringCell = createSignal4(null);
+  const extension = defineCellHoverHandler((curr) => {
+    const prev = hoveringCell.peek();
+    if (!isHoveringCellInfoEqual(prev, curr)) {
+      hoveringCell.set(curr);
+    }
+  });
+  useEditorExtension(host, editor, extension);
+  return hoveringCell;
+}
+function defineCellHoverHandler(handler) {
+  const pointerHandler = (view, event) => {
+    const hoveringCell = getHoveringCell(view, event);
+    return handler(hoveringCell != null ? hoveringCell : null);
+  };
+  return defineDOMEventHandler2("pointerover", pointerHandler);
+}
+
+// src/components/table-handle/table-handle-root/element.gen.ts
+var TableHandleRootElement = class extends ElementBuilder5(useTableHandleRoot, defaultTableHandleRootProps) {
+};
+defineCustomElement("prosekit-table-handle-root", TableHandleRootElement);
+
+// src/components/table-handle/table-handle-row-root/element.gen.ts
+import { ElementBuilder as ElementBuilder6 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-row-root/props.ts
+import {
+  defaultOverlayPositionerProps as defaultOverlayPositionerProps2
+} from "@aria-ui/overlay";
+var defaultTableHandleRowRootProps = Object.freeze({
+  ...defaultOverlayPositionerProps2,
+  editor: null,
+  placement: "left"
+});
+
+// src/components/table-handle/table-handle-row-root/state.ts
+import {
+  createComputed as createComputed3,
+  createSignal as createSignal5,
+  mapSignals as mapSignals3,
+  useAttribute as useAttribute3,
+  useEffect as useEffect4
+} from "@aria-ui/core";
+import { defaultMenuRootProps as defaultMenuRootProps2, useMenuRoot as useMenuRoot2 } from "@aria-ui/menu";
+import { useOverlayPositionerState as useOverlayPositionerState2 } from "@aria-ui/overlay";
+import { usePresence as usePresence2 } from "@aria-ui/presence";
+function useTableHandleRowRoot(host, state) {
+  const { editor, ...overlayState } = state;
+  const rootContext = tableHandleRootContext.consume(host);
+  const rowFirstCellPos = createComputed3(() => {
+    var _a;
+    return (_a = rootContext.get()) == null ? void 0 : _a.rowFirstCellPos;
+  });
+  const referenceCell = createComputed3(() => {
+    var _a;
+    const pos = rowFirstCellPos.get();
+    const view = (_a = editor.get()) == null ? void 0 : _a.view;
+    if (!pos || !view) return null;
+    return view.nodeDOM(pos);
+  });
+  const contentOpen = createSignal5(false);
+  useEffect4(host, () => {
+    rowFirstCellPos.get();
+    contentOpen.set(false);
+  });
+  useOverlayPositionerState2(host, overlayState, {
+    reference: referenceCell
+  });
+  const presence = createComputed3(() => !!referenceCell.get());
+  useAttribute3(host, "data-state", () => presence.get() ? "open" : "closed");
+  usePresence2(host, presence);
+  useMenuRoot2(host, {
+    ...mapSignals3(defaultMenuRootProps2),
+    open: contentOpen
+  });
+}
+
+// src/components/table-handle/table-handle-row-root/element.gen.ts
+var TableHandleRowRootElement = class extends ElementBuilder6(useTableHandleRowRoot, defaultTableHandleRowRootProps) {
+};
+defineCustomElement("prosekit-table-handle-row-root", TableHandleRowRootElement);
+
+// src/components/table-handle/table-handle-row-trigger/element.gen.ts
+import { ElementBuilder as ElementBuilder7 } from "@aria-ui/core";
+
+// src/components/table-handle/table-handle-row-trigger/props.ts
+var defaultTableHandleRowTriggerProps = Object.freeze({
+  editor: null
+});
+
+// src/components/table-handle/table-handle-row-trigger/state.ts
+import {
+  useEventListener as useEventListener2
+} from "@aria-ui/core";
+import { useMenuTrigger as useMenuTrigger2 } from "@aria-ui/menu";
+import { selectTableRow } from "@prosekit/extensions/table";
+function useTableHandleRowTrigger(host, state) {
+  useMenuTrigger2(host);
+  const context = tableHandleRootContext.consume(host);
+  useEventListener2(host, "pointerdown", () => {
+    var _a;
+    const editor = state.editor.peek();
+    const cellPos = (_a = context.peek()) == null ? void 0 : _a.cellPos;
+    if (!editor || !cellPos) return;
+    editor.exec(selectTableRow({ head: cellPos }));
+  });
+}
+
+// src/components/table-handle/table-handle-row-trigger/element.gen.ts
+var TableHandleRowTriggerElement = class extends ElementBuilder7(useTableHandleRowTrigger, defaultTableHandleRowTriggerProps) {
+};
+defineCustomElement("prosekit-table-handle-row-trigger", TableHandleRowTriggerElement);
+export {
+  TableHandleColumnRootElement,
+  TableHandleColumnTriggerElement,
+  TableHandlePopoverContentElement,
+  TableHandlePopoverItemElement,
+  TableHandleRootElement,
+  TableHandleRowRootElement,
+  TableHandleRowTriggerElement,
+  defaultTableHandleColumnRootProps,
+  defaultTableHandleColumnTriggerProps,
+  defaultTableHandlePopoverContentProps,
+  defaultTableHandlePopoverItemProps,
+  defaultTableHandleRootProps,
+  defaultTableHandleRowRootProps,
+  defaultTableHandleRowTriggerProps
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.3.12",
+  "version": "0.3.14",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -55,6 +55,11 @@
       "import": "./dist/prosekit-web-resizable.js",
       "default": "./dist/prosekit-web-resizable.js"
     },
+    "./table-handle": {
+      "types": "./dist/prosekit-web-table-handle.d.ts",
+      "import": "./dist/prosekit-web-table-handle.js",
+      "default": "./dist/prosekit-web-table-handle.js"
+    },
     "./tooltip": {
       "types": "./dist/prosekit-web-tooltip.d.ts",
       "import": "./dist/prosekit-web-tooltip.js",
@@ -68,16 +73,18 @@
     "@aria-ui/collection": "^0.0.3",
     "@aria-ui/core": "^0.0.18",
     "@aria-ui/listbox": "^0.0.18",
+    "@aria-ui/menu": "^0.0.12",
     "@aria-ui/overlay": "^0.0.19",
     "@aria-ui/popover": "^0.0.20",
     "@aria-ui/presence": "^0.0.14",
     "@aria-ui/tooltip": "^0.0.22",
     "@floating-ui/dom": "^1.6.10",
-    "@zag-js/dom-query": "^0.65.0",
+    "@zag-js/dom-query": "^0.65.1",
     "just-omit": "^2.2.0",
-    "@prosekit/extensions": "^0.7.12",
+    "prosemirror-tables": "^1.5.0",
+    "@prosekit/extensions": "^0.7.14",
     "@prosekit/pm": "^0.1.8",
-    "@prosekit/core": "^0.7.9"
+    "@prosekit/core": "^0.7.10"
   },
   "devDependencies": {
     "tsup": "^8.2.4",
@@ -110,6 +117,9 @@
       "resizable": [
         "./dist/prosekit-web-resizable.d.ts"
       ],
+      "table-handle": [
+        "./dist/prosekit-web-table-handle.d.ts"
+      ],
       "tooltip": [
         "./dist/prosekit-web-tooltip.d.ts"
       ]