svelte slate

Tools

• slate
• svelte kit
• svelte icons

tries to mimic the react api from slate-react as much as possible

<script lang="ts">
    import { Slate, Editable, withSvelte } from 'svelte-slate';
    import { createEditor } from 'slate';

    const editor = withSvelte(createEditor());
    let value = [
        {
            children: [{ text: 'This is editable ' }]
        }
    ];
</script>

<Slate {editor} bind:value>
    <Editable placeholder="Enter some plain text..." />
</Slate>

Vite Problems

using the plugin imports can result in mutiple instances of svelte witch can cause context errors, exclude svelte-slate from deps here

export default defineConfig({
    optimizeDeps: {
        exclude: ['svelte-slate']
    }
});

Custom Rendering

Default components for elements, leafs, and placeholders are provided but can easily be overridden and then can be used in the editable component like <Editable {Element} {Leaf} />