https://github.com/nathanfaucett/svelte-slate

slate svelte view layer
https://github.com/nathanfaucett/svelte-slate

editor slate slatejs svelte sveltejs sveltekit text text-editor wysiwyg wysiwyg-editor

Last synced: about 2 months ago
JSON representation

slate svelte view layer

• Host: GitHub
• URL: https://github.com/nathanfaucett/svelte-slate
• Owner: nathanfaucett
• License: apache-2.0
• Created: 2022-01-07T20:28:06.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2024-03-08T10:06:40.000Z (11 months ago)
• Last Synced: 2024-11-16T13:22:48.048Z (2 months ago)
• Topics: editor, slate, slatejs, svelte, sveltejs, sveltekit, text, text-editor, wysiwyg, wysiwyg-editor
• Language: Svelte
• Homepage: https://nathanfaucett.github.io/svelte-slate/
• Size: 54.5 MB
• Stars: 61
• Watchers: 6
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE-APACHE

Awesome Lists containing this project

README

        
# svelte slate

[![examples](https://img.shields.io/badge/examples-blue.svg)](https://nathanfaucett.github.io/svelte-slate/)

[![license](https://img.shields.io/badge/license-MIT%2FApache--2.0-blue")](LICENSE-MIT)

[![npm (scoped)](https://img.shields.io/npm/v/svelte-slate)](https://www.npmjs.com/package/svelte-slate)

[![build](https://github.com/nathanfaucett/svelte-slate/actions/workflows/deploy.yml/badge.svg)](https://github.com/nathanfaucett/svelte-slate/actions/workflows/deploy.yml)

## Tools

- [slate](https://github.com/ianstormtaylor/slate)

- [svelte kit](https://kit.svelte.dev/docs)

- [svelte icons](https://svelte-icons.vercel.app/)

tries to mimic the react api from [slate-react](https://github.com/ianstormtaylor/slate/tree/main/packages/slate-react) as much as possible

```svelte

	import { Slate, Editable, withSvelte } from 'svelte-slate';

	import { createEditor } from 'slate';

	const editor = withSvelte(createEditor());

	let value = [

		{

			children: [{ text: 'This is editable ' }]

		}

	];

	

```

## Vite Problems

using the plugin imports can result in mutiple instances of svelte witch can cause context errors, exclude svelte-slate from deps [here](https://vitejs.dev/config/dep-optimization-options.html#optimizedeps-exclude)

```typescript

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 ``