创建一个slate.js编辑器组件，使其状态保持为markdown

Question

我想创建一个slate.js-based编辑器组件，让它的状态保持在markdown中。Slate.js文档一直在重复将状态序列化和反序列化到md中应该是多么简单，但它们并没有提供实际的方法来做到这一点。

基于这两个示例，我尝试用remark-slate-transformer以非常简单的方式实现这样的编辑器：remark-slate-transformer、slate

import React, { useMemo, useState } from "react";
import { createEditor } from "slate";
import { Slate, Editable, withReact } from "slate-react";
import stringify from "remark-stringify";
import unified from "unified";
import markdownParser from "remark-parse";
import { remarkToSlate, slateToRemark } from "remark-slate-transformer";
import { withHistory } from "slate-history";

function markdown2slate(markdown) {
  const processor = unified().use(markdownParser).use(remarkToSlate);
  return processor.processSync(markdown).result;
}

function slate2markdown(slate) {
  const processor = unified().use(slateToRemark).use(stringify);
  const ast = processor.runSync({ type: "root", children: slate });
  return processor.stringify(ast);
}

export const App = () => {
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
  const [value, setValue] = useState("**initialText**");

  const onChange = (newVal) => {
    setValue(slate2markdown(newVal));
  };

  const editorValue = markdown2slate(value);

  return (
    <div className="wrapper">
      <Slate editor={editor} value={editorValue} onChange={onChange}>
        <Editable />
      </Slate>
    </div>
  );
};

export default App;

沙盒here

但这并不能很好地工作。我预计初始文本会以粗体显示，但事实并非如此。每次击键时，光标都会跳回到0位置。此外，当我删除字符串(value变为'')时，编辑器会断开。

让编辑器组件的状态存储为markdown的正确、容易的方法是什么？

Answer 1

我不知道为什么你绝对想要将编辑器状态存储为Markdown，但这不能也不会起作用:你不能简单地将Slate内部状态交换为与它期望的不同的东西，它自己的对象模型，并期望它能工作。

你能做的就是将Markdown内容放到一个Slate状态对象中，将其提供给编辑器，让Slate在你编辑的时候做它的事情，然后serialize回到Markdown来做你需要做的任何事情，存储它，发送它，等等。