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 = [
		{
			type: 'paragraph',
			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 provider but can easily be overridden see Element.svelte and Leaf.svelte and then can be used in the editable component like <Editable {Element} {Leaf} />