jodit / jodit/jodit-react

Error when trying to add a table

Open
#94 4 comments 8 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

"jodit-react": "^1.0.63

Error Stack:

Uncaught TypeError: Node element must be in editor
    at Object.t.error (jodit.min.js:1861)
    at e.setCursorIn (jodit.min.js:8785)
    at HTMLDivElement.<anonymous> (jodit.min.js:18035)
    at HTMLDivElement.f (jodit.min.js:5083)

I'm getting the above error when trying to add a table. The setup is absolutely simple and straightforward; Basically I'm using a function component as shown below.

BTW, I'm really puzzled why the config prop is not partial? Right now I'm forced to add //@ts-ignore to keep compiler from throwing errors.

const config = {
  zIndex: 0,
  readonly: false,
  activeButtonsInReadOnly: ["source", "fullsize", "print", "about"],
  toolbarButtonSize: "middle",
  theme: "default",
  enableDragAndDropFileToEditor: true,
  saveModeInCookie: false,
  spellcheck: true,
  editorCssClass: false,
  triggerChangeEvent: true,
  height: 220,
  direction: "ltr",
  language: "en",
  debugLanguage: false,
  i18n: "en",
  tabIndex: -1,
  toolbar: true,
  enter: "P",
  useSplitMode: false,
  colorPickerDefaultTab: "background",
  imageDefaultWidth: 100,
   removeButtons: [
     "source",
      "about",
      "video",
      "print",
  ],
  events: {},
  textIcons: false,
  uploader: {
    insertImageAsBase64URI: true,
  },
  placeholder: "",
  showXPathInStatusbar: false,
};
export const JoditEditorView = () => {
  const [content, setContent] = useState("");

  const updateContent = (value: string) => {
    setContent(value);
  };

  return (
    <JoditEditor
      value={content}
      // @ts-ignore
      config={config}
      onChange={updateContent}
    />
  );
};

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the table insertion error with the supplied JoditEditorView component and inspect the jodit.min.js stack around setCursorIn. Also investigate how the React wrapper types its config prop. Done means table insertion no longer throws and the config can be passed without the reported TypeScript workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.