Adding dynamic HTML content to ContentEdit Element

[Filip785]

Hello,

Is it possible that if I add some dynamic HTML like this:

<div class="block">
    <h1 id="headingText">Heading Text</h1>
    <p id="subheadingText">Subheading text</p>
</div>

to the ContentEdit element (like ContentEdit.Text) to prevent removing elements from the DOM when all of the text is removed from them. Ideally, what I am trying to do is that if you remove the text from h1 tag for example, the caret would stay at the index 0 and if you press the backspace again nothing would happen.

The second question I have is if it is possible to, again, add dynamic HTML to the ContentEdit element and keep the empty tags. For example if I add HTML like this:

<div class="block">
    <h1>Heading text</h1>
    <!-- Gets removed by HTMLString -->
    <div class="emptyBlock"></div>
</div>

Div element with the class of emptyBlock would be removed from the DOM. I have debugged this little bit and discovered that _Parser.prototype._popTag function of html-string.js removes them, but I am unable to prevent it. Is there any solution to this? I know that by adding   to the empty element would prevent it from being removed from the DOM but this doesn't work for me in every case since in some elements I need to add HTML that looks like this:

<svg width="..." height="...">
    <!-- This element again gets removed from the DOM -->
    <path d="..." />
</svg>

Any help would be greatly appreciated.

[iljabauer]

Ideally, what I am trying to do is that if you remove the text from h1 tag for example, the caret would stay at the index 0 and if you press the backspace again nothing would happen.

I think you can do this by calling .can("remove", false) during initialization on the nodes which shouldn't be deleted.

[Filip785]

Thanks for the answer. I have tried to add the attribute (such as data-dont-remove) to the child nodes like this...

<div class="block">
    <h1 id="headingText" data-cant-remove>Heading Text</h1>
    <p id="subheadingText" data-cant-remove>Subheading text</p>
</div>

After that I would do something like:

let block = document.getElementsByClassName('block')[0];
let nodes = block.querySelectorAll('[data-cant-remove]');

for(let node of nodes) {
    let newElement = ContentEdit.Text.fromDOMElement(node);

    let newRegion = new ContentEdit.Region(block);

    newElement.can('remove', false);

    newRegion.attach(newElement);
    // also tried adding .can('remove', false); here... 
}

Even with this, the elements still get removed from the DOM once there is no text left in them and I press backspace again. Do you have any other solution?

Thanks.

[anthonyjb]

Ho @Filip785 looking at the code here: https://github.com/GetmeUK/ContentEdit/blob/master/src/scripts/text.coffee#L43

If you've set remove behaviour to false then the text element should not get removed on blur, if it is then this is something I need to look at, I'm wondering if the behaviour isn't getting set though it works when set with fixtures in other projects I'm working on (fixtures are another option here btw).

I'd suggest that you check (console.log) that the element has the behaviour remove set to false by patching the blur function in a local copy of CE and check it is to narrow down the issue.

[Filip785]

Hey, the blur function is working correctly, I've just checked, but my problem is not with the blur.

The problem that I have is that when I add HTML to the region, the nodes such as h1 in the previous code snippet would get removed from the DOM once they don't have any characters left and back space is pressed. That's what I am trying to prevent. I'd like it to, when the node has no more content the caret stays at the index 0 and doesn't remove the whole element from the DOM.