updating model.post.trimTo && editor.post.toggleSection to ignor tail…

… if not selected. Adding tests
bustle · Feb 19, 2020 · 17433a0 · 17433a0
1 parent 596de01
commit 17433a0
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 3 deletions.
diff --git a/src/js/editor/post.js b/src/js/editor/post.js
@@ -788,11 +788,20 @@ class PostEditor {
   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;
+
     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;
       }
@@ -801,7 +810,15 @@ class PostEditor {
     let tagName = everySectionHasTagName ? 'p' : sectionTagName;
     let sectionTransformations = [];
     post.walkMarkerableSections(range, section => {
-      let changedSection = this.changeSectionTagName(section, tagName);
+      let changedSection;
+
+      // tail section not selected, no transform needed
+      if (!togglingList && tailNotSelected && tail.section === section) {
+        changedSection = section;
+      } else {
+        changedSection = this.changeSectionTagName(section, tagName);
+      }
+
       sectionTransformations.push({
         from: section,
         to: changedSection

diff --git a/src/js/models/post.js b/src/js/models/post.js
@@ -193,6 +193,8 @@ class Post {
   trimTo(range) {
     const post = this.builder.createPost();
     const { builder } = this;
+    const { head, tail } = range;
+    const tailNotSelected = tail.offset === 0 && head.section !== tail.section;
 
     let sectionParent = post,
         listParent = null;
@@ -212,7 +214,9 @@ class Post {
         } else {
           listParent = null;
           sectionParent = post;
-          newSection = builder.createMarkupSection(section.tagName);
+          const tagName =
+            tailNotSelected && tail.section === section ? 'p' : section.tagName;
+          newSection = builder.createMarkupSection(tagName);
         }
 
         let currentRange = range.trimTo(section);
@@ -221,7 +225,10 @@ class Post {
           m => newSection.markers.append(m)
         );
       } else {
-        newSection = section.clone();
+        newSection =
+          tailNotSelected && tail.section === section
+            ? builder.createMarkupSection('p')
+            : section.clone();
         sectionParent = post;
       }
       if (sectionParent) {

diff --git a/tests/unit/editor/post-test.js b/tests/unit/editor/post-test.js
@@ -881,6 +881,43 @@ test('#toggleSection changes multiple sections to and from tag name', (assert) =
   );
 });
 
+test('#toggleSection does not update tail markup if tail offset is 0', assert => {
+  let post = Helpers.postAbstract.build(({ post, markupSection, marker }) => {
+    return post([
+      markupSection('p', [marker('abc')]),
+      markupSection('p', [marker('123')])
+    ]);
+  });
+
+  mockEditor = renderBuiltAbstract(post, mockEditor);
+  const range = Range.create(post.sections.head, 2, post.sections.tail, 0);
+
+  postEditor = new PostEditor(mockEditor);
+  postEditor.toggleSection('blockquote', range);
+  postEditor.complete();
+
+  assert.equal(post.sections.head.tagName, 'blockquote');
+  assert.equal(post.sections.tail.tagName, 'p');
+
+  postEditor = new PostEditor(mockEditor);
+  postEditor.toggleSection('blockquote', range);
+  postEditor.complete();
+
+  assert.equal(post.sections.head.tagName, 'p');
+  assert.equal(post.sections.tail.tagName, 'p');
+
+  assert.positionIsEqual(
+      mockEditor._renderedRange.head,
+      post.sections.head.toPosition(2),
+      'Maintains the selection'
+  );
+  assert.positionIsEqual(
+      mockEditor._renderedRange.tail,
+      post.sections.tail.toPosition(0),
+      'Maintains the selection'
+  );
+});
+
 test('#toggleSection skips over non-markerable sections', (assert) => {
   let post = Helpers.postAbstract.build(
     ({post, markupSection, marker, cardSection}) => {

diff --git a/tests/unit/models/post-test.js b/tests/unit/models/post-test.js
@@ -342,6 +342,68 @@ test('#trimTo copies card sections', (assert) => {
   assert.postIsSimilar(post, expected);
 });
 
+
+test('#trimTo appends new p section when tail section is not selected and is a non-markerable section', assert => {
+  let cardPayload = { foo: 'bar' };
+
+  let buildPost = Helpers.postAbstract.build;
+
+  let post = buildPost(({ post, markupSection, marker, cardSection }) => {
+    return post([
+      markupSection('p', [marker('abc')]),
+      cardSection('test-card', cardPayload)
+    ]);
+  });
+
+  const range = Range.create(post.sections.head, 1, // b
+                             post.sections.tail, 0); // start of card
+
+  post = post.trimTo(range);
+  let expected = buildPost(({ post, marker, markupSection, cardSection }) => {
+    return post([
+      markupSection('p', [marker('bc')]),
+      markupSection('p', [marker('')]),
+      cardSection('test-card', cardPayload)
+    ]);
+  });
+
+  const newSection = expected.sections.head.next;
+  assert.equal(expected.sections.length, 3);
+  assert.equal(newSection.tagName, 'p');
+  assert.equal(newSection.isBlank, true);
+});
+
+test('#trimTo appends new p section when tail section is not selected and is a markerable section', assert => {
+  let cardPayload = { foo: 'bar' };
+
+  let buildPost = Helpers.postAbstract.build;
+
+  let post = buildPost(({ post, markupSection, marker }) => {
+    return post([
+      markupSection('p', [marker('abc')]),
+      markupSection('p', [marker('123')])
+    ]);
+  });
+
+  const range = Range.create(post.sections.head, 1, // b
+                             post.sections.tail, 0); // start of 123
+
+  post = post.trimTo(range);
+  let expected = buildPost(({ post, marker, markupSection }) => {
+    return post([
+      markupSection('p', [marker('bc')]),
+      markupSection('p', [marker('')]),
+      markupSection('p', [marker('123')])
+    ]);
+  });
+
+  const newSection = expected.sections.head.next;
+  assert.equal(expected.sections.length, 3);
+  assert.equal(newSection.tagName, 'p');
+  assert.equal(newSection.isBlank, true);
+});
+
+
 test('#trimTo when range starts and ends in a list item', (assert) => {
   let buildPost = Helpers.postAbstract.build;