javascript - 创建一个 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 变为 '')时，编辑器会中断。

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

Answer 1

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

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