Save issue - saves fine, but won't allow a second "save"

[chronofish]

Hi - thanks for the great library! When I listen to the "saved" event, it triggers successfully, but it seems the tools stop listening. (I can no longer hilight and edit). If I trigger save a second time, I get

Uncaught TypeError: Cannot read property 'removeAttribute' of null
    at c.unmount (contentTools.js:110)
    at c.save (contentTools.js:113)
    at HTMLElement.sb.onclick (contentTools.js:946)
c.unmount @ contentTools.js:110
c.save @ contentTools.js:113
sb.onclick @ contentTools.js:946

Even if I just return without doing anything this happens. For example:

editor.addEventListener('saved', async function (ev) {
        var name, payload, regions, xhr, template;
        return true;
    });

Is the API expecting a return code or some sort of trigger to indicate success and return to an editable state?

[anthonyjb]

Hi @chronofish can you post enough of your JS and HTML somewhere I can have a look, clearly something is going wrong the first time save is called (you don't need to return anything) but I can't see what from the information you've provided. The error the second time around is likely due to the editor not being put into the right state after the first save and some element being missing.

[chronofish]

Relevant HTML Save button

<div class='col mt-auto text-right'>
        <i class="fas fa-save " id='saveButton'></i>        
 </div>

Editable section

<section
                    class="[ part_content ]  [ formatted ] m-0 p-0"
                    data-editable
                    data-name="part_content"
                    >
                <!-- editable part_content -->
                        <h2>Place cursor and start editing!</h2>
                        <p>
                            You can use the floating toolbar to edit this document - just be sure to hit the save button before you're done!
                        </p>
                        <p>
                            More fund stuff
                        </p>
                <!-- endeditable part_content -->
            </section>

javascript (file called contentTools.js)

// ContentTools
import ContentTools from'ContentTools/build/content-tools.min.js';

window.addEventListener('load', function() {
    var editor;

    ContentTools.StylePalette.add([
        new ContentTools.Style('Author', 'author', ['p'])
    ]);

    editor = ContentTools.EditorApp.get();
    editor.init('*[data-editable]', 'data-name', '', false);

    editor.addEventListener('saved', async function (ev) {
        var name, payload, regions, xhr, template;
        return true;
    });

var sb = document.getElementById('saveButton');
    sb.onclick = function() {
        editor.save();
    }

    editor.start();
});

[chronofish]

Also - thanks for the impressively fast response!

[anthonyjb]

Ah OK so you have a custom save button - no worries but this explains why the editors state is getting out of wack.

So if your save button is passive (as in you want the button to save the document but not exit the editing mode) then when you call save flag that you want this to be a passive save save(true).

However, if you want the save button to save the changes and exit edit mode then you need to stop the editor, something like:

editor.ignition().state('ready')
editor.stop(true)

Let me know if that helps out.

[chronofish]

YES! Thank you! that was a super easy fix!