@prosekit/vue 0.1.2 → 0.1.3

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

@@ -1,3 +1,5 @@
+import { AllowedComponentProps } from 'vue';
+import type { Attrs } from '@prosekit/pm/model';
 import { AutocompleteEmptyProps as AutocompleteEmptyProps_2 } from '@prosekit/lit/autocomplete-empty';
 import { AutocompleteItemProps as AutocompleteItemProps_2 } from '@prosekit/lit/autocomplete-item';
 import { AutocompleteListProps as AutocompleteListProps_2 } from '@prosekit/lit/autocomplete-list';
@@ -6,18 +8,37 @@ import { ComboBoxInputProps as ComboBoxInputProps_2 } from '@prosekit/lit/combo-
 import { ComboBoxItemProps as ComboBoxItemProps_2 } from '@prosekit/lit/combo-box-item';
 import { ComboBoxListProps as ComboBoxListProps_2 } from '@prosekit/lit/combo-box-list';
 import { ComboBoxProps as ComboBoxProps_2 } from '@prosekit/lit/combo-box';
+import { CommandArgs } from '@prosekit/core';
+import { ComponentCustomProps } from 'vue';
+import { ComponentOptionsMixin } 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 { Editor } from '@prosekit/core';
+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 as InlinePopoverProps_2 } from '@prosekit/lit/inline-popover';
 import { Keymap } from '@prosekit/core';
+import type { Node as Node_2 } from '@prosekit/pm/model';
+import type { NodeViewConstructor } from '@prosekit/pm/view';
 import { Options } from 'tsup';
 import { PopoverOptions } from '@prosekit/lit/autocomplete-popover';
 import { PopoverOptions as PopoverOptions_alias_1 } from '@prosekit/lit/inline-popover';
 import { PopoverProps as PopoverProps_2 } from '@prosekit/lit/popover';
 import { Priority } from '@prosekit/core';
 import { Ref } from 'vue';
+import { RendererElement } from 'vue';
+import { RendererNode } from 'vue';
 import { ShallowRef } from 'vue';
-import { UserProjectConfigExport } from 'vitest/dist/config.js';
+import { VNode } from 'vue';
+import { VNodeProps } from 'vue';
+import type { VNodeRef } from 'vue';
 
 declare const AutocompleteEmpty: (props: AutocompleteEmptyProps_2 & {
     class?: string | undefined;
@@ -83,9 +104,29 @@ export declare type ComboBoxListProps = PropsWithClass<ComboBoxListProps_2>;
 
 export declare type ComboBoxProps = PropsWithClass<ComboBoxProps_2>;
 
+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: UserProjectConfigExport;
+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>>;
 
 export declare function injectEditor(): Editor;
 
@@ -99,6 +140,10 @@ declare type InlinePopoverProps = PropsWithClass<InlinePopoverProps_2>;
 export { InlinePopoverProps }
 export { InlinePopoverProps as InlinePopoverProps_alias_1 }
 
+export declare type NodeViewFactory = (options: VueNodeViewUserOptions) => NodeViewConstructor;
+
+export declare const nodeViewFactoryKey: InjectionKey<NodeViewFactory>;
+
 export declare const Popover: (props: PopoverProps_2 & {
     class?: string | undefined;
 } & {}) => any;
@@ -112,11 +157,9 @@ export declare type PopoverProps = PropsWithClass<PopoverProps_2>;
 /**
  * @internal
  */
-declare type PropsWithClass<P = unknown> = P & {
+export declare type PropsWithClass<P = unknown> = P & {
     class?: string | undefined;
 };
-export { PropsWithClass }
-export { PropsWithClass as PropsWithClass_alias_1 }
 
 declare const ProseKit: (props: ProseKitProps & {}) => any;
 export { ProseKit }
@@ -157,6 +200,77 @@ declare function useKeymap(keymap: Ref<Keymap>, options?: {
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
+export declare function useNodeViewFactory(): NodeViewFactory;
+
 export declare function usePriorityExtension<T extends Extension = Extension>(extension: Ref<T | null>, priority?: Priority | null): void;
 
+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 VueNodeViewUserOptions {
+    /**
+     * The name of the node.
+     */
+    name: string;
+}
+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, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>;
+
+declare const VueViewsProvider: DefineComponent<    {}, () => VNode<RendererNode, RendererElement, {
+[key: string]: any;
+}>, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>;
+export { VueViewsProvider }
+export { VueViewsProvider as VueViewsProvider_alias_1 }
+
 export { }

package/dist/prosekit-vue.d.ts

@@ -1,6 +1,9 @@
 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 { useKeymap } from './_tsup-dts-rollup';
-export { PropsWithClass } from './_tsup-dts-rollup';
+export { VueNodeViewComponent } from './_tsup-dts-rollup';
+export { VueNodeViewProps } from './_tsup-dts-rollup';

package/dist/prosekit-vue.js

@@ -1,6 +1,6 @@
 // src/components/prosekit.ts
 import "@prosekit/core";
-import { defineComponent } from "vue";
+import { defineComponent as defineComponent4, h as h3 } from "vue";
 
 // src/injection/editor-injection.ts
 import { ProseKitError } from "@prosekit/core";
@@ -17,44 +17,219 @@ function injectEditor() {
   return editor;
 }
 
-// src/components/prosekit.ts
-var ProseKit = defineComponent(
-  (props, { slots }) => {
-    provideEditor(props.editor);
+// src/views/vue-views-provider.ts
+import { Fragment, defineComponent as defineComponent2, h as h2, provide as provide2 } from "vue";
+
+// src/views/node-view/node-view-context.ts
+import { ProseKitError as ProseKitError2 } from "@prosekit/core";
+import { inject as inject2 } from "vue";
+var nodeViewFactoryKey = Symbol(
+  "[ProseKit]useNodeViewFactory"
+);
+function useNodeViewFactory() {
+  const nodeViewFactory = inject2(nodeViewFactoryKey);
+  if (!nodeViewFactory) {
+    throw new ProseKitError2("Cannot find node view factory context.");
+  }
+  return nodeViewFactory;
+}
+
+// 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
+    );
+    provide2(nodeViewFactoryKey, createVueNodeView);
     return () => {
       var _a;
-      return (_a = slots.default) == null ? void 0 : _a.call(slots);
+      return h2(Fragment, null, [
+        (_a = slots.default) == null ? void 0 : _a.call(slots),
+        Object.values(portals.value).map((x) => h2(x))
+      ]);
     };
-  },
-  { props: ["editor"] }
-);
+  }
+});
+
+// src/views/vue-views-comsumer.ts
+import { computed, 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 { unref, watchPostEffect } from "vue";
 
 // src/hooks/use-editor.ts
 import { defineUpdateHandler } from "@prosekit/core";
 import {
   onMounted,
-  onUnmounted,
-  shallowRef,
+  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 = injectEditor();
-  const editorRef = shallowRef(editor);
+  const editorRef = shallowRef2(editor);
   if (update) {
     onMounted(() => {
       const forceUpdate = () => triggerRef(editorRef);
       const dispose = editor.use(defineUpdateHandler(forceUpdate));
-      onUnmounted(dispose);
+      onUnmounted2(dispose);
     });
   }
   return editorRef;
 }
 
 // src/hooks/use-extension.ts
-import "@prosekit/core";
-import { unref, watchPostEffect } from "vue";
 function useExtension(extension) {
   const editor = useEditor();
   watchPostEffect((onCleanup) => {
@@ -65,15 +240,45 @@ function useExtension(extension) {
   });
 }
 
+// src/views/vue-views-comsumer.ts
+var VueViewsConsumer = defineComponent3({
+  name: "VueViewsConsumer",
+  setup: () => {
+    const nodeViewFactory = useNodeViewFactory();
+    const extension = computed(() => {
+      return defineVueNodeViewFactory(nodeViewFactory);
+    });
+    useExtension(extension);
+    return () => null;
+  }
+});
+
+// src/components/prosekit.ts
+var ProseKit = defineComponent4(
+  (props, { slots }) => {
+    provideEditor(props.editor);
+    return () => {
+      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 { defineKeymap } from "@prosekit/core";
-import { computed as computed2, unref as unref3 } from "vue";
+import { computed as computed3, unref as unref3 } from "vue";
 
 // src/hooks/use-priority-extension.ts
 import { withPriority } from "@prosekit/core";
-import { computed, unref as unref2 } from "vue";
+import { computed as computed2, unref as unref2 } from "vue";
 function usePriorityExtension(extension, priority) {
-  const extensionWithPriority = computed(() => {
+  const extensionWithPriority = computed2(() => {
     const ext = unref2(extension);
     return ext && priority ? withPriority(ext, priority) : ext;
   });
@@ -82,11 +287,12 @@ function usePriorityExtension(extension, priority) {
 
 // src/hooks/use-keymap.ts
 function useKeymap(keymap, options) {
-  const extension = computed2(() => defineKeymap(unref3(keymap)));
+  const extension = computed3(() => defineKeymap(unref3(keymap)));
   usePriorityExtension(extension, options == null ? void 0 : options.priority);
 }
 export {
   ProseKit,
+  defineVueNodeView,
   useEditor,
   useExtension,
   useKeymap

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -86,7 +86,9 @@
   ],
   "dependencies": {
     "@prosekit/core": "^0.1.0",
-    "@prosekit/lit": "^0.1.0"
+    "@prosekit/lit": "^0.1.0",
+    "@prosekit/pm": "^0.1.0",
+    "@prosemirror-adapter/core": "^0.2.6"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"
@@ -99,9 +101,9 @@
   "devDependencies": {
     "@prosekit/dev": "*",
     "tsup": "^8.0.1",
-    "typescript": "^5.3.2",
-    "vitest": "^0.34.6",
-    "vue": "^3.3.9"
+    "typescript": "^5.3.3",
+    "vitest": "^1.0.4",
+    "vue": "^3.3.11"
   },
   "scripts": {
     "build:tsup": "tsup",

package/src/index.ts

@@ -1,5 +1,10 @@
 export { ProseKit, type ProseKitProps } from './components/prosekit'
+export {
+  defineVueNodeView,
+  type VueNodeViewOptions,
+} from './extensions/vue-node-view'
 export { useEditor } from './hooks/use-editor'
 export { useExtension } from './hooks/use-extension'
 export { useKeymap } from './hooks/use-keymap'
-export type { PropsWithClass } from './types'
+export type { VueNodeViewComponent } from './views/node-view/vue-node-view-options'
+export type { VueNodeViewProps } from './views/node-view/vue-node-view-props'