使用 React onEffect 设置新的初始 SlateJS 编辑器值答案

【问题标题】：Set new intiial SlateJS editor value with React onEffect使用 React onEffect 设置新的初始 SlateJS 编辑器值
【发布时间】：2022-07-02 00:50:10
【问题描述】：

如何使用 React onEffect hook 轻松设置整个 SlateJS 编辑器值？

在创建 useState 钩子时设置了初始编辑器值，但是我想在之后设置一个新的初始值。

目前，我们可以通过使用 Transform 删除所有元素然后插入新元素来做到这一点，但这是一种更简单的方法，比如覆盖所有？我似乎在 SlateJS 文档中找不到它。

保存到数据库 slatejs 示例不工作，但这是我的设置功能

const App = () => {
  const editor = useMemo(() => withReact(createEditor()), [])
  // Update the initial content to be pulled from Local Storage if it exists.
  const [value, setValue] = useState(
    [
      {
        type: 'paragraph',
        children: [{ text: 'A line of text in a paragraph.' }],
      },
    ]
  )

  useEffect(() => {
    // Get saved SlateJS text from local storage
    const savedSlateTextData = getSavedSlateJSData(localStorage)

    // In theory, this should set the SlateJS values to the loaded data
    // In practice, I think because the editor is immutable outside transform, it don't work 
    setValue(savedSlateTextData)
  }, [])

  return (
    <Slate
      editor={editor}
      value={value}
      onChange={value => {
        setValue(value)
        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 />
    </Slate>
  )
}

【问题讨论】：

标签： javascript reactjs slatejs

【解决方案1】：

不要以为我想要的可能——你需要删除所有节点，然后插入新节点。

不确定是否可以使用 match 代替一堆 for 循环，也许。

  // Get initial total nodes to prevent deleting affecting the loop
  let totalNodes = editor.children.length;

  // No saved content, don't delete anything to prevent errors
  if (savedSlateJSContent.length <= 0) return;

  // Remove every node except the last one
  // Otherwise SlateJS will return error as there's no content
  for (let i = 0; i < totalNodes - 1; i++) {
      console.log(i)
      Transforms.removeNodes(editor, {
          at: [totalNodes-i-1],
      });
  }

  // Add content to SlateJS
  for (const value of savedSlateJSContent ) {
      Transforms.insertNodes(editor, value, {
          at: [editor.children.length],
      });
  }

  // Remove the last node that was leftover from before
  Transforms.removeNodes(editor, {
      at: [0],
  });

【讨论】：

【解决方案2】：

这是我能想到的最简洁的方式来使用可通过 slate 获得的内容

const INITIAL_SLATE_VALUE =  [
   {
      type: 'paragraph',
      children: [{ text: 'A line of text in a paragraph.' }],
   },
]

const [value, setValue] = useState(INITIAL_SLATE_VALUE)

// Delete all entries leaving 1 empty node
Transforms.delete(editor, {
   at: {
      anchor: Editor.start(editor, []),
      focus: Editor.end(editor, []),
   },
})

// Removes empty node
Transforms.removeNodes(editor, {
   at: [0],
})

// Insert array of children nodes
Transforms.insertNodes(
   editor,
   value
)

【讨论】：