Changes between Version 5 and Version 21 of Ticket #11861


Ignore:
Timestamp:
May 12, 2014, 1:39:33 PM (10 years ago)
Author:
Piotrek Koszuliński
Comment:

Legend:

Unmodified
Added
Removed
Modified
  • Ticket #11861

    • Property Status changed from assigned to closed
    • Property Cc joel.peltonen@… added
    • Property Resolution changed from to fixed
  • Ticket #11861 – Description

    v5 v21  
    3030<h1>foo^bar</h1>
    3131}}}
    32 
    33 ----
    34 
    35 == Algorithm for collapsed selection
    36 
    37 0. Let's consider sample HTML and selection
    38  {{{
    39 <div><p><em>x</em></p></div>
    40 <blockquote><p><strong>^y</strong></p></blockquote>
    41 }}}
    42 
    43 1. BACKSPACE or DEL is pressed. We expect the contents of `<blockquote><p>...</p></blockquote>` to be merged with contents of `<div><p>...</p></div>`.
    44 
    45 2. 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.
    46 
    47 3. Retrieve `range` from selection.
    48 
    49 4. Abort if `range` is not collapsed (then enter a different branch of the algorithm).
    50 
    51 5. Get `elementPath` out of the `range` (`range.startPath()`).
    52 
    53 6. 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.
    54 
    55 7. `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).
    56 
    57 8. 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.
    58 
    59 9. 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.
    60 
    61 10. 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.
    62 
    63 11. Create intrusive bookmarks (`<strong>||y</strong>`).
    64 
    65 12. Move all children from the block found in 6. to the one found in 10 (BACKSPACE: `<strong>y</strong>` joins `<em>x</em>`).
    66 
    67 13. 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>`.
    68 
    69 14. Remove block found in 6.
    70 
    71 14. If block found in 6. (`<p><was strong></p>`) was the only meaningful element in DOM branch, cut it off.
    72 
    73 15. Restore bookmark saved in 11.
    74  {{{
    75 <div><p><em>x</em><strong>^y</strong></p></div>
    76 }}}
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy