Slate
ExamplesGitHubSlack
main
main
  • Introduction
  • Walkthroughs
    • Installing Slate
    • Adding Event Handlers
    • Defining Custom Elements
    • Applying Custom Formatting
    • Executing Commands
    • Saving to a Database
    • Enabling Collaborative Editing
    • Using the Bundled Source
  • Concepts
    • Interfaces
    • Nodes
    • Locations
    • Transforms
    • Operations
    • Commands
    • Editor
    • Plugins
    • Rendering
    • Serializing
    • Normalizing
    • TypeScript
    • Migrating
  • API
    • Transforms
    • Node Types
      • Editor
      • Element
      • Node
      • NodeEntry
      • Text
    • Location Types
      • Location
      • Path
      • PathRef
      • Point
      • PointEntry
      • PointRef
      • Range
      • RangeRef
      • Span
    • Operation Types
      • Operation
    • Scrubber
  • Libraries
    • Slate React
      • withReact
      • ReactEditor
      • Hooks
      • Slate Component
      • Editable Component
      • Event Handling
    • Slate History
      • withHistory
      • HistoryEditor
      • History
    • Slate Hyperscript
  • General
    • Resources
    • Contributing
    • Changelog
    • FAQ
Powered by GitBook
On this page
  1. Libraries
  2. Slate React

Event Handling

By default, the Editable component comes with a set of event handlers that handle typical rich-text editing behaviors (for example, it implements its own onCopy, onPaste, onDrop, and onKeyDown handlers).

In some cases you may want to extend or override Slate's default behavior, which can be done by passing your own event handler(s) to the Editable component.

Your custom event handler can control whether or not Slate should execute its own event handling for a given event after your handler runs depending on the return value of your event handler as described below.

import {Editable} from 'slate-react';

function MyEditor() {
  const onClick = event => {
    // Implement custom event logic...

    // When no value is returned, Slate will execute its own event handler when
    // neither isDefaultPrevented nor isPropagationStopped was set on the event
  };

  const onDrop = event => {
    // Implement custom event logic...

    // No matter the state of the event, treat it as being handled by returning
    // true here, Slate will skip its own event handler
    return true;
  };

  const onDragStart = event => {
    // Implement custom event logic...

    // No matter the status of the event, treat event as *not* being handled by
    // returning false, Slate will execute its own event handler afterward
    return false;
  };

  return (
    <Editable
      onClick={onClick}
      onDrop={onDrop}
      onDragStart={onDragStart}
      {/*...*/}
    />
  )
}
PreviousEditable ComponentNextSlate History

Last updated 2 years ago