創建一個 slate.js 編輯器組件，將其狀態保持在 Markdown 中

Question

我想創建一個基於slate.js的編輯器組件，將其狀態保持在slate.js中。 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變為'' ）時，編輯器會中斷。

制作狀態存儲為 Markdown 的編輯器組件的正確、輕松的方法是什么？

Answer 1

我不確定為什么你絕對想將編輯器狀態存儲為 Markdown，但這不能也不會起作用：你不能簡單地將 Slate 內部狀態交換到與它預期不同的東西，它自己的對象模型，以及期待它的工作。

您可以做的是 將Markdown 內容 反序列化為 Slate 狀態對象，將其提供給編輯器，讓 Slate 在您編輯時完成它的工作，然后將其序列化回 Markdown 以執行您需要對其進行的任何操作、存儲、發送， 等等。