ladybird/Tests/LibWeb/Text/input/Editing/execCommand-insertText.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="../include.js"></script>
<div contenteditable="true">foobar</div>
<script>
    test(() => {
        const selection = getSelection();
        const reportSelection = () => {
            if (selection.rangeCount === 0) {
                println('No range.');
                return;
            }
            const range = selection.getRangeAt(0);
            println(`${range.startContainer.nodeName} ${range.startOffset} - ${range.endContainer.nodeName} ${range.endOffset}`);
        };

        var divElm = document.querySelector('div');
        divElm.addEventListener('input', (e) => println('input triggered'));

        // Put cursor between 'foo' and 'bar'
        selection.setBaseAndExtent(divElm.childNodes[0], 3, divElm.childNodes[0], 3);

        // Insert text
        document.execCommand('insertText', false, 'baz');
        reportSelection();

        // Insert Unicode
        document.execCommand('insertText', false, '🙂');
        reportSelection();

        println(divElm.innerHTML);
    });
</script>
Meta: Add DOCTYPEs to most text tests 2025-03-18 15:28:35 -03:00			`<!DOCTYPE html>`
Tests: Add explicit UTF-8 charset declarations to existing tests 2026-05-18 08:35:08 -03:00			`<meta charset="utf-8">`
LibWeb: Implement the "insertText" editing command Minus the autolinking algorithm. 2025-01-10 09:28:32 -03:00			`<script src="../include.js"></script>`
			`<div contenteditable="true">foobar</div>`
			`<script>`
			`test(() => {`
LibWeb: Convert Editing API internals to UTF-16 Both sides of the Editing internals now have to deal with some awkward converting between UTF-8 and UTF-16, but the upside is that it immediately exposed an issue with the `insertText` command: instead of dealing with code units, it was iterating over code points causing the selection to be updated only once instead of twice. This resulted in the final selection potentially ending up in between a surrogate pair. Fixes #5547 (pasting/typing surrogate pairs). 2025-07-23 06:43:21 -03:00			`const selection = getSelection();`
			`const reportSelection = () => {`
			`if (selection.rangeCount === 0) {`
			`println('No range.');`
			`return;`
			`}`
			`const range = selection.getRangeAt(0);`
			println(`${range.startContainer.nodeName} ${range.startOffset} - ${range.endContainer.nodeName} ${range.endOffset}`);
			`};`

LibWeb: Implement the "insertText" editing command Minus the autolinking algorithm. 2025-01-10 09:28:32 -03:00			`var divElm = document.querySelector('div');`
LibWeb: Fire `input` events in `.execCommand()` We do not fire `beforeinput` events since other browsers do not seem to do so either. The spec asks us to check whether a command's action modified the DOM tree. This means adding or removing nodes and attributes, or changing character data anywhere in the tree. We have `Document::dom_tree_version()` for node updates, but for character data a new version number is introduced that allows us to easily keep track of any text changes in the entire tree. 2025-01-23 06:50:00 -03:00			`divElm.addEventListener('input', (e) => println('input triggered'));`
LibWeb: Implement the "insertText" editing command Minus the autolinking algorithm. 2025-01-10 09:28:32 -03:00
			`// Put cursor between 'foo' and 'bar'`
LibWeb: Convert Editing API internals to UTF-16 Both sides of the Editing internals now have to deal with some awkward converting between UTF-8 and UTF-16, but the upside is that it immediately exposed an issue with the `insertText` command: instead of dealing with code units, it was iterating over code points causing the selection to be updated only once instead of twice. This resulted in the final selection potentially ending up in between a surrogate pair. Fixes #5547 (pasting/typing surrogate pairs). 2025-07-23 06:43:21 -03:00			`selection.setBaseAndExtent(divElm.childNodes[0], 3, divElm.childNodes[0], 3);`
LibWeb: Implement the "insertText" editing command Minus the autolinking algorithm. 2025-01-10 09:28:32 -03:00
			`// Insert text`
			`document.execCommand('insertText', false, 'baz');`
LibWeb: Convert Editing API internals to UTF-16 Both sides of the Editing internals now have to deal with some awkward converting between UTF-8 and UTF-16, but the upside is that it immediately exposed an issue with the `insertText` command: instead of dealing with code units, it was iterating over code points causing the selection to be updated only once instead of twice. This resulted in the final selection potentially ending up in between a surrogate pair. Fixes #5547 (pasting/typing surrogate pairs). 2025-07-23 06:43:21 -03:00			`reportSelection();`

			`// Insert Unicode`
			`document.execCommand('insertText', false, '🙂');`
			`reportSelection();`
LibWeb: Implement the "insertText" editing command Minus the autolinking algorithm. 2025-01-10 09:28:32 -03:00
			`println(divElm.innerHTML);`
			`});`
			`</script>`