Slate
ExamplesGitHubSlack
v0.47
v0.47
  • Introduction
  • Walkthroughs
    • Installing Slate
    • Adding Event Handlers
    • Defining Custom Block Nodes
    • Applying Custom Formatting
    • Using Plugins
    • Saving to a Database
    • Saving and Loading HTML Content
  • Guides
    • Commands & Queries
    • Data Model
    • Plugins
    • Rendering
    • Schemas
  • General
    • Plugins
    • Resources
    • Contributing
    • Changelog
    • FAQ
    • Glossary
  • Slate Core
    • Block
    • Commands
    • Data
    • Decoration
    • Document
    • Editor
    • Inline
    • Mark
    • Node
    • Operation
    • Plugins
    • Point
    • Range
    • Schema
    • Selection
    • Text
    • Utils
    • Value
  • Slate React
    • Editor
    • Plugins
    • Rendering
    • Utils
  • Other Packages
    • slate-html-serializer
    • slate-hyperscript
    • slate-plain-serializer
    • slate-prop-types
Powered by GitBook
On this page
  • Props
  • attributes
  • children
  • editor
  • isSelected
  • isFocused
  • node
  • parent
  • readOnly
  1. Slate React

Rendering

PreviousPluginsNextUtils

Last updated 5 years ago

Slate will render custom nodes for and models, based on what you pass in as your schema. This allows you to completely customize the rendering behavior of your Slate editor.

Props

{
  attributes: Object,
  children: Object,
  editor: Editor,
  isSelected: Boolean,
  isFocused: Boolean,
  node: Node,
  parent: Node,
  readOnly: Boolean,
}

attributes

Object

A dictionary of DOM attributes that you must attach to the main DOM element of the node you render. For example:

return <p {...props.attributes}>{props.children}</p>
return (
  <figure {...props.attributes}>
    <img src={...} />
  </figure>
)

children

Object

A set of React children elements that are composed of internal Slate components that handle all of the editing logic of the editor for you. You must render these as the children of your non-void nodes. For example:

return <p {...props.attributes}>{props.children}</p>

editor

Editor

const value = editor.value
editor.moveToRangeOfDocument().delete()

isSelected

Boolean

A boolean representing whether the node you are rendering is currently selected. You can use this to render a visual representation of the selection.

This boolean is true when the node is selected and the editor is blurred.

isFocused

Boolean

A boolean representing whether the node you are rendering is currently focused. You can use this to render a visual representation of the focused selection.

node

Node

parent

Node

readOnly

Boolean

Whether the editor is in "read-only" mode, where all of the rendering is the same, but the user is prevented from editing the editor's content.

A reference to the Slate instance. This allows you to retrieve the current value of the editor, or perform a change on the value. For example:

A reference to the being rendered.

A reference to the parent of the current being rendered.

Block
Inline
<Editor>
Node
Node