mirror of
https://github.com/zebrajr/ladybird.git
synced 2025-12-06 00:19:53 +01:00
90f1c8724b
Nested editing hosts should act as a single big editing host, as long as there are no uneditable elements in between.
44 lines
1.9 KiB
HTML
44 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<div id="a" contenteditable>foo</div>
|
|
<div id="b" contenteditable>foo<span>bar</span></div>
|
|
<button id="c">press me</button>
|
|
<div id="d" contenteditable>foo <span contenteditable>bar</span></div>
|
|
<div id="e" contenteditable>foo <span contenteditable="false">bar <span contenteditable>baz</span></span></div>
|
|
<script src="include.js"></script>
|
|
<script>
|
|
test(() => {
|
|
function reportSelectionAndFocus() {
|
|
const range = getSelection().getRangeAt(0);
|
|
println(`Range: ${range.startContainer} ${range.startOffset} ${range.endContainer} ${range.endOffset}`);
|
|
printElement(document.activeElement);
|
|
}
|
|
|
|
println('-- Simple editing host --');
|
|
const divA = document.querySelector('div#a');
|
|
getSelection().setBaseAndExtent(divA.childNodes[0], 1, divA.childNodes[0], 2);
|
|
reportSelectionAndFocus();
|
|
|
|
println('-- Editing host with nested <span> --');
|
|
const divB = document.querySelector('div#b');
|
|
getSelection().setBaseAndExtent(divB.childNodes[1].childNodes[0], 1, divB.childNodes[1].childNodes[0], 1);
|
|
reportSelectionAndFocus();
|
|
|
|
println('-- Refocusing on same editing host --');
|
|
const buttonElm = document.querySelector('button#c');
|
|
buttonElm.addEventListener('click', () => getSelection().setBaseAndExtent(divB.childNodes[0], 0, divB.childNodes[0], 0));
|
|
const buttonRect = buttonElm.getBoundingClientRect();
|
|
internals.click(buttonRect.left + 5, buttonRect.top + 5);
|
|
reportSelectionAndFocus();
|
|
|
|
println('-- Nested editing host --');
|
|
const spanC = document.querySelector('div#d span');
|
|
getSelection().setBaseAndExtent(spanC.childNodes[0], 0, spanC.childNodes[0], 3);
|
|
reportSelectionAndFocus();
|
|
|
|
println('-- Nested editing host with uneditable element as parent --');
|
|
const spanD = document.querySelector('div#e span span');
|
|
getSelection().setBaseAndExtent(spanD.childNodes[0], 0, spanD.childNodes[0], 3);
|
|
reportSelectionAndFocus();
|
|
});
|
|
</script>
|