[Bug] Continue editing after saving

[yanielbf]

Hi, I have been using the Editor.js and it seems very good. I have a problem, when I execute the editor.save() function, it returns a promise with the data but it destroys the editor instance. I need to keep this instance for follow editing. Also I would like to know how to get the output blocks in the editor's onChange method. Greetings

[gohabereg]

Hey @yanielbf

1. editor.save() is not meant to destroy the instance, so the problem should be somewhere else. Could you provide any additional info?
2. You can execute editor.save() inside onChange callback to get saved data

[yanielbf]

@gohabereg Thank for fast answer. I am using the editor in Laravel. This my code

<div>
    <style>
        h1, h2, h3, h4, h5, h6 {
            font-weight: bold;
        }
        .codex-editor__redactor{
            margin-right: 0px !important;
        }
    </style>
    <button wire:click="$emit('board-save-content')" type="button" class="bg-blue-700 hover:bg-blue-800 text-white 
        border-transparent full inline-flex justify-center 
        rounded border shadow-sm px-4 py-2 text-base font-medium 
        focus:outline-none sm:w-auto sm:text-sm px-20">
        Save
    </button>
    <div class="rounded-md p-8 shadow mt-4">
        <div id="editorjs"></div>
    </div>
    @livewireScripts
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/link"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/raw"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/simple-image@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/image@2.3.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/checklist@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/list@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/embed@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/quote@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/@editorjs/attaches@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/editorjs-alert@latest"></script>
    <script src="https://cdn.jsdelivr.net/npm/editorjs-paragraph-with-alignment@2.0.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/editorjs-header-with-anchor@2.6.0"></script>
    <script>
        function createEditor(data){
            return new EditorJS({ 
                /** 
                 * Id of Element that should contain the Editor 
                 */ 
                data: data || {},
                holder: 'editorjs', 
                tools: {
                    header: {
                        class: Header,
                        config: {
                            placeholder: 'Enter a header',
                            levels: [1, 2, 3, 4, 5, 6],
                            defaultLevel: 1
                        }
                    },
                    raw: RawTool,
                    linkTool: {
                        class: LinkTool,
                        config: {
                            endpoint: @this.board_link_url
                        }
                    },
                    image: {
                        class: ImageTool,
                        config: {
                            endpoints: {
                                byFile: @this.board_image_from_file,
                                byUrl: @this.board_image_from_url
                            }
                        }
                    },
                    list: {
                        class: List,
                        inlineToolbar: true,
                    },
                    embed: {
                        class: Embed,
                        inlineToolbar: true,
                        config: {
                            services: {
                                youtube: true,
                                codepen: true,
                                instagram: true,
                                twitter: true,
                                "twitch-video": true
                            }
                        }
                    },
                    attaches: {
                        class: AttachesTool,
                        config: {
                            endpoint: @this.board_attach_from_file
                        }
                    },
                    quote: Quote,
                    alert: {
                        class: Alert,
                        inlineToolbar: true,
                        shortcut: 'CMD+SHIFT+A',
                        config: {
                            defaultType: 'primary',
                            messagePlaceholder: 'Enter something',
                        },
                    },
                    paragraph: {
                        class: Paragraph,
                        inlineToolbar: true,
                    },
                },
            });
        }
        document.addEventListener('livewire:load', function () {
            let editor = createEditor();
            Livewire.on('board-save-content', postId => {
                editor.save().then((outputData) => {
                    console.log(outputData)
                }).catch((error) => {
                    console.log('Saving failed: ', error)
                })
            })
        })
    </script>
</div

I inspect the code with the chrome inspector and when I create it for the first time it works fine but when I save it it gives me only the <div id = "editorjs"> </div>. I assume you are destroying it. Greetings

[gohabereg]

I'm not really familiar with Lavarel, but make sure the page is not reloaded or some similar event which makes scripts to re-run

[yanielbf]

@gohabereg Can you show me an example for save data in onChange. !!!

[gohabereg]

const editor = new EditorJS({
  ...,
  onChange: () => {
    editor.save().then(processSavedData)
  }
})

[yanielbf]

@gohabereg, Hi, I found my problem. The page was re-rendering the DOM and removing the editor. Sorry for my mistake. Before closing, could you tell me if you use any css style by default to apply to the editor? Greetings

[gohabereg]

Editor.js comes with packed default styles

[yanielbf]

@gohabereg Thank you for your help!!!