#23 (+ #24, #35, #36) - Refinement of toolbar formatter config + global config module + some fixes

fredevery · fredevery · commit 54a55823156f · 2018-07-06T15:21:36.000+02:00
diff --git a/src/scripts/config/toolbar.js b/src/scripts/config/toolbar.js
@@ -102,7 +102,7 @@ const Toolbar = {
 
         strikethrough: {
             formatter: 'text:strikethrough',
-            content: '<s>A</s>'
+            content: '<s>Abc</s>'
         },
 
         superscript: {
diff --git a/src/scripts/containers/AppContainer.js b/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
         }
     ],
 
diff --git a/src/scripts/core/Container.js b/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
             });
 
diff --git a/src/scripts/core/Module.js b/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);
diff --git a/src/scripts/index.js b/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;
diff --git a/src/scripts/modules/BaseFormatter.js b/src/scripts/modules/BaseFormatter.js
@@ -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);
@@ -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);
@@ -235,9 +224,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 +281,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 +303,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)) {
diff --git a/src/scripts/modules/Canvas.js b/src/scripts/modules/Canvas.js
@@ -305,13 +305,10 @@ const Canvas = Module({
         exportAll () {
             const { mediator } = this;
             const canvasBody = this.getCanvasBody();
-            // this.exportPrep();
+            const clonedNodes = DOM.cloneNodes(canvasBody, { trim: true });
+            const exportHTMLString = DOM.nodesToHTMLString(clonedNodes);
 
-            let innerHTML = canvasBody.innerHTML;
-            // innerHTML = innerHTML.replace(/\s{2,}/g, ' ');
-            // innerHTML = innerHTML.replace(/\r?\n|\r/g, '');
-
-            mediator.exec('contenteditable:inserthtml', innerHTML);
+            mediator.exec('contenteditable:inserthtml', exportHTMLString);
         },
 
         getFormattedBlock () {
@@ -357,8 +354,6 @@ const Canvas = Module({
                 ) {
                     DOM.unwrap(node);
                 }
-
-
             }
         },
 
diff --git a/src/scripts/modules/Config.js b/src/scripts/modules/Config.js
@@ -0,0 +1,48 @@
+import Module from '../core/Module';
+import toolbarConfig from '../config/toolbar';
+
+const Config = Module({
+    name: 'Config',
+    props: {},
+    acceptsConfigs: ['toolbar'],
+
+
+    handlers: {
+        requests: {
+            'config:toolbar:buttons' : 'getToolbarButtons',
+            'config:toolbar:buttonConfig' : 'getToolbarButtonConfig'
+        }
+    },
+
+    methods: {
+        setup () {},
+        init () {
+        },
+
+        getToolbarButtons () {
+            const { mediator, configs } = this;
+            const contentEditableButtons = mediator.get('contenteditable:toolbar:buttons') || [];
+            const configButtons = contentEditableButtons.length ? contentEditableButtons :
+                                  configs.toolbar.buttons ? configs.toolbar.buttons :
+                                  toolbarConfig.buttons;
+
+            let buttons = [];
+            configButtons.forEach((configKey) => {
+                // NB This needs to be looked at
+                if (configKey === 'anchor') {
+                    configKey = 'link';
+                }
+                const buttonConfig = Object.assign({ configKey }, toolbarConfig.buttonConfigs[configKey]);
+                buttons.push(buttonConfig);
+            });
+
+            return { buttons };
+        },
+
+        getToolbarButtonConfig (buttonConfigKey) {
+            return toolbarConfig.buttonConfigs[buttonConfigKey];
+        }
+    }
+});
+
+export default Config;
diff --git a/src/scripts/modules/Toolbar.js b/src/scripts/modules/Toolbar.js
@@ -95,21 +95,7 @@ const Toolbar = Module({
 
         getButtonConfigs () {
             const { mediator } = this;
-            const contentEditableButtons = mediator.get('contenteditable:toolbar:buttons') || [];
-            const configButtons = contentEditableButtons.length ? contentEditableButtons : toolbarConfig.buttons;
-
-            let buttons = [];
-
-            configButtons.forEach((configKey) => {
-                // NB This needs to be looked at
-                if (configKey === 'anchor') {
-                    configKey = 'link';
-                }
-                const buttonConfig = Object.assign({ configKey }, toolbarConfig.buttonConfigs[configKey]);
-                buttons.push(buttonConfig);
-            });
-
-            return { buttons };
+            return mediator.get('config:toolbar:buttons');
         },
 
         handleToolbarClick (evnt) {
@@ -120,7 +106,7 @@ const Toolbar = Module({
             const menuItemEl = DOM.getClosest(evnt.target, `.${props.classNames.MENU_ITEM}`);
             const { dataset } = menuItemEl;
             const { configKey } = dataset;
-            const buttonConfig = toolbarConfig.buttonConfigs[configKey];
+            const buttonConfig = mediator.get('config:toolbar:buttonConfig', configKey);
             const { formatter, opts } = buttonConfig;
             const toolbarMenuItemState = this.getMenuItemState(menuItemEl);
 
diff --git a/src/scripts/utils/DOM.js b/src/scripts/utils/DOM.js
@@ -535,17 +535,48 @@ const DOM = {
         return childIndex;
     },
 
+    cloneNodes (rootElem, opts={}) {
+        let clonedNodes = [];
+        rootElem.childNodes.forEach((node) => {
+            const clonedNode = node.cloneNode(true);
+            clonedNodes.push(node.cloneNode(true));
+        });
+
+        if (opts.trim) {
+            clonedNodes.forEach((node) => {
+                DOM.trimNodeText(node);
+            });
+        }
+
+        return clonedNodes;
+    },
+
     trimNodeText (node) {
-        node.childNodes.forEach((childNode) => {
-            if (childNode.nodeType === Node.TEXT_NODE) {
-                childNode.textContent = childNode.textContent
-                                                 .replace(/\s{2,}/g, ' ')
-                                                 .replace(/\r?\n|\r/g, '')
-                                                 .trim();
-            } else {
+        if (node.nodeType === Node.TEXT_NODE) {
+            const trimmedText = node.textContent
+                                    .replace(/\s{2,}/g, ' ')
+                                    .replace(/\r?\n|\r/g, '')
+                                    .trim();
+            node.textContent = trimmedText;
+        } else {
+            node.childNodes.forEach((childNode) => {
                 DOM.trimNodeText(childNode);
+            });
+        }
+    },
+
+    nodesToHTMLString (nodes) {
+        let HTMLString = '';
+
+        nodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                HTMLString += node.textContent;
+            } else {
+                HTMLString += node.outerHTML;
             }
         });
+
+        return HTMLString;
     },
 
     //Pseudo-private methods
diff --git a/test/server/html/index.html b/test/server/html/index.html
@@ -115,7 +115,12 @@ <h1>Typester test server</h1>
         <script>
           const contentEditable = document.getElementById('content-editable');
           new Typester({
-              el: contentEditable
+              el: contentEditable,
+              configs: {
+                // toolbar: {
+                //   buttons: ['bold', 'italic', 'h1', 'h2', 'orderedlist', 'unorderedlist', 'quote', 'link']
+                // }
+              }
           });
         </script>
 
@@ -167,7 +172,7 @@ <h1>Typester test server</h1>
                   }
                 };
 
-                appendHtmlText(openTag, opts.indentation, true);
+                appendHtmlText(openTag || '<no-open-tag>', opts.indentation, true);
 
                 node.childNodes.forEach(function (childNode) {
                   if (childNode.nodeType === Node.TEXT_NODE) {
@@ -182,7 +187,7 @@ <h1>Typester test server</h1>
                   }
                 });
 
-                appendHtmlText(closeTag, opts.indentation, true);
+                appendHtmlText(closeTag || '</no-close-tag open-tag="' + openTag + '">', opts.indentation, true);
 
                 return htmlText;
               };
diff --git a/test/unit/helpers/e2eSetup.js b/test/unit/helpers/e2eSetup.js
diff --git a/test/unit/modules/Toolbar.spec.js b/test/unit/modules/Toolbar.spec.js

Original file line number	Diff line number	Diff line change
`@@ -30,6 +30,7 @@ import FormatterContainer from '../containers/FormatterContainer';`
`30`	`30`	`import CanvasContainer from '../containers/CanvasContainer';`
`31`	`31`	`import ContentEditable from '../modules/ContentEditable';`
`32`	`32`	`import Selection from '../modules/Selection';`
	`33`	`+import Config from '../modules/Config';`
`33`	`34`
`34`	`35`	`let uiContainer, formatterContainer, canvasContainer;`
`35`	`36`
`@@ -53,6 +54,9 @@ const AppContainer = Container({`
`53`	`54`	`},`
`54`	`55`	`{`
`55`	`56`	`class: Selection`
	`57`	`+ },`
	`58`	`+ {`
	`59`	`+ class: Config`
`56`	`60`	`}`
`57`	`61`	`],`
`58`	`62`