1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-11 09:43:58 +02:00
Files
slate/site/examples
Joe Anderson fb87646e86 Experimental chunking optimisation and other performance improvements (#5871)
* Chunking optimization

* Fix comments

* Remove redundant `insertionsMinusRemovals` variable

* Fix typo

* Unblock Netlify builds

* Add placeholder

* Upgrade Playwright (fixes crash when debugging)

* Fix `autoFocus` not working

* Fix huge document test

* Fix the previous issue without changing `useSlateSelector`

* Retry `test:integration`

* Re-implement `useSlateWithV`

* Retry `test:integration`

* Update docs

* Update JS examples to match TS examples

* Upload Playwright's `test-results` directory in CI to access traces

* Change trace mode to `retain-on-first-failure`

* Fix: `Locator.fill(text)` is flaky on Editable

* Add changesets

* Increase minimum `slate-dom` version

* Update changeset

* Update 09-performance.md

* Deprecate the `useSlateWithV` hook

* Fix errors and improve clarity in 09-performance.md

* Minimum `slate-dom` version is now 0.116

* Update `yarn.lock`
2025-06-06 16:42:11 -07:00
..

Examples

This directory contains a set of examples that give you an idea for how you might use Slate to implement your own editor. Take a look around!

  • Plain text — showing the most basic case: a glorified <textarea>.
  • Rich text — showing the features you'd expect from a basic editor.
  • Forced Layout - showing how to use constraints to enforce a document structure.
  • Markdown Shortcuts — showing how to add key handlers for Markdown-like shortcuts.
  • Inlines — showing how wrap text in inline nodes with associated data.
  • Images — showing how to use void (text-less) nodes to add images.
  • Hovering toolbar — showing how a hovering toolbar can be implemented.
  • Tables — showing how to nest blocks to render more advanced components.
  • Paste HTML — showing how to use an HTML serializer to handle pasted HTML.
  • Code Highlighting — showing how to use decorations to dynamically format text.
  • ...and more!

If you have an idea for an example that shows a common use case, pull request it!

Running the Examples

To get the examples running on your machine, you need to have the Slate repository cloned to your computer. After that, you need to cd into the directory where you cloned it, and install the dependencies with yarn and build the monorepo:

yarn install
yarn build

Then start the watcher and examples server:

yarn start

Now you can open up http://localhost:3000 in your browser and you'll see the examples site. Any changes you make to the source code will be immediately reflected when you refresh the page. You can open the examples URL quickly with:

yarn open