Merge pull request #476 from guardian/rr-node-content-check

Node module: add hasContent check

Author: rrees

examples/amd-inline.html

@@ -0,0 +1,106 @@
+<!--
+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;
+  }
+</style>
+<script src="../bower_components/requirejs/require.js"></script>
+<script>
+require({
+  paths: {
+    'scribe-common': '../bower_components/scribe-common',
+    'lodash-amd': '../bower_components/lodash-amd',
+    'html-janitor':  '../bower_components/html-janitor/html-janitor',
+    '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',
+  '../bower_components/scribe-plugin-sanitizer/src/scribe-plugin-sanitizer',
+  '../bower_components/scribe-plugin-inline-styles-to-elements/src/scribe-plugin-inline-styles-to-elements',
+  '../bower_components/scribe-plugin-heading-command/src/scribe-plugin-heading-command',
+  '../bower_components/scribe-plugin-link-prompt-command/src/scribe-plugin-link-prompt-command',
+  '../bower_components/scribe-plugin-blockquote-command/src/scribe-plugin-blockquote-command'
+
+], function (
+  Scribe,
+  scribePluginToolbar,
+  scribePluginFormatterPlainTextConvertNewLinesToHtml,
+  scribePluginSanitizer,
+  scribePluginInlineStyles,
+  scribePluginHeadingCommand,
+  scribePluginLinkPromptCommand,
+  scribePluginBlockquoteCommand
+) {
+  var scribe = new Scribe(document.querySelector('.rte'),
+    {allowBlockElements: false});
+  window.scribe = scribe;
+
+  scribe.setContent('<p>Hello, World!<\/p>');
+
+  scribe.use(scribePluginToolbar(document.querySelector('.rte-toolbar')));
+  scribe.use(scribePluginFormatterPlainTextConvertNewLinesToHtml());
+  scribe.use(scribePluginInlineStyles());
+  scribe.use(scribePluginHeadingCommand(2));
+  scribe.use(scribePluginBlockquoteCommand());
+  scribe.use(scribePluginSanitizer({ tags: {
+    p: {},
+    b: {},
+    i: {},
+    br: {},
+    h2: {},
+    a: {},
+    blockquote: {}
+  }}));
+  scribe.use(scribePluginLinkPromptCommand());
+
+  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="linkPrompt">Link</button>
+  <button data-command-name="h2">H2</button>
+  <button data-command-name="blockquote">Blockquote</button>
+</div>
+<div class="rte"></div>
+<section>
+  <h1>Output</h1>
+  <textarea class="rte-output" readonly></textarea>
+</section>

src/node.js

@@ -14,6 +14,18 @@ define([
     return inlineElementNames.includes(node.nodeName);
   }
 
+  function hasContent(node) {
+    if(node && node.children && node.children.length > 0) {
+      return true;
+    }
+
+    if(node && node.nodeName === 'BR') {
+      return true;
+    }
+
+    return false;
+  }
+
   // return true if nested inline tags ultimately just contain <br> or ""
   function isEmptyInlineElement(node) {
     if( node.children.length > 1 ) return false;
@@ -177,7 +189,8 @@ define([
     wrap: wrap,
     unwrap: unwrap,
     removeChromeArtifacts: removeChromeArtifacts,
-    elementHasClass: elementHasClass
+    elementHasClass: elementHasClass,
+    hasContent: hasContent
   };
 
 });

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

@@ -1,4 +1,4 @@
-define(function () {
+define(['../../node'], function (nodeHelpers) {
 
   'use strict';
 
@@ -9,7 +9,7 @@ define(function () {
     while (treeWalker.nextNode()) {
       if (treeWalker.currentNode) {
         // If the node is a non-empty element or has content
-        if (~['br'].indexOf(treeWalker.currentNode.nodeName.toLowerCase()) || treeWalker.currentNode.length > 0) {
+        if(nodeHelpers.hasContent(treeWalker.currentNode)) {
           return true;
         }
       }

test/node.spec.js

@@ -48,6 +48,27 @@ describe('Node type checking', function() {
     });
   });
 
+  describe('for whether a node has content', function() {
+    it('should detect a BR element has no content', function() {
+      var fakeNode = {nodeName: "BR"};
+
+      assert.isTrue(nodeHelpers.hasContent(fakeNode));
+    });
+
+    it('should detect a node has children', function() {
+      var fakeNode = {nodeName: "DIV", children: [{}]};
+
+      assert.isTrue(nodeHelpers.hasContent(fakeNode));
+
+    });
+
+    it('should detect a non-BR node', function() {
+      var fakeNode = {nodeName: "P"};
+
+      assert.isFalse(nodeHelpers.hasContent(fakeNode));
+    });
+  });
+
   describe('text nodes', function() {
     describe('that are whitespace-only', function() {
       it('are detected', function() {