@prosekit/web 0.8.0-beta.6 → 0.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/autocomplete.d.ts +19 -2
  2. package/dist/autocomplete.d.ts.map +1 -1
  3. package/dist/autocomplete.js +30 -17
  4. package/dist/autocomplete.js.map +1 -1
  5. package/dist/block-handle.d.ts.map +1 -1
  6. package/dist/block-handle.js +16 -10
  7. package/dist/block-handle.js.map +1 -1
  8. package/dist/drop-indicator.js.map +1 -1
  9. package/dist/get-safe-editor-view.js.map +1 -1
  10. package/dist/index.js.map +1 -1
  11. package/dist/inline-popover.js +4 -11
  12. package/dist/inline-popover.js.map +1 -1
  13. package/dist/menu.js.map +1 -1
  14. package/dist/popover.js.map +1 -1
  15. package/dist/resizable.js.map +1 -1
  16. package/dist/table-handle.js +11 -22
  17. package/dist/table-handle.js.map +1 -1
  18. package/dist/tooltip.js.map +1 -1
  19. package/dist/use-editor-extension.js.map +1 -1
  20. package/dist/use-editor-update-event.js +11 -0
  21. package/dist/use-editor-update-event.js.map +1 -0
  22. package/dist/use-scrolling.js.map +1 -1
  23. package/package.json +10 -10
  24. package/src/components/autocomplete/autocomplete-positioner.ts +14 -5
  25. package/src/components/autocomplete/autocomplete-root.ts +36 -13
  26. package/src/components/block-handle/block-handle-add.ts +1 -1
  27. package/src/components/block-handle/block-handle-draggable.ts +1 -1
  28. package/src/components/block-handle/block-handle-positioner.ts +1 -1
  29. package/src/components/block-handle/block-handle-root.ts +5 -2
  30. package/src/components/block-handle/use-has-text-selection.ts +13 -0
  31. package/src/components/inline-popover/inline-popover-positioner.ts +1 -1
  32. package/src/components/inline-popover/inline-popover-root.ts +1 -1
  33. package/src/components/table-handle/shared.ts +6 -6
  34. package/src/components/table-handle/table-handle-column-menu-trigger.ts +1 -1
  35. package/src/components/table-handle/table-handle-drag-preview.ts +1 -1
  36. package/src/components/table-handle/table-handle-drop-indicator.ts +1 -1
  37. package/src/components/table-handle/table-handle-root.ts +1 -1
  38. package/src/components/table-handle/table-handle-row-menu-trigger.ts +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"drop-indicator.js","names":[],"sources":["../src/components/drop-indicator/drop-indicator.ts"],"sourcesContent":["import {\n computed,\n createSignal,\n defineCustomElement,\n defineProps,\n registerCustomElement,\n useEffect,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { usePresence } from '@aria-ui/utils'\nimport type { Editor } from '@prosekit/core'\nimport { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'\n\nimport { useEditorExtension } from '../../hooks/use-editor-extension.ts'\nimport { useScrolling } from '../../hooks/use-scrolling.ts'\nimport { assignStyles } from '../../utils/assign-styles.ts'\n\nexport interface DropIndicatorProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor: Editor | null\n\n /**\n * The line width in pixels.\n *\n * @default 2\n */\n width: number\n}\n\n/** @internal */\nexport const DropIndicatorPropsDeclaration: PropsDeclaration<DropIndicatorProps> = /* @__PURE__ */ defineProps<DropIndicatorProps>({\n editor: {\n default: null,\n attribute: false,\n type: 'json',\n },\n width: {\n default: 2,\n attribute: 'width',\n type: 'number',\n },\n})\n\n/**\n * @internal\n */\nexport function setupDropIndicator(\n host: HostElement,\n props: State<DropIndicatorProps>,\n): void {\n type DropIndicatorContext = ShowHandlerOptions | null\n const context = createSignal<DropIndicatorContext>(null)\n\n const extension = defineDropIndicator({\n onShow: (options) => context.set(options),\n onHide: () => context.set(null),\n })\n\n useEditorExtension(host, props.editor.get, extension)\n\n const getLine = computed(() => context.get()?.line)\n const getScrolling = useScrolling(host)\n const getPresence = computed(() => !!context.get() && !getScrolling())\n usePresence(host, getPresence)\n\n useEffect(host, () => {\n const lineValue = getLine()\n const lineWidth = props.width.get()\n\n if (!lineValue) return\n\n const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue\n const horizontal = y1 === y2\n\n let width: number\n let height: number\n let top: number = y1\n let left: number = x1\n\n if (horizontal) {\n width = x2 - x1\n height = lineWidth\n top -= lineWidth / 2\n } else {\n width = lineWidth\n height = y2 - y1\n left -= lineWidth / 2\n }\n\n top = Math.round(top)\n left = Math.round(left)\n\n assignStyles(host, {\n position: 'fixed',\n pointerEvents: 'none',\n width: `${width}px`,\n height: `${height}px`,\n transform: `translate(${left}px, ${top}px)`,\n left: '0px',\n top: '0px',\n })\n })\n}\n\nconst DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps> = defineCustomElement(\n setupDropIndicator,\n DropIndicatorPropsDeclaration,\n)\n\n/**\n * `<prosekit-drop-indicator>` custom element.\n *\n * Properties: {@link DropIndicatorProps}\n */\nexport class DropIndicatorElement extends DropIndicatorElementBase {}\n\n/**\n * @internal\n */\nexport function registerDropIndicatorElement(): void {\n registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)\n}\n"],"mappings":";;;;;;AAsCA,MAAa,gCAAsF,4BAAgC;CACjI,QAAQ;EACN,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,OAAO;EACL,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,CAAC;;;;AAKF,SAAgB,mBACd,MACA,OACM;CAEN,MAAM,UAAU,aAAmC,KAAK;CAExD,MAAM,YAAY,oBAAoB;EACpC,SAAS,YAAY,QAAQ,IAAI,QAAQ;EACzC,cAAc,QAAQ,IAAI,KAAK;EAChC,CAAC;AAEF,oBAAmB,MAAM,MAAM,OAAO,KAAK,UAAU;CAErD,MAAM,UAAU,eAAe,QAAQ,KAAK,EAAE,KAAK;CACnD,MAAM,eAAe,aAAa,KAAK;AAEvC,aAAY,MADQ,eAAe,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,CAAC,CACxC;AAE9B,WAAU,YAAY;EACpB,MAAM,YAAY,SAAS;EAC3B,MAAM,YAAY,MAAM,MAAM,KAAK;AAEnC,MAAI,CAAC,UAAW;EAEhB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,SAAS;EACvD,MAAM,aAAa,OAAO;EAE1B,IAAI;EACJ,IAAI;EACJ,IAAI,MAAc;EAClB,IAAI,OAAe;AAEnB,MAAI,YAAY;AACd,WAAQ,KAAK;AACb,YAAS;AACT,UAAO,YAAY;SACd;AACL,WAAQ;AACR,YAAS,KAAK;AACd,WAAQ,YAAY;;AAGtB,QAAM,KAAK,MAAM,IAAI;AACrB,SAAO,KAAK,MAAM,KAAK;AAEvB,eAAa,MAAM;GACjB,UAAU;GACV,eAAe;GACf,OAAO,GAAG,MAAM;GAChB,QAAQ,GAAG,OAAO;GAClB,WAAW,aAAa,KAAK,MAAM,IAAI;GACvC,MAAM;GACN,KAAK;GACN,CAAC;GACF;;AAGJ,MAAM,2BAAuE,oBAC3E,oBACA,8BACD;;;;;;AAOD,IAAa,uBAAb,cAA0C,yBAAyB;;;;AAKnE,SAAgB,+BAAqC;AACnD,uBAAsB,2BAA2B,qBAAqB"}
1
+ {"version":3,"file":"drop-indicator.js","names":[],"sources":["../src/components/drop-indicator/drop-indicator.ts"],"sourcesContent":["import {\n computed,\n createSignal,\n defineCustomElement,\n defineProps,\n registerCustomElement,\n useEffect,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { usePresence } from '@aria-ui/utils'\nimport type { Editor } from '@prosekit/core'\nimport { defineDropIndicator, type ShowHandlerOptions } from '@prosekit/extensions/drop-indicator'\n\nimport { useEditorExtension } from '../../hooks/use-editor-extension.ts'\nimport { useScrolling } from '../../hooks/use-scrolling.ts'\nimport { assignStyles } from '../../utils/assign-styles.ts'\n\nexport interface DropIndicatorProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor: Editor | null\n\n /**\n * The line width in pixels.\n *\n * @default 2\n */\n width: number\n}\n\n/** @internal */\nexport const DropIndicatorPropsDeclaration: PropsDeclaration<DropIndicatorProps> = /* @__PURE__ */ defineProps<DropIndicatorProps>({\n editor: {\n default: null,\n attribute: false,\n type: 'json',\n },\n width: {\n default: 2,\n attribute: 'width',\n type: 'number',\n },\n})\n\n/**\n * @internal\n */\nexport function setupDropIndicator(\n host: HostElement,\n props: State<DropIndicatorProps>,\n): void {\n type DropIndicatorContext = ShowHandlerOptions | null\n const context = createSignal<DropIndicatorContext>(null)\n\n const extension = defineDropIndicator({\n onShow: (options) => context.set(options),\n onHide: () => context.set(null),\n })\n\n useEditorExtension(host, props.editor.get, extension)\n\n const getLine = computed(() => context.get()?.line)\n const getScrolling = useScrolling(host)\n const getPresence = computed(() => !!context.get() && !getScrolling())\n usePresence(host, getPresence)\n\n useEffect(host, () => {\n const lineValue = getLine()\n const lineWidth = props.width.get()\n\n if (!lineValue) return\n\n const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue\n const horizontal = y1 === y2\n\n let width: number\n let height: number\n let top: number = y1\n let left: number = x1\n\n if (horizontal) {\n width = x2 - x1\n height = lineWidth\n top -= lineWidth / 2\n } else {\n width = lineWidth\n height = y2 - y1\n left -= lineWidth / 2\n }\n\n top = Math.round(top)\n left = Math.round(left)\n\n assignStyles(host, {\n position: 'fixed',\n pointerEvents: 'none',\n width: `${width}px`,\n height: `${height}px`,\n transform: `translate(${left}px, ${top}px)`,\n left: '0px',\n top: '0px',\n })\n })\n}\n\nconst DropIndicatorElementBase: HostElementConstructor<DropIndicatorProps> = defineCustomElement(\n setupDropIndicator,\n DropIndicatorPropsDeclaration,\n)\n\n/**\n * `<prosekit-drop-indicator>` custom element.\n *\n * Properties: {@link DropIndicatorProps}\n */\nexport class DropIndicatorElement extends DropIndicatorElementBase {}\n\n/**\n * @internal\n */\nexport function registerDropIndicatorElement(): void {\n registerCustomElement('prosekit-drop-indicator', DropIndicatorElement)\n}\n"],"mappings":";;;;;;AAsCA,MAAa,gCAAsF,4BAAgC;CACjI,QAAQ;EACN,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACD,OAAO;EACL,SAAS;EACT,WAAW;EACX,MAAM;EACP;CACF,CAAC;;;;AAKF,SAAgB,mBACd,MACA,OACM;CAEN,MAAM,UAAU,aAAmC,KAAK;CAExD,MAAM,YAAY,oBAAoB;EACpC,SAAS,YAAY,QAAQ,IAAI,QAAQ;EACzC,cAAc,QAAQ,IAAI,KAAK;EAChC,CAAC;CAEF,mBAAmB,MAAM,MAAM,OAAO,KAAK,UAAU;CAErD,MAAM,UAAU,eAAe,QAAQ,KAAK,EAAE,KAAK;CACnD,MAAM,eAAe,aAAa,KAAK;CAEvC,YAAY,MADQ,eAAe,CAAC,CAAC,QAAQ,KAAK,IAAI,CAAC,cAAc,CACxC,CAAC;CAE9B,UAAU,YAAY;EACpB,MAAM,YAAY,SAAS;EAC3B,MAAM,YAAY,MAAM,MAAM,KAAK;EAEnC,IAAI,CAAC,WAAW;EAEhB,MAAM,EAAE,IAAI,EAAE,GAAG,IAAI,GAAG,MAAM,IAAI,EAAE,GAAG,IAAI,GAAG,SAAS;EACvD,MAAM,aAAa,OAAO;EAE1B,IAAI;EACJ,IAAI;EACJ,IAAI,MAAc;EAClB,IAAI,OAAe;EAEnB,IAAI,YAAY;GACd,QAAQ,KAAK;GACb,SAAS;GACT,OAAO,YAAY;SACd;GACL,QAAQ;GACR,SAAS,KAAK;GACd,QAAQ,YAAY;;EAGtB,MAAM,KAAK,MAAM,IAAI;EACrB,OAAO,KAAK,MAAM,KAAK;EAEvB,aAAa,MAAM;GACjB,UAAU;GACV,eAAe;GACf,OAAO,GAAG,MAAM;GAChB,QAAQ,GAAG,OAAO;GAClB,WAAW,aAAa,KAAK,MAAM,IAAI;GACvC,MAAM;GACN,KAAK;GACN,CAAC;GACF;;AAGJ,MAAM,2BAAuE,oBAC3E,oBACA,8BACD;;;;;;AAOD,IAAa,uBAAb,cAA0C,yBAAyB;;;;AAKnE,SAAgB,+BAAqC;CACnD,sBAAsB,2BAA2B,qBAAqB"}
@@ -1 +1 @@
1
- {"version":3,"file":"get-safe-editor-view.js","names":[],"sources":["../src/utils/get-safe-editor-view.ts"],"sourcesContent":["import type { Editor } from '@prosekit/core'\nimport type { EditorView } from '@prosekit/pm/view'\n\n/**\n * @internal\n */\nexport function getSafeEditorView(editor?: Editor | null): EditorView | undefined {\n if (!editor || !editor.mounted) return\n return editor.view\n}\n"],"mappings":";;;AAMA,SAAgB,kBAAkB,QAAgD;AAChF,KAAI,CAAC,UAAU,CAAC,OAAO,QAAS;AAChC,QAAO,OAAO"}
1
+ {"version":3,"file":"get-safe-editor-view.js","names":[],"sources":["../src/utils/get-safe-editor-view.ts"],"sourcesContent":["import type { Editor } from '@prosekit/core'\nimport type { EditorView } from '@prosekit/pm/view'\n\n/**\n * @internal\n */\nexport function getSafeEditorView(editor?: Editor | null): EditorView | undefined {\n if (!editor || !editor.mounted) return\n return editor.view\n}\n"],"mappings":";;;AAMA,SAAgB,kBAAkB,QAAgD;CAChF,IAAI,CAAC,UAAU,CAAC,OAAO,SAAS;CAChC,OAAO,OAAO"}
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../src/queue-extension.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\n\n/**\n\n @internal\n\n Queues an extension to be added to the editor in the next task. Returns a\n dispose function that can be used to remove the extension in the next task.\n\n Why?\n\n Let's take React as an example.\n\n `editor.use(extension)` is synchronous. If the extension adds a node view that\n is controlled by `@prosemirror-adapter/react`, adding this extension will\n cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`\n returned by `useState` in React).\n\n ProseMirror is a sync-based framework. When updating node view, ProseMirror\n will first stop DOMObserver, then update the DOM, then resume DOMObserver.\n `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM\n synchronously right after React state is updated, before ProseMirror resumes\n DOMObserver.\n\n If we call `editor.use(extension)` directly in `useEffect`, we eventually are\n doing something like this:\n\n ```ts\n React.useEffect(() => {\n React.flushSync(() => {\n setState(newState)\n })\n }, [])\n ```\n\n This breaks the async nature of React, and causes the following React\n warning:\n\n ```\n flushSync was called from inside a lifecycle method. React cannot flush when\n React is already rendering. Consider moving this call to a scheduler task or\n micro task.\n ```\n\n To fix this, we need to queue the extension addition to the editor in the next\n task or in the next microtask.\n\n ```ts\n // In the next microtask\n React.useEffect(() => {\n queueMicrotask(() => {\n React.flushSync(() => {\n setState(newState)\n })\n })\n }, [])\n\n // In the next task\n React.useEffect(() => {\n setTimeout(() => {\n React.flushSync(() => {\n setState(newState)\n })\n })\n }, [])\n ```\n\n I chose to use `setTimeout` instead of `queueMicrotask` because\n `queueMicrotask` causes another React act warning `An update to %s inside a\n test was not wrapped in act(...)` during testing.\n\n Although the example above is based on React, this is a general pattern for\n any async based UI framework, including Svelte.\n\n */\nexport function queueExtension(editor: Editor, extension: Extension): VoidFunction {\n let canceled = false\n let dispose: VoidFunction | undefined\n const timeout = setTimeout(() => {\n if (canceled) return\n dispose?.()\n dispose = editor.use(extension)\n })\n\n return () => {\n canceled = true\n clearTimeout(timeout)\n setTimeout(() => {\n dispose?.()\n dispose = undefined\n })\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,eAAe,QAAgB,WAAoC;CACjF,IAAI,WAAW;CACf,IAAI;CACJ,MAAM,UAAU,iBAAiB;AAC/B,MAAI,SAAU;AACd,aAAW;AACX,YAAU,OAAO,IAAI,UAAU;GAC/B;AAEF,cAAa;AACX,aAAW;AACX,eAAa,QAAQ;AACrB,mBAAiB;AACf,cAAW;AACX,aAAU,KAAA;IACV"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../src/queue-extension.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\n\n/**\n\n @internal\n\n Queues an extension to be added to the editor in the next task. Returns a\n dispose function that can be used to remove the extension in the next task.\n\n Why?\n\n Let's take React as an example.\n\n `editor.use(extension)` is synchronous. If the extension adds a node view that\n is controlled by `@prosemirror-adapter/react`, adding this extension will\n cause `prosemirror-adapter` to set UI state synchronously (e.g. `setState`\n returned by `useState` in React).\n\n ProseMirror is a sync-based framework. When updating node view, ProseMirror\n will first stop DOMObserver, then update the DOM, then resume DOMObserver.\n `prosemirror-adapter` needs to call `React.flushSync()` to update the DOM\n synchronously right after React state is updated, before ProseMirror resumes\n DOMObserver.\n\n If we call `editor.use(extension)` directly in `useEffect`, we eventually are\n doing something like this:\n\n ```ts\n React.useEffect(() => {\n React.flushSync(() => {\n setState(newState)\n })\n }, [])\n ```\n\n This breaks the async nature of React, and causes the following React\n warning:\n\n ```\n flushSync was called from inside a lifecycle method. React cannot flush when\n React is already rendering. Consider moving this call to a scheduler task or\n micro task.\n ```\n\n To fix this, we need to queue the extension addition to the editor in the next\n task or in the next microtask.\n\n ```ts\n // In the next microtask\n React.useEffect(() => {\n queueMicrotask(() => {\n React.flushSync(() => {\n setState(newState)\n })\n })\n }, [])\n\n // In the next task\n React.useEffect(() => {\n setTimeout(() => {\n React.flushSync(() => {\n setState(newState)\n })\n })\n }, [])\n ```\n\n I chose to use `setTimeout` instead of `queueMicrotask` because\n `queueMicrotask` causes another React act warning `An update to %s inside a\n test was not wrapped in act(...)` during testing.\n\n Although the example above is based on React, this is a general pattern for\n any async based UI framework, including Svelte.\n\n */\nexport function queueExtension(editor: Editor, extension: Extension): VoidFunction {\n let canceled = false\n let dispose: VoidFunction | undefined\n const timeout = setTimeout(() => {\n if (canceled) return\n dispose?.()\n dispose = editor.use(extension)\n })\n\n return () => {\n canceled = true\n clearTimeout(timeout)\n setTimeout(() => {\n dispose?.()\n dispose = undefined\n })\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,SAAgB,eAAe,QAAgB,WAAoC;CACjF,IAAI,WAAW;CACf,IAAI;CACJ,MAAM,UAAU,iBAAiB;EAC/B,IAAI,UAAU;EACd,WAAW;EACX,UAAU,OAAO,IAAI,UAAU;GAC/B;CAEF,aAAa;EACX,WAAW;EACX,aAAa,QAAQ;EACrB,iBAAiB;GACf,WAAW;GACX,UAAU,KAAA;IACV"}
@@ -1,8 +1,9 @@
1
1
  import { t as useEditorExtension } from "./use-editor-extension.js";
2
+ import { t as useEditorUpdateEvent } from "./use-editor-update-event.js";
2
3
  import { computed, createContext, defineCustomElement, defineProps, onMount, registerCustomElement } from "@aria-ui/core";
3
4
  import { usePresence } from "@aria-ui/utils";
4
5
  import { OpenChangeEvent, OverlayPopupPropsDeclaration, OverlayPositionerPropsDeclaration, OverlayRootPropsDeclaration, setupOverlayPopup, setupOverlayPositioner, useOverlayStore } from "@aria-ui/elements/overlay";
5
- import { containsInlineNode, defineFocusChangeHandler, defineKeymap, defineUpdateHandler, isInCodeBlock, isTextSelection } from "@prosekit/core";
6
+ import { containsInlineNode, defineFocusChangeHandler, defineKeymap, isInCodeBlock, isTextSelection } from "@prosekit/core";
6
7
  const InlinePopoverStoreContext = createContext("prosekit-inline-popover-store");
7
8
  /** @internal */
8
9
  const InlinePopoverPopupPropsDeclaration = OverlayPopupPropsDeclaration;
@@ -42,8 +43,7 @@ const InlinePopoverPositionerPropsDeclaration = /* @__PURE__ */ defineProps({
42
43
  },
43
44
  offset: {
44
45
  default: 12,
45
- attribute: false,
46
- type: "json"
46
+ attribute: false
47
47
  },
48
48
  hide: {
49
49
  default: true,
@@ -106,12 +106,6 @@ function registerInlinePopoverPositionerElement() {
106
106
  function useEditorFocusChangeEvent(host, getEditor, handler) {
107
107
  useEditorExtension(host, getEditor, defineFocusChangeHandler(handler));
108
108
  }
109
- /**
110
- * @internal
111
- */
112
- function useEditorUpdateEvent(host, getEditor, handler) {
113
- useEditorExtension(host, getEditor, defineUpdateHandler(handler));
114
- }
115
109
  function useKeymap(host, getEditor, keymap) {
116
110
  useEditorExtension(host, getEditor, defineKeymap(keymap));
117
111
  }
@@ -151,8 +145,7 @@ const InlinePopoverRootPropsDeclaration = /* @__PURE__ */ defineProps({
151
145
  ...OverlayRootPropsDeclaration,
152
146
  editor: {
153
147
  default: null,
154
- attribute: false,
155
- type: "json"
148
+ attribute: false
156
149
  },
157
150
  defaultOpen: {
158
151
  default: true,
@@ -1 +1 @@
1
- {"version":3,"file":"inline-popover.js","names":[],"sources":["../src/components/inline-popover/store.ts","../src/components/inline-popover/inline-popover-popup.ts","../src/components/inline-popover/inline-popover-positioner.ts","../src/hooks/use-editor-focus-event.ts","../src/hooks/use-editor-update-event.ts","../src/hooks/use-keymap.ts","../src/components/inline-popover/virtual-selection-element.ts","../src/components/inline-popover/inline-popover-root.ts"],"sourcesContent":["import { createContext, type Context } from '@aria-ui/core'\nimport type { OverlayStore } from '@aria-ui/elements/overlay'\n\nexport const InlinePopoverStoreContext: Context<OverlayStore> = createContext<OverlayStore>(\n 'prosekit-inline-popover-store',\n)\n","import {\n computed,\n defineCustomElement,\n onMount,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'\nimport { usePresence } from '@aria-ui/utils'\n\nimport { InlinePopoverStoreContext } from './store.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverPopupProps extends OverlayPopupProps {}\n\n/** @internal */\nexport const InlinePopoverPopupPropsDeclaration: PropsDeclaration<InlinePopoverPopupProps> = OverlayPopupPropsDeclaration\n\n/** @internal */\nexport function setupInlinePopoverPopup(\n host: HostElement,\n _props: State<InlinePopoverPopupProps>,\n): void {\n const getStore = InlinePopoverStoreContext.consume(host)\n setupOverlayPopup(host, getStore)\n const getOpen = computed(() => getStore()?.getIsOpen() ?? false)\n usePresence(host, getOpen)\n\n onMount(host, () => {\n host.role = 'dialog'\n })\n}\n\nconst InlinePopoverPopupElementBase: HostElementConstructor<InlinePopoverPopupProps> = defineCustomElement(\n setupInlinePopoverPopup,\n InlinePopoverPopupPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-popup>` custom element.\n *\n * Properties: {@link InlinePopoverPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the inline popover is visible, `\"closed\"` otherwise |\n */\nexport class InlinePopoverPopupElement extends InlinePopoverPopupElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverPopupElement(): void {\n registerCustomElement('prosekit-inline-popover-popup', InlinePopoverPopupElement)\n}\n","import {\n defineCustomElement,\n defineProps,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type OverlayPositionerProps } from '@aria-ui/elements/overlay'\n\nimport { InlinePopoverStoreContext } from './store.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverPositionerProps extends\n Omit<\n OverlayPositionerProps,\n | 'placement'\n | 'offset'\n | 'hide'\n | 'hoist'\n | 'overlap'\n | 'inline'\n | 'overflowPadding'\n >\n{\n /**\n * The initial placement of the floating element\n *\n * @default \"top\"\n */\n placement: OverlayPositionerProps['placement']\n\n /**\n * The distance between the reference and floating element.\n *\n * @default 12\n */\n offset: OverlayPositionerProps['offset']\n\n /**\n * Whether to hide the floating element when the reference element or the\n * floating element is fully clipped.\n *\n * @default true\n */\n hide: OverlayPositionerProps['hide']\n\n /**\n * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * to place the floating element on top of other page content.\n *\n * @default false\n */\n hoist: boolean\n\n /**\n * Whether the floating element can overlap the reference element to keep it\n * in view.\n *\n * @default true\n */\n overlap: OverlayPositionerProps['overlap']\n\n /**\n * Whether to improve positioning for inline reference elements that span over\n * multiple lines.\n *\n * @default true\n */\n inline: OverlayPositionerProps['inline']\n\n /**\n * Describes the virtual padding around the boundary to check for overflow.\n *\n * @default 8\n */\n overflowPadding: OverlayPositionerProps['overflowPadding']\n}\n\n/** @internal */\nexport const InlinePopoverPositionerPropsDeclaration: PropsDeclaration<InlinePopoverPositionerProps> = /* @__PURE__ */ defineProps<\n InlinePopoverPositionerProps\n>({\n ...OverlayPositionerPropsDeclaration,\n placement: { default: 'top', attribute: 'placement', type: 'string' },\n offset: { default: 12, attribute: false, type: 'json' },\n hide: { default: true, attribute: 'hide', type: 'boolean' },\n hoist: { default: false, attribute: 'hoist', type: 'boolean' },\n overlap: { default: true, attribute: 'overlap', type: 'boolean' },\n inline: { default: true, attribute: 'inline', type: 'boolean' },\n overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },\n})\n\n/** @internal */\nexport function setupInlinePopoverPositioner(\n host: HostElement,\n props: State<InlinePopoverPositionerProps>,\n): void {\n setupOverlayPositioner(host, props, InlinePopoverStoreContext.consume(host))\n}\n\nconst InlinePopoverPositionerElementBase: HostElementConstructor<InlinePopoverPositionerProps> = defineCustomElement(\n setupInlinePopoverPositioner,\n InlinePopoverPositionerPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-positioner>` custom element.\n *\n * Properties: {@link InlinePopoverPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the inline popover is visible, `\"closed\"` otherwise |\n * | `data-side` | The side of the anchor element the positioner is on |\n * | `data-align` | The alignment of the positioner relative to the anchor element |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class InlinePopoverPositionerElement extends InlinePopoverPositionerElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverPositionerElement(): void {\n registerCustomElement('prosekit-inline-popover-positioner', InlinePopoverPositionerElement)\n}\n","import type { HostElement } from '@aria-ui/core'\nimport { defineFocusChangeHandler, type Editor, type FocusChangeHandler } from '@prosekit/core'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\n\n/**\n * @internal\n */\nexport function useEditorFocusChangeEvent(\n host: HostElement,\n getEditor: () => Editor | null,\n handler: FocusChangeHandler,\n): void {\n const extension = defineFocusChangeHandler(handler)\n useEditorExtension(host, getEditor, extension)\n}\n","import type { HostElement } from '@aria-ui/core'\nimport { defineUpdateHandler, type Editor, type UpdateHandler } from '@prosekit/core'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\n\n/**\n * @internal\n */\nexport function useEditorUpdateEvent(\n host: HostElement,\n getEditor: () => Editor | null,\n handler: UpdateHandler,\n): void {\n const extension = defineUpdateHandler(handler)\n useEditorExtension(host, getEditor, extension)\n}\n","import type { HostElement } from '@aria-ui/core'\nimport { defineKeymap, type Editor, type Keymap } from '@prosekit/core'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\n\nexport function useKeymap(\n host: HostElement,\n getEditor: () => Editor | null,\n keymap: Keymap,\n): void {\n const extension = defineKeymap(keymap)\n useEditorExtension(host, getEditor, extension)\n}\n","import type { ReferenceElement } from '@floating-ui/dom'\nimport { containsInlineNode, isInCodeBlock, isTextSelection } from '@prosekit/core'\nimport type { EditorView } from '@prosekit/pm/view'\n\nexport function getVirtualSelectionElement(\n view: EditorView,\n): ReferenceElement | undefined {\n if (typeof window === 'undefined' || view.isDestroyed) {\n return\n }\n\n const selection = view.state.selection\n\n if (\n !selection.empty\n && !isInCodeBlock(selection)\n && isTextSelection(selection)\n && containsInlineNode(view.state.doc, selection.from, selection.to)\n ) {\n return getDomDecoration(view) || getInlineDecoration(view)\n }\n}\n\nfunction getDomDecoration(view: EditorView): ReferenceElement | undefined {\n const range = getDomRange(view)\n if (range) {\n // To get it work properly in Safari, we cannot return the range directly.\n // We have to return a contextElement.\n return {\n contextElement: view.dom,\n getBoundingClientRect: () => range.getBoundingClientRect(),\n getClientRects: () => range.getClientRects(),\n }\n }\n}\n\nfunction getDomRange(view: EditorView): Range | undefined {\n const win = view.dom.ownerDocument.defaultView\n const selection = win?.getSelection()\n if (!selection || selection.isCollapsed) {\n return\n }\n\n const range = typeof selection.rangeCount === 'number'\n && selection.rangeCount > 0\n && selection.getRangeAt(0)\n\n if (!range) {\n return\n }\n\n return range\n}\n\nfunction getInlineDecoration(view: EditorView): ReferenceElement | undefined {\n const match = view.dom.querySelectorAll('.prosekit-virtual-selection')\n\n if (match.length === 0) {\n return\n }\n if (match.length === 1) {\n return match[0]\n }\n\n const items = Array.from(match)\n return {\n contextElement: items[0],\n getBoundingClientRect: () => items[0].getBoundingClientRect(),\n getClientRects: () => items.map((item) => item.getBoundingClientRect()),\n }\n}\n","import {\n defineCustomElement,\n defineProps,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport type { OpenChangeEvent } from '@aria-ui/elements/overlay'\nimport { OverlayRootPropsDeclaration, useOverlayStore, type OverlayRootProps } from '@aria-ui/elements/overlay'\nimport type { Editor } from '@prosekit/core'\nimport type { Selection } from '@prosekit/pm/state'\n\nimport { useEditorFocusChangeEvent } from '../../hooks/use-editor-focus-event.ts'\nimport { useEditorUpdateEvent } from '../../hooks/use-editor-update-event.ts'\nimport { useKeymap } from '../../hooks/use-keymap.ts'\n\nimport { InlinePopoverStoreContext } from './store.ts'\nimport { getVirtualSelectionElement } from './virtual-selection-element.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverRootProps extends OverlayRootProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor: Editor | null\n\n /**\n * Whether the popover is open by default when some inline content is\n * selected.\n *\n * @default true\n */\n defaultOpen: boolean\n\n /**\n * Whether the inline popover should be dismissed when the editor receives an\n * Escape key press.\n *\n * @default true\n */\n dismissOnEscape: boolean\n}\n\n/** @internal */\nexport const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRootProps> = /* @__PURE__ */ defineProps<\n InlinePopoverRootProps\n>({\n ...OverlayRootPropsDeclaration,\n editor: { default: null, attribute: false, type: 'json' },\n defaultOpen: { default: true, attribute: 'default-open', type: 'boolean' },\n dismissOnEscape: { default: true, attribute: 'dismiss-on-escape', type: 'boolean' },\n})\n\n/**\n * @public\n */\nexport interface InlinePopoverRootEvents {\n /**\n * Emitted when the open state of the popover changes.\n */\n openChange: OpenChangeEvent\n}\n\n/** @internal */\nexport function setupInlinePopoverRoot(\n host: HostElement,\n props: State<InlinePopoverRootProps>,\n): void {\n const store = useOverlayStore(host, props)\n InlinePopoverStoreContext.provide(host, store)\n\n let editorFocused = false\n useEditorFocusChangeEvent(host, props.editor.get, (focus) => {\n editorFocused = focus\n })\n\n let prevSelection: Selection | undefined\n useEditorUpdateEvent(host, props.editor.get, (view) => {\n const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)\n if (isPopoverFocused) return\n\n const { selection } = view.state\n if (prevSelection?.eq(selection)) return\n prevSelection = selection\n\n const reference = getVirtualSelectionElement(view)\n store.setAnchorElement(reference)\n\n if (reference && props.defaultOpen.get()) {\n store.requestOpenChange(true)\n } else if (!reference) {\n store.requestOpenChange(false)\n }\n })\n\n useKeymap(host, props.editor.get, {\n Escape: () => {\n if (!props.dismissOnEscape.get() || !store.getIsOpen()) return false\n store.requestOpenChange(false)\n return true\n },\n })\n}\n\nconst InlinePopoverRootElementBase: HostElementConstructor<InlinePopoverRootProps> = defineCustomElement(\n setupInlinePopoverRoot,\n InlinePopoverRootPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-root>` custom element.\n *\n * Properties: {@link InlinePopoverRootProps}\n *\n * Events: {@link InlinePopoverRootEvents}\n */\nexport class InlinePopoverRootElement extends InlinePopoverRootElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverRootElement(): void {\n registerCustomElement('prosekit-inline-popover-root', InlinePopoverRootElement)\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"inline-popover.js","names":[],"sources":["../src/components/inline-popover/store.ts","../src/components/inline-popover/inline-popover-popup.ts","../src/components/inline-popover/inline-popover-positioner.ts","../src/hooks/use-editor-focus-event.ts","../src/hooks/use-keymap.ts","../src/components/inline-popover/virtual-selection-element.ts","../src/components/inline-popover/inline-popover-root.ts"],"sourcesContent":["import { createContext, type Context } from '@aria-ui/core'\nimport type { OverlayStore } from '@aria-ui/elements/overlay'\n\nexport const InlinePopoverStoreContext: Context<OverlayStore> = createContext<OverlayStore>(\n 'prosekit-inline-popover-store',\n)\n","import {\n computed,\n defineCustomElement,\n onMount,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'\nimport { usePresence } from '@aria-ui/utils'\n\nimport { InlinePopoverStoreContext } from './store.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverPopupProps extends OverlayPopupProps {}\n\n/** @internal */\nexport const InlinePopoverPopupPropsDeclaration: PropsDeclaration<InlinePopoverPopupProps> = OverlayPopupPropsDeclaration\n\n/** @internal */\nexport function setupInlinePopoverPopup(\n host: HostElement,\n _props: State<InlinePopoverPopupProps>,\n): void {\n const getStore = InlinePopoverStoreContext.consume(host)\n setupOverlayPopup(host, getStore)\n const getOpen = computed(() => getStore()?.getIsOpen() ?? false)\n usePresence(host, getOpen)\n\n onMount(host, () => {\n host.role = 'dialog'\n })\n}\n\nconst InlinePopoverPopupElementBase: HostElementConstructor<InlinePopoverPopupProps> = defineCustomElement(\n setupInlinePopoverPopup,\n InlinePopoverPopupPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-popup>` custom element.\n *\n * Properties: {@link InlinePopoverPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the inline popover is visible, `\"closed\"` otherwise |\n */\nexport class InlinePopoverPopupElement extends InlinePopoverPopupElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverPopupElement(): void {\n registerCustomElement('prosekit-inline-popover-popup', InlinePopoverPopupElement)\n}\n","import {\n defineCustomElement,\n defineProps,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type OverlayPositionerProps } from '@aria-ui/elements/overlay'\n\nimport { InlinePopoverStoreContext } from './store.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverPositionerProps extends\n Omit<\n OverlayPositionerProps,\n | 'placement'\n | 'offset'\n | 'hide'\n | 'hoist'\n | 'overlap'\n | 'inline'\n | 'overflowPadding'\n >\n{\n /**\n * The initial placement of the floating element\n *\n * @default \"top\"\n */\n placement: OverlayPositionerProps['placement']\n\n /**\n * The distance between the reference and floating element.\n *\n * @default 12\n */\n offset: OverlayPositionerProps['offset']\n\n /**\n * Whether to hide the floating element when the reference element or the\n * floating element is fully clipped.\n *\n * @default true\n */\n hide: OverlayPositionerProps['hide']\n\n /**\n * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)\n * to place the floating element on top of other page content.\n *\n * @default false\n */\n hoist: boolean\n\n /**\n * Whether the floating element can overlap the reference element to keep it\n * in view.\n *\n * @default true\n */\n overlap: OverlayPositionerProps['overlap']\n\n /**\n * Whether to improve positioning for inline reference elements that span over\n * multiple lines.\n *\n * @default true\n */\n inline: OverlayPositionerProps['inline']\n\n /**\n * Describes the virtual padding around the boundary to check for overflow.\n *\n * @default 8\n */\n overflowPadding: OverlayPositionerProps['overflowPadding']\n}\n\n/** @internal */\nexport const InlinePopoverPositionerPropsDeclaration: PropsDeclaration<InlinePopoverPositionerProps> = /* @__PURE__ */ defineProps<\n InlinePopoverPositionerProps\n>({\n ...OverlayPositionerPropsDeclaration,\n placement: { default: 'top', attribute: 'placement', type: 'string' },\n offset: { default: 12, attribute: false },\n hide: { default: true, attribute: 'hide', type: 'boolean' },\n hoist: { default: false, attribute: 'hoist', type: 'boolean' },\n overlap: { default: true, attribute: 'overlap', type: 'boolean' },\n inline: { default: true, attribute: 'inline', type: 'boolean' },\n overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },\n})\n\n/** @internal */\nexport function setupInlinePopoverPositioner(\n host: HostElement,\n props: State<InlinePopoverPositionerProps>,\n): void {\n setupOverlayPositioner(host, props, InlinePopoverStoreContext.consume(host))\n}\n\nconst InlinePopoverPositionerElementBase: HostElementConstructor<InlinePopoverPositionerProps> = defineCustomElement(\n setupInlinePopoverPositioner,\n InlinePopoverPositionerPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-positioner>` custom element.\n *\n * Properties: {@link InlinePopoverPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the inline popover is visible, `\"closed\"` otherwise |\n * | `data-side` | The side of the anchor element the positioner is on |\n * | `data-align` | The alignment of the positioner relative to the anchor element |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class InlinePopoverPositionerElement extends InlinePopoverPositionerElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverPositionerElement(): void {\n registerCustomElement('prosekit-inline-popover-positioner', InlinePopoverPositionerElement)\n}\n","import type { HostElement } from '@aria-ui/core'\nimport { defineFocusChangeHandler, type Editor, type FocusChangeHandler } from '@prosekit/core'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\n\n/**\n * @internal\n */\nexport function useEditorFocusChangeEvent(\n host: HostElement,\n getEditor: () => Editor | null,\n handler: FocusChangeHandler,\n): void {\n const extension = defineFocusChangeHandler(handler)\n useEditorExtension(host, getEditor, extension)\n}\n","import type { HostElement } from '@aria-ui/core'\nimport { defineKeymap, type Editor, type Keymap } from '@prosekit/core'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\n\nexport function useKeymap(\n host: HostElement,\n getEditor: () => Editor | null,\n keymap: Keymap,\n): void {\n const extension = defineKeymap(keymap)\n useEditorExtension(host, getEditor, extension)\n}\n","import type { ReferenceElement } from '@floating-ui/dom'\nimport { containsInlineNode, isInCodeBlock, isTextSelection } from '@prosekit/core'\nimport type { EditorView } from '@prosekit/pm/view'\n\nexport function getVirtualSelectionElement(\n view: EditorView,\n): ReferenceElement | undefined {\n if (typeof window === 'undefined' || view.isDestroyed) {\n return\n }\n\n const selection = view.state.selection\n\n if (\n !selection.empty\n && !isInCodeBlock(selection)\n && isTextSelection(selection)\n && containsInlineNode(view.state.doc, selection.from, selection.to)\n ) {\n return getDomDecoration(view) || getInlineDecoration(view)\n }\n}\n\nfunction getDomDecoration(view: EditorView): ReferenceElement | undefined {\n const range = getDomRange(view)\n if (range) {\n // To get it work properly in Safari, we cannot return the range directly.\n // We have to return a contextElement.\n return {\n contextElement: view.dom,\n getBoundingClientRect: () => range.getBoundingClientRect(),\n getClientRects: () => range.getClientRects(),\n }\n }\n}\n\nfunction getDomRange(view: EditorView): Range | undefined {\n const win = view.dom.ownerDocument.defaultView\n const selection = win?.getSelection()\n if (!selection || selection.isCollapsed) {\n return\n }\n\n const range = typeof selection.rangeCount === 'number'\n && selection.rangeCount > 0\n && selection.getRangeAt(0)\n\n if (!range) {\n return\n }\n\n return range\n}\n\nfunction getInlineDecoration(view: EditorView): ReferenceElement | undefined {\n const match = view.dom.querySelectorAll('.prosekit-virtual-selection')\n\n if (match.length === 0) {\n return\n }\n if (match.length === 1) {\n return match[0]\n }\n\n const items = Array.from(match)\n return {\n contextElement: items[0],\n getBoundingClientRect: () => items[0].getBoundingClientRect(),\n getClientRects: () => items.map((item) => item.getBoundingClientRect()),\n }\n}\n","import {\n defineCustomElement,\n defineProps,\n registerCustomElement,\n type HostElement,\n type HostElementConstructor,\n type PropsDeclaration,\n type State,\n} from '@aria-ui/core'\nimport type { OpenChangeEvent } from '@aria-ui/elements/overlay'\nimport { OverlayRootPropsDeclaration, useOverlayStore, type OverlayRootProps } from '@aria-ui/elements/overlay'\nimport type { Editor } from '@prosekit/core'\nimport type { Selection } from '@prosekit/pm/state'\n\nimport { useEditorFocusChangeEvent } from '../../hooks/use-editor-focus-event.ts'\nimport { useEditorUpdateEvent } from '../../hooks/use-editor-update-event.ts'\nimport { useKeymap } from '../../hooks/use-keymap.ts'\n\nimport { InlinePopoverStoreContext } from './store.ts'\nimport { getVirtualSelectionElement } from './virtual-selection-element.ts'\n\n/**\n * @public\n */\nexport interface InlinePopoverRootProps extends OverlayRootProps {\n /**\n * The ProseKit editor instance.\n *\n * @default null\n * @hidden\n */\n editor: Editor | null\n\n /**\n * Whether the popover is open by default when some inline content is\n * selected.\n *\n * @default true\n */\n defaultOpen: boolean\n\n /**\n * Whether the inline popover should be dismissed when the editor receives an\n * Escape key press.\n *\n * @default true\n */\n dismissOnEscape: boolean\n}\n\n/** @internal */\nexport const InlinePopoverRootPropsDeclaration: PropsDeclaration<InlinePopoverRootProps> = /* @__PURE__ */ defineProps<\n InlinePopoverRootProps\n>({\n ...OverlayRootPropsDeclaration,\n editor: { default: null, attribute: false },\n defaultOpen: { default: true, attribute: 'default-open', type: 'boolean' },\n dismissOnEscape: { default: true, attribute: 'dismiss-on-escape', type: 'boolean' },\n})\n\n/**\n * @public\n */\nexport interface InlinePopoverRootEvents {\n /**\n * Emitted when the open state of the popover changes.\n */\n openChange: OpenChangeEvent\n}\n\n/** @internal */\nexport function setupInlinePopoverRoot(\n host: HostElement,\n props: State<InlinePopoverRootProps>,\n): void {\n const store = useOverlayStore(host, props)\n InlinePopoverStoreContext.provide(host, store)\n\n let editorFocused = false\n useEditorFocusChangeEvent(host, props.editor.get, (focus) => {\n editorFocused = focus\n })\n\n let prevSelection: Selection | undefined\n useEditorUpdateEvent(host, props.editor.get, (view) => {\n const isPopoverFocused = !editorFocused && host.contains(host.ownerDocument.activeElement)\n if (isPopoverFocused) return\n\n const { selection } = view.state\n if (prevSelection?.eq(selection)) return\n prevSelection = selection\n\n const reference = getVirtualSelectionElement(view)\n store.setAnchorElement(reference)\n\n if (reference && props.defaultOpen.get()) {\n store.requestOpenChange(true)\n } else if (!reference) {\n store.requestOpenChange(false)\n }\n })\n\n useKeymap(host, props.editor.get, {\n Escape: () => {\n if (!props.dismissOnEscape.get() || !store.getIsOpen()) return false\n store.requestOpenChange(false)\n return true\n },\n })\n}\n\nconst InlinePopoverRootElementBase: HostElementConstructor<InlinePopoverRootProps> = defineCustomElement(\n setupInlinePopoverRoot,\n InlinePopoverRootPropsDeclaration,\n)\n\n/**\n * `<prosekit-inline-popover-root>` custom element.\n *\n * Properties: {@link InlinePopoverRootProps}\n *\n * Events: {@link InlinePopoverRootEvents}\n */\nexport class InlinePopoverRootElement extends InlinePopoverRootElementBase {}\n\n/** @internal */\nexport function registerInlinePopoverRootElement(): void {\n registerCustomElement('prosekit-inline-popover-root', InlinePopoverRootElement)\n}\n"],"mappings":"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"}
package/dist/menu.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","names":[],"sources":["../src/components/menu/index.ts"],"sourcesContent":["/**\n\n@module\n\n## Anatomy\n\n```html\n<prosekit-menu-root>\n <prosekit-menu-trigger>...</prosekit-menu-trigger>\n <prosekit-menu-positioner>\n <prosekit-menu-popup>\n <prosekit-menu-item>...</prosekit-menu-item>\n <prosekit-menu-submenu-root>\n <prosekit-menu-submenu-trigger>...</prosekit-menu-submenu-trigger>\n <prosekit-menu-positioner>\n <prosekit-menu-popup>\n <prosekit-menu-item>...</prosekit-menu-item>\n </prosekit-menu-popup>\n </prosekit-menu-positioner>\n </prosekit-menu-submenu-root>\n </prosekit-menu-popup>\n </prosekit-menu-positioner>\n</prosekit-menu-root>\n```\n*/\n\nimport { registerCustomElement, type PropsDeclaration } from '@aria-ui/core'\nimport * as Base from '@aria-ui/elements/menu'\n\n/**\n * `<prosekit-menu-item>` custom element.\n *\n * Properties: {@link MenuItemProps}\n *\n * Events: {@link MenuItemEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-highlighted` | Present when the item is the currently highlighted option |\n */\nexport class MenuItemElement extends Base.MenuItemElement {}\n\n/**\n * `<prosekit-menu-popup>` custom element.\n *\n * Properties: {@link MenuPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the menu is visible, `\"closed\"` otherwise |\n */\nexport class MenuPopupElement extends Base.MenuPopupElement {}\n\n/**\n * `<prosekit-menu-positioner>` custom element.\n *\n * Properties: {@link MenuPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the menu is visible, `\"closed\"` otherwise |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class MenuPositionerElement extends Base.MenuPositionerElement {}\n\n/**\n * `<prosekit-menu-root>` custom element.\n *\n * Properties: {@link MenuRootProps}\n *\n * Events: {@link MenuRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-menu-root` | Always present on the element |\n */\nexport class MenuRootElement extends Base.MenuRootElement {}\n\n/**\n * `<prosekit-menu-submenu-root>` custom element.\n *\n * Properties: {@link MenuSubmenuRootProps}\n *\n * Events: {@link MenuSubmenuRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-menu-submenu-root` | Always present on the element |\n */\nexport class MenuSubmenuRootElement extends Base.MenuSubmenuRootElement {}\n\n/**\n * `<prosekit-menu-submenu-trigger>` custom element.\n *\n * Properties: {@link MenuSubmenuTriggerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-highlighted` | Present when the item is the currently highlighted option |\n */\nexport class MenuSubmenuTriggerElement extends Base.MenuSubmenuTriggerElement {}\n\n/**\n * `<prosekit-menu-trigger>` custom element.\n *\n * Properties: {@link MenuTriggerProps}\n *\n * Events: {@link MenuTriggerEvents}\n */\nexport class MenuTriggerElement extends Base.MenuTriggerElement {}\n\nexport interface MenuItemProps extends Base.MenuItemProps {}\nexport interface MenuPopupProps extends Base.MenuPopupProps {}\nexport interface MenuPositionerProps extends Base.MenuPositionerProps {}\nexport interface MenuRootProps extends Base.MenuRootProps {}\nexport interface MenuSubmenuRootProps extends Base.MenuSubmenuRootProps {}\nexport interface MenuSubmenuTriggerProps extends Base.MenuSubmenuTriggerProps {}\nexport interface MenuTriggerProps extends Base.MenuTriggerProps {}\n\nexport interface MenuItemEvents extends Base.MenuItemEvents {}\nexport interface MenuRootEvents extends Base.MenuRootEvents {}\nexport interface MenuSubmenuRootEvents extends Base.MenuSubmenuRootEvents {}\nexport interface MenuTriggerEvents extends Base.MenuTriggerEvents {}\n\n/** @internal */\nexport const MenuItemPropsDeclaration: PropsDeclaration<MenuItemProps> = Base.MenuItemPropsDeclaration\n/** @internal */\nexport const MenuPopupPropsDeclaration: PropsDeclaration<MenuPopupProps> = Base.MenuPopupPropsDeclaration\n/** @internal */\nexport const MenuPositionerPropsDeclaration: PropsDeclaration<MenuPositionerProps> = Base.MenuPositionerPropsDeclaration\n/** @internal */\nexport const MenuRootPropsDeclaration: PropsDeclaration<MenuRootProps> = Base.MenuRootPropsDeclaration\n/** @internal */\nexport const MenuSubmenuRootPropsDeclaration: PropsDeclaration<MenuSubmenuRootProps> = Base.MenuSubmenuRootPropsDeclaration\n/** @internal */\nexport const MenuSubmenuTriggerPropsDeclaration: PropsDeclaration<MenuSubmenuTriggerProps> = Base.MenuSubmenuTriggerPropsDeclaration\n/** @internal */\nexport const MenuTriggerPropsDeclaration: PropsDeclaration<MenuTriggerProps> = Base.MenuTriggerPropsDeclaration\n\nexport function registerMenuRootElement(): void {\n registerCustomElement('prosekit-menu-root', MenuRootElement)\n}\nexport function registerMenuTriggerElement(): void {\n registerCustomElement('prosekit-menu-trigger', MenuTriggerElement)\n}\nexport function registerMenuPositionerElement(): void {\n registerCustomElement('prosekit-menu-positioner', MenuPositionerElement)\n}\nexport function registerMenuPopupElement(): void {\n registerCustomElement('prosekit-menu-popup', MenuPopupElement)\n}\nexport function registerMenuItemElement(): void {\n registerCustomElement('prosekit-menu-item', MenuItemElement)\n}\nexport function registerMenuSubmenuRootElement(): void {\n registerCustomElement('prosekit-menu-submenu-root', MenuSubmenuRootElement)\n}\nexport function registerMenuSubmenuTriggerElement(): void {\n registerCustomElement('prosekit-menu-submenu-trigger', MenuSubmenuTriggerElement)\n}\n\nexport {\n OpenChangeEvent,\n SelectEvent,\n setupMenuItem,\n setupMenuPopup,\n setupMenuPositioner,\n setupMenuRoot,\n setupMenuSubmenuRoot,\n setupMenuSubmenuTrigger,\n setupMenuTrigger,\n} from '@aria-ui/elements/menu'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,kBAAb,cAAqC,KAAK,gBAAgB;;;;;;;;;;;;AAa1D,IAAa,mBAAb,cAAsC,KAAK,iBAAiB;;;;;;;;;;;;;;;;;;AAmB5D,IAAa,wBAAb,cAA2C,KAAK,sBAAsB;;;;;;;;;;;;;;AAetE,IAAa,kBAAb,cAAqC,KAAK,gBAAgB;;;;;;;;;;;;;;AAe1D,IAAa,yBAAb,cAA4C,KAAK,uBAAuB;;;;;;;;;;;;AAaxE,IAAa,4BAAb,cAA+C,KAAK,0BAA0B;;;;;;;;AAS9E,IAAa,qBAAb,cAAwC,KAAK,mBAAmB;;AAgBhE,MAAa,2BAA4D,KAAK;;AAE9E,MAAa,4BAA8D,KAAK;;AAEhF,MAAa,iCAAwE,KAAK;;AAE1F,MAAa,2BAA4D,KAAK;;AAE9E,MAAa,kCAA0E,KAAK;;AAE5F,MAAa,qCAAgF,KAAK;;AAElG,MAAa,8BAAkE,KAAK;AAEpF,SAAgB,0BAAgC;AAC9C,uBAAsB,sBAAsB,gBAAgB;;AAE9D,SAAgB,6BAAmC;AACjD,uBAAsB,yBAAyB,mBAAmB;;AAEpE,SAAgB,gCAAsC;AACpD,uBAAsB,4BAA4B,sBAAsB;;AAE1E,SAAgB,2BAAiC;AAC/C,uBAAsB,uBAAuB,iBAAiB;;AAEhE,SAAgB,0BAAgC;AAC9C,uBAAsB,sBAAsB,gBAAgB;;AAE9D,SAAgB,iCAAuC;AACrD,uBAAsB,8BAA8B,uBAAuB;;AAE7E,SAAgB,oCAA0C;AACxD,uBAAsB,iCAAiC,0BAA0B"}
1
+ {"version":3,"file":"menu.js","names":[],"sources":["../src/components/menu/index.ts"],"sourcesContent":["/**\n\n@module\n\n## Anatomy\n\n```html\n<prosekit-menu-root>\n <prosekit-menu-trigger>...</prosekit-menu-trigger>\n <prosekit-menu-positioner>\n <prosekit-menu-popup>\n <prosekit-menu-item>...</prosekit-menu-item>\n <prosekit-menu-submenu-root>\n <prosekit-menu-submenu-trigger>...</prosekit-menu-submenu-trigger>\n <prosekit-menu-positioner>\n <prosekit-menu-popup>\n <prosekit-menu-item>...</prosekit-menu-item>\n </prosekit-menu-popup>\n </prosekit-menu-positioner>\n </prosekit-menu-submenu-root>\n </prosekit-menu-popup>\n </prosekit-menu-positioner>\n</prosekit-menu-root>\n```\n*/\n\nimport { registerCustomElement, type PropsDeclaration } from '@aria-ui/core'\nimport * as Base from '@aria-ui/elements/menu'\n\n/**\n * `<prosekit-menu-item>` custom element.\n *\n * Properties: {@link MenuItemProps}\n *\n * Events: {@link MenuItemEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-highlighted` | Present when the item is the currently highlighted option |\n */\nexport class MenuItemElement extends Base.MenuItemElement {}\n\n/**\n * `<prosekit-menu-popup>` custom element.\n *\n * Properties: {@link MenuPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the menu is visible, `\"closed\"` otherwise |\n */\nexport class MenuPopupElement extends Base.MenuPopupElement {}\n\n/**\n * `<prosekit-menu-positioner>` custom element.\n *\n * Properties: {@link MenuPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the menu is visible, `\"closed\"` otherwise |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class MenuPositionerElement extends Base.MenuPositionerElement {}\n\n/**\n * `<prosekit-menu-root>` custom element.\n *\n * Properties: {@link MenuRootProps}\n *\n * Events: {@link MenuRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-menu-root` | Always present on the element |\n */\nexport class MenuRootElement extends Base.MenuRootElement {}\n\n/**\n * `<prosekit-menu-submenu-root>` custom element.\n *\n * Properties: {@link MenuSubmenuRootProps}\n *\n * Events: {@link MenuSubmenuRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-menu-submenu-root` | Always present on the element |\n */\nexport class MenuSubmenuRootElement extends Base.MenuSubmenuRootElement {}\n\n/**\n * `<prosekit-menu-submenu-trigger>` custom element.\n *\n * Properties: {@link MenuSubmenuTriggerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-highlighted` | Present when the item is the currently highlighted option |\n */\nexport class MenuSubmenuTriggerElement extends Base.MenuSubmenuTriggerElement {}\n\n/**\n * `<prosekit-menu-trigger>` custom element.\n *\n * Properties: {@link MenuTriggerProps}\n *\n * Events: {@link MenuTriggerEvents}\n */\nexport class MenuTriggerElement extends Base.MenuTriggerElement {}\n\nexport interface MenuItemProps extends Base.MenuItemProps {}\nexport interface MenuPopupProps extends Base.MenuPopupProps {}\nexport interface MenuPositionerProps extends Base.MenuPositionerProps {}\nexport interface MenuRootProps extends Base.MenuRootProps {}\nexport interface MenuSubmenuRootProps extends Base.MenuSubmenuRootProps {}\nexport interface MenuSubmenuTriggerProps extends Base.MenuSubmenuTriggerProps {}\nexport interface MenuTriggerProps extends Base.MenuTriggerProps {}\n\nexport interface MenuItemEvents extends Base.MenuItemEvents {}\nexport interface MenuRootEvents extends Base.MenuRootEvents {}\nexport interface MenuSubmenuRootEvents extends Base.MenuSubmenuRootEvents {}\nexport interface MenuTriggerEvents extends Base.MenuTriggerEvents {}\n\n/** @internal */\nexport const MenuItemPropsDeclaration: PropsDeclaration<MenuItemProps> = Base.MenuItemPropsDeclaration\n/** @internal */\nexport const MenuPopupPropsDeclaration: PropsDeclaration<MenuPopupProps> = Base.MenuPopupPropsDeclaration\n/** @internal */\nexport const MenuPositionerPropsDeclaration: PropsDeclaration<MenuPositionerProps> = Base.MenuPositionerPropsDeclaration\n/** @internal */\nexport const MenuRootPropsDeclaration: PropsDeclaration<MenuRootProps> = Base.MenuRootPropsDeclaration\n/** @internal */\nexport const MenuSubmenuRootPropsDeclaration: PropsDeclaration<MenuSubmenuRootProps> = Base.MenuSubmenuRootPropsDeclaration\n/** @internal */\nexport const MenuSubmenuTriggerPropsDeclaration: PropsDeclaration<MenuSubmenuTriggerProps> = Base.MenuSubmenuTriggerPropsDeclaration\n/** @internal */\nexport const MenuTriggerPropsDeclaration: PropsDeclaration<MenuTriggerProps> = Base.MenuTriggerPropsDeclaration\n\nexport function registerMenuRootElement(): void {\n registerCustomElement('prosekit-menu-root', MenuRootElement)\n}\nexport function registerMenuTriggerElement(): void {\n registerCustomElement('prosekit-menu-trigger', MenuTriggerElement)\n}\nexport function registerMenuPositionerElement(): void {\n registerCustomElement('prosekit-menu-positioner', MenuPositionerElement)\n}\nexport function registerMenuPopupElement(): void {\n registerCustomElement('prosekit-menu-popup', MenuPopupElement)\n}\nexport function registerMenuItemElement(): void {\n registerCustomElement('prosekit-menu-item', MenuItemElement)\n}\nexport function registerMenuSubmenuRootElement(): void {\n registerCustomElement('prosekit-menu-submenu-root', MenuSubmenuRootElement)\n}\nexport function registerMenuSubmenuTriggerElement(): void {\n registerCustomElement('prosekit-menu-submenu-trigger', MenuSubmenuTriggerElement)\n}\n\nexport {\n OpenChangeEvent,\n SelectEvent,\n setupMenuItem,\n setupMenuPopup,\n setupMenuPositioner,\n setupMenuRoot,\n setupMenuSubmenuRoot,\n setupMenuSubmenuTrigger,\n setupMenuTrigger,\n} from '@aria-ui/elements/menu'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,IAAa,kBAAb,cAAqC,KAAK,gBAAgB;;;;;;;;;;;;AAa1D,IAAa,mBAAb,cAAsC,KAAK,iBAAiB;;;;;;;;;;;;;;;;;;AAmB5D,IAAa,wBAAb,cAA2C,KAAK,sBAAsB;;;;;;;;;;;;;;AAetE,IAAa,kBAAb,cAAqC,KAAK,gBAAgB;;;;;;;;;;;;;;AAe1D,IAAa,yBAAb,cAA4C,KAAK,uBAAuB;;;;;;;;;;;;AAaxE,IAAa,4BAAb,cAA+C,KAAK,0BAA0B;;;;;;;;AAS9E,IAAa,qBAAb,cAAwC,KAAK,mBAAmB;;AAgBhE,MAAa,2BAA4D,KAAK;;AAE9E,MAAa,4BAA8D,KAAK;;AAEhF,MAAa,iCAAwE,KAAK;;AAE1F,MAAa,2BAA4D,KAAK;;AAE9E,MAAa,kCAA0E,KAAK;;AAE5F,MAAa,qCAAgF,KAAK;;AAElG,MAAa,8BAAkE,KAAK;AAEpF,SAAgB,0BAAgC;CAC9C,sBAAsB,sBAAsB,gBAAgB;;AAE9D,SAAgB,6BAAmC;CACjD,sBAAsB,yBAAyB,mBAAmB;;AAEpE,SAAgB,gCAAsC;CACpD,sBAAsB,4BAA4B,sBAAsB;;AAE1E,SAAgB,2BAAiC;CAC/C,sBAAsB,uBAAuB,iBAAiB;;AAEhE,SAAgB,0BAAgC;CAC9C,sBAAsB,sBAAsB,gBAAgB;;AAE9D,SAAgB,iCAAuC;CACrD,sBAAsB,8BAA8B,uBAAuB;;AAE7E,SAAgB,oCAA0C;CACxD,sBAAsB,iCAAiC,0BAA0B"}
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/index.ts"],"sourcesContent":["/**\n\n@module\n\n## Anatomy\n\n```html\n<prosekit-popover-root>\n <prosekit-popover-trigger>...</prosekit-popover-trigger>\n <prosekit-popover-positioner>\n <prosekit-popover-popup>...</prosekit-popover-popup>\n </prosekit-popover-positioner>\n</prosekit-popover-root>\n```\n*/\n\nimport { registerCustomElement, type PropsDeclaration } from '@aria-ui/core'\nimport * as Base from '@aria-ui/elements/popover'\n\n/**\n * `<prosekit-popover-popup>` custom element.\n *\n * Properties: {@link PopoverPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the popover is visible, `\"closed\"` otherwise |\n */\nexport class PopoverPopupElement extends Base.PopoverPopupElement {}\n\n/**\n * `<prosekit-popover-positioner>` custom element.\n *\n * Properties: {@link PopoverPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the popover is visible, `\"closed\"` otherwise |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class PopoverPositionerElement extends Base.PopoverPositionerElement {}\n\n/**\n * `<prosekit-popover-root>` custom element.\n *\n * Properties: {@link PopoverRootProps}\n *\n * Events: {@link PopoverRootEvents}\n */\nexport class PopoverRootElement extends Base.PopoverRootElement {}\n\n/**\n * `<prosekit-popover-trigger>` custom element.\n *\n * Properties: {@link PopoverTriggerProps}\n *\n * Events: {@link PopoverTriggerEvents}\n */\nexport class PopoverTriggerElement extends Base.PopoverTriggerElement {}\n\nexport interface PopoverPopupProps extends Base.PopoverPopupProps {}\nexport interface PopoverPositionerProps extends Base.PopoverPositionerProps {}\nexport interface PopoverRootProps extends Base.PopoverRootProps {}\nexport interface PopoverTriggerProps extends Base.PopoverTriggerProps {}\n\nexport interface PopoverRootEvents extends Base.PopoverRootEvents {}\nexport interface PopoverTriggerEvents extends Base.PopoverTriggerEvents {}\n\n/** @internal */\nexport const PopoverPopupPropsDeclaration: PropsDeclaration<PopoverPopupProps> = Base.PopoverPopupPropsDeclaration\n/** @internal */\nexport const PopoverPositionerPropsDeclaration: PropsDeclaration<PopoverPositionerProps> = Base.PopoverPositionerPropsDeclaration\n/** @internal */\nexport const PopoverRootPropsDeclaration: PropsDeclaration<PopoverRootProps> = Base.PopoverRootPropsDeclaration\n/** @internal */\nexport const PopoverTriggerPropsDeclaration: PropsDeclaration<PopoverTriggerProps> = Base.PopoverTriggerPropsDeclaration\n\nexport function registerPopoverRootElement(): void {\n registerCustomElement('prosekit-popover-root', PopoverRootElement)\n}\nexport function registerPopoverTriggerElement(): void {\n registerCustomElement('prosekit-popover-trigger', PopoverTriggerElement)\n}\nexport function registerPopoverPopupElement(): void {\n registerCustomElement('prosekit-popover-popup', PopoverPopupElement)\n}\nexport function registerPopoverPositionerElement(): void {\n registerCustomElement('prosekit-popover-positioner', PopoverPositionerElement)\n}\n\nexport {\n OpenChangeEvent,\n setupPopoverPopup,\n setupPopoverPositioner,\n setupPopoverRoot,\n setupPopoverTrigger,\n} from '@aria-ui/elements/popover'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,sBAAb,cAAyC,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;AAmBlE,IAAa,2BAAb,cAA8C,KAAK,yBAAyB;;;;;;;;AAS5E,IAAa,qBAAb,cAAwC,KAAK,mBAAmB;;;;;;;;AAShE,IAAa,wBAAb,cAA2C,KAAK,sBAAsB;;AAWtE,MAAa,+BAAoE,KAAK;;AAEtF,MAAa,oCAA8E,KAAK;;AAEhG,MAAa,8BAAkE,KAAK;;AAEpF,MAAa,iCAAwE,KAAK;AAE1F,SAAgB,6BAAmC;AACjD,uBAAsB,yBAAyB,mBAAmB;;AAEpE,SAAgB,gCAAsC;AACpD,uBAAsB,4BAA4B,sBAAsB;;AAE1E,SAAgB,8BAAoC;AAClD,uBAAsB,0BAA0B,oBAAoB;;AAEtE,SAAgB,mCAAyC;AACvD,uBAAsB,+BAA+B,yBAAyB"}
1
+ {"version":3,"file":"popover.js","names":[],"sources":["../src/components/popover/index.ts"],"sourcesContent":["/**\n\n@module\n\n## Anatomy\n\n```html\n<prosekit-popover-root>\n <prosekit-popover-trigger>...</prosekit-popover-trigger>\n <prosekit-popover-positioner>\n <prosekit-popover-popup>...</prosekit-popover-popup>\n </prosekit-popover-positioner>\n</prosekit-popover-root>\n```\n*/\n\nimport { registerCustomElement, type PropsDeclaration } from '@aria-ui/core'\nimport * as Base from '@aria-ui/elements/popover'\n\n/**\n * `<prosekit-popover-popup>` custom element.\n *\n * Properties: {@link PopoverPopupProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the popover is visible, `\"closed\"` otherwise |\n */\nexport class PopoverPopupElement extends Base.PopoverPopupElement {}\n\n/**\n * `<prosekit-popover-positioner>` custom element.\n *\n * Properties: {@link PopoverPositionerProps}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-state` | `\"open\"` when the popover is visible, `\"closed\"` otherwise |\n *\n * CSS variables:\n *\n * | Variable | Description |\n * | --- | --- |\n * | `--transform-origin` | The coordinates that this element is anchored to. Useful for scale animations. |\n */\nexport class PopoverPositionerElement extends Base.PopoverPositionerElement {}\n\n/**\n * `<prosekit-popover-root>` custom element.\n *\n * Properties: {@link PopoverRootProps}\n *\n * Events: {@link PopoverRootEvents}\n */\nexport class PopoverRootElement extends Base.PopoverRootElement {}\n\n/**\n * `<prosekit-popover-trigger>` custom element.\n *\n * Properties: {@link PopoverTriggerProps}\n *\n * Events: {@link PopoverTriggerEvents}\n */\nexport class PopoverTriggerElement extends Base.PopoverTriggerElement {}\n\nexport interface PopoverPopupProps extends Base.PopoverPopupProps {}\nexport interface PopoverPositionerProps extends Base.PopoverPositionerProps {}\nexport interface PopoverRootProps extends Base.PopoverRootProps {}\nexport interface PopoverTriggerProps extends Base.PopoverTriggerProps {}\n\nexport interface PopoverRootEvents extends Base.PopoverRootEvents {}\nexport interface PopoverTriggerEvents extends Base.PopoverTriggerEvents {}\n\n/** @internal */\nexport const PopoverPopupPropsDeclaration: PropsDeclaration<PopoverPopupProps> = Base.PopoverPopupPropsDeclaration\n/** @internal */\nexport const PopoverPositionerPropsDeclaration: PropsDeclaration<PopoverPositionerProps> = Base.PopoverPositionerPropsDeclaration\n/** @internal */\nexport const PopoverRootPropsDeclaration: PropsDeclaration<PopoverRootProps> = Base.PopoverRootPropsDeclaration\n/** @internal */\nexport const PopoverTriggerPropsDeclaration: PropsDeclaration<PopoverTriggerProps> = Base.PopoverTriggerPropsDeclaration\n\nexport function registerPopoverRootElement(): void {\n registerCustomElement('prosekit-popover-root', PopoverRootElement)\n}\nexport function registerPopoverTriggerElement(): void {\n registerCustomElement('prosekit-popover-trigger', PopoverTriggerElement)\n}\nexport function registerPopoverPopupElement(): void {\n registerCustomElement('prosekit-popover-popup', PopoverPopupElement)\n}\nexport function registerPopoverPositionerElement(): void {\n registerCustomElement('prosekit-popover-positioner', PopoverPositionerElement)\n}\n\nexport {\n OpenChangeEvent,\n setupPopoverPopup,\n setupPopoverPositioner,\n setupPopoverRoot,\n setupPopoverTrigger,\n} from '@aria-ui/elements/popover'\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,sBAAb,cAAyC,KAAK,oBAAoB;;;;;;;;;;;;;;;;;;AAmBlE,IAAa,2BAAb,cAA8C,KAAK,yBAAyB;;;;;;;;AAS5E,IAAa,qBAAb,cAAwC,KAAK,mBAAmB;;;;;;;;AAShE,IAAa,wBAAb,cAA2C,KAAK,sBAAsB;;AAWtE,MAAa,+BAAoE,KAAK;;AAEtF,MAAa,oCAA8E,KAAK;;AAEhG,MAAa,8BAAkE,KAAK;;AAEpF,MAAa,iCAAwE,KAAK;AAE1F,SAAgB,6BAAmC;CACjD,sBAAsB,yBAAyB,mBAAmB;;AAEpE,SAAgB,gCAAsC;CACpD,sBAAsB,4BAA4B,sBAAsB;;AAE1E,SAAgB,8BAAoC;CAClD,sBAAsB,0BAA0B,oBAAoB;;AAEtE,SAAgB,mCAAyC;CACvD,sBAAsB,+BAA+B,yBAAyB"}
@@ -1 +1 @@
1
- {"version":3,"file":"resizable.js","names":[],"sources":["../src/utils/is-finite-positive-number.ts","../src/components/resizable/context.ts","../src/components/resizable/resizable-root.ts","../src/components/resizable/calc-resize.ts","../src/components/resizable/resizable-handle.ts"],"sourcesContent":["export function isFinitePositiveNumber(value: unknown): value is number {\n return typeof value === 'number' && Number.isFinite(value) && value > 0\n}\n","import { createContext, type Context } from '@aria-ui/core'\n\n/**\n * @internal\n */\nexport const onResizeContext: Context<OnResize> = createContext<OnResize>(\n 'prosekit/resizable/onResize',\n)\n\n/**\n * @internal\n */\nexport const onResizeStartContext: Context<OnResizeStart> = createContext<OnResizeStart>(\n 'prosekit/resizable/onResizeStart',\n)\n\n/**\n * @internal\n */\nexport const onResizeEndContext: Context<OnResizeEnd> = createContext<OnResizeEnd>(\n 'prosekit/resizable/onResizeEnd',\n)\n\n/**\n * @internal\n */\nexport type OnResize = ((width: number, height: number) => void) | null\n\n/**\n * @internal\n */\nexport type OnResizeStart =\n | (() => readonly [width: number, height: number, aspectRatio: number])\n | null\n\n/**\n * @internal\n */\nexport type OnResizeEnd = (() => void) | null\n","import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'\nimport { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'\nimport { useAttribute } from '@aria-ui/utils'\n\nimport { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'\n\nimport {\n onResizeContext,\n onResizeEndContext,\n onResizeStartContext,\n type OnResize,\n type OnResizeEnd,\n type OnResizeStart,\n} from './context.ts'\n\n/**\n * @public\n */\nexport interface ResizableRootProps {\n /**\n * The width of the resizable element.\n *\n * @default null\n */\n width: number | null\n\n /**\n * The height of the resizable element.\n *\n * @default null\n */\n height: number | null\n\n /**\n * The aspect ratio of the resizable element.\n *\n * @default null\n */\n aspectRatio: number | null\n}\n\n/**\n * @internal\n */\nexport const ResizableRootPropsDeclaration: PropsDeclaration<ResizableRootProps> = defineProps<ResizableRootProps>({\n width: { default: null, attribute: 'data-width', type: 'json' },\n height: { default: null, attribute: 'data-height', type: 'json' },\n aspectRatio: { default: null, attribute: 'data-aspect-ratio', type: 'json' },\n})\n\n/**\n * @public\n */\nexport interface ResizableRootEvents {\n /**\n * Emitted when a resize operation starts.\n */\n resizeStart: ResizeStartEvent\n\n /**\n * Emitted when a resize operation ends.\n */\n resizeEnd: ResizeEndEvent\n}\n\n/**\n * @public\n */\nexport class ResizeStartEvent extends Event {\n readonly detail: {\n readonly width: number\n readonly height: number\n }\n constructor(width: number, height: number) {\n super('resizeStart')\n this.detail = { width, height }\n }\n}\n\n/**\n * @public\n */\nexport class ResizeEndEvent extends Event {\n readonly detail: {\n readonly width: number\n readonly height: number\n }\n constructor(width: number, height: number) {\n super('resizeEnd')\n this.detail = { width, height }\n }\n}\n\n/**\n * @internal\n */\nexport function setupResizableRoot(\n host: HostElement,\n props: State<ResizableRootProps>,\n): void {\n const resizing = createSignal(false)\n\n const onResizeStart: OnResizeStart = () => {\n const { width, height } = host.getBoundingClientRect()\n\n let aspectRatio: number = props.aspectRatio.get() ?? width / height\n\n if (!isFinitePositiveNumber(aspectRatio)) {\n aspectRatio = 0\n }\n\n resizing.set(true)\n host.dispatchEvent(new ResizeStartEvent(width, height))\n return [width, height, aspectRatio]\n }\n\n const onResize: OnResize = (width, height) => {\n props.width.set(width)\n props.height.set(height)\n }\n\n const onResizeEnd: OnResizeEnd = () => {\n const { width, height } = host.getBoundingClientRect()\n resizing.set(false)\n host.dispatchEvent(new ResizeEndEvent(width, height))\n }\n\n onResizeStartContext.provide(host, onResizeStart)\n onResizeContext.provide(host, onResize)\n onResizeEndContext.provide(host, onResizeEnd)\n\n useEffect(host, () => {\n updateResizableRootStyles(\n host,\n Math.max(props.width.get() || 0, 1),\n Math.max(props.height.get() || 0, 1),\n props.aspectRatio.get(),\n )\n })\n\n useAttribute(host, 'data-resizing', () => (resizing.get() ? '' : undefined))\n}\n\nfunction updateResizableRootStyles(\n host: HostElement,\n width: number,\n height: number,\n aspectRatio: number | null,\n) {\n host.style.width = isFinitePositiveNumber(width) ? `${width}px` : ''\n\n host.style.height = isFinitePositiveNumber(height) ? `${height}px` : ''\n\n if (isFinitePositiveNumber(aspectRatio)) {\n host.style.aspectRatio = `${aspectRatio}`\n\n if (width && width > 0 && aspectRatio >= 1) {\n host.style.height = 'auto'\n } else if (height && height > 0 && aspectRatio <= 1) {\n host.style.width = 'min-content'\n }\n }\n}\n\nconst ResizableRootElementBase: HostElementConstructor<ResizableRootProps> = defineCustomElement(\n setupResizableRoot,\n ResizableRootPropsDeclaration,\n)\n\n/**\n * `<prosekit-resizable-root>` custom element.\n *\n * Properties: {@link ResizableRootProps}\n *\n * Events: {@link ResizableRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-resizing` | Present when the element is being resized |\n */\nexport class ResizableRootElement extends ResizableRootElementBase {}\n\nlet isResizableRootRegistered = false\n\n/**\n * @internal\n */\nexport function registerResizableRootElement(): void {\n if (isResizableRootRegistered) return\n isResizableRootRegistered = true\n registerCustomElement('prosekit-resizable-root', ResizableRootElement)\n}\n","import { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'\n\nexport function calcResize(\n position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right',\n w: number,\n h: number,\n dx: number,\n dy: number,\n aspectRatio: number | null | undefined,\n): [w: number, h: number] {\n aspectRatio = aspectRatio ? aspectRatio : w / h\n aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1\n\n switch (position) {\n case 'bottom-right':\n return clamp(calcBottomRightResize(w, h, dx, dy, aspectRatio))\n case 'bottom-left':\n return clamp(calcBottomLeftResize(w, h, dx, dy, aspectRatio))\n case 'top-right':\n return clamp(calcTopRightResize(w, h, dx, dy, aspectRatio))\n case 'top-left':\n return clamp(calcTopLeftResize(w, h, dx, dy, aspectRatio))\n case 'top':\n return clamp(calcTopResize(w, h, dx, dy, aspectRatio))\n case 'right':\n return clamp(calcRightResize(w, h, dx, dy, aspectRatio))\n case 'bottom':\n return clamp(calcBottomResize(w, h, dx, dy, aspectRatio))\n case 'left':\n return clamp(calcLeftResize(w, h, dx, dy, aspectRatio))\n default:\n throw new RangeError(`Invalid position: ${position}`)\n }\n}\n\ntype CalcResize = (\n w: number,\n h: number,\n dx: number,\n dy: number,\n aspectRatio: number,\n) => [w: number, h: number]\n\nconst calcBottomRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h += dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcBottomLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h += dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h -= dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h -= dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopResize: CalcResize = (w, h, dx, dy, r) => {\n h -= dy\n w = h * r\n return [w, h]\n}\n\nconst calcRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h = w / r\n return [w, h]\n}\n\nconst calcBottomResize: CalcResize = (w, h, dx, dy, r) => {\n h += dy\n w = h * r\n return [w, h]\n}\n\nconst calcLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h = w / r\n return [w, h]\n}\n\nfunction clamp([w, h]: [number, number]): [number, number] {\n return [\n Math.max(w, 1),\n Math.max(h, 1),\n ]\n}\n","import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'\nimport { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'\nimport { getWindow } from '@ocavue/utils'\n\nimport { calcResize } from './calc-resize.ts'\nimport { onResizeContext, onResizeEndContext, onResizeStartContext } from './context.ts'\n\n/**\n * @public\n */\nexport interface ResizableHandleProps {\n /**\n * The position of the handle.\n *\n * @default \"bottom-right\"\n */\n position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n}\n\n/**\n * @internal\n */\nexport const ResizableHandlePropsDeclaration: PropsDeclaration<ResizableHandleProps> = defineProps<ResizableHandleProps>({\n position: { default: 'bottom-right', attribute: 'position', type: 'string' },\n})\n\n/**\n * @internal\n */\nexport function setupResizableHandle(\n host: HostElement,\n props: State<ResizableHandleProps>,\n): void {\n const getOnResize = onResizeContext.consume(host)\n const getOnResizeStart = onResizeStartContext.consume(host)\n const getOnResizeEnd = onResizeEndContext.consume(host)\n\n let startX = 0\n let startY = 0\n let width = 0\n let height = 0\n let aspectRatio = 1\n\n const pointerPressing = createSignal(false)\n\n const handlePointerDown = (event: PointerEvent) => {\n event.preventDefault()\n pointerPressing.set(true)\n\n startX = event.x\n startY = event.y\n\n const size = getOnResizeStart()?.()\n if (size) {\n ;[width, height, aspectRatio] = size\n }\n }\n\n const handlePointerMove = (event: PointerEvent) => {\n event.preventDefault()\n\n const dx = event.x - startX\n const dy = event.y - startY\n\n const [w, h] = calcResize(\n props.position.get(),\n width,\n height,\n dx,\n dy,\n aspectRatio,\n )\n\n getOnResize()?.(w, h)\n }\n\n const handlePointerUp = (event: PointerEvent) => {\n event.preventDefault()\n pointerPressing.set(false)\n\n getOnResizeEnd()?.()\n }\n\n useEffect(host, () => {\n host.addEventListener('pointerdown', handlePointerDown)\n return () => {\n host.removeEventListener('pointerdown', handlePointerDown)\n }\n })\n\n useEffect(host, () => {\n if (!pointerPressing.get()) {\n return\n }\n\n const win = getWindow(host)\n\n win.addEventListener('pointermove', handlePointerMove)\n win.addEventListener('pointerup', handlePointerUp)\n return () => {\n win.removeEventListener('pointermove', handlePointerMove)\n win.removeEventListener('pointerup', handlePointerUp)\n }\n })\n}\n\nconst ResizableHandleElementBase: HostElementConstructor<ResizableHandleProps> = defineCustomElement(\n setupResizableHandle,\n ResizableHandlePropsDeclaration,\n)\n\n/**\n * `<prosekit-resizable-handle>` custom element.\n *\n * Properties: {@link ResizableHandleProps}\n */\nexport class ResizableHandleElement extends ResizableHandleElementBase {}\n\nlet isResizableHandleRegistered = false\n\n/**\n * @internal\n */\nexport function registerResizableHandleElement(): void {\n if (isResizableHandleRegistered) return\n isResizableHandleRegistered = true\n registerCustomElement('prosekit-resizable-handle', ResizableHandleElement)\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"resizable.js","names":[],"sources":["../src/utils/is-finite-positive-number.ts","../src/components/resizable/context.ts","../src/components/resizable/resizable-root.ts","../src/components/resizable/calc-resize.ts","../src/components/resizable/resizable-handle.ts"],"sourcesContent":["export function isFinitePositiveNumber(value: unknown): value is number {\n return typeof value === 'number' && Number.isFinite(value) && value > 0\n}\n","import { createContext, type Context } from '@aria-ui/core'\n\n/**\n * @internal\n */\nexport const onResizeContext: Context<OnResize> = createContext<OnResize>(\n 'prosekit/resizable/onResize',\n)\n\n/**\n * @internal\n */\nexport const onResizeStartContext: Context<OnResizeStart> = createContext<OnResizeStart>(\n 'prosekit/resizable/onResizeStart',\n)\n\n/**\n * @internal\n */\nexport const onResizeEndContext: Context<OnResizeEnd> = createContext<OnResizeEnd>(\n 'prosekit/resizable/onResizeEnd',\n)\n\n/**\n * @internal\n */\nexport type OnResize = ((width: number, height: number) => void) | null\n\n/**\n * @internal\n */\nexport type OnResizeStart =\n | (() => readonly [width: number, height: number, aspectRatio: number])\n | null\n\n/**\n * @internal\n */\nexport type OnResizeEnd = (() => void) | null\n","import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'\nimport { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'\nimport { useAttribute } from '@aria-ui/utils'\n\nimport { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'\n\nimport {\n onResizeContext,\n onResizeEndContext,\n onResizeStartContext,\n type OnResize,\n type OnResizeEnd,\n type OnResizeStart,\n} from './context.ts'\n\n/**\n * @public\n */\nexport interface ResizableRootProps {\n /**\n * The width of the resizable element.\n *\n * @default null\n */\n width: number | null\n\n /**\n * The height of the resizable element.\n *\n * @default null\n */\n height: number | null\n\n /**\n * The aspect ratio of the resizable element.\n *\n * @default null\n */\n aspectRatio: number | null\n}\n\n/**\n * @internal\n */\nexport const ResizableRootPropsDeclaration: PropsDeclaration<ResizableRootProps> = defineProps<ResizableRootProps>({\n width: { default: null, attribute: 'data-width', type: 'json' },\n height: { default: null, attribute: 'data-height', type: 'json' },\n aspectRatio: { default: null, attribute: 'data-aspect-ratio', type: 'json' },\n})\n\n/**\n * @public\n */\nexport interface ResizableRootEvents {\n /**\n * Emitted when a resize operation starts.\n */\n resizeStart: ResizeStartEvent\n\n /**\n * Emitted when a resize operation ends.\n */\n resizeEnd: ResizeEndEvent\n}\n\n/**\n * @public\n */\nexport class ResizeStartEvent extends Event {\n readonly detail: {\n readonly width: number\n readonly height: number\n }\n constructor(width: number, height: number) {\n super('resizeStart')\n this.detail = { width, height }\n }\n}\n\n/**\n * @public\n */\nexport class ResizeEndEvent extends Event {\n readonly detail: {\n readonly width: number\n readonly height: number\n }\n constructor(width: number, height: number) {\n super('resizeEnd')\n this.detail = { width, height }\n }\n}\n\n/**\n * @internal\n */\nexport function setupResizableRoot(\n host: HostElement,\n props: State<ResizableRootProps>,\n): void {\n const resizing = createSignal(false)\n\n const onResizeStart: OnResizeStart = () => {\n const { width, height } = host.getBoundingClientRect()\n\n let aspectRatio: number = props.aspectRatio.get() ?? width / height\n\n if (!isFinitePositiveNumber(aspectRatio)) {\n aspectRatio = 0\n }\n\n resizing.set(true)\n host.dispatchEvent(new ResizeStartEvent(width, height))\n return [width, height, aspectRatio]\n }\n\n const onResize: OnResize = (width, height) => {\n props.width.set(width)\n props.height.set(height)\n }\n\n const onResizeEnd: OnResizeEnd = () => {\n const { width, height } = host.getBoundingClientRect()\n resizing.set(false)\n host.dispatchEvent(new ResizeEndEvent(width, height))\n }\n\n onResizeStartContext.provide(host, onResizeStart)\n onResizeContext.provide(host, onResize)\n onResizeEndContext.provide(host, onResizeEnd)\n\n useEffect(host, () => {\n updateResizableRootStyles(\n host,\n Math.max(props.width.get() || 0, 1),\n Math.max(props.height.get() || 0, 1),\n props.aspectRatio.get(),\n )\n })\n\n useAttribute(host, 'data-resizing', () => (resizing.get() ? '' : undefined))\n}\n\nfunction updateResizableRootStyles(\n host: HostElement,\n width: number,\n height: number,\n aspectRatio: number | null,\n) {\n host.style.width = isFinitePositiveNumber(width) ? `${width}px` : ''\n\n host.style.height = isFinitePositiveNumber(height) ? `${height}px` : ''\n\n if (isFinitePositiveNumber(aspectRatio)) {\n host.style.aspectRatio = `${aspectRatio}`\n\n if (width && width > 0 && aspectRatio >= 1) {\n host.style.height = 'auto'\n } else if (height && height > 0 && aspectRatio <= 1) {\n host.style.width = 'min-content'\n }\n }\n}\n\nconst ResizableRootElementBase: HostElementConstructor<ResizableRootProps> = defineCustomElement(\n setupResizableRoot,\n ResizableRootPropsDeclaration,\n)\n\n/**\n * `<prosekit-resizable-root>` custom element.\n *\n * Properties: {@link ResizableRootProps}\n *\n * Events: {@link ResizableRootEvents}\n *\n * Data attributes:\n *\n * | Attribute | Description |\n * | --- | --- |\n * | `data-resizing` | Present when the element is being resized |\n */\nexport class ResizableRootElement extends ResizableRootElementBase {}\n\nlet isResizableRootRegistered = false\n\n/**\n * @internal\n */\nexport function registerResizableRootElement(): void {\n if (isResizableRootRegistered) return\n isResizableRootRegistered = true\n registerCustomElement('prosekit-resizable-root', ResizableRootElement)\n}\n","import { isFinitePositiveNumber } from '../../utils/is-finite-positive-number.ts'\n\nexport function calcResize(\n position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right',\n w: number,\n h: number,\n dx: number,\n dy: number,\n aspectRatio: number | null | undefined,\n): [w: number, h: number] {\n aspectRatio = aspectRatio ? aspectRatio : w / h\n aspectRatio = isFinitePositiveNumber(aspectRatio) ? aspectRatio : 1\n\n switch (position) {\n case 'bottom-right':\n return clamp(calcBottomRightResize(w, h, dx, dy, aspectRatio))\n case 'bottom-left':\n return clamp(calcBottomLeftResize(w, h, dx, dy, aspectRatio))\n case 'top-right':\n return clamp(calcTopRightResize(w, h, dx, dy, aspectRatio))\n case 'top-left':\n return clamp(calcTopLeftResize(w, h, dx, dy, aspectRatio))\n case 'top':\n return clamp(calcTopResize(w, h, dx, dy, aspectRatio))\n case 'right':\n return clamp(calcRightResize(w, h, dx, dy, aspectRatio))\n case 'bottom':\n return clamp(calcBottomResize(w, h, dx, dy, aspectRatio))\n case 'left':\n return clamp(calcLeftResize(w, h, dx, dy, aspectRatio))\n default:\n throw new RangeError(`Invalid position: ${position}`)\n }\n}\n\ntype CalcResize = (\n w: number,\n h: number,\n dx: number,\n dy: number,\n aspectRatio: number,\n) => [w: number, h: number]\n\nconst calcBottomRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h += dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcBottomLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h += dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h -= dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h -= dy\n\n const sum = w + h\n h = sum / (r + 1)\n w = sum - h\n return [w, h]\n}\n\nconst calcTopResize: CalcResize = (w, h, dx, dy, r) => {\n h -= dy\n w = h * r\n return [w, h]\n}\n\nconst calcRightResize: CalcResize = (w, h, dx, dy, r) => {\n w += dx\n h = w / r\n return [w, h]\n}\n\nconst calcBottomResize: CalcResize = (w, h, dx, dy, r) => {\n h += dy\n w = h * r\n return [w, h]\n}\n\nconst calcLeftResize: CalcResize = (w, h, dx, dy, r) => {\n w -= dx\n h = w / r\n return [w, h]\n}\n\nfunction clamp([w, h]: [number, number]): [number, number] {\n return [\n Math.max(w, 1),\n Math.max(h, 1),\n ]\n}\n","import type { HostElement, HostElementConstructor, PropsDeclaration } from '@aria-ui/core'\nimport { createSignal, defineCustomElement, defineProps, registerCustomElement, useEffect, type State } from '@aria-ui/core'\nimport { getWindow } from '@ocavue/utils'\n\nimport { calcResize } from './calc-resize.ts'\nimport { onResizeContext, onResizeEndContext, onResizeStartContext } from './context.ts'\n\n/**\n * @public\n */\nexport interface ResizableHandleProps {\n /**\n * The position of the handle.\n *\n * @default \"bottom-right\"\n */\n position:\n | 'top'\n | 'right'\n | 'bottom'\n | 'left'\n | 'top-left'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-right'\n}\n\n/**\n * @internal\n */\nexport const ResizableHandlePropsDeclaration: PropsDeclaration<ResizableHandleProps> = defineProps<ResizableHandleProps>({\n position: { default: 'bottom-right', attribute: 'position', type: 'string' },\n})\n\n/**\n * @internal\n */\nexport function setupResizableHandle(\n host: HostElement,\n props: State<ResizableHandleProps>,\n): void {\n const getOnResize = onResizeContext.consume(host)\n const getOnResizeStart = onResizeStartContext.consume(host)\n const getOnResizeEnd = onResizeEndContext.consume(host)\n\n let startX = 0\n let startY = 0\n let width = 0\n let height = 0\n let aspectRatio = 1\n\n const pointerPressing = createSignal(false)\n\n const handlePointerDown = (event: PointerEvent) => {\n event.preventDefault()\n pointerPressing.set(true)\n\n startX = event.x\n startY = event.y\n\n const size = getOnResizeStart()?.()\n if (size) {\n ;[width, height, aspectRatio] = size\n }\n }\n\n const handlePointerMove = (event: PointerEvent) => {\n event.preventDefault()\n\n const dx = event.x - startX\n const dy = event.y - startY\n\n const [w, h] = calcResize(\n props.position.get(),\n width,\n height,\n dx,\n dy,\n aspectRatio,\n )\n\n getOnResize()?.(w, h)\n }\n\n const handlePointerUp = (event: PointerEvent) => {\n event.preventDefault()\n pointerPressing.set(false)\n\n getOnResizeEnd()?.()\n }\n\n useEffect(host, () => {\n host.addEventListener('pointerdown', handlePointerDown)\n return () => {\n host.removeEventListener('pointerdown', handlePointerDown)\n }\n })\n\n useEffect(host, () => {\n if (!pointerPressing.get()) {\n return\n }\n\n const win = getWindow(host)\n\n win.addEventListener('pointermove', handlePointerMove)\n win.addEventListener('pointerup', handlePointerUp)\n return () => {\n win.removeEventListener('pointermove', handlePointerMove)\n win.removeEventListener('pointerup', handlePointerUp)\n }\n })\n}\n\nconst ResizableHandleElementBase: HostElementConstructor<ResizableHandleProps> = defineCustomElement(\n setupResizableHandle,\n ResizableHandlePropsDeclaration,\n)\n\n/**\n * `<prosekit-resizable-handle>` custom element.\n *\n * Properties: {@link ResizableHandleProps}\n */\nexport class ResizableHandleElement extends ResizableHandleElementBase {}\n\nlet isResizableHandleRegistered = false\n\n/**\n * @internal\n */\nexport function registerResizableHandleElement(): void {\n if (isResizableHandleRegistered) return\n isResizableHandleRegistered = true\n registerCustomElement('prosekit-resizable-handle', ResizableHandleElement)\n}\n"],"mappings":"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"}
@@ -115,33 +115,27 @@ const SharedTableHandlePositionerPropsDeclaration = defineProps({
115
115
  ...OverlayPositionerPropsDeclaration,
116
116
  editor: {
117
117
  default: null,
118
- attribute: false,
119
- type: "json"
118
+ attribute: false
120
119
  },
121
120
  hoist: {
122
121
  default: false,
123
- attribute: false,
124
- type: "boolean"
122
+ attribute: false
125
123
  },
126
124
  flip: {
127
125
  default: false,
128
- attribute: false,
129
- type: "json"
126
+ attribute: false
130
127
  },
131
128
  shift: {
132
129
  default: false,
133
- attribute: false,
134
- type: "boolean"
130
+ attribute: false
135
131
  },
136
132
  hide: {
137
133
  default: true,
138
- attribute: false,
139
- type: "boolean"
134
+ attribute: false
140
135
  },
141
136
  offset: {
142
137
  default: 0,
143
- attribute: false,
144
- type: "json"
138
+ attribute: false
145
139
  }
146
140
  });
147
141
  /** @internal */
@@ -238,8 +232,7 @@ function useEmptyImage(host) {
238
232
  /** @internal */
239
233
  const TableHandleColumnMenuTriggerPropsDeclaration = defineProps({ editor: {
240
234
  default: null,
241
- attribute: false,
242
- type: "json"
235
+ attribute: false
243
236
  } });
244
237
  /** @internal */
245
238
  function setupTableHandleColumnMenuTrigger(host, props) {
@@ -501,8 +494,7 @@ function unsetSize(element) {
501
494
  /** @internal */
502
495
  const TableHandleDragPreviewPropsDeclaration = defineProps({ editor: {
503
496
  default: null,
504
- attribute: false,
505
- type: "json"
497
+ attribute: false
506
498
  } });
507
499
  /**
508
500
  * @internal
@@ -627,8 +619,7 @@ const HANDLE_WIDTH = 2;
627
619
  /** @internal */
628
620
  const TableHandleDropIndicatorPropsDeclaration = defineProps({ editor: {
629
621
  default: null,
630
- attribute: false,
631
- type: "json"
622
+ attribute: false
632
623
  } });
633
624
  /**
634
625
  * @internal
@@ -874,8 +865,7 @@ function getCellIndex(map, rowIndex, colIndex) {
874
865
  /** @internal */
875
866
  const TableHandleRootPropsDeclaration = defineProps({ editor: {
876
867
  default: null,
877
- attribute: false,
878
- type: "json"
868
+ attribute: false
879
869
  } });
880
870
  /**
881
871
  * @internal
@@ -1014,8 +1004,7 @@ function registerTableHandleRowMenuRootElement() {
1014
1004
  /** @internal */
1015
1005
  const TableHandleRowMenuTriggerPropsDeclaration = defineProps({ editor: {
1016
1006
  default: null,
1017
- attribute: false,
1018
- type: "json"
1007
+ attribute: false
1019
1008
  } });
1020
1009
  /** @internal */
1021
1010
  function setupTableHandleRowMenuTrigger(host, props) {