react-text-range 1.0.14 → 1.0.16

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 (7) hide show
  1. package/dist/cjs/index.js +31 -11
  2. package/dist/esm/index.js +31 -11
  3. package/package.json +1 -1
  4. package/dist/cjs/esm/rect.d.ts +0 -6
  5. package/dist/cjs/index.html +0 -17
  6. package/dist/cjs/server.js +0 -6
  7. package/dist/esm/rect.d.ts +0 -6
package/dist/cjs/index.js CHANGED
@@ -22,12 +22,12 @@ function _interopNamespaceDefault(e) {
22
22
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
23
23
 
24
24
  const getHandlerRect = (node, left) => {
25
- var _a, _b, _c, _d, _e, _f;
25
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
26
26
  if (!node || !node.childNodes || node.childNodes.length != 6)
27
27
  return null;
28
- const headLength = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length;
29
- const selLength = (_d = (_c = node.childNodes[3].firstChild) === null || _c === void 0 ? void 0 : _c.nodeValue) === null || _d === void 0 ? void 0 : _d.length;
30
- const tailLength = (_f = (_e = node.childNodes[5].firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) === null || _f === void 0 ? void 0 : _f.length;
28
+ const headLength = (_c = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
29
+ const selLength = (_f = (_e = (_d = node.childNodes[3].firstChild) === null || _d === void 0 ? void 0 : _d.nodeValue) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
30
+ const tailLength = (_j = (_h = (_g = node.childNodes[5].firstChild) === null || _g === void 0 ? void 0 : _g.nodeValue) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
31
31
  if (left) {
32
32
  const range = document.createRange();
33
33
  if (selLength > 0) {
@@ -70,6 +70,17 @@ const getHandlerRect = (node, left) => {
70
70
  return null;
71
71
  }
72
72
  };
73
+ const createTextNodes = (div) => {
74
+ if (div.childNodes[1] && !div.childNodes[1].firstChild) {
75
+ div.childNodes[1].appendChild(document.createTextNode(''));
76
+ }
77
+ if (div.childNodes[3] && !div.childNodes[3].firstChild) {
78
+ div.childNodes[3].appendChild(document.createTextNode(''));
79
+ }
80
+ if (div.childNodes[5] && !div.childNodes[5].firstChild) {
81
+ div.childNodes[5].appendChild(document.createTextNode(''));
82
+ }
83
+ };
73
84
  const getNodeAndOffsetFromPoint = (x, y) => {
74
85
  let range;
75
86
  let textNode;
@@ -158,23 +169,27 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
158
169
  // mouse move handler
159
170
  // left handler
160
171
  const leftMoveHandler = React.useCallback((e) => {
161
- var _a, _b;
162
172
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
163
173
  if (!sm)
164
174
  return;
175
+ if (!textDiv.current)
176
+ return;
165
177
  let posToSet = currentLeftPos;
166
- if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
178
+ if (sm.node === textDiv.current.childNodes[1].firstChild) {
167
179
  posToSet = sm.offset;
168
180
  }
169
- else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
181
+ else if (sm.node === textDiv.current.childNodes[3].firstChild) {
170
182
  posToSet = currentLeftPos + sm.offset;
171
183
  }
172
184
  if (posToSet !== currentLeftPos) {
185
+ createTextNodes(textDiv.current);
173
186
  const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
174
187
  const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
175
188
  const full = headText + selText;
176
- textDiv.current.childNodes[1].firstChild.nodeValue = full.substring(0, posToSet);
177
- textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(posToSet);
189
+ const nodeChild1 = textDiv.current.childNodes[1].firstChild;
190
+ nodeChild1.nodeValue = full.substring(0, posToSet);
191
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
192
+ nodeChild3.nodeValue = full.substring(posToSet);
178
193
  setCurrentLeftPos(posToSet);
179
194
  }
180
195
  }, [currentLeftPos, textDiv.current]);
@@ -198,6 +213,8 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
198
213
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
199
214
  if (!sm)
200
215
  return;
216
+ if (!textDiv.current)
217
+ return;
201
218
  let posToSet = currentRightPos;
202
219
  if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
203
220
  posToSet = currentLeftPos + sm.offset;
@@ -206,11 +223,14 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
206
223
  posToSet = currentRightPos + sm.offset;
207
224
  }
208
225
  if (posToSet !== currentRightPos) {
226
+ createTextNodes(textDiv.current);
209
227
  const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
210
228
  const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
211
229
  const full = selText + tailText;
212
- textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(0, posToSet - currentLeftPos);
213
- textDiv.current.childNodes[5].firstChild.nodeValue = full.substring(posToSet - currentLeftPos);
230
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
231
+ nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
232
+ const nodeChild5 = textDiv.current.childNodes[5].firstChild;
233
+ nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
214
234
  setCurrentRightPos(posToSet);
215
235
  }
216
236
  }, [currentLeftPos, currentRightPos, textDiv.current]);
package/dist/esm/index.js CHANGED
@@ -2,12 +2,12 @@ import * as React from 'react';
2
2
  import React__default, { useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
3
3
 
4
4
  const getHandlerRect = (node, left) => {
5
- var _a, _b, _c, _d, _e, _f;
5
+ var _a, _b, _c, _d, _e, _f, _g, _h, _j;
6
6
  if (!node || !node.childNodes || node.childNodes.length != 6)
7
7
  return null;
8
- const headLength = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length;
9
- const selLength = (_d = (_c = node.childNodes[3].firstChild) === null || _c === void 0 ? void 0 : _c.nodeValue) === null || _d === void 0 ? void 0 : _d.length;
10
- const tailLength = (_f = (_e = node.childNodes[5].firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) === null || _f === void 0 ? void 0 : _f.length;
8
+ const headLength = (_c = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0;
9
+ const selLength = (_f = (_e = (_d = node.childNodes[3].firstChild) === null || _d === void 0 ? void 0 : _d.nodeValue) === null || _e === void 0 ? void 0 : _e.length) !== null && _f !== void 0 ? _f : 0;
10
+ const tailLength = (_j = (_h = (_g = node.childNodes[5].firstChild) === null || _g === void 0 ? void 0 : _g.nodeValue) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0;
11
11
  if (left) {
12
12
  const range = document.createRange();
13
13
  if (selLength > 0) {
@@ -50,6 +50,17 @@ const getHandlerRect = (node, left) => {
50
50
  return null;
51
51
  }
52
52
  };
53
+ const createTextNodes = (div) => {
54
+ if (div.childNodes[1] && !div.childNodes[1].firstChild) {
55
+ div.childNodes[1].appendChild(document.createTextNode(''));
56
+ }
57
+ if (div.childNodes[3] && !div.childNodes[3].firstChild) {
58
+ div.childNodes[3].appendChild(document.createTextNode(''));
59
+ }
60
+ if (div.childNodes[5] && !div.childNodes[5].firstChild) {
61
+ div.childNodes[5].appendChild(document.createTextNode(''));
62
+ }
63
+ };
53
64
  const getNodeAndOffsetFromPoint = (x, y) => {
54
65
  let range;
55
66
  let textNode;
@@ -138,23 +149,27 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
138
149
  // mouse move handler
139
150
  // left handler
140
151
  const leftMoveHandler = useCallback((e) => {
141
- var _a, _b;
142
152
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
143
153
  if (!sm)
144
154
  return;
155
+ if (!textDiv.current)
156
+ return;
145
157
  let posToSet = currentLeftPos;
146
- if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
158
+ if (sm.node === textDiv.current.childNodes[1].firstChild) {
147
159
  posToSet = sm.offset;
148
160
  }
149
- else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
161
+ else if (sm.node === textDiv.current.childNodes[3].firstChild) {
150
162
  posToSet = currentLeftPos + sm.offset;
151
163
  }
152
164
  if (posToSet !== currentLeftPos) {
165
+ createTextNodes(textDiv.current);
153
166
  const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
154
167
  const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
155
168
  const full = headText + selText;
156
- textDiv.current.childNodes[1].firstChild.nodeValue = full.substring(0, posToSet);
157
- textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(posToSet);
169
+ const nodeChild1 = textDiv.current.childNodes[1].firstChild;
170
+ nodeChild1.nodeValue = full.substring(0, posToSet);
171
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
172
+ nodeChild3.nodeValue = full.substring(posToSet);
158
173
  setCurrentLeftPos(posToSet);
159
174
  }
160
175
  }, [currentLeftPos, textDiv.current]);
@@ -178,6 +193,8 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
178
193
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
179
194
  if (!sm)
180
195
  return;
196
+ if (!textDiv.current)
197
+ return;
181
198
  let posToSet = currentRightPos;
182
199
  if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
183
200
  posToSet = currentLeftPos + sm.offset;
@@ -186,11 +203,14 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
186
203
  posToSet = currentRightPos + sm.offset;
187
204
  }
188
205
  if (posToSet !== currentRightPos) {
206
+ createTextNodes(textDiv.current);
189
207
  const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
190
208
  const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
191
209
  const full = selText + tailText;
192
- textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(0, posToSet - currentLeftPos);
193
- textDiv.current.childNodes[5].firstChild.nodeValue = full.substring(posToSet - currentLeftPos);
210
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
211
+ nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
212
+ const nodeChild5 = textDiv.current.childNodes[5].firstChild;
213
+ nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
194
214
  setCurrentRightPos(posToSet);
195
215
  }
196
216
  }, [currentLeftPos, currentRightPos, textDiv.current]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-text-range",
3
- "version": "1.0.14",
3
+ "version": "1.0.16",
4
4
  "description": "text selection editor for React",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
package/dist/cjs/esm/rect.d.ts DELETED
@@ -1,6 +0,0 @@
1
- export interface Rect {
2
- top: number;
3
- left: number;
4
- width: number;
5
- height: number;
6
- }
package/dist/cjs/index.html DELETED
@@ -1,17 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
-
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Document</title>
8
- </head>
9
-
10
- <body>
11
- <div id="root"></div>
12
- <script defer src="/index.js"></script>
13
- </body>
14
-
15
- </body>
16
-
17
- </html>
package/dist/cjs/server.js DELETED
@@ -1,6 +0,0 @@
1
- var connect = require('connect');
2
- var serveStatic = require('serve-static');
3
-
4
- connect()
5
- .use(serveStatic(__dirname))
6
- .listen(3005, () => console.log('Client running on 3005...'));
package/dist/esm/rect.d.ts DELETED
@@ -1,6 +0,0 @@
1
- export interface Rect {
2
- top: number;
3
- left: number;
4
- width: number;
5
- height: number;
6
- }