Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Overview
    • Why This Fork
    • Examples
    • Installing Plite
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Canonical Change Substrate
    • Improving Performance
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Document Changes
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • Using TypeScript
    • Roots
    • Document State
    • Editing Behavior
    • Selection And DOM
    • Clipboard And Paste
    • Decorations, annotations, and widgets
    • Schema
    • Anchor API
    • Location API
    • Path API
    • PointEntry API
    • Point API
    • Range API
    • Selection API
    • Location Types APIs
    • Span API
    • Editor
    • Element API
    • NodeEntry API
    • Node API
    • Node Types APIs
    • Text API
    • Debug Value Scrubbing
    • Transforms API
    • Plite DOM
    • History Editor API
    • History Plugin Setup
    • History
    • Plite History
    • Plite Hyperscript
    • Plite PaginationExperimental
    • Annotations
    • DOM Coverage Boundaries
    • Editable Component
    • External Text Views
    • Plite React Event Handling
    • Virtualized Rendering
    • Plite React Hooks
    • React Editor Setup
    • React Editor
    • Plite React
    • Plite Component
    • Plite Yjs
    • Plite
    • Migration
    • Contributing
    • FAQ
    • Resources

Adding Event Handlers

PreviousNext

Handle editor-local browser events while keeping writes inside the Plite 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, EditorRoot, useEditor } from "plitejs/react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];
 
const App = () => {
  const editor = useEditor({ initialValue });
 
  return (
    <EditorRoot editor={editor}>
      <Editable />
    </EditorRoot>
  );
};

Read the native event

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

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

Write through the editor

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

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

Typing & now inserts and instead.

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

Installing PliteDefining Custom Elements

On This Page

Starting pointRead the native eventWrite through the editor
Build your editor
Production-ready AI template and reusable components.
Get all-access
import { Editable, EditorRoot, useEditor } from "plitejs/react";
 
const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "A line of text in a paragraph." }],
  },
];
 
const App = () => {
  const editor = useEditor({ initialValue });
 
  return (
    <EditorRoot editor={editor}>
      <Editable />
    </EditorRoot>
  );
};
const App = () => {
const editor = useEditor({ initialValue });
return (
<EditorRoot editor={editor}>
<Editable
onKeyDown={(event) => {
console.log(event.key);
}}
/>
</EditorRoot>
);
};
</
EditorRoot
>
);
};
const App = () => {
  const editor = useEditor({ initialValue });
 
  return (
    <EditorRoot editor={editor}>
      <Editable
        onKeyDown={(event) => {
          if (event.key !== "&") return;
 
          event.preventDefault();
 
          editor.update((tx) => {
            tx.text.insert("and");
          });
        }}
      />
    </EditorRoot>
  );
};