mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-19 21:51:51 +02:00
Code Issues Releases Wiki Activity

Rename "state" to "value" everywhere (#1313)

Browse Source 
* rename state to value in slate core, as deprecation

* rename all references to state to value in slate core

* migrate slate-base64-serializer

* migrate slate-html-serializer

* migrate slate-hyperscript

* migrate slate-plain-serializer

* migrate slate-prop-types

* migrate slate-simulator

* fix change.setState compat

* deprecate references to state in slate-react

* remove all references to state in slate-react

* remove `value` and `schema` from props to all components

* fix default renderPlaceholder

* fix tests

* update examples

* update walkthroughs

* update guides

* update reference
This commit is contained in:
Ian Storm Taylor
2017-10-27 13:39:06 -07:00
committed by GitHub
parent 44addc8140
commit adb2678732
576 changed files with 3672 additions and 3718 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/Readme.md
View File

@@ -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)

22
docs/guides/changes.md
View File

@@ -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

8
docs/guides/data-model.md
View File

@@ -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)!

2
docs/guides/plugins.md
View File

@@ -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()
}
}

12
docs/reference/slate-html-serializer/index.md
View File

@@ -49,16 +49,16 @@ This parse function should return the `<body>` 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:

12
docs/reference/slate-hyperscript/index.md
View File

@@ -16,15 +16,15 @@ A hyperscript helper for writing Slate documents with JSX!
import h from 'slate-hyperscript'
const state = (
<state>
const value = (
<value>
<document>
<block type="paragraph">
A string of <mark type="bold">bold</mark> in a <inline type="link" data={{ src: 'http://slatejs.org' }}>Slate</inline> editor!
</block>
<block type="image" data={{ src: 'https://...' }} isVoid />
</document>
</state>
</value>
)
```
@@ -49,15 +49,15 @@ const h = createHyperscript({
},
})
const state = (
<state>
const value = (
<value>
<document>
<paragraph>
A string of <b>bold</b> in a <link src="http://slatejs.org">Slate</link> editor!
</paragraph>
<image src="https://..." />
</document>
</state>
</value>
)
```

12
docs/reference/slate-plain-serializer/index.md
View File

@@ -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.

10
docs/reference/slate-prop-types/index.md
View File

@@ -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`.

8
docs/reference/slate-react/core-plugins.md
View File

@@ -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.

12
docs/reference/slate-react/custom-nodes.md
View File

@@ -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>`](./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>`](./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:

63
docs/reference/slate-react/editor.md
View File

@@ -8,7 +8,7 @@ import { Editor } from 'slate-react'
The top-level React component that renders the Slate editor itself.
## Properties
## Props
```js
<Editor
@@ -20,7 +20,7 @@ The top-level React component that renders the Slate editor itself.
readOnly={Boolean}
role={String}
spellCheck={Boolean}
state={State}
value={Value}
style={Object}
tabIndex={Number}
/>
@@ -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
<Editor
placeholder={String || Element}
placeholderClassName={String}
placeholderStyle={Object}
/>
```
@@ -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 = [
<Editor
onKeyDown={myKeyHandler}
plugins={plugins}
state={state}
value={value}
/>
```
@@ -139,7 +127,7 @@ const plugins = [
<Editor
plugins={plugins}
state={state}
value={value}
/>
```
@@ -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.

19
docs/reference/slate-react/plugins.md
View File

@@ -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`

28
docs/reference/slate-react/utils.md
View File

@@ -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)
}
```

6
docs/reference/slate-simulator/index.md
View File

@@ -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
```

8
docs/reference/slate/change.md
View File

@@ -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.

2
docs/reference/slate/document.md
View File

@@ -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

20
docs/reference/slate/operation.md
View File

@@ -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`

44
docs/reference/slate/state.md → docs/reference/slate/value.md
View File

@@ -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 [`<Editor>`](../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 [`<Editor>`](../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<Ranges>|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.

30
docs/walkthroughs/adding-event-handlers.md
View File

@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
@@ -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!
<br/>
<p align="center"><strong>Next:</strong><br/><a href="./defining-custom-block-nodes.md">Defining Custom Block Nodes</a></p>

32
docs/walkthroughs/applying-custom-formatting.md
View File

@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
@@ -57,11 +57,11 @@ And now, we'll edit the `onKeyDown` handler to make it so that when you press `
class App extends React.Component {
state = {
state: initialState,
value: initialValue,
}
onChange = ({ state }) => {
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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
@@ -128,11 +128,11 @@ function BoldMark(props) {
class App extends React.Component {
state = {
state: initialState,
value: initialValue,
}
onChange = ({ state }) => {
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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

34
docs/walkthroughs/defining-custom-block-nodes.md
View File

@@ -15,11 +15,11 @@ We'll show you how. Let's 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) => {
@@ -32,7 +32,7 @@ class App extends React.Component {
render() {
return (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
/>
@@ -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...
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
@@ -117,11 +117,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) => {
@@ -139,7 +139,7 @@ class App extends React.Component {
render() {
return (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
@@ -168,11 +168,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) => {
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

30
docs/walkthroughs/installing-slate.md
View File

@@ -24,15 +24,15 @@ Slate exposes a set of modules that you'll use to build your editor. The most im
import { Editor } from 'slate-react'
```
In addition to rendering the editor, you need to give Slate a "initial state" to render as content. We'll use the `State` model that ships with Slate to create a new initial state that just contains a single paragraph block with some text in it:
In addition to rendering the editor, you need to give Slate a "initial value" to render as content. We'll use the `Value` model that ships with Slate to create a new initial value that just contains a single paragraph block with some text in it:
```js
// Import the `State` model.
// Import the `Value` model.
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
// Create our initial state...
const initialState = State.fromJSON({
// Create our initial value...
const initialValue = Value.fromJSON({
document: {
nodes: [
{
@@ -54,15 +54,15 @@ const initialState = State.fromJSON({
})
```
And now that we've our initial state, we define our `App` and pass it into Slate's `Editor` component, like so:
And now that we've our initial value, we define our `App` and pass it into Slate's `Editor` component, like so:
```js
// Import React!
import React from 'react'
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
const initialState = State.fromJSON({
const initialValue = Value.fromJSON({
document: {
nodes: [
{
@@ -86,21 +86,21 @@ const initialState = State.fromJSON({
// Define our app...
class App extends React.Component {
// Set the initial state when the app is first constructed.
// Set the initial value when the app is first constructed.
state = {
state: initialState
value: initialValue
}
// On change, update the app's React state with the new editor state.
onChange = ({ state }) => {
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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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!

24
docs/walkthroughs/saving-and-loading-html-content.md
View File

@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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') ||
'<p></p>'
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
// Add the ability to render our nodes and marks...
renderNode={this.renderNode}

80
docs/walkthroughs/saving-to-a-database.md
View File

@@ -13,9 +13,9 @@ Let's start with a basic editor:
```js
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
const initialState = State.fromJSON({
const initialValue = Value.fromJSON({
document: {
nodes: [
{
@@ -39,17 +39,17 @@ const initialState = State.fromJSON({
class App extends React.Component {
state = {
state: initialState
value: initialValue
}
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
render() {
return (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)
@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
)

24
docs/walkthroughs/using-plugins.md
View File

@@ -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 (
<Editor
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderMark={this.renderMark}
@@ -106,11 +106,11 @@ const plugins = [
class App extends React.Component {
state = {
state: initialState,
value: initialValue,
}
onChange = ({ state }) => {
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`.
<Editor
plugins={plugins}
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderMark={this.renderMark}
/>
@@ -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 (
<Editor
plugins={plugins}
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderMark={this.renderMark}
/>

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

@@ -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 {
<Editor
spellCheck
placeholder="Get to work..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

0
examples/check-lists/state.json → examples/check-lists/value.json
View File

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

@@ -1,10 +1,10 @@
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
import Prism from 'prismjs'
import React from 'react'
import initialState from './state.json'
import initialValue from './value.json'
/**
* Define our code components.
@@ -55,23 +55,23 @@ function CodeBlockLine(props) {
class CodeHighlighting 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 })
}
/**
@@ -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 {
<div className="editor">
<Editor
placeholder="Write some code..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

0
examples/code-highlighting/state.json → examples/code-highlighting/value.json
View File

14
examples/embeds/index.js
View File

@@ -1,10 +1,10 @@
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
import React from 'react'
import Video from './video'
import initialState from './state.json'
import initialValue from './value.json'
/**
* The images example.
@@ -15,13 +15,13 @@ import initialState from './state.json'
class Embeds extends React.Component {
/**
* Deserialize the raw initial state.
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
value: Value.fromJSON(initialValue)
}
/**
@@ -30,8 +30,8 @@ class Embeds extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -45,7 +45,7 @@ class Embeds extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderNode={this.renderNode}
/>

0
examples/embeds/state.json → examples/embeds/value.json
View File

18
examples/emojis/index.js
View File

@@ -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 {
<div className="editor">
<Editor
placeholder="Write some 😍👋🎉..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderNode={this.renderNode}
/>

0
examples/emojis/state.json → examples/emojis/value.json
View File

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

@@ -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 {
<div className="editor">
<Editor
placeholder="Enter a title..."
state={this.state.state}
value={this.state.value}
schema={schema}
onChange={this.onChange}
renderNode={this.renderNode}

0
examples/forced-layout/state.json → examples/forced-layout/value.json
View File

28
examples/hovering-menu/index.js
View File

@@ -1,10 +1,10 @@
import { Editor } from 'slate-react'
import { State } from 'slate'
import { Value } from 'slate'
import React from 'react'
import ReactDOM from 'react-dom'
import initialState from './state.json'
import initialValue from './value.json'
const root = window.document.querySelector('main')
@@ -24,8 +24,8 @@ class Menu extends React.Component {
*/
hasMark(type) {
const { state } = this.props
return state.activeMarks.some(mark => 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 {
<div>
<Menu
menuRef={this.menuRef}
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderMark={this.renderMark}
/>

0
examples/hovering-menu/state.json → examples/hovering-menu/value.json
View File

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

@@ -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 {
<Editor
placeholder="Enter some text..."
spellCheck={false}
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

16
examples/images/index.js
View File

@@ -1,9 +1,9 @@
import { Editor, getEventRange, getEventTransfer } 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'
import isImage from 'is-image'
import isUrl from 'is-url'
@@ -36,13 +36,13 @@ function insertImage(change, src, target) {
class Images extends React.Component {
/**
* Deserialize the raw initial state.
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
value: Value.fromJSON(initialValue)
}
/**
@@ -87,7 +87,7 @@ class Images extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onDrop={this.onDrop}
onPaste={this.onPaste}
@@ -143,8 +143,8 @@ class Images extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
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)

0
examples/images/state.json → examples/images/value.json
View File

26
examples/links/index.js
View File

@@ -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 {
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onPaste={this.onPaste}
renderNode={this.renderNode}

0
examples/links/state.json → examples/links/value.json
View File

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

@@ -21,13 +21,13 @@ Prism.languages.markdown=Prism.languages.extend("markup",{}),Prism.languages.ins
class MarkdownPreview extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: Plain.deserialize('Slate is flexible enough to add **decorators** that can format text based on its content. For example, this editor has **Markdown** preview decorators 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!')
value: Plain.deserialize('Slate is flexible enough to add **decorators** that can format text based on its content. For example, this editor has **Markdown** preview decorators 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!')
}
/**
@@ -36,8 +36,8 @@ class MarkdownPreview extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -52,7 +52,7 @@ class MarkdownPreview extends React.Component {
<div className="editor">
<Editor
placeholder="Write some markdown..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderMark={this.renderMark}
decorateNode={this.decorateNode}

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

@@ -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'
/**
* The auto-markdown example.
@@ -14,13 +14,13 @@ import initialState from './state.json'
class MarkdownShortcuts extends React.Component {
/**
* Deserialize the raw initial state.
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
value: Value.fromJSON(initialValue)
}
/**
@@ -58,7 +58,7 @@ class MarkdownShortcuts extends React.Component {
<div className="editor">
<Editor
placeholder="Write some markdown..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}
@@ -95,8 +95,8 @@ class MarkdownShortcuts extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
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

0
examples/markdown-shortcuts/state.json → examples/markdown-shortcuts/value.json
View File

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

@@ -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 {
<div className="editor">
<Editor
placeholder="Paste in some HTML..."
state={this.state.state}
value={this.state.value}
onPaste={this.onPaste}
onChange={this.onChange}
renderNode={this.renderNode}

0
examples/paste-html/state.json → examples/paste-html/value.json
View File

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

@@ -13,13 +13,13 @@ import React from 'react'
class PlainText extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: Plain.deserialize('This is editable plain text, just like a <textarea>!')
value: Plain.deserialize('This is editable plain text, just like a <textarea>!')
}
/**
@@ -28,8 +28,8 @@ class PlainText extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -43,7 +43,7 @@ class PlainText extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some plain text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
</div>

10
examples/plugins/index.js
View File

@@ -49,13 +49,13 @@ const plugins = [
class Plugins extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: 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!
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.`)
@@ -67,8 +67,8 @@ The third is an example of using the plugin.render property to create a higher-o
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -83,7 +83,7 @@ The third is an example of using the plugin.render property to create a higher-o
<Editor
placeholder="Enter some text..."
plugins={plugins}
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
</div>

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

@@ -13,13 +13,13 @@ import React from 'react'
class ReadOnly extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: 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.')
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.')
}
/**
@@ -28,8 +28,8 @@ class ReadOnly extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -44,7 +44,7 @@ class ReadOnly extends React.Component {
<Editor
readOnly
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
/>
</div>

36
examples/rich-text/index.js
View File

@@ -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'
import { isKeyHotkey } from 'is-hotkey'
/**
@@ -34,13 +34,13 @@ const isCodeHotkey = isKeyHotkey('mod+`')
class RichTextExample extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState),
value: Value.fromJSON(initialValue),
}
/**
@@ -51,8 +51,8 @@ class RichTextExample extends React.Component {
*/
hasMark = (type) => {
const { state } = this.state
return state.activeMarks.some(mark => mark.type == type)
const { value } = this.state
return value.activeMarks.some(mark => mark.type == type)
}
/**
@@ -63,18 +63,18 @@ class RichTextExample extends React.Component {
*/
hasBlock = (type) => {
const { state } = this.state
return state.blocks.some(node => node.type == type)
const { value } = this.state
return value.blocks.some(node => node.type == type)
}
/**
* 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 })
}
/**
@@ -114,8 +114,8 @@ class RichTextExample extends React.Component {
onClickMark = (event, type) => {
event.preventDefault()
const { state } = this.state
const change = state.change().toggleMark(type)
const { value } = this.state
const change = value.change().toggleMark(type)
this.onChange(change)
}
@@ -128,9 +128,9 @@ class RichTextExample extends React.Component {
onClickBlock = (event, type) => {
event.preventDefault()
const { state } = this.state
const change = state.change()
const { document } = state
const { value } = this.state
const change = value.change()
const { document } = value
// Handle everything but list buttons.
if (type != 'bulleted-list' && type != 'numbered-list') {
@@ -153,7 +153,7 @@ class RichTextExample extends React.Component {
// Handle the extra wrapping required for list buttons.
else {
const isList = this.hasBlock('list-item')
const isType = state.blocks.some((block) => {
const isType = value.blocks.some((block) => {
return !!document.getClosest(block.key, parent => parent.type == type)
})
@@ -262,7 +262,7 @@ class RichTextExample extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some rich text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

0
examples/rich-text/state.json → examples/rich-text/value.json
View File

14
examples/rtl/index.js
View File

@@ -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'
/**
* The plain text example.
@@ -14,13 +14,13 @@ import initialState from './state.json'
class RTL extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
value: Value.fromJSON(initialValue)
}
/**
@@ -29,8 +29,8 @@ class RTL extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -59,7 +59,7 @@ class RTL extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some plain text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

0
examples/rtl/state.json → examples/rtl/value.json
View File

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

@@ -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'
/**
* The rich text example.
@@ -14,23 +14,23 @@ import initialState from './state.json'
class SearchHighlighting 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 })
}
/**
@@ -40,9 +40,9 @@ class SearchHighlighting extends React.Component {
*/
onInputChange = (event) => {
const { state } = this.state
const { value } = this.state
const string = event.target.value
const texts = state.document.getTexts()
const texts = value.document.getTexts()
const decorations = []
texts.forEach((node) => {
@@ -65,7 +65,7 @@ class SearchHighlighting extends React.Component {
})
})
const change = state.change().setState({ decorations })
const change = value.change().setValue({ decorations })
this.onChange(change)
}
@@ -117,7 +117,7 @@ class SearchHighlighting extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some rich text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
renderMark={this.renderMark}
spellCheck

0
examples/search-highlighting/state.json → examples/search-highlighting/value.json
View File

30
examples/syncing-operations/index.js
View File

@@ -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'
import { isKeyHotkey } from 'is-hotkey'
/**
@@ -26,13 +26,13 @@ const isCodeHotkey = isKeyHotkey('mod+`')
class SyncingEditor extends React.Component {
/**
* Deserialize the initial editor state.
* Deserialize the initial editor value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState),
value: Value.fromJSON(initialValue),
}
/**
@@ -43,8 +43,8 @@ class SyncingEditor extends React.Component {
*/
applyOperations = (operations) => {
const { state } = this.state
const change = state.change().applyOperations(operations)
const { value } = this.state
const change = value.change().applyOperations(operations)
this.onChange(change, { remote: true })
}
@@ -56,12 +56,12 @@ class SyncingEditor extends React.Component {
*/
hasMark = (type) => {
const { state } = this.state
return state.activeMarks.some(mark => mark.type == type)
const { value } = this.state
return value.activeMarks.some(mark => mark.type == type)
}
/**
* On change, save the new `state`. And if it's a local change, call the
* On change, save the new `value`. And if it's a local change, call the
* passed-in `onChange` handler.
*
* @param {Change} change
@@ -69,7 +69,7 @@ class SyncingEditor extends React.Component {
*/
onChange = (change, options = {}) => {
this.setState({ state: change.state })
this.setState({ value: change.value })
if (!options.remote) {
this.props.onChange(change)
@@ -113,8 +113,8 @@ class SyncingEditor extends React.Component {
onClickMark = (event, type) => {
event.preventDefault()
const { state } = this.state
const change = state.change().toggleMark(type)
const { value } = this.state
const change = value.change().toggleMark(type)
this.onChange(change)
}
@@ -180,7 +180,7 @@ class SyncingEditor extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderMark={this.renderMark}
@@ -244,7 +244,7 @@ class SyncingOperationsExample extends React.Component {
*/
onOneChange = (change) => {
const ops = change.operations.filter(o => o.type != 'set_selection' && o.type != 'set_state')
const ops = change.operations.filter(o => o.type != 'set_selection' && o.type != 'set_value')
this.two.applyOperations(ops)
}
@@ -255,7 +255,7 @@ class SyncingOperationsExample extends React.Component {
*/
onTwoChange = (change) => {
const ops = change.operations.filter(o => o.type != 'set_selection' && o.type != 'set_state')
const ops = change.operations.filter(o => o.type != 'set_selection' && o.type != 'set_value')
this.one.applyOperations(ops)
}

0
examples/syncing-operations/state.json → examples/syncing-operations/value.json
View File

28
examples/tables/index.js
View File

@@ -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'
/**
* The tables example.
@@ -14,13 +14,13 @@ import initialState from './state.json'
class Tables extends React.Component {
/**
* Deserialize the raw initial state.
* Deserialize the raw initial value.
*
* @type {Object}
*/
state = {
state: State.fromJSON(initialState)
value: Value.fromJSON(initialValue)
}
/**
@@ -31,8 +31,8 @@ class Tables extends React.Component {
*/
onBackspace = (event, change) => {
const { state } = change
if (state.startOffset != 0) return
const { value } = change
if (value.startOffset != 0) return
event.preventDefault()
return true
}
@@ -43,8 +43,8 @@ class Tables extends React.Component {
* @param {Change} change
*/
onChange = ({ state }) => {
this.setState({ state })
onChange = ({ value }) => {
this.setState({ value })
}
/**
@@ -55,8 +55,8 @@ class Tables extends React.Component {
*/
onDelete = (event, change) => {
const { state } = change
if (state.endOffset != state.startText.text.length) return
const { value } = change
if (value.endOffset != value.startText.text.length) return
event.preventDefault()
return true
}
@@ -81,8 +81,8 @@ class Tables extends React.Component {
*/
onKeyDown = (event, change) => {
const { state } = change
const { document, selection } = state
const { value } = change
const { document, selection } = value
const { startKey } = selection
const startNode = document.getDescendant(startKey)
@@ -96,7 +96,7 @@ class Tables extends React.Component {
}
}
if (state.startBlock.type != 'table-cell') {
if (value.startBlock.type != 'table-cell') {
return
}
@@ -118,7 +118,7 @@ class Tables extends React.Component {
<div className="editor">
<Editor
placeholder="Enter some text..."
state={this.state.state}
value={this.state.value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
renderNode={this.renderNode}

0
examples/tables/state.json → examples/tables/value.json
View File

18
packages/slate-base64-serializer/src/index.js
View File

@@ -1,5 +1,5 @@
import { State } from 'slate'
import { Value } from 'slate'
import { atob, btoa } from 'isomorphic-base64'
/**
@@ -29,16 +29,16 @@ function decode(string) {
}
/**
* Deserialize a State `string`.
* Deserialize a Value `string`.
*
* @param {String} string
* @return {State}
* @return {Value}
*/
function deserialize(string, options) {
const raw = decode(string)
const state = State.fromJSON(raw, options)
return state
const value = Value.fromJSON(raw, options)
return value
}
/**
@@ -56,14 +56,14 @@ function deserializeNode(string, options) {
}
/**
* Serialize a `state`.
* Serialize a `value`.
*
* @param {State} state
* @param {Value} value
* @return {String}
*/
function serialize(state, options) {
const raw = state.toJSON(options)
function serialize(value, options) {
const raw = value.toJSON(options)
const encoded = encode(raw)
return encoded
}

16
packages/slate-html-serializer/src/index.js
View File

@@ -3,7 +3,7 @@ import React from 'react'
import ReactDOMServer from 'react-dom/server'
import logger from 'slate-dev-logger'
import typeOf from 'type-of'
import { Node, State } from 'slate'
import { Node, Value } from 'slate'
import { Record } from 'immutable'
/**
@@ -123,7 +123,7 @@ class Html {
* @param {String} html
* @param {Object} options
* @property {Boolean} toRaw
* @return {State}
* @return {Value}
*/
deserialize = (html, options = {}) => {
@@ -187,7 +187,7 @@ class Html {
}
const json = {
kind: 'state',
kind: 'value',
document: {
kind: 'document',
data: {},
@@ -195,7 +195,7 @@ class Html {
}
}
const ret = toJSON ? json : State.fromJSON(json)
const ret = toJSON ? json : Value.fromJSON(json)
return ret
}
@@ -320,16 +320,16 @@ class Html {
}
/**
* Serialize a `state` object into an HTML string.
* Serialize a `value` object into an HTML string.
*
* @param {State} state
* @param {Value} value
* @param {Object} options
* @property {Boolean} render
* @return {String|Array}
*/
serialize = (state, options = {}) => {
const { document } = state
serialize = (value, options = {}) => {
const { document } = value
const elements = document.nodes.map(this.serializeNode)
if (options.render === false) return elements

4
packages/slate-html-serializer/test/deserialize/block-nested.js
View File

@@ -33,7 +33,7 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<quote>
<paragraph>
@@ -41,5 +41,5 @@ export const output = (
</paragraph>
</quote>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/block-no-children.js
View File

@@ -26,9 +26,9 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph />
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/block-with-data.js
View File

@@ -27,11 +27,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph thing="value">
one
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/block-with-is-void.js
View File

@@ -26,9 +26,9 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<image />
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/block.js
View File

@@ -26,11 +26,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
one
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/default-block.js
View File

@@ -33,7 +33,7 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
one
@@ -42,5 +42,5 @@ export const output = (
two
</block>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/empty-string.js
View File

@@ -8,9 +8,9 @@ export const config = {}
export const input = ''
export const output = (
<state>
<value>
<document>
<paragraph />
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/html-comment.js
View File

@@ -27,11 +27,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
one
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/inline-nested.js
View File

@@ -40,7 +40,7 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<link>
@@ -50,5 +50,5 @@ export const output = (
</link>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/inline-no-children.js
View File

@@ -33,11 +33,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<link />
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/inline-with-data.js
View File

@@ -34,7 +34,7 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<link thing="value">
@@ -42,5 +42,5 @@ export const output = (
</link>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/inline-with-is-void.js
View File

@@ -34,11 +34,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<emoji />
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/inline.js
View File

@@ -33,7 +33,7 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<link>
@@ -41,5 +41,5 @@ export const output = (
</link>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/mark-adjacent.js
View File

@@ -40,11 +40,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
o<b>ne</b>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/mark-nested.js
View File

@@ -40,11 +40,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
o<i>n<b>e</b></i>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/mark-with-data.js
View File

@@ -34,11 +34,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
on<b thing="value">e</b>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/mark.js
View File

@@ -33,11 +33,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
on<b>e</b>
</paragraph>
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/multiple-matching-rules.js
View File

@@ -29,9 +29,9 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph />
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/no-next.js
View File

@@ -26,9 +26,9 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph />
</document>
</state>
</value>
)

4
packages/slate-html-serializer/test/deserialize/skip-element.js
View File

@@ -37,11 +37,11 @@ export const input = `
`.trim()
export const output = (
<state>
<value>
<document>
<paragraph>
<image />
</paragraph>
</document>
</state>
</value>
)

2
packages/slate-html-serializer/test/deserialize/to-json.js
View File

@@ -22,7 +22,7 @@ export const input = `
`.trim()
export const output = {
kind: 'state',
kind: 'value',
document: {
kind: 'document',
data: {},

10
packages/slate-html-serializer/test/index.js
View File

@@ -13,11 +13,11 @@ import Html from '..'
import assert from 'assert'
import fs from 'fs'
import parse5 from 'parse5' // eslint-disable-line import/no-extraneous-dependencies
import { State, resetKeyGenerator } from 'slate'
import { Value, resetKeyGenerator } from 'slate'
import { basename, extname, resolve } from 'path'
/**
* Reset Slate's internal state before each text.
* Reset Slate's internal key generator state before each text.
*/
beforeEach(() => {
@@ -38,9 +38,9 @@ describe('slate-html-serializer', () => {
const module = require(resolve(dir, test))
const { input, output, config, options } = module
const html = new Html({ parseHtml: parse5.parseFragment, ...config })
const state = html.deserialize(input, options)
const actual = State.isState(state) ? state.toJSON() : state
const expected = State.isState(output) ? output.toJSON() : output
const value = html.deserialize(input, options)
const actual = Value.isValue(value) ? value.toJSON() : value
const expected = Value.isValue(output) ? output.toJSON() : output
assert.deepEqual(actual, expected)
})
}

4
packages/slate-html-serializer/test/serialize/block-nested.js
View File

@@ -17,7 +17,7 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<quote>
<paragraph>
@@ -25,7 +25,7 @@ export const input = (
</paragraph>
</quote>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/block-with-data.js
View File

@@ -15,13 +15,13 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph thing="value">
one
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/block-with-is-void.js
View File

@@ -15,11 +15,11 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<image />
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/block-with-mark.js
View File

@@ -19,13 +19,13 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
on<b>e</b>
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/block.js
View File

@@ -15,13 +15,13 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
one
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/inline-nested.js
View File

@@ -23,7 +23,7 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
<link>
@@ -33,7 +33,7 @@ export const input = (
</link>
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/inline-with-data.js
View File

@@ -19,7 +19,7 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
<link href="https://google.com">
@@ -27,7 +27,7 @@ export const input = (
</link>
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/inline-with-is-void.js
View File

@@ -19,13 +19,13 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
<emoji />
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/inline-with-mark.js
View File

@@ -23,7 +23,7 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
<link>
@@ -31,7 +31,7 @@ export const input = (
</link>
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/inline.js
View File

@@ -19,7 +19,7 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
<link>
@@ -27,7 +27,7 @@ export const input = (
</link>
</paragraph>
</document>
</state>
</value>
)
export const output = `

4
packages/slate-html-serializer/test/serialize/multiple-rules.js
View File

@@ -19,13 +19,13 @@ export const rules = [
]
export const input = (
<state>
<value>
<document>
<paragraph>
one
</paragraph>
</document>
</state>
</value>
)
export const output = `

3
packages/slate-hyperscript/package.json
View File

@@ -7,7 +7,8 @@
"main": "./lib/index.js",
"dependencies": {
"is-empty": "^1.0.0",
"is-plain-object": "^2.0.4"
"is-plain-object": "^2.0.4",
"slate-dev-logger": "^0.1.23"
},
"peerDependencies": {
"slate": "^0.28.2"

16
packages/slate-hyperscript/src/index.js
View File

@@ -1,6 +1,7 @@
import isEmpty from 'is-empty'
import isPlainObject from 'is-plain-object'
import logger from 'slate-dev-logger'
import {
Block,
@@ -9,8 +10,8 @@ import {
Mark,
Node,
Range,
State,
Text
Text,
Value,
} from 'slate'
/**
@@ -74,7 +75,12 @@ const CREATORS = {
return Range.create(attributes)
},
state(tagName, attributes, children) {
state(...args) {
logger.deprecate('slate-hyperscript@0.3.0', 'The `<state>` tag has been renamed to `<value>`.')
return CREATORS.value(...args)
},
value(tagName, attributes, children) {
const { data } = attributes
const document = children.find(Document.isDocument)
let selection = children.find(Range.isRange) || Range.create()
@@ -110,8 +116,8 @@ const CREATORS = {
selection = selection.merge(props).normalize(document)
}
const state = State.create({ data, document, selection })
return state
const value = Value.create({ data, document, selection })
return value
},
text(tagName, attributes, children) {

18
packages/slate-plain-serializer/src/index.js
View File

@@ -1,17 +1,17 @@
import logger from 'slate-dev-logger'
import { Block, Mark, Node, State } from 'slate'
import { Block, Mark, Node, Value } from 'slate'
import { Set } from 'immutable'
/**
* Deserialize a plain text `string` to a state.
* Deserialize a plain text `string` to a Slate value.
*
* @param {String} string
* @param {Object} options
* @property {Boolean} toJSON
* @property {String|Object|Block} defaultBlock
* @property {Array|Set} defaultMarks
* @return {State}
* @return {Value}
*/
function deserialize(string, options = {}) {
@@ -34,7 +34,7 @@ function deserialize(string, options = {}) {
defaultMarks = defaultMarks.map(Mark.createProperties)
const json = {
kind: 'state',
kind: 'value',
document: {
kind: 'document',
data: {},
@@ -61,19 +61,19 @@ function deserialize(string, options = {}) {
}
}
const ret = toJSON ? json : State.fromJSON(json)
const ret = toJSON ? json : Value.fromJSON(json)
return ret
}
/**
* Serialize a `state` to plain text.
* Serialize a Slate `value` to a plain text string.
*
* @param {State} state
* @param {Value} value
* @return {String}
*/
function serialize(state) {
return serializeNode(state.document)
function serialize(value) {
return serializeNode(value.document)
}
/**

4
packages/slate-plain-serializer/test/deserialize/line-multiple.js
View File

@@ -8,7 +8,7 @@ two
`.trim()
export const output = (
<state>
<value>
<document>
<line>
one
@@ -17,5 +17,5 @@ export const output = (
two
</line>
</document>
</state>
</value>
)

4
packages/slate-plain-serializer/test/deserialize/line.js
View File

@@ -7,11 +7,11 @@ one
`.trim()
export const output = (
<state>
<value>
<document>
<line>
one
</line>
</document>
</state>
</value>
)

Some files were not shown because too many files have changed in this diff Show More