@prosekit/vue 0.6.7 → 0.6.8

package/src/extensions/vue-node-view.ts

@@ -1,18 +1,13 @@
 import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'
-import type { NodeViewConstructor } from '@prosekit/pm/view'
 import type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'
 import {
-  useNodeViewContext,
-  useNodeViewFactory,
+  AbstractVueNodeView,
+  buildVueNodeViewCreator,
   type NodeViewContext,
-  type NodeViewFactory,
-  type VueNodeViewUserOptions,
+  type VueRendererComponent,
+  type VueRendererResult,
 } from '@prosemirror-adapter/vue'
-import { computed, defineComponent, h, type DefineComponent } from 'vue'
-
-import { useExtension } from '../hooks/use-extension.ts'
-
-import { renderNothing } from './helpers.ts'
+import { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'
 
 /**
  * @public
@@ -36,30 +31,36 @@ export interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewC
   name: string
 }
 
-function withNodeViewProps(component: VueNodeViewComponent) {
-  return defineComponent({
-    name: 'NodeViewPropsWrapper',
-    setup: () => {
-      const props: Readonly<VueNodeViewProps> = useNodeViewContext()
-      return () => h(component, props)
-    },
-  })
+class ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {
+  render = (): VueRendererComponent => {
+    const UserComponent = this.component
+    const render = () => {
+      const props = this.context
+      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])
+    }
+    const RendererComponent: VueRendererComponent = defineComponent({
+      name: 'ProsemirrorNodeView',
+      setup: () => {
+        return render
+      },
+    })
+    return markRaw(RendererComponent)
+  }
 }
 
 /**
  * @internal
  */
-export const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({
-  name: 'VueNodeViewsConsumer',
-  setup: () => {
-    const nodeViewFactory: NodeViewFactory = useNodeViewFactory()
-    const extension = computed(() => {
-      return defineVueNodeViewFactory(nodeViewFactory)
-    })
-    useExtension(extension)
-    return renderNothing
-  },
-})
+export function defineVueNodeViewFactory(
+  renderVueRenderer: VueRendererResult['renderVueRenderer'],
+  removeVueRenderer: VueRendererResult['removeVueRenderer'],
+): Extension {
+  const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)
+  return defineNodeViewFactory<VueNodeViewOptions>({
+    group: 'vue',
+    factory,
+  })
+}
 
 /**
  * Defines a node view using a Vue component.
@@ -67,25 +68,9 @@ export const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineCompo
  * @public
  */
 export function defineVueNodeView(options: VueNodeViewOptions): Extension {
-  const { name, component, ...userOptions } = options
-
-  const args: VueNodeViewUserOptions = {
-    ...userOptions,
-    component: withNodeViewProps(component),
-  }
-
-  return defineNodeViewComponent<VueNodeViewUserOptions>({
+  return defineNodeViewComponent<VueNodeViewOptions>({
     group: 'vue',
-    name,
-    args,
-  })
-}
-
-function defineVueNodeViewFactory(
-  factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,
-) {
-  return defineNodeViewFactory<VueNodeViewUserOptions>({
-    group: 'vue',
-    factory,
+    name: options.name,
+    args: options,
   })
 }

package/dist/create-component-BREKWlWW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-component-BREKWlWW.js","names":[],"sources":["../src/components/create-component.ts"],"sourcesContent":["import { defineComponent, h, onMounted, ref, watchEffect, type DefineSetupFnComponent, type EmitsOptions, type HTMLAttributes } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\nexport function createComponent<\n  Props extends { [PropName in keyof Props]: unknown },\n  Emits extends EmitsOptions,\n>(\n  tagName: string,\n  displayName: string,\n  propNames: string[],\n  eventNames: string[],\n): DefineSetupFnComponent<Partial<Props> & HTMLAttributes, Emits> {\n  const hasEditor = propNames.includes('editor')\n\n  const Component = defineComponent<any, any>(\n    (props: Record<string, unknown>, { slots, emit }) => {\n      const editor = useEditorContext()\n\n      const mounted = ref(false)\n\n      onMounted(() => {\n        mounted.value = true\n      })\n\n      const elementRef = ref<HTMLElement | null>(null)\n\n      watchEffect((onCleanup) => {\n        const element = elementRef.value\n        if (!element) return\n\n        const eventHandlers: Record<string, (event: Event) => void> = {}\n        for (const eventName of eventNames) {\n          const extractDetail = eventName.endsWith('Change')\n          eventHandlers[eventName] = (event: Event) => {\n            emit(\n              eventName,\n              extractDetail ? (event as CustomEvent).detail : event,\n            )\n          }\n        }\n\n        for (const [eventName, handler] of Object.entries(eventHandlers)) {\n          element.addEventListener(eventName, handler)\n        }\n\n        onCleanup(() => {\n          for (const [eventName, handler] of Object.entries(eventHandlers)) {\n            element.removeEventListener(eventName, handler)\n          }\n        })\n      })\n\n      return () => {\n        const properties: Record<string, unknown> = {}\n\n        for (const [key, value] of Object.entries(props)) {\n          if (value !== undefined && !key.startsWith('.')) {\n            properties[propNames.includes(key) ? '.' + key : key] = value\n          }\n        }\n\n        // Try to add the editor prop if it's missing.\n        if (hasEditor && editor && !properties['editor']) {\n          properties.editor = editor\n        }\n\n        // Ensure web components work after SSR hydration.\n        properties.key = mounted.value ? 1 : 0\n\n        properties.ref = elementRef\n\n        return h(tagName, properties, slots.default?.())\n      }\n    },\n    {\n      name: displayName,\n      props: propNames,\n      emits: eventNames,\n    },\n  )\n\n  return Component\n}\n"],"mappings":";;;;AAIA,SAAgB,gBAId,SACA,aACA,WACA,YACgE;CAChE,MAAM,YAAY,UAAU,SAAS,SAAS;AAqE9C,QAnEkB,iBACf,OAAgC,EAAE,OAAO,WAAW;EACnD,MAAM,SAAS,kBAAkB;EAEjC,MAAM,UAAU,IAAI,MAAM;AAE1B,kBAAgB;AACd,WAAQ,QAAQ;IAChB;EAEF,MAAM,aAAa,IAAwB,KAAK;AAEhD,eAAa,cAAc;GACzB,MAAM,UAAU,WAAW;AAC3B,OAAI,CAAC,QAAS;GAEd,MAAM,gBAAwD,EAAE;AAChE,QAAK,MAAM,aAAa,YAAY;IAClC,MAAM,gBAAgB,UAAU,SAAS,SAAS;AAClD,kBAAc,cAAc,UAAiB;AAC3C,UACE,WACA,gBAAiB,MAAsB,SAAS,MACjD;;;AAIL,QAAK,MAAM,CAAC,WAAW,YAAY,OAAO,QAAQ,cAAc,CAC9D,SAAQ,iBAAiB,WAAW,QAAQ;AAG9C,mBAAgB;AACd,SAAK,MAAM,CAAC,WAAW,YAAY,OAAO,QAAQ,cAAc,CAC9D,SAAQ,oBAAoB,WAAW,QAAQ;KAEjD;IACF;AAEF,eAAa;GACX,MAAM,aAAsC,EAAE;AAE9C,QAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC9C,KAAI,UAAU,UAAa,CAAC,IAAI,WAAW,IAAI,CAC7C,YAAW,UAAU,SAAS,IAAI,GAAG,MAAM,MAAM,OAAO;AAK5D,OAAI,aAAa,UAAU,CAAC,WAAW,UACrC,YAAW,SAAS;AAItB,cAAW,MAAM,QAAQ,QAAQ,IAAI;AAErC,cAAW,MAAM;AAEjB,UAAO,EAAE,SAAS,YAAY,MAAM,WAAW,CAAC;;IAGpD;EACE,MAAM;EACN,OAAO;EACP,OAAO;EACR,CACF"}

package/dist/create-emits-B8725q2G.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-emits-B8725q2G.d.ts","names":[],"sources":["../src/components/create-emits.ts"],"mappings":";KAAY,WAAA,sCAC2B,MAAA,GAAS,WAAA,4BAE1B,MAAA,IAClB,KAAA,EAAO,SAAA,6BAAsC,MAAA,CAAO,SAAA,cAChD,MAAA,CAAO,SAAA"}

package/dist/editor-context-BfHHplRP.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-context-BfHHplRP.js","names":[],"sources":["../src/injection/editor-context.ts"],"sourcesContent":["import type { Editor, Extension } from '@prosekit/core'\nimport { inject, provide, type InjectionKey } from 'vue'\n\nconst symbol = Symbol('prosekit-vue-editor-context') as InjectionKey<Editor>\n\n/**\n * @internal\n */\nexport function provideEditor(editor: Editor): void {\n  provide(symbol, editor)\n}\n\n/**\n * @internal\n */\nexport function useEditorContext<E extends Extension>(): Editor<E> | undefined {\n  return inject(symbol, undefined)\n}\n"],"mappings":";;;AAGA,MAAM,SAAS,OAAO,8BAA8B;;;;AAKpD,SAAgB,cAAc,QAAsB;AAClD,SAAQ,QAAQ,OAAO;;;;;AAMzB,SAAgB,mBAA+D;AAC7E,QAAO,OAAO,QAAQ,OAAU"}

package/src/extensions/helpers.ts

@@ -1,3 +0,0 @@
-export function renderNothing(): null {
-  return null
-}