To use Crepe with Svelte

[akhansari]

I had some difficulty implementing it, so I share it here for anyone who's in the same boat as me.

<script lang="ts">
    import { Crepe, CrepeFeature } from "@milkdown/crepe"
    import "@milkdown/crepe/theme/common/style.css"
    import "@milkdown/crepe/theme/frame.css"
    import type { Action } from "svelte/action"
    import { replaceAll } from "@milkdown/kit/utils"
    import type { Editor } from "@milkdown/kit/core"

    let {
        content = $bindable(""),
        placeholder,
    }: {
        content: string
        placeholder?: string
    } = $props()

    let editor: Editor | null = null
    let isInternalUpdate = false
    let pendingContent: string | null = null

    $effect(() => {
        const newContent = content // to force reactivity because of conditions
        if (isInternalUpdate) {
            isInternalUpdate = false
            return
        }
        if (!editor) {
            pendingContent = newContent
            return
        }
        editor.action(replaceAll(newContent, true))
    })

    const milkdown: Action = (node) => {
        const crepe = new Crepe({
            root: node,
            defaultValue: content,
            features: {
                [CrepeFeature.CodeMirror]: false,
                [CrepeFeature.ImageBlock]: false,
                [CrepeFeature.Latex]: false,
                [CrepeFeature.Table]: false,
            },
            featureConfigs: {
                [CrepeFeature.Placeholder]: {
                    text: placeholder ?? "",
                    mode: "block",
                },
            },
        })

        crepe.on((listener) => {
            listener.markdownUpdated((_ctx, markdown) => {
                isInternalUpdate = true
                content = markdown
            })
        })

        crepe.create().then((e) => {
            editor = e
            if (pendingContent) {
                editor.action(replaceAll(pendingContent, true))
                pendingContent = null
            }
        })

        $effect(() => {
            return () => {
                editor = null
                crepe.destroy()
            }
        })
    }
</script>

<div use:milkdown class="markdown-editor"></div>