How to create custom node component for Svelte?

[mavcook]

Hi, would anyone be able to share an example of using a custom Svelte component as a node inline in the editor? There are some examples for React and Vue, but I cannot figure out how to convert them over to Svelte.

Thank you!

[sensiblearts]

I'm in the really early stages of working on one, but here is my code:

<script lang="ts">
	import { Button } from "$lib/components/ui/button";
	import { Editor, rootCtx, editorViewCtx, editorViewOptionsCtx, serializerCtx, defaultValueCtx } from '@milkdown/core';
	import { commonmark } from '@milkdown/preset-commonmark';
        import { gfm } from '@milkdown/preset-gfm';
	import { nord } from '@milkdown/theme-nord';
	import { history } from '@milkdown/plugin-history';
        import { clipboard } from '@milkdown/plugin-clipboard';
        import type { DigitalNoteType } from "$lib/constants"
        import { beforeNavigate } from "$app/navigation";
        import { onDestroy  } from "svelte";
    
	export let editable: boolean;
        export let note: DigitalNoteType;

        const theEditor : any = {editor: null, getMarkdown: null};

    function editor(dom: any) {

        const MakeEditor = Editor.make()
            .config((ctx) => {
                ctx.set(rootCtx, dom)
                ctx.set(defaultValueCtx, note.body)
                ctx.set(editorViewOptionsCtx, { editable: () => editable } )
            })
            .config(nord)
            .use(commonmark)
            .use(gfm)
            .use(history)
            .use(clipboard)
            .create();
        
        MakeEditor.then((editor) => {
            theEditor.editor = editor;
            // Focus text for editing, immediately:
             let firstChild : HTMLElement = document.querySelector(".milkdown")!;
             // asserted not null
             firstChild.focus();
            // Maybe use const editorView = ctx.get(editorViewCtx); below to set focus? Might be more stable than relying on firstChild.
        
            theEditor.getMarkdown = () =>
                editor.action((ctx) => {
                    const editorView = ctx.get(editorViewCtx);
                    const serializer = ctx.get(serializerCtx);
                    return serializer(editorView.state.doc);
                });
            return editor;
        })
    }

    async function handleContent() {
        let md = theEditor.getMarkdown();
        note.body = md;       
        const response = await fetch('/api/entries', {
			method: 'PUT', // update
			body: JSON.stringify(note),
			headers: {
				'content-type': 'application/json'
			}
		});

        editable = false;

        let result = await response.json();
        console.log("editor result", result);
       }

    onDestroy(() => {
        let save = async function() {
            await handleContent();
        }
        if (editable) {
            save();
            editable = false;
        }
    });

</script>
<div use:editor class="content-center;"/>
<div class="min-w-full px-20 mt-10 mb-20">
    {#if editable}
        <Button on:click={() => handleContent()} >Save</Button>
    {/if}
</div>

[mavcook]

Thank you for sharing, I appreciate it! I could be missing it in your example, but I am looking how to make a custom "node view" component, so something that would show up in the text portion of the editor that you can interact with, like the Blockquote from the examples, but a full blown svelte component. Sorry I wasn't clear in my original question (I've been looking at lots of editors and the terminology is hard to follow).

[sensiblearts]

Sorry, I must have been tired when I read your post. It clearly says what you mean. It might be worth looking at the ProsMirror guides.

[sensiblearts]

@mavcook did you find any examples?

I'm now facing the same need.

[mavcook]

Unfortunatley no, I ended up going with TipTap because I was able to get custom nodes working with it.
Maybe I will try messing with Milkdown again and see if I can do a custom node. If I get something working, I will reply here.

[sensiblearts]

Thanks for the reply. I'm happy with Mildown. Svelte components would be nice but I realized that remark-directives to build plain html will probably do all I need.