Introduction to Slate!

slate http //slatejs org is a completely customizable framework for building rich text editors testing again slate lets you build rich, intuitive editors like those in medium https //medium com/ , dropbox paper https //www dropbox com/paper or google docs https //www google com/docs/about/ —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 https //facebook github io/react/ it was inspired by libraries like draft js https //facebook github io/draft js/ , prosemirror http //prosemirror net/ and quill http //quilljs com/ 🤖 slate is currently in beta its core api is usable now, but you might need to pull request fixes for advanced use cases some of its apis are not "finalized" and will (breaking) change over time as we find better solutions why? why create slate? well (beware this section has a few of https //github com/ianstormtaylor opinions!) before creating slate, i tried a lot of the other rich text libraries out there— https //facebook github io/draft js/ , http //prosemirror net/ , http //quilljs com/ , etc what i found was that while getting simple examples to work was easy enough, once you started trying to build something like medium https //medium com/ , dropbox paper https //www dropbox com/paper or google docs https //www google com/docs/about/ , you ran into deeper issues the editor's "schema" was hardcoded and hard to customize things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain specific needs? transforming the documents programmatically was very convoluted writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex serializing to html, markdown, etc seemed like an afterthought simple things like transforming a document to html or markdown involved writing lots of boilerplate code, for what seemed like very common use cases re inventing the view layer seemed inefficient and limiting most editors rolled their own views, instead of using existing technologies like react, so you had to learn a whole new system with new "gotchas" collaborative editing wasn't designed for in advance often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor the repositories were monolithic, not small and reusable the code bases for many of the editors often didn't expose the internal tooling that could have been re used by developers, leading to having to reinvent the wheel building complex, nested documents was impossible many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible of course not every editor exhibits all of these issues, but if you've tried using another editor you might have run into similar problems to get around the limitations of their apis and achieve the user experience you're after, you have to resort to very hacky things and some experiences are just plain impossible to achieve if that sounds familiar, you might like slate which brings me to how slate solves all of that principles slate tries to solve the question of " introduction to slate! docid\ lmbrax4mhpgsse2pfhjec " with a few principles first class plugins the most important part of slate is that plugins are first class entities 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 schema less core slate's core logic assumes very little 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 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 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 intuitive commands slate documents are edited using "commands", 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 collaboration ready data model the data model slate uses—specifically how operations 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 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 demo check out the http //slatejs org of all of the examples! examples to get a sense for how you might use slate, check out a few of the examples https //www slatejs org/examples/plaintext — showing the most basic case a glorified \<textarea> https //www slatejs org/examples/richtext — showing the features you'd expect from a basic editor https //www slatejs org/examples/markdown preview — showing how to add key handlers for markdown like shortcuts https //www slatejs org/examples/links — showing how to wrap text in inline nodes with associated data https //www slatejs org/examples/images — showing how to use void (text less) nodes to add images https //www slatejs org/examples/hovering toolbar — showing how a contextual hovering menu can be implemented https //www slatejs org/examples/tables — showing how to nest blocks to render more advanced components https //www slatejs org/examples/paste html — showing how to use an html serializer to handle pasted html https //www slatejs org/examples/mentions — showing how to use inline void nodes for simple @ mentions each example includes a view source link to the code that implements it and we have other examples https //github com/ianstormtaylor/slate/tree/master/site/examples too if you have an idea for an example that shows a common use case, pull request it! documentation if you're using slate for the first time, check out the getting started http //docs slatejs org/walkthroughs/01 installing slate walkthroughs and the concepts http //docs slatejs org/concepts to familiarize yourself with slate's architecture and mental models http //docs slatejs org/walkthroughs http //docs slatejs org/concepts http //docs slatejs org/general/faq http //docs slatejs org/general/resources if even that's not enough, you can always read the source itself https //github com/ianstormtaylor/slate/tree/master/packages , which is heavily commented there are also translations of the documentation into other languages 中文 https //doodlewind github io/slate doc cn/ if you're maintaining a translation, feel free to pull request it here! contributing! all contributions are super welcome! check out the contributing docid\ ictd oz2bhajdzh8zspa6 for more info! slate is mit licensed https //github com/ianstormtaylor/slate/tree/f6bfe034d707693488c38da77537fd36cb8856cf/license md