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

Add format_text command, and editor.marks state (#3308)

Browse Source 
* add format_text command, refactor command extensions

* update onChange to not receive selection

* update docs

* fix tests
This commit is contained in:
Ian Storm Taylor
2019-12-12 15:37:55 -05:00
committed by GitHub
parent ed40c08b80
commit 6552da940a
37 changed files with 350 additions and 647 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
docs/walkthroughs/01-installing-slate.md
View File

@@ -45,15 +45,14 @@ const App = () => {
Of course we haven't rendered anything, so you won't see any changes.
Next we want to create state for `value` and `selection`:
Next we want to create state for `value`:
```jsx
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
// Keep track of state for the value and selection of the editor.
// Keep track of state for the value of the editor.
const [value, setValue] = useState([])
const [selection, setSelection] = useState(null)
return null
}
```
@@ -66,18 +65,9 @@ The provider component keeps track of your Slate editor, its plugins, its value,
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([])
const [selection, setSelection] = useState(null)
// Render the Slate context.
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
/>
<Slate editor={editor} value={value} onChange={value => setValue(value)} />
)
}
```
@@ -94,18 +84,9 @@ Okay, so the next step is to render the `<Editable>` component itself:
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [value, setValue] = useState([])
const [selection, setSelection] = useState(null)
return (
// Add the editable component inside the context.
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable />
</Slate>
)
@@ -121,7 +102,6 @@ The value is just plain JSON. Here's one containing a single paragraph block wit
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
// Add the initial value when setting up our state.
const [value, setValue] = useState([
{
@@ -131,15 +111,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable />
</Slate>
)

33
docs/walkthroughs/02-adding-event-handlers.md
View File

@@ -11,7 +11,6 @@ Here's our app from earlier:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -20,15 +19,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable />
</Slate>
)
@@ -40,7 +31,6 @@ Now we add an `onKeyDown` handler:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -49,15 +39,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
// Define a new handler which prints the key that was pressed.
onKeyDown={event => {
@@ -78,7 +60,6 @@ Our `onKeyDown` handler might look like this:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -87,15 +68,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
onKeyDown={event => {
if (event.key === '&') {

43
docs/walkthroughs/03-defining-custom-elements.md
View File

@@ -9,7 +9,6 @@ We'll show you how. Let's start with our app from earlier:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -18,15 +17,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
onKeyDown={event => {
if (event.key === '&') {
@@ -76,7 +67,6 @@ Now, let's add that renderer to our `Editor`:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -96,15 +86,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
// Pass in the `renderElement` function.
renderElement={renderElement}
@@ -140,7 +122,6 @@ import { Editor } from 'slate'
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -158,15 +139,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
onKeyDown={event => {
@@ -220,15 +193,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
onKeyDown={event => {

33
docs/walkthroughs/04-applying-custom-formatting.md
View File

@@ -9,7 +9,6 @@ So we start with our app from earlier:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -27,15 +26,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
onKeyDown={event => {
@@ -61,7 +52,6 @@ And now, we'll edit the `onKeyDown` handler to make it so that when you press `c
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -79,15 +69,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
onKeyDown={event => {
@@ -153,7 +135,6 @@ And now, let's tell Slate about that leaf. To do that, we'll pass in the `render
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -176,15 +157,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
// Pass in the `renderLeaf` function.

44
docs/walkthroughs/05-executing-commands.md
View File

@@ -13,7 +13,6 @@ We'll start with our app from earlier:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -35,15 +34,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
@@ -94,7 +85,6 @@ const withCustom = editor => {
const App = () => {
// Wrap the editor with our new `withCustom` plugin.
const editor = useMemo(() => withCustom(withReact(createEditor())), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -116,15 +106,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
@@ -224,7 +206,6 @@ const CustomEditor = {
const App = () => {
const editor = useMemo(() => withCustom(withReact(createEditor())), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -246,15 +227,7 @@ const App = () => {
}, [])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable
renderElement={renderElement}
renderLeaf={renderLeaf}
@@ -289,7 +262,6 @@ Now our commands are clearly defined and you can invoke them from anywhere we ha
```js
const App = () => {
const editor = useMemo(() => withCustom(withReact(createEditor())), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -312,15 +284,7 @@ const App = () => {
return (
// Add a toolbar with buttons that call the same methods.
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<div>
<button
onMouseDown={event => {

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

@@ -9,7 +9,6 @@ Let's start with a basic editor:
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -18,15 +17,7 @@ const App = () => {
])
return (
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
setValue(value)
setSelection(selection)
}}
>
<Slate editor={editor} value={value} onChange={value => setValue(value)}>
<Editable />
</Slate>
)
@@ -52,7 +43,6 @@ const defaultValue = [
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
const [value, setValue] = useState([
{
type: 'paragraph',
@@ -65,9 +55,8 @@ const App = () => {
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
onChange={value => {
setValue(value)
setSelection(selection)
// Save the value to Local Storage.
const content = JSON.stringify(value)
@@ -87,7 +76,6 @@ But... if you refresh the page, everything is still reset. That's because we nee
```js
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
// Update the initial content to be pulled from Local Storage if it exists.
const [value, setValue] = useState(
JSON.parse(localStorage.getItem('content')) || [
@@ -102,10 +90,8 @@ const App = () => {
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
onChange={value => {
setValue(value)
setSelection(selection)
const content = JSON.stringify(value)
localStorage.setItem('content', content)
}}
@@ -149,7 +135,6 @@ const deserialize = string => {
const App = () => {
const editor = useMemo(() => withReact(createEditor()), [])
const [selection, setSelection] = useState(null)
// Use our deserializing function to read the data from Local Storage.
const [value, setValue] = useState(
deserialize(localStorage.getItem('content')) || ''
@@ -159,10 +144,8 @@ const App = () => {
<Slate
editor={editor}
value={value}
selection={selection}
onChange={(value, selection) => {
onChange={value => {
setValue(value)
setSelection(selection)
// Serialize the value and save the string value to Local Storage.
localStorage.setItem('content', serialize(value))
}}