@prosekit/vue 0.8.0-beta.21 → 0.8.0-beta.23

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.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 { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueMarkView,\n  buildVueMarkViewCreator,\n  type MarkViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\nexport interface VueMarkViewProps extends MarkViewContext {}\n\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitVueMarkView extends AbstractVueMarkView<VueMarkViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorMarkView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueMarkViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)\n  return defineMarkViewFactory<VueMarkViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Vue component.\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  return defineMarkViewComponent<VueMarkViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueNodeView,\n  buildVueNodeViewCreator,\n  type NodeViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\nexport interface VueNodeViewProps extends NodeViewContext {}\n\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorNodeView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueNodeViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)\n  return defineNodeViewFactory<VueNodeViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Vue component.\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  return defineNodeViewComponent<VueNodeViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\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 { union, type Editor } from '@prosekit/core'\nimport { useVueRenderer } from '@prosemirror-adapter/vue'\nimport { defineComponent, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { defineVueMarkViewFactory } from '../extensions/vue-mark-view.ts'\nimport { defineVueNodeViewFactory } from '../extensions/vue-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\n/**\n * @internal\n */\ninterface ViewRendererProps {\n  editor: Editor\n}\n\n/**\n * @internal\n */\nexport const ViewRenderer: DefineSetupFnComponent<ViewRendererProps> = defineComponent<ViewRendererProps>({\n  name: 'ViewRenderer',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer()\n\n    const extension = union([\n      defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer),\n      defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer),\n    ])\n\n    useEditorExtension(() => props.editor, extension)\n\n    return () => [slots.default?.(), render()]\n  },\n})\n","import type { Editor } from '@prosekit/core'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { provideEditor } from '../injection/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\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      h(\n        ViewRenderer,\n        { editor: props.editor },\n        () => slots.default?.(),\n      )\n  },\n})\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } 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 { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\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 */\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 { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\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 { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\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    const forceUpdate = () => triggerRef(editorRef)\n    onMounted(() => {\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 { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor.ts'\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 */\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 { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\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":"index.js","names":[],"sources":["../src/extensions/vue-mark-view.ts","../src/extensions/vue-node-view.ts","../src/hooks/use-editor-extension.ts","../src/components/view-renderer.ts","../src/components/prosekit.ts","../src/hooks/use-priority-extension.ts","../src/hooks/use-extension.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 { defineMarkViewComponent, defineMarkViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreMarkViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueMarkView,\n  buildVueMarkViewCreator,\n  type MarkViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\nexport interface VueMarkViewProps extends MarkViewContext {}\n\nexport type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>\n\n/**\n * Options for {@link defineVueMarkView}.\n */\nexport interface VueMarkViewOptions extends CoreMarkViewUserOptions<VueMarkViewComponent> {\n  /**\n   * The name of the mark type.\n   */\n  name: string\n}\n\nclass ProseKitVueMarkView extends AbstractVueMarkView<VueMarkViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorMarkView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueMarkViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueMarkViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueMarkView)\n  return defineMarkViewFactory<VueMarkViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a mark view using a Vue component.\n */\nexport function defineVueMarkView(options: VueMarkViewOptions): Extension {\n  return defineMarkViewComponent<VueMarkViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { defineNodeViewComponent, defineNodeViewFactory, type Extension } from '@prosekit/core'\nimport type { CoreNodeViewUserOptions } from '@prosemirror-adapter/core'\nimport {\n  AbstractVueNodeView,\n  buildVueNodeViewCreator,\n  type NodeViewContext,\n  type VueRendererComponent,\n  type VueRendererResult,\n} from '@prosemirror-adapter/vue'\nimport { defineComponent, h, markRaw, Teleport, type DefineComponent } from 'vue'\n\nexport interface VueNodeViewProps extends NodeViewContext {}\n\nexport type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>\n\n/**\n * Options for {@link defineVueNodeView}.\n */\nexport interface VueNodeViewOptions extends CoreNodeViewUserOptions<VueNodeViewComponent> {\n  /**\n   * The name of the node type.\n   */\n  name: string\n}\n\nclass ProseKitVueNodeView extends AbstractVueNodeView<VueNodeViewComponent> {\n  render = (): VueRendererComponent => {\n    const UserComponent = this.component\n    const render = () => {\n      const props = this.context\n      return h(Teleport, { key: this.key, to: this.dom }, [h(UserComponent, props)])\n    }\n    const RendererComponent: VueRendererComponent = defineComponent({\n      name: 'ProsemirrorNodeView',\n      setup: () => {\n        return render\n      },\n    })\n    return markRaw(RendererComponent)\n  }\n}\n\n/**\n * @internal\n */\nexport function defineVueNodeViewFactory(\n  renderVueRenderer: VueRendererResult['renderVueRenderer'],\n  removeVueRenderer: VueRendererResult['removeVueRenderer'],\n): Extension {\n  const factory = buildVueNodeViewCreator(renderVueRenderer, removeVueRenderer, ProseKitVueNodeView)\n  return defineNodeViewFactory<VueNodeViewOptions>({\n    group: 'vue',\n    factory,\n  })\n}\n\n/**\n * Defines a node view using a Vue component.\n */\nexport function defineVueNodeView(options: VueNodeViewOptions): Extension {\n  return defineNodeViewComponent<VueNodeViewOptions>({\n    group: 'vue',\n    name: options.name,\n    args: options,\n  })\n}\n","import { EditorNotFoundError, type Editor, type Extension } from '@prosekit/core'\nimport { toValue, watchPostEffect, type MaybeRefOrGetter } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\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 { union, type Editor } from '@prosekit/core'\nimport { useVueRenderer } from '@prosemirror-adapter/vue'\nimport { defineComponent, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { defineVueMarkViewFactory } from '../extensions/vue-mark-view.ts'\nimport { defineVueNodeViewFactory } from '../extensions/vue-node-view.ts'\nimport { useEditorExtension } from '../hooks/use-editor-extension.ts'\n\n/**\n * @internal\n */\ninterface ViewRendererProps {\n  editor: Editor\n}\n\n/**\n * @internal\n */\nexport const ViewRenderer: DefineSetupFnComponent<ViewRendererProps> = defineComponent<ViewRendererProps>({\n  name: 'ViewRenderer',\n  props: { editor: { type: Object as PropType<Editor>, required: true } },\n  setup: (props, { slots }) => {\n    const { renderVueRenderer, removeVueRenderer, render } = useVueRenderer()\n\n    const extension = union([\n      defineVueMarkViewFactory(renderVueRenderer, removeVueRenderer),\n      defineVueNodeViewFactory(renderVueRenderer, removeVueRenderer),\n    ])\n\n    useEditorExtension(() => props.editor, extension)\n\n    return () => [slots.default?.(), render()]\n  },\n})\n","import type { Editor } from '@prosekit/core'\nimport { defineComponent, h, type DefineSetupFnComponent, type PropType } from 'vue'\n\nimport { provideEditor } from '../injection/editor-context.ts'\n\nimport { ViewRenderer } from './view-renderer.ts'\n\nexport interface ProseKitProps {\n  editor: Editor\n}\n\n/**\n * The root component for a ProseKit editor.\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      h(\n        ViewRenderer,\n        { editor: props.editor },\n        () => slots.default?.(),\n      )\n  },\n})\n","import { withPriority, type Extension, type Priority } from '@prosekit/core'\nimport { computed, toValue, type ComputedRef, type MaybeRefOrGetter } 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 { Editor, Extension, Priority } from '@prosekit/core'\nimport type { MaybeRefOrGetter } from 'vue'\n\nimport { useEditorExtension } from './use-editor-extension.ts'\nimport { usePriorityExtension } from './use-priority-extension.ts'\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 */\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 { defineDocChangeHandler } from '@prosekit/core'\nimport type { ProseMirrorNode } from '@prosekit/pm/model'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor document changes.\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 { defineMountHandler, defineUpdateHandler, ProseKitError, union, type Editor, type Extension } from '@prosekit/core'\nimport { onMounted, onUnmounted, shallowRef, triggerRef, type ShallowRef } from 'vue'\n\nimport { useEditorContext } from '../injection/editor-context.ts'\n\n/**\n * Retrieves the editor instance from the nearest ProseKit component.\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    const forceUpdate = () => triggerRef(editorRef)\n    onMounted(() => {\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 { Editor, Extension } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter, type Ref, type ShallowRef } from 'vue'\n\nimport { useEditor } from './use-editor.ts'\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 */\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 { defineKeymap, type Keymap } from '@prosekit/core'\nimport { computed, toValue, type MaybeRefOrGetter } from 'vue'\n\nimport { useExtension, type UseExtensionOptions } from './use-extension.ts'\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 { useExtension, type UseExtensionOptions } from './use-extension.ts'\n\n/**\n * Calls the given handler whenever the editor state changes.\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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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/vue",
   "type": "module",
-  "version": "0.8.0-beta.21",
+  "version": "0.8.0-beta.23",
   "private": false,
   "description": "Vue components and utilities for ProseKit",
   "author": {
@@ -72,11 +72,11 @@
     "src"
   ],
   "dependencies": {
-    "@prosemirror-adapter/core": "^0.5.3",
-    "@prosemirror-adapter/vue": "^0.5.3",
-    "@prosekit/core": "^0.13.0-beta.6",
-    "@prosekit/pm": "^0.1.19-beta.3",
-    "@prosekit/web": "^0.9.0-beta.21"
+    "@prosemirror-adapter/core": "^0.5.4",
+    "@prosemirror-adapter/vue": "^0.5.4",
+    "@prosekit/core": "^0.13.0-beta.7",
+    "@prosekit/web": "^0.9.0-beta.23",
+    "@prosekit/pm": "^0.1.19-beta.4"
   },
   "peerDependencies": {
     "vue": ">= 3.0.0"
@@ -87,17 +87,17 @@
     }
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.7",
+    "@vitejs/plugin-vue": "^6.0.8",
     "@vue/test-utils": "^2.4.11",
-    "tsdown": "^0.22.5",
+    "tsdown": "^0.22.9",
     "typescript": "~6.0.3",
     "vitest": "^4.1.10",
     "vitest-browser-vue": "^2.1.0",
-    "vue": "^3.5.39",
+    "vue": "^3.5.40",
     "@prosekit/config-ts": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/testing": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0"
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",