@cocreate/selection 1.12.2 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [1.13.0](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.12.2...v1.13.0) (2024-06-12)
+
+
+### Bug Fixes
+
+* bump cocreate dependencies ([338178a](https://github.com/CoCreate-app/CoCreate-selection/commit/338178a59acee9ac267c33e089388ee819220e79))
+* conteneditable start end across multiple nodes ([ab1d6e2](https://github.com/CoCreate-app/CoCreate-selection/commit/ab1d6e2c5a8b00811e400e25550876c6a264ffe5))
+* remove testing logs ([910e3ff](https://github.com/CoCreate-app/CoCreate-selection/commit/910e3ff5d08d843c4bdff28b7842f54c8358c61d))
+* removed testing logs ([b2cf244](https://github.com/CoCreate-app/CoCreate-selection/commit/b2cf24406c14437f4c9082288649b890f52df51b))
+* return if contenteditable not found ([8ecf10e](https://github.com/CoCreate-app/CoCreate-selection/commit/8ecf10e180ab46e2d36a7a435369201f0d71bc91))
+* svg icon class ([20641ff](https://github.com/CoCreate-app/CoCreate-selection/commit/20641ff0426aa898153d99679069db01332f774e))
+* textnode handling ([e22af17](https://github.com/CoCreate-app/CoCreate-selection/commit/e22af17799699d596c83b0974d3d9187fbc51f23))
+
+
+### Features
+
+* parse text to reset selection ([7c367bb](https://github.com/CoCreate-app/CoCreate-selection/commit/7c367bbeccdaf07dfdec64d0811f5e5bd41fecb9))
+
 ## [1.12.2](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.12.1...v1.12.2) (2024-04-29)
 
 

package/docs/index.html

@@ -71,41 +71,31 @@
                         href="https://github.com/CoCreate-app/CoCreate-selection"
                         target="_blank"
                         class="margin-right:15px"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/github.svg"></i
+                        ><i src="/assets/svg/github.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="twitter"
                         title="Share on twitter"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/twitter.svg"></i
+                        ><i src="/assets/svg/twitter.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="facebook"
                         title="Share on Facebook"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/facebook.svg"></i
+                        ><i src="/assets/svg/facebook.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="instagram"
                         title="Share on instagram"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/instagram.svg"></i
+                        ><i src="/assets/svg/instagram.svg"></i
                     ></a>
                     <a
                         class="margin-right:15px share"
                         share-network="share"
                         title="Share on share"
-                        ><i
-                            class="height:20px fill:#505050"
-                            src="/assets/svg/share-alt.svg"></i
+                        ><i src="/assets/svg/share-alt.svg"></i
                     ></a>
                 </div>
             </div>
@@ -227,7 +217,7 @@
                                     toggle="code-height"
                                     toggle-selector="#demo-code"
                                     ><i
-                                        class="height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/eye.svg"></i
                                 ></a>
                                 <a
@@ -238,18 +228,14 @@
                                     hide="#eye-slash"
                                     toggle="code-height"
                                     toggle-selector="#demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/eye-slash.svg"></i
+                                    ><i src="/assets/svg/eye-slash.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
                                     id="code"
                                     show="#code-slash"
                                     hide="#code, #demo-code"
-                                    ><i
-                                        class="height:20px fill:#505050"
-                                        src="/assets/svg/code.svg"></i
+                                    ><i src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a
                                     class="margin-right:10px"
@@ -258,7 +244,7 @@
                                     show="#code, #demo-code"
                                     hide="#code-slash"
                                     ><i
-                                        class="display:flex height:18px fill:#505050"
+                                        class="height:18px"
                                         src="/assets/svg/code.svg"></i
                                 ></a>
                                 <a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/selection",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "A simple selection component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "selection",
@@ -58,6 +58,6 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/utils": "^1.33.6"
+    "@cocreate/utils": "^1.33.7"
   }
 }

package/src/index.js

@@ -10,48 +10,33 @@ export function getSelection(element) {
             start: element.selectionStart,
             end: element.selectionEnd
         };
-    }
-    else {
+
+    } else {
         let Document = element.ownerDocument;
         let selection = Document.getSelection();
-        if (!selection.rangeCount) return { start: 0, end: 0 };
+        if (!selection.rangeCount)
+            return { start: 0, end: 0 };
 
         let range = selection.getRangeAt(0);
-        let start = range.startOffset;
-        let end = range.endOffset;
-        let previousSibling = range.startContainer.previousSibling;
-        if (element.innerHTML && previousSibling && previousSibling.nodeType == 3) {
-            let length = 0;
-            do {
-                length += previousSibling.length;
-                previousSibling = previousSibling.previousSibling;
-            } while (previousSibling);
-            start += length;
-            end += length;
-        }
 
-        if (range.startContainer != range.endContainer) {
-            // TODO: replace common ancestor value
-        }
         let contenteditable = range.startContainer.parentElement.closest('[contenteditable][array][object][key]');
         if (contenteditable) {
             element = contenteditable;
-        }
+        } else return
+
         let domTextEditor = element;
         if (!domTextEditor.htmlString) {
-            domTextEditor = element.closest('[contenteditable]');
-        }
-        let elementStart = start, elementEnd = end;
-        if (domTextEditor && domTextEditor.htmlString) {
-            let nodePos = getStringPosition({ string: domTextEditor.htmlString, target: range.startContainer.parentElement, position: 'afterbegin' });
-            if (nodePos) {
-                elementStart = nodePos.start;
-                elementEnd = nodePos.end;
-                start = start + nodePos.start;
-                end = end + nodePos.end;
-            }
+            domTextEditor = domTextEditor.closest('[contenteditable]');
         }
 
+
+        let start = getNodePosition(range.startContainer, domTextEditor, range.startOffset)
+        let end = start
+        if (range.startContainer !== range.endContainer) {
+            end = getNodePosition(range.endContainer, domTextEditor, range.endOffset)
+        } else if (range.endOffset !== range.startOffset)
+            end = start + (range.endOffset - range.startOffset)
+
         let startContainer = range.startContainer;
         if (startContainer.nodeType == 3)
             startContainer = range.startContainer.parentElement;
@@ -60,21 +45,55 @@ export function getSelection(element) {
         if (endContainer.nodeType == 3)
             endContainer = range.endContainer.parentElement;
 
+        let textStart = 0, node = range.startContainer
+        while (node) {
+            textStart += node.textContent.length;
+            node = node.previousSibling;
+        }
+        let textEnd = textStart + (range.endOffset - range.startOffset)
+
         let rangeObj = {
-            element: contenteditable,
-            // domTextEditor,
+            element,
+            domTextEditor,
             startOffset: range.startOffset,
             endOffset: range.endOffset,
             startContainer,
             endContainer,
-            elementStart,
-            elementEnd
+            elementStart: start,
+            elementEnd: end,
+            nodeStartContainer: range.startContainer,
+            nodeEndContainer: range.endContainer,
+            textStart,
+            textEnd
         };
-        return { start, end, range: rangeObj };
+
+        return { element: contenteditable, value: selection.toString(), start, end, range: rangeObj };
     }
 
 }
 
+
+function getNodePosition(container, domTextEditor, position) {
+    let string = domTextEditor.htmlString
+    let node = container.previousSibling
+    while (node && node.nodeType === 3) {
+        position += node.textContent.length;
+        node = node.previousSibling;
+    }
+
+    let nodePosition
+    if (node && node.nodeType === 1) {
+        nodePosition = getStringPosition({ string, target: node, position: 'afterend' });
+        position += nodePosition.end
+    } else if (container.parentElement !== domTextEditor && container !== domTextEditor) {
+        let parentElement = container.parentElement
+        nodePosition = getStringPosition({ string, target: parentElement, position: 'afterbegin' });
+        position += nodePosition.start
+    }
+
+    return position
+}
+
 export function processSelection(element, value = "", prev_start, prev_end, start, end, range) {
     let prevStart = prev_start;
     let prevEnd = prev_end;
@@ -83,8 +102,7 @@ export function processSelection(element, value = "", prev_start, prev_end, star
             prev_start -= end - start;
             prev_end -= end - start;
             prev_start = prev_start < start ? start : prev_start;
-        }
-        else {
+        } else {
             prev_start += value.length;
             prev_end += value.length;
         }
@@ -98,8 +116,7 @@ export function processSelection(element, value = "", prev_start, prev_end, star
             let length = prevStart - prev_start;
             if (Math.sign(length) === 1 && range.startOffset >= length)
                 range.startOffset -= length;
-        }
-        else if (prevStart < prev_start) {
+        } else if (prevStart < prev_start) {
             let length = prev_start - prevStart;
             if (Math.sign(length) === 1)
                 if (range.startOffset == 0 || range.startOffset >= length)
@@ -109,8 +126,7 @@ export function processSelection(element, value = "", prev_start, prev_end, star
             let length = prevEnd - prev_end;
             if (Math.sign(length) === 1 && range.endOffset >= length)
                 range.endOffset -= length;
-        }
-        else if (prevEnd < prev_end) {
+        } else if (prevEnd < prev_end) {
             let length = prev_end - prevEnd;
             if (Math.sign(length) === 1)
                 if (range.endOffset == 0 || range.endOffset >= length)
@@ -126,13 +142,25 @@ export function setSelection(element, start, end, range) {
     if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
         element.selectionStart = start;
         element.selectionEnd = end;
-    }
-    else {
+    } else {
         if (!range) return;
         let Document = element.ownerDocument;
 
-        let startContainer = getContainer(range.startContainer, range.startOffset);
-        let endContainer = getContainer(range.endContainer, range.endOffset);
+        let startContainer, endContainer
+        // if (range.startContainer.htmlString)
+        startContainer = getContainer(range.startContainer, range.textStart - range.startOffset);
+        // else
+        //     startContainer = getContainer(range.startContainer, range.startOffset);
+
+        // if (range.endContainer.htmlString)
+        endContainer = getContainer(range.endContainer, range.textEnd - range.endOffset);
+        // else
+        //     endContainer = getContainer(range.endContainer, range.endOffset);
+
+        // let startContainer = getContainer(range.startContainer, range.elementStart);
+        // let endContainer = getContainer(range.endContainer, range.elementEnd);
+        // let startContainer = getContainer(range.startContainer, range.startOffset);
+        // let endContainer = getContainer(range.endContainer, range.endOffset);
 
         if (!startContainer || !endContainer)
             return;
@@ -141,6 +169,7 @@ export function setSelection(element, start, end, range) {
         selection.removeAllRanges();
 
         const newRange = Document.createRange();
+
         newRange.setStart(startContainer, range.startOffset);
         newRange.setEnd(endContainer, range.endOffset);
 
@@ -150,14 +179,11 @@ export function setSelection(element, start, end, range) {
 
 function getContainer(element, offset) {
     let nodeLengths = 0;
-    for (let node of element.childNodes) {
-        if (node.nodeType == 3) {
-            let length = node.length + nodeLengths;
-            if (length >= offset)
-                return node;
-            else
-                nodeLengths += length;
-        }
+    let nodes = element.childNodes
+    for (let i = 0; i < nodes.length; i++) {
+        nodeLengths += nodes[i].textContent.length
+        if (nodeLengths >= offset)
+            return nodes[i];
     }
 }
 
@@ -175,7 +201,7 @@ export function getElementPosition(str, start, end) {
     let angleStart = startString.lastIndexOf("<");
     let angleEnd = startString.lastIndexOf(">");
     let endStringAngleEnd = endString.indexOf(">");
-    let element, position, nodeStart, nodeEnd, startNode, type;
+    let element, path, position, nodeStart, nodeEnd, startNode, type;
     if (angleEnd > angleStart) {
         let length = 0;
         if (start != end)
@@ -192,16 +218,22 @@ export function getElementPosition(str, start, end) {
                 type = 'textNode';
             if (position == 'beforeend' && findEl.previousSibling && findEl.previousSibling.nodeType == 3)
                 type = 'textNode';
-            if (type == 'textNode' || position == 'afterbegin')
+            if (position == 'afterbegin')
                 nodeStart = start - angleEnd - 1;
+            if (type == 'textNode') {
+                if (element.tagName === 'DOM-PARSER') {
+                    element = null
+                    nodeStart = start
+                    nodeEnd = end
+                } else
+                    nodeStart = start - angleEnd - 1;
+            }
 
             findEl.remove();
         }
-    }
-    else if (angleStart == -1) {
+    } else if (angleStart == -1) {
         type = 'textNode';
-    }
-    else {
+    } else {
         let node = str.slice(angleStart, startString.length + endStringAngleEnd + 1);
         if (node.startsWith("</")) {
             startNode = node.slice(0, 1) + node.slice(2);
@@ -211,13 +243,13 @@ export function getElementPosition(str, start, end) {
             let end = endString1.indexOf(">");
             nodeEnd = nodeStart + end + 1;
             type = 'isEndTag';
-        }
-        else {
+        } else {
             nodeEnd = startString.length + endStringAngleEnd + 1;
             startNode = node;
             nodeStart = angleStart;
             type = 'isStartTag';
         }
+
         if (nodeEnd > 0) {
             let string = str.customSplice(nodeEnd - 1, 0, ' findelement');
             let newDom = domParser(string);
@@ -227,8 +259,7 @@ export function getElementPosition(str, start, end) {
             else if (type == "isEndTag")
                 element = element.parentElement;
             element.removeAttribute('findelement');
-        }
-        else {
+        } else {
             let string = str.customSplice(angleStart, 0, '<findelement></findelement>');
             let newDom = domParser(string);
             element = newDom.querySelector('findelement');
@@ -246,14 +277,13 @@ export function getElementPosition(str, start, end) {
         }
     }
 
-    if (element) {
-        response.element = element;
+    response.element = element;
+    if (element)
         response.path = cssPath(element);
-        response.position = position;
-        response.start = nodeStart;
-        response.end = nodeEnd;
-        response.type = type;
-    }
+    response.position = position;
+    response.start = nodeStart;
+    response.end = nodeEnd;
+    response.type = type;
 
     return response;
 }
@@ -266,24 +296,19 @@ function getInsertPosition(element) {
         if (!previousSibling) {
             target = element.parentElement;
             position = 'afterbegin';
-        }
-        else if (!nextSibling) {
+        } else if (!nextSibling) {
             target = element.parentElement;
             position = 'beforeend';
-        }
-        else if (previousSibling && previousSibling.nodeType == 1) {
+        } else if (previousSibling && previousSibling.nodeType == 1) {
             target = previousSibling;
             position = 'afterend';
-        }
-        else if (nextSibling && nextSibling.nodeType == 1) {
+        } else if (nextSibling && nextSibling.nodeType == 1) {
             target = element.parentElement;
             position = 'afterbegin';
-        }
-        else {
+        } else {
             target = element.parentElement;
         }
-    }
-    else {
+    } else {
         target = element.parentElement;
         position = 'afterbegin';
     }
@@ -315,13 +340,11 @@ export function getStringPosition({ string, target, position, attribute, propert
             else
                 start = getElFromString(dom, string, element, position);
             end = start;
-        }
-        else if (attribute) {
+        } else if (attribute) {
             if (!element.hasAttribute(attribute)) {
                 start = getElFromString(dom, string, element, 'afterbegin', true) - 1;
                 end = start;
-            }
-            else {
+            } else {
                 start = getElFromString(dom, string, element, 'beforebegin');
                 let elString = string.substring(start);
                 let attrValue = element.getAttribute(attribute);
@@ -333,8 +356,7 @@ export function getStringPosition({ string, target, position, attribute, propert
                     else
                         element.style[property] = value;
                     value = element.getAttribute(attribute);
-                }
-                else if (attribute == 'class') {
+                } else if (attribute == 'class') {
                     let [prop, val] = value.split(':');
                     if (prop && val) {
                         if (attrValue.includes(`${prop}:`)) {
@@ -349,20 +371,17 @@ export function getStringPosition({ string, target, position, attribute, propert
                     if (!remove)
                         element.classList.add(value);
                     value = element.getAttribute(attribute);
-                }
-                else {
+                } else {
                     element.setAttribute(attribute, value);
                     value = element.getAttribute(attribute);
                 }
                 end = start + attribute.length + attrValue.length + 4;
             }
-        }
-        else if (value) {
+        } else if (value) {
             start = getElFromString(dom, string, element, 'afterbegin');
             let length = element.innerHTML.length;
             end = start + length;
-        }
-        else {
+        } else {
             start = getElFromString(dom, string, element, 'beforebegin');
             end = getElFromString(dom, string, element, 'afterend', true);
         }
@@ -380,19 +399,17 @@ function getElFromString(dom, string, element, position, isAttribute) {
     if (position == 'afterbegin') {
         element.insertAdjacentElement('afterbegin', findEl);
         angle = '>';
-    }
-    else if (position == 'afterend') {
+    } else if (position == 'afterend') {
         element.insertAdjacentElement('afterend', findEl);
         angle = '>';
-    }
-    else if (position == 'beforebegin') {
+    } else if (position == 'beforebegin') {
         element.insertAdjacentElement('afterbegin', findEl);
         angle = '<';
-    }
-    else if (position == 'beforeend') {
+    } else if (position == 'beforeend') {
         element.insertAdjacentElement('afterend', findEl);
         angle = '<';
     }
+
     if (dom.tagName == 'HTML')
         start = dom.outerHTML.indexOf("<findelement></findelement>");
     else
@@ -409,15 +426,19 @@ function getElFromString(dom, string, element, position, isAttribute) {
 
     findEl.remove();
 
-    let domString = dom.outerHTML.substring(0, start);
+    let domString = dom.innerHTML.substring(0, start);
+    // let domString = dom.outerHTML.substring(0, start);
 
     if (dom.tagName == "HTML") {
+        domString = dom.outerHTML.substring(0, start);
         let htmlIndex = string.indexOf('<html');
         let documentType = string.substring(0, htmlIndex);
         documentTypeAngles = documentType.split(angle).length - 1;
     }
     let angles = domString.split(angle);
     let angleLength = angles.length - 1;
+    // if (position == 'afterend')
+    //     angleLength += 1;
     if (documentTypeAngles)
         angleLength += documentTypeAngles;
     let elStart = getPosition(string, angle, angleLength);