Merge pull request #37 from typecode/issue-23

#23 (+ #24, #35, #36) - Toolbar configuration + refinements + bugs

Author: LevKanter

README.md

@@ -32,6 +32,34 @@ import Typester from 'typester-editor'
 new Typester({ el: document.querySelector('[contenteditable]') }) // Where document.querySelector(...) is a single DOM element.
 ```
 
+### Configuration
+You can configure the formatters available for a specific typester instance in two ways:
+
+1. When you instatiate a Typester instance via the custom configs option:
+
+```
+new Typester({
+    el: document.querySelector('[contenteditable]'),
+    configs: {
+        toolbar: {
+            buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
+        }
+    }
+});
+```
+
+2. By using a data attribute on the editable container
+```
+<div contenteditable='true' data-toolbar-buttons='["bold", "italic", "h1", "h2", "orderedlist", "unorderedlist", "quote", "link"]'></div>
+```
+
+The options available for the toolbar buttons are:
+- Inline formatters: `bold`, `italic`
+- Headers: `h1`, `h2`, `h3`, `h4`, `h5`, `h6`
+- Lists: `orderedlist`, `unorderedlist`
+- Blockquotes: `quote`
+- Links: `link`
+
 ### License
 Typester is released under the MIT license.
 

src/scripts/config/toolbar.js

@@ -81,7 +81,8 @@ const Toolbar = {
             },
             content: '<b>B</b>',
             disabledIn: ['H1', 'H2', 'BLOCKQUOTE'],
-            activeIn: ['B']
+            activeIn: ['B'],
+            toggles: true
         },
 
         italic: {
@@ -92,7 +93,8 @@ const Toolbar = {
                 validTags: ['I']
             },
             content: '<i>I</i>',
-            activeIn: ['I']
+            activeIn: ['I'],
+            toggles: true
         },
 
         underline: {
@@ -102,7 +104,7 @@ const Toolbar = {
 
         strikethrough: {
             formatter: 'text:strikethrough',
-            content: '<s>A</s>'
+            content: '<s>Abc</s>'
         },
 
         superscript: {

src/scripts/containers/AppContainer.js

@@ -30,6 +30,7 @@ import FormatterContainer from '../containers/FormatterContainer';
 import CanvasContainer from '../containers/CanvasContainer';
 import ContentEditable from '../modules/ContentEditable';
 import Selection from '../modules/Selection';
+import Config from '../modules/Config';
 
 let uiContainer, formatterContainer, canvasContainer;
 
@@ -53,6 +54,9 @@ const AppContainer = Container({
         },
         {
             class: Selection
+        },
+        {
+            class: Config
         }
     ],
 
@@ -75,10 +79,6 @@ const AppContainer = Container({
          * @protected
          */
         setup: function () {
-            const { mediator } = this;
-            formatterContainer = formatterContainer || new FormatterContainer({ mediator });
-            uiContainer = uiContainer || new UIContainer({ mediator });
-            canvasContainer = canvasContainer || new CanvasContainer({ mediator });
         },
 
         /**
@@ -88,6 +88,10 @@ const AppContainer = Container({
          */
         init () {
             // Current nothing to init for this container. Method left here for ref.
+            const { mediator } = this;
+            formatterContainer = formatterContainer || new FormatterContainer({ mediator });
+            uiContainer = uiContainer || new UIContainer({ mediator });
+            canvasContainer = canvasContainer || new CanvasContainer({ mediator });
         },
 
         /**

src/scripts/containers/FormatterContainer.js

@@ -24,6 +24,7 @@ import BlockFormatter from '../modules/BlockFormatter';
 import TextFormatter from '../modules/TextFormatter';
 import ListFormatter from '../modules/ListFormatter';
 import LinkFormatter from '../modules/LinkFormatter';
+import Commands from '../modules/Commands';
 import Paste from '../modules/Paste';
 
 /**
@@ -42,6 +43,9 @@ const FormatterContainer = Container({
      * @enum {Array<{class:Module}>} modules
      */
     modules: [
+        {
+            class: Commands
+        },
         {
             class: BaseFormatter
         },

src/scripts/core/Container.js

@@ -149,11 +149,13 @@ const Container = function Container(containerObj) {
 
             containerUtils.initModules(containerModules, {
                 dom: opts.dom,
+                configs: opts.configs,
                 mediator
             });
 
             containerUtils.initChildContainers(containerChildContainers, {
                 dom: opts.dom,
+                configs: opts.configs,
                 mediator
             });
 

src/scripts/core/Module.js

@@ -53,7 +53,8 @@ const Module = function (moduleObj) {
         handlers: moduleHandlers,
         dom: moduleDom,
         methods: moduleMethods,
-        requiredProps: moduleRequiredProps
+        requiredProps: moduleRequiredProps,
+        acceptsConfigs: moduleAcceptsConfigs
     } = moduleObj;
 
     if (!moduleName) {
@@ -125,6 +126,7 @@ const Module = function (moduleObj) {
 
         mergeDom (defaultDom, dom={}) {
             let mergedDom = {};
+
             Object.keys(defaultDom).forEach((domKey) => {
                 mergedDom[domKey] = defaultDom[domKey];
             });
@@ -139,6 +141,7 @@ const Module = function (moduleObj) {
 
         getDom (dom) {
             const rootEl = dom.el || document.body;
+
             Object.keys(dom).forEach((domKey) => {
                 let selector, domEl;
 
@@ -191,6 +194,7 @@ const Module = function (moduleObj) {
     const moduleProto = {
         moduleConstructor: function (opts) {
             moduleProto.prepModule(opts);
+            moduleProto.bindConfigs(opts);
             moduleProto.buildModule(opts);
             moduleProto.setupModule(opts);
             moduleProto.renderModule(opts);
@@ -212,6 +216,20 @@ const Module = function (moduleObj) {
             opts.context = context;
         },
 
+        bindConfigs (opts) {
+            if (!moduleAcceptsConfigs) { return; }
+
+            const { context } = opts;
+            const optsConfigs = opts.configs || {};
+            let moduleConfigs = {};
+
+            moduleAcceptsConfigs.forEach((configKey) => {
+                moduleConfigs[configKey] = optsConfigs[configKey] || {};
+            });
+
+            context.extendWith({ configs: moduleConfigs });
+        },
+
         buildModule (opts) {
             const { context } = opts;
             const boundMethods = moduleUtils.bindMethods(moduleMethods, context);

src/scripts/index.js

@@ -12,6 +12,7 @@ import AppContainer from './containers/AppContainer';
  * @param  {object} opts={} - instance options
  * @param  {object} opts.dom - The dom components used by Typester
  * @param  {element} opts.dom.el - The dom element to be the canvas for Typester
+ * @param  {object} opts.config - Additional instanced config
  * @return {appContainer} AppContainer instance
  *
  * @example
@@ -22,7 +23,10 @@ import AppContainer from './containers/AppContainer';
  * });
  */
 const Typester = function (opts={}) {
-    return new AppContainer({ dom: {el: opts.el }});
+    return new AppContainer({
+        dom: {el: opts.el },
+        configs: opts.configs
+    });
 };
 
 export default Typester;

src/scripts/modules/BaseFormatter.js

@@ -23,15 +23,10 @@
  * mediator.exec('format:clean', elem); // Clean the HTML inside elem
  */
 import Module from '../core/Module';
-import commands from '../utils/commands';
 import DOM from '../utils/DOM';
 import zeroWidthSpace from '../utils/zeroWidthSpace';
 
-import toolbarConfig from '../config/toolbar';
-
-let validTags = toolbarConfig.getValidTags();
-let blockTags = toolbarConfig.getBlockTags();
-let listTags  = toolbarConfig.getListTags();
+let validTags, blockTags, listTags;
 
 const BaseFormatter = Module({
     name: 'BaseFormatter',
@@ -49,7 +44,12 @@ const BaseFormatter = Module({
         }
     },
     methods: {
-        init () {},
+        init () {
+            const { mediator } = this;
+            validTags = mediator.get('config:toolbar:validTags');
+            blockTags = mediator.get('config:toolbar:blockTags');
+            listTags  = mediator.get('config:toolbar:listTags');
+        },
 
         /**
          * @func exportToCanvas
@@ -64,10 +64,7 @@ const BaseFormatter = Module({
             this.injectHooks(rootElement);
 
             const rangeCoordinates = mediator.get('selection:range:coordinates');
-            const clonedNodes = this.cloneNodes(rootElement);
-            clonedNodes.forEach((node) => {
-                DOM.trimNodeText(node);
-            });
+            const clonedNodes = DOM.cloneNodes(rootElement, { trim: true });
 
             mediator.exec('canvas:content', clonedNodes);
             mediator.exec('canvas:select:by:coordinates', rangeCoordinates);
@@ -109,7 +106,7 @@ const BaseFormatter = Module({
         formatDefault () {
             const { mediator } = this;
             const rootElem = mediator.get('selection:rootelement');
-            commands.defaultBlockFormat();
+            mediator.exec('commands:format:default');
             this.removeStyledSpans(rootElem);
         },
 
@@ -141,14 +138,6 @@ const BaseFormatter = Module({
         /**
          * PRIVATE METHODS:
          */
-        cloneNodes (rootElement) {
-            let clonedNodes = [];
-            rootElement.childNodes.forEach((node) => {
-                clonedNodes.push(node.cloneNode(true));
-            });
-            return clonedNodes;
-        },
-
         injectHooks (rootElement) {
             while (!/\w+/.test(rootElement.firstChild.textContent)) {
                 DOM.removeNode(rootElement.firstChild);
@@ -165,18 +154,21 @@ const BaseFormatter = Module({
         formatEmptyNewLine () {
             const { mediator } = this;
             const anchorNode = mediator.get('selection:anchornode');
-            const canDefaultNewline = !(anchorNode.innerText && anchorNode.innerText.trim().length) && !DOM.isIn(anchorNode, toolbarConfig.preventNewlineDefault);
+            const preventNewlineDefault = mediator.get('config:toolbar:preventNewlineDefault');
+            const canDefaultNewline = !(anchorNode.innerText && anchorNode.innerText.trim().length) && !DOM.isIn(anchorNode, preventNewlineDefault);
             const anchorIsContentEditable = anchorNode.hasAttribute && anchorNode.hasAttribute('contenteditable');
 
             if (canDefaultNewline || anchorIsContentEditable) {
                 this.formatDefault();
             }
         },
 
-        formateBlockquoteNewLine () {
+        formatBlockquoteNewLine () {
             const { mediator } = this;
 
-            commands.exec('outdent');
+            mediator.exec('commands:exec', {
+                command: 'outdent'
+            });
             this.formatDefault();
 
             const currentRangeClone = mediator.get('selection:range').cloneRange();
@@ -207,7 +199,7 @@ const BaseFormatter = Module({
             const isContentEditable = startContainer.nodeType === Node.ELEMENT_NODE && startContainer.hasAttribute('contenteditable');
 
             if (containerIsBlockquote) {
-                this.formateBlockquoteNewLine();
+                this.formatBlockquoteNewLine();
             } else if (containerIsEmpty || isContentEditable) {
                 this.formatEmptyNewLine();
             }
@@ -235,9 +227,10 @@ const BaseFormatter = Module({
                 const isLastChild = brNode === brNode.parentNode.lastChild;
                 const isDoubleBreak = brNode.nextSibling && brNode.nextSibling.nodeName === 'BR';
                 const isInBlock = DOM.isIn(brNode, blockTags, rootElem);
+                const isOrphan = brNode.parentNode === rootElem;
 
-                if (isLastChild) {
-                    brNodesToRemove.push(isLastChild);
+                if (isLastChild || isOrphan) {
+                    brNodesToRemove.push(brNode);
                     return;
                 }
 
@@ -291,8 +284,9 @@ const BaseFormatter = Module({
                 let isInvalid = validTags.indexOf(currentNode.nodeName) < 0;
                 let isBrNode = currentNode.nodeName === 'BR'; // BR nodes are handled elsewhere
                 let isTypesterElem = currentNode.className && /typester/.test(currentNode.className);
+                let isElement = currentNode.nodeType !== Node.TEXT_NODE;
 
-                if (isInvalid && !isBrNode && !isTypesterElem) {
+                if (isInvalid && !isBrNode && !isTypesterElem && isElement) {
                     invalidElements.unshift(currentNode);
                 }
             }
@@ -312,6 +306,7 @@ const BaseFormatter = Module({
 
         defaultOrphanedTextNodes (rootElem) {
             const { childNodes } = rootElem;
+
             for (let i = 0; i < childNodes.length; i++) {
                 let childNode = childNodes[i];
                 if (childNode.nodeType === Node.TEXT_NODE && /\w+/.test(childNode.textContent)) {

src/scripts/modules/BlockFormatter.js

@@ -25,7 +25,6 @@
  */
 
 import Module from '../core/Module';
-import commands from '../utils/commands';
 import DOM from '../utils/DOM';
 
 /**
@@ -62,11 +61,19 @@ const BlockFormatter = Module({
 
             if (opts.toggle) {
                 if (opts.style === 'BLOCKQUOTE') {
-                    commands.exec('outdent', null, canvasDoc);
+                    mediator.exec('commands:exec', {
+                        command: 'outdent',
+                        contextDocument: canvasDoc
+                    });
                 }
-                commands.defaultBlockFormat(canvasDoc);
+                mediator.exec('commands:format:default', {
+                    contextDocument: canvasDoc
+                });
             } else {
-                commands.formatBlock(opts.style, canvasDoc);
+                mediator.exec('commands:format:block', {
+                    style: opts.style,
+                    contextDocument: canvasDoc
+                });
             }
         },