prosekit/vue

editor: Editor

---

contentRef: VNodeRef

view: EditorView

mark: ShallowRef<Mark>

---

Options for defineVueMarkView.

name: string

The name of the mark type.

as?: MarkViewDOMSpec

contentAs?: MarkViewDOMSpec

component: VueMarkViewComponent

ignoreMutation?: (mutation: ViewMutationRecord) => boolean | void

destroy?: () => void

---

contentRef: VNodeRef

view: EditorView

getPos: () => number | undefined

setAttrs: (attrs: Attrs) => void

node: ShallowRef<ProseMirrorNode>

selected: ShallowRef<boolean>

decorations: ShallowRef<readonly Decoration[]>

innerDecorations: ShallowRef<DecorationSource>

---

Options for defineVueNodeView.

name: string

The name of the node type.

as?: NodeViewDOMSpec

contentAs?: NodeViewDOMSpec

component: VueNodeViewComponent

update?: (node: ProseMirrorNode, decorations: readonly Decoration[], innerDecorations: DecorationSource) => boolean | void

ignoreMutation?: (mutation: ViewMutationRecord) => boolean | void

selectNode?: () => void

deselectNode?: () => void

setSelection?: (anchor: number, head: number, root: Document | ShadowRoot) => void

stopEvent?: (event: Event) => boolean

destroy?: () => void

onUpdate?: () => void

---

editor?: MaybeRefOrGetter<Editor<E>>

The editor to add the extension to. If not provided, it will use the editor from the nearest <ProseKit> component.

---

editor?: MaybeRefOrGetter<Editor<any>>

The editor to add the extension to. If not provided, it will use the editor from the nearest <ProseKit> component.

priority?: Priority

Optional priority to add the extension with.

type VueMarkViewComponent = DefineComponent<VueMarkViewProps, any, any>

---

type VueNodeViewComponent = DefineComponent<VueNodeViewProps, any, any>

const ProseKit: DefineSetupFnComponent<ProseKitProps>

The root component for a ProseKit editor.

function defineVueMarkView(options: VueMarkViewOptions): Extension

Defines a mark view using a Vue component.

---

function defineVueNodeView(options: VueNodeViewOptions): Extension

Defines a node view using a Vue component.

---

function useDocChange(handler: (doc: ProseMirrorNode) => void, options?: UseExtensionOptions): void

Calls the given handler whenever the editor document changes.

---

function useEditorDerivedValue<E, Derived>(derive: (editor: Editor<E>) => Derived, options?: UseEditorDerivedOptions<E>): ShallowRef<Derived>

Runs a function to derive a value from the editor instance after editor state changes.

This is useful when you need to render something based on the editor state, for example, whether the selected text is wrapped in an italic mark.

It returns a shallow ref of the derived value that updates whenever the editor state changes.

---

function useEditor<E>(options?: object): ShallowRef<Editor<E>>

Retrieves the editor instance from the nearest ProseKit component.

---

function useExtension(extension: MaybeRefOrGetter<Extension<ExtensionTyping<any, any, any>> | null>, options?: UseExtensionOptions): void

Add an extension to the editor.

---

function useKeymap(keymap: MaybeRefOrGetter<Keymap>, options?: UseExtensionOptions): void

---

function useStateUpdate(handler: (state: EditorState) => void, options?: UseExtensionOptions): void

Calls the given handler whenever the editor state changes.