Handle selection and caret

Signed-off-by: stevennovaryo <steven.novaryo@gmail.com>
This commit is contained in:
stevennovaryo 2025-05-16 20:27:41 +08:00
parent 4e44ecafd2
commit f638c05710
7 changed files with 116 additions and 27 deletions

View file

@ -118,7 +118,7 @@ rustls-pemfile = "2.0"
rustls-pki-types = "1.12"
script_layout_interface = { path = "components/shared/script_layout" }
script_traits = { path = "components/shared/script" }
selectors = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
selectors = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
serde = "1.0.219"
serde_bytes = "0.11"
serde_json = "1.0"
@ -126,7 +126,7 @@ servo-media = { git = "https://github.com/servo/media" }
servo-media-dummy = { git = "https://github.com/servo/media" }
servo-media-gstreamer = { git = "https://github.com/servo/media" }
servo-tracing = { path = "components/servo_tracing" }
servo_arc = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
servo_arc = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
smallbitvec = "2.6.0"
smallvec = "1.15"
snapshot = { path = "./components/shared/snapshot" }
@ -135,12 +135,12 @@ string_cache = "0.8"
string_cache_codegen = "0.5"
strum = "0.26"
strum_macros = "0.26"
stylo = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo_atoms = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo_config = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo_dom = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo_malloc_size_of = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo_traits = { git = "https://github.com/servo/stylo", branch = "2025-05-01" }
stylo = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
stylo_atoms = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
stylo_config = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
stylo_dom = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
stylo_malloc_size_of = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
stylo_traits = { git = "https://github.com/stevennovaryo/stylo", branch = "text-editing-root" }
surfman = { git = "https://github.com/servo/surfman", rev = "f7688b4585f9e0b5d4bf8ee8e4a91e82349610b1", features = ["chains"] }
syn = { version = "2", default-features = false, features = ["clone-impls", "derive", "parsing"] }
synstructure = "0.13"
@ -223,7 +223,7 @@ codegen-units = 1
#
# Or for Stylo:
#
# [patch."https://github.com/servo/stylo"]
# [patch."https://github.com/stylo/stylo"]
# selectors = { path = "../stylo/selectors" }
# servo_arc = { path = "../stylo/servo_arc" }
# stylo = { path = "../stylo/style" }

View file

@ -219,6 +219,16 @@ fn traverse_children_of<'dom>(
} else {
handler.handle_text(&info, node_text_content);
}
} else if parent_element.is_text_editing_root() {
let info = NodeAndStyleInfo::new(
parent_element,
parent_element.style(context.shared_context()),
);
for child in iter_child_nodes(parent_element) {
if child.is_text_node() {
handler.handle_text(&info, child.to_threadsafe().node_text_content());
}
}
} else {
for child in iter_child_nodes(parent_element) {
if child.is_text_node() {

View file

@ -2,6 +2,7 @@
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at https://mozilla.org/MPL/2.0/. */
use std::any::Any;
use std::borrow::Cow;
use std::char::{ToLowercase, ToUppercase};
@ -302,7 +303,6 @@ impl InlineFormattingContextBuilder {
if new_text.is_empty() {
return;
}
let selection_range = info.get_selection_range();
if let Some(last_character) = new_text.chars().next_back() {
self.on_word_boundary = last_character.is_whitespace();

View file

@ -865,6 +865,13 @@ impl LayoutDom<'_, Element> {
pub(super) fn focus_state(self) -> bool {
self.unsafe_get().state.get().contains(ElementState::FOCUS)
}
pub(super) fn text_editing_root(self) -> bool {
self.unsafe_get()
.state
.get()
.contains(ElementState::TEXT_EDITING_ROOT)
}
}
impl<'dom> LayoutElementHelpers<'dom> for LayoutDom<'dom, Element> {
@ -4879,6 +4886,10 @@ impl Element {
self.set_state(ElementState::FULLSCREEN, value)
}
pub(crate) fn set_text_editing_root_state(&self, value: bool) {
self.set_state(ElementState::TEXT_EDITING_ROOT, value)
}
/// <https://dom.spec.whatwg.org/#connected>
pub(crate) fn is_connected(&self) -> bool {
self.upcast::<Node>().is_connected()

View file

@ -119,22 +119,23 @@ struct InputTypeColorShadowTree {
color_value: Dom<HTMLDivElement>,
}
// FIXME: These styles should be inside UA stylesheet,
// but we should support pseudo element first.
const TEXT_TREE_STYLE: &str = "
#input-editing-root::selection, #input-placeholder::selection {
background: rgba(176, 214, 255, 1.0);
color: black;
}
#input-editing-root, #input-placeholder {
scrollbar-width: none;
resize: none;
word-wrap: normal;
overflow-wrap: normal;
white-space: pre;
pointer-events: none;
}
#input-placeholder {
color: grey;
overflow: hidden;
pointer-events: none;
user-select: none;
direction: inherit;
text-orientation: inherit;
writing-mode: inherit;
}
";
@ -1112,10 +1113,17 @@ impl HTMLInputElement {
let shadow_root = self.shadow_root(can_gc);
Node::replace_all(None, shadow_root.upcast::<Node>(), can_gc);
let placeholder_container = HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
let placeholder_container =
HTMLDivElement::new(local_name!("div"), None, &document, None, can_gc);
placeholder_container
.upcast::<Element>()
.SetId(DOMString::from("input-placeholder"), can_gc);
// MYNOTES:
// This is not a text editing root, but we should do this to show it's
// editing caret when placeholder is still visible
placeholder_container
.upcast::<Element>()
.set_text_editing_root_state(true);
shadow_root
.upcast::<Node>()
.AppendChild(placeholder_container.upcast::<Node>(), can_gc)
@ -1125,6 +1133,11 @@ impl HTMLInputElement {
text_container
.upcast::<Element>()
.SetId(DOMString::from("input-editing-root"), can_gc);
// We should probably use pseudo element to check this.
// Chrome is using (private?) element attrs,
text_container
.upcast::<Element>()
.set_text_editing_root_state(true);
shadow_root
.upcast::<Node>()
.AppendChild(text_container.upcast::<Node>(), can_gc)
@ -1250,14 +1263,20 @@ impl HTMLInputElement {
let text_shadow_tree = self.text_shadow_tree(can_gc);
let value = self.Value();
let placeholder_text = if value.len() == 0 {
self.placeholder.to_owned().take()
} else {
DOMString::new()
let placeholder_text = match (value.is_empty(), self.placeholder.borrow().is_empty()) {
(true, false) => self.placeholder.to_owned().take(),
(true, true) => "\u{200B}".into(),
_ => DOMString::new(),
};
text_shadow_tree.placeholder_container.upcast::<Node>().SetTextContent(Some(placeholder_text), can_gc);
text_shadow_tree.text_container.upcast::<Node>().SetTextContent(Some(value), can_gc);
text_shadow_tree
.placeholder_container
.upcast::<Node>()
.SetTextContent(Some(placeholder_text), can_gc);
text_shadow_tree
.text_container
.upcast::<Node>()
.SetTextContent(Some(value), can_gc);
}
if self.input_type() == InputType::Color {
let color_shadow_tree = self.color_shadow_tree(can_gc);

View file

@ -1614,6 +1614,12 @@ pub(crate) trait LayoutNodeHelpers<'dom> {
/// Whether this element is a `<input>` rendered as text or a `<textarea>`.
fn is_text_input(&self) -> bool;
/// Whether this element is a text input with Shadow DOM.
fn is_text_input_with_shadow_dom(&self) -> bool;
/// Whether this element serve as a container of editable text for a text input.
fn text_editing_root(&self) -> bool;
fn text_content(self) -> Cow<'dom, str>;
fn selection(self) -> Option<Range<usize>>;
fn image_url(self) -> Option<ServoUrl>;
@ -1788,8 +1794,7 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
let input = self.unsafe_get().downcast::<HTMLInputElement>().unwrap();
// FIXME: All the non-color and non-text input types currently render as text
input.input_type() != InputType::Color &&
input.input_type() != InputType::Text
!matches!(input.input_type(), InputType::Color | InputType::Text)
} else {
type_id ==
NodeTypeId::Element(ElementTypeId::HTMLElement(
@ -1798,6 +1803,28 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
}
}
fn is_text_input_with_shadow_dom(&self) -> bool {
let type_id = self.type_id_for_layout();
if type_id ==
NodeTypeId::Element(ElementTypeId::HTMLElement(
HTMLElementTypeId::HTMLInputElement,
))
{
let input = self.unsafe_get().downcast::<HTMLInputElement>().unwrap();
matches!(input.input_type(), InputType::Color | InputType::Text)
} else {
false
}
}
fn text_editing_root(&self) -> bool {
match self.downcast::<Element>() {
Some(element) => element.text_editing_root(),
_ => false,
}
}
fn text_content(self) -> Cow<'dom, str> {
if let Some(text) = self.downcast::<Text>() {
return text.upcast().data_for_layout().into();
@ -1815,6 +1842,24 @@ impl<'dom> LayoutNodeHelpers<'dom> for LayoutDom<'dom, Node> {
}
fn selection(self) -> Option<Range<usize>> {
// This container is a text editing root of a <input> or <textarea> element.
// So we should find those corresponding element, and get its selection.
if self.text_editing_root() {
let mut maybe_parent_node = self.composed_parent_node_ref();
while let Some(parent_node) = maybe_parent_node {
if let Some(area) = parent_node.downcast::<HTMLTextAreaElement>() {
return area.selection_for_layout();
}
if let Some(input) = parent_node.downcast::<HTMLInputElement>() {
return input.selection_for_layout();
}
maybe_parent_node = parent_node.composed_parent_node_ref();
}
panic!("Text input element not found!");
}
if let Some(area) = self.downcast::<HTMLTextAreaElement>() {
return area.selection_for_layout();
}

View file

@ -100,6 +100,10 @@ impl<'dom> ServoLayoutNode<'dom> {
pub fn is_text_input(&self) -> bool {
self.node.is_text_input()
}
pub fn is_text_editing_root(&self) -> bool {
self.node.text_editing_root()
}
}
impl style::dom::NodeInfo for ServoLayoutNode<'_> {