1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-06-08 05:27:14 +09:00

LibWeb: Separate text control input events handling from contenteditable

This input event handling change is intended to address the following
design issues:
- Having `DOM::Position` is unnecessary complexity when `Selection`
  exists because caret position could be described by the selection
  object with a collapsed state. Before this change, we had to
  synchronize those whenever one of them was modified, and there were
  already bugs caused by that, i.e., caret position was not changed when
  selection offset was modified from the JS side.
- Selection API exposes selection offset within `<textarea>` and
  `<input>`, which is not supposed to happen. These objects should
  manage their selection state by themselves and have selection offset
  even when they are not displayed.
- `EventHandler` looks only at `DOM::Text` owned by `DOM::Position`
  while doing text manipulations. It works fine for `<input>` and
  `<textarea>`, but `contenteditable` needs to consider all text
  descendant text nodes; i.e., if the cursor is moved outside of
  `DOM::Text`, we need to look for an adjacent text node to move the
  cursor there.

With this change, `EventHandler` no longer does direct manipulations on
caret position or text content, but instead delegates them to the active
`InputEventsTarget`, which could be either
`FormAssociatedTextControlElement` (for `<input>` and `<textarea>`) or
`EditingHostManager` (for `contenteditable`). The `Selection` object is
used to manage both selection and caret position for `contenteditable`,
and text control elements manage their own selection state that is not
exposed by Selection API.

This change improves text editing on Discord, as now we don't have to
refocus the `contenteditable` element after character input. The problem
was that selection manipulations from the JS side were not propagated
to `DOM::Position`.

I expect this change to make future correctness improvements for
`contenteditable` (and `designMode`) easier, as now it's decoupled from
`<input>` and `<textarea>` and separated from `EventHandler`, which is
quite a busy file.
This commit is contained in:
Aliaksandr Kalenik 2024-10-23 21:26:58 +02:00 committed by Alexander Kalenik
parent 380907cd48
commit a8077f79cc
Notes: github-actions[bot] 2024-10-30 18:30:49 +00:00
35 changed files with 884 additions and 663 deletions

View file

@ -429,7 +429,7 @@ WebIDL::ExceptionOr<void> HTMLInputElement::run_input_activation_behavior(DOM::E
return {};
}
void HTMLInputElement::did_edit_text_node(Badge<DOM::Document>)
void HTMLInputElement::did_edit_text_node()
{
// An input element's dirty value flag must be set to true whenever the user interacts with the control in a way that changes the value.
auto old_value = move(m_value);
@ -439,7 +439,7 @@ void HTMLInputElement::did_edit_text_node(Badge<DOM::Document>)
m_has_uncommitted_changes = true;
if (m_value != old_value)
relevant_value_was_changed(m_text_node);
relevant_value_was_changed();
update_placeholder_visibility();
@ -584,7 +584,7 @@ WebIDL::ExceptionOr<void> HTMLInputElement::set_value(String const& value)
// and the element has a text entry cursor position, move the text entry cursor position to the end of the
// text control, unselecting any selected text and resetting the selection direction to "none".
if (m_value != old_value) {
relevant_value_was_changed(m_text_node);
relevant_value_was_changed();
if (m_text_node) {
m_text_node->set_data(m_value);
@ -1178,11 +1178,11 @@ void HTMLInputElement::did_receive_focus()
return;
m_text_node->invalidate_style(DOM::StyleInvalidationReason::DidReceiveFocus);
if (auto* paintable = m_text_node->paintable())
paintable->set_selected(true);
if (m_placeholder_text_node)
m_placeholder_text_node->invalidate_style(DOM::StyleInvalidationReason::DidReceiveFocus);
if (auto cursor = document().cursor_position(); !cursor || m_text_node != cursor->node())
document().set_cursor_position(DOM::Position::create(realm(), *m_text_node, m_text_node->length()));
}
void HTMLInputElement::did_lose_focus()
@ -1190,6 +1190,9 @@ void HTMLInputElement::did_lose_focus()
if (m_text_node)
m_text_node->invalidate_style(DOM::StyleInvalidationReason::DidLoseFocus);
if (auto* paintable = m_text_node->paintable())
paintable->set_selected(false);
if (m_placeholder_text_node)
m_placeholder_text_node->invalidate_style(DOM::StyleInvalidationReason::DidLoseFocus);
@ -1232,7 +1235,7 @@ void HTMLInputElement::form_associated_element_attribute_changed(FlyString const
}
if (m_value != old_value)
relevant_value_was_changed(m_text_node);
relevant_value_was_changed();
update_shadow_tree();
}
@ -1303,7 +1306,6 @@ void HTMLInputElement::type_attribute_changed(TypeAttributeState old_state, Type
// 9. If previouslySelectable is false and nowSelectable is true, set the element's text entry cursor position to the
// beginning of the text control, and set its selection direction to "none".
if (!previously_selectable && now_selectable) {
document().set_cursor_position(DOM::Position::create(realm(), *m_text_node, 0));
set_selection_direction(OptionalNone {});
}
}
@ -1539,7 +1541,7 @@ void HTMLInputElement::reset_algorithm()
m_value = value_sanitization_algorithm(m_value);
if (m_value != old_value)
relevant_value_was_changed(m_text_node);
relevant_value_was_changed();
if (m_text_node) {
m_text_node->set_data(m_value);
@ -1575,7 +1577,7 @@ void HTMLInputElement::clear_algorithm()
user_interaction_did_change_input_value();
if (m_value != old_value)
relevant_value_was_changed(m_text_node);
relevant_value_was_changed();
if (m_text_node) {
m_text_node->set_data(m_value);
@ -2585,15 +2587,4 @@ HTMLInputElement::ValueAttributeMode HTMLInputElement::value_attribute_mode() co
return value_attribute_mode_for_type_state(type_state());
}
void HTMLInputElement::selection_was_changed(size_t selection_start, size_t selection_end)
{
if (!m_text_node || !document().cursor_position() || document().cursor_position()->node() != m_text_node)
return;
document().set_cursor_position(DOM::Position::create(realm(), *m_text_node, selection_end));
if (auto selection = document().get_selection())
MUST(selection->set_base_and_extent(*m_text_node, selection_start, *m_text_node, selection_end));
}
}