HiddenInput div appears when hitting backspace on empty div

[JohnKuan]

Hi @stevengharris,

I have noticed that when the content is empty, hitting backspace will cause a div counter to be visible at the bottom of the main editable div. I went through the logic in markup.js file to get a gist of it, its related to the undo and redo function, and there is a logic that modifies the visibility style of the div. I am not sure what is the purpose of it being visible.

I have attached a screen recording of this occurring.
https://user-images.githubusercontent.com/4402214/167055277-ac743213-878e-4e9a-be7a-8282dc5e37da.mp4

[stevengharris]

Thanks, yes, the div is used in the undoer (a hack because there is no undo API to hook into). You can fix this by modifying _cleanUpAttributes as follows. Besides avoiding the problem you noticed, this also makes sure the editor is left with a blank paragraph in its "empty" state. I will fold this into the coming update.

const _cleanUpAttributes = function(attribute) {
    const sel = document.getSelection();
    const selNode = (sel) ? sel.anchorNode : null;
    let startNode;
    if (selNode === MU.editor) {
        startNode = MU.editor;
    } else {
        startNode = (selNode) ? selNode.parentNode : MU.editor;
    };
    if (startNode) {
        const attributesRemoved = _cleanUpAttributesWithin(attribute, startNode);
        if (attributesRemoved > 0) {
            _callback('input');
        } else if ((startNode === MU.editor) && (startNode.childNodes.length === 0)) {
            _initializeRange();
            _callback('input');
        };
    };
};

[JohnKuan]

Thanks Steven! This seems to be working well. I can also create a PR to merge into your main branch.

[stevengharris]

This fix is included in 0.3.2. Thx.