@prosekit/vue 0.0.0-next-20230709094459 → 0.0.0-next-20240421132240

package/dist/_tsup-dts-rollup.d.ts

@@ -0,0 +1,356 @@
+import type { Attrs } from '@prosekit/pm/model';
+import { AutocompleteEmptyProps } from '@prosekit/web/autocomplete';
+import { AutocompleteItemProps } from '@prosekit/web/autocomplete';
+import { AutocompleteListProps } from '@prosekit/web/autocomplete';
+import { AutocompletePopoverProps } from '@prosekit/web/autocomplete';
+import { BaseNodeViewOptions } from '@prosekit/core';
+import { BlockDragHandleProps } from '@prosekit/web/block-handle';
+import { BlockPopoverProps } from '@prosekit/web/block-handle';
+import { CommandArgs } from '@prosekit/core';
+import { ComponentOptionsMixin } from 'vue';
+import { ComputedRef } from 'vue';
+import { CoreNodeView } from '@prosemirror-adapter/core';
+import type { CoreNodeViewSpec } from '@prosemirror-adapter/core';
+import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core';
+import type { Decoration } from '@prosekit/pm/view';
+import type { DecorationSource } from '@prosekit/pm/view';
+import { DefineComponent } from 'vue';
+import { DefineSetupFnComponent } from 'vue';
+import { Editor } from '@prosekit/core';
+import type { EditorState } from '@prosekit/pm/state';
+import type { EditorView } from '@prosekit/pm/view';
+import { Extension } from '@prosekit/core';
+import { ExtensionTyping } from '@prosekit/core';
+import { ExtractPropTypes } from 'vue';
+import type { InjectionKey } from 'vue';
+import { InlinePopoverProps } from '@prosekit/web/inline-popover';
+import { Keymap } from '@prosekit/core';
+import { MaybeRefOrGetter } from 'vue';
+import type { Node as Node_2 } from '@prosekit/pm/model';
+import type { NodeViewConstructor } from '@prosekit/pm/view';
+import { Options } from 'tsup';
+import { PopoverContentProps } from '@prosekit/web/popover';
+import { PopoverRootProps } from '@prosekit/web/popover';
+import { PopoverTriggerProps } from '@prosekit/web/popover';
+import { Priority } from '@prosekit/core';
+import type { ProseMirrorNode } from '@prosekit/pm/model';
+import { PublicProps } from 'vue';
+import type { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
+import { ResizableHandleProps } from '@prosekit/web/resizable';
+import { ResizableRootProps } from '@prosekit/web/resizable';
+import { ShallowRef } from 'vue';
+import { TooltipContentProps } from '@prosekit/web/tooltip';
+import { TooltipRootProps } from '@prosekit/web/tooltip';
+import { TooltipTriggerProps } from '@prosekit/web/tooltip';
+import { VNode } from 'vue';
+import type { VNodeRef } from 'vue';
+
+declare const AutocompleteEmpty: DefineSetupFnComponent<Partial<AutocompleteEmptyProps> & {
+class?: string | undefined;
+}>;
+export { AutocompleteEmpty }
+export { AutocompleteEmpty as AutocompleteEmpty_alias_1 }
+
+declare const AutocompleteItem: DefineSetupFnComponent<Partial<AutocompleteItemProps> & {
+class?: string | undefined;
+}>;
+export { AutocompleteItem }
+export { AutocompleteItem as AutocompleteItem_alias_1 }
+
+declare const AutocompleteList: DefineSetupFnComponent<Partial<AutocompleteListProps> & {
+class?: string | undefined;
+}>;
+export { AutocompleteList }
+export { AutocompleteList as AutocompleteList_alias_1 }
+
+declare const AutocompletePopover: DefineSetupFnComponent<Partial<AutocompletePopoverProps> & {
+class?: string | undefined;
+}>;
+export { AutocompletePopover }
+export { AutocompletePopover as AutocompletePopover_alias_1 }
+
+declare const BlockDragHandle: DefineSetupFnComponent<Partial<BlockDragHandleProps> & {
+class?: string | undefined;
+}>;
+export { BlockDragHandle }
+export { BlockDragHandle as BlockDragHandle_alias_1 }
+
+declare const BlockPopover: DefineSetupFnComponent<Partial<BlockPopoverProps> & {
+class?: string | undefined;
+}>;
+export { BlockPopover }
+export { BlockPopover as BlockPopover_alias_1 }
+
+export declare function createComponent<Props extends object>(tagName: string, displayName: string, defaultProps: Props): DefineSetupFnComponent<Partial<Props> & {
+    class?: string;
+}>;
+
+export declare type CreateVueNodeView = ReturnType<typeof useVueNodeViewCreator>;
+
+export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
+
+export declare const default_alias_1: {
+    test: {
+        environment: "jsdom";
+    };
+};
+
+/**
+ * Defines a node view using a Vue component.
+ *
+ * @public
+ */
+declare function defineVueNodeView(options: VueNodeViewOptions): Extension;
+export { defineVueNodeView }
+export { defineVueNodeView as defineVueNodeView_alias_1 }
+
+/**
+ * @internal
+ */
+export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<string, string, CommandArgs>>;
+
+declare const InlinePopover: DefineSetupFnComponent<Partial<InlinePopoverProps> & {
+class?: string | undefined;
+}>;
+export { InlinePopover }
+export { InlinePopover as InlinePopover_alias_1 }
+
+export declare type NodeViewFactory = (options: VueNodeViewUserOptions) => NodeViewConstructor;
+
+export declare const nodeViewFactoryKey: InjectionKey<NodeViewFactory>;
+
+declare const PopoverContent: DefineSetupFnComponent<Partial<PopoverContentProps> & {
+class?: string | undefined;
+}>;
+export { PopoverContent }
+export { PopoverContent as PopoverContent_alias_1 }
+
+declare const PopoverRoot: DefineSetupFnComponent<Partial<PopoverRootProps> & {
+class?: string | undefined;
+}>;
+export { PopoverRoot }
+export { PopoverRoot as PopoverRoot_alias_1 }
+
+declare const PopoverTrigger: DefineSetupFnComponent<Partial<PopoverTriggerProps> & {
+class?: string | undefined;
+}>;
+export { PopoverTrigger }
+export { PopoverTrigger as PopoverTrigger_alias_1 }
+
+/**
+ * @internal
+ */
+export declare type PropsWithClass<P = unknown> = P & {
+    class?: string | undefined;
+};
+
+/**
+ * The root component for a ProseKit editor.
+ *
+ * @public
+ */
+declare const ProseKit: DefineSetupFnComponent<ProseKitProps, {}, {}, ProseKitProps & {}, PublicProps>;
+export { ProseKit }
+export { ProseKit as ProseKit_alias_1 }
+
+declare interface ProseKitProps {
+    editor: Editor;
+}
+export { ProseKitProps }
+export { ProseKitProps as ProseKitProps_alias_1 }
+
+/**
+ * @internal
+ */
+export declare function provideEditor(editor: Editor): void;
+
+declare const ResizableHandle: DefineSetupFnComponent<Partial<ResizableHandleProps> & {
+class?: string | undefined;
+}>;
+export { ResizableHandle }
+export { ResizableHandle as ResizableHandle_alias_1 }
+
+declare const ResizableRoot: DefineSetupFnComponent<Partial<ResizableRootProps> & {
+class?: string | undefined;
+}>;
+export { ResizableRoot }
+export { ResizableRoot as ResizableRoot_alias_1 }
+
+declare const TooltipContent: DefineSetupFnComponent<Partial<TooltipContentProps> & {
+class?: string | undefined;
+}>;
+export { TooltipContent }
+export { TooltipContent as TooltipContent_alias_1 }
+
+declare const TooltipRoot: DefineSetupFnComponent<Partial<TooltipRootProps> & {
+class?: string | undefined;
+}>;
+export { TooltipRoot }
+export { TooltipRoot as TooltipRoot_alias_1 }
+
+declare const TooltipTrigger: DefineSetupFnComponent<Partial<TooltipTriggerProps> & {
+class?: string | undefined;
+}>;
+export { TooltipTrigger }
+export { TooltipTrigger as TooltipTrigger_alias_1 }
+
+/**
+ * Calls the given handler whenever the editor document changes.
+ *
+ * @public
+ */
+declare function useDocChange(handler: (doc: ProseMirrorNode) => void, options?: UseExtensionOptions): void;
+export { useDocChange }
+export { useDocChange as useDocChange_alias_1 }
+
+/**
+ * Retrieves the editor instance from the nearest ProseKit component.
+ *
+ * @public
+ */
+declare function useEditor<E extends Extension = any>(options?: {
+    /**
+     * Whether to update the component when the editor is mounted or editor state
+     * is updated.
+     *
+     * @default false
+     */
+    update?: boolean;
+}): ShallowRef<Editor<E>>;
+export { useEditor }
+export { useEditor as useEditor_alias_1 }
+
+/**
+ * @internal
+ */
+export declare function useEditorContext<E extends Extension>(): Editor<E> | undefined;
+
+/**
+ * @internal
+ */
+export declare function useEditorExtension(editorRef: MaybeRefOrGetter<Editor> | null | undefined, extensionRef: MaybeRefOrGetter<Extension | null> | null): void;
+
+/**
+ * Add an extension to the editor.
+ *
+ * @public
+ */
+declare function useExtension(
+/**
+ * The ref to an extension to add to the editor. If it changes, the previous
+ * extension will be removed and the new one (if not null) will be added.
+ */
+extension: MaybeRefOrGetter<Extension | null>, options?: UseExtensionOptions): void;
+export { useExtension }
+export { useExtension as useExtension_alias_1 }
+
+declare interface UseExtensionOptions {
+    /**
+     * The editor to add the extension to. If not provided, it will use the
+     * editor from the nearest `ProseKit` component.
+     */
+    editor?: MaybeRefOrGetter<Editor>;
+    /**
+     * Optional priority to add the extension with.
+     */
+    priority?: Priority;
+}
+export { UseExtensionOptions }
+export { UseExtensionOptions as UseExtensionOptions_alias_1 }
+
+declare function useKeymap(keymap: MaybeRefOrGetter<Keymap>, options?: UseExtensionOptions): void;
+export { useKeymap }
+export { useKeymap as useKeymap_alias_1 }
+
+export declare function useNodeViewFactory(): NodeViewFactory;
+
+/**
+ * @internal
+ */
+export declare function usePriorityExtension<T extends Extension = Extension>(extension: MaybeRefOrGetter<T | null>, priority: Priority | null | undefined): ComputedRef<T | null>;
+
+/**
+ * Calls the given handler whenever the editor state changes.
+ *
+ * @public
+ */
+declare function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void;
+export { useStateUpdate }
+export { useStateUpdate as useStateUpdate_alias_1 }
+
+export declare function useVueNodeViewCreator(renderVueRenderer: VueRendererResult['renderVueRenderer'], removeVueRenderer: VueRendererResult['removeVueRenderer']): NodeViewFactory;
+
+export declare function useVueRenderer(): VueRendererResult;
+
+export declare class VueNodeView extends CoreNodeView<VueNodeViewComponent> implements VueRenderer<VueNodeViewProps> {
+    key: string;
+    context: VueNodeViewProps;
+    updateContext: () => void;
+    render: () => VueRendererComponent;
+}
+
+declare type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>;
+export { VueNodeViewComponent }
+export { VueNodeViewComponent as VueNodeViewComponent_alias_1 }
+
+/**
+ * Options for {@link defineVueNodeView}.
+ *
+ * @public
+ */
+declare interface VueNodeViewOptions extends BaseNodeViewOptions {
+    /**
+     * The name of the node type.
+     */
+    name: string;
+    /**
+     * The Vue component to render the node.
+     */
+    component: VueNodeViewComponent;
+}
+export { VueNodeViewOptions }
+export { VueNodeViewOptions as VueNodeViewOptions_alias_1 }
+
+declare interface VueNodeViewProps {
+    contentRef: VNodeRef;
+    view: EditorView;
+    getPos: () => number | undefined;
+    setAttrs: (attrs: Attrs) => void;
+    node: ShallowRef<Node_2>;
+    selected: ShallowRef<boolean>;
+    decorations: ShallowRef<readonly Decoration[]>;
+    innerDecorations: ShallowRef<DecorationSource>;
+}
+export { VueNodeViewProps }
+export { VueNodeViewProps as VueNodeViewProps_alias_1 }
+
+export declare type VueNodeViewSpec = CoreNodeViewSpec<VueNodeViewComponent>;
+
+export declare type VueNodeViewUserOptions = CoreNodeViewUserOptions<VueNodeViewComponent>;
+
+export declare interface VueRenderer<Context> {
+    key: string;
+    context: Context;
+    render: () => VueRendererComponent;
+    updateContext: () => void;
+}
+
+export declare type VueRendererComponent = DefineComponent<any, any, any>;
+
+export declare interface VueRendererResult {
+    readonly portals: Ref<Record<string, VueRendererComponent>>;
+    readonly renderVueRenderer: (renderer: VueRenderer<unknown>) => void;
+    readonly removeVueRenderer: (renderer: VueRenderer<unknown>) => void;
+}
+
+export declare const VueViewsConsumer: DefineComponent<    {}, () => null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>;
+
+declare const VueViewsProvider: DefineComponent<    {}, () => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>;
+export { VueViewsProvider }
+export { VueViewsProvider as VueViewsProvider_alias_1 }
+
+export { }

package/dist/chunk-64DHEPDA.js

@@ -0,0 +1,37 @@
+import {
+  useEditorContext
+} from "./chunk-X5DTEZPX.js";
+
+// src/components/create-component.ts
+import { defineComponent, h } from "vue";
+function createComponent(tagName, displayName, defaultProps) {
+  const propertyNames = Object.keys(defaultProps);
+  const hasEditor = Object.hasOwn(defaultProps, "editor");
+  const Component = defineComponent(
+    (props, { slots }) => {
+      const editor = useEditorContext();
+      return () => {
+        var _a;
+        const p = {};
+        for (const [key, value] of Object.entries(props)) {
+          if (value !== void 0) {
+            p[propertyNames.includes(key) ? "." + key : key] = value;
+          }
+        }
+        if (hasEditor && editor && !p["editor"]) {
+          p.editor = editor;
+        }
+        return h(tagName, p, (_a = slots.default) == null ? void 0 : _a.call(slots));
+      };
+    },
+    {
+      props: propertyNames,
+      name: displayName
+    }
+  );
+  return Component;
+}
+
+export {
+  createComponent
+};

package/dist/chunk-X5DTEZPX.js

@@ -0,0 +1,15 @@
+// src/injection/editor-context.ts
+import "@prosekit/core";
+import { inject, provide } from "vue";
+var symbol = Symbol("prosekit-vue-editor-context");
+function provideEditor(editor) {
+  provide(symbol, editor);
+}
+function useEditorContext() {
+  return inject(symbol);
+}
+
+export {
+  provideEditor,
+  useEditorContext
+};

package/dist/prosekit-vue-autocomplete.d.ts

@@ -0,0 +1,4 @@
+export { AutocompleteEmpty_alias_1 as AutocompleteEmpty } from './_tsup-dts-rollup';
+export { AutocompleteItem_alias_1 as AutocompleteItem } from './_tsup-dts-rollup';
+export { AutocompleteList_alias_1 as AutocompleteList } from './_tsup-dts-rollup';
+export { AutocompletePopover_alias_1 as AutocompletePopover } from './_tsup-dts-rollup';

package/dist/prosekit-vue-autocomplete.js

@@ -0,0 +1,26 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/autocomplete/autocomplete-empty.gen.ts
+import { defaultAutocompleteEmptyProps } from "@prosekit/web/autocomplete";
+var AutocompleteEmpty = createComponent("prosekit-autocomplete-empty", "AutocompleteEmpty", defaultAutocompleteEmptyProps);
+
+// src/components/autocomplete/autocomplete-item.gen.ts
+import { defaultAutocompleteItemProps } from "@prosekit/web/autocomplete";
+var AutocompleteItem = createComponent("prosekit-autocomplete-item", "AutocompleteItem", defaultAutocompleteItemProps);
+
+// src/components/autocomplete/autocomplete-list.gen.ts
+import { defaultAutocompleteListProps } from "@prosekit/web/autocomplete";
+var AutocompleteList = createComponent("prosekit-autocomplete-list", "AutocompleteList", defaultAutocompleteListProps);
+
+// src/components/autocomplete/autocomplete-popover.gen.ts
+import { defaultAutocompletePopoverProps } from "@prosekit/web/autocomplete";
+var AutocompletePopover = createComponent("prosekit-autocomplete-popover", "AutocompletePopover", defaultAutocompletePopoverProps);
+export {
+  AutocompleteEmpty,
+  AutocompleteItem,
+  AutocompleteList,
+  AutocompletePopover
+};

package/dist/prosekit-vue-block-handle.d.ts

@@ -0,0 +1,2 @@
+export { BlockDragHandle_alias_1 as BlockDragHandle } from './_tsup-dts-rollup';
+export { BlockPopover_alias_1 as BlockPopover } from './_tsup-dts-rollup';

package/dist/prosekit-vue-block-handle.js

@@ -0,0 +1,16 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/block-handle/block-drag-handle.gen.ts
+import { defaultBlockDragHandleProps } from "@prosekit/web/block-handle";
+var BlockDragHandle = createComponent("prosekit-block-drag-handle", "BlockDragHandle", defaultBlockDragHandleProps);
+
+// src/components/block-handle/block-popover.gen.ts
+import { defaultBlockPopoverProps } from "@prosekit/web/block-handle";
+var BlockPopover = createComponent("prosekit-block-popover", "BlockPopover", defaultBlockPopoverProps);
+export {
+  BlockDragHandle,
+  BlockPopover
+};

package/dist/prosekit-vue-inline-popover.d.ts

@@ -0,0 +1 @@
+export { InlinePopover } from './_tsup-dts-rollup';

package/dist/prosekit-vue-inline-popover.js

@@ -0,0 +1,11 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/inline-popover/inline-popover.gen.ts
+import { defaultInlinePopoverProps } from "@prosekit/web/inline-popover";
+var InlinePopover = createComponent("prosekit-inline-popover", "InlinePopover", defaultInlinePopoverProps);
+export {
+  InlinePopover
+};

package/dist/prosekit-vue-popover.d.ts

@@ -0,0 +1,3 @@
+export { PopoverContent } from './_tsup-dts-rollup';
+export { PopoverRoot } from './_tsup-dts-rollup';
+export { PopoverTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-vue-popover.js

@@ -0,0 +1,21 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/popover/popover-content.gen.ts
+import { defaultPopoverContentProps } from "@prosekit/web/popover";
+var PopoverContent = createComponent("prosekit-popover-content", "PopoverContent", defaultPopoverContentProps);
+
+// src/components/popover/popover-root.gen.ts
+import { defaultPopoverRootProps } from "@prosekit/web/popover";
+var PopoverRoot = createComponent("prosekit-popover-root", "PopoverRoot", defaultPopoverRootProps);
+
+// src/components/popover/popover-trigger.gen.ts
+import { defaultPopoverTriggerProps } from "@prosekit/web/popover";
+var PopoverTrigger = createComponent("prosekit-popover-trigger", "PopoverTrigger", defaultPopoverTriggerProps);
+export {
+  PopoverContent,
+  PopoverRoot,
+  PopoverTrigger
+};

package/dist/prosekit-vue-resizable.d.ts

@@ -0,0 +1,2 @@
+export { ResizableHandle } from './_tsup-dts-rollup';
+export { ResizableRoot } from './_tsup-dts-rollup';

package/dist/prosekit-vue-resizable.js

@@ -0,0 +1,16 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/resizable/resizable-handle.gen.ts
+import { defaultResizableHandleProps } from "@prosekit/web/resizable";
+var ResizableHandle = createComponent("prosekit-resizable-handle", "ResizableHandle", defaultResizableHandleProps);
+
+// src/components/resizable/resizable-root.gen.ts
+import { defaultResizableRootProps } from "@prosekit/web/resizable";
+var ResizableRoot = createComponent("prosekit-resizable-root", "ResizableRoot", defaultResizableRootProps);
+export {
+  ResizableHandle,
+  ResizableRoot
+};

package/dist/prosekit-vue-tooltip.d.ts

@@ -0,0 +1,3 @@
+export { TooltipContent } from './_tsup-dts-rollup';
+export { TooltipRoot } from './_tsup-dts-rollup';
+export { TooltipTrigger } from './_tsup-dts-rollup';

package/dist/prosekit-vue-tooltip.js

@@ -0,0 +1,21 @@
+import {
+  createComponent
+} from "./chunk-64DHEPDA.js";
+import "./chunk-X5DTEZPX.js";
+
+// src/components/tooltip/tooltip-content.gen.ts
+import { defaultTooltipContentProps } from "@prosekit/web/tooltip";
+var TooltipContent = createComponent("prosekit-tooltip-content", "TooltipContent", defaultTooltipContentProps);
+
+// src/components/tooltip/tooltip-root.gen.ts
+import { defaultTooltipRootProps } from "@prosekit/web/tooltip";
+var TooltipRoot = createComponent("prosekit-tooltip-root", "TooltipRoot", defaultTooltipRootProps);
+
+// src/components/tooltip/tooltip-trigger.gen.ts
+import { defaultTooltipTriggerProps } from "@prosekit/web/tooltip";
+var TooltipTrigger = createComponent("prosekit-tooltip-trigger", "TooltipTrigger", defaultTooltipTriggerProps);
+export {
+  TooltipContent,
+  TooltipRoot,
+  TooltipTrigger
+};

package/dist/prosekit-vue.d.ts

@@ -1,14 +1,12 @@
-import { Editor, Keymap, Extension } from '@prosekit/core';
-
-interface ProseKitProps {
-    editor: Editor;
-}
-declare const ProseKit: (props: ProseKitProps & {}) => any;
-
-declare function useKeymap({ keymap }: {
-    keymap: Keymap;
-}): void;
-
-declare function useEditor<E extends Extension = any>(): Editor<E>;
-
-export { ProseKit, ProseKitProps, useEditor, useKeymap };
+export { ProseKit } from './_tsup-dts-rollup';
+export { ProseKitProps } from './_tsup-dts-rollup';
+export { defineVueNodeView } from './_tsup-dts-rollup';
+export { VueNodeViewOptions } from './_tsup-dts-rollup';
+export { useEditor } from './_tsup-dts-rollup';
+export { useExtension } from './_tsup-dts-rollup';
+export { UseExtensionOptions } from './_tsup-dts-rollup';
+export { useKeymap } from './_tsup-dts-rollup';
+export { useStateUpdate } from './_tsup-dts-rollup';
+export { useDocChange } from './_tsup-dts-rollup';
+export { VueNodeViewComponent } from './_tsup-dts-rollup';
+export { VueNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-vue.js

@@ -1,58 +1,332 @@
+import {
+  provideEditor,
+  useEditorContext
+} from "./chunk-X5DTEZPX.js";
+
 // src/components/prosekit.ts
-import { defineComponent } from "vue";
+import "@prosekit/core";
+import { defineComponent as defineComponent4, h as h3 } from "vue";
+
+// src/views/vue-views-provider.ts
+import { Fragment, defineComponent as defineComponent2, h as h2, provide } from "vue";
 
-// src/injection/editor-injection.ts
+// src/views/node-view/node-view-context.ts
 import { ProseKitError } from "@prosekit/core";
-import { inject, provide } from "vue";
-var symbol = Symbol("ProseKitContext");
-function provideEditor(editor) {
-  provide(symbol, editor);
+import { inject } from "vue";
+var nodeViewFactoryKey = Symbol(
+  "[ProseKit]useNodeViewFactory"
+);
+function useNodeViewFactory() {
+  const nodeViewFactory = inject(nodeViewFactoryKey);
+  if (!nodeViewFactory) {
+    throw new ProseKitError("Cannot find node view factory context.");
+  }
+  return nodeViewFactory;
 }
-function injectEditor() {
-  const editor = inject(symbol);
-  if (!editor) {
-    throw new ProseKitError("Can't inject editor");
+
+// src/views/node-view/vue-node-view.ts
+import { _getId } from "@prosekit/core";
+import { CoreNodeView } from "@prosemirror-adapter/core";
+import { Teleport, defineComponent, h, markRaw, shallowRef } from "vue";
+var VueNodeView = class extends CoreNodeView {
+  constructor() {
+    super(...arguments);
+    this.key = _getId();
+    this.context = {
+      contentRef: (element) => {
+        if (element && element instanceof HTMLElement && this.contentDOM && element.firstChild !== this.contentDOM)
+          element.appendChild(this.contentDOM);
+      },
+      view: this.view,
+      getPos: this.getPos,
+      setAttrs: this.setAttrs,
+      node: shallowRef(this.node),
+      selected: shallowRef(this.selected),
+      decorations: shallowRef(this.decorations),
+      innerDecorations: shallowRef(this.innerDecorations)
+    };
+    this.updateContext = () => {
+      Object.entries({
+        node: this.node,
+        selected: this.selected,
+        decorations: this.decorations,
+        innerDecorations: this.innerDecorations
+      }).forEach(([key, value]) => {
+        const prev = this.context[key];
+        if (prev.value !== value)
+          prev.value = value;
+      });
+    };
+    this.render = () => {
+      const UserComponent = this.component;
+      return markRaw(
+        defineComponent({
+          name: "ProsemirrorNodeView",
+          setup: () => {
+            return () => h(
+              Teleport,
+              {
+                key: this.key,
+                to: this.dom
+              },
+              h(UserComponent, this.context)
+            );
+          }
+        })
+      );
+    };
+  }
+};
+
+// src/views/node-view/use-vue-node-view-creator.ts
+function useVueNodeViewCreator(renderVueRenderer, removeVueRenderer) {
+  const createVueNodeView = (options) => (node, view, getPos, decorations, innerDecorations) => {
+    const nodeView = new VueNodeView({
+      node,
+      view,
+      getPos,
+      decorations,
+      innerDecorations,
+      options: {
+        ...options,
+        onUpdate() {
+          var _a;
+          (_a = options.onUpdate) == null ? void 0 : _a.call(options);
+          nodeView.updateContext();
+        },
+        selectNode() {
+          var _a;
+          (_a = options.selectNode) == null ? void 0 : _a.call(options);
+          nodeView.updateContext();
+        },
+        deselectNode() {
+          var _a;
+          (_a = options.deselectNode) == null ? void 0 : _a.call(options);
+          nodeView.updateContext();
+        },
+        destroy() {
+          var _a;
+          (_a = options.destroy) == null ? void 0 : _a.call(options);
+          removeVueRenderer(nodeView);
+        }
+      }
+    });
+    renderVueRenderer(nodeView);
+    return nodeView;
+  };
+  return createVueNodeView;
+}
+
+// src/views/vue-renderer.ts
+import {
+  getCurrentInstance,
+  markRaw as markRaw2,
+  onBeforeMount,
+  onUnmounted,
+  ref
+} from "vue";
+function useVueRenderer() {
+  const portals = ref({});
+  const instance = getCurrentInstance();
+  const update = markRaw2({});
+  onBeforeMount(() => {
+    update.updater = () => {
+      instance == null ? void 0 : instance.update();
+    };
+  });
+  onUnmounted(() => {
+    update.updater = void 0;
+  });
+  const renderVueRenderer = (renderer) => {
+    var _a;
+    portals.value[renderer.key] = renderer.render();
+    (_a = update.updater) == null ? void 0 : _a.call(update);
+  };
+  const removeVueRenderer = (renderer) => {
+    delete portals.value[renderer.key];
+  };
+  return {
+    portals,
+    renderVueRenderer,
+    removeVueRenderer
+  };
+}
+
+// src/views/vue-views-provider.ts
+var VueViewsProvider = defineComponent2({
+  name: "VueViewsProvider",
+  setup: (_, { slots }) => {
+    const { portals, renderVueRenderer, removeVueRenderer } = useVueRenderer();
+    const createVueNodeView = useVueNodeViewCreator(
+      renderVueRenderer,
+      removeVueRenderer
+    );
+    provide(nodeViewFactoryKey, createVueNodeView);
+    return () => {
+      var _a;
+      return h2(Fragment, null, [
+        (_a = slots.default) == null ? void 0 : _a.call(slots),
+        Object.values(portals.value).map((x) => h2(x))
+      ]);
+    };
   }
-  return editor;
+});
+
+// src/views/vue-views-comsumer.ts
+import { computed as computed2, defineComponent as defineComponent3 } from "vue";
+
+// src/extensions/vue-node-view.ts
+import {
+  defineNodeViewFactory
+} from "@prosekit/core";
+function defineVueNodeView(options) {
+  const { name, ...userOptions } = options;
+  return defineNodeViewFactory({
+    group: "vue",
+    name,
+    args: userOptions
+  });
+}
+function defineVueNodeViewFactory(nodeViewFactory) {
+  return defineNodeViewFactory({
+    group: "vue",
+    factory: nodeViewFactory
+  });
 }
 
+// src/hooks/use-extension.ts
+import "@prosekit/core";
+import "vue";
+
+// src/hooks/use-editor-extension.ts
+import { EditorNotFoundError } from "@prosekit/core";
+import { toValue, watchPostEffect } from "vue";
+function useEditorExtension(editorRef, extensionRef) {
+  const editorContext = useEditorContext();
+  watchPostEffect((onCleanup) => {
+    const editor = toValue(editorRef) || toValue(editorContext);
+    const extension = toValue(extensionRef);
+    if (!editor) {
+      throw new EditorNotFoundError();
+    }
+    if (extension) {
+      onCleanup(editor.use(extension));
+    }
+  });
+}
+
+// src/hooks/use-priority-extension.ts
+import { withPriority } from "@prosekit/core";
+import { computed, toValue as toValue2 } from "vue";
+function usePriorityExtension(extension, priority) {
+  return computed(() => {
+    const ext = toValue2(extension);
+    return ext && priority ? withPriority(ext, priority) : ext;
+  });
+}
+
+// src/hooks/use-extension.ts
+function useExtension(extension, options) {
+  useEditorExtension(
+    options == null ? void 0 : options.editor,
+    usePriorityExtension(extension, options == null ? void 0 : options.priority)
+  );
+}
+
+// src/views/vue-views-comsumer.ts
+var VueViewsConsumer = defineComponent3({
+  name: "VueViewsConsumer",
+  setup: () => {
+    const nodeViewFactory = useNodeViewFactory();
+    const extension = computed2(() => {
+      return defineVueNodeViewFactory(nodeViewFactory);
+    });
+    useExtension(extension);
+    return () => null;
+  }
+});
+
 // src/components/prosekit.ts
-var ProseKit = defineComponent(
+var ProseKit = defineComponent4(
   (props, { slots }) => {
     provideEditor(props.editor);
     return () => {
-      var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+      return h3(VueViewsProvider, null, () => {
+        var _a;
+        return [
+          h3(VueViewsConsumer),
+          (_a = slots.default) == null ? void 0 : _a.call(slots)
+        ];
+      });
     };
   },
   { props: ["editor"] }
 );
 
-// src/hooks/use-keymap.ts
-import { addKeymap } from "@prosekit/core";
-import { computed } from "vue";
-
-// src/hooks/use-extension.ts
-import { effect } from "vue";
-
 // src/hooks/use-editor.ts
-function useEditor() {
-  return injectEditor();
+import {
+  ProseKitError as ProseKitError2,
+  defineMountHandler,
+  defineUpdateHandler,
+  union
+} from "@prosekit/core";
+import {
+  onMounted,
+  onUnmounted as onUnmounted2,
+  shallowRef as shallowRef2,
+  triggerRef
+} from "vue";
+function useEditor(options) {
+  var _a;
+  const update = (_a = options == null ? void 0 : options.update) != null ? _a : false;
+  const editor = useEditorContext();
+  if (!editor) {
+    throw new ProseKitError2(
+      "useEditor must be used within the ProseKit component"
+    );
+  }
+  const editorRef = shallowRef2(editor);
+  if (update) {
+    onMounted(() => {
+      const forceUpdate = () => triggerRef(editorRef);
+      const extension = union([
+        defineMountHandler(forceUpdate),
+        defineUpdateHandler(forceUpdate)
+      ]);
+      const dispose = editor.use(extension);
+      onUnmounted2(dispose);
+    });
+  }
+  return editorRef;
 }
 
-// src/hooks/use-extension.ts
-function useExtension({ extension }) {
-  const editor = useEditor();
-  effect(() => editor.use(extension));
+// src/hooks/use-keymap.ts
+import { defineKeymap } from "@prosekit/core";
+import { computed as computed3, toValue as toValue3 } from "vue";
+function useKeymap(keymap, options) {
+  const extension = computed3(() => defineKeymap(toValue3(keymap)));
+  return useExtension(extension, options);
 }
 
-// src/hooks/use-keymap.ts
-function useKeymap({ keymap }) {
-  const extension = computed(() => addKeymap(keymap));
-  useExtension({ extension: extension.value });
+// src/hooks/use-state-update.ts
+import { defineUpdateHandler as defineUpdateHandler2 } from "@prosekit/core";
+function useStateUpdate(handler, options) {
+  const extension = defineUpdateHandler2((view) => handler(view.state));
+  return useExtension(extension, options);
+}
+
+// src/hooks/use-doc-change.ts
+import { defineDocChangeHandler } from "@prosekit/core";
+function useDocChange(handler, options) {
+  const extension = defineDocChangeHandler((view) => handler(view.state.doc));
+  return useExtension(extension, options);
 }
 export {
   ProseKit,
+  defineVueNodeView,
+  useDocChange,
   useEditor,
-  useKeymap
+  useExtension,
+  useKeymap,
+  useStateUpdate
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.0.0-next-20230709094459",
+  "version": "0.0.0-next-20240421132240",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -30,33 +30,45 @@
       "import": "./dist/prosekit-vue.js",
       "default": "./dist/prosekit-vue.js"
     },
-    "./components/menu": {
-      "types": "./dist/prosekit-vue-components-menu.d.ts",
-      "import": "./dist/prosekit-vue-components-menu.js",
-      "default": "./dist/prosekit-vue-components-menu.js"
+    "./autocomplete": {
+      "types": "./dist/prosekit-vue-autocomplete.d.ts",
+      "import": "./dist/prosekit-vue-autocomplete.js",
+      "default": "./dist/prosekit-vue-autocomplete.js"
     },
-    "./components/menu-item": {
-      "types": "./dist/prosekit-vue-components-menu-item.d.ts",
-      "import": "./dist/prosekit-vue-components-menu-item.js",
-      "default": "./dist/prosekit-vue-components-menu-item.js"
+    "./block-handle": {
+      "types": "./dist/prosekit-vue-block-handle.d.ts",
+      "import": "./dist/prosekit-vue-block-handle.js",
+      "default": "./dist/prosekit-vue-block-handle.js"
     },
-    "./components/popover": {
-      "types": "./dist/prosekit-vue-components-popover.d.ts",
-      "import": "./dist/prosekit-vue-components-popover.js",
-      "default": "./dist/prosekit-vue-components-popover.js"
+    "./inline-popover": {
+      "types": "./dist/prosekit-vue-inline-popover.d.ts",
+      "import": "./dist/prosekit-vue-inline-popover.js",
+      "default": "./dist/prosekit-vue-inline-popover.js"
     },
-    "./components/popover-suggestion": {
-      "types": "./dist/prosekit-vue-components-popover-suggestion.d.ts",
-      "import": "./dist/prosekit-vue-components-popover-suggestion.js",
-      "default": "./dist/prosekit-vue-components-popover-suggestion.js"
+    "./popover": {
+      "types": "./dist/prosekit-vue-popover.d.ts",
+      "import": "./dist/prosekit-vue-popover.js",
+      "default": "./dist/prosekit-vue-popover.js"
+    },
+    "./resizable": {
+      "types": "./dist/prosekit-vue-resizable.d.ts",
+      "import": "./dist/prosekit-vue-resizable.js",
+      "default": "./dist/prosekit-vue-resizable.js"
+    },
+    "./tooltip": {
+      "types": "./dist/prosekit-vue-tooltip.d.ts",
+      "import": "./dist/prosekit-vue-tooltip.js",
+      "default": "./dist/prosekit-vue-tooltip.js"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@prosekit/core": "0.0.0-next-20230709094459",
-    "@prosekit/lit": "0.0.0-next-20230709094459"
+    "@prosekit/core": "0.0.0-next-20240421132240",
+    "@prosekit/pm": "0.0.0-next-20240421132240",
+    "@prosekit/web": "0.0.0-next-20240421132240",
+    "@prosemirror-adapter/core": "^0.2.6"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"
@@ -68,10 +80,10 @@
   },
   "devDependencies": {
     "@prosekit/dev": "*",
-    "tsup": "^7.1.0",
-    "typescript": "^5.1.6",
-    "vitest": "^0.33.0",
-    "vue": "^3.3.4"
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.5.0",
+    "vue": "^3.4.23"
   },
   "scripts": {
     "build:tsup": "tsup",
@@ -83,17 +95,23 @@
       ".": [
         "./dist/prosekit-vue.d.ts"
       ],
-      "components/menu": [
-        "./dist/prosekit-vue-components-menu.d.ts"
+      "autocomplete": [
+        "./dist/prosekit-vue-autocomplete.d.ts"
+      ],
+      "block-handle": [
+        "./dist/prosekit-vue-block-handle.d.ts"
+      ],
+      "inline-popover": [
+        "./dist/prosekit-vue-inline-popover.d.ts"
       ],
-      "components/menu-item": [
-        "./dist/prosekit-vue-components-menu-item.d.ts"
+      "popover": [
+        "./dist/prosekit-vue-popover.d.ts"
       ],
-      "components/popover": [
-        "./dist/prosekit-vue-components-popover.d.ts"
+      "resizable": [
+        "./dist/prosekit-vue-resizable.d.ts"
       ],
-      "components/popover-suggestion": [
-        "./dist/prosekit-vue-components-popover-suggestion.d.ts"
+      "tooltip": [
+        "./dist/prosekit-vue-tooltip.d.ts"
       ]
     }
   }

package/dist/prosekit-vue-components-menu-item.d.ts

@@ -1,9 +0,0 @@
-import { MenuItem as MenuItem$1 } from '@prosekit/lit/elements/menu-item';
-
-/**
- * @module @prosekit/vue/components/menu-item
- */
-
-declare const MenuItem: (props: Partial<MenuItem$1> & {}) => any;
-
-export { MenuItem };

package/dist/prosekit-vue-components-menu-item.js

@@ -1,14 +0,0 @@
-// src/components/menu-item.gen.ts
-import "@prosekit/lit/elements/menu-item";
-import { defineComponent, h } from "vue";
-var MenuItem = defineComponent(
-  (props, { slots }) => {
-    return () => {
-      var _a;
-      return h("prosekit-menu-item", props, (_a = slots.default) == null ? void 0 : _a.call(slots));
-    };
-  }
-);
-export {
-  MenuItem
-};

package/dist/prosekit-vue-components-menu.d.ts

@@ -1,9 +0,0 @@
-import { Menu as Menu$1 } from '@prosekit/lit/elements/menu';
-
-/**
- * @module @prosekit/vue/components/menu
- */
-
-declare const Menu: (props: Partial<Menu$1> & {}) => any;
-
-export { Menu };

package/dist/prosekit-vue-components-menu.js

@@ -1,14 +0,0 @@
-// src/components/menu.gen.ts
-import "@prosekit/lit/elements/menu";
-import { defineComponent, h } from "vue";
-var Menu = defineComponent(
-  (props, { slots }) => {
-    return () => {
-      var _a;
-      return h("prosekit-menu", props, (_a = slots.default) == null ? void 0 : _a.call(slots));
-    };
-  }
-);
-export {
-  Menu
-};

package/dist/prosekit-vue-components-popover-suggestion.d.ts

@@ -1,18 +0,0 @@
-import { Editor } from '@prosekit/core';
-import { PredictionRule, PopoverSuggestionContext } from '@prosekit/lit/elements/popover-suggestion';
-export { PopoverSuggestionContext, PredictionRule } from '@prosekit/lit/elements/popover-suggestion';
-
-/**
- * @module @prosekit/vue/components/popover-suggestion
- */
-
-interface PopoverSuggestionProps {
-    editor: Editor;
-    rules: PredictionRule[];
-}
-interface PopoverSuggestionSlots {
-    default: PopoverSuggestionContext;
-}
-declare const PopoverSuggestion: (props: PopoverSuggestionProps & {}) => any;
-
-export { PopoverSuggestion, PopoverSuggestionProps, PopoverSuggestionSlots };

package/dist/prosekit-vue-components-popover-suggestion.js

@@ -1,42 +0,0 @@
-// src/components/popover-suggestion.ts
-import { defineComponent as defineComponent2, h as h2, ref } from "vue";
-
-// src/components/popover-suggestion.gen.ts
-import "@prosekit/lit/elements/popover-suggestion";
-import { defineComponent, h } from "vue";
-var PopoverSuggestion = defineComponent(
-  (props, { slots }) => {
-    return () => {
-      var _a;
-      return h("prosekit-popover-suggestion", props, (_a = slots.default) == null ? void 0 : _a.call(slots));
-    };
-  }
-);
-
-// src/components/popover-suggestion.ts
-var PopoverSuggestion2 = defineComponent2(
-  ({ editor, rules }, { slots }) => {
-    const contextRef = ref(null);
-    const onContext = (context) => {
-      contextRef.value = context;
-    };
-    return () => {
-      const context = contextRef.value;
-      return h2(
-        PopoverSuggestion,
-        {
-          ".editor": editor,
-          ".rules": rules,
-          ".onContext": onContext
-        },
-        () => {
-          var _a;
-          return (_a = slots.default) == null ? void 0 : _a.call(slots, context);
-        }
-      );
-    };
-  }
-);
-export {
-  PopoverSuggestion2 as PopoverSuggestion
-};

package/dist/prosekit-vue-components-popover.d.ts

@@ -1,9 +0,0 @@
-import { Popover as Popover$1 } from '@prosekit/lit/elements/popover';
-
-/**
- * @module @prosekit/vue/components/popover
- */
-
-declare const Popover: (props: Partial<Popover$1> & {}) => any;
-
-export { Popover };

package/dist/prosekit-vue-components-popover.js

@@ -1,14 +0,0 @@
-// src/components/popover.gen.ts
-import "@prosekit/lit/elements/popover";
-import { defineComponent, h } from "vue";
-var Popover = defineComponent(
-  (props, { slots }) => {
-    return () => {
-      var _a;
-      return h("prosekit-popover", props, (_a = slots.default) == null ? void 0 : _a.call(slots));
-    };
-  }
-);
-export {
-  Popover
-};

package/src/index.ts

@@ -1,7 +0,0 @@
-/**
- * @module @prosekit/vue
- */
-
-export { ProseKit, type ProseKitProps } from './components/prosekit'
-export { useKeymap } from './hooks/use-keymap'
-export { useEditor } from './hooks/use-editor'