Content editable HTML elements not working anymore in v2?

Help Requests
1

I’m having trouble getting the right selection using Html typescript to grab the Range/Selection/Document and edit the contents. This is vital to creating an HTML-editable form like Reddit.com’s editor or TinyMCE-like editor (or Aurelia discourse).

Here’s some of the things I tried. I can get the “selection text” just fine and print it in console.log…

However, when I try to replace, append, insert. Everything inserts to tag, or to tag. I can’t even GetElementById anymore. I don’t understand why it won’t grab the right element from the ShadowDOM.

async createBolded() {
        const selection = document.getSelection();
        //console.log(`Selection :: ${selection}`);
        let range = selection.getRangeAt(0);
        let selectedParent = range.commonAncestorContainer.parentElement; // seem to be "<html>" tag.
        let text = document.createTextNode(selectedParent.textContent);
        let content = selection.toString();
        console.log(`range :: `, range);  // CORRECT range.
        let edit_section = document.getElementById('editsection'); // doesn't work, says "null" in console.
        console.log(edit_section);
        const newStrong = document.createElement("strong");
        newStrong.innerHTML='<span style="color: white">t</span>'; // just a test to see where it's placed
        //range.insertNode(newStrong); // inserts at the end of html or <body> 
        range.endContainer.appendChild(newStrong); // inserts to <html> instead of the Div.

Am I suppose to be using some new Au2 concept or something like Children decorator or slots?

2

There hasnt been any change related to how content editable binding works. Do you have a repro of the issue?

1 Like
3

Well I don’t see how I can use bindings. There is no content-editable example in the docs.

I don’t yet have a repo. I can create an example with stackblitz maybe? But on the main page it only has options for setting up React or Vue–but not Aurelia yet. My code above is my entire code (just a “bolding function”) for a simple “div” with content-editable binding enabled (although I don’t use the binding).

Even if I made it a simple div–without ANY content-editable, the same behavior should happen when I click my triggered button to “make bold.”

I have to use MDN’s Web APIs like “Document” and “getRange”, “getSelection” to get the position of the text.

I have the following output from the range of my selection, as you can see it is falsely claiming that my range is “body” tag, rather than my content editable div.

Range {commonAncestorContainer: body, startContainer: body, startOffset: 3, endContainer: body, endOffset: 3, …}

How can the common ancestor by Body? It should be the deepest element: Div. Or the StartContainer?

That is not the way it works here:

Range.startContainer Read only

Returns the Node within which the Range starts.

4

Can you try from this base example Aurelia 2 content editable - StackBlitz

1 Like
5

This is so bizarre, first I had an error with “click.delegate”, but after I fixed that it works really nicely in StackBlitz.

But in my website, it adds the new text at the beginning of the document, near the HTML tag. Rather than inside the content editable. Strange.

Link here works (same code copy pasted to my website and it starts adding it to the top of the page right at the start of the “body” tag):

What’s so strange about these kinds of bugs is that there is really no way to debug them. If the range is from the div content editable, why does it suddenly think the range is now at the start of the body tag?