Merge pull request #314 from bustlelabs/hit-enter-with-atom-313

Hitting enter when atom is first in markupSection/listItem inserts newline
bustle · Feb 4, 2016 · aa48042 · aa48042
2 parents 68d9182 + 1307b90
commit aa48042
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 4 deletions.
diff --git a/src/js/models/atom.js b/src/js/models/atom.js
@@ -6,7 +6,7 @@ import assert from '../utils/assert';
 
 const ATOM_LENGTH = 1;
 
-export default class Atom extends LinkedItem {
+class Atom extends LinkedItem {
   constructor(name, value, payload, markups=[]) {
     super();
     this.name = name;
@@ -40,7 +40,7 @@ export default class Atom extends LinkedItem {
     return false;
   }
 
-  split(offset=0, endOffset=1) {
+  split(offset=0, endOffset=offset) {
     let markers = [];
 
     if (endOffset === 0) {
@@ -66,9 +66,9 @@ export default class Atom extends LinkedItem {
     let pre, post;
 
     if (offset === 0) {
-      ([pre, post] = [clone, blankMarker]);
-    } else if (offset === ATOM_LENGTH) {
       ([pre, post] = [blankMarker, clone]);
+    } else if (offset === ATOM_LENGTH) {
+      ([pre, post] = [clone, blankMarker]);
     } else {
       assert(`Invalid offset given to Atom#splitAtOffset: "${offset}"`, false);
     }
@@ -82,3 +82,5 @@ export default class Atom extends LinkedItem {
 }
 
 mixin(Atom, MarkuperableMixin);
+
+export default Atom;
diff --git a/tests/acceptance/editor-atoms-test.js b/tests/acceptance/editor-atoms-test.js
@@ -236,6 +236,56 @@ test('keystroke of enter before atom and after marker creates new section', (ass
     }));
 });
 
+// see https://github.com/bustlelabs/mobiledoc-kit/issues/313
+test('keystroke of enter at markup section head before atom creates new section', (assert) => {
+  let expected;
+  editor = Helpers.mobiledoc.renderInto(editorElement, ({post, markupSection, atom}) => {
+    expected = post([
+      markupSection('p'), markupSection('p', [atom('simple-atom')])
+    ]);
+    return post([markupSection('p', [atom('simple-atom')])]);
+  }, editorOptions);
+
+  editor.run(postEditor => {
+    postEditor.setRange(new Range(editor.post.headPosition()));
+  });
+  Helpers.dom.triggerEnter(editor);
+
+  assert.postIsSimilar(editor.post, expected);
+  assert.renderTreeIsEqual(editor._renderTree, expected);
+  assert.positionIsEqual(editor.range.head,
+                         editor.post.sections.tail.headPosition());
+});
+
+// see https://github.com/bustlelabs/mobiledoc-kit/issues/313
+test('keystroke of enter at list item head before atom creates new section', (assert) => {
+  let expected;
+  editor = Helpers.mobiledoc.renderInto(editorElement, ({post, listSection, listItem, atom, marker}) => {
+    let blankMarker = marker();
+    expected = post([
+      listSection('ul', [
+        listItem([blankMarker]),
+        listItem([atom('simple-atom', 'X')])
+      ])
+    ]);
+    return post([listSection('ul', [listItem([atom('simple-atom', 'X')])])]);
+  }, editorOptions);
+
+  editor.run(postEditor => {
+    postEditor.setRange(new Range(editor.post.headPosition()));
+  });
+  Helpers.dom.triggerEnter(editor);
+
+  assert.postIsSimilar(editor.post, expected);
+  // FIXME the render tree does not have the blank marker render node
+  // because ListItem#isBlank is true, so it simply renders a cursor-positioning
+  // `<br>` tag instead of an empy marker, so the following render tree check
+  // is not accurate:
+  // assert.renderTreeIsEqual(editor._renderTree, expected);
+  assert.positionIsEqual(editor.range.head,
+                         editor.post.sections.head.items.tail.headPosition());
+});
+
 test('marking atom with markup adds markup', (assert) => {
   editor = new Editor({mobiledoc: mobiledocWithAtom, atoms: [simpleAtom]});
   editor.render(editorElement);