Adding Event Handlers

PreviousNext

Handle editor-local browser events while keeping writes inside the Slate runtime.

Editable accepts React event handlers. Use them for UI-local shortcuts and small input policies that belong to one editor surface.

Starting Point

This is the editor from the install walkthrough:

import { Editable, Slate, useSlateEditor } from "@platejs/slate-react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];
 
const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable />
    </Slate>
  );
};
import { Editable, Slate, useSlateEditor } from "@platejs/slate-react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];
 
const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable />
    </Slate>
  );
};

Read The Native Event

Pass onKeyDown when you only need to observe the browser event.

const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable
        onKeyDown={(event) => {
          console.log(event.key);
        }}
      />
    </Slate>
  );
};
const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable
        onKeyDown={(event) => {
          console.log(event.key);
        }}
      />
    </Slate>
  );
};

Write Through The Editor

Prevent the browser default when Slate should own the edit, then write inside editor.update(...).

const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable
        onKeyDown={(event) => {
          if (event.key !== "&") return;
 
          event.preventDefault();
 
          editor.update((tx) => {
            tx.text.insert("and");
          });
        }}
      />
    </Slate>
  );
};
const App = () => {
  const editor = useSlateEditor({ initialValue });
 
  return (
    <Slate editor={editor}>
      <Editable
        onKeyDown={(event) => {
          if (event.key !== "&") return;
 
          event.preventDefault();
 
          editor.update((tx) => {
            tx.text.insert("and");
          });
        }}
      />
    </Slate>
  );
};

Typing & now inserts and instead.

Keep reusable behavior in commands or extensions once it is shared by keyboard shortcuts, toolbar buttons, menus, tests, or programmatic calls. See Executing Commands.