From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
UNPUBLISHED
  • Overview
  • Why This Fork
  • Examples
Walkthroughs
  • Installing Plite
  • Adding Event Handlers
  • Defining Custom Elements
  • Applying Custom Formatting
  • Executing Commands
  • Saving to a Database
  • Canonical Change Substrate
  • Improving Performance
Concepts
  • Interfaces
  • Nodes
  • Locations
  • Transforms
  • Document Changes
  • Commands
  • Editor
  • Extensions
  • Rendering
  • Serializing
  • Normalizing
  • Using TypeScript
  • Roots
  • Document State
  • Editing Behavior
  • Selection And DOM
  • Clipboard And Paste
  • Projection And Overlays
  • Schema
API
  • 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
Libraries
  • Plite DOM
  • History Editor API
  • History Extension Setup
  • History
  • Plite History
  • Plite Hyperscript
  • Plite Layout
  • Annotations
  • DOM Coverage Boundaries
  • Editable Component
  • Plite React Event Handling
  • Virtualized Rendering
  • Plite React Hooks
  • React Editor Setup
  • React Editor
  • Plite React
  • Plite Component
  • Plite Yjs
  • Plite
General
  • Migration
  • Contributing
  • Docs Proof Map
  • FAQ
  • Resources

Plite React Event Handling

PreviousNext

Customize Editable browser events without replacing Plite's default editing runtime.

Editable owns the default browser event handlers for rich-text editing, including copy, paste, drop, keyboard, native input, selection, focus, and drag events.

Pass event handlers to Editable when app UI needs to run before Plite's default behavior.

Use Editing Behavior when the behavior belongs in transactions or a typed extension command handler instead of one Editable event prop.

Handler Return Values

Handler return values control whether Plite continues with its own handling:

  • Return true to mark the event handled and skip Plite's default handler.
  • Return false to force Plite's default handler to run.
  • Return nothing to let Plite continue unless the event is default-prevented or propagation-stopped.
Editable ComponentVirtualized Rendering

On This Page

Handler Return ValuesEditor-Aware Handlers
Build your editor
Production-ready AI template and reusable components.
Get all-access
import type { DragEvent, MouseEvent } from "react";
import { Editable } from "@platejs/plite-react";
const MyEditor = () => {
const onClick = (event: MouseEvent<HTMLDivElement>) => {
trackEditorClick(event);
// Plite runs its click handler unless this handler prevents default,
// stops propagation, or returns true.
};
const onDrop = (event: DragEvent<HTMLDivElement>) => {
if (!isAppOwnedDrop(event)) return false;
insertAppOwnedDrop(event);
return true;
};
const onDragStart = (event: DragEvent<HTMLDivElement>) => {
annotateDragPayload(event);
return false;
};
return (
<Editable onClick={onClick} onDrop={onDrop} onDragStart={onDragStart} />
);
};
import type { DragEvent, MouseEvent } from "react";
import { Editable } from "@platejs/plite-react";
 
const MyEditor = () => {
  const onClick = (event: MouseEvent<HTMLDivElement>) => {
    trackEditorClick(event);
 
    // Plite runs its click handler unless this handler prevents default,
    // stops propagation, or returns true.
  };
 
  const onDrop = (event: DragEvent<HTMLDivElement>) => {
    if (!isAppOwnedDrop(event)) return false;
 
    insertAppOwnedDrop(event);
 
    return true;
  };
 
  const onDragStart = (event: DragEvent<HTMLDivElement>) => {
    annotateDragPayload(event);
 
    return false;
  };
 
  return (
    <Editable onClick={onClick} onDrop={onDrop} onDragStart={onDragStart} />
  );
};

Editor-Aware Handlers

Use onKeyDown and onDOMBeforeInput when a handler needs editor context:

<Editable
  onDOMBeforeInput={(event, { editor, inputType }) => {
    if (inputType !== "formatBold") return false;
 
    editor.update.marks.toggle("bold");
 
    return true;
  }}
  onKeyDown={(event, { editor }) => {
    if (!(event.metaKey && event.key === "k")) return false;
 
    editor.update((tx) => {
      tx.text.insert("link");
    });
 
    return true;
  }}
/>
<Editable
  onDOMBeforeInput={(event, { editor, inputType }) => {
    if (inputType !== "formatBold") return false;
 
    editor.update.marks.toggle("bold");
 
    return true;
  }}
  onKeyDown={(event, { editor }) => {
    if (!(event.metaKey && event.key === "k")) return false;
 
    editor.update((tx) => {
      tx.text.insert
(
"link"
);
});
return true;
}}
/>