SvelteKitでLexicalを使ってみる

おかし

参考になりそうな記事

おかし

とりあえずライブラリが無いか探してみる

まだ実用的ではなさそうなので、公式ドキュメントにあるような普通のJavaScriptとして書く

おかし

とりあえずplain-textを利用。

<script context="module">
    import { onMount } from "svelte";
    import { createEditor } from "lexical";
    import { registerPlainText } from "@lexical/plain-text";
</script>

<script lang="ts">
    let editor_dom: HTMLElement;
    onMount(() => {
        const editor = createEditor();

        editor.setRootElement(editor_dom);
        registerPlainText(editor);
    });
</script>

<div id="editor" contenteditable="true" bind:this={editor_dom} />

おかし

内容を取得したい。const root = $getRoot();をと書けばいいっぽい。

$getRoot()が見つからないと怒られた。importを忘れていた

import { $getRoot } from "lexical";

怒られた。

[svelte illegal-declaration] [E] The $ prefix is reserved, and cannot be used for variable and import names

どうやら$のプレフィックスが被っているようなので、適当に名前を変更してimportする。

import { $getRoot as getRoot} from "lexical";

おかし

最近はかなりSvelte Lexicalの更新が活発で、いくつかbetaでない普通のReleaseもあるようだ。今度試してみようと思う。