React 编辑器问题

Question

我一直在尝试在我的 vite React 项目中构建一个文本编辑器，它可以接受数学字符，如divide()、分数、幂等。但我似乎不知道最好的工具，因为我用过的工具似乎不太好用。目前我正在使用draftjs，但是如果我在其中粘贴数学问题，则会出现此错误

 DraftEditorLeaf.react.js:131 
 Uncaught TypeError: Cannot read properties of undefined (reading 'reduce')
    at DraftEditorLeaf2.render (DraftEditorLeaf.react.js:131:29)
    at finishClassComponent (react-dom.development.js:19781:31)
    at updateClassComponent (react-dom.development.js:19727:24)
    at beginWork (react-dom.development.js:21650:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27490:7)
    at performUnitOfWork (react-dom.development.js:26596:12)
    at workLoopSync 

我检查了文档示例操场，它给出了与此相同的错误。

这是我的代码

    import { convertFromRaw, convertToRaw, EditorState } from "draft-js";
import { useEffect, useState } from "react";
import { Editor as Editors } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

interface Prop {
  setText: any;
  placeholder: string;
}

// // Utility function to sanitize text
// const sanitizeText = (text: string): string => {
//   // Remove problematic characters or sanitize them
//   return text.replace(/[^\x20-\x7E]/g, ""); // Removes non-ASCII characters
// };

export default function Editor2({ setText, placeholder }: Prop) {
  const [editorState, setEditorState] = useState(() => {
    const initialContent = { blocks: [], entityMap: {} }; // Basic empty content
    return EditorState.createWithContent(convertFromRaw(initialContent));
  });

  const onEditorStateChange = (editorState: any) => {
    setEditorState(editorState);
    const plainText = editorState.getCurrentContent().getPlainText("\u0001");
    // const sanitizedText = sanitizeText(plainText); // Sanitize the text
    console.log("Editor State:", plainText);
    setText(plainText);
  };

  useEffect(() => {
    // console.log("Editor State:", editorState);
  }, [editorState]);

  return (
    <>
      <Editors
        editorStyle={{}}
        toolbarStyle={{
          background: "transparent",
          color: "white",
          border: "1px solid gray",
        }}
        wrapperStyle={{
          border: "1px solid gray",
          padding: 2,
        }}
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
        placeholder={placeholder}
        mention={{
          separator: " ",
          trigger: "@",
          suggestions: [
            { text: "APPLE", value: "apple" },
            { text: "BANANA", value: "banana", url: "banana" },
            { text: "CHERRY", value: "cherry", url: "cherry" },
            { text: "DURIAN", value: "durian", url: "durian" },
            { text: "EGGFRUIT", value: "eggfruit", url: "eggfruit" },
            { text: "FIG", value: "fig", url: "fig" },
            { text: "GRAPEFRUIT", value: "grapefruit", url: "grapefruit" },
            { text: "HONEYDEW", value: "honeydew", url: "honeydew" },
          ],
        }}
      />
    </>
  );
}

任何人都可以帮助我什么建议

Answer 1

我想首先您需要将软件包更新到最新版本。

import { convertFromRaw, EditorState } from "draft-js";
import { useEffect, useState } from "react";
import { Editor as Editors } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

interface Prop {
  setText: (text: string) => void;
  placeholder: string;
}

export default function Editor2({ setText, placeholder }: Prop) {
  const initialContent = {
    blocks: [
      {
        key: "initial",
        text: "",
        type: "unstyled",
        depth: 0,
        inlineStyleRanges: [],
        entityRanges: [],
      },
    ],
    entityMap: {},
  };

  const [editorState, setEditorState] = useState<EditorState>(() => {
    return EditorState.createWithContent(convertFromRaw(initialContent));
  });

  const onEditorStateChange = (editorState: EditorState) => {
    setEditorState(editorState);
    const contentState = editorState.getCurrentContent();
    if (contentState) {
      const plainText = contentState.getPlainText("\u0001");
      console.log("Editor State:", plainText);
      setText(plainText);
    }
  };

  return (
    <Editors
      editorStyle={{}}
      toolbarStyle={{
        background: "transparent",
        color: "white",
        border: "1px solid gray",
      }}
      wrapperStyle={{
        border: "1px solid gray",
        padding: 2,
      }}
      editorState={editorState}
      toolbarClassName="toolbarClassName"
      wrapperClassName="wrapperClassName"
      editorClassName="editorClassName"
      onEditorStateChange={onEditorStateChange}
      placeholder={placeholder}
      mention={{
        separator: " ",
        trigger: "@",
        suggestions: [
          { text: "APPLE", value: "apple" },
          { text: "BANANA", value: "banana", url: "banana" },
          { text: "CHERRY", value: "cherry", url: "cherry" },
          { text: "DURIAN", value: "durian", url: "durian" },
          { text: "EGGFRUIT", value: "eggfruit", url: "eggfruit" },
          { text: "FIG", value: "fig", url: "fig" },
          { text: "GRAPEFRUIT", value: "grapefruit", url: "grapefruit" },
          { text: "HONEYDEW", value: "honeydew", url: "honeydew" },
        ],
      }}
    />
  );
}

这里是您项目的编辑代码。希望你能解决你的问题。