ProseKit

Appearance

prosekit/svelte ​

ProseKitProps ​

Properties ​

editor ​

editor: Editor<any>

SvelteNodeViewOptions ​

Options for defineSvelteNodeView.

Extends ​

Properties ​

as? ​

optional as: string | HTMLElement | (node) => HTMLElement

The wrapping DOM element for the node view. Defaults to div for block nodes and span for inline nodes.

Inherited from ​

BaseNodeViewOptions.as

component ​

component: SvelteNodeViewComponent

The Svelte component to render the node.

contentAs? ​

optional contentAs: string | HTMLElement | (node) => HTMLElement

The wrapping DOM element for the node view's content. Defaults to div for block nodes and span for inline nodes.

Inherited from ​

BaseNodeViewOptions.contentAs

deselectNode()? ​

optional deselectNode: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.deselectNode

destroy()? ​

optional destroy: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.destroy

ignoreMutation()? ​

optional ignoreMutation: (mutation) => boolean

Parameters ​

• mutation: MutationRecord

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.ignoreMutation

name ​

name: string

The name of the node type.

onUpdate()? ​

optional onUpdate: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.onUpdate

selectNode()? ​

optional selectNode: () => void

Returns ​

void

Inherited from ​

BaseNodeViewOptions.selectNode

setSelection()? ​

optional setSelection: (anchor, head, root) => void

Parameters ​

• anchor: number

• head: number

• root: Document | ShadowRoot

Returns ​

void

Inherited from ​

BaseNodeViewOptions.setSelection

stopEvent()? ​

optional stopEvent: (event) => boolean

Parameters ​

• event: Event

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.stopEvent

update()? ​

optional update: (node, decorations, innerDecorations) => boolean

Parameters ​

• node: Node

• decorations: readonly Decoration[]

• innerDecorations: DecorationSource

Returns ​

boolean

Inherited from ​

BaseNodeViewOptions.update

SvelteNodeViewProps ​

Properties ​

contentRef() ​

contentRef: (node) => void

Parameters ​

• node: null | HTMLElement

Returns ​

void

decorations ​

decorations: Writable<readonly Decoration[]>

getPos() ​

getPos: () => undefined | number

Returns ​

undefined | number

innerDecorations ​

innerDecorations: Writable<DecorationSource>

node ​

node: Writable<Node>

selected ​

selected: Writable<boolean>

setAttrs() ​

setAttrs: (attrs) => void

Parameters ​

• attrs: Attrs

Returns ​

void

view ​

view: EditorView

UseExtensionOptions ​

Properties ​

editor? ​

optional editor: Editor<any>

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

priority? ​

optional priority: Priority

Optional priority to add the extension with.

SvelteNodeViewComponent ​

SvelteNodeViewComponent: ComponentType<SvelteComponent<SvelteNodeViewProps>>

ProseKit ​

const ProseKit: typeof SvelteComponent

The root component for a ProseKit editor.

defineSvelteNodeView() ​

defineSvelteNodeView(options): Extension

Defines a node view using a Svelte component.

Parameters ​

• options: SvelteNodeViewOptions

Returns ​

Extension

useDocChange() ​

useDocChange(handler, options?): void

Calls the given handler whenever the editor document changes.

Parameters ​

• handler

• options?: UseExtensionOptions

Returns ​

void

useEditor() ​

useEditor<E>(options?): Readable<Editor<E>>

Retrieves the editor instance from the nearest ProseKit component.

Type Parameters ​

• E extends Extension<ExtensionTyping<any, any, any>> = any

Parameters ​

• options?

• options.update?: boolean

Whether to update the component when the editor is mounted or editor state is updated.

Default

ts
false

Returns ​

Readable<Editor<E>>

useExtension() ​

useExtension<T>(extension, options?): void

Add an extension to the editor.

Type Parameters ​

• T extends Extension<ExtensionTyping<any, any, any>> = Extension<ExtensionTyping<any, any, any>>

Parameters ​

• extension: Readable<null | T>

The store to an extension to add to the editor. If it changes, the previous extension will be removed and the new one (if not null) will be added.

• options?: UseExtensionOptions

Returns ​

void

useKeymap() ​

useKeymap(keymapStore, options?): void

Parameters ​

• keymapStore: Readable<Keymap>

• options?: UseExtensionOptions

Returns ​

void

useStateUpdate() ​

useStateUpdate(handler, options?): void

Calls the given handler whenever the editor state changes.

Parameters ​

• handler

• options?: UseExtensionOptions

Returns ​

void