mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-07-31 04:20:26 +02:00
Code Issues Releases Wiki Activity

Add defaultValue prop to Editor component (#2418)

Browse Source 
* Add `defaultValue` prop to `Editor` component

* Use `defaultValue` prop in the `Read Only` example

* Use `defaultValue` prop in the `Check Lists` example

* Use `defaultValue` prop in the `Code Highlighting` example

* Use `defaultValue` prop in the `Embeds` example

* Use `defaultValue` prop in the `Emojis` example

* Use `defaultValue` prop in the `Forced Layout` example

* Use `defaultValue` prop in the `Huge Document` example

* Use `defaultValue` prop in the `Images` example

* Use `defaultValue` prop in the `Input Tester` example

* Use `defaultValue` prop in the `Markdown Preview` example

* Use `defaultValue` prop in the `Markdown Shortcuts` example

* Use `defaultValue` prop in the `Paste HTML` example

* Use `defaultValue` prop in the `Plain Text` example

* Use `defaultValue` prop in the `Plugins` example

* Use `defaultValue` prop in the `RTL` example

* Use `defaultValue` prop in the `Search Highlighting` example

* Use `defaultValue` prop in the `Tables` example
This commit is contained in:
Dundercover
2018-11-15 17:21:42 +01:00
committed by Ian Storm Taylor
parent 5849dcb810
commit 61be5f8881
18 changed files with 203 additions and 390 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
examples/check-lists/index.js
View File

@@ -2,9 +2,17 @@ import { Editor } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import styled from 'react-emotion'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* Create a few styling components.
*
@@ -88,16 +96,6 @@ class CheckListItem extends React.Component {
*/
class CheckLists extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Render.
*
@@ -109,8 +107,7 @@ class CheckLists extends React.Component {
<Editor
spellCheck
placeholder="Get to work..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
@@ -133,16 +130,6 @@ class CheckLists extends React.Component {
}
}
/**
* On change, save the new value.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On key down...
*

33
examples/code-highlighting/index.js
View File

@@ -3,7 +3,15 @@ import { Value } from 'slate'
import Prism from 'prismjs'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* Define our code components.
@@ -67,16 +75,6 @@ function getContent(token) {
*/
class CodeHighlighting extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Render.
*
@@ -87,8 +85,7 @@ class CodeHighlighting extends React.Component {
return (
<Editor
placeholder="Write some code..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
renderMark={this.renderMark}
@@ -155,16 +152,6 @@ class CodeHighlighting extends React.Component {
}
}
/**
* On change, save the new value.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On key down inside code blocks, insert soft new lines.
*

33
examples/embeds/index.js
View File

@@ -3,7 +3,15 @@ import { Value } from 'slate'
import React from 'react'
import Video from './video'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* The images example.
@@ -12,16 +20,6 @@ import initialValue from './value.json'
*/
class Embeds extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* The editor's schema.
*
@@ -46,9 +44,8 @@ class Embeds extends React.Component {
return (
<Editor
placeholder="Enter some text..."
value={this.state.value}
defaultValue={initialValue}
schema={this.schema}
onChange={this.onChange}
renderNode={this.renderNode}
/>
)
@@ -70,16 +67,6 @@ class Embeds extends React.Component {
return next()
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
}
/**

33
examples/emojis/index.js
View File

@@ -2,10 +2,18 @@ import { Editor } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import styled from 'react-emotion'
import { Button, Icon, Toolbar } from '../components'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* A styled emoji inline component.
*
@@ -57,16 +65,6 @@ const noop = e => e.preventDefault()
*/
class Emojis extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* The editor's schema.
*
@@ -110,9 +108,8 @@ class Emojis extends React.Component {
<Editor
placeholder="Write some 😍👋🎉..."
ref={this.ref}
value={this.state.value}
defaultValue={initialValue}
schema={this.schema}
onChange={this.onChange}
renderNode={this.renderNode}
/>
</div>
@@ -156,16 +153,6 @@ class Emojis extends React.Component {
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* When clicking a emoji, insert it
*

33
examples/forced-layout/index.js
View File

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
import { Block, Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* A simple schema to enforce the nodes in the Slate document.
@@ -38,16 +46,6 @@ const schema = {
*/
class ForcedLayout extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Render the editor.
*
@@ -58,9 +56,8 @@ class ForcedLayout extends React.Component {
return (
<Editor
placeholder="Enter a title..."
value={this.state.value}
defaultValue={initialValue}
schema={schema}
onChange={this.onChange}
renderNode={this.renderNode}
/>
)
@@ -87,16 +84,6 @@ class ForcedLayout extends React.Component {
return next()
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
}
/**

29
examples/huge-document/index.js
View File

@@ -35,6 +35,14 @@ for (let h = 0; h < HEADINGS; h++) {
}
}
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(json, { normalize: false })
/**
* The huge document example.
*
@@ -42,14 +50,6 @@ for (let h = 0; h < HEADINGS; h++) {
*/
class HugeDocument extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = { value: Value.fromJSON(json, { normalize: false }) }
/**
* Render the editor.
*
@@ -61,8 +61,7 @@ class HugeDocument extends React.Component {
<Editor
placeholder="Enter some text..."
spellCheck={false}
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
renderNode={this.renderNode}
renderMark={this.renderMark}
/>
@@ -114,16 +113,6 @@ class HugeDocument extends React.Component {
return next()
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
}
/**

33
examples/images/index.js
View File

@@ -2,12 +2,20 @@ import { Editor, getEventRange, getEventTransfer } from 'slate-react'
import { Block, Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import imageExtensions from 'image-extensions'
import isUrl from 'is-url'
import styled from 'react-emotion'
import { Button, Icon, Toolbar } from '../components'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* A styled image block component.
*
@@ -83,16 +91,6 @@ const schema = {
*/
class Images extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Store a reference to the `editor`.
*
@@ -120,9 +118,8 @@ class Images extends React.Component {
<Editor
placeholder="Enter some text..."
ref={this.ref}
value={this.state.value}
defaultValue={initialValue}
schema={schema}
onChange={this.onChange}
onDrop={this.onDropOrPaste}
onPaste={this.onDropOrPaste}
renderNode={this.renderNode}
@@ -153,16 +150,6 @@ class Images extends React.Component {
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On clicking the image button, prompt for an image and insert it.
*

16
examples/input-tester/index.js
View File

@@ -3,10 +3,18 @@ import { Value } from 'slate'
import React from 'react'
import styled from 'react-emotion'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import { Icon } from '../components'
import { createArrayValue } from 'react-values'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
const EventsValue = createArrayValue()
const Wrapper = styled('div')`
@@ -193,10 +201,6 @@ const Event = ({ event, targetRange, selection }) => {
}
class InputTester extends React.Component {
state = {
value: Value.fromJSON(initialValue),
}
componentDidMount() {
const editor = this.el.querySelector('[contenteditable="true"]')
editor.addEventListener('keydown', this.onEvent)
@@ -221,7 +225,7 @@ class InputTester extends React.Component {
spellCheck
placeholder="Enter some text..."
ref={this.ref}
value={this.state.value}
defaultValue={initialValue}
onChange={this.onChange}
renderNode={this.renderNode}
renderMark={this.renderMark}

35
examples/markdown-preview/index.js
View File

@@ -11,6 +11,16 @@ import React from 'react'
// eslint-disable-next-line
;Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.insertBefore("markdown","prolog",{blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},code:[{pattern:/^(?: {4}|\t).+/m,alias:"keyword"},{pattern:/``.+?``|`[^`\n]+`/,alias:"keyword"}],title:[{pattern:/\w+.*(?:\r?\n|\r)(?:==+|--+)/,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#+.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])([\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:/(^|[^\\])(\*\*|__)(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^\*\*|^__|\*\*$|__$/}},italic:{pattern:/(^|[^\\])([*_])(?:(?:\r?\n|\r)(?!\r?\n|\r)|.)+?\2/,lookbehind:!0,inside:{punctuation:/^[*_]|[*_]$/}},url:{pattern:/!?\[[^\]]+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)| ?\[[^\]\n]*\])/,inside:{variable:{pattern:/(!?\[)[^\]]+(?=\]$)/,lookbehind:!0},string:{pattern:/"(?:\\.|[^"\\])*"(?=\)$)/}}}}),Prism.languages.markdown.bold.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.italic.inside.url=Prism.util.clone(Prism.languages.markdown.url),Prism.languages.markdown.bold.inside.italic=Prism.util.clone(Prism.languages.markdown.italic),Prism.languages.markdown.italic.inside.bold=Prism.util.clone(Prism.languages.markdown.bold); // prettier-ignore
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Plain.deserialize(
'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.\n## Try it out!\nTry it out for yourself!'
)
/**
* The markdown preview example.
*
@@ -18,18 +28,6 @@ import React from 'react'
*/
class MarkdownPreview extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Plain.deserialize(
'Slate is flexible enough to add **decorations** that can format text based on its content. For example, this editor has **Markdown** preview decorations on it, to make it _dead_ simple to make an editor with built-in Markdown previewing.\n## Try it out!\nTry it out for yourself!'
),
}
/**
*
* Render the example.
@@ -41,8 +39,7 @@ class MarkdownPreview extends React.Component {
return (
<Editor
placeholder="Write some markdown..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
renderMark={this.renderMark}
decorateNode={this.decorateNode}
/>
@@ -134,16 +131,6 @@ class MarkdownPreview extends React.Component {
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* Define a decorator for markdown styles.
*

33
examples/markdown-shortcuts/index.js
View File

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* The auto-markdown example.
@@ -11,16 +19,6 @@ import initialValue from './value.json'
*/
class MarkdownShortcuts extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Get the block type for a series of auto-markdown shortcut `chars`.
*
@@ -64,8 +62,7 @@ class MarkdownShortcuts extends React.Component {
return (
<Editor
placeholder="Write some markdown..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
@@ -108,16 +105,6 @@ class MarkdownShortcuts extends React.Component {
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On key down, check for our specific key shortcuts.
*

33
examples/paste-html/index.js
View File

@@ -3,9 +3,17 @@ import { Editor, getEventTransfer } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import styled from 'react-emotion'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* Tags to blocks.
*
@@ -152,16 +160,6 @@ const serializer = new Html({ rules: RULES })
*/
class PasteHtml extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* The editor's schema.
*
@@ -186,10 +184,9 @@ class PasteHtml extends React.Component {
return (
<Editor
placeholder="Paste in some HTML..."
value={this.state.value}
defaultValue={initialValue}
schema={this.schema}
onPaste={this.onPaste}
onChange={this.onChange}
renderNode={this.renderNode}
renderMark={this.renderMark}
/>
@@ -277,16 +274,6 @@ class PasteHtml extends React.Component {
}
}
/**
* On change, save the new value.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On paste, deserialize the HTML and then insert the fragment.
*

35
examples/plain-text/index.js
View File

@@ -3,6 +3,16 @@ import { Editor } from 'slate-react'
import React from 'react'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Plain.deserialize(
'This is editable plain text, just like a <textarea>!'
)
/**
* The plain text example.
*
@@ -10,18 +20,6 @@ import React from 'react'
*/
class PlainText extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Plain.deserialize(
'This is editable plain text, just like a <textarea>!'
),
}
/**
* Render the editor.
*
@@ -32,21 +30,10 @@ class PlainText extends React.Component {
return (
<Editor
placeholder="Enter some plain text..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
/>
)
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
}
/**

37
examples/plugins/index.js
View File

@@ -6,6 +6,17 @@ import CollapseOnEscape from './collapse-on-escape'
import SoftBreak from './soft-break'
import WordCount from './word-count'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Plain.deserialize(`This example shows how you can extend Slate with plugins! It uses four fairly simple plugins, but you can use any plugins you want, or write your own!
The first is a simple plugin to collapse the selection whenever the escape key is pressed. Try selecting some text and pressing escape.
The second is another simple plugin that inserts a "soft" break when enter is pressed instead of creating a new block. Try pressing enter!
The third is an example of using the plugin.render property to create a higher-order-component.`)
/**
* Plugins.
*/
@@ -19,19 +30,6 @@ const plugins = [CollapseOnEscape(), SoftBreak(), WordCount()]
*/
class Plugins extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Plain.deserialize(`This example shows how you can extend Slate with plugins! It uses four fairly simple plugins, but you can use any plugins you want, or write your own!
The first is a simple plugin to collapse the selection whenever the escape key is pressed. Try selecting some text and pressing escape.
The second is another simple plugin that inserts a "soft" break when enter is pressed instead of creating a new block. Try pressing enter!
The third is an example of using the plugin.render property to create a higher-order-component.`),
}
/**
* Render the editor.
*
@@ -43,21 +41,10 @@ The third is an example of using the plugin.render property to create a higher-o
<Editor
placeholder="Enter some text..."
plugins={plugins}
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
/>
)
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
}
/**

41
examples/read-only/index.js
View File

@@ -3,6 +3,16 @@ import { Editor } from 'slate-react'
import React from 'react'
/**
* Deserialize the read-only value.
*
* @type {Object}
*/
const value = Plain.deserialize(
'This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing permissions.'
)
/**
* The read-only example.
*
@@ -10,18 +20,6 @@ import React from 'react'
*/
class ReadOnly extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Plain.deserialize(
'This is read-only text. You should not be able to edit it, which is useful for scenarios where you want to render via Slate, without giving the user editing permissions.'
),
}
/**
* Render the editor.
*
@@ -29,24 +27,7 @@ class ReadOnly extends React.Component {
*/
render() {
return (
<Editor
readOnly
placeholder="Enter some text..."
value={this.state.value}
onChange={this.onChange}
/>
)
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
return <Editor defaultValue={value} readOnly />
}
}

33
examples/rtl/index.js
View File

@@ -2,7 +2,15 @@ import { Editor } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* A right-to-left text example.
@@ -11,16 +19,6 @@ import initialValue from './value.json'
*/
class RTL extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Render the editor.
*
@@ -31,8 +29,7 @@ class RTL extends React.Component {
return (
<Editor
placeholder="Enter some plain text..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
/>
@@ -57,16 +54,6 @@ class RTL extends React.Component {
}
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On key down, if it's <shift-enter> add a soft break.
*

33
examples/search-highlighting/index.js
View File

@@ -2,10 +2,18 @@ import { Editor } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
import styled from 'react-emotion'
import { Icon, Toolbar } from '../components'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* Some styled components for the search box.
*
@@ -35,16 +43,6 @@ const SearchInput = styled('input')`
*/
class SearchHighlighting extends React.Component {
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* The editor's schema.
*
@@ -91,9 +89,8 @@ class SearchHighlighting extends React.Component {
<Editor
placeholder="Enter some rich text..."
ref={this.ref}
value={this.state.value}
defaultValue={initialValue}
schema={this.schema}
onChange={this.onChange}
renderMark={this.renderMark}
spellCheck
/>
@@ -123,16 +120,6 @@ class SearchHighlighting extends React.Component {
}
}
/**
* On change, save the new `value`.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On input change, update the decorations.
*

33
examples/tables/index.js
View File

@@ -3,7 +3,15 @@ import { Editor, getEventTransfer } from 'slate-react'
import { Value } from 'slate'
import React from 'react'
import initialValue from './value.json'
import initialValueAsJson from './value.json'
/**
* Deserialize the initial editor value.
*
* @type {Object}
*/
const initialValue = Value.fromJSON(initialValueAsJson)
/**
* The tables example.
@@ -12,16 +20,6 @@ import initialValue from './value.json'
*/
class Tables extends React.Component {
/**
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
value: Value.fromJSON(initialValue),
}
/**
* Render the example.
*
@@ -32,8 +30,7 @@ class Tables extends React.Component {
return (
<Editor
placeholder="Enter some text..."
value={this.state.value}
onChange={this.onChange}
defaultValue={initialValue}
onKeyDown={this.onKeyDown}
onDrop={this.onDropOrPaste}
onPaste={this.onDropOrPaste}
@@ -101,16 +98,6 @@ class Tables extends React.Component {
event.preventDefault()
}
/**
* On change.
*
* @param {Editor} editor
*/
onChange = ({ value }) => {
this.setState({ value })
}
/**
* On delete, do nothing if at the end of a table cell.
*

37
packages/slate-react/src/components/editor.js
View File

@@ -35,6 +35,7 @@ class Editor extends React.Component {
autoCorrect: Types.bool,
autoFocus: Types.bool,
className: Types.string,
defaultValue: SlateTypes.value,
id: Types.string,
onChange: Types.func,
options: Types.object,
@@ -46,7 +47,7 @@ class Editor extends React.Component {
spellCheck: Types.bool,
style: Types.object,
tabIndex: Types.number,
value: SlateTypes.value.isRequired,
value: SlateTypes.value,
...EVENT_HANDLERS.reduce((obj, handler) => {
obj[handler] = Types.func
return obj
@@ -77,7 +78,7 @@ class Editor extends React.Component {
* @type {Object}
*/
state = {}
state = { value: this.props.defaultValue }
/**
* Temporary values.
@@ -105,7 +106,7 @@ class Editor extends React.Component {
}
if (this.tmp.change) {
this.props.onChange(this.tmp.change)
this.handleChange(this.tmp.change)
this.tmp.change = null
}
}
@@ -118,7 +119,7 @@ class Editor extends React.Component {
this.tmp.updates++
if (this.tmp.change) {
this.props.onChange(this.tmp.change)
this.handleChange(this.tmp.change)
this.tmp.change = null
}
}
@@ -146,12 +147,17 @@ class Editor extends React.Component {
this.resolveController(plugins, schema, commands, queries, placeholder)
// Set the current props on the controller.
const { options, readOnly, value } = props
const { options, readOnly, value: valueFromProps } = props
const { value: valueFromState } = this.state
const value = valueFromProps || valueFromState
this.controller.setReadOnly(readOnly)
this.controller.setValue(value, options)
// Render the editor's children with the controller.
const children = this.controller.run('renderEditor', props)
const children = this.controller.run('renderEditor', {
...props,
value,
})
return children
}
@@ -178,11 +184,14 @@ class Editor extends React.Component {
)
this.tmp.resolves++
const react = ReactPlugin(this.props)
const react = ReactPlugin({
...this.props,
value: this.props.value || this.state.value,
})
const onChange = change => {
if (this.tmp.mounted) {
this.props.onChange(change)
this.handleChange(change)
} else {
this.tmp.change = change
}
@@ -197,6 +206,18 @@ class Editor extends React.Component {
}
)
handleChange(change) {
const { onChange } = this.props
const { value } = this.state
if (value) {
// Syncing value inside this component since parent does not want control of it (defaultValue was used)
this.setState({ value: change.value })
}
onChange(change)
}
/**
* Mimic the API of the `Editor` controller, so that this component instance
* can be passed in its place to plugins.