Zenn
Open5

SvelteKitでLexicalを使ってみる

Svelte
Lexical
SvelteKit
おかしおかし

とりあえず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";