codex-team / editor.js

A block-style editor with clean JSON output
https://editorjs.io
Apache License 2.0
28.4k stars 2.07k forks source link

Multiple plugins do not work #2588

Open Jean-PhilippeD opened 8 months ago

Jean-PhilippeD commented 8 months ago

Hello,

I've opened this issue regarding an issue while undoing.

But I think I have a global problem because toggle-blocks and dragdrop does not work neither.

I use EditorJS within React app. In my case, we use readOnlymode so first we toggle the readOnly.

DragDropissue: No drag event appears when I click on menu button

Toggleissue: I can create a toggle, name it and create block inside. But when I save (and toggle ReadOnly), the blocks inside appears outside and the toggle is empty and does not toggle, even empty.

Device, Browser, OS: Windows 10
Editor.js version:  2.29.0
ReactJS version: 18.2.0

Plugins you use with their versions:

"@calumk/editorjs-codeflask": "^1.0.9",
"@editorjs/attaches": "^1.3.0",
"@editorjs/checklist": "^1.6.0",
"@editorjs/code": "^2.9.0",
"@editorjs/delimiter": "^1.4.0",
"@editorjs/editorjs": "^2.29.0-rc.8",
"@editorjs/embed": "^2.7.0",
"@editorjs/header": "^2.8.1",
"@editorjs/image": "^2.9.0",
"@editorjs/inline-code": "^1.5.0",
"@editorjs/list": "^1.9.0",
"@editorjs/marker": "^1.4.0",
"@editorjs/paragraph": "^2.11.3",
"@editorjs/quote": "^2.6.0",
"@editorjs/simple-image": "^1.6.0",
"@editorjs/table": "^2.3.0",
"@editorjs/text-variant-tune": "^1.0.1",
"@editorjs/underline": "^1.1.0",
"editorjs-alert": "^1.1.3",
"editorjs-drag-drop": "^1.1.13",
"editorjs-header-with-anchor": "^2.6.0",
"editorjs-mermaid": "^1.0.0",
"editorjs-text-alignment-blocktune": "^1.0.3",
"editorjs-text-color-plugin": "^2.0.4",
"editorjs-toggle-block": "^0.3.14",
"editorjs-tooltip": "^1.1.15",
"editorjs-undo": "^2.0.22"

Here is how I create EditorJS instance :

useEffect(() => {
        if (!isLoading) {
            editorRef.current = new EditorJS({
                holder: 'editorjs-container',
                autofocus: false,
                onReady: () => {
                    const editor = editorRef.current;
                    // const undo = new Undo({ editor });
                    // undo.initialize(props.defaultValue);  // Removed until fixe https://github.com/kommitters/editorjs-undo/issues/242
                    // new DragDrop(editor); // Wait for Drag&Drop native https://github.com/codex-team/editor.js/pull/2285

                },
                defaultBlock: 'paragraph',
                tools: editorTools,
                data: props.defaultValue,
                readOnly: props.readOnly
            });

            return () => {
                if (editorRef.current && editorRef.current.destroy) {
                    editorRef.current.destroy();
                    editorRef.current = null;
                }
            };
        }
    }, [isLoading, props.readOnly, props.reloadCount]);
huangshaomo commented 8 months ago

I switched to reading mode and back again just like you and all the plugins stopped working