@cocreate/cursors 1.23.4 → 1.23.5

package/CHANGELOG.md

@@ -1,3 +1,18 @@
+## [1.23.5](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.23.4...v1.23.5) (2024-06-12)
+
+
+### Bug Fixes
+
+* bump cocreate dependencies ([004badc](https://github.com/CoCreate-app/CoCreate-cursors/commit/004badc58b9eaec4b3b7c9e7f4a6933da5420121))
+* contenteditable element selections ([8f16a74](https://github.com/CoCreate-app/CoCreate-cursors/commit/8f16a7465c027e78b63fa450675877ac827fcdc8))
+* cursor selections on contenteditable elements ([8fc58e0](https://github.com/CoCreate-app/CoCreate-cursors/commit/8fc58e0dce113844876858244160de6c1ed3efaf))
+* fix cursors and selection between contenteditable and textareas ([2e12fec](https://github.com/CoCreate-app/CoCreate-cursors/commit/2e12fece9f37a54d82731ef59bf03536b845a3b0))
+* improved handling of contenteditable cursors using innerHtml ([36b0b40](https://github.com/CoCreate-app/CoCreate-cursors/commit/36b0b4073eb46763dfec1d955aae2cdcf707430c))
+* improved whitespace handling ([0fe857e](https://github.com/CoCreate-app/CoCreate-cursors/commit/0fe857ef526b19e65f524ca2b0adc88bc6f807eb))
+* set transparent!important ([e728c56](https://github.com/CoCreate-app/CoCreate-cursors/commit/e728c5692d5022d839e41375339089e93da3bb3c))
+* svg icon class ([b7512a5](https://github.com/CoCreate-app/CoCreate-cursors/commit/b7512a5d272dfb62e0a4537c96c426f879b73340))
+* use framId to determin if should continue element loop ([bb865cf](https://github.com/CoCreate-app/CoCreate-cursors/commit/bb865cf859a0ae319f45330bec9ba8532ab5cd91))
+
 ## [1.23.4](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.23.3...v1.23.4) (2024-04-29)
 
 

package/demo/index.html

@@ -39,9 +39,7 @@
 
             <button
                 class="submitBtn position:fixed bottom:15px right:15px bg-blue grow-hover round">
-                <i
-                    class="height:20px fill:#505050"
-                    src="/assets/svg/save.svg"></i>
+                <i src="/assets/svg/save.svg"></i>
             </button>
         </form>
 

package/docs/index.html

@@ -72,41 +72,31 @@
                         href="https://github.com/CoCreate-app/CoCreate-cursor"
                         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>
@@ -223,7 +213,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
@@ -234,18 +224,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"
@@ -254,7 +240,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/cursors",
-  "version": "1.23.4",
+  "version": "1.23.5",
   "description": "Collaborative user cursor position for inputs, textarea's and contenteditable elements.",
   "keywords": [
     "cursors",
@@ -59,12 +59,12 @@
     "webpack-log": "^3.0.1"
   },
   "dependencies": {
-    "@cocreate/local-storage": "^1.14.3",
-    "@cocreate/observer": "^1.16.0",
-    "@cocreate/random-color": "^1.10.0",
-    "@cocreate/selection": "^1.12.1",
-    "@cocreate/socket-client": "^1.39.0",
-    "@cocreate/utils": "^1.33.6",
-    "@cocreate/uuid": "^1.11.1"
+    "@cocreate/local-storage": "^1.15.0",
+    "@cocreate/observer": "^1.16.1",
+    "@cocreate/random-color": "^1.10.1",
+    "@cocreate/selection": "^1.12.2",
+    "@cocreate/socket-client": "^1.39.1",
+    "@cocreate/utils": "^1.33.7",
+    "@cocreate/uuid": "^1.11.2"
   }
 }

package/src/index.css

@@ -3,6 +3,7 @@ cursor {
     display: inline-block;
     width: 2px;
     background-color: dodgerblue;
+    white-space: pre-wrap
     /*z-index:10;*/
 }
 
@@ -36,11 +37,18 @@ selected-text {
 }
 
 .mirror_color {
-    color: transparent;
-    pointer-events: none;
+    color: transparent!important;
 }
 
 .mirror_scroll::-webkit-scrollbar {
     background: rgba(0, 0, 0, 0.00);
     width: 0px;
 }
+
+[mirror_id][contenteditable] {
+    white-space: pre-wrap
+}
+
+selected-text * {
+    background-color: inherit;
+}

package/src/index.js

@@ -83,16 +83,16 @@ function drawCursors(selection) {
     const array = selection['array'];
     const object = selection['object'];
     const key = selection['key'];
-    let start = selection['start'];
-    let end = selection['end'];
     let elements = selection.element;
     if (!elements) {
         let selector = '[array="' + array + '"][object="' + object + '"][key="' + key + '"]';
-        selector += ':not(.codemirror, .monaco, [actions])';
+        selector += ':not([actions])';
         elements = document.querySelectorAll(selector);
     }
     for (let element of elements) {
-        if (window.activeElement == element && socket.has(selection.socketId)) {
+        let start = selection['start']
+        let end = selection['end']
+        if (window.activeElement == element && socket.frameId === selection.frameId) {
             continue;
         }
         let realtime = element.getAttribute('realtime');
@@ -100,29 +100,33 @@ function drawCursors(selection) {
         let contenteditable = element.getAttribute('contenteditable');
         if (!realtime || realtime == 'false' || cursors == 'false') continue;
         if (element.tagName != 'INPUT' && element.tagName != 'TEXTAREA')
-            if (contenteditable == 'false' || contenteditable == null)
+            if (contenteditable == 'false' || contenteditable === null) {
                 if (cursors != 'true') continue;
+            }
 
         if (element.hasAttribute('contenteditable')) {
-            let domTextEditor = element;
+            contenteditable = true
+            // let domTextEditor = element;
             if (element.tagName == 'IFRAME') {
                 // let frameClientId = element.contentDocument.defaultView.CoCreateSockets.id;
                 // if (frameClientId == selection.socketId) continue;
-                domTextEditor = element.contentDocument.documentElement;
+                element = element.contentDocument.documentElement;
             }
-            if (!domTextEditor.htmlString)
+            if (!element.htmlString)
                 continue
-            let pos = getElementPosition(domTextEditor.htmlString, start, end);
-            if (pos.start) {
-                if (pos.path)
-                    element = domTextEditor.querySelector(pos.path);
-                let endPos = end - start;
-                if (endPos > 0)
-                    end = pos.start + endPos;
-                else
-                    end = pos.start;
-                start = pos.start;
-            }
+            // let pos = getElementPosition(domTextEditor.htmlString, start, end);
+
+            // if (pos.path) {
+            //     element = domTextEditor.querySelector(pos.path);
+            //     if (pos.start) {
+            //         let endPos = end - start;
+            //         if (endPos > 0)
+            //             end = pos.start + endPos;
+            //         else
+            //             end = pos.start;
+            //         start = pos.start;
+            //     }
+            // }
         }
 
         if (!element) continue;
@@ -150,10 +154,10 @@ function drawCursors(selection) {
 
             _initEvents(element);
             initDocument(document);
-        }
-        else
+        } else
             mirrorDiv = document.getElementById(id_mirror);
 
+
         let computed = getComputedStyle(element);
         let rect = element.getBoundingClientRect();
 
@@ -166,16 +170,15 @@ function drawCursors(selection) {
         style.position = 'absolute';
         style.width = rect.width + 'px';
         style.height = rect.height + 'px';
+        style.margin = '0px';
+        style.borderColor = 'transparent';
+        style.outlineColor = 'transparent';
+
         style.overflowX = computed['overflowX'];
         style.overflowY = computed['overflowY'];
-        style.margin = '0px';
         style.padding = computed['padding'];
         style.border = computed['border'];
-        style.borderColor = 'transparent';
         style.outline = computed['outline'];
-        style.outlineColor = 'transparent';
-        style.boxSizing = computed['boxSizing'];
-        style.lineHeight = computed['lineHeight'];
 
         if (element.parentElement.style['display'] == 'inline') {
             style.top = element.clientTop + 'px';
@@ -185,56 +188,97 @@ function drawCursors(selection) {
             style.left = element.offsetLeft + 'px';
         }
 
-        if (element.nodeName !== 'INPUT') {
-            style.wordWrap = 'break-word';
-            style.whiteSpace = 'pre-wrap';
+        if (contenteditable) {
+            const actualStyles = getActualStyles(element);
+            for (const [prop, value] of Object.entries(actualStyles)) {
+                style[prop] = value;
+            }
         } else {
-            style.whiteSpace = 'pre';
-        }
-
-        let properties = ['fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontFamily', 'letterSpacing', 'lineHeight', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'textRendering', 'textTransform', 'textIndent', 'overflowWrap', 'tabSize', 'webkitWritingMode', 'wordSpacing'];
-
-        properties.forEach(function (prop) {
-            if (['left', 'top'].indexOf(prop.toLowerCase()) === -1)
+            let properties = ['boxSizing', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontFamily', 'letterSpacing', 'lineHeight', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'textRendering', 'textTransform', 'textIndent', 'overflowWrap', 'tabSize', 'webkitWritingMode', 'whiteSpace', 'wordSpacing'];
+            properties.forEach(function (prop) {
                 style[prop] = computed[prop];
-        });
+            });
 
-        let spanText = mirrorDiv.querySelector('span-text');
-        if (!spanText)
-            spanText = document.createElement('span-text');
-        spanText.style['display'] = 'block';
-        let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
+            let paddingBottom = parseFloat(computed['padding-bottom'].replace('px', ''))
+            style.height = rect.height - paddingBottom + 'px';
+
+            if (element.nodeName === 'INPUT')
+                style.whiteSpace = 'pre';
+        }
 
-        spanText.textContent = value_element;
-        if (element.nodeName === 'INPUT')
-            spanText.textContent = mirrorDiv.textContent.replace(/\s/g, " ");
-        mirrorDiv.appendChild(spanText);
         let cursor, cursorFlag;
         let details = { array, object, key };
         if (socket_id) {
-            let userSelection = mirrorDiv.querySelector(`selection[socket_id="${socket_id}"]`);
-            if (userSelection && userSelection.details != details)
-                userSelection.remove();
             let selection_user = mirrorDiv.querySelector(`selection[socket_id="${socket_id}"]`);
-            if (!selection_user) {
-                selection_user = document.createElement('selection');
-                selection_user.setAttribute('socket_id', socket_id);
-                selection_user.style["position"] = "absolute";
-                let style_mirror = getComputedStyle(mirrorDiv);
-                selection_user.style["top"] = style_mirror.paddingTop;
-                selection_user.style["left"] = style_mirror.paddingLeft;
-                selection_user.style["width"] = mirrorDiv.clientWidth - parseInt(computed['padding-left']) - parseInt(computed['padding-right']) - scrollBarWidth + 'px';
-                selection_user.details = { array, object, key };
-
-                mirrorDiv.appendChild(selection_user);
-            }
+            if (selection_user && selection_user.details != details)
+                selection_user.remove();
+
+            selection_user = document.createElement('selection');
+            selection_user.setAttribute('socket_id', socket_id);
+            selection_user.style["position"] = "absolute";
+            let style_mirror = getComputedStyle(mirrorDiv);
+            selection_user.style["top"] = style_mirror.paddingTop;
+            selection_user.style["left"] = style_mirror.paddingLeft;
+            selection_user.style["width"] = mirrorDiv.clientWidth - parseInt(computed['padding-left']) - parseInt(computed['padding-right']) - scrollBarWidth + 'px';
+            selection_user.details = { array, object, key };
 
             let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
-            selection_user.textContent = value_element.substring(0, start);
+            if (contenteditable) {
+                selection_user.innerHTML = value_element.substring(0, start);
+            } else
+                selection_user.textContent = value_element.substring(0, start);
+
+            let selectionElement
+            if (contenteditable) {
+                selectionElement = getElementPosition(element.htmlString, start, end);
+            }
+
+            let lastChildTagName, lastChildElement
+            if (selectionElement && selectionElement.element && selectionElement.position !== 'afterend') {
+                lastChildElement = selection_user.lastElementChild;
+                lastChildTagName = lastChildElement.tagName.toLowerCase()
+            }
+
+            let selectedText = document.createElement('selected-text');
+            selectedText.style["backgroundColor"] = selection.background;
+
+            let setCursorInLastChild = false
+            if (contenteditable) {
+                if (lastChildTagName && start !== end) {
+                    let selectedTextFrag = document.createElement('selected-text');
+                    selectedTextFrag.style["backgroundColor"] = selection.background;
+
+                    const closingTagRegex = new RegExp("</\\s*" + lastChildTagName + "\\s*>", "i");
+                    let secondHalfString = value_element.substring(start, end) || '';
+                    const closingTagMatch = secondHalfString.match(closingTagRegex);
+                    // console.log('secondHalfString', secondHalfString)
+
+                    let closingTagEnd
+                    if (closingTagMatch) {
+                        closingTagEnd = closingTagMatch.index + closingTagMatch[0].length;
+                        // console.log('closingTagEnd', closingTagEnd)
+
+                        selectedTextFrag.innerHTML = secondHalfString.substring(0, closingTagEnd) || '';
+                        lastChildElement.appendChild(selectedTextFrag);
+                        // console.log('selectedTextFrag', selectedTextFrag)
+
+                        selectedText.innerHTML = value_element.substring(start + closingTagEnd, end) || '';
+                        // console.log('selectedText', selectedText)
+
+                    } else {
+                        selectedText.innerHTML = value_element.substring(start, end) || '';
+                        setCursorInLastChild = true
+                    }
+                } else {
+                    if (lastChildTagName)
+                        setCursorInLastChild = true
+
+                    selectedText.innerHTML = value_element.substring(start, end) || '';
+                }
+            } else {
+                selectedText.textContent = value_element.substring(start, end) || '';
+            }
 
-            let value_end = value_element.substring(end) || '';
-            let span_end = document.createElement('span-end');
-            span_end.textContent = value_end;
 
             cursor = document.createElement('cursor');
             cursor.setAttribute('socket_id', socket_id);
@@ -245,13 +289,7 @@ function drawCursors(selection) {
             cursor.setAttribute('user-color', selection.color);
             cursor.style["background"] = selection.background;
             cursor.details = { array, object, key };
-            cursor.textContent = "1";
-            span_end.prepend(cursor);
-
-            let selectedText = document.createElement('selected-text');
-            selectedText.style["backgroundColor"] = selection.background;
-            selectedText.textContent = value_element.substring(start, end) || '';
-            span_end.prepend(selectedText);
+            cursor.textContent = " ";
 
             cursorFlag = document.createElement('cursor-flag');
             cursorFlag.setAttribute('array', 'users');
@@ -261,12 +299,57 @@ function drawCursors(selection) {
             cursorFlag.innerHTML = selection.userName;
             cursor.appendChild(cursorFlag);
 
+            if (setCursorInLastChild) {
+                lastChildElement.appendChild(selectedText);
+                lastChildElement.appendChild(cursor);
+            } else {
+                selection_user.appendChild(selectedText);
+                selection_user.appendChild(cursor);
+            }
+
+            let span_end = document.createElement('span-end');
+            let value_end = value_element.substring(end) || '';
+            if (contenteditable)
+                span_end.innerHTML = value_end
+            else
+                span_end.textContent = value_end
+
             selection_user.appendChild(span_end);
+
+            mirrorDiv.appendChild(selection_user);
         }
         scrollMirror(element);
     }
 }
 
+function getActualStyles(element) {
+    const actualStyles = {};
+
+    // Copy styles that are directly applied to the element (inline styles)
+    for (const prop in element.style) {
+        if (element.style[prop]) {
+            actualStyles[prop] = element.style[prop];
+        }
+    }
+
+    // Get styles from classes, IDs, attributes, and tag names
+    for (const sheet of document.styleSheets) {
+        try {
+            for (const rule of sheet.cssRules) {
+                if (element.matches(rule.selectorText)) {
+                    for (const prop of rule.style) {
+                        actualStyles[prop] = rule.style.getPropertyValue(prop);
+                    }
+                }
+            }
+        } catch (e) {
+            console.warn("Unable to access stylesheet:", e);
+        }
+    }
+
+    return actualStyles;
+}
+
 function updateCursors(element) {
     let mirrorDivs = [];
     let id_mirror = element.getAttribute('mirror_id');
@@ -274,10 +357,10 @@ function updateCursors(element) {
         let mirrorDiv = element.ownerDocument.getElementById(id_mirror);
         if (mirrorDiv)
             mirrorDivs = [mirrorDiv];
-    }
-    else {
+    } else {
         mirrorDivs = element.querySelectorAll('.mirror');
     }
+
     for (let mirrorDiv of mirrorDivs) {
         element = mirrorDiv.element;
         let cursors = mirrorDiv.querySelectorAll('cursor');
@@ -368,6 +451,7 @@ socket.listen('cursor', function (response) {
     // if (socket.has(selection.socketId)) return;
     let selection = response.data
     selection.socketId = response.socketId
+    selection.frameId = response.frameId
     if (selection.start != null && selection.end != null)
         drawCursors(selection);
     else