@cocreate/selection 1.0.3 → 1.1.2

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## [1.1.2](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.1.1...v1.1.2) (2021-10-30)
+
+
+### Bug Fixes
+
+* removed for loop in getElementPosition ([20b7ff4](https://github.com/CoCreate-app/CoCreate-selection/commit/20b7ff45dc1f321a246d4fe9f22590c5b1e17c0e))
+
+## [1.1.1](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.1.0...v1.1.1) (2021-10-29)
+
+
+### Bug Fixes
+
+* update dependencies ([84943b4](https://github.com/CoCreate-app/CoCreate-selection/commit/84943b4e31b0d267580fa17cec494e55896aa98b))
+
+# [1.1.0](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.0.4...v1.1.0) (2021-10-29)
+
+
+### Features
+
+* get elements start and end position with out the need of element_id ([cdf1a85](https://github.com/CoCreate-app/CoCreate-selection/commit/cdf1a8517ab800c66c8fce2aa9d80e9701f9dd4c))
+* removed the need for element_id, uses cssPath instead ([08c7e9e](https://github.com/CoCreate-app/CoCreate-selection/commit/08c7e9ed90c2e3bc43990ef71b830b237c320392))
+
+## [1.0.4](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.0.3...v1.0.4) (2021-10-17)
+
+
+### Bug Fixes
+
+* update dependendies ([816f6e2](https://github.com/CoCreate-app/CoCreate-selection/commit/816f6e2bc59dcc7c1c134d65888ae9969adc8e0f))
+
 ## [1.0.3](https://github.com/CoCreate-app/CoCreate-selection/compare/v1.0.2...v1.0.3) (2021-10-16)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/selection",
-  "version": "1.0.3",
+  "version": "1.1.2",
   "description": "A simple selection component in vanilla javascript. Easily configured using HTML5 data-attributes and/or JavaScript API.",
   "keywords": [
     "selection",
@@ -61,7 +61,8 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/docs": "^1.2.38",
-    "@cocreate/hosting": "^1.2.34"
+    "@cocreate/docs": "^1.2.43",
+    "@cocreate/hosting": "^1.2.37",
+    "@cocreate/utils": "^1.2.0"
   }
 }

package/src/index.js

@@ -1,6 +1,11 @@
 /*globals Node*/
+import {cssPath, domParser} from '@cocreate/utils';
 
-export function getSelection (element) {
+String.prototype.customSplice = function(index, absIndex, string) {
+    return this.slice(0, index) + string + this.slice(index + Math.abs(absIndex));
+};
+
+export function getSelection(element) {
     if (element.tagName === "INPUT" || element.tagName === "TEXTAREA") {
         return {
             start: element.selectionStart,
@@ -8,23 +13,49 @@ export function getSelection (element) {
         };
     } 
     else {
-		let document = element.ownerDocument;
-		var selection = document.getSelection();
+		let Document = element.ownerDocument;
+		let selection = Document.getSelection();
 		if (!selection.rangeCount) return { start: 0, end: 0 };
 
-		var range = selection.getRangeAt(0);
-        var start = range.startOffset;
-        var end = range.endOffset;
+		let range = selection.getRangeAt(0);
+        let start = range.startOffset;
+        let end = range.endOffset;
+        let previousSibling = range.startContainer.previousSibling
+		if(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 domTextEditor = element;
-        let nodePos = getDomPosition({ domTextEditor, target: range.startContainer.parentElement, start, end });
-        if (nodePos){
-            start = nodePos.start;
-            end = nodePos.end;
-        }
-		return { start, end, range };
+		if (!domTextEditor.htmlString){
+			domTextEditor = element.closest('[contenteditable]');
+		}
+		let elementStart = start, elementEnd = end;
+		if (domTextEditor){
+            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;
+            }
+		}
+        let rangeObj = {
+        	startOffset: range.startOffset, 
+        	endOffset: range.endOffset, 
+        	startContainer: range.startContainer.parentElement, 
+        	endContainer: range.endContainer.parentElement,
+        	elementStart,
+        	elementEnd
+        };
+		return { start, end, range: rangeObj};
     }
     
 }
@@ -55,21 +86,34 @@ export function setSelection(element, start, end, range) {
         element.selectionEnd = end;
     } 
     else {
-    // 	if (document.activeElement !== element) return;
-    	if (range.commonAncestorContainer) {
-    	    let prevElement = range.commonAncestorContainer;
-    	    if (prevElement.nodeName == '#text')
-    	        prevElement = range.commonAncestorContainer.parentElement;
-    	    if (prevElement !== element) return;
-    	}
-    	let document = element.ownerDocument;
-    	var selection = document.getSelection();
-    	var range = contenteditable._cloneRangeByPosition(element, start, end);
+        if (!range) return;
+    	let Document = element.ownerDocument;
+    	let startOffset = start - range.elementStart;
+    	let endOffset = end - range.elementEnd;
+		let startContainer = getContainer(range.startContainer, startOffset);
+		let endContainer = getContainer(range.endContainer, endOffset);
+    	
+    	let selection = Document.getSelection();
     	selection.removeAllRanges();
-    	selection.addRange(range);
-    }
+		const nrange = Document.createRange();
+		nrange.setStart(startContainer, startOffset);
+		nrange.setEnd(endContainer, endOffset);
+	    selection.addRange(nrange);
+	}
 }
 
+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;
+		}
+	}
+}
 
 export function hasSelection(el) {
 	let { start, end } = getSelection(el);
@@ -78,189 +122,257 @@ export function hasSelection(el) {
 	}
 }
 
-const contenteditable = {	
-	_cloneRangeByPosition: function(element, start, end, range) {
-		if (!range) {
-			range = document.createRange();
-			range.selectNode(element);
-			range.setStart(element, 0);
-			this.start = start;
-			this.end = end;
-		}
-
-		if (element && (this.start > 0 || this.end > 0)) {
-			if (element.nodeType === Node.TEXT_NODE) {
-
-				if (element.textContent.length < this.start) this.start -= element.textContent.length;
-				else if (this.start > 0) {
-					range.setStart(element, this.start);
-					this.start = 0;
-				}
-
-				if (element.textContent.length < this.end) this.end -= element.textContent.length;
-				else if (this.end > 0) {
-					range.setEnd(element, this.end);
-					this.end = 0;
-				}
-			}
-			else {
-				for (var lp = 0; lp < element.childNodes.length; lp++) {
-					range = this._cloneRangeByPosition(element.childNodes[lp], this.start, this.end, range);
-					if (this.start === 0 && this.end === 0) break;
-				}
-			}
-		}
-
-		return range;
-	},
-
-};
-
-
-
-let space = "\u{0020}|\u{0009}";
-let allAttributeName = `[a-z0-9-_]+?`;
-
-let sps = `(${space})*?`;
-let spa = `(${space})+?`;
-let tgs = `(?:<(?<tagName>[a-z0-9]+?))`;
-let getEndTag = tagName => `(?:<(?<isClosing>${sps}\/${sps})?${tagName}${sps})`;
-
-const idSearch = 'element_id=';
-const getRegAttribute = (attributeName) =>
-	`(${spa}(?:(?:${attributeName})((?:="[^"]*?")|${space}|>)))`;
-
-let at = getRegAttribute(allAttributeName);
-
-let the = `${sps}(?<tagSlash>\/)?${sps}>`;
-
-let target;
-let tagName;
-let tagStPos;
-let tagStAfPos;
-let tagStClPos;
-let tagStClAfPos;
-let tagEnPos;
-let tagEnClAfPos;
-
-export function getDomPosition({ domTextEditor, target, start, end }) {
-	target = target.getAttribute('element_id');
-// 	let {tagStClAfPos} = findStartTagById(domTextEditor, target);
-
-	if(findStartTagById(domTextEditor, target))
-		findClosingTag(domTextEditor, target);
-	else return;
-
-	start = tagStClAfPos + start;
-	end = tagStClAfPos + end;
-	return {start, end};
-}
-
-export function getWholeElement(domTextEditor, target) {
-	
-	if(findStartTagById(domTextEditor, target)) {
-		findClosingTag(domTextEditor, target);
-		return { start: tagStPos, end: tagEnClAfPos || tagStClAfPos };
-	}
-	else
-		return false;
-}
-
-export function findStartTagById(domTextEditor, target) {
-	try {
-    	let sch = `(?:${sps}element_id\=\"${target}\"${sps})`;
-    	let reg = `(?<tagWhole>${tgs}${at}*?${sch}${at}*?${the})`;
-    	let tagStart = domTextEditor.htmlString.match(new RegExp(reg, "is"));
-    
-    	if(!tagStart) return false;
-    // 		throw new Error('element is not valid or can not be found');
-    
-    	tagName = tagStart.groups.tagName.toUpperCase();
+export function getElementPosition(str, start, end) {
+    let response = {};
+    let startString = str.substr(0, start);
+    let endString = str.substr(start);
+    let angleStart = startString.lastIndexOf("<");
+    let angleEnd = startString.lastIndexOf(">");
+    let endStringAngleEnd = endString.indexOf(">");
+    let element, position, nodeStart, nodeEnd, startNode, type;
+    if (angleEnd > angleStart) {
+        let length = 0;
+        if (start != end)
+            length = end - start;
+        let string = str.customSplice(start, length, '<findelement></findelement>');
+        let newDom = domParser(string);
+        let findEl = newDom.querySelector('findelement');
+        if (findEl) {
+            let insert = getInsertPosition(findEl);
+            element = insert.target;
+            position = insert.position;
+            type = 'insertAdjacent';
+            if(!position)
+                type = 'textNode';
+            if (type == 'textNode' || type == 'afterbegin');
+                nodeStart = start - angleEnd - 1;
+            findEl.remove();
+        }
+    }
+    else {
+        let node = str.slice(angleStart, startString.length + endStringAngleEnd + 1);
+        if (node.startsWith("</")) {
+            startNode = node.slice(0, 1) + node.slice(2);
+            startNode = startNode.substr(0, startNode.length - 1);
+            nodeStart = startString.lastIndexOf(startNode);
+            let endString1 = str.substr(nodeStart);
+            let end = endString1.indexOf(">");
+            nodeEnd = nodeStart + end + 1;
+            type = 'isEndTag';
+        }
+        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);
+            element = newDom.querySelector('[findelement]');
+            if (!element && newDom.tagName == 'HTML')
+                element = newDom;
+            else if (type == "isEndTag")
+                element = element.parentElement;
+            element.removeAttribute('findelement');
+        }
+        else {
+            let string = str.customSplice(angleStart, 0, '<findelement></findelement>');
+            let newDom = domParser(string);
+            element = newDom.querySelector('findelement');
+            if (element) {
+                let insert = getInsertPosition(element);
+                element = insert.target.parentElement;
+                position = insert.position;
+                if(position == 'afterend')
+                    element = element.parentElement;
+                type = 'innerHTML';
+            }
+            if (!element) {
+                console.log('Could not find element');
+            }
+        }
+    }
     
-    	tagStPos = tagStart.index;
-    	tagStAfPos = tagStart.index + tagName.length + 1;
-    	tagStClPos = tagStart.index + tagStart.groups.tagWhole.length - 1 - (tagStart.groups.tagSlash ? 1 : 0);
-    	// haveClosingTag = !tagStart.groups.tagSlash;
-    	tagStClAfPos = tagStart.index + tagStart.groups.tagWhole.length;
-    // 	tagNameEnd = tagStAfPos + tagName.length;
-    	// if it's like <img />
-    	if(tagStart.groups.tagSlash) {
-    		tagEnPos = tagStClPos;
-    		tagEnClAfPos = tagStClAfPos;
-    		// isOmission = true; // if the tag doesn't have closing counterpart
-    	}
-    // 	return true;
-    	return {tagName, tagStPos, tagStAfPos, tagStClPos, tagStClAfPos, tagEnPos, tagEnClAfPos};
-	} catch {
-	    
-	}
-}
-
-export function findClosingTag(domTextEditor, target) {
-	let match = domTextEditor.htmlString.substr(tagStClAfPos)
-		.matchAll(new RegExp(`(?<tagWhole>${getEndTag(tagName)}${at}*?${the})`, 'gi'));
-
-	if(!match) throw new Error('can not find any closing tag');
-
-	let nest = 0;
+    if (element) {
+        response.element = element;
+        response.path = cssPath(element);
+        response.position = position;
+        response.start = nodeStart;
+        response.end = nodeEnd;
+        response.type = type;
+    }
 
-	for(let i of match) {
-		if(i.groups.isClosing) {
-			if(!nest) {
-				tagEnPos = tagStClAfPos + i.index;
-				tagEnClAfPos = tagStClAfPos + i.index + i[0].length;
-				// return true;
-	            return { tagEnPos, tagEnClAfPos };
-			}
-			else
-				nest--;
-		}
-		else
-			nest++;
-	}
-	throw new Error('closing tag and openning tag order does not match');
+    return response;
 }
 
-export function findElByPos(domTextEditor, pos) {
-	let pos1 = pos - idSearch.length;
-	let pos2 = pos + idSearch.length;
-
-	pos1 = domTextEditor.htmlString.indexOf(idSearch, pos1 + idSearch.length);
-	if(pos1 !== -1 && isPosOnEl(domTextEditor, pos1, pos))
-		return {target, tagStClAfPos};
-
-	while(true) {
-		pos2 = domTextEditor.htmlString.lastIndexOf(idSearch, pos2 - idSearch.length);
-
-		if(pos2 !== -1) {
-			if(isPosOnEl(domTextEditor, pos2, pos))
-				return {target, tagStClAfPos};
-		}
-		else return false;
-	}
-
+function getInsertPosition(element){
+    let target, position;
+    let previousSibling = element.previousSibling;
+    let nextSibling = element.nextSibling;
+    if (previousSibling || nextSibling) {
+        if (!previousSibling) {
+            target = element.parentElement;
+            position = 'afterbegin';
+        }
+        else if (!nextSibling) {
+            target = element.parentElement;
+            position = 'beforend';
+        }
+        else if (previousSibling && previousSibling.nodeType == 1) {
+            target = previousSibling;
+            position = 'afterend';
+        }
+        else if (nextSibling && nextSibling.nodeType == 1) {
+            target = element.parentElement;
+            position = 'afterbegin';
+        }
+        else {
+            target = element.parentElement;
+        }
+    }
+    else {
+        target = element.parentElement;
+        position = 'afterbegin';
+    }
+    return {target, position};
 }
 
-function isPosOnEl(domTextEditor, elementIdPos, pos) {
-	target = getId(domTextEditor, elementIdPos + idSearch.length);
+export function getStringPosition({string, target, position, attribute, property, value}) {
+    try {
+        let selector = cssPath(target, '[contenteditable]');
+        let dom = domParser(string);
+        let element = dom.querySelector(selector);
+        if (!element){
+            console.log('element could not be found using selector:', selector);
+            return;
+        }
+        let start = 0, end = 0;
+        
+        if (position) {
+            if (position == 'beforebegin')
+                start = getElFromString(dom, string, element, position, true);
+            else
+            start = getElFromString(dom, string, element, position);
+            end = start;
+        }
+        else if (attribute) {
+            if (!element.hasAttribute(attribute)){
+            	start = getElFromString(dom, string, element, 'afterbegin') - 1;
+                end = start;
+            }
+            else {
+            	start = getElFromString(dom, string, element, 'beforebegin');
+                let elString = string.substr(start);
+                let attrValue = element.getAttribute(attribute);
+                let attrStart = elString.indexOf(` ${attribute}=`);
+                start = start + attrStart;
+                if (attribute == 'style') {
+                    element.style[property] = value;
+                    value = element.getAttribute(attribute);
+                }
+                else if (attribute == 'class') {
+                    let [prop, val] = value.split(':');
+                    if (prop && val){
+                        if (attrValue.includes(`${prop}:`)){
+                            let propStart = attrValue.indexOf(`${prop}:`);
+                            let propString = attrValue.substr(propStart);
+                            let propEnd = propString.indexOf(" ");
+                            if (propEnd > 0)
+                                propString = propString.slice(0, propEnd);
+                            element.classList.remove(propString);
+                        }
+                    }
+                    element.classList.add(value);
+                    value = element.getAttribute(attribute); 
+                }
+                else {
+                    element.setAttribute(attribute, value)
+                    value = element.getAttribute(attribute); 
+                }
+                end = start + attribute.length + attrValue.length + 4;
+            }
+        }
+        else if (value) {
+            start = getElFromString(dom, string, element, 'afterbegin');
+            let length = element.innerHTML.length;
+            end = start + length;
+        }
+        else {
+            start = getElFromString(dom, string, element, 'beforebegin');
+            end = getElFromString(dom, string, element, 'afterend', true);
+        }
 
-	if(!findStartTagById(domTextEditor, target))
-		return false;
+        return {start, end, newValue: value};
+    }
+    catch (e){
+        console.log(e);
+    }
+}
 
-	findClosingTag(domTextEditor, target);
-	let tagStartPos = tagStPos;
-	let tagEndPos = tagEnClAfPos || tagStClAfPos;
+function getElFromString(dom, string, element, position, wholeEl) {
+    let findEl = document.createElement('findelement');
+    let start, angle, documentTypeAngles;
+    if (position == 'afterbegin') {
+        element.insertAdjacentElement('afterbegin', findEl);
+    	angle = '>';
+    }
+    else if (position == 'afterend') {
+        element.insertAdjacentElement('afterend', findEl);
+    	angle = '>';
+    }
+    else if (position == 'beforebegin'){
+        element.insertAdjacentElement('afterbegin', findEl);
+    	angle = '<';
+    }	
+    else if (position == 'beforeend'){
+        element.insertAdjacentElement('afterend', findEl);
+    	angle = '<';
+    }	
+    if (dom.tagName == 'HTML')
+    	start = dom.outerHTML.indexOf("<findelement></findelement>");
+    else
+    	start = dom.innerHTML.indexOf("<findelement></findelement>");
+    
+    findEl.remove();
+    
+    let domString = dom.outerHTML.substring(0, start);
 
-	if(pos > tagStartPos && pos < tagEndPos) {
-		return true;
-	}
+    if (dom.tagName == "HTML") {
+    	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' && angles[angles.length - 1] === '') 
+    //     angleLength -= 1;
+    // else if (position == 'afterend' && angles[angles.length - 1] !== '')
+    //     angleLength += 1;
+    // if (wholeEl && position == 'afterend') {
+    //     angleLength += 1;
+    // }
+    // if (wholeEl && position == 'beforebegin') {
+    //     angleLength += 1;
+    // }
+    if (documentTypeAngles)
+    	angleLength += documentTypeAngles;
+    let elStart = getPosition(string, angle, angleLength);
+   
+    // if (position == 'beforebegin')
+        // elStart += 1
+    if (position == 'afterbegin') 
+        elStart += 1
+    else if (position == 'beforeend')
+        elStart += 1
+    else if (position == 'afterend') 
+        elStart += 1
+   	
+    return elStart;
 }
 
-function getId(domTextEditor, pos) {
-	let attWrapper = domTextEditor.htmlString[pos];
-	let endWrapper = domTextEditor.htmlString.indexOf(attWrapper, pos + 1);
-	return domTextEditor.htmlString.substring(pos + 1, endWrapper);
+function getPosition(string, subString, index) {
+  return string.split(subString, index).join(subString).length;
 }
 
-
-export default {getSelection, setSelection, hasSelection, processSelection, findElByPos, getDomPosition, getWholeElement, findStartTagById, findClosingTag};
+export default {getSelection, setSelection, hasSelection, processSelection, getStringPosition, getElementPosition};