react-text-range 1.0.2 → 1.0.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 (42) hide show
  1. package/dist/cjs/{FullWindow.d.ts → esm/FullWindow.d.ts} +1 -0
  2. package/dist/cjs/index.js +288 -9
  3. package/dist/esm/FullWindow.d.ts +1 -0
  4. package/dist/esm/index.js +266 -3
  5. package/dist/index.d.ts +13 -0
  6. package/package.json +11 -6
  7. package/dist/cjs/FullWindow.js +0 -16
  8. package/dist/cjs/FullWindow.js.map +0 -1
  9. package/dist/cjs/SelectionHandler.js +0 -33
  10. package/dist/cjs/SelectionHandler.js.map +0 -1
  11. package/dist/cjs/TextContainer.js +0 -10
  12. package/dist/cjs/TextContainer.js.map +0 -1
  13. package/dist/cjs/TextSelectionZone.js +0 -40
  14. package/dist/cjs/TextSelectionZone.js.map +0 -1
  15. package/dist/cjs/handler-pos.js +0 -3
  16. package/dist/cjs/handler-pos.js.map +0 -1
  17. package/dist/cjs/index.js.map +0 -1
  18. package/dist/cjs/quote-left.svg +0 -1
  19. package/dist/cjs/quote-right.svg +0 -1
  20. package/dist/cjs/useTextSelectionEditor.js +0 -146
  21. package/dist/cjs/useTextSelectionEditor.js.map +0 -1
  22. package/dist/esm/FullWindow.js +0 -11
  23. package/dist/esm/FullWindow.js.map +0 -1
  24. package/dist/esm/SelectionHandler.js +0 -28
  25. package/dist/esm/SelectionHandler.js.map +0 -1
  26. package/dist/esm/TextContainer.js +0 -6
  27. package/dist/esm/TextContainer.js.map +0 -1
  28. package/dist/esm/TextSelectionZone.js +0 -35
  29. package/dist/esm/TextSelectionZone.js.map +0 -1
  30. package/dist/esm/handler-pos.js +0 -2
  31. package/dist/esm/handler-pos.js.map +0 -1
  32. package/dist/esm/index.js.map +0 -1
  33. package/dist/esm/quote-left.svg +0 -1
  34. package/dist/esm/quote-right.svg +0 -1
  35. package/dist/esm/useTextSelectionEditor.js +0 -142
  36. package/dist/esm/useTextSelectionEditor.js.map +0 -1
  37. /package/dist/cjs/{SelectionHandler.d.ts → esm/SelectionHandler.d.ts} +0 -0
  38. /package/dist/cjs/{TextContainer.d.ts → esm/TextContainer.d.ts} +0 -0
  39. /package/dist/cjs/{TextSelectionZone.d.ts → esm/TextSelectionZone.d.ts} +0 -0
  40. /package/dist/cjs/{handler-pos.d.ts → esm/handler-pos.d.ts} +0 -0
  41. /package/dist/cjs/{index.d.ts → esm/index.d.ts} +0 -0
  42. /package/dist/cjs/{useTextSelectionEditor.d.ts → esm/useTextSelectionEditor.d.ts} +0 -0
@@ -1,4 +1,5 @@
1
1
  import React, { FC } from 'react';
2
+ import './main.css';
2
3
  export declare const FullWindow: FC<{
3
4
  children: React.ReactNode;
4
5
  }>;
package/dist/cjs/index.js CHANGED
@@ -1,9 +1,288 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextSelectionZone = exports.FullWindow = void 0;
4
- const tslib_1 = require("tslib");
5
- const FullWindow_1 = tslib_1.__importDefault(require("./FullWindow"));
6
- exports.FullWindow = FullWindow_1.default;
7
- const TextSelectionZone_1 = tslib_1.__importDefault(require("./TextSelectionZone"));
8
- exports.TextSelectionZone = TextSelectionZone_1.default;
9
- //# sourceMappingURL=index.js.map
1
+ 'use strict';
2
+
3
+ var React = require('react');
4
+
5
+ function _interopNamespaceDefault(e) {
6
+ var n = Object.create(null);
7
+ if (e) {
8
+ Object.keys(e).forEach(function (k) {
9
+ if (k !== 'default') {
10
+ var d = Object.getOwnPropertyDescriptor(e, k);
11
+ Object.defineProperty(n, k, d.get ? d : {
12
+ enumerable: true,
13
+ get: function () { return e[k]; }
14
+ });
15
+ }
16
+ });
17
+ }
18
+ n.default = e;
19
+ return Object.freeze(n);
20
+ }
21
+
22
+ var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
23
+
24
+ function styleInject(css, ref) {
25
+ if ( ref === void 0 ) ref = {};
26
+ var insertAt = ref.insertAt;
27
+
28
+ if (!css || typeof document === 'undefined') { return; }
29
+
30
+ var head = document.head || document.getElementsByTagName('head')[0];
31
+ var style = document.createElement('style');
32
+ style.type = 'text/css';
33
+
34
+ if (insertAt === 'top') {
35
+ if (head.firstChild) {
36
+ head.insertBefore(style, head.firstChild);
37
+ } else {
38
+ head.appendChild(style);
39
+ }
40
+ } else {
41
+ head.appendChild(style);
42
+ }
43
+
44
+ if (style.styleSheet) {
45
+ style.styleSheet.cssText = css;
46
+ } else {
47
+ style.appendChild(document.createTextNode(css));
48
+ }
49
+ }
50
+
51
+ var css_248z = "@tailwind base;@tailwind components;@tailwind utilities;";
52
+ styleInject(css_248z,{"insertAt":"top"});
53
+
54
+ const fullWindow = {
55
+ height: '100vh',
56
+ widows: '100%',
57
+ };
58
+ const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
59
+ const FullWindow = ({ children }) => {
60
+ return (React.createElement("div", { style: centroContainer }, children));
61
+ };
62
+
63
+ const _TextContainer = ({ children }, ref) => {
64
+ return (React.createElement("div", { ref: ref, draggable: false, className: "basis-80 w-80 bg-yellow-50 p-11 text-3xl select-none bg-transparent" }, children));
65
+ };
66
+ const TextContainer = React.forwardRef(_TextContainer);
67
+
68
+ const getHandlerRect = (index, node) => {
69
+ const range = document.createRange();
70
+ range.setStart(node, index);
71
+ range.setEnd(node, index);
72
+ const rects = range.getClientRects();
73
+ if (rects.length === 1) {
74
+ return rects[0];
75
+ }
76
+ return null;
77
+ };
78
+ const getAllRects = (node, start, end) => {
79
+ const range = document.createRange();
80
+ range.setStart(node, start);
81
+ range.setEnd(node, end);
82
+ return range.getClientRects();
83
+ };
84
+ const getNodeAndOffsetFromPoint = (x, y) => {
85
+ let range;
86
+ let textNode;
87
+ let offset;
88
+ if (document.caretPositionFromPoint) {
89
+ range = document.caretPositionFromPoint(x, y);
90
+ textNode = range.offsetNode;
91
+ offset = range.offset;
92
+ }
93
+ else if (document.caretRangeFromPoint) {
94
+ range = document.caretRangeFromPoint(x, y);
95
+ textNode = range.startContainer;
96
+ offset = range.startOffset;
97
+ }
98
+ else {
99
+ return null;
100
+ }
101
+ if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
102
+ if (!Number.isNaN(offset)) {
103
+ return { node: textNode, offset };
104
+ }
105
+ }
106
+ return null;
107
+ };
108
+ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
109
+ // left handler pos
110
+ const [leftHandler, setLeftHandler] = React.useState(null);
111
+ const [currentLeftPos, setCurrentLeftPos] = React.useState(initLeftPos);
112
+ // right handler pos
113
+ const [rightHandler, setRightHandler] = React.useState(null);
114
+ const [currentRightPos, setCurrentRightPos] = React.useState(initRightPos);
115
+ const [rects, setRects] = React.useState(null);
116
+ // reference
117
+ const textDiv = React.useRef(null);
118
+ // mouse move handler
119
+ // left handler
120
+ React.useEffect(() => {
121
+ const handlerMove = (e) => {
122
+ var _a;
123
+ if (!leftDrag)
124
+ return;
125
+ const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
126
+ if (sm
127
+ && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
128
+ && sm.offset <= currentRightPos) {
129
+ setCurrentLeftPos(sm.offset);
130
+ }
131
+ };
132
+ document.addEventListener('mousemove', handlerMove);
133
+ return () => {
134
+ document.removeEventListener('mousemove', handlerMove);
135
+ };
136
+ }, [leftDrag, currentRightPos]);
137
+ React.useEffect(() => {
138
+ setCurrentLeftPos(initLeftPos);
139
+ }, [initLeftPos]);
140
+ // right handler
141
+ React.useEffect(() => {
142
+ const handlerMove = (e) => {
143
+ var _a;
144
+ if (!rightDrag)
145
+ return;
146
+ const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
147
+ if (sm
148
+ && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
149
+ && sm.offset >= currentLeftPos) {
150
+ setCurrentRightPos(sm.offset);
151
+ }
152
+ };
153
+ document.addEventListener('mousemove', handlerMove);
154
+ return () => {
155
+ document.removeEventListener('mousemove', handlerMove);
156
+ };
157
+ }, [rightDrag, currentLeftPos]);
158
+ React.useEffect(() => {
159
+ setCurrentRightPos(initRightPos);
160
+ }, [initRightPos]);
161
+ // draw init left handler
162
+ React.useEffect(() => {
163
+ if (textDiv.current
164
+ && textDiv.current.childNodes.length === 1
165
+ && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
166
+ const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
167
+ if (rect === null) {
168
+ setLeftHandler(null);
169
+ setRects(null);
170
+ }
171
+ else {
172
+ setLeftHandler({
173
+ height: rect.height,
174
+ left: rect.left,
175
+ top: rect.top,
176
+ });
177
+ }
178
+ }
179
+ }, [currentLeftPos]);
180
+ // draw init right handler
181
+ React.useEffect(() => {
182
+ if (textDiv.current
183
+ && textDiv.current.childNodes.length === 1
184
+ && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
185
+ const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
186
+ if (rect === null) {
187
+ setRightHandler(null);
188
+ setRects(null);
189
+ }
190
+ else {
191
+ setRightHandler({
192
+ height: rect.height,
193
+ left: rect.left,
194
+ top: rect.top,
195
+ });
196
+ }
197
+ }
198
+ }, [currentRightPos]);
199
+ React.useEffect(() => {
200
+ var _a;
201
+ const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
202
+ if (n)
203
+ setRects(getAllRects(n, currentLeftPos, currentRightPos));
204
+ }, [currentLeftPos, currentRightPos]);
205
+ // return
206
+ return [textDiv, leftHandler, rightHandler, rects];
207
+ };
208
+
209
+ var _path$1;
210
+ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
211
+ var SvgQuoteLeft = function SvgQuoteLeft(props) {
212
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
213
+ xmlns: "http://www.w3.org/2000/svg",
214
+ width: 24,
215
+ height: 24
216
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
217
+ d: "M13 14.725C13 9.584 16.892 4.206 23 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 24 16.021C24 19.203 21.416 21 18.801 21 15.786 21 13 18.695 13 14.725zm-13 0C0 9.584 3.892 4.206 10 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 11 16.021C11 19.203 8.416 21 5.801 21 2.786 21 0 18.695 0 14.725z"
218
+ })));
219
+ };
220
+
221
+ var _path;
222
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
223
+ var SvgQuoteRight = function SvgQuoteRight(props) {
224
+ return /*#__PURE__*/React__namespace.createElement("svg", _extends({
225
+ xmlns: "http://www.w3.org/2000/svg",
226
+ width: 24,
227
+ height: 24
228
+ }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
229
+ d: "M11 9.275C11 14.416 7.108 19.794 1 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 0 7.979C0 4.797 2.584 3 5.199 3 8.214 3 11 5.305 11 9.275zm13 0C24 14.416 20.108 19.794 14 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 13 7.979C13 4.797 15.584 3 18.199 3 21.214 3 24 5.305 24 9.275z"
230
+ })));
231
+ };
232
+
233
+ const SelectionHandler = ({ pos, grab, setGrab, left }) => {
234
+ return (pos &&
235
+ React.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
236
+ position: 'absolute',
237
+ display: 'flex',
238
+ left: left ? pos.left - 24 : pos.left - 1,
239
+ top: pos.top,
240
+ width: '25px',
241
+ height: pos.height,
242
+ cursor: grab ? 'grabbing' : 'grab',
243
+ alignItems: left ? 'flex-start' : 'flex-end',
244
+ }, onMouseDown: () => {
245
+ setGrab(true);
246
+ const handler = () => {
247
+ setGrab(false);
248
+ document.removeEventListener('mouseup', handler);
249
+ };
250
+ document.addEventListener('mouseup', handler);
251
+ }, onMouseUp: () => {
252
+ setGrab(false);
253
+ } }, left
254
+ ? React.createElement(SvgQuoteLeft, null)
255
+ : React.createElement(SvgQuoteRight, null)));
256
+ };
257
+
258
+ const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
259
+ const [mouseOnLeft, setMouseOnLeft] = React.useState(false);
260
+ const [mouseOnRight, setMouseOnRight] = React.useState(false);
261
+ const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
262
+ let divs = [];
263
+ if (rects) {
264
+ for (let i = 0; i < rects.length; ++i) {
265
+ const aa = rects.item(i);
266
+ if (aa)
267
+ divs.push(aa);
268
+ }
269
+ }
270
+ return (React.createElement("div", { draggable: false, style: {
271
+ display: 'flex',
272
+ } },
273
+ divs.map((d, i) => React.createElement("div", { key: i, className: 'bg-yellow-300', style: {
274
+ userSelect: 'none',
275
+ position: 'absolute',
276
+ top: `${d.top}px`,
277
+ left: `${d.left}px`,
278
+ width: `${d.width}px`,
279
+ height: `${d.height}px`,
280
+ zIndex: -2,
281
+ } }, "\u00A0")),
282
+ React.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
283
+ React.createElement(TextContainer, { ref: textDiv }, children),
284
+ React.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
285
+ };
286
+
287
+ exports.FullWindow = FullWindow;
288
+ exports.TextSelectionZone = TextSelectionZone;
@@ -1,4 +1,5 @@
1
1
  import React, { FC } from 'react';
2
+ import './main.css';
2
3
  export declare const FullWindow: FC<{
3
4
  children: React.ReactNode;
4
5
  }>;
package/dist/esm/index.js CHANGED
@@ -1,4 +1,267 @@
1
- import FullWindow from "./FullWindow";
2
- import TextSelectionZone from "./TextSelectionZone";
1
+ import * as React from 'react';
2
+ import React__default, { useState, useRef, useEffect } from 'react';
3
+
4
+ function styleInject(css, ref) {
5
+ if ( ref === void 0 ) ref = {};
6
+ var insertAt = ref.insertAt;
7
+
8
+ if (!css || typeof document === 'undefined') { return; }
9
+
10
+ var head = document.head || document.getElementsByTagName('head')[0];
11
+ var style = document.createElement('style');
12
+ style.type = 'text/css';
13
+
14
+ if (insertAt === 'top') {
15
+ if (head.firstChild) {
16
+ head.insertBefore(style, head.firstChild);
17
+ } else {
18
+ head.appendChild(style);
19
+ }
20
+ } else {
21
+ head.appendChild(style);
22
+ }
23
+
24
+ if (style.styleSheet) {
25
+ style.styleSheet.cssText = css;
26
+ } else {
27
+ style.appendChild(document.createTextNode(css));
28
+ }
29
+ }
30
+
31
+ var css_248z = "@tailwind base;@tailwind components;@tailwind utilities;";
32
+ styleInject(css_248z,{"insertAt":"top"});
33
+
34
+ const fullWindow = {
35
+ height: '100vh',
36
+ widows: '100%',
37
+ };
38
+ const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
39
+ const FullWindow = ({ children }) => {
40
+ return (React__default.createElement("div", { style: centroContainer }, children));
41
+ };
42
+
43
+ const _TextContainer = ({ children }, ref) => {
44
+ return (React__default.createElement("div", { ref: ref, draggable: false, className: "basis-80 w-80 bg-yellow-50 p-11 text-3xl select-none bg-transparent" }, children));
45
+ };
46
+ const TextContainer = React__default.forwardRef(_TextContainer);
47
+
48
+ const getHandlerRect = (index, node) => {
49
+ const range = document.createRange();
50
+ range.setStart(node, index);
51
+ range.setEnd(node, index);
52
+ const rects = range.getClientRects();
53
+ if (rects.length === 1) {
54
+ return rects[0];
55
+ }
56
+ return null;
57
+ };
58
+ const getAllRects = (node, start, end) => {
59
+ const range = document.createRange();
60
+ range.setStart(node, start);
61
+ range.setEnd(node, end);
62
+ return range.getClientRects();
63
+ };
64
+ const getNodeAndOffsetFromPoint = (x, y) => {
65
+ let range;
66
+ let textNode;
67
+ let offset;
68
+ if (document.caretPositionFromPoint) {
69
+ range = document.caretPositionFromPoint(x, y);
70
+ textNode = range.offsetNode;
71
+ offset = range.offset;
72
+ }
73
+ else if (document.caretRangeFromPoint) {
74
+ range = document.caretRangeFromPoint(x, y);
75
+ textNode = range.startContainer;
76
+ offset = range.startOffset;
77
+ }
78
+ else {
79
+ return null;
80
+ }
81
+ if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
82
+ if (!Number.isNaN(offset)) {
83
+ return { node: textNode, offset };
84
+ }
85
+ }
86
+ return null;
87
+ };
88
+ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
89
+ // left handler pos
90
+ const [leftHandler, setLeftHandler] = useState(null);
91
+ const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
92
+ // right handler pos
93
+ const [rightHandler, setRightHandler] = useState(null);
94
+ const [currentRightPos, setCurrentRightPos] = useState(initRightPos);
95
+ const [rects, setRects] = useState(null);
96
+ // reference
97
+ const textDiv = useRef(null);
98
+ // mouse move handler
99
+ // left handler
100
+ useEffect(() => {
101
+ const handlerMove = (e) => {
102
+ var _a;
103
+ if (!leftDrag)
104
+ return;
105
+ const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
106
+ if (sm
107
+ && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
108
+ && sm.offset <= currentRightPos) {
109
+ setCurrentLeftPos(sm.offset);
110
+ }
111
+ };
112
+ document.addEventListener('mousemove', handlerMove);
113
+ return () => {
114
+ document.removeEventListener('mousemove', handlerMove);
115
+ };
116
+ }, [leftDrag, currentRightPos]);
117
+ useEffect(() => {
118
+ setCurrentLeftPos(initLeftPos);
119
+ }, [initLeftPos]);
120
+ // right handler
121
+ useEffect(() => {
122
+ const handlerMove = (e) => {
123
+ var _a;
124
+ if (!rightDrag)
125
+ return;
126
+ const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
127
+ if (sm
128
+ && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
129
+ && sm.offset >= currentLeftPos) {
130
+ setCurrentRightPos(sm.offset);
131
+ }
132
+ };
133
+ document.addEventListener('mousemove', handlerMove);
134
+ return () => {
135
+ document.removeEventListener('mousemove', handlerMove);
136
+ };
137
+ }, [rightDrag, currentLeftPos]);
138
+ useEffect(() => {
139
+ setCurrentRightPos(initRightPos);
140
+ }, [initRightPos]);
141
+ // draw init left handler
142
+ useEffect(() => {
143
+ if (textDiv.current
144
+ && textDiv.current.childNodes.length === 1
145
+ && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
146
+ const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
147
+ if (rect === null) {
148
+ setLeftHandler(null);
149
+ setRects(null);
150
+ }
151
+ else {
152
+ setLeftHandler({
153
+ height: rect.height,
154
+ left: rect.left,
155
+ top: rect.top,
156
+ });
157
+ }
158
+ }
159
+ }, [currentLeftPos]);
160
+ // draw init right handler
161
+ useEffect(() => {
162
+ if (textDiv.current
163
+ && textDiv.current.childNodes.length === 1
164
+ && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
165
+ const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
166
+ if (rect === null) {
167
+ setRightHandler(null);
168
+ setRects(null);
169
+ }
170
+ else {
171
+ setRightHandler({
172
+ height: rect.height,
173
+ left: rect.left,
174
+ top: rect.top,
175
+ });
176
+ }
177
+ }
178
+ }, [currentRightPos]);
179
+ useEffect(() => {
180
+ var _a;
181
+ const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
182
+ if (n)
183
+ setRects(getAllRects(n, currentLeftPos, currentRightPos));
184
+ }, [currentLeftPos, currentRightPos]);
185
+ // return
186
+ return [textDiv, leftHandler, rightHandler, rects];
187
+ };
188
+
189
+ var _path$1;
190
+ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
191
+ var SvgQuoteLeft = function SvgQuoteLeft(props) {
192
+ return /*#__PURE__*/React.createElement("svg", _extends$1({
193
+ xmlns: "http://www.w3.org/2000/svg",
194
+ width: 24,
195
+ height: 24
196
+ }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
197
+ d: "M13 14.725C13 9.584 16.892 4.206 23 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 24 16.021C24 19.203 21.416 21 18.801 21 15.786 21 13 18.695 13 14.725zm-13 0C0 9.584 3.892 4.206 10 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 11 16.021C11 19.203 8.416 21 5.801 21 2.786 21 0 18.695 0 14.725z"
198
+ })));
199
+ };
200
+
201
+ var _path;
202
+ function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
203
+ var SvgQuoteRight = function SvgQuoteRight(props) {
204
+ return /*#__PURE__*/React.createElement("svg", _extends({
205
+ xmlns: "http://www.w3.org/2000/svg",
206
+ width: 24,
207
+ height: 24
208
+ }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
209
+ d: "M11 9.275C11 14.416 7.108 19.794 1 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 0 7.979C0 4.797 2.584 3 5.199 3 8.214 3 11 5.305 11 9.275zm13 0C24 14.416 20.108 19.794 14 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 13 7.979C13 4.797 15.584 3 18.199 3 21.214 3 24 5.305 24 9.275z"
210
+ })));
211
+ };
212
+
213
+ const SelectionHandler = ({ pos, grab, setGrab, left }) => {
214
+ return (pos &&
215
+ React__default.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
216
+ position: 'absolute',
217
+ display: 'flex',
218
+ left: left ? pos.left - 24 : pos.left - 1,
219
+ top: pos.top,
220
+ width: '25px',
221
+ height: pos.height,
222
+ cursor: grab ? 'grabbing' : 'grab',
223
+ alignItems: left ? 'flex-start' : 'flex-end',
224
+ }, onMouseDown: () => {
225
+ setGrab(true);
226
+ const handler = () => {
227
+ setGrab(false);
228
+ document.removeEventListener('mouseup', handler);
229
+ };
230
+ document.addEventListener('mouseup', handler);
231
+ }, onMouseUp: () => {
232
+ setGrab(false);
233
+ } }, left
234
+ ? React__default.createElement(SvgQuoteLeft, null)
235
+ : React__default.createElement(SvgQuoteRight, null)));
236
+ };
237
+
238
+ const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
239
+ const [mouseOnLeft, setMouseOnLeft] = useState(false);
240
+ const [mouseOnRight, setMouseOnRight] = useState(false);
241
+ const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
242
+ let divs = [];
243
+ if (rects) {
244
+ for (let i = 0; i < rects.length; ++i) {
245
+ const aa = rects.item(i);
246
+ if (aa)
247
+ divs.push(aa);
248
+ }
249
+ }
250
+ return (React__default.createElement("div", { draggable: false, style: {
251
+ display: 'flex',
252
+ } },
253
+ divs.map((d, i) => React__default.createElement("div", { key: i, className: 'bg-yellow-300', style: {
254
+ userSelect: 'none',
255
+ position: 'absolute',
256
+ top: `${d.top}px`,
257
+ left: `${d.left}px`,
258
+ width: `${d.width}px`,
259
+ height: `${d.height}px`,
260
+ zIndex: -2,
261
+ } }, "\u00A0")),
262
+ React__default.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
263
+ React__default.createElement(TextContainer, { ref: textDiv }, children),
264
+ React__default.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
265
+ };
266
+
3
267
  export { FullWindow, TextSelectionZone };
4
- //# sourceMappingURL=index.js.map
@@ -0,0 +1,13 @@
1
+ import React, { FC } from 'react';
2
+
3
+ declare const FullWindow: FC<{
4
+ children: React.ReactNode;
5
+ }>;
6
+
7
+ declare const TextSelectionZone: FC<{
8
+ initLeftPos: number;
9
+ initRightPos: number;
10
+ children: string;
11
+ }>;
12
+
13
+ export { FullWindow, TextSelectionZone };
package/package.json CHANGED
@@ -1,14 +1,12 @@
1
1
  {
2
2
  "name": "react-text-range",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "text selection editor for React",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",
7
7
  "types": "./dist/esm/index.d.ts",
8
8
  "scripts": {
9
- "build:esm": "tsc && cp ./src/*.svg ./dist/esm",
10
- "build:cjs": "tsc --module commonjs --outDir dist/cjs && cp ./src/*.svg ./dist/cjs",
11
- "build": "npm run build:esm && npm run build:cjs",
9
+ "build": "rollup -c",
12
10
  "test": "jest --config jestconfig.json",
13
11
  "prepare": "npm run build",
14
12
  "prepublishOnly": "npm test"
@@ -32,9 +30,12 @@
32
30
  "README.md"
33
31
  ],
34
32
  "peerDependencies": {
35
- "react": ">=16"
33
+ "react": ">=16",
34
+ "react-dom": ">=16"
36
35
  },
37
36
  "devDependencies": {
37
+ "@rollup/plugin-typescript": "^11.1.4",
38
+ "@svgr/rollup": "^8.1.0",
38
39
  "@testing-library/react": "^14.0.0",
39
40
  "@types/jest": "^29.5.5",
40
41
  "@types/react": "^18.2.24",
@@ -43,8 +44,12 @@
43
44
  "jest-environment-jsdom": "^29.7.0",
44
45
  "react": "^18.2.0",
45
46
  "react-dom": "^18.2.0",
47
+ "rollup": "^3.29.4",
48
+ "rollup-plugin-dts": "^6.0.2",
49
+ "rollup-plugin-postcss": "^4.0.2",
50
+ "tailwindcss": "^3.3.3",
46
51
  "ts-jest": "^29.1.1",
47
52
  "tslib": "^2.6.2",
48
53
  "typescript": "^5.2.2"
49
54
  }
50
- }
55
+ }
@@ -1,16 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.FullWindow = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const fullWindow = {
7
- height: '100vh',
8
- widows: '100%',
9
- };
10
- const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
11
- const FullWindow = ({ children }) => {
12
- return (react_1.default.createElement("div", { style: centroContainer }, children));
13
- };
14
- exports.FullWindow = FullWindow;
15
- exports.default = exports.FullWindow;
16
- //# sourceMappingURL=FullWindow.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FullWindow.js","sourceRoot":"","sources":["../../src/FullWindow.tsx"],"names":[],"mappings":";;;;AAAA,0DAAkC;AAElC,MAAM,UAAU,GAAwB;IACtC,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,eAAe,mCAChB,UAAU,KACb,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EACxB,aAAa,EAAE,QAAQ,GACxB,CAAC;AAEK,MAAM,UAAU,GAAuC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAE7E,OAAO,CACL,uCAAK,KAAK,EAAE,eAAe,IACxB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAPW,QAAA,UAAU,cAOrB;AAEF,kBAAe,kBAAU,CAAC"}
@@ -1,33 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SelectionHandler = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const quote_left_svg_1 = tslib_1.__importDefault(require("./quote-left.svg"));
7
- const quote_right_svg_1 = tslib_1.__importDefault(require("./quote-right.svg"));
8
- const SelectionHandler = ({ pos, grab, setGrab, left }) => {
9
- return (pos &&
10
- react_1.default.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
11
- position: 'absolute',
12
- display: 'flex',
13
- left: left ? pos.left - 24 : pos.left - 1,
14
- top: pos.top,
15
- width: '25px',
16
- height: pos.height,
17
- cursor: grab ? 'grabbing' : 'grab',
18
- alignItems: left ? 'flex-start' : 'flex-end',
19
- }, onMouseDown: () => {
20
- setGrab(true);
21
- const handler = () => {
22
- setGrab(false);
23
- document.removeEventListener('mouseup', handler);
24
- };
25
- document.addEventListener('mouseup', handler);
26
- }, onMouseUp: () => {
27
- setGrab(false);
28
- } }, left
29
- ? react_1.default.createElement(quote_left_svg_1.default, null)
30
- : react_1.default.createElement(quote_right_svg_1.default, null)));
31
- };
32
- exports.SelectionHandler = SelectionHandler;
33
- //# sourceMappingURL=SelectionHandler.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectionHandler.js","sourceRoot":"","sources":["../../src/SelectionHandler.tsx"],"names":[],"mappings":";;;;AAAA,0DAAkC;AAElC,8EAAyC;AACzC,gFAA2C;AAEpC,MAAM,gBAAgB,GAKxB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACpC,OAAO,CACL,GAAG;QACH,uCACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,4BAA4B,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE,EAC/E,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;gBACzC,GAAG,EAAE,GAAG,CAAC,GAAG;gBACZ,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,CAAC,MAAM;gBAClB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;gBAClC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;aAC7C,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,OAAO,CAAC,IAAI,CAAC,CAAC;gBACd,MAAM,OAAO,GAAG,GAAG,EAAE;oBACnB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACf,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBACnD,CAAC,CAAC;gBACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAChD,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,IAEA,IAAI;YACH,CAAC,CAAC,8BAAC,wBAAS,OAAG;YACf,CAAC,CAAC,8BAAC,yBAAU,OAAG,CACd,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,gBAAgB,oBAsC3B"}
@@ -1,10 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextContainer = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = tslib_1.__importDefault(require("react"));
6
- const _TextContainer = ({ children }, ref) => {
7
- return (react_1.default.createElement("div", { ref: ref, draggable: false, className: "basis-80 w-80 bg-yellow-50 p-11 text-3xl select-none bg-transparent" }, children));
8
- };
9
- exports.TextContainer = react_1.default.forwardRef(_TextContainer);
10
- //# sourceMappingURL=TextContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextContainer.js","sourceRoot":"","sources":["../../src/TextContainer.tsx"],"names":[],"mappings":";;;;AAAA,0DAAwD;AAExD,MAAM,cAAc,GAClB,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACpB,OAAO,CACL,uCAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC,qEAAqE,IAC7G,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAGS,QAAA,aAAa,GAAG,eAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}
@@ -1,40 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TextSelectionZone = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = require("react");
6
- const TextContainer_1 = require("./TextContainer");
7
- const useTextSelectionEditor_1 = require("./useTextSelectionEditor");
8
- const SelectionHandler_1 = require("./SelectionHandler");
9
- const react_2 = tslib_1.__importDefault(require("react"));
10
- const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
11
- const [mouseOnLeft, setMouseOnLeft] = (0, react_1.useState)(false);
12
- const [mouseOnRight, setMouseOnRight] = (0, react_1.useState)(false);
13
- const [textDiv, leftHandler, rightHandler, rects] = (0, useTextSelectionEditor_1.useTextSelectionEditor)(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
14
- let divs = [];
15
- if (rects) {
16
- for (let i = 0; i < rects.length; ++i) {
17
- const aa = rects.item(i);
18
- if (aa)
19
- divs.push(aa);
20
- }
21
- }
22
- return (react_2.default.createElement("div", { draggable: false, style: {
23
- display: 'flex',
24
- } },
25
- divs.map((d, i) => react_2.default.createElement("div", { key: i, className: 'bg-yellow-300', style: {
26
- userSelect: 'none',
27
- position: 'absolute',
28
- top: `${d.top}px`,
29
- left: `${d.left}px`,
30
- width: `${d.width}px`,
31
- height: `${d.height}px`,
32
- zIndex: -2,
33
- } }, "\u00A0")),
34
- react_2.default.createElement(SelectionHandler_1.SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
35
- react_2.default.createElement(TextContainer_1.TextContainer, { ref: textDiv }, children),
36
- react_2.default.createElement(SelectionHandler_1.SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
37
- };
38
- exports.TextSelectionZone = TextSelectionZone;
39
- exports.default = exports.TextSelectionZone;
40
- //# sourceMappingURL=TextSelectionZone.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextSelectionZone.js","sourceRoot":"","sources":["../../src/TextSelectionZone.tsx"],"names":[],"mappings":";;;;AAAA,iCAAqC;AACrC,mDAAgD;AAChD,qEAAkE;AAClE,yDAAsD;AACtD,0DAA0B;AAEnB,MAAM,iBAAiB,GAAwE,CAAC,EACrG,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,EAAE,EAAE;IAEH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAE/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IAEjE,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,CAAC,GAAG,IAAA,+CAAsB,EAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IAEjI,IAAI,IAAI,GAAc,EAAE,CAAC;IAEzB,IAAI,KAAK,EAAE;QACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YACrC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,EAAE;gBAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACvB;KACF;IAED,OAAO,CACL,uCACE,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QAEA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,uCAAK,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE;gBAChE,UAAU,EAAE,MAAM;gBAClB,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI;gBACjB,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI;gBACnB,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;gBACrB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,IAAI;gBACvB,MAAM,EAAE,CAAC,CAAC;aACX,aAAc,CAAC;QAChB,8BAAC,mCAAgB,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,GAAI;QACxG,8BAAC,6BAAa,IAAC,GAAG,EAAE,OAAO,IACxB,QAAQ,CACK;QAChB,8BAAC,mCAAgB,IAAC,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAI,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,iBAAiB,qBA4C5B;AAEF,kBAAe,yBAAiB,CAAC"}
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=handler-pos.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;AAAA,sEAAsC;AAG7B,qBAHF,oBAAU,CAGE;AAFnB,oFAAoD;AAE/B,4BAFd,2BAAiB,CAEc"}
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 9.275c0 5.141-3.892 10.519-10 11.725l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746-2.491-.392-4.396-2.547-4.396-5.149 0-3.182 2.584-4.979 5.199-4.979 3.015 0 5.801 2.305 5.801 6.275zm13 0c0 5.141-3.892 10.519-10 11.725l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746-2.491-.392-4.396-2.547-4.396-5.149 0-3.182 2.584-4.979 5.199-4.979 3.015 0 5.801 2.305 5.801 6.275z"/></svg>
@@ -1,146 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.useTextSelectionEditor = void 0;
4
- const react_1 = require("react");
5
- const getHandlerRect = (index, node) => {
6
- const range = document.createRange();
7
- range.setStart(node, index);
8
- range.setEnd(node, index);
9
- const rects = range.getClientRects();
10
- if (rects.length === 1) {
11
- return rects[0];
12
- }
13
- return null;
14
- };
15
- const getAllRects = (node, start, end) => {
16
- const range = document.createRange();
17
- range.setStart(node, start);
18
- range.setEnd(node, end);
19
- return range.getClientRects();
20
- };
21
- const getNodeAndOffsetFromPoint = (x, y) => {
22
- let range;
23
- let textNode;
24
- let offset;
25
- if (document.caretPositionFromPoint) {
26
- range = document.caretPositionFromPoint(x, y);
27
- textNode = range.offsetNode;
28
- offset = range.offset;
29
- }
30
- else if (document.caretRangeFromPoint) {
31
- range = document.caretRangeFromPoint(x, y);
32
- textNode = range.startContainer;
33
- offset = range.startOffset;
34
- }
35
- else {
36
- return null;
37
- }
38
- if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
39
- if (!Number.isNaN(offset)) {
40
- return { node: textNode, offset };
41
- }
42
- }
43
- return null;
44
- };
45
- const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
46
- // left handler pos
47
- const [leftHandler, setLeftHandler] = (0, react_1.useState)(null);
48
- const [currentLeftPos, setCurrentLeftPos] = (0, react_1.useState)(initLeftPos);
49
- // right handler pos
50
- const [rightHandler, setRightHandler] = (0, react_1.useState)(null);
51
- const [currentRightPos, setCurrentRightPos] = (0, react_1.useState)(initRightPos);
52
- const [rects, setRects] = (0, react_1.useState)(null);
53
- // reference
54
- const textDiv = (0, react_1.useRef)(null);
55
- // mouse move handler
56
- // left handler
57
- (0, react_1.useEffect)(() => {
58
- const handlerMove = (e) => {
59
- var _a;
60
- if (!leftDrag)
61
- return;
62
- const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
63
- if (sm
64
- && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
65
- && sm.offset <= currentRightPos) {
66
- setCurrentLeftPos(sm.offset);
67
- }
68
- };
69
- document.addEventListener('mousemove', handlerMove);
70
- return () => {
71
- document.removeEventListener('mousemove', handlerMove);
72
- };
73
- }, [leftDrag, currentRightPos]);
74
- (0, react_1.useEffect)(() => {
75
- setCurrentLeftPos(initLeftPos);
76
- }, [initLeftPos]);
77
- // right handler
78
- (0, react_1.useEffect)(() => {
79
- const handlerMove = (e) => {
80
- var _a;
81
- if (!rightDrag)
82
- return;
83
- const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
84
- if (sm
85
- && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
86
- && sm.offset >= currentLeftPos) {
87
- setCurrentRightPos(sm.offset);
88
- }
89
- };
90
- document.addEventListener('mousemove', handlerMove);
91
- return () => {
92
- document.removeEventListener('mousemove', handlerMove);
93
- };
94
- }, [rightDrag, currentLeftPos]);
95
- (0, react_1.useEffect)(() => {
96
- setCurrentRightPos(initRightPos);
97
- }, [initRightPos]);
98
- // draw init left handler
99
- (0, react_1.useEffect)(() => {
100
- if (textDiv.current
101
- && textDiv.current.childNodes.length === 1
102
- && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
103
- const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
104
- if (rect === null) {
105
- setLeftHandler(null);
106
- setRects(null);
107
- }
108
- else {
109
- setLeftHandler({
110
- height: rect.height,
111
- left: rect.left,
112
- top: rect.top,
113
- });
114
- }
115
- }
116
- }, [currentLeftPos]);
117
- // draw init right handler
118
- (0, react_1.useEffect)(() => {
119
- if (textDiv.current
120
- && textDiv.current.childNodes.length === 1
121
- && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
122
- const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
123
- if (rect === null) {
124
- setRightHandler(null);
125
- setRects(null);
126
- }
127
- else {
128
- setRightHandler({
129
- height: rect.height,
130
- left: rect.left,
131
- top: rect.top,
132
- });
133
- }
134
- }
135
- }, [currentRightPos]);
136
- (0, react_1.useEffect)(() => {
137
- var _a;
138
- const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
139
- if (n)
140
- setRects(getAllRects(n, currentLeftPos, currentRightPos));
141
- }, [currentLeftPos, currentRightPos]);
142
- // return
143
- return [textDiv, leftHandler, rightHandler, rects];
144
- };
145
- exports.useTextSelectionEditor = useTextSelectionEditor;
146
- //# sourceMappingURL=useTextSelectionEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTextSelectionEditor.js","sourceRoot":"","sources":["../../src/useTextSelectionEditor.tsx"],"names":[],"mappings":"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"}
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- const fullWindow = {
3
- height: '100vh',
4
- widows: '100%',
5
- };
6
- const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
7
- export const FullWindow = ({ children }) => {
8
- return (React.createElement("div", { style: centroContainer }, children));
9
- };
10
- export default FullWindow;
11
- //# sourceMappingURL=FullWindow.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FullWindow.js","sourceRoot":"","sources":["../../src/FullWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,MAAM,UAAU,GAAwB;IACtC,MAAM,EAAE,OAAO;IACf,MAAM,EAAE,MAAM;CACf,CAAC;AAEF,MAAM,eAAe,mCAChB,UAAU,KACb,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,QAAQ,EACpB,cAAc,EAAE,QAAQ,EACxB,aAAa,EAAE,QAAQ,GACxB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAuC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAE7E,OAAO,CACL,6BAAK,KAAK,EAAE,eAAe,IACxB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import QuoteLeft from "./quote-left.svg";
3
- import QuoteRight from "./quote-right.svg";
4
- export const SelectionHandler = ({ pos, grab, setGrab, left }) => {
5
- return (pos &&
6
- React.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
7
- position: 'absolute',
8
- display: 'flex',
9
- left: left ? pos.left - 24 : pos.left - 1,
10
- top: pos.top,
11
- width: '25px',
12
- height: pos.height,
13
- cursor: grab ? 'grabbing' : 'grab',
14
- alignItems: left ? 'flex-start' : 'flex-end',
15
- }, onMouseDown: () => {
16
- setGrab(true);
17
- const handler = () => {
18
- setGrab(false);
19
- document.removeEventListener('mouseup', handler);
20
- };
21
- document.addEventListener('mouseup', handler);
22
- }, onMouseUp: () => {
23
- setGrab(false);
24
- } }, left
25
- ? React.createElement(QuoteLeft, null)
26
- : React.createElement(QuoteRight, null)));
27
- };
28
- //# sourceMappingURL=SelectionHandler.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SelectionHandler.js","sourceRoot":"","sources":["../../src/SelectionHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,SAAS,MAAM,kBAAkB,CAAC;AACzC,OAAO,UAAU,MAAM,mBAAmB,CAAC;AAE3C,MAAM,CAAC,MAAM,gBAAgB,GAKxB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;IACpC,OAAO,CACL,GAAG;QACH,6BACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,4BAA4B,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,EAAE,EAC/E,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,OAAO,EAAE,MAAM;gBACf,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;gBACzC,GAAG,EAAE,GAAG,CAAC,GAAG;gBACZ,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,GAAG,CAAC,MAAM;gBAClB,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;gBAClC,UAAU,EAAE,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU;aAC7C,EACD,WAAW,EAAE,GAAG,EAAE;gBAChB,OAAO,CAAC,IAAI,CAAC,CAAC;gBACd,MAAM,OAAO,GAAG,GAAG,EAAE;oBACnB,OAAO,CAAC,KAAK,CAAC,CAAC;oBACf,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBACnD,CAAC,CAAC;gBACF,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YAChD,CAAC,EACD,SAAS,EAAE,GAAG,EAAE;gBACd,OAAO,CAAC,KAAK,CAAC,CAAC;YACjB,CAAC,IAEA,IAAI;YACH,CAAC,CAAC,oBAAC,SAAS,OAAG;YACf,CAAC,CAAC,oBAAC,UAAU,OAAG,CACd,CACP,CAAC;AACJ,CAAC,CAAC"}
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- const _TextContainer = ({ children }, ref) => {
3
- return (React.createElement("div", { ref: ref, draggable: false, className: "basis-80 w-80 bg-yellow-50 p-11 text-3xl select-none bg-transparent" }, children));
4
- };
5
- export const TextContainer = React.forwardRef(_TextContainer);
6
- //# sourceMappingURL=TextContainer.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextContainer.js","sourceRoot":"","sources":["../../src/TextContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,MAAM,cAAc,GAClB,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,EAAE;IACpB,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAC,qEAAqE,IAC7G,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAGJ,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}
@@ -1,35 +0,0 @@
1
- import { useState } from 'react';
2
- import { TextContainer } from './TextContainer';
3
- import { useTextSelectionEditor } from './useTextSelectionEditor';
4
- import { SelectionHandler } from './SelectionHandler';
5
- import React from 'react';
6
- export const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
7
- const [mouseOnLeft, setMouseOnLeft] = useState(false);
8
- const [mouseOnRight, setMouseOnRight] = useState(false);
9
- const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
10
- let divs = [];
11
- if (rects) {
12
- for (let i = 0; i < rects.length; ++i) {
13
- const aa = rects.item(i);
14
- if (aa)
15
- divs.push(aa);
16
- }
17
- }
18
- return (React.createElement("div", { draggable: false, style: {
19
- display: 'flex',
20
- } },
21
- divs.map((d, i) => React.createElement("div", { key: i, className: 'bg-yellow-300', style: {
22
- userSelect: 'none',
23
- position: 'absolute',
24
- top: `${d.top}px`,
25
- left: `${d.left}px`,
26
- width: `${d.width}px`,
27
- height: `${d.height}px`,
28
- zIndex: -2,
29
- } }, "\u00A0")),
30
- React.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
31
- React.createElement(TextContainer, { ref: textDiv }, children),
32
- React.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
33
- };
34
- export default TextSelectionZone;
35
- //# sourceMappingURL=TextSelectionZone.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextSelectionZone.js","sourceRoot":"","sources":["../../src/TextSelectionZone.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAwE,CAAC,EACrG,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,EAAE,EAAE;IAEH,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAEjE,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,KAAK,CAAC,GAAG,sBAAsB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;IAEjI,IAAI,IAAI,GAAc,EAAE,CAAC;IAEzB,IAAI,KAAK,EAAE;QACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;YACrC,MAAM,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;YACzB,IAAI,EAAE;gBAAE,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;SACvB;KACF;IAED,OAAO,CACL,6BACE,SAAS,EAAE,KAAK,EAChB,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;SAChB;QAEA,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,6BAAK,GAAG,EAAE,CAAC,EAAE,SAAS,EAAC,eAAe,EAAC,KAAK,EAAE;gBAChE,UAAU,EAAE,MAAM;gBAClB,QAAQ,EAAE,UAAU;gBACpB,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI;gBACjB,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,IAAI;gBACnB,KAAK,EAAE,GAAG,CAAC,CAAC,KAAK,IAAI;gBACrB,MAAM,EAAE,GAAG,CAAC,CAAC,MAAM,IAAI;gBACvB,MAAM,EAAE,CAAC,CAAC;aACX,aAAc,CAAC;QAChB,oBAAC,gBAAgB,IAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,GAAI;QACxG,oBAAC,aAAa,IAAC,GAAG,EAAE,OAAO,IACxB,QAAQ,CACK;QAChB,oBAAC,gBAAgB,IAAC,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAI,CACxG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
@@ -1,2 +0,0 @@
1
- export {};
2
- //# sourceMappingURL=handler-pos.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,iBAAiB,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAA"}
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M13 14.725c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275zm-13 0c0-5.141 3.892-10.519 10-11.725l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746 2.491.392 4.396 2.547 4.396 5.149 0 3.182-2.584 4.979-5.199 4.979-3.015 0-5.801-2.305-5.801-6.275z"/></svg>
@@ -1 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11 9.275c0 5.141-3.892 10.519-10 11.725l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746-2.491-.392-4.396-2.547-4.396-5.149 0-3.182 2.584-4.979 5.199-4.979 3.015 0 5.801 2.305 5.801 6.275zm13 0c0 5.141-3.892 10.519-10 11.725l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746-2.491-.392-4.396-2.547-4.396-5.149 0-3.182 2.584-4.979 5.199-4.979 3.015 0 5.801 2.305 5.801 6.275z"/></svg>
@@ -1,142 +0,0 @@
1
- import { useEffect, useRef, useState } from 'react';
2
- const getHandlerRect = (index, node) => {
3
- const range = document.createRange();
4
- range.setStart(node, index);
5
- range.setEnd(node, index);
6
- const rects = range.getClientRects();
7
- if (rects.length === 1) {
8
- return rects[0];
9
- }
10
- return null;
11
- };
12
- const getAllRects = (node, start, end) => {
13
- const range = document.createRange();
14
- range.setStart(node, start);
15
- range.setEnd(node, end);
16
- return range.getClientRects();
17
- };
18
- const getNodeAndOffsetFromPoint = (x, y) => {
19
- let range;
20
- let textNode;
21
- let offset;
22
- if (document.caretPositionFromPoint) {
23
- range = document.caretPositionFromPoint(x, y);
24
- textNode = range.offsetNode;
25
- offset = range.offset;
26
- }
27
- else if (document.caretRangeFromPoint) {
28
- range = document.caretRangeFromPoint(x, y);
29
- textNode = range.startContainer;
30
- offset = range.startOffset;
31
- }
32
- else {
33
- return null;
34
- }
35
- if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
36
- if (!Number.isNaN(offset)) {
37
- return { node: textNode, offset };
38
- }
39
- }
40
- return null;
41
- };
42
- export const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
43
- // left handler pos
44
- const [leftHandler, setLeftHandler] = useState(null);
45
- const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
46
- // right handler pos
47
- const [rightHandler, setRightHandler] = useState(null);
48
- const [currentRightPos, setCurrentRightPos] = useState(initRightPos);
49
- const [rects, setRects] = useState(null);
50
- // reference
51
- const textDiv = useRef(null);
52
- // mouse move handler
53
- // left handler
54
- useEffect(() => {
55
- const handlerMove = (e) => {
56
- var _a;
57
- if (!leftDrag)
58
- return;
59
- const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
60
- if (sm
61
- && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
62
- && sm.offset <= currentRightPos) {
63
- setCurrentLeftPos(sm.offset);
64
- }
65
- };
66
- document.addEventListener('mousemove', handlerMove);
67
- return () => {
68
- document.removeEventListener('mousemove', handlerMove);
69
- };
70
- }, [leftDrag, currentRightPos]);
71
- useEffect(() => {
72
- setCurrentLeftPos(initLeftPos);
73
- }, [initLeftPos]);
74
- // right handler
75
- useEffect(() => {
76
- const handlerMove = (e) => {
77
- var _a;
78
- if (!rightDrag)
79
- return;
80
- const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
81
- if (sm
82
- && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
83
- && sm.offset >= currentLeftPos) {
84
- setCurrentRightPos(sm.offset);
85
- }
86
- };
87
- document.addEventListener('mousemove', handlerMove);
88
- return () => {
89
- document.removeEventListener('mousemove', handlerMove);
90
- };
91
- }, [rightDrag, currentLeftPos]);
92
- useEffect(() => {
93
- setCurrentRightPos(initRightPos);
94
- }, [initRightPos]);
95
- // draw init left handler
96
- useEffect(() => {
97
- if (textDiv.current
98
- && textDiv.current.childNodes.length === 1
99
- && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
100
- const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
101
- if (rect === null) {
102
- setLeftHandler(null);
103
- setRects(null);
104
- }
105
- else {
106
- setLeftHandler({
107
- height: rect.height,
108
- left: rect.left,
109
- top: rect.top,
110
- });
111
- }
112
- }
113
- }, [currentLeftPos]);
114
- // draw init right handler
115
- useEffect(() => {
116
- if (textDiv.current
117
- && textDiv.current.childNodes.length === 1
118
- && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
119
- const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
120
- if (rect === null) {
121
- setRightHandler(null);
122
- setRects(null);
123
- }
124
- else {
125
- setRightHandler({
126
- height: rect.height,
127
- left: rect.left,
128
- top: rect.top,
129
- });
130
- }
131
- }
132
- }, [currentRightPos]);
133
- useEffect(() => {
134
- var _a;
135
- const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
136
- if (n)
137
- setRects(getAllRects(n, currentLeftPos, currentRightPos));
138
- }, [currentLeftPos, currentRightPos]);
139
- // return
140
- return [textDiv, leftHandler, rightHandler, rects];
141
- };
142
- //# sourceMappingURL=useTextSelectionEditor.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useTextSelectionEditor.js","sourceRoot":"","sources":["../../src/useTextSelectionEditor.tsx"],"names":[],"mappings":"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"}
File without changes