Better integration between formatting bar and Scribe, switchable formatting options.

examples/index.html

@@ -54,7 +54,30 @@
           "Image",
           "Video",
           "Tweet"
-        ]
+        ],
+        textFormatting: {
+          bold: true,
+          italic: true,
+          underline: true,
+          strikethrough: true,
+          link: true,
+          h1: true,
+          h2: true,
+          list: true,
+          blockquote: true,
+          configure: function(scribe, scribeConfiguration){
+              scribeConfiguration.formatBarCommands.push({
+                  name: "Superscript",
+                  cmd: "superscript",
+                  text: "^",
+                  title: "superscript"
+              });
+              scribeConfiguration.sanitize.sup = {};
+              scribeConfiguration.shortcuts.superscript = function (event) {
+                  return (event.metaKey || event.ctrlKey) && event.keyCode === 80; // p
+              };
+          }
+        }
       });
 
       $('form').bind('submit', function () {

package.json

@@ -49,10 +49,15 @@
     "node-bourbon": "^4.2.1-beta1",
     "object.assign": "^1.1.1",
     "scribe-editor": "1.4.15",
+    "scribe-plugin-blockquote-command": "^0.1.0",
     "scribe-plugin-formatter-plain-text-convert-new-lines-to-html": "^0.1.1",
+    "scribe-plugin-heading-command": "^0.1.0",
+    "scribe-plugin-intelligent-unlink-command": "^0.1.6",
+    "scribe-plugin-keyboard-shortcuts": "^0.1.1",
     "scribe-plugin-link-prompt-command": "^0.2.0",
     "scribe-plugin-sanitizer": "^0.1.9",
     "selenium-webdriver": "2.47.0",
+    "scribe-plugin-smart-lists": "^0.1.8",
     "spin.js": "^2.0.1",
     "webpack": "^1.8.4",
     "webpack-dev-server": "^1.8.0"

spec/app/index.html

@@ -26,6 +26,17 @@
   <script type="text/javascript" charset="utf-8">
     $(function(){
       SirTrevor.config.language = "en";
+      SirTrevor.config.defaults.textFormatting = {
+        bold: true,
+        italic: true,
+        underline: true,
+        strikethrough: true,
+        link: true,
+        h1: true,
+        h2: true,
+        list: true,
+        blockquote: true
+      };
     });
   </script>
 </body>

spec/e2e/format-bar.spec.js

@@ -13,7 +13,7 @@ describe('Format Bar', function() {
         {
           "type": "text",
           "data": {
-            "text": "Bold, Italic, Link"
+            "text": "Bold, Italic, Link, Underline, Strikethrough\\n\\nH1\\n\\nH2\\n\\nUL\\n\\nOL\\n\\nQuote"
           }
         }
       ]
@@ -31,8 +31,10 @@ describe('Format Bar', function() {
   it('should allow formatting of text', function(done) {
 
     var testUrl = 'http://www.example.com';
-    var expectedHtmlWithoutLink = '<p><b>Bold</b>, <i>Italic</i>, Link</p>';
-    var expectedFullHtml = '<p><b>Bold</b>, <i>Italic</i>, <a href="' + testUrl + '">Link</a></p>';
+    var expectedHtmlUpToLink = '<p><b>Bold</b>, <i>Italic</i>, <a href="' + testUrl + '">Link</a>, Underline, Strikethrough</p><p>H1</p><p>H2</p><p>UL</p><p>OL</p><p>Quote</p>';
+    var expectedHtmlWithLinkRemoved = '<p><b>Bold</b>, <i>Italic</i>, Link, Underline, Strikethrough</p><p>H1</p><p>H2</p><p>UL</p><p>OL</p><p>Quote</p>';
+    var expectedFinalFirefoxHtml = '<p><b>Bold</b>, <i>Italic</i>, Link, <u>Underline</u>, <strike>Strikethrough</strike></p><h1>H1</h1><h2>H2</h2><ul><li>UL</li></ul><ol><li>OL</li></ol><blockquote><p>Quote</p></blockquote>';
+    var expectedFinalChromeHtml = '<p><b>Bold</b>, <i>Italic</i>, Link, <u>Underline</u>, <strike>Strikethrough</strike></p><h1>H1</h1><h2>H2</h2><ul><li>UL<br></li></ul><ol><li>OL<br></li></ol><blockquote><p>Quote</p></blockquote>';
 
     function selectBoldText() {
       return helpers.browser.actions()
@@ -67,18 +69,132 @@ describe('Format Bar', function() {
 
     function selectLinkText() {
       return helpers.browser.actions()
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .keyDown(driver.Key.SHIFT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .sendKeys(driver.Key.ARROW_RIGHT)
-                .keyUp(driver.Key.SHIFT)
-                .perform().then( function() {
-                  return helpers.findElementByCss('.st-format-btn--Link').click();
-                });
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Link').click();
+        });
+    }
+
+    function selectUnderlineText() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Underline').click();
+        });
+    }
+
+    function selectStrikethroughText() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Strikethrough').click();
+        });
+    }
+
+    function selectH1Text() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Heading1').click();
+        });
+    }
+
+    function selectH2Text() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Heading2').click();
+        });
+    }
+
+    function selectUnorderedListText() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--UnorderedList').click();
+        });
+    }
+
+    function selectOrderedListText() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--OrderedList').click();
+        });
+    }
+
+    function selectQuoteText() {
+      return helpers.browser.actions()
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyDown(driver.Key.SHIFT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .sendKeys(driver.Key.ARROW_RIGHT)
+        .keyUp(driver.Key.SHIFT)
+        .perform().then( function() {
+          return helpers.findElementByCss('.st-format-btn--Blockquote').click();
+        });
     }
 
     var parent;
@@ -96,12 +212,24 @@ describe('Format Bar', function() {
     }).then( function() {
       return parent.getInnerHtml();
     }).then( function(html) {
-      expect(html).toBe(expectedFullHtml);
+      expect(html).toBe(expectedHtmlUpToLink);
       return helpers.findElementByCss('.st-format-btn--Unlink').click();
     }).then( function() {
       return parent.getInnerHtml();
     }).then( function(html) {
-      expect(html).toBe(expectedHtmlWithoutLink);
+      expect(html).toBe(expectedHtmlWithLinkRemoved);
+    }).then(selectUnderlineText)
+      .then(selectStrikethroughText)
+      .then(selectH1Text)
+      .then(selectH2Text)
+      .then(selectUnorderedListText)
+      .then(selectOrderedListText)
+      .then(selectQuoteText)
+      .then( function() {
+        return parent.getInnerHtml();
+    }).then( function(html) {
+      var result = html === expectedFinalChromeHtml || html === expectedFinalFirefoxHtml;
+      expect(result).toBe(true);
       done();
     });
   });

src/block-manager.js

@@ -8,7 +8,7 @@ var EventBus = require('./event-bus');
 var Blocks = require('./blocks');
 
 var BLOCK_OPTION_KEYS = ['convertToMarkdown', 'convertFromMarkdown',
-  'formatBar'];
+  'formatBar', 'textFormatting'];
 
 var BlockManager = function(options, editorInstance, mediator) {
   this.options = options;

src/block.js

@@ -73,8 +73,6 @@ Object.assign(Block.prototype, SimpleBlock.fn, require('./block-validations'), {
   paste_options: {},
   upload_options: {},
 
-  formattable: true,
-
   _previousSelection: '',
 
   initialize: function() {},
@@ -115,6 +113,9 @@ Object.assign(Block.prototype, SimpleBlock.fn, require('./block-validations'), {
       this.$inputs = input_html;
     }
 
+    // This is also used by multi-editable mixin.
+    this.textFormatting = Object.assign({}, this.options.textFormatting, this.textFormatting);
+
     if (this.hasTextBlock()) { this._initTextBlocks(); }
 
     this.availableMixins.forEach(function(mixin) {
@@ -123,8 +124,6 @@ Object.assign(Block.prototype, SimpleBlock.fn, require('./block-validations'), {
       }
     }, this);
 
-    if (this.formattable) { this._initFormatting(); }
-
     this._blockPrepare();
 
     return this;
@@ -303,41 +302,6 @@ Object.assign(Block.prototype, SimpleBlock.fn, require('./block-validations'), {
     this.onBlur();
   },
 
-  _initFormatting: function() {
-
-    // Enable formatting keyboard input
-    var block = this;
-
-    if (!this.options.formatBar) {
-      return;
-    }
-
-    this.options.formatBar.commands.forEach(function(cmd) {
-      if (_.isUndefined(cmd.keyCode)) {
-        return;
-      }
-
-      var ctrlDown = false;
-
-      block.$el
-        .on('keyup','.st-text-block', function(ev) {
-          if(ev.which === 17 || ev.which === 224 || ev.which === 91) {
-            ctrlDown = false;
-          }
-        })
-        .on('keydown','.st-text-block', {formatter: cmd}, function(ev) {
-          if(ev.which === 17 || ev.which === 224 || ev.which === 91) {
-            ctrlDown = true;
-          }
-
-          if(ev.which === ev.data.formatter.keyCode && ctrlDown) {
-            ev.preventDefault();
-            block.execTextBlockCommand(ev.data.formatter.cmd);
-          }
-        });
-    });
-  },
-
   _initTextBlocks: function() {
     this.getTextBlock()
         .bind('keyup', this.getSelectionForFormatter)
@@ -349,9 +313,13 @@ Object.assign(Block.prototype, SimpleBlock.fn, require('./block-validations'), {
 
       var configureScribe =
         _.isFunction(this.configureScribe) ? this.configureScribe.bind(this) : null;
-      this._scribe = ScribeInterface.initScribeInstance(
-        textBlock, this.scribeOptions, configureScribe
+
+      var scribeData = ScribeInterface.initScribeInstance(
+        textBlock, this.scribeOptions, this.textFormatting, configureScribe
       );
+
+      this._scribe = scribeData.scribe;
+      this.formatBarCommands = scribeData.formatBarCommands;
     }
   },
 

src/block_mixins/multi-editable.js

@@ -23,10 +23,14 @@ module.exports = {
 
     var configureScribe =
       _.isFunction(this.configureScribe) ? this.configureScribe.bind(this) : null;
-    var scribe = ScribeInterface.initScribeInstance(
-      editor, this.scribeOptions, configureScribe
+
+    var scribeData = ScribeInterface.initScribeInstance(
+      editor, this.scribeOptions, this.textFormatting, configureScribe
     );
 
+    var scribe = scribeData.scribe;
+    this.formatBarCommands = scribeData.formatBarCommands;
+
     scribe.setContent(content);
 
     var editorObject = {

src/blocks/heading.js

@@ -15,13 +15,21 @@ module.exports = Block.extend({
 
   editorHTML: '<h2 class="st-required st-text-block st-text-block--heading" contenteditable="true"></h2>',
 
-  scribeOptions: { 
+  scribeOptions: {
     allowBlockElements: false,
     tags: {
       p: false
     }
   },
 
+  textFormatting: {
+    bold: false,
+    h1: false,
+    h2: false,
+    list: false,
+    blockquote: false
+  },
+
   icon_name: 'heading',
 
   loadData: function(data){