Merge pull request #490 from danburzo/master

Fixes #489

examples/raw-inline.html

@@ -0,0 +1,91 @@
+<!--
+This example demonstrates how to consume the Scribe
+editor using RequireJS and the AMD module syntax.
+
+Note that you'll need to install scribe's dependencies through
+`bower install`. See http://bower.io/ if you are unfamiliar.
+-->
+<style>
+  button {
+    height: 3em;
+  }
+
+  .active {
+    border-style: inset;
+  }
+
+  .rte, .rte-toolbar {
+    display: block;
+  }
+
+  p {
+    margin-top: 0;
+  }
+
+  .rte {
+    border: 1px solid gray;
+    height: 300px;
+    overflow: auto;
+  }
+  .rte-output {
+    width: 100%;
+    height: 10em;
+  }
+
+  .raw-content-editable {
+    width: 100%;
+    min-height: 2rem;
+    border: solid 1px lightgray;
+  }
+</style>
+<script src="../bower_components/requirejs/require.js"></script>
+<script>
+require({
+  paths: {
+    'lodash-amd': '../bower_components/lodash-amd',
+    'immutable': '../bower_components/immutable/dist/immutable'
+  }
+}, [
+  '../src/scribe',
+  '../bower_components/scribe-plugin-toolbar/src/scribe-plugin-toolbar',
+  '../bower_components/scribe-plugin-formatter-plain-text-convert-new-lines-to-html/src/scribe-plugin-formatter-plain-text-convert-new-lines-to-html',
+], function (
+  Scribe,
+  scribePluginToolbar
+) {
+  var scribe = new Scribe(document.querySelector('.rte'), {
+    allowBlockElements: false
+  });
+  window.scribe = scribe;
+
+  scribe.setContent('Hello, World');
+
+  scribe.use(scribePluginToolbar(document.querySelector('.rte-toolbar')));
+
+  scribe.on('content-changed', updateHtml);
+
+  function updateHtml() {
+    document.querySelector('.rte-output').value = scribe.getHTML();
+  }
+
+  updateHtml();
+});
+</script>
+<div class="rte-toolbar">
+  <button data-command-name="bold">Bold</button>
+  <button data-command-name="italic">Italic</button>
+  <button data-command-name="h2">H2</button>
+</div>
+<div class="rte">
+</div>
+
+<section>
+  <h1>Output</h1>
+  <textarea class="rte-output" readonly></textarea>
+</section>
+
+<section>
+  <h1>Basic content-editable</h1>
+
+  <div class="raw-content-editable" contenteditable="true"></div>
+</section>

src/node.js

@@ -15,14 +15,14 @@ define([
   }
 
   function hasContent(node) {
+
     if(node && node.children && node.children.length > 0) {
       return true;
     }
 
     if(node && node.nodeName === 'BR') {
       return true;
     }
-
     return false;
   }
 
@@ -74,6 +74,10 @@ define([
 
   }
 
+  function isTextNodeWithContent(Node, node) {
+    return node.nodeType === Node.TEXT_NODE && !isWhitespaceOnlyTextNode(Node, node);
+  }
+
   function firstDeepestChild(node) {
     var fs = node.firstChild;
     return !fs || fs.nodeName === 'BR' ?
@@ -177,6 +181,7 @@ define([
     isText: isText,
     isEmptyTextNode: isEmptyTextNode,
     isWhitespaceOnlyTextNode: isWhitespaceOnlyTextNode,
+    isTextNodeWithContent: isTextNodeWithContent,
     isFragment: isFragment,
     isBefore: isBefore,
     isSelectionMarkerNode: isSelectionMarkerNode,

src/plugins/core/inline-elements-mode.js

@@ -8,8 +8,9 @@ define(['../../node'], function (nodeHelpers) {
 
     while (treeWalker.nextNode()) {
       if (treeWalker.currentNode) {
+
         // If the node is a non-empty element or has content
-        if(nodeHelpers.hasContent(treeWalker.currentNode)) {
+        if(nodeHelpers.hasContent(treeWalker.currentNode) || nodeHelpers.isTextNodeWithContent(Node, treeWalker.currentNode)) {
           return true;
         }
       }
@@ -40,12 +41,18 @@ define(['../../node'], function (nodeHelpers) {
             event.preventDefault();
 
             scribe.transactionManager.run(function () {
+
+              if (!range.collapsed) {
+                range.deleteContents();
+              }
+
+
               /**
                * Firefox: Delete the bogus BR as we insert another one later.
                * We have to do this because otherwise the browser will believe
                * there is content to the right of the selection.
                */
-              if (scribe.el.lastChild.nodeName === 'BR') {
+              if (scribe.el.lastChild && scribe.el.lastChild.nodeName === 'BR') {
                 scribe.el.removeChild(scribe.el.lastChild);
               }
 
@@ -87,7 +94,9 @@ define(['../../node'], function (nodeHelpers) {
                */
 
               var contentToEndRange = range.cloneRange();
-              contentToEndRange.setEndAfter(scribe.el.lastChild);
+              if (scribe.el.lastChild) {
+                contentToEndRange.setEndAfter(scribe.el.lastChild);
+              }
 
               // Get the content from the range to the end of the heading
               var contentToEndFragment = contentToEndRange.cloneContents();

test/node.spec.js

@@ -49,7 +49,7 @@ describe('Node type checking', function() {
   });
 
   describe('for whether a node has content', function() {
-    it('should detect a BR element has no content', function() {
+    it('should detect a BR element', function() {
       var fakeNode = {nodeName: "BR"};
 
       assert.isTrue(nodeHelpers.hasContent(fakeNode));
@@ -90,5 +90,33 @@ describe('Node type checking', function() {
 
       });
     });
+    describe('that have non-whitespace content', function() {
+      it('are correctly detected', function() {
+        var fakeNode = { 
+          nodeValue: "hello world",
+          nodeType: 3
+        };
+
+        assert.isTrue(nodeHelpers.isTextNodeWithContent(FakeNode, fakeNode), "Text node with content not detected as having content.");
+      });
+
+      it('but are actually empty', function() {
+        var fakeNode = { 
+          nodeValue: "",
+          nodeType: 3
+        };
+
+        assert.isFalse(nodeHelpers.isTextNodeWithContent(FakeNode, fakeNode), "Empty text node detected as having content.");
+      });
+
+      it('but only whitespace', function() {
+        var fakeNode = { 
+          nodeValue: "     ",
+          nodeType: 3
+        };
+
+        assert.isFalse(nodeHelpers.isTextNodeWithContent(FakeNode, fakeNode), "Whitespace-only text node detected as having content.");
+      });
+    });
   });
 });