2

我想创建一个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;

沙箱在这里

但这不是很好。我希望初始文本以粗体显示，但事实并非如此。每次击键时光标都会跳回位置 0。另外，当我删除字符串（value变成''）时，编辑器会中断。

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

4

1 回答 1

2

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

您可以做的是将 Markdown 内容反序列化为 Slate 状态对象，将其提供给编辑器，让 Slate 在您编辑时执行其操作，然后 序列化回 Markdown 以执行您需要对其执行的任何操作、存储、发送， ETC。

于 2021-09-13T13:49:50.113 回答