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

编程问答 2022-11-20

问题描述

我想创建一个基于 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 的编辑器组件的正确、轻松的方法是什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptmarkdownreactjsreactjsreactjsreactjsslatejs