mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-29 09:59:48 +02:00
Code Issues Releases Wiki Activity

Updates "Saving to a Database" example to distinguish content changes (#4497)

Browse Source 
* Updates "Saving to a Database" example to distinguish actual content changes.

* Update docs/walkthroughs/06-saving-to-a-database.md

* Update docs/walkthroughs/06-saving-to-a-database.md

* Update docs/walkthroughs/06-saving-to-a-database.md

* Runs prettier

Co-authored-by: Dylan Schiemann <dylan@dojotoolkit.org>
This commit is contained in:
Doug Reeder
2021-09-26 10:59:32 -04:00
committed by GitHub
parent bc85497d58
commit 95e13b0be1
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,7 @@ That will render a basic Slate editor on your page, and when you type things wil
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 `value`:
So, in our `onChange` handler, we need to save the `value` if anything besides the selection was changed:
```jsx
const App = () => {
@@ -47,9 +47,14 @@ const App = () => {
onChange={value => {
setValue(value)
// Save the value to Local Storage.
const content = JSON.stringify(value)
localStorage.setItem('content', content)
const isAstChange = editor.operations.some(
op => 'set_selection' !== op.type
)
if (isAstChange) {
// Save the value to Local Storage.
const content = JSON.stringify(value)
localStorage.setItem('content', content)
}
}}
>
<Editable />
@@ -81,8 +86,14 @@ const App = () => {
value={value}
onChange={value => {
setValue(value)
const content = JSON.stringify(value)
localStorage.setItem('content', content)
const isAstChange = editor.operations.some(
op => 'set_selection' !== op.type
)
if (isAstChange) {
// Save the value to Local Storage.
const content = JSON.stringify(value)
localStorage.setItem('content', content)
}
}}
>
<Editable />
@@ -135,8 +146,13 @@ const App = () => {
value={value}
onChange={value => {
setValue(value)
// Serialize the value and save the string value to Local Storage.
localStorage.setItem('content', serialize(value))
const isAstChange = editor.operations.some(
op => 'set_selection' !== op.type
)
if (isAstChange) {
// Serialize the value and save the string value to Local Storage.
localStorage.setItem('content', serialize(value))
}
}}
>
<Editable />