@prosekit/vue 0.3.9 → 0.3.10

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

@@ -8,9 +8,6 @@ import { BlockDragHandleProps } from '@prosekit/web/block-handle';
 import { BlockPopoverProps } from '@prosekit/web/block-handle';
 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 { config as default_alias_1 } from '@prosekit/dev/config-vitest';
@@ -20,14 +17,10 @@ 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';
@@ -35,17 +28,13 @@ 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';
+import { VNodeRef } from 'vue';
 
 declare const AutocompleteEmpty: DefineSetupFnComponent<Partial<AutocompleteEmptyProps> & {
 class?: string;
@@ -87,8 +76,6 @@ export declare function createComponent<Props extends object>(tagName: string, d
     class?: string;
 }>;
 
-export declare type CreateVueNodeView = ReturnType<typeof useVueNodeViewCreator>;
-
 export declare const default_alias: Options | Options[] | ((overrideOptions: Options) => Options | Options[] | Promise<Options | Options[]>);
 
 export { default_alias_1 }
@@ -102,21 +89,12 @@ declare function defineVueNodeView(options: VueNodeViewOptions): Extension;
 export { defineVueNodeView }
 export { defineVueNodeView as defineVueNodeView_alias_1 }
 
-/**
- * @internal
- */
-export declare function defineVueNodeViewFactory(nodeViewFactory: NodeViewFactory): Extension<ExtensionTyping<any, any, any>>;
-
 declare const InlinePopover: DefineSetupFnComponent<Partial<InlinePopoverProps> & {
 class?: string;
 }>;
 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;
 }>;
@@ -260,8 +238,6 @@ declare function useKeymap(keymap: MaybeRefOrGetter<Keymap>, options?: UseExtens
 export { useKeymap }
 export { useKeymap as useKeymap_alias_1 }
 
-export declare function useNodeViewFactory(): NodeViewFactory;
-
 /**
  * @internal
  */
@@ -276,17 +252,9 @@ declare function useStateUpdate(handler: (state: EditorState) => void, options?:
 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;
-}
-
+/**
+ * @public
+ */
 declare type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>;
 export { VueNodeViewComponent }
 export { VueNodeViewComponent as VueNodeViewComponent_alias_1 }
@@ -309,12 +277,15 @@ declare interface VueNodeViewOptions extends BaseNodeViewOptions {
 export { VueNodeViewOptions }
 export { VueNodeViewOptions as VueNodeViewOptions_alias_1 }
 
+/**
+ * @public
+ */
 declare interface VueNodeViewProps {
     contentRef: VNodeRef;
     view: EditorView;
     getPos: () => number | undefined;
     setAttrs: (attrs: Attrs) => void;
-    node: ShallowRef<Node_2>;
+    node: ShallowRef<ProseMirrorNode>;
     selected: ShallowRef<boolean>;
     decorations: ShallowRef<readonly Decoration[]>;
     innerDecorations: ShallowRef<DecorationSource>;
@@ -322,31 +293,9 @@ declare interface VueNodeViewProps {
 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 }
+/**
+ * @internal
+ */
+export declare const VueViewsConsumer: DefineComponent<{}, () => null, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {}>>, {}, {}>;
 
 export { }

package/dist/prosekit-vue.d.ts

@@ -1,12 +1,12 @@
 export { ProseKit } from './_tsup-dts-rollup';
 export { ProseKitProps } from './_tsup-dts-rollup';
 export { defineVueNodeView } from './_tsup-dts-rollup';
+export { VueNodeViewComponent } from './_tsup-dts-rollup';
 export { VueNodeViewOptions } from './_tsup-dts-rollup';
+export { VueNodeViewProps } from './_tsup-dts-rollup';
+export { useDocChange } 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

@@ -5,174 +5,23 @@ import {
 
 // src/components/prosekit.ts
 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/views/node-view/node-view-context.ts
-import { ProseKitError } from "@prosekit/core";
-import { inject } from "vue";
-var nodeViewFactoryKey = Symbol(
-  "[ProseKit]useNodeViewFactory"
-);
-function useNodeViewFactory() {
-  let nodeViewFactory = inject(nodeViewFactoryKey);
-  if (!nodeViewFactory)
-    throw new ProseKitError("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) => {
-        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]) => {
-        let prev = this.context[key];
-        prev.value !== value && (prev.value = value);
-      });
-    };
-    this.render = () => {
-      let UserComponent = this.component;
-      return markRaw(
-        defineComponent({
-          name: "ProsemirrorNodeView",
-          setup: () => () => 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) {
-  return (options) => (node, view, getPos, decorations, innerDecorations) => {
-    let nodeView = new VueNodeView({
-      node,
-      view,
-      getPos,
-      decorations,
-      innerDecorations,
-      options: {
-        ...options,
-        onUpdate() {
-          var _a;
-          (_a = options.onUpdate) == null || _a.call(options), nodeView.updateContext();
-        },
-        selectNode() {
-          var _a;
-          (_a = options.selectNode) == null || _a.call(options), nodeView.updateContext();
-        },
-        deselectNode() {
-          var _a;
-          (_a = options.deselectNode) == null || _a.call(options), nodeView.updateContext();
-        },
-        destroy() {
-          var _a;
-          (_a = options.destroy) == null || _a.call(options), removeVueRenderer(nodeView);
-        }
-      }
-    });
-    return renderVueRenderer(nodeView), nodeView;
-  };
-}
-
-// src/views/vue-renderer.ts
-import {
-  getCurrentInstance,
-  markRaw as markRaw2,
-  onBeforeMount,
-  onUnmounted,
-  ref
-} from "vue";
-function useVueRenderer() {
-  let portals = ref({}), instance = getCurrentInstance(), update = markRaw2({});
-  return onBeforeMount(() => {
-    update.updater = () => {
-      instance == null || instance.update();
-    };
-  }), onUnmounted(() => {
-    update.updater = void 0;
-  }), {
-    portals,
-    renderVueRenderer: (renderer) => {
-      var _a;
-      portals.value[renderer.key] = renderer.render(), (_a = update.updater) == null || _a.call(update);
-    },
-    removeVueRenderer: (renderer) => {
-      delete portals.value[renderer.key];
-    }
-  };
-}
-
-// src/views/vue-views-provider.ts
-var VueViewsProvider = defineComponent2({
-  name: "VueViewsProvider",
-  setup: (_, { slots }) => {
-    let { portals, renderVueRenderer, removeVueRenderer } = useVueRenderer(), createVueNodeView = useVueNodeViewCreator(
-      renderVueRenderer,
-      removeVueRenderer
-    );
-    return provide(nodeViewFactoryKey, createVueNodeView), () => {
-      var _a;
-      return h2(Fragment, null, [
-        (_a = slots.default) == null ? void 0 : _a.call(slots),
-        Object.values(portals.value).map((x) => h2(x))
-      ]);
-    };
-  }
-});
-
-// src/views/vue-views-comsumer.ts
-import { computed as computed2, defineComponent as defineComponent3 } from "vue";
+import { ProsemirrorAdapterProvider } from "@prosemirror-adapter/vue";
+import { defineComponent as defineComponent2, h as h2 } from "vue";
 
 // src/extensions/vue-node-view.ts
 import {
+  defineNodeViewComponent,
   defineNodeViewFactory
 } from "@prosekit/core";
-function defineVueNodeView(options) {
-  let { name, ...userOptions } = options;
-  return defineNodeViewFactory({
-    group: "vue",
-    name,
-    args: userOptions
-  });
-}
-function defineVueNodeViewFactory(nodeViewFactory) {
-  return defineNodeViewFactory({
-    group: "vue",
-    factory: nodeViewFactory
-  });
-}
+import {
+  useNodeViewContext,
+  useNodeViewFactory
+} from "@prosemirror-adapter/vue";
+import {
+  computed as computed2,
+  defineComponent,
+  h
+} from "vue";
 
 // src/hooks/use-extension.ts
 import "@prosekit/core";
@@ -209,54 +58,87 @@ function useExtension(extension, options) {
   );
 }
 
-// src/views/vue-views-comsumer.ts
-var VueViewsConsumer = defineComponent3({
+// src/extensions/vue-node-view.ts
+function withNodeViewProps(component) {
+  return defineComponent({
+    name: "NodeViewPropsWrapper",
+    setup: () => {
+      let props = useNodeViewContext();
+      return () => h(component, props);
+    }
+  });
+}
+var VueViewsConsumer = /* @__PURE__ */ defineComponent({
   name: "VueViewsConsumer",
   setup: () => {
     let nodeViewFactory = useNodeViewFactory(), extension = computed2(() => defineVueNodeViewFactory(nodeViewFactory));
     return useExtension(extension), () => null;
   }
 });
+function defineVueNodeView(options) {
+  let { name, component, ...userOptions } = options, args = {
+    ...userOptions,
+    component: withNodeViewProps(component)
+  };
+  return defineNodeViewComponent({
+    group: "vue",
+    name,
+    args
+  });
+}
+function defineVueNodeViewFactory(factory) {
+  return defineNodeViewFactory({
+    group: "vue",
+    factory
+  });
+}
 
 // src/components/prosekit.ts
-var ProseKit = defineComponent4(
-  (props, { slots }) => (provideEditor(props.editor), () => h3(VueViewsProvider, null, () => {
+var ProseKit = defineComponent2(
+  (props, { slots }) => (provideEditor(props.editor), () => h2(ProsemirrorAdapterProvider, null, () => {
     var _a;
     return [
-      h3(VueViewsConsumer),
+      h2(VueViewsConsumer),
       (_a = slots.default) == null ? void 0 : _a.call(slots)
     ];
   })),
   { props: ["editor"] }
 );
 
+// src/hooks/use-doc-change.ts
+import { defineDocChangeHandler } from "@prosekit/core";
+function useDocChange(handler, options) {
+  let extension = defineDocChangeHandler((view) => handler(view.state.doc));
+  return useExtension(extension, options);
+}
+
 // src/hooks/use-editor.ts
 import {
-  ProseKitError as ProseKitError2,
+  ProseKitError,
   defineMountHandler,
   defineUpdateHandler,
   union
 } from "@prosekit/core";
 import {
   onMounted,
-  onUnmounted as onUnmounted2,
-  shallowRef as shallowRef2,
+  onUnmounted,
+  shallowRef,
   triggerRef
 } from "vue";
 function useEditor(options) {
   var _a;
   let update = (_a = options == null ? void 0 : options.update) != null ? _a : !1, editor = useEditorContext();
   if (!editor)
-    throw new ProseKitError2(
+    throw new ProseKitError(
       "useEditor must be used within the ProseKit component"
     );
-  let editorRef = shallowRef2(editor);
+  let editorRef = shallowRef(editor);
   return update && onMounted(() => {
     let forceUpdate = () => triggerRef(editorRef), extension = union([
       defineMountHandler(forceUpdate),
       defineUpdateHandler(forceUpdate)
     ]), dispose = editor.use(extension);
-    onUnmounted2(dispose);
+    onUnmounted(dispose);
   }), editorRef;
 }
 
@@ -274,13 +156,6 @@ function useStateUpdate(handler, options) {
   let 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) {
-  let extension = defineDocChangeHandler((view) => handler(view.state.doc));
-  return useExtension(extension, options);
-}
 export {
   ProseKit,
   defineVueNodeView,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.3.9",
+  "version": "0.3.10",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -65,10 +65,10 @@
     "dist"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.2.6",
-    "@prosekit/core": "^0.7.0",
+    "@prosemirror-adapter/vue": "^0.2.6",
+    "@prosekit/core": "^0.7.1",
     "@prosekit/pm": "^0.1.5",
-    "@prosekit/web": "^0.2.2"
+    "@prosekit/web": "^0.2.3"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"