react-text-range 1.0.15 → 1.0.17

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 (9) hide show
  1. package/README.md +8 -9
  2. package/dist/cjs/esm/ReactTextRange.d.ts +1 -1
  3. package/dist/cjs/esm/useTextSelectionEditor.d.ts +1 -1
  4. package/dist/cjs/index.js +51 -36
  5. package/dist/esm/ReactTextRange.d.ts +1 -1
  6. package/dist/esm/index.js +51 -36
  7. package/dist/esm/useTextSelectionEditor.d.ts +1 -1
  8. package/dist/index.d.ts +1 -1
  9. package/package.json +1 -1
package/README.md CHANGED
@@ -8,24 +8,23 @@
8
8
  // ...
9
9
  import { TextContainer, RangeState, ReactTextRange } from "./ReactTextRange";
10
10
 
11
- const MyTextContainer: TextContainer = React.forwardRef(({ children }, ref) =>
12
- <div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap">
13
- {children}
14
- </div>
11
+ const MyTextContainer: TextContainer = React.forwardRef(({ }, ref) =>
12
+ <div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap" />
15
13
  );
16
14
 
17
15
  const App: FunctionComponent = () => {
18
- const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 37 })
16
+ const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 47 });
17
+
19
18
  return (
20
19
  <div style={{ margin: 20 }}>
21
- <ReactTextRange initLeftPos={23} initRightPos={47}
20
+ <ReactTextRange initLeftPos={myPos.left} initRightPos={myPos.right}
22
21
  Container={MyTextContainer} onChange={setMyPos}
23
22
  handlerWidth={18}
24
- selectionClass='bg-yellow-300 text-black'>{
25
- `Some text
23
+ selectionClass='bg-yellow-300 text-black'
24
+ text={`Some text
26
25
  or even some real good multiline text
27
26
  here and there`}
28
- </ReactTextRange>
27
+ />
29
28
  <div>
30
29
  <span>{myPos?.left}</span>
31
30
  &nbsp;
package/dist/cjs/esm/ReactTextRange.d.ts CHANGED
@@ -8,10 +8,10 @@ export interface RangeState {
8
8
  right: number;
9
9
  }
10
10
  export declare const ReactTextRange: FC<{
11
+ text: string;
11
12
  initLeftPos: number;
12
13
  initRightPos: number;
13
14
  Container: TextContainer;
14
- children: string;
15
15
  onChange: (state: RangeState) => void;
16
16
  props?: React.CSSProperties;
17
17
  className?: string;
package/dist/cjs/esm/useTextSelectionEditor.d.ts CHANGED
@@ -5,7 +5,7 @@ declare global {
5
5
  caretPositionFromPoint: any;
6
6
  }
7
7
  }
8
- export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
8
+ export declare const useTextSelectionEditor: (text: string, initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
9
9
  React.MutableRefObject<HTMLDivElement | null>,
10
10
  HandlerPos | null,
11
11
  HandlerPos | null
package/dist/cjs/index.js CHANGED
@@ -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;
@@ -96,7 +107,7 @@ const getNodeAndOffsetFromPoint = (x, y) => {
96
107
  }
97
108
  return null;
98
109
  };
99
- const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
110
+ const useTextSelectionEditor = (text, initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
100
111
  // left handler pos
101
112
  const [leftHandler, setLeftHandler] = React.useState(null);
102
113
  const [currentLeftPos, setCurrentLeftPos] = React.useState(initLeftPos);
@@ -109,10 +120,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
109
120
  if (textDiv.current) {
110
121
  textDiv.current.style.position = 'relative';
111
122
  }
112
- }, [textDiv]);
123
+ }, [textDiv.current]);
113
124
  // break text into three spans
114
125
  React.useLayoutEffect(() => {
115
126
  var _a, _b, _c;
127
+ if (!textDiv.current)
128
+ return;
129
+ // remove all nodes
130
+ while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
131
+ textDiv.current.removeChild(textDiv.current.lastChild);
132
+ }
133
+ const textNode = document.createTextNode(text);
134
+ textDiv.current.appendChild(textNode);
116
135
  let textLeftNode = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
117
136
  if (!textLeftNode || textLeftNode.nodeType !== document.TEXT_NODE || textLeftNode.nodeValue === null) {
118
137
  return;
@@ -148,42 +167,39 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
148
167
  tail.surroundContents(tailSpan);
149
168
  return () => {
150
169
  if (textDiv.current && textDiv.current.childNodes[0]) {
151
- textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
152
- while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
170
+ while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
153
171
  textDiv.current.removeChild(textDiv.current.lastChild);
154
172
  }
155
173
  }
156
174
  };
157
- }, [textDiv.current]);
175
+ }, [text]);
158
176
  // mouse move handler
159
177
  // left handler
160
178
  const leftMoveHandler = React.useCallback((e) => {
161
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
162
179
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
163
180
  if (!sm)
164
181
  return;
182
+ if (!textDiv.current)
183
+ return;
165
184
  let posToSet = currentLeftPos;
166
- if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
185
+ if (sm.node === textDiv.current.childNodes[1].firstChild) {
167
186
  posToSet = sm.offset;
168
187
  }
169
- else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
188
+ else if (sm.node === textDiv.current.childNodes[3].firstChild) {
170
189
  posToSet = currentLeftPos + sm.offset;
171
190
  }
172
191
  if (posToSet !== currentLeftPos) {
173
- const headText = (_f = (_e = (_d = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[1]) === null || _d === void 0 ? void 0 : _d.firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) !== null && _f !== void 0 ? _f : '';
174
- const selText = (_k = (_j = (_h = (_g = textDiv.current) === null || _g === void 0 ? void 0 : _g.childNodes[3]) === null || _h === void 0 ? void 0 : _h.firstChild) === null || _j === void 0 ? void 0 : _j.nodeValue) !== null && _k !== void 0 ? _k : '';
192
+ createTextNodes(textDiv.current);
193
+ const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
194
+ const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
175
195
  const full = headText + selText;
176
- const nodeChild1 = (_m = (_l = textDiv.current) === null || _l === void 0 ? void 0 : _l.childNodes[1]) === null || _m === void 0 ? void 0 : _m.firstChild;
177
- if (nodeChild1) {
178
- nodeChild1.nodeValue = full.substring(0, posToSet);
179
- }
180
- const nodeChild3 = (_p = (_o = textDiv.current) === null || _o === void 0 ? void 0 : _o.childNodes[3]) === null || _p === void 0 ? void 0 : _p.firstChild;
181
- if (nodeChild3) {
182
- nodeChild3.nodeValue = full.substring(posToSet);
183
- }
196
+ const nodeChild1 = textDiv.current.childNodes[1].firstChild;
197
+ nodeChild1.nodeValue = full.substring(0, posToSet);
198
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
199
+ nodeChild3.nodeValue = full.substring(posToSet);
184
200
  setCurrentLeftPos(posToSet);
185
201
  }
186
- }, [currentLeftPos, textDiv.current]);
202
+ }, [currentLeftPos, textDiv.current, text]);
187
203
  React.useLayoutEffect(() => {
188
204
  if (!leftDrag) {
189
205
  document.removeEventListener('mousemove', leftMoveHandler);
@@ -194,16 +210,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
194
210
  return () => {
195
211
  document.removeEventListener('mousemove', leftMoveHandler);
196
212
  };
197
- }, [leftDrag, currentLeftPos, textDiv.current]);
213
+ }, [leftDrag, currentLeftPos, textDiv.current, text]);
198
214
  React.useLayoutEffect(() => {
199
215
  setCurrentLeftPos(initLeftPos);
200
216
  }, [initLeftPos]);
201
217
  // right handler
202
218
  const rightMoveHandler = React.useCallback((e) => {
203
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
219
+ var _a, _b;
204
220
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
205
221
  if (!sm)
206
222
  return;
223
+ if (!textDiv.current)
224
+ return;
207
225
  let posToSet = currentRightPos;
208
226
  if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
209
227
  posToSet = currentLeftPos + sm.offset;
@@ -212,20 +230,17 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
212
230
  posToSet = currentRightPos + sm.offset;
213
231
  }
214
232
  if (posToSet !== currentRightPos) {
215
- const selText = (_f = (_e = (_d = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[3]) === null || _d === void 0 ? void 0 : _d.firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) !== null && _f !== void 0 ? _f : '';
216
- const tailText = (_k = (_j = (_h = (_g = textDiv.current) === null || _g === void 0 ? void 0 : _g.childNodes[5]) === null || _h === void 0 ? void 0 : _h.firstChild) === null || _j === void 0 ? void 0 : _j.nodeValue) !== null && _k !== void 0 ? _k : '';
233
+ createTextNodes(textDiv.current);
234
+ const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
235
+ const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
217
236
  const full = selText + tailText;
218
- const nodeChild3 = (_m = (_l = textDiv.current) === null || _l === void 0 ? void 0 : _l.childNodes[3]) === null || _m === void 0 ? void 0 : _m.firstChild;
219
- if (nodeChild3) {
220
- nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
221
- }
222
- const nodeChild5 = (_p = (_o = textDiv.current) === null || _o === void 0 ? void 0 : _o.childNodes[5]) === null || _p === void 0 ? void 0 : _p.firstChild;
223
- if (nodeChild5) {
224
- nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
225
- }
237
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
238
+ nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
239
+ const nodeChild5 = textDiv.current.childNodes[5].firstChild;
240
+ nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
226
241
  setCurrentRightPos(posToSet);
227
242
  }
228
- }, [currentLeftPos, currentRightPos, textDiv.current]);
243
+ }, [currentLeftPos, currentRightPos, textDiv.current, text]);
229
244
  React.useLayoutEffect(() => {
230
245
  if (!rightDrag) {
231
246
  document.removeEventListener('mousemove', rightMoveHandler);
@@ -236,7 +251,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
236
251
  return () => {
237
252
  document.removeEventListener('mousemove', rightMoveHandler);
238
253
  };
239
- }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
254
+ }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current, text]);
240
255
  React.useLayoutEffect(() => {
241
256
  setCurrentRightPos(initRightPos);
242
257
  }, [initRightPos]);
@@ -360,10 +375,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, width, className }) => {
360
375
  : React.createElement(SvgQuoteRight, null)));
361
376
  };
362
377
 
363
- const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
378
+ const ReactTextRange = ({ initLeftPos, initRightPos, Container, text, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
364
379
  const [mouseOnLeft, setMouseOnLeft] = React.useState(false);
365
380
  const [mouseOnRight, setMouseOnRight] = React.useState(false);
366
- const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
381
+ const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(text, initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
367
382
  React.useEffect(() => {
368
383
  if (leftHandler && rightHandler) {
369
384
  onChange({
@@ -373,7 +388,7 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
373
388
  }
374
389
  }, [leftHandler, rightHandler]);
375
390
  return (React.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
376
- React.createElement(Container, { ref: textDiv }, children),
391
+ React.createElement(Container, { ref: textDiv }, text),
377
392
  React.createElement(SelectionHandler, { className: leftHandlerClass, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
378
393
  React.createElement(SelectionHandler, { className: rightHandlerClass, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
379
394
  };
package/dist/esm/ReactTextRange.d.ts CHANGED
@@ -8,10 +8,10 @@ export interface RangeState {
8
8
  right: number;
9
9
  }
10
10
  export declare const ReactTextRange: FC<{
11
+ text: string;
11
12
  initLeftPos: number;
12
13
  initRightPos: number;
13
14
  Container: TextContainer;
14
- children: string;
15
15
  onChange: (state: RangeState) => void;
16
16
  props?: React.CSSProperties;
17
17
  className?: string;
package/dist/esm/index.js CHANGED
@@ -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;
@@ -76,7 +87,7 @@ const getNodeAndOffsetFromPoint = (x, y) => {
76
87
  }
77
88
  return null;
78
89
  };
79
- const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
90
+ const useTextSelectionEditor = (text, initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
80
91
  // left handler pos
81
92
  const [leftHandler, setLeftHandler] = useState(null);
82
93
  const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
@@ -89,10 +100,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
89
100
  if (textDiv.current) {
90
101
  textDiv.current.style.position = 'relative';
91
102
  }
92
- }, [textDiv]);
103
+ }, [textDiv.current]);
93
104
  // break text into three spans
94
105
  useLayoutEffect(() => {
95
106
  var _a, _b, _c;
107
+ if (!textDiv.current)
108
+ return;
109
+ // remove all nodes
110
+ while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
111
+ textDiv.current.removeChild(textDiv.current.lastChild);
112
+ }
113
+ const textNode = document.createTextNode(text);
114
+ textDiv.current.appendChild(textNode);
96
115
  let textLeftNode = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
97
116
  if (!textLeftNode || textLeftNode.nodeType !== document.TEXT_NODE || textLeftNode.nodeValue === null) {
98
117
  return;
@@ -128,42 +147,39 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
128
147
  tail.surroundContents(tailSpan);
129
148
  return () => {
130
149
  if (textDiv.current && textDiv.current.childNodes[0]) {
131
- textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
132
- while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
150
+ while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
133
151
  textDiv.current.removeChild(textDiv.current.lastChild);
134
152
  }
135
153
  }
136
154
  };
137
- }, [textDiv.current]);
155
+ }, [text]);
138
156
  // mouse move handler
139
157
  // left handler
140
158
  const leftMoveHandler = useCallback((e) => {
141
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
142
159
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
143
160
  if (!sm)
144
161
  return;
162
+ if (!textDiv.current)
163
+ return;
145
164
  let posToSet = currentLeftPos;
146
- if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
165
+ if (sm.node === textDiv.current.childNodes[1].firstChild) {
147
166
  posToSet = sm.offset;
148
167
  }
149
- else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
168
+ else if (sm.node === textDiv.current.childNodes[3].firstChild) {
150
169
  posToSet = currentLeftPos + sm.offset;
151
170
  }
152
171
  if (posToSet !== currentLeftPos) {
153
- const headText = (_f = (_e = (_d = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[1]) === null || _d === void 0 ? void 0 : _d.firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) !== null && _f !== void 0 ? _f : '';
154
- const selText = (_k = (_j = (_h = (_g = textDiv.current) === null || _g === void 0 ? void 0 : _g.childNodes[3]) === null || _h === void 0 ? void 0 : _h.firstChild) === null || _j === void 0 ? void 0 : _j.nodeValue) !== null && _k !== void 0 ? _k : '';
172
+ createTextNodes(textDiv.current);
173
+ const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
174
+ const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
155
175
  const full = headText + selText;
156
- const nodeChild1 = (_m = (_l = textDiv.current) === null || _l === void 0 ? void 0 : _l.childNodes[1]) === null || _m === void 0 ? void 0 : _m.firstChild;
157
- if (nodeChild1) {
158
- nodeChild1.nodeValue = full.substring(0, posToSet);
159
- }
160
- const nodeChild3 = (_p = (_o = textDiv.current) === null || _o === void 0 ? void 0 : _o.childNodes[3]) === null || _p === void 0 ? void 0 : _p.firstChild;
161
- if (nodeChild3) {
162
- nodeChild3.nodeValue = full.substring(posToSet);
163
- }
176
+ const nodeChild1 = textDiv.current.childNodes[1].firstChild;
177
+ nodeChild1.nodeValue = full.substring(0, posToSet);
178
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
179
+ nodeChild3.nodeValue = full.substring(posToSet);
164
180
  setCurrentLeftPos(posToSet);
165
181
  }
166
- }, [currentLeftPos, textDiv.current]);
182
+ }, [currentLeftPos, textDiv.current, text]);
167
183
  useLayoutEffect(() => {
168
184
  if (!leftDrag) {
169
185
  document.removeEventListener('mousemove', leftMoveHandler);
@@ -174,16 +190,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
174
190
  return () => {
175
191
  document.removeEventListener('mousemove', leftMoveHandler);
176
192
  };
177
- }, [leftDrag, currentLeftPos, textDiv.current]);
193
+ }, [leftDrag, currentLeftPos, textDiv.current, text]);
178
194
  useLayoutEffect(() => {
179
195
  setCurrentLeftPos(initLeftPos);
180
196
  }, [initLeftPos]);
181
197
  // right handler
182
198
  const rightMoveHandler = useCallback((e) => {
183
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
199
+ var _a, _b;
184
200
  const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
185
201
  if (!sm)
186
202
  return;
203
+ if (!textDiv.current)
204
+ return;
187
205
  let posToSet = currentRightPos;
188
206
  if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
189
207
  posToSet = currentLeftPos + sm.offset;
@@ -192,20 +210,17 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
192
210
  posToSet = currentRightPos + sm.offset;
193
211
  }
194
212
  if (posToSet !== currentRightPos) {
195
- const selText = (_f = (_e = (_d = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[3]) === null || _d === void 0 ? void 0 : _d.firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) !== null && _f !== void 0 ? _f : '';
196
- const tailText = (_k = (_j = (_h = (_g = textDiv.current) === null || _g === void 0 ? void 0 : _g.childNodes[5]) === null || _h === void 0 ? void 0 : _h.firstChild) === null || _j === void 0 ? void 0 : _j.nodeValue) !== null && _k !== void 0 ? _k : '';
213
+ createTextNodes(textDiv.current);
214
+ const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
215
+ const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
197
216
  const full = selText + tailText;
198
- const nodeChild3 = (_m = (_l = textDiv.current) === null || _l === void 0 ? void 0 : _l.childNodes[3]) === null || _m === void 0 ? void 0 : _m.firstChild;
199
- if (nodeChild3) {
200
- nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
201
- }
202
- const nodeChild5 = (_p = (_o = textDiv.current) === null || _o === void 0 ? void 0 : _o.childNodes[5]) === null || _p === void 0 ? void 0 : _p.firstChild;
203
- if (nodeChild5) {
204
- nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
205
- }
217
+ const nodeChild3 = textDiv.current.childNodes[3].firstChild;
218
+ nodeChild3.nodeValue = full.substring(0, posToSet - currentLeftPos);
219
+ const nodeChild5 = textDiv.current.childNodes[5].firstChild;
220
+ nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
206
221
  setCurrentRightPos(posToSet);
207
222
  }
208
- }, [currentLeftPos, currentRightPos, textDiv.current]);
223
+ }, [currentLeftPos, currentRightPos, textDiv.current, text]);
209
224
  useLayoutEffect(() => {
210
225
  if (!rightDrag) {
211
226
  document.removeEventListener('mousemove', rightMoveHandler);
@@ -216,7 +231,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
216
231
  return () => {
217
232
  document.removeEventListener('mousemove', rightMoveHandler);
218
233
  };
219
- }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
234
+ }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current, text]);
220
235
  useLayoutEffect(() => {
221
236
  setCurrentRightPos(initRightPos);
222
237
  }, [initRightPos]);
@@ -340,10 +355,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, width, className }) => {
340
355
  : React__default.createElement(SvgQuoteRight, null)));
341
356
  };
342
357
 
343
- const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
358
+ const ReactTextRange = ({ initLeftPos, initRightPos, Container, text, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
344
359
  const [mouseOnLeft, setMouseOnLeft] = useState(false);
345
360
  const [mouseOnRight, setMouseOnRight] = useState(false);
346
- const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
361
+ const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(text, initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
347
362
  useEffect(() => {
348
363
  if (leftHandler && rightHandler) {
349
364
  onChange({
@@ -353,7 +368,7 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
353
368
  }
354
369
  }, [leftHandler, rightHandler]);
355
370
  return (React__default.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
356
- React__default.createElement(Container, { ref: textDiv }, children),
371
+ React__default.createElement(Container, { ref: textDiv }, text),
357
372
  React__default.createElement(SelectionHandler, { className: leftHandlerClass, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
358
373
  React__default.createElement(SelectionHandler, { className: rightHandlerClass, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
359
374
  };
package/dist/esm/useTextSelectionEditor.d.ts CHANGED
@@ -5,7 +5,7 @@ declare global {
5
5
  caretPositionFromPoint: any;
6
6
  }
7
7
  }
8
- export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
8
+ export declare const useTextSelectionEditor: (text: string, initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
9
9
  React.MutableRefObject<HTMLDivElement | null>,
10
10
  HandlerPos | null,
11
11
  HandlerPos | null
package/dist/index.d.ts CHANGED
@@ -8,10 +8,10 @@ interface RangeState {
8
8
  right: number;
9
9
  }
10
10
  declare const ReactTextRange: FC<{
11
+ text: string;
11
12
  initLeftPos: number;
12
13
  initRightPos: number;
13
14
  Container: TextContainer;
14
- children: string;
15
15
  onChange: (state: RangeState) => void;
16
16
  props?: React.CSSProperties;
17
17
  className?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-text-range",
3
- "version": "1.0.15",
3
+ "version": "1.0.17",
4
4
  "description": "text selection editor for React",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",