diff --git a/docs/Readme.md b/docs/Readme.md index fbd99725c..08620dc72 100644 --- a/docs/Readme.md +++ b/docs/Readme.md @@ -41,8 +41,8 @@ - [Operation](./reference/slate/operation.md) - [Range](./reference/slate/range.md) - [Schema](./reference/slate/schema.md) -- [State](./reference/slate/state.md) - [Text](./reference/slate/text.md) +- [Value](./reference/slate/value.md) - [setKeyGenerator](./reference/slate/utils.md) - [resetKeyGenerator](./reference/slate/utils.md) diff --git a/docs/guides/changes.md b/docs/guides/changes.md index 35991c14a..eb768651d 100644 --- a/docs/guides/changes.md +++ b/docs/guides/changes.md @@ -1,9 +1,9 @@ # Changes -All changes to a Slate editor's state, whether it's the `selection`, `document`, `history`, etc. happen via "changes"—specifically, via the [`Change`](../reference/slate/change.md) model. +All changes to a Slate editor's value, whether it's the `selection`, `document`, `history`, etc. happen via "changes"—specifically, via the [`Change`](../reference/slate/change.md) model. -This is important because the `Change` model is responsible for ensuring that every change to a Slate state can be expressed in terms of low-level [operations](../reference/slate/operation.md). But you don't have to worry about that, because it happens automatically. +This is important because the `Change` model is responsible for ensuring that every change to a Slate value can be expressed in terms of low-level [operations](../reference/slate/operation.md). But you don't have to worry about that, because it happens automatically. You just need to understand changes... @@ -58,15 +58,15 @@ These are changes like `delete()`, `addMark()`, `insertBlock()`, etc. that are t ### On the Selection -These are changes like `blur()`, `collapseToStart()`, `moveToRangeOf()`, etc. that change the `state.selection` model and update the user's cursor without affecting the content of the document. +These are changes like `blur()`, `collapseToStart()`, `moveToRangeOf()`, etc. that change the `value.selection` model and update the user's cursor without affecting the content of the document. ### On a Specific Node These are changes like `removeNodeByKey()`, `setNodeByKey()`, `removeMarkByKey()`, etc. that take a `key` string referring to a specific node, and then change that node in different ways. These are often what you use when making programmatic changes from inside your custom node components, where you already have a reference to `props.node.key`. -### On the Top-level State +### On the Top-level Value -These are changes like `setData()`, `setDecorations()`, etc. that act on the other top-level properties of the [`State`](../reference/slate/state.md) object. These are more advanced. +These are changes like `setData()`, `setDecorations()`, etc. that act on the other top-level properties of the [`Value`](../reference/slate/value.md) object. These are more advanced. ### On the History @@ -75,7 +75,7 @@ These are changes like `undo()`, `redo()`, etc. that use the operation history a ## Making Changes -When you decide you want to make a change to the Slate state, you're almost always in one of four places... +When you decide you want to make a change to the Slate value, you're almost always in one of four places... ### 1. In Slate Handlers @@ -116,7 +116,7 @@ class Image extends React.Component { } ``` -The `editor.change()` method will create a new [`Change`](../reference/slate/change.md) object for you, based on the editor's current state. You can then call any change methods you want, and the new state will be applied to the editor. +The `editor.change()` method will create a new [`Change`](../reference/slate/change.md) object for you, based on the editor's current value. You can then call any change methods you want, and the new value will be applied to the editor. ### 3. From Schema Rules @@ -143,17 +143,17 @@ When a rule's validation fails, Slate passes a [`Change`](../reference/slate/cha This is the fourth place you might want to make changes, and also the most dangerous. You should know that any changes you make outside of the Slate editor might not be seen by your plugins, might interact with the history in weird ways, and may not work with collaborative editing implements. -That said, if that's okay with you, you can make changes manually by using the `change()` method on a Slate [`State`](../reference/slate/state.md). For example: +That said, if that's okay with you, you can make changes manually by using the `change()` method on a Slate [`Value`](../reference/slate/value.md). For example: ```js -const change = state.change() +const change = value.change() .selectAll() .delete() -const newState = change.state +const newValue = change.value ``` -Note that you'll need to then grab the new state value by accessing the `change.state` property directly. +Note that you'll need to then grab the new value by accessing the `change.value` property directly. ## Reusing Changes diff --git a/docs/guides/data-model.md b/docs/guides/data-model.md index f462f6149..c2ab891fb 100644 --- a/docs/guides/data-model.md +++ b/docs/guides/data-model.md @@ -33,13 +33,13 @@ Collections of Slate objects are represented as immutable `Lists`, `Sets`, `Stac If you haven't used Immutable.js before, there is definitely a learning curve. Before you give into Slate, you should check out the [Immutable.js docs](https://facebook.github.io/immutable-js/docs/#/). Once you get the hang of it won't slow you down at all, but it will take a few days to get used to, and you might write things a little "un-performantly" to start. -## The "State" +## The "Value" -The top-level object in Slate—the object encapsulates the entire value of an Slate editor—is called a [`State`](../reference/slate/state.md). +The top-level object in Slate—the object encapsulates the entire value of an Slate editor—is called a [`Value`](../reference/slate/value.md). It is made up of a document filled with content, and a selection representing the user's current cursor selection. It also has a history, to keep track of changes, and a few other more advanced properties like `decorations` and `data`. -> 📋 For more info, check out the [`State` reference](../reference/slate/state.md). +> 📋 For more info, check out the [`Value` reference](../reference/slate/value.md). ## Documents and Nodes @@ -60,7 +60,7 @@ Unlike the DOM though, Slate enforces a few more restrictions on its documents, - **Blocks and inlines must always contain at least one text node.** This is to ensure that the user's cursor can always "enter" the nodes, and to make sure that ranges can be created referencing them. -Slate enforces all of these restrictions for you automatically. Any time you [perform changes](./changes.md) to the document, Slate will check if the document is invalid, and if so it will return it to a "normalized" state. +Slate enforces all of these restrictions for you automatically. Any time you [perform changes](./changes.md) to the document, Slate will check if the document is invalid, and if so it will return it to a "normalized" value. > 🙃 Fun fact: normalizing is actually based on the DOM's [`Node.normalize()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/normalize)! diff --git a/docs/guides/plugins.md b/docs/guides/plugins.md index 5ba8a7b62..261849286 100644 --- a/docs/guides/plugins.md +++ b/docs/guides/plugins.md @@ -22,7 +22,7 @@ Here's a really simple plugin: } }, onClick(event, change, editor) { - if (change.state.isBlurred) { + if (change.value.isBlurred) { change.selectAll().focus() } } diff --git a/docs/reference/slate-html-serializer/index.md b/docs/reference/slate-html-serializer/index.md index 907aacb8b..bbf8405aa 100644 --- a/docs/reference/slate-html-serializer/index.md +++ b/docs/reference/slate-html-serializer/index.md @@ -49,16 +49,16 @@ This parse function should return the `` node of the DOM. ## Methods ### `Html.deserialize` -`Html.deserialize(html: String, [options: Object]) => State` +`Html.deserialize(html: String, [options: Object]) => Value` -Deserialize an HTML `string` into a [`State`](../slate/state.md). How the string is deserialized will be determined by the rules that the HTML serializer was constructed with. +Deserialize an HTML `string` into a [`Value`](../slate/value.md). How the string is deserialized will be determined by the rules that the HTML serializer was constructed with. -If you pass `toJSON: true` as an option, the return value will be a JSON object instead of a [`State`](../slate/state.md) object. +If you pass `toJSON: true` as an option, the return value will be a JSON object instead of a [`Value`](../slate/value.md) object. ### `Html.serialize` -`Html.serialize(state: State, [options: Object]) => String || Array` +`Html.serialize(value: Value, [options: Object]) => String || Array` -Serialize a `state` into an HTML string. How the string is serialized will be determined by the rules that the HTML serializer was constructed with. +Serialize a `value` into an HTML string. How the string is serialized will be determined by the rules that the HTML serializer was constructed with. If you pass `render: false` as an option, the return value will instead be an iterable list of the top-level React elements, to be rendered as children in your own React component. @@ -80,7 +80,7 @@ Each rule must define two properties: ### `rule.deserialize` `rule.deserialize(el: Element, next: Function) => Object || Void` -The `deserialize` function receives a DOM element and should return a plain Javascript object representing the deserialized state, or nothing if the rule in question doesn't know how to deserialize the object, in which case the next rule in the stack will be attempted. +The `deserialize` function receives a DOM element and should return a plain Javascript object representing the deserialized value, or nothing if the rule in question doesn't know how to deserialize the object, in which case the next rule in the stack will be attempted. The object should be one of: diff --git a/docs/reference/slate-hyperscript/index.md b/docs/reference/slate-hyperscript/index.md index 8bbd48619..da012bfa6 100644 --- a/docs/reference/slate-hyperscript/index.md +++ b/docs/reference/slate-hyperscript/index.md @@ -16,15 +16,15 @@ A hyperscript helper for writing Slate documents with JSX! import h from 'slate-hyperscript' -const state = ( - +const value = ( + A string of bold in a Slate editor! - + ) ``` @@ -49,15 +49,15 @@ const h = createHyperscript({ }, }) -const state = ( - +const value = ( + A string of bold in a Slate editor! - + ) ``` diff --git a/docs/reference/slate-plain-serializer/index.md b/docs/reference/slate-plain-serializer/index.md index 7b0976975..8de8a6ffc 100644 --- a/docs/reference/slate-plain-serializer/index.md +++ b/docs/reference/slate-plain-serializer/index.md @@ -5,7 +5,7 @@ import Plain from 'slate-plain-serializer' ``` -A serializer that converts a Slate [`State`](../slate/state.md) to and from a plain text string. +A serializer that converts a Slate [`Value`](../slate/value.md) to and from a plain text string. ## Example @@ -20,13 +20,13 @@ Check out http://slatejs.org for examples! ## Methods ### `Plain.deserialize` -`Plain.deserialize(string: String, [options: Object]) => State` +`Plain.deserialize(string: String, [options: Object]) => Value` -Deserialize a plain text `string` into a [`State`](../slate/state.md). A series of blocks will be created by splitting the input string on `\n` characters. Each block is given a type of `'line'`. +Deserialize a plain text `string` into a [`Value`](../slate/value.md). A series of blocks will be created by splitting the input string on `\n` characters. Each block is given a type of `'line'`. -If you pass `toJSON: true` as an option, the return value will be a JSON object instead of a [`State`](../slate/state.md) object. +If you pass `toJSON: true` as an option, the return value will be a JSON object instead of a [`Value`](../slate/value.md) object. ### `Plain.serialize` -`Plain.serialize(state: State) => String` +`Plain.serialize(value: Value) => String` -Serialize a `state` into a plain text string. Each direct child block of the document will be separated by a `\n` character. +Serialize a `value` into a plain text string. Each direct child block of the document will be separated by a `\n` character. diff --git a/docs/reference/slate-prop-types/index.md b/docs/reference/slate-prop-types/index.md index d240278ab..f69f33687 100644 --- a/docs/reference/slate-prop-types/index.md +++ b/docs/reference/slate-prop-types/index.md @@ -19,7 +19,7 @@ class Toolbar extends React.Component { propTypes = { block: Types.block, schema: Types.schema.isRequired, - state: Types.state.isRequired, + value: Types.value.isRequired, } ... @@ -110,10 +110,6 @@ Ensure that a value is a Slate `Schema`. Ensure that a value is a Slate `Stack`. -### `state` - -Ensure that a value is a Slate `State`. - ### `text` Ensure that a value is a Slate [`Text`](../slate/text.md). @@ -121,3 +117,7 @@ Ensure that a value is a Slate [`Text`](../slate/text.md). ### `texts` Ensure that a value is an immutable `List` of Slate [`Text`](../slate/text.md) objects. + +### `value` + +Ensure that a value is a Slate `Value`. diff --git a/docs/reference/slate-react/core-plugins.md b/docs/reference/slate-react/core-plugins.md index 5eeb6850b..64ab7f094 100644 --- a/docs/reference/slate-react/core-plugins.md +++ b/docs/reference/slate-react/core-plugins.md @@ -34,7 +34,7 @@ When the user drops content into the editor, the core plugin handles drops of ty ### `onKeyDown` -When a key is pressed, the core plugin handles performing some of the "native" behavior that `contenteditable` elements must do. For example it splits blocks on `enter`, removes characters `backspace`, triggers an undo state from the history on `cmd-z`, etc. +When a key is pressed, the core plugin handles performing some of the "native" behavior that `contenteditable` elements must do. For example it splits blocks on `enter`, removes characters `backspace`, triggers an undo from the history on `cmd-z`, etc. ### `onPaste` @@ -64,10 +64,10 @@ However, sometimes you might want to disable the logic of the core plugin withou A noop `onBeforeInput` handler looks like: ```js -function onBeforeInput(event, state) { +function onBeforeInput(event, change, editor) { event.preventDefault() - return state + return false } ``` -Notice that is calls `event.preventDefault()` to prevent the default browser behavior, and it returns the current `state` to prevent the editor from continuing to resolve its plugins stack. +Notice that is calls `event.preventDefault()` to prevent the default browser behavior, and it returns `false` to prevent the editor from continuing to resolve its plugins stack. diff --git a/docs/reference/slate-react/custom-nodes.md b/docs/reference/slate-react/custom-nodes.md index 3a93e1f6e..de5f117c8 100644 --- a/docs/reference/slate-react/custom-nodes.md +++ b/docs/reference/slate-react/custom-nodes.md @@ -4,7 +4,7 @@ Slate will render custom nodes for [`Block`](../slate/block.md) and [`Inline`](../slate/inline.md) models, based on what you pass in as your schema. This allows you to completely customize the rendering behavior of your Slate editor. -## Properties +## Props ```js <{Custom} @@ -15,7 +15,6 @@ Slate will render custom nodes for [`Block`](../slate/block.md) and [`Inline`](. node={Node} parent={Node} readOnly={Boolean} - state={State} /> ``` @@ -53,10 +52,10 @@ return ( ### `editor` `Editor` -A reference to the Slate [``](./editor.md) instance. This allows you to retrieve the current `state` of the editor, or perform a `change` on the state. For example: +A reference to the Slate [``](./editor.md) instance. This allows you to retrieve the current `value` of the editor, or perform a `change` on the value. For example: ```js -const state = editor.getState() +const value = editor.value ``` ```js editor.change((change) => { @@ -84,11 +83,6 @@ A reference to the parent of the current [`Node`](../slate/node.md) being render 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. -### `state` -`State` - -A reference to the current [`State`](../slate/state.md) of the editor. - ## `shouldNodeComponentUpdate` By default, Slate implements a `shouldComponentUpdate` preventing useless re-renders for node components. While the default implementation covers most use cases, you can customize the logic to fit your needs. For example: diff --git a/docs/reference/slate-react/editor.md b/docs/reference/slate-react/editor.md index 21ed18d86..f3d52cbe5 100644 --- a/docs/reference/slate-react/editor.md +++ b/docs/reference/slate-react/editor.md @@ -8,7 +8,7 @@ import { Editor } from 'slate-react' The top-level React component that renders the Slate editor itself. -## Properties +## Props ```js @@ -44,7 +44,7 @@ An optional class name to apply to the content editable element. ### `onChange` `Function onChange(change: Change)` -A change handler that will be called with the `change` that applied the change. You should usually pass the newly changed `change.state` back into the editor through its `state` property. This hook allows you to add persistence logic to your editor. +A change handler that will be called with the `change` that applied the change. You should usually pass the newly changed `change.value` back into the editor through its `value` property. This hook allows you to add persistence logic to your editor. ### `plugins` `Array` @@ -66,10 +66,10 @@ Whether spellcheck is turned on for the editor. ARIA property to define the role of the editor, it defaults to `textbox` when editable. -### `state` -`State` +### `value` +`Value` -A [`State`](../slate/state.md) object representing the current state of the editor. +A [`Value`](../slate/value.md) object representing the current value of the editor. ### `style` `Object` @@ -81,13 +81,11 @@ An optional dictionary of styles to apply to the content editable element. Indicates if it should participate to [sequential keyboard navigation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex). -## Placeholder Properties +## Placeholder Props ```js ``` @@ -96,18 +94,8 @@ Indicates if it should participate to [sequential keyboard navigation](https://d A placeholder string (or React element) that will be rendered as the default block type's placeholder. -### `placeholderClassName` -`String` -An optional class name to apply to the default block type's placeholder. - -### `placeholderStyle` -`Object` - -An optional dictionary of styles to apply to the default block type's placeholder. If `placeholder` is a string, and no class name or style dictionary is passed, this property will default to `{ opacity: '0.333' }`. - - -## Plugin-like Properties +## Plugin-like Props In addition to its own properties, the editor allows passing any of the properties that a [plugin](./plugins.md) defines as well. @@ -123,7 +111,7 @@ const plugins = [ ``` @@ -139,7 +127,7 @@ const plugins = [ ``` @@ -158,29 +146,40 @@ const plugins = [ To see how these properties behave, check out the [Plugins reference](./plugins.md). -## Methods +## Instance Methods ### `blur` `blur() => Void` Programmatically blur the editor. +### `change` +`change(fn) => Void` +`change(fn, ...args) => Void` + +Programmatically invoke a change `fn` on the editor. The function will be invokved with a new `change` object representing the editor's current value. + +If extra `...args` are passed in, the change `fn` will be invoked with `(change, ...args)`, so you can use this as a shorthand for performing single-function changes. + ### `focus` `focus() => Void` Programmatically focus the editor. -### `getSchema` -`getSchema() => Schema` -Return the editor's current schema. +## Instance Properties -### `getState` -`getState() => State` +### `schema` +`Schema` -Return the editor's current state. +The editor's current schema. -### `onChange` -`onChange(change: Change) => Void` +### `stack` +`Stack` -Invoking this method will update the state of the editor with the `change`, running it through all of it's plugins, and passing it the parent component, before it cycles back down as the new `state` property of the editor. +The editor's current stack. + +### `value` +`Value` + +The editor's current value. diff --git a/docs/reference/slate-react/plugins.md b/docs/reference/slate-react/plugins.md index 457266f92..9aead6aa9 100644 --- a/docs/reference/slate-react/plugins.md +++ b/docs/reference/slate-react/plugins.md @@ -40,7 +40,7 @@ export default function MySlatePlugin(options) { All of the event handler properties are passed the same React `event` object you are used to from React's event handlers. They are also passed a `change` object representing any changes that have resulted from the event, and the `editor` instance itself. -Each event handler can choose to call methods on the `change` object, in which case the editor's state will be updated. +Each event handler can choose to call methods on the `change` object, in which case the editor's value will be updated. If the return value of a plugin handler is `null`, the editor will simply continue resolving the plugin stack. However, if you return a non-null value, the editor will break out of the loop. @@ -74,7 +74,7 @@ This handler is equivalent to the `onCopy` handler. ### `onDrop` `Function onDrop(event: Event, change: Change, editor: Editor) => Change || Void` -This handler is called when the user drops content into the `contenteditable` element. The event is already prevented by default, so you must define a state change to have any affect occur. +This handler is called when the user drops content into the `contenteditable` element. The event is already prevented by default, so you must define a value change to have any affect occur. ### `onKeyDown` `Function onKeyDown(event: Event, change: Change, editor: Editor) => Change || Void` @@ -91,7 +91,7 @@ This handler is called when any key is released in the `contenteditable` element ### `onPaste` `Function onPaste(event: Event, change: Change, editor: Editor) => Change || Void` -This handler is called when the user pastes content into the `contenteditable` element. The event is already prevented by default, so you must define a state change to have any affect occur. +This handler is called when the user pastes content into the `contenteditable` element. The event is already prevented by default, so you must define a value change to have any affect occur. ### `onSelect` `Function onSelect(event: Event, change: Change, editor: Editor) => Change || Void` @@ -112,17 +112,12 @@ _Note: This is **not** Slate's internal selection representation (although it mi ### `onChange` `Function onChange(change: Change) => Any || Void` -The `onChange` handler isn't a native browser event handler. Instead, it is invoked whenever the editor state changes. This allows plugins to augment a change however they want. +The `onChange` handler isn't a native browser event handler. Instead, it is invoked whenever the editor value changes. This allows plugins to augment a change however they want. -### `onBeforeChange` -`Function onBeforeChange(change: Change) => Change || Void` +### `renderEditor` +`Function renderEditor(props: Object, editor: Editor) => Object || Void` -The `onBeforeChange` handler isn't a native browser event handler. Instead, it is invoked whenever the editor receives a new state and before propagating a new change to `onChange`. - -### `render` -`Function render(props: Object, state: State, editor: Editor) => Object || Void` - -The `render` property allows you to define higher-order-component-like behavior. It is passed all of the properties of the editor, including `props.children`. You can then choose to wrap the existing `children` in any custom elements or proxy the properties however you choose. This can be useful for rendering toolbars, styling the editor, rendering validation, etc. Remember that the `render` function has to render `props.children` for editor's children to render. +The `renderEditor` property allows you to define higher-order-component-like behavior. It is passed all of the properties of the editor, including `props.children`. You can then choose to wrap the existing `children` in any custom elements or proxy the properties however you choose. This can be useful for rendering toolbars, styling the editor, rendering validation, etc. Remember that the `renderEditor` function has to render `props.children` for editor's children to render. ### `schema` `Object` diff --git a/docs/reference/slate-react/utils.md b/docs/reference/slate-react/utils.md index a3e2efdae..fe5369eb0 100644 --- a/docs/reference/slate-react/utils.md +++ b/docs/reference/slate-react/utils.md @@ -38,16 +38,16 @@ Find the DOM range from a Slate [`Range`](../slate/range.md). ```js function onChange(change) { - const { state } = change - const range = findDOMRange(state.selection) + const { value } = change + const range = findDOMRange(value.selection) // Do something with the DOM `range`... } ``` ### `findNode` -`findNode(element: DOMElement, state: State) => Node` +`findNode(element: DOMElement, value: Value) => Node` -Find the Slate node from a DOM `element` and Slate `state`. +Find the Slate node from a DOM `element` and Slate `value`. ```js function onSomeNativeEvent(event) { @@ -57,27 +57,27 @@ function onSomeNativeEvent(event) { ``` ### `findRange` -`findRange(selection: DOMSelection, state: State) => Range` -`findRange(range: DOMRange, state: State) => Range` +`findRange(selection: DOMSelection, value: Value) => Range` +`findRange(range: DOMRange, value: Value) => Range` -Find the Slate range from a DOM `range` or `selection` and a Slate `state`. +Find the Slate range from a DOM `range` or `selection` and a Slate `value`. ```js function onSomeNativeEvent() { // You can find a range from a native DOM selection... const nativeSelection = window.getSelection() - const range = findRange(nativeSelection, state) + const range = findRange(nativeSelection, value) // ...or from a native DOM range... const nativeRange = nativeSelection.getRangeAt(0) - const range = findRange(nativeRange, state) + const range = findRange(nativeRange, value) } ``` ### `getEventRange` -`getEventRange(event: DOMEvent|ReactEvent, state: State) => Range` +`getEventRange(event: DOMEvent|ReactEvent, value: Value) => Range` -Get the affected Slate range from a DOM `event` and Slate `state`. +Get the affected Slate range from a DOM `event` and Slate `value`. ```js function onDrop(event, change, editor) { @@ -89,7 +89,7 @@ function onDrop(event, change, editor) { ### `getEventTransfer` `getEventTransfer(event: DOMEvent|ReactEvent) => Object` -Get the Slate-related data from a DOM `event` and Slate `state`. +Get the Slate-related data from a DOM `event` and Slate `value`. ```js function onDrop(event, change, editor) { @@ -109,8 +109,8 @@ Sets the Slate-related `data` with `type` on an `event`. The `type` must be one ```js function onDragStart(event, change, editor) { - const { state } = change - const { startNode } = state + const { value } = change + const { startNode } = value setEventTransfer(event, 'node', startNode) } ``` diff --git a/docs/reference/slate-simulator/index.md b/docs/reference/slate-simulator/index.md index 3fdc4f2c6..958891e4d 100644 --- a/docs/reference/slate-simulator/index.md +++ b/docs/reference/slate-simulator/index.md @@ -13,9 +13,9 @@ A simulator to help writing tests for Slate editors and plugins. ```js import Simulator from 'slate-simulator' -const state = ... +const value = ... const plugins = [ ... ] -const simulator = new Simulator({ state, plugins }) +const simulator = new Simulator({ value, plugins }) simulator .focus() @@ -27,7 +27,7 @@ simulator .beforeInput({ data: '!' }) .keyDown({ key: 'Enter' }) -const nextState = simulator.state +const newValue = simulator.value ``` diff --git a/docs/reference/slate/change.md b/docs/reference/slate/change.md index 09fb93f48..8385cd008 100644 --- a/docs/reference/slate/change.md +++ b/docs/reference/slate/change.md @@ -5,16 +5,16 @@ import { Change } from 'slate' ``` -A change allows you to define a series of changes you'd like to make to the current [`State`](./state.md). +A change allows you to define a series of changes you'd like to make to the current [`Value`](./value.md). All changes are performed through `Change` objects, so that a history of changes can be preserved for use in undo/redo operations, and to make collaborative editing possible. ## Properties -### `state` +### `value` -A [`State`](./state.md) with the change's current operations applied. Each time you run a new change function this property will be updated. +A [`Value`](./value.md) with the change's current operations applied. Each time you run a new change function this property will be updated. ## Methods @@ -46,7 +46,7 @@ function onSomeEvent(event, change) { ``` -## Current State Changes +## Current Value Changes These changes act on the `document` based on the current `selection`. They are equivalent to calling the [Document Changes](#document-changes) with the current selection as the `range` argument, but they are there for convenience, since you often want to act with the current selection, as a user would. diff --git a/docs/reference/slate/document.md b/docs/reference/slate/document.md index aea2276d0..5a00aca06 100644 --- a/docs/reference/slate/document.md +++ b/docs/reference/slate/document.md @@ -9,7 +9,7 @@ The top-level node in Slate's document model. Documents are made up of block nodes, inline nodes, and text nodes—just like in the DOM. Note that direct descendants of a document node have to be block nodes. -In some places, you'll see mention of "fragments", which are also `Document` objects, just that aren't attached to the main `State`. For example, when cutting-and-pasting a selection of content, that content will be referred to as a document "fragment". +In some places, you'll see mention of "fragments", which are also `Document` objects, just that aren't attached to the main `Value`. For example, when cutting-and-pasting a selection of content, that content will be referred to as a document "fragment". ## Properties diff --git a/docs/reference/slate/operation.md b/docs/reference/slate/operation.md index 48bfad211..6c0631f17 100644 --- a/docs/reference/slate/operation.md +++ b/docs/reference/slate/operation.md @@ -1,9 +1,9 @@ # Operation -An operation is the lowest-level description of a specific change to a part of Slate's state. They are designed to be collaborative-editing friendly. +An operation is the lowest-level description of a specific change to a part of Slate's value. They are designed to be collaborative-editing friendly. -All of the [`Change`](./change.md) methods result in operations being created and applied to a [`State`](./state.md) They're accessible via the `change.operations` property. +All of the [`Change`](./change.md) methods result in operations being created and applied to a [`Value`](./value.md) They're accessible via the `change.operations` property. There are a handful of Slate operation types. The goal is to have the fewest possible types, while still maintaining the necessary semantics for collaborative editing to work. @@ -160,7 +160,7 @@ Set new `properties` on the node at `path`. Split the node at `path` at `position`. The `position` refers to either the index in the child nodes in the case of [`Block`](./block.md) or [`Inline`](./inline.md) nodes, and the index in the characters in the case of [`Text`](./text.md) nodes. In the case of nested splits, `target` refers to the target path of the child split operation. -## State Operations +## Value Operations ### `set_selection` @@ -172,27 +172,27 @@ Split the node at `path` at `position`. The `position` refers to either the inde } ``` -Set new `properties` on the state's selection. +Set new `properties` on the selection. -### `set_state` +### `set_value` ```js { - type: 'set_state', + type: 'set_value', properties: Object, - state: Object, + value: Object, } ``` -Set new `properties` on a state. Properties can contain `data` and `decorations`. +Set new `properties` on a value. Properties can contain `data` and `decorations`. ## Helpers ### `apply` -`apply(state: State, operation: Object) => State` +`apply(value: Value, operation: Object) => Value` -Applies an `operation` to a `state` object. +Applies an `operation` to a `value` object. ### `invert` `invert(operation: Object) => Object` diff --git a/docs/reference/slate/state.md b/docs/reference/slate/value.md similarity index 76% rename from docs/reference/slate/state.md rename to docs/reference/slate/value.md index 096937fdd..40cd231cf 100644 --- a/docs/reference/slate/state.md +++ b/docs/reference/slate/value.md @@ -1,21 +1,21 @@ -# `State` +# `Value` ```js -import { State } from 'slate' +import { Value } from 'slate' ``` -A `State` is the top-level representation of data in Slate, containing both a [`Document`](./document.md) and a selection [`Range`](./range.md). It's what you need to pass into the Slate [``](../slate-react/editor.md) to render something onto the page. +A `Value` is the top-level representation of data in Slate, containing both a [`Document`](./document.md) and a selection [`Range`](./range.md). It's what you need to pass into the Slate [``](../slate-react/editor.md) to render something onto the page. -All changes to the document and selection are also performed through the state object, so that they can stay in sync, and be propagated to its internal history of undo/redo state. +All changes to the document and selection are also performed through the value object, so that they can stay in sync, and be propagated to its internal history of undo/redo value. -For convenience, in addition to changes, many of the selection and document properties are exposed as proxies on the `State` object. +For convenience, in addition to changes, many of the selection and document properties are exposed as proxies on the `Value` object. ## Properties ```js -State({ +Value({ document: Document, selection: Range, history: History, @@ -28,7 +28,7 @@ State({ ### `data` `Data` -An object containing arbitrary data for the state. +An object containing arbitrary data for the value. ### `decorations` `List|Null` @@ -38,7 +38,7 @@ A list of ranges in the document with marks that aren't part of the content itse ### `document` `Document` -The current document of the state. +The current document of the value. ### `history` `History` @@ -48,17 +48,17 @@ An object that stores the history of changes. ### `schema` `Schema` -An object representing the schema of the state's document. +An object representing the schema of the value's document. ### `selection` `Range` -The current selection of the state. +The current selection of the value. ## Computed Properties -These properties aren't supplied when creating a `State`, but are instead computed based on the current `document` and `selection`. +These properties aren't supplied when creating a `Value`, but are instead computed based on the current `document` and `selection`. ### `{edge}Text` `Text` @@ -167,20 +167,20 @@ Whether the current selection is empty. ## Static Methods -### `State.create` -`State.create(properties: Object) => State` +### `Value.create` +`Value.create(properties: Object) => Value` -Create a new `State` instance with `properties`. +Create a new `Value` instance with `properties`. -### `State.fromJSON` -`State.fromJSON(object: Object) => State` +### `Value.fromJSON` +`Value.fromJSON(object: Object) => Value` -Create a state from a JSON `object`. +Create a value from a JSON `object`. -### `State.isState` -`State.isState(maybeState: Any) => Boolean` +### `Value.isValue` +`Value.isValue(any: Any) => Boolean` -Returns a boolean if the passed in argument is a `State`. +Returns a boolean if the passed in argument is a `Value`. ## Instance Methods @@ -188,9 +188,9 @@ Returns a boolean if the passed in argument is a `State`. ### `change` `change() => Change` -Create a new [`Change`](./change.md) that acts on the current state. +Create a new [`Change`](./change.md) that acts on the current value. ### `toJSON` `toJSON() => Object` -Returns a JSON representation of the state. +Returns a JSON representation of the value. diff --git a/docs/walkthroughs/adding-event-handlers.md b/docs/walkthroughs/adding-event-handlers.md index 94848e5ec..2f47e2d7a 100644 --- a/docs/walkthroughs/adding-event-handlers.md +++ b/docs/walkthroughs/adding-event-handlers.md @@ -7,7 +7,7 @@ Okay, so you've got Slate installed and rendered on the page, and when you type in it, you can see the changes reflected. But you want to do more than just type a plaintext string. -What makes Slate great is how easy it is to customize. Just like other React components you're used to, Slate allows you to pass in handlers that are triggered on certain events. You've already seen on the `onChange` handler can be used to store the changed editor state, but let's try add something more... +What makes Slate great is how easy it is to customize. Just like other React components you're used to, Slate allows you to pass in handlers that are triggered on certain events. You've already seen on the `onChange` handler can be used to store the changed editor value, but let's try add something more... We'll show you how to use the `onKeyDown` handler to change the editor's content when the user presses a button. @@ -17,17 +17,17 @@ So we start with our app from earlier: class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } render() { return ( ) @@ -42,11 +42,11 @@ And now we'll add an `onKeyDown` handler: class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } // Define a new handler which prints the key that was pressed. @@ -57,7 +57,7 @@ class App extends React.Component { render() { return ( @@ -77,11 +77,11 @@ Our `onKeyDown` handler might look like this: class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -91,7 +91,7 @@ class App extends React.Component { // Prevent the ampersand character from being inserted. event.preventDefault() - // Change the state by inserting "and" at the cursor's position. + // Change the value by inserting "and" at the cursor's position. change.insertText('and') return true } @@ -99,7 +99,7 @@ class App extends React.Component { render() { return ( @@ -111,7 +111,7 @@ class App extends React.Component { With that added, try typing `&`, and you should see it automatically become `and` instead! -That gives you a sense for what you can do with Slate's event handlers. Each one will be called with the `event` object, and the current `state` of the editor. And if you return a new `state`, the editor will be updated. Simple! +That gives you a sense for what you can do with Slate's event handlers. Each one will be called with the `event` object, and a `change` object that lets you perform changes to the editor's value. Simple!

Next:
Defining Custom Block Nodes

diff --git a/docs/walkthroughs/applying-custom-formatting.md b/docs/walkthroughs/applying-custom-formatting.md index a47a38c61..79044b896 100644 --- a/docs/walkthroughs/applying-custom-formatting.md +++ b/docs/walkthroughs/applying-custom-formatting.md @@ -15,17 +15,17 @@ So we start with our app from earlier: class App extends React.Component { state = { - state: initialState, + value: initialValue, } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { if (event.key != '`' || !event.metaKey) return event.preventDefault() - const isCode = change.state.blocks.some(block => block.type == 'code') + const isCode = change.value.blocks.some(block => block.type == 'code') change.setBlock(isCode ? 'paragraph' : 'code') return true @@ -34,7 +34,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -77,7 +77,7 @@ class App extends React.Component { } // When "`" is pressed, keep our existing code block logic. case '`': { - const isCode = change.state.blocks.some(block => block.type == 'code') + const isCode = change.value.blocks.some(block => block.type == 'code') event.preventDefault() change.setBlock(isCode ? 'paragraph' : 'code') return true @@ -88,7 +88,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -145,9 +145,9 @@ class App extends React.Component { return true } case '`': { - const isCode = change.state.blocks.some(block => block.type == 'code') + const isCode = change.value.blocks.some(block => block.type == 'code') event.preventDefault() - state.setBlock(isCode ? 'paragraph' : 'code') + value.setBlock(isCode ? 'paragraph' : 'code') return true } } @@ -156,7 +156,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -32,7 +32,7 @@ class App extends React.Component { render() { return ( @@ -71,11 +71,11 @@ function CodeNode(props) { class App extends React.Component { state = { - state: initialState, + value: initialValue, } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -89,7 +89,7 @@ class App extends React.Component { return ( // Pass in the `renderNode` prop... { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -139,7 +139,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -181,7 +181,7 @@ class App extends React.Component { event.preventDefault() // Determine whether any of the currently selected blocks are code blocks. - const isCode = change.state.blocks.some(block => block.type == 'code') + const isCode = change.value.blocks.some(block => block.type == 'code') // Toggle the block type depending on `isCode`. change.setBlock(isCode ? 'paragraph' : 'code') @@ -191,7 +191,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + // On change, update the app's React state with the new editor value. + onChange = ({ value }) => { + this.setState({ value }) } // Render the editor. render() { return ( ) @@ -109,7 +109,7 @@ class App extends React.Component { } ``` -You'll notice that the `onChange` handler passed into the `Editor` component just updates the app's state with the newest changed state. That way, when it re-renders the editor, the new state is reflected with your changes. +You'll notice that the `onChange` handler passed into the `Editor` component just updates the app's state with the newest changed value. That way, when it re-renders the editor, the new value is reflected with your changes. And that's it! diff --git a/docs/walkthroughs/saving-and-loading-html-content.md b/docs/walkthroughs/saving-and-loading-html-content.md index d93f5e69f..476ddccfa 100644 --- a/docs/walkthroughs/saving-and-loading-html-content.md +++ b/docs/walkthroughs/saving-and-loading-html-content.md @@ -15,17 +15,17 @@ import { Editor } from 'slate-react' class App extends React.Component { state = { - state: Plain.deserialize('') + value: Plain.deserialize('') } - onChange({ state }) { - this.setState({ state }) + onChange({ value }) { + this.setState({ value }) } render() { return ( ) @@ -209,8 +209,8 @@ const html = new Html({ rules }) And finally, now that we have our serializer initialized, we can update our app to use it to save and load content, like so: ```js -// Load the initial state from Local Storage or a default. -const initialState = ( +// Load the initial value from Local Storage or a default. +const initialValue = ( localStorage.getItem('content') || '

' ) @@ -218,23 +218,23 @@ const initialState = ( class App extends React.Component { state = { - state: html.deserialize(initialState), + value: html.deserialize(initialValue), } - onChange = ({ state }) => { + onChange = ({ value }) => { // When the document changes, save the serialized HTML to Local Storage. - if (state.document != this.state.state.document) { - const string = html.serialize(state) + if (value.document != this.state.value.document) { + const string = html.serialize(value) localStorage.setItem('content', string) } - this.setState({ state }) + this.setState({ value }) } render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } render() { return ( ) @@ -58,14 +58,14 @@ class App extends React.Component { } ``` -That will render a basic Slate editor on your page, and when you type things will change. But if you refresh the page, everything will be reverted back to its original state—nothing saves! +That will render a basic Slate editor on your page, and when you type things will change. But if you refresh the page, everything will be reverted back to its original value—nothing saves! What we need to do is save the changes you make somewhere. For this example, we'll just be using [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), but it will give you an idea for where you'd need to add your own database hooks. -So, in our `onChange` handler, we need to save the `state`. But the `state` argument that `onChange` receives is an immutable object, so we can't just save it as-is. We need to serialize it to a format we understand first, like JSON! +So, in our `onChange` handler, we need to save the `value`. But the `value` argument that `onChange` receives is an immutable object, so we can't just save it as-is. We need to serialize it to a format we understand first, like JSON! ```js -const initialState = State.fromJSON({ +const initialValue = Value.fromJSON({ document: { nodes: [ { @@ -89,21 +89,21 @@ const initialState = State.fromJSON({ class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - // Save the state to Local Storage. - const content = JSON.stringify(state.toJSON()) + onChange = ({ value }) => { + // Save the value to Local Storage. + const content = JSON.stringify(value.toJSON()) localStorage.setItem('content', content) - this.setState({ state }) + this.setState({ value }) } render() { return ( ) @@ -114,12 +114,12 @@ class App extends React.Component { Now whenever you edit the page, if you look in Local Storage, you should see the `content` value changing. -But... if you refresh the page, everything is still reset. That's because we need to make sure the initial state is pulled from that same Local Storage location, like so: +But... if you refresh the page, everything is still reset. That's because we need to make sure the initial value is pulled from that same Local Storage location, like so: ```js // Update the initial content to be pulled from Local Storage if it exists. -const existingState = JSON.parse(localStorage.getItem('content')) -const initialState = State.fromJSON(existingState || { +const existingValue = JSON.parse(localStorage.getItem('content')) +const initialValue = Value.fromJSON(existingValue || { document: { nodes: [ { @@ -143,20 +143,20 @@ const initialState = State.fromJSON(existingState || { class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - const content = JSON.stringify(state.toJSON()) + onChange = ({ value }) => { + const content = JSON.stringify(value.toJSON()) localStorage.setItem('content', content) - this.setState({ state }) + this.setState({ value }) } render() { return ( ) @@ -170,8 +170,8 @@ Now you should be able to save changes across refreshes! However, if you inspect the change handler, you'll notice that it's actually saving the Local Storage value on _every_ change to the editor, even when only the selection changes! This is because `onChange` is called for _every_ change. For Local Storage this doesn't really matter, but if you're saving things to a database via HTTP request this would result in a lot of unnecessary requests. You can fix this by checking against the previous `document` value. ```js -const existingState = JSON.parse(localStorage.getItem('content')) -const initialState = State.fromJSON(existingState || { +const existingValue = JSON.parse(localStorage.getItem('content')) +const initialValue = Value.fromJSON(existingValue || { document: { nodes: [ { @@ -195,23 +195,23 @@ const initialState = State.fromJSON(existingState || { class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { + onChange = ({ value }) => { // Check to see if the document has changed before saving. - if (state.document != this.state.state.document) { - const content = JSON.stringify(state.toJSON()) + if (value.document != this.state.value.document) { + const content = JSON.stringify(value.toJSON()) localStorage.setItem('content', content) } - this.setState({ state }) + this.setState({ value }) } render() { return ( ) @@ -224,35 +224,35 @@ Now you're content will be saved only when the content itself changes! Success—you've got JSON in your database. -But what if you want something other than JSON? Well, you'd need to serialize your state differently. For example, if you want to save your content as plain text instead of JSON, you can use the `Plain` serializer that ships with Slate, like so: +But what if you want something other than JSON? Well, you'd need to serialize your value differently. For example, if you want to save your content as plain text instead of JSON, you can use the `Plain` serializer that ships with Slate, like so: ```js // Switch to using the Plain serializer. import { Editor } from 'slate-react' import Plain from 'slate-plain-serializer' -const existingState = localStorage.getItem('content') -const initialState = Plain.deserialize(existingState || 'A string of plain text.') +const existingValue = localStorage.getItem('content') +const initialValue = Plain.deserialize(existingValue || 'A string of plain text.') class App extends React.Component { state = { - state: initialState + value: initialValue } - onChange = ({ state }) => { - if (state.document != this.state.state.document) { - const content = Plain.serialize(state) + onChange = ({ value }) => { + if (value.document != this.state.value.document) { + const content = Plain.serialize(value) localStorage.setItem('content', content) } - this.setState({ state }) + this.setState({ value }) } render() { return ( ) diff --git a/docs/walkthroughs/using-plugins.md b/docs/walkthroughs/using-plugins.md index 8dc5d0abb..e30213106 100644 --- a/docs/walkthroughs/using-plugins.md +++ b/docs/walkthroughs/using-plugins.md @@ -17,11 +17,11 @@ Starting with our app from earlier: class App extends React.Component { state = { - state: initialState, + value: initialValue, } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } onKeyDown = (event, change) => { @@ -34,7 +34,7 @@ class App extends React.Component { render() { return ( { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } render() { @@ -118,7 +118,7 @@ class App extends React.Component { // Add the `plugins` property to the editor, and remove `onKeyDown`. @@ -151,18 +151,18 @@ const plugins = [ class App extends React.Component { state = { - state: initialState, + value: initialValue, } - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } render() { return ( diff --git a/examples/check-lists/index.js b/examples/check-lists/index.js index fa8e16721..348ad2dcc 100644 --- a/examples/check-lists/index.js +++ b/examples/check-lists/index.js @@ -1,9 +1,9 @@ import { Editor } from 'slate-react' -import { State } from 'slate' +import { Value } from 'slate' import React from 'react' -import initialState from './state.json' +import initialValue from './value.json' /** * Check list item. @@ -66,23 +66,23 @@ class CheckListItem extends React.Component { class CheckLists extends React.Component { /** - * Deserialize the initial editor state. + * Deserialize the initial editor value. * * @type {Object} */ state = { - state: State.fromJSON(initialState) + value: Value.fromJSON(initialValue) } /** - * On change, save the new state. + * On change, save the new value. * * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -96,15 +96,15 @@ class CheckLists extends React.Component { * * @param {Event} event * @param {Change} change - * @return {State|Void} + * @return {Value|Void} */ onKeyDown = (event, change) => { - const { state } = change + const { value } = change if ( event.key == 'Enter' && - state.startBlock.type == 'check-list-item' + value.startBlock.type == 'check-list-item' ) { change.splitBlock().setBlock({ data: { checked: false }}) return true @@ -112,9 +112,9 @@ class CheckLists extends React.Component { if ( event.key == 'Backspace' && - state.isCollapsed && - state.startBlock.type == 'check-list-item' && - state.selection.startOffset == 0 + value.isCollapsed && + value.startBlock.type == 'check-list-item' && + value.selection.startOffset == 0 ) { change.setBlock('paragraph') return true @@ -134,7 +134,7 @@ class CheckLists extends React.Component { { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -83,11 +83,11 @@ class CodeHighlighting extends React.Component { */ onKeyDown = (event, change) => { - const { state } = change - const { startBlock } = state + const { value } = change + const { startBlock } = value if (event.key != 'Enter') return if (startBlock.type != 'code') return - if (state.isExpanded) change.delete() + if (value.isExpanded) change.delete() change.insertText('\n') return true } @@ -103,7 +103,7 @@ class CodeHighlighting extends React.Component {
{ - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -45,7 +45,7 @@ class Embeds extends React.Component {
diff --git a/examples/embeds/state.json b/examples/embeds/value.json similarity index 100% rename from examples/embeds/state.json rename to examples/embeds/value.json diff --git a/examples/emojis/index.js b/examples/emojis/index.js index b6e6d39de..fb16efbc5 100644 --- a/examples/emojis/index.js +++ b/examples/emojis/index.js @@ -1,9 +1,9 @@ import { Editor } from 'slate-react' -import { State } from 'slate' +import { Value } from 'slate' import React from 'react' -import initialState from './state.json' +import initialValue from './value.json' /** * Emojis. @@ -26,13 +26,13 @@ const EMOJIS = [ class Emojis extends React.Component { /** - * Deserialize the raw initial state. + * Deserialize the raw initial value. * * @type {Object} */ state = { - state: State.fromJSON(initialState) + value: Value.fromJSON(initialValue) } /** @@ -41,8 +41,8 @@ class Emojis extends React.Component { * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -53,8 +53,8 @@ class Emojis extends React.Component { onClickEmoji = (e, code) => { e.preventDefault() - const { state } = this.state - const change = state.change() + const { value } = this.state + const change = value.change() change.insertInline({ type: 'emoji', @@ -112,7 +112,7 @@ class Emojis extends React.Component {
diff --git a/examples/emojis/state.json b/examples/emojis/value.json similarity index 100% rename from examples/emojis/state.json rename to examples/emojis/value.json diff --git a/examples/forced-layout/index.js b/examples/forced-layout/index.js index 198c541ca..37d1d9bb9 100644 --- a/examples/forced-layout/index.js +++ b/examples/forced-layout/index.js @@ -1,9 +1,9 @@ import { Editor } from 'slate-react' -import { Block, State } from 'slate' +import { Block, Value } from 'slate' import React from 'react' -import initialState from './state.json' +import initialValue from './value.json' /** * A simple schema to enforce the nodes in the Slate document. @@ -40,13 +40,13 @@ const schema = { class ForcedLayout extends React.Component { /** - * Deserialize the initial editor state. + * Deserialize the initial editor value. * * @type {Object} */ state = { - state: State.fromJSON(initialState), + value: Value.fromJSON(initialValue), } /** @@ -55,8 +55,8 @@ class ForcedLayout extends React.Component { * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -70,7 +70,7 @@ class ForcedLayout extends React.Component {
mark.type == type) + const { value } = this.props + return value.activeMarks.some(mark => mark.type == type) } /** @@ -36,9 +36,9 @@ class Menu extends React.Component { */ onClickMark(event, type) { - const { state, onChange } = this.props + const { value, onChange } = this.props event.preventDefault() - const change = state.change().toggleMark(type) + const change = value.change().toggleMark(type) onChange(change) } @@ -93,13 +93,13 @@ class Menu extends React.Component { class HoveringMenu extends React.Component { /** - * Deserialize the raw initial state. + * Deserialize the raw initial value. * * @type {Object} */ state = { - state: State.fromJSON(initialState) + value: Value.fromJSON(initialValue) } /** @@ -119,11 +119,11 @@ class HoveringMenu extends React.Component { */ updateMenu = () => { - const { state } = this.state + const { value } = this.state const menu = this.menu if (!menu) return - if (state.isBlurred || state.isEmpty) { + if (value.isBlurred || value.isEmpty) { menu.removeAttribute('style') return } @@ -142,8 +142,8 @@ class HoveringMenu extends React.Component { * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -167,13 +167,13 @@ class HoveringMenu extends React.Component {
diff --git a/examples/hovering-menu/state.json b/examples/hovering-menu/value.json similarity index 100% rename from examples/hovering-menu/state.json rename to examples/hovering-menu/value.json diff --git a/examples/huge-document/index.js b/examples/huge-document/index.js index 458bb8da1..76739208c 100644 --- a/examples/huge-document/index.js +++ b/examples/huge-document/index.js @@ -1,7 +1,7 @@ /* eslint-disable no-console */ import { Editor } from 'slate-react' -import { State } from 'slate' +import { Value } from 'slate' import React from 'react' import faker from 'faker' @@ -44,7 +44,7 @@ for (let h = 0; h < HEADINGS; h++) { class HugeDocument extends React.Component { /** - * Deserialize the initial editor state. + * Deserialize the initial editor value. * * @type {Object} */ @@ -52,7 +52,7 @@ class HugeDocument extends React.Component { constructor() { super() console.time('deserializeHugeDocument') - this.state = { state: State.fromJSON(json, { normalize: false }) } + this.state = { value: Value.fromJSON(json, { normalize: false }) } console.timeEnd('deserializeHugeDocument') } @@ -62,8 +62,8 @@ class HugeDocument extends React.Component { * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -78,7 +78,7 @@ class HugeDocument extends React.Component { { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -158,7 +158,7 @@ class Images extends React.Component { const src = window.prompt('Enter the URL of the image:') if (!src) return - const change = this.state.state + const change = this.state.value .change() .call(insertImage, src) diff --git a/examples/images/state.json b/examples/images/value.json similarity index 100% rename from examples/images/state.json rename to examples/images/value.json diff --git a/examples/links/index.js b/examples/links/index.js index 1dc322196..8a05cad9e 100644 --- a/examples/links/index.js +++ b/examples/links/index.js @@ -1,9 +1,9 @@ import { Editor, getEventTransfer } from 'slate-react' -import { State } from 'slate' +import { Value } from 'slate' import React from 'react' -import initialState from './state.json' +import initialValue from './value.json' import isUrl from 'is-url' /** @@ -41,13 +41,13 @@ function unwrapLink(change) { class Links extends React.Component { /** - * Deserialize the raw initial state. + * Deserialize the raw initial value. * * @type {Object} */ state = { - state: State.fromJSON(initialState) + value: Value.fromJSON(initialValue) } /** @@ -57,8 +57,8 @@ class Links extends React.Component { */ hasLinks = () => { - const { state } = this.state - return state.inlines.some(inline => inline.type == 'link') + const { value } = this.state + return value.inlines.some(inline => inline.type == 'link') } /** @@ -67,8 +67,8 @@ class Links extends React.Component { * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -80,15 +80,15 @@ class Links extends React.Component { onClickLink = (event) => { event.preventDefault() - const { state } = this.state + const { value } = this.state const hasLinks = this.hasLinks() - const change = state.change() + const change = value.change() if (hasLinks) { change.call(unwrapLink) } - else if (state.isExpanded) { + else if (value.isExpanded) { const href = window.prompt('Enter the URL of the link:') change.call(wrapLink, href) } @@ -113,7 +113,7 @@ class Links extends React.Component { */ onPaste = (event, change) => { - if (change.state.isCollapsed) return + if (change.value.isCollapsed) return const transfer = getEventTransfer(event) const { type, text } = transfer @@ -171,7 +171,7 @@ class Links extends React.Component {
{ - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -52,7 +52,7 @@ class MarkdownPreview extends React.Component {
{ - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -119,15 +119,14 @@ class MarkdownShortcuts extends React.Component { * node into the shortcut's corresponding type. * * @param {Event} event - * @param {State} change - * @return {State or Null} state + * @param {Change} change */ onSpace = (event, change) => { - const { state } = change - if (state.isExpanded) return + const { value } = change + if (value.isExpanded) return - const { startBlock, startOffset } = state + const { startBlock, startOffset } = value const chars = startBlock.text.slice(0, startOffset).replace(/\s*/g, '') const type = this.getType(chars) @@ -150,16 +149,15 @@ class MarkdownShortcuts extends React.Component { * paragraph node. * * @param {Event} event - * @param {State} change - * @return {State or Null} state + * @param {Change} change */ onBackspace = (event, change) => { - const { state } = change - if (state.isExpanded) return - if (state.startOffset != 0) return + const { value } = change + if (value.isExpanded) return + if (value.startOffset != 0) return - const { startBlock } = state + const { startBlock } = value if (startBlock.type == 'paragraph') return event.preventDefault() @@ -177,15 +175,14 @@ class MarkdownShortcuts extends React.Component { * create a new paragraph below it. * * @param {Event} event - * @param {State} change - * @return {State or Null} state + * @param {Change} change */ onEnter = (event, change) => { - const { state } = change - if (state.isExpanded) return + const { value } = change + if (value.isExpanded) return - const { startBlock, startOffset, endOffset } = state + const { startBlock, startOffset, endOffset } = value if (startOffset == 0 && startBlock.text.length == 0) return this.onBackspace(event, change) if (endOffset != startBlock.text.length) return diff --git a/examples/markdown-shortcuts/state.json b/examples/markdown-shortcuts/value.json similarity index 100% rename from examples/markdown-shortcuts/state.json rename to examples/markdown-shortcuts/value.json diff --git a/examples/paste-html/index.js b/examples/paste-html/index.js index f846e99b9..2317b0700 100644 --- a/examples/paste-html/index.js +++ b/examples/paste-html/index.js @@ -1,10 +1,10 @@ import Html from 'slate-html-serializer' import { Editor, getEventTransfer } from 'slate-react' -import { State } from 'slate' +import { Value } from 'slate' import React from 'react' -import initialState from './state.json' +import initialValue from './value.json' /** * Tags to blocks. @@ -119,23 +119,23 @@ const serializer = new Html({ rules: RULES }) class PasteHtml extends React.Component { /** - * Deserialize the raw initial state. + * Deserialize the raw initial value. * * @type {Object} */ state = { - state: State.fromJSON(initialState) + value: Value.fromJSON(initialValue) } /** - * On change, save the new state. + * On change, save the new value. * * @param {Change} change */ - onChange = ({ state }) => { - this.setState({ state }) + onChange = ({ value }) => { + this.setState({ value }) } /** @@ -164,7 +164,7 @@ class PasteHtml extends React.Component {
!') + value: Plain.deserialize('This is editable plain text, just like a