@prosekit/vue 0.6.1 → 0.6.2

package/dist/prosekit-vue.js

@@ -70,7 +70,7 @@ const VueMarkViewsConsumer = /* @__PURE__ */ defineComponent({
 * @public
 */
 function defineVueMarkView(options) {
-	const { name, component,...userOptions } = options;
+	const { name, component, ...userOptions } = options;
 	return defineMarkViewComponent({
 		group: "vue",
 		name,
@@ -117,7 +117,7 @@ const VueNodeViewsConsumer = /* @__PURE__ */ defineComponent({
 * @public
 */
 function defineVueNodeView(options) {
-	const { name, component,...userOptions } = options;
+	const { name, component, ...userOptions } = options;
 	return defineNodeViewComponent({
 		group: "vue",
 		name,

package/dist/prosekit-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"prosekit-vue.js","names":["props: Readonly<VueMarkViewProps>","VueMarkViewsConsumer: DefineComponent","markViewFactory: MarkViewFactory","props: Readonly<VueNodeViewProps>","VueNodeViewsConsumer: DefineComponent","nodeViewFactory: NodeViewFactory","ProseKit: DefineSetupFnComponent<ProseKitProps>","editorAccessor: Ref<Editor<E>>"],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import {\n  EditorNotFoundError,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  toValue,\n  watchPostEffect,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n  extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n  const editorContext = useEditorContext()\n\n  watchPostEffect((onCleanup) => {\n    const editor = toValue(editorRef) || toValue(editorContext)\n    const extension = toValue(extensionRef)\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import {\n  withPriority,\n  type Extension,\n  type Priority,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n} from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: MaybeRefOrGetter<T | null>,\n  priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n  return computed(() => {\n    const ext = toValue(extension)\n    return ext && priority ? withPriority(ext, priority) : ext\n  })\n}\n","import type {\n  Editor,\n  Extension,\n  Priority,\n} from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n  /**\n   * The ref to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: MaybeRefOrGetter<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import {\n  defineMarkViewComponent,\n  defineMarkViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContext,\n  type MarkViewFactory,\n  type VueMarkViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport {\n  computed,\n  defineComponent,\n  h,\n  type DefineComponent,\n} from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nfunction withMarkViewProps(component: VueMarkViewComponent) {\n  return defineComponent({\n    name: 'MarkViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueMarkViewProps> = useMarkViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueMarkViewsConsumer',\n  setup: () => {\n    const markViewFactory: MarkViewFactory = useMarkViewFactory()\n    const extension = computed(() => {\n      return defineVueMarkViewFactory(markViewFactory)\n    })\n    useExtension(extension)\n    return (): null => null\n  },\n})\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<VueMarkViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueMarkViewFactory(\n  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<VueMarkViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import {\n  defineNodeViewComponent,\n  defineNodeViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContext,\n  type NodeViewFactory,\n  type VueNodeViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport {\n  computed,\n  defineComponent,\n  h,\n  type DefineComponent,\n} from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nfunction withNodeViewProps(component: VueNodeViewComponent) {\n  return defineComponent({\n    name: 'NodeViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueNodeViewProps> = useNodeViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueNodeViewsConsumer',\n  setup: () => {\n    const nodeViewFactory: NodeViewFactory = useNodeViewFactory()\n    const extension = computed(() => {\n      return defineVueNodeViewFactory(nodeViewFactory)\n    })\n    useExtension(extension)\n    return (): null => null\n  },\n})\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<VueNodeViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueNodeViewFactory(\n  factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<VueNodeViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'\nimport {\n  defineComponent,\n  h,\n  type DefineSetupFnComponent,\n  type PropType,\n} from 'vue'\n\nimport { VueMarkViewsConsumer } from '../extensions/vue-mark-view'\nimport { VueNodeViewsConsumer } from '../extensions/vue-node-view'\nimport { provideEditor } from '../injection/editor-context'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n  name: 'ProseKit',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    provideEditor(props.editor)\n    return () => {\n      return h(ProsemirrorAdapterProvider, null, () => [\n        h(VueNodeViewsConsumer),\n        h(VueMarkViewsConsumer),\n        slots.default?.(),\n      ])\n    }\n  },\n})\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(extension, options)\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  ProseKitError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  onMounted,\n  onUnmounted,\n  shallowRef,\n  triggerRef,\n  type ShallowRef,\n} from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): ShallowRef<Editor<E>> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const editorRef = shallowRef<Editor<E>>(editor)\n\n  if (update) {\n    onMounted(() => {\n      const forceUpdate = () => triggerRef(editorRef)\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      const dispose = editor.use(extension)\n      onUnmounted(dispose)\n    })\n  }\n\n  return editorRef\n}\n","import type {\n  Editor,\n  Extension,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type MaybeRefOrGetter,\n  type Ref,\n  type ShallowRef,\n} from 'vue'\n\nimport { useEditor } from './use-editor'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Ref<Editor<E>> = initialEditor\n    ? computed(() => toValue(initialEditor))\n    : useEditor<E>({ update: true })\n\n  return computed(() => derive(toValue(editorAccessor)))\n}\n","import {\n  defineKeymap,\n  type Keymap,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\nexport function useKeymap(\n  keymap: MaybeRefOrGetter<Keymap>,\n  options?: UseExtensionOptions,\n): void {\n  const extension = computed(() => defineKeymap(toValue(keymap)))\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(extension, options)\n}\n"],"mappings":"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"}
+{"version":3,"file":"prosekit-vue.js","names":["props: Readonly<VueMarkViewProps>","VueMarkViewsConsumer: DefineComponent","markViewFactory: MarkViewFactory","props: Readonly<VueNodeViewProps>","VueNodeViewsConsumer: DefineComponent","nodeViewFactory: NodeViewFactory","ProseKit: DefineSetupFnComponent<ProseKitProps>","editorAccessor: Ref<Editor<E>>"],"sources":["../src/hooks/use-editor-extension.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.ts","../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/components/prosekit.ts","../src/hooks/use-doc-change.ts","../src/hooks/use-editor.ts","../src/hooks/use-editor-derived-value.ts","../src/hooks/use-keymap.ts","../src/hooks/use-state-update.ts"],"sourcesContent":["import {\n  EditorNotFoundError,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  toValue,\n  watchPostEffect,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * @internal\n */\nexport function useEditorExtension(\n  editorRef: MaybeRefOrGetter<Editor> | null | undefined,\n  extensionRef: MaybeRefOrGetter<Extension | null> | null,\n): void {\n  const editorContext = useEditorContext()\n\n  watchPostEffect((onCleanup) => {\n    const editor = toValue(editorRef) || toValue(editorContext)\n    const extension = toValue(extensionRef)\n\n    if (!editor) {\n      throw new EditorNotFoundError()\n    }\n    if (extension) {\n      onCleanup(editor.use(extension))\n    }\n  })\n}\n","import {\n  withPriority,\n  type Extension,\n  type Priority,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type ComputedRef,\n  type MaybeRefOrGetter,\n} from 'vue'\n\n/**\n * @internal\n */\nexport function usePriorityExtension<T extends Extension = Extension>(\n  extension: MaybeRefOrGetter<T | null>,\n  priority: Priority | null | undefined,\n): ComputedRef<T | null> {\n  return computed(() => {\n    const ext = toValue(extension)\n    return ext && priority ? withPriority(ext, priority) : ext\n  })\n}\n","import type {\n  Editor,\n  Extension,\n  Priority,\n} from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension'\nimport { usePriorityExtension } from './use-priority-extension'\n\nexport interface UseExtensionOptions {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor>\n\n  /**\n   * Optional priority to add the extension with.\n   */\n  priority?: Priority\n}\n\n/**\n * Add an extension to the editor.\n *\n * @public\n */\nexport function useExtension(\n  /**\n   * The ref to an extension to add to the editor. If it changes, the previous\n   * extension will be removed and the new one (if not null) will be added.\n   */\n  extension: MaybeRefOrGetter<Extension | null>,\n  options?: UseExtensionOptions,\n): void {\n  useEditorExtension(\n    options?.editor,\n    usePriorityExtension(extension, options?.priority),\n  )\n}\n","import {\n  defineMarkViewComponent,\n  defineMarkViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { MarkViewConstructor } from '@prosekit/pm/view'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useMarkViewContext,\n  useMarkViewFactory,\n  type MarkViewContext,\n  type MarkViewFactory,\n  type VueMarkViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport {\n  computed,\n  defineComponent,\n  h,\n  type DefineComponent,\n} from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueMarkViewProps extends MarkViewContext {}\n\n/**\n * @public\n */\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n *\n * @public\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nfunction withMarkViewProps(component: VueMarkViewComponent) {\n  return defineComponent({\n    name: 'MarkViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueMarkViewProps> = useMarkViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueMarkViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueMarkViewsConsumer',\n  setup: () => {\n    const markViewFactory: MarkViewFactory = useMarkViewFactory()\n    const extension = computed(() => {\n      return defineVueMarkViewFactory(markViewFactory)\n    })\n    useExtension(extension)\n    return (): null => null\n  },\n})\n\n/**\n * Defines a mark view using a Vue component.\n *\n * @public\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueMarkViewUserOptions = {\n    ...userOptions,\n    component: withMarkViewProps(component),\n  }\n\n  return defineMarkViewComponent<VueMarkViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueMarkViewFactory(\n  factory: (options: VueMarkViewUserOptions) => MarkViewConstructor,\n) {\n  return defineMarkViewFactory<VueMarkViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import {\n  defineNodeViewComponent,\n  defineNodeViewFactory,\n  type Extension,\n} from '@prosekit/core'\nimport type { NodeViewConstructor } from '@prosekit/pm/view'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  useNodeViewContext,\n  useNodeViewFactory,\n  type NodeViewContext,\n  type NodeViewFactory,\n  type VueNodeViewUserOptions,\n} from '@prosemirror-adapter/vue'\nimport {\n  computed,\n  defineComponent,\n  h,\n  type DefineComponent,\n} from 'vue'\n\nimport { useExtension } from '../hooks/use-extension'\n\n/**\n * @public\n */\nexport interface VueNodeViewProps extends NodeViewContext {}\n\n/**\n * @public\n */\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n *\n * @public\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nfunction withNodeViewProps(component: VueNodeViewComponent) {\n  return defineComponent({\n    name: 'NodeViewPropsWrapper',\n    setup: () => {\n      const props: Readonly<VueNodeViewProps> = useNodeViewContext()\n      return () => h(component, props)\n    },\n  })\n}\n\n/**\n * @internal\n */\nexport const VueNodeViewsConsumer: DefineComponent = /* @__PURE__ */ defineComponent({\n  name: 'VueNodeViewsConsumer',\n  setup: () => {\n    const nodeViewFactory: NodeViewFactory = useNodeViewFactory()\n    const extension = computed(() => {\n      return defineVueNodeViewFactory(nodeViewFactory)\n    })\n    useExtension(extension)\n    return (): null => null\n  },\n})\n\n/**\n * Defines a node view using a Vue component.\n *\n * @public\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  const { name, component, ...userOptions } = options\n\n  const args: VueNodeViewUserOptions = {\n    ...userOptions,\n    component: withNodeViewProps(component),\n  }\n\n  return defineNodeViewComponent<VueNodeViewUserOptions>({\n    group: 'vue',\n    name,\n    args,\n  })\n}\n\nfunction defineVueNodeViewFactory(\n  factory: (options: VueNodeViewUserOptions) => NodeViewConstructor,\n) {\n  return defineNodeViewFactory<VueNodeViewUserOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n","import type { Editor } from '@prosekit/core'\nimport { ProsemirrorAdapterProvider } from '@prosemirror-adapter/vue'\nimport {\n  defineComponent,\n  h,\n  type DefineSetupFnComponent,\n  type PropType,\n} from 'vue'\n\nimport { VueMarkViewsConsumer } from '../extensions/vue-mark-view'\nimport { VueNodeViewsConsumer } from '../extensions/vue-node-view'\nimport { provideEditor } from '../injection/editor-context'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\n *\n * @public\n */\nexport const ProseKit: DefineSetupFnComponent<ProseKitProps> = defineComponent<ProseKitProps>({\n  name: 'ProseKit',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    provideEditor(props.editor)\n    return () => {\n      return h(ProsemirrorAdapterProvider, null, () => [\n        h(VueNodeViewsConsumer),\n        h(VueMarkViewsConsumer),\n        slots.default?.(),\n      ])\n    }\n  },\n})\n","import { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor document changes.\n *\n * @public\n */\nexport function useDocChange(\n  handler: (doc: ProseMirrorNode) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineDocChangeHandler((view) => handler(view.state.doc))\n  useExtension(extension, options)\n}\n","import {\n  defineMountHandler,\n  defineUpdateHandler,\n  ProseKitError,\n  union,\n  type Editor,\n  type Extension,\n} from '@prosekit/core'\nimport {\n  onMounted,\n  onUnmounted,\n  shallowRef,\n  triggerRef,\n  type ShallowRef,\n} from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\n *\n * @public\n */\nexport function useEditor<E extends Extension = any>(options?: {\n  /**\n   * Whether to update the component when the editor is mounted or editor state\n   * is updated.\n   *\n   * @default false\n   */\n  update?: boolean\n}): ShallowRef<Editor<E>> {\n  const update = options?.update ?? false\n\n  const editor = useEditorContext<E>()\n  if (!editor) {\n    throw new ProseKitError(\n      'useEditor must be used within the ProseKit component',\n    )\n  }\n\n  const editorRef = shallowRef<Editor<E>>(editor)\n\n  if (update) {\n    onMounted(() => {\n      const forceUpdate = () => triggerRef(editorRef)\n      const extension = union(\n        defineMountHandler(forceUpdate),\n        defineUpdateHandler(forceUpdate),\n      )\n      const dispose = editor.use(extension)\n      onUnmounted(dispose)\n    })\n  }\n\n  return editorRef\n}\n","import type {\n  Editor,\n  Extension,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type MaybeRefOrGetter,\n  type Ref,\n  type ShallowRef,\n} from 'vue'\n\nimport { useEditor } from './use-editor'\n\nexport interface UseEditorDerivedOptions<E extends Extension = any> {\n  /**\n   * The editor to add the extension to. If not provided, it will use the\n   * editor from the nearest `<ProseKit>` component.\n   */\n  editor?: MaybeRefOrGetter<Editor<E>>\n}\n\n/**\n * Runs a function to derive a value from the editor instance after editor state\n * changes.\n *\n * This is useful when you need to render something based on the editor state,\n * for example, whether the selected text is wrapped in an italic mark.\n *\n * It returns a shallow ref of the derived value that updates whenever the editor\n * state changes.\n *\n * @public\n */\nexport function useEditorDerivedValue<E extends Extension, Derived>(\n  /**\n   * A function that receives the editor instance and returns a derived value.\n   *\n   * It will be called whenever the editor's document state changes, or when it\n   * mounts.\n   */\n  derive: (editor: Editor<E>) => Derived,\n  options?: UseEditorDerivedOptions<E>,\n): ShallowRef<Derived> {\n  const initialEditor = options?.editor\n  const editorAccessor: Ref<Editor<E>> = initialEditor\n    ? computed(() => toValue(initialEditor))\n    : useEditor<E>({ update: true })\n\n  return computed(() => derive(toValue(editorAccessor)))\n}\n","import {\n  defineKeymap,\n  type Keymap,\n} from '@prosekit/core'\nimport {\n  computed,\n  toValue,\n  type MaybeRefOrGetter,\n} from 'vue'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\nexport function useKeymap(\n  keymap: MaybeRefOrGetter<Keymap>,\n  options?: UseExtensionOptions,\n): void {\n  const extension = computed(() => defineKeymap(toValue(keymap)))\n  useExtension(extension, options)\n}\n","import { defineUpdateHandler } from '@prosekit/core'\nimport type { EditorState } from '@prosekit/pm/state'\n\nimport {\n  useExtension,\n  type UseExtensionOptions,\n} from './use-extension'\n\n/**\n * Calls the given handler whenever the editor state changes.\n *\n * @public\n */\nexport function useStateUpdate(\n  handler: (state: EditorState) => void,\n  options?: UseExtensionOptions,\n): void {\n  const extension = defineUpdateHandler((view) => handler(view.state))\n  useExtension(extension, options)\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,mBACd,WACA,cACM;CACN,MAAM,gBAAgB,kBAAkB;AAExC,kBAAiB,cAAc;EAC7B,MAAM,SAAS,QAAQ,UAAU,IAAI,QAAQ,cAAc;EAC3D,MAAM,YAAY,QAAQ,aAAa;AAEvC,MAAI,CAAC,OACH,OAAM,IAAI,qBAAqB;AAEjC,MAAI,UACF,WAAU,OAAO,IAAI,UAAU,CAAC;GAElC;;;;;;;;ACjBJ,SAAgB,qBACd,WACA,UACuB;AACvB,QAAO,eAAe;EACpB,MAAM,MAAM,QAAQ,UAAU;AAC9B,SAAO,OAAO,WAAW,aAAa,KAAK,SAAS,GAAG;GACvD;;;;;;;;;;ACMJ,SAAgB,aAKd,WACA,SACM;AACN,oBACE,SAAS,QACT,qBAAqB,WAAW,SAAS,SAAS,CACnD;;;;;ACMH,SAAS,kBAAkB,WAAiC;AAC1D,QAAO,gBAAgB;EACrB,MAAM;EACN,aAAa;GACX,MAAMA,QAAoC,oBAAoB;AAC9D,gBAAa,EAAE,WAAW,MAAM;;EAEnC,CAAC;;;;;AAMJ,MAAaC,uBAAwD,gCAAgB;CACnF,MAAM;CACN,aAAa;EACX,MAAMC,kBAAmC,oBAAoB;AAI7D,eAHkB,eAAe;AAC/B,UAAO,yBAAyB,gBAAgB;IAChD,CACqB;AACvB,eAAmB;;CAEtB,CAAC;;;;;;AAOF,SAAgB,kBAAkB,SAAwC;CACxE,MAAM,EAAE,MAAM,WAAW,GAAG,gBAAgB;AAO5C,QAAO,wBAAgD;EACrD,OAAO;EACP;EACA,MARmC;GACnC,GAAG;GACH,WAAW,kBAAkB,UAAU;GACxC;EAMA,CAAC;;AAGJ,SAAS,yBACP,SACA;AACA,QAAO,sBAA8C;EACnD,OAAO;EACP;EACD,CAAC;;;;;ACnDJ,SAAS,kBAAkB,WAAiC;AAC1D,QAAO,gBAAgB;EACrB,MAAM;EACN,aAAa;GACX,MAAMC,QAAoC,oBAAoB;AAC9D,gBAAa,EAAE,WAAW,MAAM;;EAEnC,CAAC;;;;;AAMJ,MAAaC,uBAAwD,gCAAgB;CACnF,MAAM;CACN,aAAa;EACX,MAAMC,kBAAmC,oBAAoB;AAI7D,eAHkB,eAAe;AAC/B,UAAO,yBAAyB,gBAAgB;IAChD,CACqB;AACvB,eAAmB;;CAEtB,CAAC;;;;;;AAOF,SAAgB,kBAAkB,SAAwC;CACxE,MAAM,EAAE,MAAM,WAAW,GAAG,gBAAgB;AAO5C,QAAO,wBAAgD;EACrD,OAAO;EACP;EACA,MARmC;GACnC,GAAG;GACH,WAAW,kBAAkB,UAAU;GACxC;EAMA,CAAC;;AAGJ,SAAS,yBACP,SACA;AACA,QAAO,sBAA8C;EACnD,OAAO;EACP;EACD,CAAC;;;;;;;;;;AC1EJ,MAAaC,WAAkD,gBAA+B;CAC5F,MAAM;CACN,OAAO,EAAE,QAAQ;EAAE,MAAM;EAA4B,UAAU;EAAM,EAAE;CACvE,QAAQ,OAAO,EAAE,YAAY;AAC3B,gBAAc,MAAM,OAAO;AAC3B,eAAa;AACX,UAAO,EAAE,4BAA4B,YAAY;IAC/C,EAAE,qBAAqB;IACvB,EAAE,qBAAqB;IACvB,MAAM,WAAW;IAClB,CAAC;;;CAGP,CAAC;;;;;;;;;ACtBF,SAAgB,aACd,SACA,SACM;AAEN,cADkB,wBAAwB,SAAS,QAAQ,KAAK,MAAM,IAAI,CAAC,EACnD,QAAQ;;;;;;;;;;ACKlC,SAAgB,UAAqC,SAQ3B;CACxB,MAAM,SAAS,SAAS,UAAU;CAElC,MAAM,SAAS,kBAAqB;AACpC,KAAI,CAAC,OACH,OAAM,IAAI,cACR,uDACD;CAGH,MAAM,YAAY,WAAsB,OAAO;AAE/C,KAAI,OACF,iBAAgB;EACd,MAAM,oBAAoB,WAAW,UAAU;EAC/C,MAAM,YAAY,MAChB,mBAAmB,YAAY,EAC/B,oBAAoB,YAAY,CACjC;AAED,cADgB,OAAO,IAAI,UAAU,CACjB;GACpB;AAGJ,QAAO;;;;;;;;;;;;;;;;;ACrBT,SAAgB,sBAOd,QACA,SACqB;CACrB,MAAM,gBAAgB,SAAS;CAC/B,MAAMC,iBAAiC,gBACnC,eAAe,QAAQ,cAAc,CAAC,GACtC,UAAa,EAAE,QAAQ,MAAM,CAAC;AAElC,QAAO,eAAe,OAAO,QAAQ,eAAe,CAAC,CAAC;;;;;AClCxD,SAAgB,UACd,QACA,SACM;AAEN,cADkB,eAAe,aAAa,QAAQ,OAAO,CAAC,CAAC,EACvC,QAAQ;;;;;;;;;;ACPlC,SAAgB,eACd,SACA,SACM;AAEN,cADkB,qBAAqB,SAAS,QAAQ,KAAK,MAAM,CAAC,EAC5C,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "private": false,
   "description": "Vue components and utilities for ProseKit",
   "author": {
@@ -70,9 +70,9 @@
   "dependencies": {
     "@prosemirror-adapter/core": "^0.4.6",
     "@prosemirror-adapter/vue": "^0.4.6",
-    "@prosekit/core": "^0.8.6",
-    "@prosekit/pm": "^0.1.14",
-    "@prosekit/web": "^0.7.6"
+    "@prosekit/core": "^0.8.7",
+    "@prosekit/web": "^0.7.7",
+    "@prosekit/pm": "^0.1.14"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"
@@ -85,12 +85,12 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/test-utils": "^2.4.6",
-    "tsdown": "^0.16.2",
+    "tsdown": "^0.16.5",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.8",
+    "vitest": "^4.0.10",
     "vue": "^3.5.24",
-    "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {
     "dev": {}