prosemirror-svelte-nodeview
Create a ProseMirror NodeView using Svelte.
Basic usage
A basic heading NodeView (SimpleHeadingView)
<script lang="ts">
export var attrs: { level: number };
export let contentDOM: (node: HTMLElement) => void;
$: tag = `h${attrs.level}`;
</script>
<svelte:element this={tag} use:contentDOM />Loading the component using the plugin
EditorState.create({
doc,
plugins: [
sveltePlugin({
nodes: {
heading: SimpleHeadingView,
}
})
]
})Component props
These props are passed to the components loaded into this plugin.
type ComponentProps = {
attrs?: Record<string, unknown>;
controls?: SvelteNodeViewControls,
contentDOM?: (node: HTMLElement) => void,
rootDOM?: (node: HTMLElement) => void,
}
export interface SvelteNodeViewControls {
delete: () => void;
update: (cb: (editorState: EditorState, node?: Node, getPos?: () => number) => Transaction) => void;
}Examples
Check out the basic example project for a more complete example component showing the use of a nested editor to edit attributes.
