slate-react provides the essential React-specific components, hooks, and plugins for building highly customizable rich-text editors with Slate. It integrates the core Slate data model and operations with React's rendering capabilities, leveraging `contenteditable` for a robust editing experience. The current stable version is 0.124.0, which typically releases in conjunction with its core `slate` peer dependency, following a frequent, often weekly, release cadence for minor and patch updates. Key differentiators include its unopinionated core, allowing developers complete control over rendering and behavior, and a powerful plugin-based architecture for extending functionality without modifying the core. This package focuses on flexibility and a declarative approach to content modeling, making it suitable for complex document editing scenarios rather than being an off-the-shelf WYSIWYG solution.
npm install slate-reactVerified import paths — ran on the pinned version, not inferred.
Demonstrates a basic Slate editor setup with `Slate` and `Editable` components, including custom leaf rendering and a simple keyboard shortcut for bolding text. This example uses `createEditor` and `withReact` to initialize the editor instance, `useState` for managing the editor's value, and `useMemo` to ensure the editor instance is stable across re-renders.
Always review the release notes carefully before updating to a new minor version. Consult the official migration guides on the Slate GitHub for specific changes.
Migrate existing type checks from `Path.isPath` to `Location.isPath`, `Point.isPoint` to `Location.isPoint`, etc., to leverage the more efficient type discriminators.
Ensure your `editor` instance is stable (e.g., created with `useMemo`) and that any custom hooks or effects relying on the editor instance correctly list it in their dependency arrays to avoid stale closures and ensure reactivity.
Always use Slate's provided APIs (e.g., `Transforms`, `Editor` methods) to modify the editor's state and content. For custom UI elements, ensure they are rendered outside the `Editable` component or carefully manage their interaction with the editor's DOM to prevent conflicts.
Ensure your editor's `initialValue` adheres strictly to the Slate document model, where every element has a `type` and `children` array, and every text node has a `text` property, even if empty. Review `Editor.isEditor`, `Element.isElement`, and `Text.isText` for guidance.
Wrap any component that calls `useSlate` (or `useSelected`, `useFocused`, `useReadOnly`) with the `<Slate>` component. Ensure the hook call occurs within a child component of `<Slate>`.
Always initialize your editor instance using `useMemo` within your functional component to ensure it's stable across renders, e.g., `const editor = useMemo(() => withReact(createEditor()), []);`.