@cocreate/cursors 1.6.6 → 1.6.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/package.json +1 -1
  3. package/src/index.css +91 -87
  4. package/src/index.js +5 -4
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.6.7](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.6.6...v1.6.7) (2021-10-06)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * clientwidth sometimes returned 0 creating a large padding and causing cursor position to be off ([fbf85ad](https://github.com/CoCreate-app/CoCreate-cursors/commit/fbf85adfd6aeea252fc62a26a7bc350762961126))
7
+
1
8
  ## [1.6.6](https://github.com/CoCreate-app/CoCreate-cursors/compare/v1.6.5...v1.6.6) (2021-10-05)
2
9
 
3
10
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/cursors",
3
- "version": "1.6.6",
3
+ "version": "1.6.7",
4
4
  "description": "Collaborative user cursor position for inputs, textarea's and contenteditable elements.",
5
5
  "keywords": [
6
6
  "cursors",
package/src/index.css CHANGED
@@ -1,96 +1,97 @@
1
- .cursor-container{
2
- position:absolute;
1
+ .cursor-container {
2
+ position: absolute;
3
3
  display: inline-block;
4
- width:2px;
5
- z-index:10;
4
+ width: 2px;
5
+ /*z-index:10;*/
6
6
  }
7
7
 
8
- .cursor{
9
- position:absolute;
8
+ .cursor {
9
+ position: absolute;
10
10
  background-color: red;
11
11
  opacity: 0.9;
12
- height:15px;
13
- width:100%;
12
+ height: 15px;
13
+ width: 100%;
14
14
  }
15
15
 
16
- .cursor-flag{
17
- position:absolute;
18
- background-color: rgb(236, 212, 68);
19
- top:0px;
20
- font-size: 0px;
21
- color:white;
22
- height:6px;
23
- width: 6px;
24
- left: -2px;
25
- /*z-index:999;*/
26
- pointer-events:auto;
16
+ .cursor-flag {
17
+ position: absolute;
18
+ background-color: rgb(236, 212, 68);
19
+ top: 0px;
20
+ font-size: 0px;
21
+ color: white;
22
+ height: 6px;
23
+ width: 6px;
24
+ left: -2px;
25
+ pointer-events: auto;
27
26
  }
28
- .cursor-flag:hover{
29
- height:14px;
30
- /*top:-5px;*/
31
- width:unset;
32
- padding: 1px 5px 0px 5px;
33
- font-size: 12px;
34
- line-height:1;
35
- white-space: nowrap;
36
- /*bottom: 1rem;*/
37
27
 
28
+ .cursor-flag:hover {
29
+ height: 14px;
30
+ /*top:-5px;*/
31
+ width: unset;
32
+ padding: 1px 5px 0px 5px;
33
+ font-size: 12px;
34
+ line-height: 1;
35
+ white-space: nowrap;
36
+ /*bottom: 1rem;*/
38
37
  }
39
38
 
40
- .selection{
41
- background-color: #30bced33;
42
- opacity: 0.6;
43
-
39
+ .selection {
40
+ background-color: #30bced33;
41
+ opacity: 0.6;
44
42
  }
45
- .cursor-selection{
46
- position: absolute;
43
+
44
+ .cursor-selection {
45
+ position: absolute;
47
46
  }
48
47
 
49
- textarea{
50
- position: relative;
51
- background-color: transparent;
52
- /*padding: 20px;*/
53
- /*margin : 40px;*/
54
- /*border-width:10px;*/
55
- /*border-color:black;*/
56
- z-index:5;
48
+ textarea {
49
+ position: relative;
50
+ background-color: transparent;
51
+ /*padding: 20px;*/
52
+ /*margin : 40px;*/
53
+ /*border-width:10px;*/
54
+ /*border-color:black;*/
55
+ z-index: 5;
57
56
  }
58
57
 
59
- input{
60
- position:relative;
58
+ input {
59
+ position: relative;
61
60
  background-color: transparent;
62
- z-index:5;
61
+ z-index: 5;
63
62
  }
64
63
 
65
- .mirror{
66
- pointer-events:none;
64
+ .mirror {
65
+ pointer-events: none;
67
66
  }
68
67
 
69
- .mirror_color{
70
- color : transparent;
71
- pointer-events:none;
68
+ .mirror_color {
69
+ color: transparent;
70
+ pointer-events: none;
72
71
  /*overflow:auto;*/
73
72
  }
74
73
 
75
74
  .mirror_scroll::-webkit-scrollbar {
76
- background: rgba(0, 0, 0, 0.00);
77
- width: 0px;
75
+ background: rgba(0, 0, 0, 0.00);
76
+ width: 0px;
78
77
  }
79
78
 
80
79
 
81
80
  /*Codemirror Cusor*/
82
- .remote-caret {
81
+
82
+ .remote-caret {
83
83
  position: absolute;
84
84
  border-left: black;
85
85
  border-left-style: solid;
86
86
  border-left-width: 2px;
87
87
  height: 1.2em;
88
- }
89
- .remote-caret > div {
88
+ }
89
+
90
+ .remote-caret>div {
90
91
  position: relative;
91
92
  /*top: -1.05em;*/
92
93
  bottom: .3em;
93
- left:-4px;
94
+ left: -4px;
94
95
  font-size: 13px;
95
96
  background-color: rgb(250, 129, 0);
96
97
  font-family: serif;
@@ -100,45 +101,48 @@ input{
100
101
  user-select: none;
101
102
  color: transparent;
102
103
  z-index: 3;
103
- height:6px;
104
+ height: 6px;
104
105
  width: 6px;
105
106
  overflow: hidden;
106
- }
107
-
108
- .remote-caret > div:hover{
109
- height:unset;
110
- width:unset;
111
- padding-left: 2px;
112
- padding-right: 2px;
113
- font-size: 13px;
114
- bottom: 1em;
115
- color: white;
116
-
117
- }
118
-
119
-
107
+ }
108
+
109
+ .remote-caret>div:hover {
110
+ height: unset;
111
+ width: unset;
112
+ padding-left: 2px;
113
+ padding-right: 2px;
114
+ font-size: 13px;
115
+ bottom: 1em;
116
+ color: white;
117
+
118
+ }
119
+
120
+
120
121
  /*Quill Cursor */
121
- .ql-cursor .ql-cursor-flag{
122
+
123
+ .ql-cursor .ql-cursor-flag {
122
124
  opacity: 1;
123
125
  visibility: visible;
124
126
 
125
- }
126
-
127
- .ql-cursor-flag {
128
- width:6px;
129
- height:6px;
127
+ }
128
+
129
+ .ql-cursor-flag {
130
+ width: 6px;
131
+ height: 6px;
130
132
  margin-top: 2px;
131
133
  margin-left: -2px;
132
134
  opacity: 1!important;
133
135
  visibility: visible!important;
134
136
  transition: none;
135
- overflow:hidden;
136
- }
137
- .ql-cursor-flag:hover {
138
- width:unset;
139
- height:unset;
140
-
141
- }
142
- .users_selections{
143
- opacity:0.4;
144
- }
137
+ overflow: hidden;
138
+ }
139
+
140
+ .ql-cursor-flag:hover {
141
+ width: unset;
142
+ height: unset;
143
+
144
+ }
145
+
146
+ .users_selections {
147
+ opacity: 0.4;
148
+ }
package/src/index.js CHANGED
@@ -15,7 +15,6 @@ function init() {
15
15
  initElements(elements);
16
16
  }
17
17
 
18
-
19
18
  function initElements(elements) {
20
19
  for(let element of elements)
21
20
  initElement(element);
@@ -25,6 +24,7 @@ function initElement(element) {
25
24
  let realtime = element.getAttribute('realtime');
26
25
  let cursors = element.getAttribute('cursors');
27
26
  if (realtime == 'false' || cursors == 'false') return;
27
+ if(element.hasAttribute('actions')) return;
28
28
  if(element.cursor) return;
29
29
  element.cursor = true;
30
30
  }
@@ -55,7 +55,9 @@ var getCoordinates = function(element, position_start, position_end) {
55
55
 
56
56
  let computed = getComputedStyle(element);
57
57
  let rect = element.getBoundingClientRect();
58
- let scrollBarWidth = element.offsetWidth - element.clientWidth;
58
+ let scrollBarWidth = 0;
59
+ if(element.clientWidth != 0)
60
+ scrollBarWidth = element.offsetWidth - element.clientWidth;
59
61
  let style = mirrorDiv.style;
60
62
 
61
63
  style.position = 'absolute';
@@ -152,7 +154,7 @@ function drawCursors(selection) {
152
154
  let elements = selection.element;
153
155
  if (!elements) {
154
156
  let selector = '[collection="'+collection+'"][document_id="'+document_id+'"][name="'+name+'"]';
155
- selector += ':not(.codemirror, .quill, .monaco)';
157
+ selector += ':not(.codemirror, .quill, .monaco, [actions])';
156
158
  elements = document.querySelectorAll(selector);
157
159
  }
158
160
  for(let element of elements) {
@@ -214,7 +216,6 @@ function drawCursors(selection) {
214
216
  cursor.setAttribute('socket_id', socket_id);
215
217
  cursor.setAttribute('user-name', user.name);
216
218
  cursor.setAttribute('user-color', user.color);
217
- cursor.style["width"] = "2px"; //2px
218
219
  my_cursor.style["height"] = cursor_height + "px";
219
220
  cursor.style["left"] = coordinates.end.left + "px";
220
221