From 38ee32b93f4e1a002e43252699e8cac48f35f7d8 Mon Sep 17 00:00:00 2001 From: Ian Storm Taylor Date: Fri, 29 Jul 2016 11:23:38 -0700 Subject: [PATCH] update renderMark reference --- docs/reference/plugins/plugins.md | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/docs/reference/plugins/plugins.md b/docs/reference/plugins/plugins.md index d6958cd4f..56fa166f3 100644 --- a/docs/reference/plugins/plugins.md +++ b/docs/reference/plugins/plugins.md @@ -209,14 +209,33 @@ The `renderDecorations` handler allows you to add dynamic, content-aware [`Marks `renderDecorations` is called for every `text` node in the document, and should return a set of updated [`Characters`](../models/character.md) for the text node in question. Every plugin's decoration logic is called, and the resulting characters are unioned, such that multiple plugins can apply decorations to the same pieces of text. ### `renderMark` -`Function renderMark(mark: Mark, marks: Set, state: State, editor: Editor) => Object || Void` +`Function renderMark(mark: Mark, marks: Set, state: State, editor: Editor) => Component || Object || String || Void` -The `renderMark` handler allows you to define the styles that each mark should be rendered with. It takes a [`Mark`](../models/mark.md) object, and should return a dictionary of styles that will be applied via React's `style=` property. For example: +The `renderMark` handler allows you to define the styles that each mark should be rendered with. It is passed a `mark` and the set of `marks`, and should return either a React component, an object of styles, or a class string. For example any of these are valid return values: ```js -{ - fontWeight: 'bold', - fontStyle: 'italic' +function Bold(props) { + return {props.children} +} + +function renderMark(mark) { + if (mark.type == 'bold') return Bold +} +``` + +```js +function renderMark(mark) { + if (mark.type == 'bold') { + return { + fontWeight: 'bold' + } + } +} +``` + +```js +function renderMark(mark) { + if (mark.type == 'bold') return 'my-bold-class' } ```