/slate-solid-1

A completely customizable framework for building rich text editors using SlateJS and SolidJS.

Primary LanguageTypeScriptMIT LicenseMIT

SlateSolid

SlateSolid 🟰 SlateJS ➕ SolidJS

A completely customizable framework for building rich text editors using SlateJS and SolidJS.

🤖 Slate is currently in beta. See SolidJS Github Repo.

🏗️ SlateSolid is pre-release. SlateSolid is modeled largely after slate-react but is still in active development to get to feature parity.

Demo

Check out the SlateSolid live demo!

Installation

Create a new SolidJS project (if you don't already have one)

npx degit solidjs/templates/ts my-app
cd my-app
npm i

Install peer dependencies:

npm install slate

# For now `slate-dom` is an alias until ianstormtaylor/slate/pull/5734 is merged
npm install slate-dom@npm:@slate-solid/slate-dom-preview

Install SlateSolid

npm install @slate-solid/core

Add this to vite.config.ts

optimizeDeps: {
  include: ['is-hotkey', 'lodash/debounce', 'lodash/throttle'],
},

Minimal example:

import { Editable, Slate, withSolid } from '@slate-solid/core'
import { createEditor } from 'slate'
import { createMemo } from 'solid-js'

const initialValue = [
  {
    type: 'paragraph',
    children: [{ text: 'A line of text in a paragraph.' }],
  },
]

export function App() {
  const editor = createMemo(() => withSolid(createEditor()))

  return (
    <Slate editor={editor()} initialValue={initialValue}>
      <Editable />
    </Slate>
  )
}

export default App