slate-react

Basic Editor Setup

This code sets up a basic Slate editor with a single paragraph of text. The `Slate` component provides the context for the editor, and the `Editable` component renders the editable area.

import React, { useMemo } from 'react';
import { Slate, Editable, withReact } from 'slate-react';
import { createEditor } from 'slate';

const BasicEditor = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const initialValue = [{ type: 'paragraph', children: [{ text: 'A line of text in a paragraph.' }] }];

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

export default BasicEditor;

Custom Elements

This code demonstrates how to create custom elements in the Slate editor. In this example, a custom `quote` element is defined and rendered as a blockquote.

import React, { useMemo } from 'react';
import { Slate, Editable, withReact } from 'slate-react';
import { createEditor } from 'slate';

const CustomElement = ({ attributes, children, element }) => {
  switch (element.type) {
    case 'quote':
      return <blockquote {...attributes}>{children}</blockquote>;
    default:
      return <p {...attributes}>{children}</p>;
  }
};

const CustomEditor = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const initialValue = [{ type: 'quote', children: [{ text: 'A line of text in a quote.' }] }];

  return (
    <Slate editor={editor} value={initialValue} onChange={value => {}}>
      <Editable renderElement={props => <CustomElement {...props} />} />
    </Slate>
  );
};

export default CustomEditor;

Custom Leaf Nodes

This code shows how to create custom leaf nodes in the Slate editor. In this example, a custom `bold` leaf is defined and rendered as a strong element.

import React, { useMemo } from 'react';
import { Slate, Editable, withReact } from 'slate-react';
import { createEditor } from 'slate';

const CustomLeaf = ({ attributes, children, leaf }) => {
  if (leaf.bold) {
    children = <strong>{children}</strong>;
  }
  return <span {...attributes}>{children}</span>;
};

const CustomLeafEditor = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const initialValue = [{ type: 'paragraph', children: [{ text: 'A bold line of text.', bold: true }] }];

  return (
    <Slate editor={editor} value={initialValue} onChange={value => {}}>
      <Editable renderLeaf={props => <CustomLeaf {...props} />} />
    </Slate>
  );
};

export default CustomLeafEditor;