Merge pull request #380 from atonse/master

Added support to CMD+Left/Right for Mac navigation
bustle · May 5, 2016 · 9433e74 · 9433e74
2 parents 8349f65 + d1f7eff
commit 9433e74
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 13 deletions.
diff --git a/src/js/editor/key-commands.js b/src/js/editor/key-commands.js
@@ -11,6 +11,22 @@ function selectAll(editor) {
   editor.selectRange(allRange);
 }
 
+function gotoStartOfLine(editor) {
+  let {range} = editor;
+  let {tail: {section}} = range;
+  editor.run(postEditor => {
+    postEditor.setRange(new Range(section.headPosition()));
+  });
+}
+
+function gotoEndOfLine(editor) {
+  let {range} = editor;
+  let {tail: {section}} = range;
+  editor.run(postEditor => {
+    postEditor.setRange(new Range(section.tailPosition()));
+  });
+}
+
 export const DEFAULT_KEY_COMMANDS = [{
   str: 'META+B',
   run(editor) {
@@ -47,15 +63,18 @@ export const DEFAULT_KEY_COMMANDS = [{
   str: 'CTRL+A',
   run(editor) {
     if (Browser.isMac) {
-      let {range} = editor;
-      let {head: {section}} = range;
-      editor.run(postEditor => {
-        postEditor.setRange(new Range(section.headPosition()));
-      });
+      gotoStartOfLine(editor);
     } else {
       selectAll(editor);
     }
   }
+}, {
+  str: 'META+LEFT',
+  run(editor) {
+    if (Browser.isMac) {
+      gotoStartOfLine(editor);
+    }
+  }
 }, {
   str: 'META+A',
   run(editor) {
@@ -66,12 +85,16 @@ export const DEFAULT_KEY_COMMANDS = [{
 }, {
   str: 'CTRL+E',
   run(editor) {
-    if (!Browser.isMac) { return false; }
-    let {range} = editor;
-    let {tail: {section}} = range;
-    editor.run(postEditor => {
-      postEditor.setRange(new Range(section.tailPosition()));
-    });
+    if (Browser.isMac) {
+      gotoEndOfLine(editor);
+    }
+  }
+}, {
+  str: 'META+RIGHT',
+  run(editor) {
+    if (Browser.isMac) {
+      gotoEndOfLine(editor);
+    }
   }
 }, {
   str: 'META+K',

diff --git a/tests/acceptance/editor-key-commands-test.js b/tests/acceptance/editor-key-commands-test.js
@@ -1,6 +1,7 @@
 import { Editor } from 'mobiledoc-kit';
 import { MODIFIERS } from 'mobiledoc-kit/utils/key';
 import Keycodes from 'mobiledoc-kit/utils/keycodes';
+import Browser from 'mobiledoc-kit/utils/browser';
 import Helpers from '../test-helpers';
 
 const { module, test } = Helpers;
@@ -63,7 +64,7 @@ function testStatefulCommand({modifierName, key, command, markupName}) {
     editor.render(editorElement);
 
     assert.hasNoElement(`#editor ${markupName}`, `precond - no ${markupName} text`);
-    Helpers.dom.moveCursorTo(editor, 
+    Helpers.dom.moveCursorTo(editor,
       editor.post.sections.head.markers.head.renderNode.element,
       initialText.length);
     Helpers.dom.triggerKeyCommand(editor, key, modifier);
@@ -140,6 +141,58 @@ testStatefulCommand({
   markupName: 'em'
 });
 
+test(`cmd-left goes to the beginning of a line (MacOS only)`, (assert) => {
+  let initialText = 'something';
+  const mobiledoc = Helpers.mobiledoc.build(
+    ({post, markupSection, marker}) => post([
+      markupSection('p', [marker(initialText)])
+    ]));
+
+  editor = new Editor({mobiledoc});
+  editor.render(editorElement);
+
+  let textElement = editor.post.sections.head.markers.head.renderNode.element;
+
+  Helpers.dom.moveCursorTo(editor, textElement, 4);
+  let originalCursorPosition = Helpers.dom.getCursorPosition();
+  Helpers.dom.triggerKeyCommand(editor, 'LEFT', MODIFIERS.META);
+
+  let changedCursorPosition = Helpers.dom.getCursorPosition();
+  let expectedCursorPosition = 0; // beginning of text
+
+  if (Browser.isMac) {
+    assert.equal(changedCursorPosition.offset, expectedCursorPosition, 'cursor moved to the beginning of the line on MacOS');
+  } else {
+    assert.equal(changedCursorPosition.offset, originalCursorPosition.offset, 'cursor not moved to the end of the line (non-MacOS)');
+  }
+});
+
+test(`cmd-right goes to the end of a line (MacOS only)`, (assert) => {
+  let initialText = 'something';
+  const mobiledoc = Helpers.mobiledoc.build(
+    ({post, markupSection, marker}) => post([
+      markupSection('p', [marker(initialText)])
+    ]));
+
+  editor = new Editor({mobiledoc});
+  editor.render(editorElement);
+
+  let textElement = editor.post.sections.head.markers.head.renderNode.element;
+
+  Helpers.dom.moveCursorTo(editor, textElement, 4);
+  let originalCursorPosition = Helpers.dom.getCursorPosition();
+  Helpers.dom.triggerKeyCommand(editor, 'RIGHT', MODIFIERS.META);
+
+  let changedCursorPosition = Helpers.dom.getCursorPosition();
+  let expectedCursorPosition = initialText.length; // end of text
+
+  if (Browser.isMac) {
+    assert.equal(changedCursorPosition.offset, expectedCursorPosition, 'cursor moved to the end of the line on MacOS');
+  } else {
+    assert.equal(changedCursorPosition.offset, originalCursorPosition.offset, 'cursor not moved to the end of the line (non-MacOS)');
+  }
+});
+
 test(`ctrl-k clears to the end of a line`, (assert) => {
   let initialText = 'something';
   const mobiledoc = Helpers.mobiledoc.build(

diff --git a/tests/helpers/dom.js b/tests/helpers/dom.js
@@ -235,7 +235,7 @@ function triggerKeyCommand(editor, string, modifiers=[]) {
   if (typeof modifiers === "number") {
     modifiers = [modifiers]; // convert singular to array
   }
-  let charCode = string.toUpperCase().charCodeAt(0);
+  let charCode = (KEY_CODES[string] || string.toUpperCase().charCodeAt(0));
   let keyCode = charCode;
   let keyEvent = createMockEvent('keydown', editor.element, {
     charCode,