@cocreate/text 1.13.0 → 1.13.4

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 (5) hide show
  1. package/CHANGELOG.md +28 -0
  2. package/demo/demos.1.html +24 -0
  3. package/package.json +1 -1
  4. package/src/index.js +23 -20
  5. package/src/updateDom.js +2 -0
package/CHANGELOG.md CHANGED
@@ -1,3 +1,31 @@
1
+ ## [1.13.4](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.3...v1.13.4) (2021-12-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * observer attribute contenteditable, get element to update using selection range.element ([2bb32bf](https://github.com/CoCreate-app/CoCreate-text/commit/2bb32bf5650505c76efb44d2f941b1b249deaebf))
7
+
8
+ ## [1.13.3](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.2...v1.13.3) (2021-11-29)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * sendPosition if no element return ([fec4fbb](https://github.com/CoCreate-app/CoCreate-text/commit/fec4fbb20b574af0995f1f49ad16501a83c52b98))
14
+
15
+ ## [1.13.2](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.1...v1.13.2) (2021-11-28)
16
+
17
+
18
+ ### Bug Fixes
19
+
20
+ * removed console.log ([81a07d4](https://github.com/CoCreate-app/CoCreate-text/commit/81a07d4be95acd507fa4047de38847069fd53d5c))
21
+
22
+ ## [1.13.1](https://github.com/CoCreate-app/CoCreate-text/compare/v1.13.0...v1.13.1) (2021-11-28)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * replace click and keyup event with selectionchange event ([515da39](https://github.com/CoCreate-app/CoCreate-text/commit/515da39a62af4e350aa2a7857aa48b87c822a5dd))
28
+
1
29
  # [1.13.0](https://github.com/CoCreate-app/CoCreate-text/compare/v1.12.32...v1.13.0) (2021-11-28)
2
30
 
3
31
 
package/demo/demos.1.html ADDED
@@ -0,0 +1,24 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <title>Text | CoCreate</title>
9
+ </head>
10
+
11
+ <body class="padding:20px">
12
+ <form collection="apples1" document_id="61ad22d7a8b6b4001aa360d1">
13
+ <textarea name="name1" class="width:100%" rows="10"></textarea>
14
+ <textarea name="name2" class="width:100%" rows="10"></textarea>
15
+ <iframe name='name2' width="100%" contenteditable></iframe>
16
+
17
+ </form>
18
+
19
+ <!--<script src="../dist/CoCreate-text.js" ></script>-->
20
+ <script src="../../../CoCreateJS/dist/CoCreate.js"></script>
21
+
22
+ </body>
23
+
24
+ </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/text",
3
- "version": "1.13.0",
3
+ "version": "1.13.4",
4
4
  "description": "A simple text component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "text",
package/src/index.js CHANGED
@@ -16,6 +16,10 @@ function init() {
16
16
  let elements = document.querySelectorAll(selectors);
17
17
  initElements(elements);
18
18
  _crdtUpdateListener();
19
+ document.addEventListener('selectionchange', (e) => {
20
+ let element = document.activeElement;
21
+ sendPosition(element)
22
+ });
19
23
  }
20
24
 
21
25
  function initElements (elements) {
@@ -32,10 +36,16 @@ function initElement (element) {
32
36
  if(!collection || !document_id || !name) return;
33
37
 
34
38
  if (!isCrdt) {
35
- if (element.tagName == 'IFRAME')
39
+ if (element.tagName == 'IFRAME'){
36
40
  _addEventListeners(element.contentDocument.documentElement);
37
- else
38
- _addEventListeners(element);
41
+ let Document = element.contentDocument
42
+ Document.addEventListener('selectionchange', (e) => {
43
+ let element = Document.activeElement;
44
+ sendPosition(element)
45
+ }); }
46
+ else{
47
+ _addEventListeners(element);
48
+ }
39
49
  }
40
50
  element.setAttribute('crdt', 'true');
41
51
  element.crdt = {init: true};
@@ -65,9 +75,7 @@ function initElement (element) {
65
75
  }
66
76
 
67
77
  export function _addEventListeners (element) {
68
- element.addEventListener('click', _click);
69
78
  element.addEventListener('blur', _blur);
70
- element.addEventListener('keyup', _keyup);
71
79
  element.addEventListener('cut', _cut);
72
80
  element.addEventListener('paste', _paste);
73
81
  element.addEventListener('keydown', _keydown);
@@ -75,11 +83,6 @@ export function _addEventListeners (element) {
75
83
  element.addEventListener('input', _input);
76
84
  }
77
85
 
78
- function _click (event) {
79
- let element = event.currentTarget;
80
- sendPosition(element);
81
- }
82
-
83
86
  function _blur (event) {
84
87
  let element = event.currentTarget;
85
88
  const { collection, document_id, name } = crud.getAttr(element);
@@ -88,11 +91,6 @@ function _blur (event) {
88
91
  cursors.sendPosition({collection, document_id, name, start, end});
89
92
  }
90
93
 
91
- function _keyup (event) {
92
- let element = event.currentTarget;
93
- sendPosition(element);
94
- }
95
-
96
94
  function _cut (event) {
97
95
  let element = event.currentTarget;
98
96
  const { start, end, range } = getSelection(element);
@@ -167,6 +165,7 @@ function _beforeinput (event) {
167
165
  event.preventDefault();
168
166
  }
169
167
  }
168
+
170
169
  function _input (event) {
171
170
  if(event.stopCCText) return;
172
171
  if (event.data) {
@@ -175,9 +174,7 @@ function _input (event) {
175
174
  }
176
175
 
177
176
  function _removeEventListeners (element) {
178
- element.removeEventListener('click', _click);
179
177
  element.removeEventListener('blur', _blur);
180
- element.removeEventListener('keyup', _keyup);
181
178
  element.removeEventListener('cut', _cut);
182
179
  element.removeEventListener('paste', _paste);
183
180
  element.removeEventListener('keydown', _keydown);
@@ -186,15 +183,21 @@ function _removeEventListeners (element) {
186
183
 
187
184
  export function sendPosition (element) {
188
185
  if (!element) return;
189
- const { start, end } = getSelection(element);
186
+
187
+ const { start, end, range } = getSelection(element);
188
+ if(range && range.element)
189
+ element = range.element;
190
190
  if (element.tagName == 'HTML' && !element.hasAttribute('collection') || !element.hasAttribute('collection'))
191
191
  element = element.ownerDocument.defaultView.frameElement;
192
+ if (!element) return;
192
193
  const { collection, document_id, name, isCrdt } = crud.getAttr(element);
193
- if (isCrdt == 'false') return;
194
+ if (isCrdt == 'false' || !collection || !document_id || !name) return;
194
195
  cursors.sendPosition({ collection, document_id, name, start, end });
195
196
  }
196
197
 
197
198
  function updateText ({element, value, start, end, range}) {
199
+ if(range && range.element)
200
+ element = range.element;
198
201
  if (element.tagName == 'HTML' && !element.hasAttribute('collection'))
199
202
  element = element.ownerDocument.defaultView.frameElement;
200
203
  const { collection, document_id, name, isCrud, isCrdt, isSave } = crud.getAttr(element);
@@ -312,7 +315,7 @@ observer.init({
312
315
  observer.init({
313
316
  name: 'CoCreateTextAttribtes',
314
317
  observe: ['attributes'],
315
- attributeName: ['collection', 'document_id', 'name'],
318
+ attributeName: ['collection', 'document_id', 'name', 'contenteditable'],
316
319
  target: selectors,
317
320
  callback (mutation) {
318
321
  initElement(mutation.target);
package/src/updateDom.js CHANGED
@@ -33,6 +33,8 @@ export function updateDom({domTextEditor, value, start, end, html}) {
33
33
  curCaret = getSelection(activeElement);
34
34
  else if (activeElement.tagName == 'BODY')
35
35
  curCaret = getSelection(domEl);
36
+ else
37
+ curCaret = getSelection(activeElement);
36
38
 
37
39
  if (!value && type != 'isStartTag' && type != 'textNode'){
38
40
  type = 'innerHTML';