fix some doc's bug (with v0.57.1) (#3393)

* fix: code blocks's info string
this info string. should be `jsx`

* fix: editor's exec invoke
now, editor.exec() is not available in Slate v0.57.1
so, use editor.insertText() to instead it

*  refactor: delete a nerver used value

* update add new chinese translate
      update chinese translate to `v0.57.1`

Co-authored-by: Ian Storm Taylor <ian@ianstormtaylor.com>

Readme.md

@@ -129,7 +129,7 @@ If even that's not enough, you can always [read the source itself](./packages/sl
 
 There are also translations of the documentation into other languages:
 
-- [中文](https://doodlewind.github.io/slate-doc-cn/)
+- [中文](https://github.com/loveloki/slate-docs-cn): `v0.57.1`
 
 If you're maintaining a translation, feel free to pull request it here!
 

docs/walkthroughs/01-installing-slate.md

@@ -16,10 +16,10 @@ _Note, if you'd rather use a pre-bundled version of Slate, you can `yarn add sla
 
 Once you've installed Slate, you'll need to import it.
 
-```js
+
+```jsx
 // Import React dependencies.
 import React, { useEffect, useMemo, useState } from "react";
-
 // Import the Slate editor factory.
 import { createEditor } from 'slate'
 
@@ -102,7 +102,7 @@ There's only one last step. So far we've been using an empty `[]` array as the i
 
 The value is just plain JSON. Here's one containing a single paragraph block with some text in it:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   // Add the initial value when setting up our state.

docs/walkthroughs/02-adding-event-handlers.md

@@ -8,7 +8,7 @@ Let's use the `onKeyDown` handler to change the editor's content when we press a
 
 Here's our app from earlier:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -28,7 +28,7 @@ const App = () => {
 
 Now we add an `onKeyDown` handler:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -57,7 +57,7 @@ Now we want to make it actually change the content. For the purposes of our exam
 
 Our `onKeyDown` handler might look like this:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -74,8 +74,8 @@ const App = () => {
           if (event.key === '&') {
             // Prevent the ampersand character from being inserted.
             event.preventDefault()
-            // Execute a command to insert text when the event occurs.
-            editor.exec({ type: 'insert_text', text: 'and' })
+            // Execute the `insertText` method when the event occurs.
+            editor.insertText("and")
           }
         }}
       />

docs/walkthroughs/03-defining-custom-elements.md

@@ -6,7 +6,7 @@ But that's not all you can do. Slate lets you define any type of custom blocks y
 
 We'll show you how. Let's start with our app from earlier:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -22,7 +22,7 @@ const App = () => {
         onKeyDown={event => {
           if (event.key === '&') {
             event.preventDefault()
-            editor.exec({ type: 'insert_text', text: 'and' })
+            editor.insertText("and")
           }
         }}
       />
@@ -37,7 +37,7 @@ The problem is, code blocks won't just be rendered as a plain paragraph, they'll
 
 Element renderers are just simple React components, like so:
 
-```js
+```jsx
 // Define a React component renderer for our code blocks.
 const CodeElement = props => {
   return (
@@ -56,7 +56,7 @@ And see that `props.children` reference? Slate will automatically render all of
 
 And here's a component for the "default" elements:
 
-```js
+```jsx
 const DefaultElement = props => {
   return <p {...props.attributes}>{props.children}</p>
 }
@@ -64,7 +64,7 @@ const DefaultElement = props => {
 
 Now, let's add that renderer to our `Editor`:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -93,7 +93,7 @@ const App = () => {
         onKeyDown={event => {
           if (event.key === '&') {
             event.preventDefault()
-            editor.exec({ type: 'insert_text', text: 'and' })
+            editor.insertText("and")
           }
         }}
       />
@@ -116,7 +116,7 @@ const DefaultElement = props => {
 
 Okay, but now we'll need a way for the user to actually turn a block into a code block. So let's change our `onKeyDown` function to add a `` Ctrl-` `` shortcut that does just that:
 
-```js
+```jsx
 // Import the `Editor` helpers from Slate.
 import { Editor } from 'slate'
 
@@ -176,7 +176,7 @@ Now, if you press `` Ctrl-` `` the block your cursor is in should turn into a co
 
 But we forgot one thing. When you hit `` Ctrl-` `` again, it should change the code block back into a paragraph. To do that, we'll need to add a bit of logic to change the type we set based on whether any of the currently selected blocks are already a code block:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([

docs/walkthroughs/04-applying-custom-formatting.md

@@ -6,7 +6,7 @@ In this guide, we'll show you how to add custom formatting options, like **bold*
 
 So we start with our app from earlier:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -51,7 +51,7 @@ const App = () => {
 
 And now, we'll edit the `onKeyDown` handler to make it so that when you press `control-B`, it will add a `bold` format to the currently selected text:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -118,7 +118,7 @@ Okay, so we've got the hotkey handler setup... but! If you happen to now try sel
 
 For every format you add, Slate will break up the text content into "leaves", and you need to tell Slate how to read it, just like for elements. So let's define a `Leaf` component:
 
-```js
+```jsx
 // Define a React component to render leaves with bold text.
 const Leaf = props => {
   return (
@@ -136,7 +136,7 @@ Pretty familiar, right?
 
 And now, let's tell Slate about that leaf. To do that, we'll pass in the `renderLeaf` prop to our editor. Also, let's allow our formatting to be toggled by adding active-checking logic.
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([

docs/walkthroughs/05-executing-commands.md

@@ -10,7 +10,7 @@ Let's see how this works.
 
 We'll start with our app from earlier:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -78,7 +78,7 @@ It has the concept of "code blocks" and "bold formatting". But these things are
 
 We can instead implement these domain-specific concepts by creating custom helper functions:
 
-```js
+```jsx
 // Define our own custom set of helpers.
 const CustomEditor = {
   isBoldMarkActive(editor) {
@@ -172,7 +172,7 @@ const App = () => {
 
 Now our commands are clearly defined and you can invoke them from anywhere we have access to our `editor` object. For example, from hypothetical toolbar buttons:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([

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

@@ -6,7 +6,7 @@ In this guide, we'll show you how to add logic to save your Slate content to a d
 
 Let's start with a basic editor:
 
-```js
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -30,17 +30,7 @@ What we need to do is save the changes you make somewhere. For this example, we'
 
 So, in our `onChange` handler, we need to save the `value`:
 
-```js
-const defaultValue = [
-  {
-    children: [
-      {
-        text: 'A line of text in a paragraph.',
-      },
-    ],
-  },
-]
-
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   const [value, setValue] = useState([
@@ -73,7 +63,7 @@ Now whenever you edit the page, if you look in Local Storage, you should see the
 
 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
+```jsx
 const App = () => {
   const editor = useMemo(() => withReact(createEditor()), [])
   // Update the initial content to be pulled from Local Storage if it exists.
@@ -108,7 +98,7 @@ Success—you've got JSON in your database.
 
 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, we can write some logic to serialize and deserialize plain text values:
 
-```js
+```jsx
 // Import the `Node` helper interface from Slate.
 import { Node } from 'slate'