Shrink range to only include sections with non-zero selection when toggling sections 🐔

This commit removes the special casing of ‘ul’ sections (which was only needed to make tests pass).

Author: ZeeJab

src/js/editor/post.js

@@ -15,6 +15,16 @@ function isListSectionTagName(tagName) {
   return tagName === 'ul' || tagName === 'ol';
 }
 
+function shrinkRange(range) {
+  const { head, tail } = range;
+
+  if (tail.offset === 0 && head.section !== tail.section) {
+    range.tail = new Position(tail.section.prev, tail.section.prev.length);
+  }
+
+  return range;
+}
+
 const CALLBACK_QUEUES = {
   BEFORE_COMPLETE: 'beforeComplete',
   COMPLETE: 'complete',
@@ -29,7 +39,6 @@ const EDIT_ACTIONS = {
   DELETE: 2
 };
 
-
 /**
  * The PostEditor is used to modify a post. It should not be instantiated directly.
  * Instead, a new instance of a PostEditor is created by the editor and passed
@@ -786,22 +795,13 @@ class PostEditor {
    * @public
    */
   toggleSection(sectionTagName, range=this._range) {
-    range = toRange(range);
-
-    const { head, tail } = range;
-    const togglingList = sectionTagName === 'ul';
-    const tailNotSelected = tail.offset === 0 && head.section !== tail.section;
+    range = shrinkRange(toRange(range));
 
     sectionTagName = normalizeTagName(sectionTagName);
     let { post } = this.editor;
 
     let everySectionHasTagName = true;
     post.walkMarkerableSections(range, section => {
-      // only care about tail section tag if tail section is selected
-      if (!togglingList && tailNotSelected && tail.section === section) {
-        return;
-      }
-
       if (!this._isSameSectionType(section, sectionTagName)) {
         everySectionHasTagName = false;
       }
@@ -810,14 +810,7 @@ class PostEditor {
     let tagName = everySectionHasTagName ? 'p' : sectionTagName;
     let sectionTransformations = [];
     post.walkMarkerableSections(range, section => {
-      let changedSection;
-
-      // tail section not selected, no transform needed
-      if (!togglingList && tailNotSelected && tail.section === section) {
-        changedSection = section;
-      } else {
-        changedSection = this.changeSectionTagName(section, tagName);
-      }
+      let changedSection = this.changeSectionTagName(section, tagName);
 
       sectionTransformations.push({
         from: section,

tests/unit/editor/post-test.js

@@ -913,7 +913,7 @@ test('#toggleSection does not update tail markup if tail offset is 0', assert =>
   );
   assert.positionIsEqual(
       mockEditor._renderedRange.tail,
-      post.sections.tail.toPosition(0),
+      post.sections.head.toPosition(3),
       'Maintains the selection'
   );
 });
@@ -1073,7 +1073,7 @@ test('#toggleSection toggle multiple ps -> list and list -> multiple ps', (asser
   assert.equal(listSection.items.head.text, 'abc');
   assert.equal(listSection.items.tail.text, '123');
 
-  range = Range.create(listSection.items.head, 0, listSection.items.tail, 0);
+  range = Range.create(listSection.items.head, 0, listSection.items.tail, 1);
   postEditor = new PostEditor(editor);
   postEditor.toggleSection('ul', range);
   postEditor.complete();
@@ -1196,7 +1196,7 @@ test('#toggleSection untoggle multiple items at end of list changes them to mark
   });
   mockEditor = renderBuiltAbstract(post, mockEditor);
   let range = Range.create(post.sections.head.items.objectAt(1), 0,
-                           post.sections.head.items.tail, 0);
+                           post.sections.head.items.tail, 1);
 
   postEditor = new PostEditor(mockEditor);
   postEditor.toggleSection('ul', range);
@@ -1226,7 +1226,7 @@ test('#toggleSection untoggle multiple items at start of list changes them to ma
   });
   mockEditor = renderBuiltAbstract(post, mockEditor);
   let range = Range.create(post.sections.head.items.head, 0,
-                           post.sections.head.items.objectAt(1), 0);
+                           post.sections.head.items.objectAt(1), 1);
 
   postEditor = new PostEditor(mockEditor);
   postEditor.toggleSection('ul', range);
@@ -1262,7 +1262,7 @@ test('#toggleSection untoggle items and overflowing markup sections changes the
   editor.render(editorElement);
   let { post } = editor;
   let range = Range.create(post.sections.head.items.objectAt(1), 0,
-                           post.sections.tail, 0);
+                           post.sections.tail, 1);
 
   postEditor = new PostEditor(editor);
   postEditor.toggleSection('ul', range);