Render a first marker with a leading space using NO_BREAK_SPACE

Fixes #75

src/js/renderers/editor-dom.js

@@ -7,6 +7,7 @@ import { MARKER_TYPE } from "../models/marker";
 import { IMAGE_SECTION_TYPE } from "../models/image";
 import { CARD_TYPE } from "../models/card";
 import { clearChildNodes } from '../utils/dom-utils';
+import { startsWith, endsWith } from '../utils/string-utils';
 
 export const UNPRINTABLE_CHARACTER = "\u200C";
 export const NO_BREAK_SPACE = "\u00A0";
@@ -22,10 +23,6 @@ function createElementFromMarkup(doc, markup) {
   return element;
 }
 
-function endsWith(string, character) {
-  return string.charAt(string.length -1) === character;
-}
-
 // ascends from element upward, returning the last parent node that is not
 // parentElement
 function penultimateParentOf(element, parentElement) {
@@ -66,11 +63,15 @@ function renderMarker(marker, element, previousRenderNode) {
     text = UNPRINTABLE_CHARACTER;
   }
 
-  // If the textNode has a trailing space, the browser will collapse the
-  // displayed cursor position to the previous character
+  // If the first marker has a leading space or the last marker has a
+  // trailing space, the browser will collapse the space when we position
+  // the cursor.
   // See https://github.com/bustlelabs/content-kit-editor/issues/68
+  //   and https://github.com/bustlelabs/content-kit-editor/issues/75
   if (!marker.next && endsWith(text, SPACE)) {
     text = text.substr(0, text.length - 1) + NO_BREAK_SPACE;
+  } else if (!marker.prev && startsWith(text, SPACE)) {
+    text = NO_BREAK_SPACE + text.substr(1);
   }
 
   let textNode = document.createTextNode(text);

src/js/utils/string-utils.js

@@ -9,3 +9,11 @@ export function dasherize(string) {
     return (offset === 0 ? lower : '-' + lower);
   });
 }
+
+export function startsWith(string, character) {
+  return string.charAt(0) === character;
+}
+
+export function endsWith(string, character) {
+  return string.charAt(string.length -1) === character;
+}

tests/acceptance/editor-sections-test.js

@@ -428,4 +428,22 @@ test('deleting when after deletion there is a trailing space positions cursor at
   });
 });
 
+test('deleting when after deletion there is a leading space positions cursor at start of selection', (assert) => {
+  const done = assert.async();
+
+  editor = new Editor(editorElement, {mobiledoc: mobileDocWith2Sections});
+
+  Helpers.dom.selectText('second', editorElement);
+  Helpers.dom.triggerDelete(editor);
+
+  assert.equal($('#editor p:eq(1)').text(), `${NO_BREAK_SPACE}section`, 'correct text after deletion');
+  let text = 'e';
+  Helpers.dom.insertText(text);
+
+  setTimeout(() => {
+    assert.equal($('#editor p:eq(1)').text(), `${text} section`, 'correct text after insertion');
+    done();
+  });
+});
+
 // test: deleting at start of section when previous section is a non-markup section