I’m using the Jodit editor in my React project and have encountered a problem with content insertion at the cursor position. When I first click in the editor and insert content, it is added at the correct cursor position. However, subsequent content additions are inserted at the beginning of the editor instead of the cursor’s current position. Only if I click out and back into the editor does the insertion happen at the correct position again.

I am working with nextjs 14.0.3 and
“jodit”: “^4.2.27”,
“jodit-react”: “^4.1.2”,

Here is the relevant part of my code:

  useEffect(() => {
      if (newData && jodit) {
        const tempDiv = document.createElement("div");
        tempDiv.innerHTML = newData;
        const newNode = tempDiv.firstChild;
        if (newNode) {
          jodit.selection.insertNode(newNode as HTMLElement);
        }
      }
    }, [newData, jodit]);

And here the whole code (component).

import React, {
  useEffect,
  useMemo,
  useRef,
  useState,
  forwardRef,
  useImperativeHandle,
} from "react";
import dynamic from "next/dynamic";
import { Jodit } from "jodit";
import { addBorderToTdElements } from "@/utils/tablePostProcessing";

const JoditEditor = dynamic(() => import("jodit-react"), {
  ssr: false,
});

interface Props {
  data?: any;
  extContent?: string;
  setExtContent?: (a: string) => void;
  setTextEditorValue: Function;
  setJoditCallback?: (a: Jodit | undefined) => void;
  disabled?: boolean;
  reset: string | null;
  width?: number;
  font?: string;
  newData?: string;
}

const JoditTextEditor = forwardRef(
  (
    {
      data,
      extContent,
      setExtContent,
      setTextEditorValue,
      setJoditCallback,
      disabled,
      reset,
      width,
      font,
      newData,
    }: Props,
    ref
  ) => {
    const [jodit, setJodit] = useState<Jodit>();
    const [content, setContent] = useState(data);

    useEffect(() => {
      setContent(data);
    }, [data]);

    useEffect(() => {
      setJoditCallback && setJoditCallback(jodit);
    }, [jodit]);

    useEffect(() => {
      if (reset !== null) {
        setContent(reset);
      }
    }, [reset]);

    useImperativeHandle(ref, () => ({
      insertText: (text: string) => {
        if (jodit) {
          jodit.selection.insertHTML(text);
        }
      },
    }));

    const config: any = useMemo(
      () => ({
        statusbar: false,
        tabIndex: 1,
        buttons: ["bold", "italic", "underline", "strikethrough", "align", "indent", "outdent", "ul", "ol", "table", "|", "hr", "eraser", "|", "font", "fontsize", "paragraph", "lineHeight", "brush", "spellcheck", "symbols", "|", "undo", "redo", "image"],
        toolbarAdaptive: false,
        removeButtons: ["fullsize", "preview", "file", "video", "print", "find", "copy", "paste", "selectAll", "link"],
        showTooltip: true,
        showTooltipDelay: 0,
        toolbarSticky: true,
        minHeight: 400,
        style: {
          padding: "5px 58px",
          font: `16px ${!font ? "Times New Roman" : `${font}`}, serif`,
        },
        readonly: !!disabled,
        uploader: {
          insertImageAsBase64URI: true,
        },
        events: {
          afterInit: (editor: Jodit) => {
            setJodit(editor);
          },
        },
        askBeforePasteFromWord: false,
        askBeforePasteHTML: false,
        controls: {
          fontsize: {
            list: {
              "10": "6",
              "12": "8",
              "14": "10",
              "16": "12",
              "18": "14",
              "20": "16",
              "22": "18",
              "24": "20",
              "26": "22",
              "28": "24",
              "30": "26",
              "32": "28",
              "34": "30",
              "36": "32",
              "38": "34",
            },
          },
        },
        disablePlugins: ["add-new-line"],
      }),
      [disabled]
    );

    useEffect(() => {
      if (newData && jodit) {
        const tempDiv = document.createElement("div");
        tempDiv.innerHTML = newData;
        const newNode = tempDiv.firstChild;
        if (newNode) {
          jodit.selection.insertNode(newNode as HTMLElement);
        }
      }
    }, [newData, jodit]);

    return (
      <div className={`shadow ${width ? `w-[${width}px]` : "w-[720px]"}`} style={{ borderRadius: "10px" }}>
        <JoditEditor
          value={extContent ?? content}
          config={config}
          onBlur={(newContent) => {
            newContent = addBorderToTdElements(newContent);
            setExtContent ? setExtContent(newContent) : setContent(newContent);
          }}
          onChange={(newContent) => {
            newContent = addBorderToTdElements(newContent);
            setTextEditorValue(newContent);
          }}
        />
      </div>
    );
  }
);

export default JoditTextEditor;

I’m using the Jodit editor in my React project and have encountered a problem with content insertion at the cursor position. When I first click in the editor and insert content, it is added at the correct cursor position. However, subsequent content additions are inserted at the beginning of the editor instead of the cursor’s current position. Only if I click out and back into the editor does the insertion happen at the correct position again.