Changes between Version 1 and Version 5 of Ticket #11861

Apr 28, 2014, 1:52:44 PM (8 years ago)
Olek Nowodziński


  • Ticket #11861

    • Property Owner set to Olek Nowodziński
    • Property Status changed from new to assigned
    • Property Keywords Webkit Blink added
    • Property Summary changed from [Webkit] Span elements created while joining adjacent elements to [Blink/Webkit] Span elements created while joining adjacent elements
  • Ticket #11861 – Description

    v1 v5  
     35== Algorithm for collapsed selection
     370. Let's consider sample HTML and selection
     38 {{{
     431. BACKSPACE or DEL is pressed. We expect the contents of `<blockquote><p>...</p></blockquote>` to be merged with contents of `<div><p>...</p></div>`.
     452. Custom listener in editable listens on DEL and BACKSPACE. The listener is of lowest possible priority to not to interfere with existing code, which is supposed to deal with lists, non–editables, etc.
     473. Retrieve `range` from selection.
     494. Abort if `range` is not collapsed (then enter a different branch of the algorithm).
     515. Get `elementPath` out of the `range` (`range.startPath()`).
     536. Create `walker`, starting in `path.block` (`<p><strong></p>`). Starting from `path.block` solves the problem of bogus BR. In case of BACKSPACE, walker is supposed to walk back; in case of DEL – forward.
     557. `walker` determines if current case (DOM+selection) should be handled by the custom listener. It traverses DOM tree in search for blocks (when entering elements) and checks if current selection is anchored at the block boundary (when leaving elements).
     578. Abort, if no previous (BACKSPACE) or next (DEL) block is found or reached boundary of editable. Also abort if current selection is not at the block boundary.
     599. If previous (BACKSPACE – `<div><p></div>`) or next (DEL – none) block is found, a new range is created and moved to the closest editable position, according to the direction (back or forward with `range.moveToClosestEditablePosition()` – `<p><em>^</p>` for BACKSPACE). This trick let us move from `<div><p></div>` up to `<p><em></p>` without hard, vertical traversing.
     6110. Create new `elementPath` for the range once moved to the closest editable position. The block of this `elementPath` is our target place for elements to be moved.
     6311. Create intrusive bookmarks (`<strong>||y</strong>`).
     6512. Move all children from the block found in 6. to the one found in 10 (BACKSPACE: `<strong>y</strong>` joins `<em>x</em>`).
     6713. Use `element.mergeSiblings` to clean up mess, which could emerge if, i.e.instead of `<em>x</em>` there was `<strong>x</strong>` so `<strong>x</strong><strong>y</strong>` is merged `<strong>xy</strong>`.
     6914. Remove block found in 6.
     7114. If block found in 6. (`<p><was strong></p>`) was the only meaningful element in DOM branch, cut it off.
     7315. Restore bookmark saved in 11.
     74 {{{
© 2003 – 2021 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy