mirror of
https://github.com/fergalmoran/ladybird.git
synced 2026-01-01 14:18:15 +00:00
LibWebView: Auto-select subtext when editing DOM nodes/attributes
This adds the following behavior for the DOM node/attribute editor in the Inspector: * If the user double clicks on an attribute name, the name is selected. * If the user double clicks on an attribute value, the value text (sans the surrounding quotes) is selected. * Otherwise, double clicks select the entire text range.
This commit is contained in:
committed by
Andreas Kling
parent
8fb2cc2be1
commit
7fff00972d
@@ -126,7 +126,14 @@ inspector.loadDOMTree = tree => {
|
|||||||
|
|
||||||
for (let domNode of domNodes) {
|
for (let domNode of domNodes) {
|
||||||
domNode.addEventListener("dblclick", event => {
|
domNode.addEventListener("dblclick", event => {
|
||||||
editDOMNode(domNode);
|
const type = domNode.dataset.nodeType;
|
||||||
|
const text = event.target.innerText;
|
||||||
|
|
||||||
|
if (type === "attribute" && event.target.classList.contains("attribute-value")) {
|
||||||
|
text = text.substring(1, text.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
editDOMNode(domNode, text);
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@@ -329,9 +336,6 @@ const createDOMEditor = (onHandleChange, onCancelChange) => {
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
input.focus();
|
input.focus();
|
||||||
|
|
||||||
// FIXME: Invoke `select` when it isn't just stubbed out.
|
|
||||||
// input.select();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return input;
|
return input;
|
||||||
@@ -344,7 +348,7 @@ const parseDOMAttributes = value => {
|
|||||||
return element.children[0].attributes;
|
return element.children[0].attributes;
|
||||||
};
|
};
|
||||||
|
|
||||||
const editDOMNode = domNode => {
|
const editDOMNode = (domNode, textToSelect) => {
|
||||||
if (selectedDOMNode === null) {
|
if (selectedDOMNode === null) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -382,6 +386,18 @@ const editDOMNode = domNode => {
|
|||||||
editor.value = domNode.innerText;
|
editor.value = domNode.innerText;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
if (typeof textToSelect !== "undefined") {
|
||||||
|
const index = editor.value.indexOf(textToSelect);
|
||||||
|
if (index !== -1) {
|
||||||
|
editor.setSelectionRange(index, index + textToSelect.length);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
editor.select();
|
||||||
|
});
|
||||||
|
|
||||||
domNode.parentNode.replaceChild(editor, domNode);
|
domNode.parentNode.replaceChild(editor, domNode);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user