Questions tagged [slate.js]

Slate is a completely customizable Javascript framework for building rich text editors. You can think of it like a pluggable implementation of contenteditable built on top of the React.js and Immutable.js libraries.

Slate logo

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docs—which are becoming table stakes for applications on the web—without your codebase getting mired in complexity.

It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React and Immutable. It was inspired by libraries like Draft.js, Prosemirror and Quill.

Principles

Slate tries to solve the question of "Why?" with a few principles:

  1. First-class plugins. The most important part of Slate is that plugins are first-class entities—the core editor logic is even implemented as its own plugin. That means you can completely customize the editing experience, to build complex editors like Medium's or Dropbox's, without having to fight against the library's assumptions.

  2. Schema-less core. Slate's core logic doesn't assume anything about the schema of the data you'll be editing, which means that there are no assumptions baked into the library that'll trip you up when you need to go beyond the most basic use cases.

  3. Nested document model. The document model used for Slate is a nested, recursive tree, just like the DOM itself. This means that creating complex components like tables or nested block quotes are possible for advanced use cases. But it's also easy to keep it simple by only using a single level of hierarchy.

  4. Parallel to the DOM. Slate's data model is based on the DOM—the document is a nested tree, it uses selections and ranges, and it exposes all the standard event handlers. This means that advanced behaviors like tables or nested block quotes are possible. Pretty much anything you can do in the DOM, you can do in Slate.

  5. Stateless views and immutable data. By using React and Immutable.js, the Slate editor is built in a stateless fashion using immutable data structures, which leads to much easier to reason about code, and a much easier time writing plugins.

  6. Intuitive changes. Slate documents are edited using "changes", that are designed to be high-level and extremely intuitive to write and read, so that custom functionality is as expressive as possible. This greatly increases your ability to reason about your code.

  7. Collaboration-ready data model. The data model Slate uses—specifically how changes are applied to the document—has been designed to allow for collaborative editing to be layered on top, so you won't need to rethink everything if you decide to make your editor collaborative.

  8. Clear "core" boundaries. With a plugin-first architecture, and a schema-less core, it becomes a lot clearer where the boundary is between "core" and "custom", which means that the core experience doesn't get bogged down in edge cases.

Documentation

If you're using Slate for the first time, check out the Getting Started walkthroughs and the Guides to familiarize yourself with Slate's architecture and mental models. Once you've gotten familiar with those, you'll probably want to check out the full API Reference.

If even that's not enough, you can always read the source itself, which is explained along with a handful of readme's and is heavily commented.

32 questions
5
votes
2 answers

How do I change slate editor value using Javascript (DOM manipulation)

I want to change the text in the slate editor using DOM manipulation via Javascript. Dynamically change the values filled into editable components in a particular webpage. The website has a combination of simple input elements and slate editor. The…
5
votes
0 answers

Slate vs ProseMirror

I need to build a rich text editor for my React app. After a month of playing with Draft.js, I discovered it isn't configurable enough to suit my needs. I am deciding between Slate and ProseMirror. What are the pros and cons of either of them?
Adam Libuša
  • 685
  • 7
  • 24
4
votes
3 answers

How to trigger change event on slate.js when testing with Selenium or Cypress

I'm trying to find a way to simulate a "change" event when doing E2E testing (with selenium or cypress) and slate.js In our UI, when the user clicks on a word, we pop-up a modal (related to that word). I've been unable to make this happen as I…
Lars
  • 9,976
  • 4
  • 34
  • 40
3
votes
1 answer

Unable to delete a link clearly in Slate.js editor using the official example

CodeSandbox Example: https://codesandbox.io/s/slate-2-images-and-links-forked-s09wi This is basically the withLink() example from the official document. When you press backspace or cut out to remove the link, the JSON output still contains the link…
RedGiant
  • 4,444
  • 11
  • 59
  • 146
3
votes
1 answer

filterDescendants and findDescendant with slate.js

I'm working on making a wysiwyg editor using slate.js I'm in a situation where I'm trying to find the first node with text. This picture below shows what I'm talking about: Slate.js find first text pic In my picture, I'd want to find the node that…
Jeff Maxim
  • 93
  • 1
  • 6
2
votes
2 answers

Inheritance of styles in new paragraph in slate.js

How do I prevent the next text block to inherit the same styles as the first one? If I add an heading and then press enter I would like it to be a paragraph on the next line, and not another heading.
rablentain
  • 6,641
  • 13
  • 50
  • 91
2
votes
0 answers

I can't style a react portal component

I have a portal component: const Portal = ({ children }) => { return typeof document === "object" ? ReactDOM.createPortal(children, document.body) : null; }; And I render it in this way: const HoveringToolbar = () => { ... …
Arman
  • 720
  • 2
  • 7
  • 18
2
votes
1 answer

Why does popper jump to top-left corner when underlying component re-renders?

I am using the Material-UI Popper component (which in turn uses popper.js) to create a hovering toolbar. For the most part it is working well, except for one odd behavior: Select some text: the hovering toolbar appears above the text - as…
Naresh
  • 23,937
  • 33
  • 132
  • 204
2
votes
0 answers

How to add another block after exact block in Slate.js editor?

This code changes type of the block with matched text. How to add another block AFTER this one in Slate.js? import {Range} from 'slate'; import {blockTypes} from 'core/slate-types'; export default function autoreplaceHeading(node, matched, change)…
Ukr
  • 2,411
  • 18
  • 16
2
votes
1 answer

Multiple Slate.js editors / prevent redux from re-rendering parent component

I am trying to add multiple Slate.js text editor fields into one page. So far my main component contains a button which when clicked appends a slate value to an array slateValues in my redux store. In the render function I then map over that array…
Fesch
  • 313
  • 1
  • 4
  • 12
2
votes
1 answer

How to get current line on change in slate.js

How does one get the current line, or the currently edited node, within the onChange or onKeyDown methods in Slate.js? I'm trying to add an updatedAt or createdAt parameter in the data attribute for a particular line. Here's a proof of concept for…
thekevinscott
  • 5,263
  • 10
  • 44
  • 57
2
votes
2 answers

Slate: How to find when Editor has fully rendered

I would like to have a page that renders a Slate Editor, retrieves a document from an API, and then prints the window when the Editor has updated and finished re-rendering. How can I identify when the Editor has re-rendered? Example code: …
wasabigeek
  • 2,923
  • 1
  • 21
  • 30
2
votes
0 answers

Slatejs deserialize break line as new fragment

I am working with slatejs, and I have the following html line,

Line one
Line two

My current rule for br is the following, deserialize(el, next) { const block = BLOCK_TAGS[el.tagName.toLowerCase()]; if (!block) return; …
Max Doumit
  • 1,065
  • 12
  • 33
2
votes
1 answer

Trigger event when a certain element has been removed

I'm building an editor using the excellent Slate editor, but I'm having trouble with a certain task. I've built a drag-and-drop image upload that successfully uploads images (via API, not related to Slate) and inserts them into the editor. However,…
Adam Gerthel
  • 663
  • 3
  • 9
  • 24
1
vote
3 answers

Slate.js prevent block deletion

Which way I can prevent user to remove specific block from slate.js editor (or inform user that block will be deleted) my goal is protect information from accidental removal. Thanks in advance.
gingray
  • 391
  • 8
  • 17
1
2 3