#9 - Cross browser fixes + WIP

fredevery · fredevery · commit 91deb60c9468 · 2018-07-06T17:00:34.000+02:00
diff --git a/src/scripts/modules/BlockFormatter.js b/src/scripts/modules/BlockFormatter.js
@@ -84,7 +84,7 @@ const BlockFormatter = Module({
         },
 
         cleanupBlockquote (rootElem) {
-            const blockquoteParagraphs = rootElem.querySelectorAll('BLOCKQUOTE P');
+            const blockquoteParagraphs = rootElem.querySelectorAll('blockquote p');
             blockquoteParagraphs.forEach((paragraph) => {
                 DOM.unwrap(paragraph);
             });
diff --git a/src/scripts/modules/ContentEditable.js b/src/scripts/modules/ContentEditable.js
@@ -152,7 +152,9 @@ const ContentEditable = Module({
             } else {
                 let currentSelection = mediator.get('selection:current');
                 let currentRange = mediator.get('selection:range');
-
+                if (!currentSelection) {
+                    console.log('insertHTML:currentSelection');
+                }
                 currentRange.deleteContents();
 
                 let tmpContainer = document.createElement('container');
diff --git a/src/scripts/modules/Selection.js b/src/scripts/modules/Selection.js
@@ -187,6 +187,9 @@ const Selection = Module({
             const { props } = this;
             const currentSelection = this.getCurrentSelection();
             let currentRange;
+            if (!currentSelection) {
+                console.log('getCurrentRange:currentSelection', currentSelection);
+            }
 
             if (this.validateSelection(currentSelection)) {
                 currentRange = currentSelection.getRangeAt(0);
@@ -201,11 +204,17 @@ const Selection = Module({
 
         getAnchorNode () {
             const currentSelection = this.getCurrentSelection();
-            return currentSelection.anchorNode;
+            if (!currentSelection) {
+                console.log('getAnchorNode:currentSelection', currentSelection);
+            }
+            return currentSelection && currentSelection.anchorNode;
         },
 
         getCommonAncestor () {
             const currentSelection = this.getCurrentSelection();
+            if (!currentSelection) {
+                console.log('getCommonAncestor:currentSelection', currentSelection);
+            }
             if (currentSelection.rangeCount > 0) {
                 const selectionRange = currentSelection.getRangeAt(0);
                 return selectionRange.commonAncestorContainer;
@@ -298,9 +307,50 @@ const Selection = Module({
 
             const startTrimmablePrefix = startContainer.textContent.match(/^(\r?\n|\r)?(\s+)?/);
             const endTrimmablePrefix = endContainer.textContent.match(/^(\r?\n|\r)?(\s+)?/);
+            const endTrimmableSuffix = endContainer.textContent.match(/(\r?\n|\r)?(\s+)?$/);
+            const startElement = DOM.closestElement(startContainer);
+            const endElement = DOM.closestElement(endContainer);
+
+            console.log({
+                startTrimmablePrefix,
+                endTrimmablePrefix,
+                startPrefixLength: startTrimmablePrefix && startTrimmablePrefix[0].length,
+                endPrefixLength: endTrimmablePrefix && endTrimmablePrefix[0].length,
+                startContent: startContainer.textContent,
+                endContent: endContainer.textContent,
+                endSuffix: endContainer.textContent.match(/(\r?\n|\r)?(\s+)?$/),
+                startOffset,
+                endOffset
+            });
+
+            if (startTrimmablePrefix && startTrimmablePrefix[0].length) {
+                startOffset -= startTrimmablePrefix[0].length;
+                if (DOM.nodeIsInline(startElement)) {
+                    startOffset -= startTrimmablePrefix[0].match(/\s/) ? 1 : 0;
+                }
+            }
+
+            if (endTrimmablePrefix && endTrimmablePrefix[0].length) {
+                endOffset -= endTrimmablePrefix[0].length;
+                if (DOM.nodeIsInline(endElement)) {
+                    endOffset -= endTrimmablePrefix[0].match(/\s/) ? 1 : 0;
+                }
+            }
+
+            if (endTrimmableSuffix && endTrimmableSuffix[0].length) {
+                // endOffset -= endTrimmableSuffix[0].length;
+                if (DOM.nodeIsInline(endElement)) {
+                    endOffset -= endTrimmableSuffix[0].match(/\s/) ? 1 : 0;
+                }
+            }
+
+            console.log({
+                startOffset,
+                endOffset
+            });
 
-            startOffset -= startTrimmablePrefix ? startTrimmablePrefix[0].length : 0;
-            endOffset -= endTrimmablePrefix ? endTrimmablePrefix[0].length : 0;
+            startOffset = Math.max(0, startOffset);
+            endOffset = Math.min(endContainer.textContent.length, endOffset);
 
             startCoordinates.unshift(startOffset);
             endCoordinates.unshift(endOffset);
@@ -331,7 +381,6 @@ const Selection = Module({
             }
 
             const isIn = DOM.isIn(anchorNode, selectors, rootEl);
-
             if (isIn) {
                 return isIn;
             }
@@ -341,8 +390,8 @@ const Selection = Module({
             let contains = false;
 
             if (rangeFrag.childNodes.length) {
-                selectors.forEach(selector => {
-                    contains = contains || rangeFrag.childNodes[0].nodeName === selector;
+                rangeFrag.childNodes.forEach(childNode => {
+                    contains = contains || selectors.indexOf(childNode.nodeName) > -1;
                 });
             }
 
@@ -353,7 +402,9 @@ const Selection = Module({
             const currentSelection = this.getCurrentSelection();
             let { anchorNode, focusNode } = currentSelection;
             const selectionContainsNode = currentSelection.containsNode(node, true);
-
+            if (!currentSelection) {
+                console.log('containsNode:currentSelection', currentSelection);
+            }
             if (!currentSelection.rangeCount) {
                 return false;
             }
@@ -487,7 +538,9 @@ const Selection = Module({
         updateRange (range, opts={}) {
             const { mediator, props } = this;
             const currentSelection = this.getCurrentSelection();
-
+            if (!currentSelection) {
+                console.log('updateRange:currentSelection', currentSelection);
+            }
             if (opts.silent) {
                 props.silenceChanges.push(true); // silence removeAllRanges
                 props.silenceChanges.push(true); // silence addRange
@@ -634,6 +687,8 @@ const Selection = Module({
             const startOffset = startCoordinates.pop();
             const endOffset = endCoordinates.pop();
 
+            console.log('selectByCoordinates', { rangeCoordinates });
+
             let startContainer = dom.el[0];
             let endContainer = dom.el[0];
 
@@ -647,6 +702,8 @@ const Selection = Module({
                 endContainer = endContainer.childNodes[endIndex];
             }
 
+            console.log({ startContainer, endContainer, startLength: startContainer.length, endLength: endContainer.length, startOffset, endOffset });
+
             newRange.setStart(startContainer, startOffset);
             newRange.setEnd(endContainer, endOffset);
 
diff --git a/src/scripts/utils/DOM.js b/src/scripts/utils/DOM.js
@@ -253,9 +253,11 @@ const DOM = {
 
     closestElement(node) {
         let returnNode = node;
+        console.log('closestElement', node);
 
-        while (returnNode.nodeType !== 1) {
+        while (returnNode && returnNode.nodeType !== 1) {
             returnNode = returnNode.parentNode;
+            console.log('returnNode', returnNode);
         }
 
         return returnNode;
@@ -553,10 +555,13 @@ const DOM = {
 
     trimNodeText (node) {
         if (node.nodeType === Node.TEXT_NODE) {
-            const trimmedText = node.textContent
-                                    .replace(/\s{2,}/g, ' ')
-                                    .replace(/\r?\n|\r/g, '')
-                                    .trim();
+            const parentElement = DOM.closestElement(node);
+            let trimmedText = node.textContent
+                                  .replace(/\s{2,}/g, ' ')
+                                  .replace(/\r?\n|\r/g, '');
+            if (!DOM.nodeIsInline(parentElement)) {
+                trimmedText = trimmedText.trim();
+            }
             node.textContent = trimmedText;
         } else {
             node.childNodes.forEach((childNode) => {
@@ -579,6 +584,20 @@ const DOM = {
         return HTMLString;
     },
 
+    nodeIsInline (node) {
+        const inlineTagNames = ['B', 'STRONG', 'I', 'U', 'S', 'SUP', 'SUB'];
+
+        if (!node) {
+            return false;
+        }
+
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return true;
+        } else {
+            return inlineTagNames.indexOf(node.nodeName) < 0;
+        }
+    },
+
     //Pseudo-private methods
     _getGetMethodName(selector) {
         let methodName = null;
diff --git a/test/server/html/index.html b/test/server/html/index.html
@@ -177,7 +177,7 @@ <h1>Typester test server</h1>
                 node.childNodes.forEach(function (childNode) {
                   if (childNode.nodeType === Node.TEXT_NODE) {
                     if (childNode.textContent.trim().length) {
-                      appendHtmlText(childNode.textContent.trim(), opts.indentation + 1, true);
+                      appendHtmlText(childNode.textContent.replace(/\s/g, '\u00B7'), opts.indentation + 1, true);
                     }
                   } else {
                     appendHtmlText(generateHtmlText(childNode, {
diff --git a/test/unit/modules/BaseFormatter.spec.js b/test/unit/modules/BaseFormatter.spec.js
@@ -53,16 +53,14 @@ describe('modules/BaseFormatter', function () {
 
     it('should clean html on export', () => {
         const canvasBody = mediator.get('canvas:body');
-        canvasBody.innerHTML = `
-            <h1><span>Heading copy</span></h1>
+        canvasBody.innerHTML = `<h1><span>Heading copy</span></h1>
             <div><h2>Sub heading copy</h2></div>
             <article>
                 <p>First paragraph</p>
                 <span style='font-size: 16px;'>After first paragraph</span>
                 <p><font>Second paragraph</font></p>
             </article>
-            <ul><li><font>List item 1</font></li></ul>
-        `;
+            <ul><li><font>List item 1</font></li></ul>`;
         selectionHelper.selectFromTo(canvasBody.firstChild, 0, canvasBody.firstChild, 1);
         mediator.exec('format:import:from:canvas');
         if (!/\w+/.test(canvasBody.firstChild.textContent) && !/\w+/.test(editableEl.firstChild.textContent)) {
diff --git a/test/unit/modules/Commands.spec.js b/test/unit/modules/Commands.spec.js
@@ -4,6 +4,7 @@ import Mediator from '../../../src/scripts/core/Mediator';
 import Commands from '../../../src/scripts/modules/Commands';
 import Config from '../../../src/scripts/modules/Config';
 import selectionHelper from '../helpers/selection';
+import DOM from '../../../src/scripts/utils/DOM';
 
 describe('modules/Commands', function () {
     let mediator, $editableEl, editableEl;
@@ -66,6 +67,12 @@ describe('modules/Commands', function () {
             style: 'BLOCKQUOTE'
         });
 
+
+        const blockquoteParagraphs = editableEl.querySelectorAll('blockquote p');
+        blockquoteParagraphs.forEach((paragraph) => {
+            DOM.unwrap(paragraph);
+        });
+
         expect(editableEl.innerHTML).toBe(`<blockquote>${contentBlockText}</blockquote>`);
     });
 });
diff --git a/test/unit/modules/ListFormatter.spec.js b/test/unit/modules/ListFormatter.spec.js
@@ -40,22 +40,30 @@ describe('modules/ListFormatter', function () {
     afterEach(() => {
         editableEl.innerHTML = '';
         mediator.emit('app:destroy');
+        console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>');
     });
 
     it('should toggle ordered lists', () => {
         setEditableElHTML();
         expect(editableEl.getElementsByTagName('ol').length).toBe(0);
         expect(editableEl.getElementsByTagName('li').length).toBe(0);
 
+        console.log('---------------------------------------------------------------------------------------[2:start]')
         selectionHelper.selectFirstAndLastTextNodes(editableEl);
+        console.log(document.getSelection().toString());
         mediator.exec('format:list', orderedListOpts);
+        console.log('---------------------------------------------------------------------------------------[2:end]')
         expect(editableEl.getElementsByTagName('ol').length).toBe(1);
         expect(editableEl.getElementsByTagName('li').length).toBe(5);
 
+        console.log('---------------------------------------------------------------------------------------[2:start]')
         selectionHelper.selectFirstAndLastTextNodes(editableEl);
+        console.log(document.getSelection().toString());
         mediator.exec('format:list', orderedListOpts);
+        console.log('---------------------------------------------------------------------------------------[2:end]')
         expect(editableEl.getElementsByTagName('ol').length).toBe(0);
         expect(editableEl.getElementsByTagName('li').length).toBe(0);
+        console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
 
     });
 

Original file line number	Diff line number	Diff line change
`@@ -177,7 +177,7 @@ <h1>Typester test server</h1>`
`177`	`177`	`node.childNodes.forEach(function (childNode) {`
`178`	`178`	`if (childNode.nodeType === Node.TEXT_NODE) {`
`179`	`179`	`if (childNode.textContent.trim().length) {`
`180`		`- appendHtmlText(childNode.textContent.trim(), opts.indentation + 1, true);`
	`180`	`+ appendHtmlText(childNode.textContent.replace(/\s/g, '\u00B7'), opts.indentation + 1, true);`
`181`	`181`	`}`
`182`	`182`	`} else {`
`183`	`183`	`appendHtmlText(generateHtmlText(childNode, {`