#9 - Another refinement on selection ranging & trimming

Author: fredevery

src/scripts/modules/ListFormatter.js

@@ -97,7 +97,7 @@ const ListFormatter = Module({
         commit () {
             const { mediator, cleanupListDOM } = this;
             mediator.exec('format:import:from:canvas', {
-                // importFilter: cleanupListDOM
+                importFilter: cleanupListDOM
             });
         },
 

src/scripts/modules/Selection.js

@@ -293,34 +293,22 @@ const Selection = Module({
                 endContainer,
                 endOffset
             } = this.getCurrentRange();
+
             let startCoordinates = [];
             let endCoordinates = [];
-
-            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);
             let startPrefixTrimLength = 0;
             let endPrefixTrimLength = 0;
             let endSuffixTrimLength = 0;
 
-            console.log({
-                startTrimmablePrefix,
-                endTrimmablePrefix,
-                endTrimmableSuffix,
-                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
-            });
+            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 startTrimmableSides = DOM.trimmableSides(startContainer.firstChild ? startContainer.firstChild : startContainer);
+            const endTrimmableSides = DOM.trimmableSides(endContainer.lastChild ? endContainer.lastChild : endContainer);
 
             if (startTrimmablePrefix && startTrimmablePrefix[0].length) {
                 startPrefixTrimLength += startTrimmablePrefix[0].length;
-                if (DOM.nodeIsInline(startElement)) {
+                if (!startTrimmableSides.left) {
                     startPrefixTrimLength -= startTrimmablePrefix[0].match(/\s/) ? 1 : 0;
                 }
                 startOffset -= startPrefixTrimLength;
@@ -331,27 +319,21 @@ const Selection = Module({
 
             if (endTrimmablePrefix && endTrimmablePrefix[0].length && endContainer !== startContainer) {
                 endPrefixTrimLength += endTrimmablePrefix[0].length;
-                if (DOM.nodeIsInline(endElement)) {
+                if (!endTrimmableSides.left) {
                     endPrefixTrimLength -= endTrimmablePrefix[0].match(/\s/) ? 1 : 0;
                 }
                 endOffset -= endPrefixTrimLength;
             }
 
             if (endTrimmableSuffix && endTrimmableSuffix[0].length) {
                 endSuffixTrimLength += endTrimmableSuffix[0].length;
-                if (DOM.nodeIsInline(endElement)) {
+                if (!endTrimmableSides.right) {
                     endSuffixTrimLength -= endTrimmableSuffix[0].match(/\s/) ? 1 : 0;
                 }
                 let trimmedTextLength = endContainer.textContent.length - endPrefixTrimLength - endSuffixTrimLength;
-                console.log('>>', { endOffset, trimmedTextLength, textLength: endContainer.textContent.length, endPrefixTrimLength, endSuffixTrimLength });
                 endOffset = Math.min(trimmedTextLength, endOffset);
             }
 
-            console.log({
-                startOffset,
-                endOffset
-            });
-
             startOffset = Math.max(0, startOffset);
             endOffset = Math.min(endContainer.textContent.length, endOffset);
 
@@ -687,8 +669,6 @@ 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];
 
@@ -702,8 +682,6 @@ 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);
 

src/scripts/utils/DOM.js

@@ -553,13 +553,18 @@ const DOM = {
 
     trimNodeText (node) {
         if (node.nodeType === Node.TEXT_NODE) {
-            const parentElement = DOM.closestElement(node);
+            const trimmableSides = DOM.trimmableSides(node);
             let trimmedText = node.textContent
                                   .replace(/\s{2,}/g, ' ')
                                   .replace(/\r?\n|\r/g, '');
-            if (!DOM.nodeIsInline(parentElement)) {
-                trimmedText = trimmedText.trim();
+
+            if (trimmableSides.left) {
+                trimmedText = trimmedText.replace(/^\s+?/, '');
+            }
+            if (trimmableSides.right) {
+                trimmedText = trimmedText.replace(/\s+?$/, '');
             }
+
             node.textContent = trimmedText;
         } else {
             node.childNodes.forEach((childNode) => {
@@ -568,6 +573,18 @@ const DOM = {
         }
     },
 
+    trimmableSides (node) {
+        const { parentNode } = node;
+        const isInline = DOM.nodeIsInline(node);
+        const isFirstChild = parentNode && node === parentNode.firstChild;
+        const isLastChild = parentNode && node === parentNode.lastChild;
+
+        return {
+            left: !isInline && isFirstChild,
+            right: !isInline && isLastChild
+        };
+    },
+
     nodesToHTMLString (nodes) {
         let HTMLString = '';
 
@@ -585,15 +602,13 @@ const DOM = {
     nodeIsInline (node) {
         const inlineTagNames = ['B', 'STRONG', 'I', 'U', 'S', 'SUP', 'SUB'];
 
-        if (!node) {
-            return false;
-        }
-
+        if (!node) { return false; }
         if (node.nodeType !== Node.ELEMENT_NODE) {
-            return true;
-        } else {
-            return inlineTagNames.indexOf(node.nodeName) < 0;
+            node = DOM.closestElement(node);
         }
+        if (!node) { return false; }
+
+        return inlineTagNames.indexOf(node.nodeName) > -1;
     },
 
     //Pseudo-private methods