@cocreate/cursors 1.10.17 → 1.10.18

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [1.10.18](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.17...v1.10.18) (2021-12-08)
+
+
+### Bug Fixes
+
+* check contenteditable element then iframe ([29bd7b4](https://github.com/CoCreate-app/CoCreate-cursors/commit/29bd7b4e7460c478cec37916fe9bb7439d2b8805))
+* use attribute for socket_id instead of id ([db901da](https://github.com/CoCreate-app/CoCreate-cursors/commit/db901daa270551cd6b1b6b95124d785ed81643c9))
+
 ## [1.10.17](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.10.16...v1.10.17) (2021-11-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/cursors",
-  "version": "1.10.17",
+  "version": "1.10.18",
   "description": "Collaborative user cursor position for inputs, textarea's and contenteditable elements.",
   "keywords": [
     "cursors",

package/src/index.css

@@ -27,13 +27,9 @@
     white-space: nowrap;
 }
 
-.selection {
-    background-color: #ecd44;
-    opacity: 0.6;
-}
-
 .cursor-selection {
     position: absolute;
+    opacity: 0.4;
 }
 
 .mirror {
@@ -49,7 +45,3 @@
     background: rgba(0, 0, 0, 0.00);
     width: 0px;
 }
-
-.users_selections {
-    opacity: 0.4;
-}

package/src/index.js

@@ -94,7 +94,7 @@ var getCoordinates = function(element, position_start, position_end) {
 
 
     let cursor_container = mirrorDiv.querySelectorAll('.cursor-container');
-    let users_selections = mirrorDiv.querySelectorAll('.users_selections');
+    let users_selections = mirrorDiv.querySelectorAll('.cursor-selection');
 
     let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
     mirrorDiv.textContent = value_element.substring(0, position_start);
@@ -165,8 +165,10 @@ function drawCursors(selection) {
         let realtime = element.getAttribute('realtime');
         let cursors = element.getAttribute('cursors');
         if (realtime == 'false' || cursors == 'false') continue;
-        if (element.tagName == 'IFRAME') {
-            let domTextEditor = element.contentDocument.documentElement;
+        if (element.hasAttribute('contenteditable')) {
+            let domTextEditor = element;
+            if (element.tagName == 'IFRAME')
+                domTextEditor = element.contentDocument.documentElement;
             let pos = getElementPosition(domTextEditor.htmlString, start, end);
             element = domTextEditor.querySelector(pos.path);
             let endPos = end - start;
@@ -187,20 +189,18 @@ function drawCursors(selection) {
 
         let elementMirror = document.getElementById(id_mirror);
         let cursor;
-        // let selection_user = false;
-        // let user = (typeof(selection) != 'undefined' && selection.hasOwnProperty('user')) ? selection.user : false;
-        // let user_id = (typeof(selection) != 'undefined' && selection.hasOwnProperty('user_id')) ? user.user_id : false;
+        let details = {collection, document_id, name};
         if (socket_id) {
-            var cursores_other_elements = document.querySelectorAll('#socket_' + socket_id);
-            cursores_other_elements.forEach(function(child_cursor, index, array) {
-                if (child_cursor.parentElement.getAttribute('id') != id_mirror) {
-                    child_cursor.remove();
+            let cursores_other_elements = document.querySelectorAll(`.cursor-container[socket_id="${socket_id}"]`);
+            if (cursores_other_elements) {
+                for (cursor of cursores_other_elements){
+                    if (cursor.details != details)
+                        cursor.remove();
                 }
-            });
-            cursor = elementMirror.querySelector('.cursor-container#socket_' + socket_id);
+            }
+            cursor = elementMirror.querySelector(`.cursor-container[socket_id="${socket_id}"]`);
             if (!cursor) {
-                let cursor_template = '<div class="cursor-container" \
-                                        id="socket_' + socket_id + '"  \
+                let cursor_template = '<div class="cursor-container" socket_id="' + socket_id + '" \
                                         style="background-color:' + selection.background + '"> \
                                           <div class="cursor-flag" \
                                               collection="users" \
@@ -210,16 +210,14 @@ function drawCursors(selection) {
                 elementMirror.innerHTML = cursor_template + elementMirror.innerHTML;
             }
         }
-        cursor = elementMirror.querySelector('.cursor-container#socket_' + socket_id);
+        cursor = elementMirror.querySelector(`.cursor-container[socket_id="${socket_id}"]`);
         if (cursor) {
             let font_size = getStyle(element, 'font-size');
             font_size = parseFloat(font_size.substring(0, font_size.length - 2));
             let cursor_height = ((font_size * 112.5) / 100);
-            // let my_cursor = cursor.querySelector('.cursor');
             let cursorFlag = cursor.querySelector('.cursor-flag');
             cursor.dataset.start = start;
             cursor.dataset.end = end;
-            cursor.setAttribute('socket_id', socket_id);
             cursor.setAttribute('user-name', selection.userName);
             cursor.setAttribute('user-background', selection.background);
             cursor.setAttribute('user-color', selection.color);
@@ -228,26 +226,32 @@ function drawCursors(selection) {
             cursorFlag.style["background"] = selection.background;
             cursorFlag.innerHTML = selection.userName;
             cursor.style["left"] = coordinates.end.left + "px";
+            cursor.details = {collection, document_id, name};
 
-            let selection_user = document.getElementById('sel-' + socket_id);
-            if (selection_user) {
-                selection_user.remove();
+            let userSelections = document.querySelectorAll(`.cursor-selection[socket_id="${socket_id}"]`);
+            if (userSelections) {
+                for (selection of userSelections){
+                    if (selection.details != details)
+                        selection.remove();
+                }
             }
             if ((start != end)) {
                 var scrollwidth = element.offsetWidth - element.scrollWidth;
                 var padding_right = parseInt(getComputedStyle(element)["paddingRight"]);
 
-                selection_user = document.createElement('span');
+                let selection_user = document.createElement('span');
                 selection_user.id = 'sel-' + socket_id;
-                selection_user.className = 'users_selections';
+                selection_user.setAttribute('socket_id', socket_id);
+                selection_user.className = 'cursor-selection';
                 let style_mirror = getComputedStyle(elementMirror);
                 selection_user.style["position"] = "absolute";
                 selection_user.style["top"] = style_mirror.paddingTop;
                 selection_user.style["left"] = style_mirror.paddingLeft;
                 selection_user.style["padding-right"] = scrollwidth + padding_right + "px";
+                selection_user.details = {collection, document_id, name};
                 elementMirror.insertBefore(selection_user, elementMirror.firstChild);
+                
                 let selection_span_by_user = document.createElement('span');
-                selection_span_by_user.id = 'selection-' + socket_id;
                 selection_span_by_user.style.backgroundColor = selection.background;
                 let value_element = (['TEXTAREA', 'INPUT'].indexOf(element.nodeName) == -1) ? element.innerHTML : element.value;
                 selection_user.textContent = value_element.substring(0, start);
@@ -297,7 +301,7 @@ function updateCursors(element) {
 }
 
 function removeCursor(clientId) {
-    let elements = document.querySelectorAll('[id*="socket_' + clientId + '"]');
+    let elements = document.querySelectorAll(`.cursor-container[socket_id="${clientId}"]`);
     elements.forEach(function(element, index, array) {
         element.parentNode.removeChild(element);
     });