@cocreate/cursors 1.12.22 → 1.13.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.13.0](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.12.23...v1.13.0) (2022-12-17)
+
+
+### Features
+
+* improved cursor mirror accuracy ([184e1f4](https://github.com/CoCreate-app/CoCreate-cursors/commit/184e1f452dfc23cadd642e415f2d6b7397031a7e))
+
+## [1.12.23](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.12.22...v1.12.23) (2022-12-15)
+
+
+### Bug Fixes
+
+* add missing dev dependency style-loader ([ece7b2c](https://github.com/CoCreate-app/CoCreate-cursors/commit/ece7b2cabe7548629661ea206dc688a333a95eff))
+
 ## [1.12.22](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.12.21...v1.12.22) (2022-12-13)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/cursors",
-  "version": "1.12.22",
+  "version": "1.13.0",
   "description": "Collaborative user cursor position for inputs, textarea's and contenteditable elements.",
   "keywords": [
     "cursors",
@@ -53,6 +53,7 @@
     "clean-webpack-plugin": "^3.0.0",
     "file-loader": "^6.2.0",
     "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.1.1",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^5.24.4",

package/src/index.js

@@ -121,28 +121,31 @@ function drawCursors(selection) {
         
         let computed = getComputedStyle(element);
         let rect = element.getBoundingClientRect();
+        
         let borderWidth = parseInt(computed['border-width']) * 2;
         let scrollBarWidth = 0;
         if (element.clientWidth != 0)
             scrollBarWidth = element.offsetWidth - element.clientWidth - borderWidth;
-        let style = mirrorDiv.style;
         
+        let style = mirrorDiv.style; 
         style.position = 'absolute';
         style.width = rect.width + 'px';
         style.height = rect.height + 'px';
-        style.visibility = 'visible';
         style.overflowX = computed['overflowX'];
         style.overflowY = computed['overflowY'];
         style.margin = '0px';
-        style.paddingRight = parseInt(computed['paddingRight']) + scrollBarWidth + 'px';
+        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';
             style.left = element.clientLeft + 'px';
-        }
-        else {
+        } else {
             style.top = element.offsetTop + 'px';
             style.left = element.offsetLeft + 'px';
         }
@@ -150,12 +153,11 @@ function drawCursors(selection) {
         if (element.nodeName !== 'INPUT') {
             style.wordWrap = 'break-word';
             style.whiteSpace = 'pre-wrap';
-        }
-        else {
+        } else {
             style.whiteSpace = 'pre';
         }
     
-        let properties = ['boxSizing', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'paddingTop', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing', 'textRendering', 'webkitWritingMode', 'textTransform', 'textIndent', 'overflowWrap'];
+        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)