"counterType" is read-only

[hagrume]

Hello

When EditorJS gets previous content from backend (MERN),

content saved :

content { "time": 1732139542891, "blocks": [ { "id": "K_vfMwePP7", "type": "list", "data": { "style": "unordered", "meta": {}, "items": [ { "content": "test1", "meta": {}, "items": [] }, { "content": "test2", "meta": {}, "items": [] } ] } }, { "id": "u6AXCqxnLm", "type": "paragraph", "data": { "text": "" } }, { "id": "LDtPAZIKas", "type": "paragraph", "data": { "text": "aaa" } }, { "id": "lAhFB0-Nzc", "type": "paragraph", "data": { "text": "" } }, { "id": "KpO-FcU0eM", "type": "paragraph", "data": { "text": "" } } ], "version": "2.30.7" }

And when content is pulled from backend :

description { "time": 1732139542891, "blocks": [ { "id": "K_vfMwePP7", "type": "list", "data": { "style": "unordered", "items": [ { "content": "test1", "items": [] }, { "content": "test2", "items": [] } ] } }, { "id": "u6AXCqxnLm", "type": "paragraph", "data": { "text": "" } }, { "id": "LDtPAZIKas", "type": "paragraph", "data": { "text": "aaa" } }, { "id": "lAhFB0-Nzc", "type": "paragraph", "data": { "text": "" } }, { "id": "KpO-FcU0eM", "type": "paragraph", "data": { "text": "" } } ], "version": "2.30.7" }

I have this issue :

Maybe it is obvious ...

[hagrume]

`import React, { useState, useRef, useEffect, useCallback } from "react"; import PetitBoutonEdit from "./PetitBoutonEdit"; import EditorJS from "@editorjs/editorjs"; import Header from "@editorjs/header"; import List from "@editorjs/list"; import Embed from "@editorjs/embed"; import Paragraph from "@editorjs/paragraph"; import "../../styles/editor.css";

export default function Description({ richTextDescription, handleSaveRichText, history = null, }) { const DEFAULT_INITIAL_DATA = { time: new Date().getTime(), blocks: [ { type: "header", data: { text: "test", level: 1, }, }, ], }; const [isEditing, setIsEditing] = useState(false); const [description, setDescription] = useState( richTextDescription || DEFAULT_INITIAL_DATA );

console.log("description", JSON.stringify(description, null, 2));

const ejInstance = useRef();

const initEditor = () => { if (ejInstance.current) { ejInstance.current.destroy(); ejInstance.current = null; }

const editor = new EditorJS({
  holder: "editorjs",
  readOnly: !isEditing,
  autofocus: isEditing,
  tools: {
    embed: {
      class: Embed,
      inlineToolbar: true,
    },
    header: {
      class: Header,
      inlineToolbar: ["link"],
    },
    list: {
      class: List,
      inlineToolbar: true,
      config: {
        defaultStyle: "unordered",
      },
    },
    paragraph: {
      class: Paragraph,
      inlineToolbar: true,
      config: {
        preserveBlank: true,
      },
    },
  },
  //inlineToolbar: ["bold", "italic", "underline", "link", "inlineCode"],
  data: description,
  onReady: () => {
    ejInstance.current = editor;
    console.log("Editor.js is ready to work!");
  },
  onChange: async () => {
    if (isEditing) {
      try {
        let content = await editor.saver.save();
        console.log("content", JSON.stringify(content, null, 2));
        setDescription(content);
        debouncedSave(content);
      } catch (error) {
        console.log("Saving failed: ", error);
      }
    }
  },
});

};

useEffect(() => { initEditor(); }, [isEditing]);

const toggleEditState = () => { setIsEditing((prev) => !prev); };

function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } const debouncedSave = useCallback( debounce((content) => { handleSaveRichText(content); }, 1000), [] );

return (

Description

); } `