5.2 KiB
Schemas
Every Slate editor has a "schema" associated with it, which contains information about the structure of its content. It lets you specify how to render each different type of node. And for more advanced use cases it lets you enforce rules about what the content of the editor can and cannot be.
Properties
{
nodes: Object,
marks: Object,
rules: Array
}
The top-level properties of a schema all give you a way to define rules that the schema enforces. The nodes and marks properties are just convenient ways to define the most common set of rules.
marks
Object type: Component || Function || Object || String
{
bold: props => <strong>{props.children}</strong>
}
{
bold: {
fontWeight: 'bold'
}
}
{
bold: 'my-bold-class-name'
}
An object that defines the Marks in the schema by type. Each key in the object refers to a mark by its type. The value defines how Slate will render the mark, and can either be a React component, an object of styles, or a class name.
nodes
Object<type, Component || Function>
Object<type, Rule>
{
quote: props => <blockquote {...props.attributes}>{props.children}</blockquote>
}
{
code: {
render: props => <pre {...props.attributes}><code>{props.children}</code></pre>,
decorate: myCodeHighlighter
}
}
An object that defines the Block and Inline nodes in the schema by type. Each key in the object refers to a node by its type. The values defines how Slate will render the node, and can optionally define any other property of a schema Rule.
rules
Array<Rule>
[
{
match: { kind: 'block', type: 'code' },
component: props => <pre {...props.attributes}><code>{props.children}</code></pre>,
decorate: myCodeHighlighter
}
]
An array of rules that define the schema's behavior. Each of the rules are evaluated in order to determine a match.
Internally, the marks and nodes properties of a schema are simply converted into rules.
Rule Properties
{
match: Function,
decorate: Function,
normalize: Function,
render: Component || Function || Object || String,
validate: Function
}
Slate schemas are built up of a set of rules. Each of the properties will add certain functionality to the schema, based on the properties it defines.
match
Function match(object: Node || Mark)
{
match: (object) => object.kind == 'block' && object.type == 'code'
}
The match property is the only required property of a rule. It determines which objects the rule applies to.
decorate
Function decorate(text: Node, object: Node) => List<Characters>
{
decorate: (text, node) => {
let { characters } = text
let first = characters.get(0)
let { marks } = first
let mark = Mark.create({ type: 'bold' })
marks = marks.add(mark)
first = first.merge({ marks })
characters = characters.set(0, first)
return characters
}
}
The decorate property allows you define a function that will apply extra marks to all of the ranges of text inside a node. It is called with a Text node and the matched node. It should return a list of characters with the desired marks, which will then be added to the text before rendering.
normalize
Function normalize(transform: Transform, object: Node, failure: Any) => Transform
{
normalize: (transform, node, invalidChildren) => {
invalidChildren.forEach((child) => {
transform.removeNodeByKey(child.key)
})
return transform
}
}
The normalize property is a function to run that recovers the editor's state after the validate property of a rule has determined that an object is invalid. It is passed a Transform that it can use to make modifications. It is also passed the return value of the validate function, which makes it easy to quickly determine the failure reason from the validation.
render
Component
Function
Object
String
{
render: (props) => <pre {...props.attributes}><code>{props.children}</code></pre>
}
The render property determines which React component Slate will use to render a Node or Mark. Mark renderers can also be defined as an object of styles or a class name string for convenience.
validate
Function validate(object: Node) => Any || Void
{
validate: (node) => {
const invalidChildren = node.nodes.filter(child => child.kind == 'block')
return invalidChildren.size ? invalidChildren : null
}
}
The validate property allows you to define a constraint that the matching object must abide by. It should return either Void if the object is valid, or any non-void value if it is invalid. This makes it easy to return the exact reason that the object is invalid, which makes it simple to recover from the invalid state with the normalize property.