创建一个 slate.js 编辑器组件，将其状态保持在 markdown 中

Question

我想创建一个基于slate.js 的编辑器组件，将其状态保持在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 变为 ''），编辑器会中断。

制作状态存储为降价的编辑器组件的正确、轻松的方法是什么？

Answer 1

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

您可以做的是将deserialize Markdown 内容放入 Slate 状态对象，将其提供给编辑器，让 Slate 在您编辑时执行其操作，然后然后 serialize 回到 Markdown 做任何你需要做的事情，存储它，发送它，等等。