react-text-range 1.0.2 → 1.0.3
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.
- package/dist/cjs/index.js +258 -9
- package/dist/esm/index.js +236 -3
- package/dist/index.d.ts +13 -0
- package/package.json +11 -6
- package/dist/cjs/FullWindow.js +0 -16
- package/dist/cjs/FullWindow.js.map +0 -1
- package/dist/cjs/SelectionHandler.js +0 -33
- package/dist/cjs/SelectionHandler.js.map +0 -1
- package/dist/cjs/TextContainer.js +0 -10
- package/dist/cjs/TextContainer.js.map +0 -1
- package/dist/cjs/TextSelectionZone.js +0 -40
- package/dist/cjs/TextSelectionZone.js.map +0 -1
- package/dist/cjs/handler-pos.js +0 -3
- package/dist/cjs/handler-pos.js.map +0 -1
- package/dist/cjs/index.js.map +0 -1
- package/dist/cjs/quote-left.svg +0 -1
- package/dist/cjs/quote-right.svg +0 -1
- package/dist/cjs/useTextSelectionEditor.js +0 -146
- package/dist/cjs/useTextSelectionEditor.js.map +0 -1
- package/dist/esm/FullWindow.js +0 -11
- package/dist/esm/FullWindow.js.map +0 -1
- package/dist/esm/SelectionHandler.js +0 -28
- package/dist/esm/SelectionHandler.js.map +0 -1
- package/dist/esm/TextContainer.js +0 -6
- package/dist/esm/TextContainer.js.map +0 -1
- package/dist/esm/TextSelectionZone.js +0 -35
- package/dist/esm/TextSelectionZone.js.map +0 -1
- package/dist/esm/handler-pos.js +0 -2
- package/dist/esm/handler-pos.js.map +0 -1
- package/dist/esm/index.js.map +0 -1
- package/dist/esm/quote-left.svg +0 -1
- package/dist/esm/quote-right.svg +0 -1
- package/dist/esm/useTextSelectionEditor.js +0 -142
- package/dist/esm/useTextSelectionEditor.js.map +0 -1
- /package/dist/cjs/{FullWindow.d.ts → esm/FullWindow.d.ts} +0 -0
- /package/dist/cjs/{SelectionHandler.d.ts → esm/SelectionHandler.d.ts} +0 -0
- /package/dist/cjs/{TextContainer.d.ts → esm/TextContainer.d.ts} +0 -0
- /package/dist/cjs/{TextSelectionZone.d.ts → esm/TextSelectionZone.d.ts} +0 -0
- /package/dist/cjs/{handler-pos.d.ts → esm/handler-pos.d.ts} +0 -0
- /package/dist/cjs/{index.d.ts → esm/index.d.ts} +0 -0
- /package/dist/cjs/{useTextSelectionEditor.d.ts → esm/useTextSelectionEditor.d.ts} +0 -0
package/dist/cjs/index.js
CHANGED
|
@@ -1,9 +1,258 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
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
|
+
const fullWindow = {
|
|
25
|
+
height: '100vh',
|
|
26
|
+
widows: '100%',
|
|
27
|
+
};
|
|
28
|
+
const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
|
|
29
|
+
const FullWindow = ({ children }) => {
|
|
30
|
+
return (React.createElement("div", { style: centroContainer }, children));
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const _TextContainer = ({ children }, ref) => {
|
|
34
|
+
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));
|
|
35
|
+
};
|
|
36
|
+
const TextContainer = React.forwardRef(_TextContainer);
|
|
37
|
+
|
|
38
|
+
const getHandlerRect = (index, node) => {
|
|
39
|
+
const range = document.createRange();
|
|
40
|
+
range.setStart(node, index);
|
|
41
|
+
range.setEnd(node, index);
|
|
42
|
+
const rects = range.getClientRects();
|
|
43
|
+
if (rects.length === 1) {
|
|
44
|
+
return rects[0];
|
|
45
|
+
}
|
|
46
|
+
return null;
|
|
47
|
+
};
|
|
48
|
+
const getAllRects = (node, start, end) => {
|
|
49
|
+
const range = document.createRange();
|
|
50
|
+
range.setStart(node, start);
|
|
51
|
+
range.setEnd(node, end);
|
|
52
|
+
return range.getClientRects();
|
|
53
|
+
};
|
|
54
|
+
const getNodeAndOffsetFromPoint = (x, y) => {
|
|
55
|
+
let range;
|
|
56
|
+
let textNode;
|
|
57
|
+
let offset;
|
|
58
|
+
if (document.caretPositionFromPoint) {
|
|
59
|
+
range = document.caretPositionFromPoint(x, y);
|
|
60
|
+
textNode = range.offsetNode;
|
|
61
|
+
offset = range.offset;
|
|
62
|
+
}
|
|
63
|
+
else if (document.caretRangeFromPoint) {
|
|
64
|
+
range = document.caretRangeFromPoint(x, y);
|
|
65
|
+
textNode = range.startContainer;
|
|
66
|
+
offset = range.startOffset;
|
|
67
|
+
}
|
|
68
|
+
else {
|
|
69
|
+
return null;
|
|
70
|
+
}
|
|
71
|
+
if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
|
|
72
|
+
if (!Number.isNaN(offset)) {
|
|
73
|
+
return { node: textNode, offset };
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
return null;
|
|
77
|
+
};
|
|
78
|
+
const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
|
|
79
|
+
// left handler pos
|
|
80
|
+
const [leftHandler, setLeftHandler] = React.useState(null);
|
|
81
|
+
const [currentLeftPos, setCurrentLeftPos] = React.useState(initLeftPos);
|
|
82
|
+
// right handler pos
|
|
83
|
+
const [rightHandler, setRightHandler] = React.useState(null);
|
|
84
|
+
const [currentRightPos, setCurrentRightPos] = React.useState(initRightPos);
|
|
85
|
+
const [rects, setRects] = React.useState(null);
|
|
86
|
+
// reference
|
|
87
|
+
const textDiv = React.useRef(null);
|
|
88
|
+
// mouse move handler
|
|
89
|
+
// left handler
|
|
90
|
+
React.useEffect(() => {
|
|
91
|
+
const handlerMove = (e) => {
|
|
92
|
+
var _a;
|
|
93
|
+
if (!leftDrag)
|
|
94
|
+
return;
|
|
95
|
+
const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
|
|
96
|
+
if (sm
|
|
97
|
+
&& sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
|
|
98
|
+
&& sm.offset <= currentRightPos) {
|
|
99
|
+
setCurrentLeftPos(sm.offset);
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
document.addEventListener('mousemove', handlerMove);
|
|
103
|
+
return () => {
|
|
104
|
+
document.removeEventListener('mousemove', handlerMove);
|
|
105
|
+
};
|
|
106
|
+
}, [leftDrag, currentRightPos]);
|
|
107
|
+
React.useEffect(() => {
|
|
108
|
+
setCurrentLeftPos(initLeftPos);
|
|
109
|
+
}, [initLeftPos]);
|
|
110
|
+
// right handler
|
|
111
|
+
React.useEffect(() => {
|
|
112
|
+
const handlerMove = (e) => {
|
|
113
|
+
var _a;
|
|
114
|
+
if (!rightDrag)
|
|
115
|
+
return;
|
|
116
|
+
const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
|
|
117
|
+
if (sm
|
|
118
|
+
&& sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
|
|
119
|
+
&& sm.offset >= currentLeftPos) {
|
|
120
|
+
setCurrentRightPos(sm.offset);
|
|
121
|
+
}
|
|
122
|
+
};
|
|
123
|
+
document.addEventListener('mousemove', handlerMove);
|
|
124
|
+
return () => {
|
|
125
|
+
document.removeEventListener('mousemove', handlerMove);
|
|
126
|
+
};
|
|
127
|
+
}, [rightDrag, currentLeftPos]);
|
|
128
|
+
React.useEffect(() => {
|
|
129
|
+
setCurrentRightPos(initRightPos);
|
|
130
|
+
}, [initRightPos]);
|
|
131
|
+
// draw init left handler
|
|
132
|
+
React.useEffect(() => {
|
|
133
|
+
if (textDiv.current
|
|
134
|
+
&& textDiv.current.childNodes.length === 1
|
|
135
|
+
&& textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
|
|
136
|
+
const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
|
|
137
|
+
if (rect === null) {
|
|
138
|
+
setLeftHandler(null);
|
|
139
|
+
setRects(null);
|
|
140
|
+
}
|
|
141
|
+
else {
|
|
142
|
+
setLeftHandler({
|
|
143
|
+
height: rect.height,
|
|
144
|
+
left: rect.left,
|
|
145
|
+
top: rect.top,
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
}, [currentLeftPos]);
|
|
150
|
+
// draw init right handler
|
|
151
|
+
React.useEffect(() => {
|
|
152
|
+
if (textDiv.current
|
|
153
|
+
&& textDiv.current.childNodes.length === 1
|
|
154
|
+
&& textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
|
|
155
|
+
const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
|
|
156
|
+
if (rect === null) {
|
|
157
|
+
setRightHandler(null);
|
|
158
|
+
setRects(null);
|
|
159
|
+
}
|
|
160
|
+
else {
|
|
161
|
+
setRightHandler({
|
|
162
|
+
height: rect.height,
|
|
163
|
+
left: rect.left,
|
|
164
|
+
top: rect.top,
|
|
165
|
+
});
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
}, [currentRightPos]);
|
|
169
|
+
React.useEffect(() => {
|
|
170
|
+
var _a;
|
|
171
|
+
const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
|
|
172
|
+
if (n)
|
|
173
|
+
setRects(getAllRects(n, currentLeftPos, currentRightPos));
|
|
174
|
+
}, [currentLeftPos, currentRightPos]);
|
|
175
|
+
// return
|
|
176
|
+
return [textDiv, leftHandler, rightHandler, rects];
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
var _path$1;
|
|
180
|
+
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); }
|
|
181
|
+
var SvgQuoteLeft = function SvgQuoteLeft(props) {
|
|
182
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
|
|
183
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
184
|
+
width: 24,
|
|
185
|
+
height: 24
|
|
186
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
|
|
187
|
+
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"
|
|
188
|
+
})));
|
|
189
|
+
};
|
|
190
|
+
|
|
191
|
+
var _path;
|
|
192
|
+
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); }
|
|
193
|
+
var SvgQuoteRight = function SvgQuoteRight(props) {
|
|
194
|
+
return /*#__PURE__*/React__namespace.createElement("svg", _extends({
|
|
195
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
196
|
+
width: 24,
|
|
197
|
+
height: 24
|
|
198
|
+
}, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
|
|
199
|
+
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"
|
|
200
|
+
})));
|
|
201
|
+
};
|
|
202
|
+
|
|
203
|
+
const SelectionHandler = ({ pos, grab, setGrab, left }) => {
|
|
204
|
+
return (pos &&
|
|
205
|
+
React.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
|
|
206
|
+
position: 'absolute',
|
|
207
|
+
display: 'flex',
|
|
208
|
+
left: left ? pos.left - 24 : pos.left - 1,
|
|
209
|
+
top: pos.top,
|
|
210
|
+
width: '25px',
|
|
211
|
+
height: pos.height,
|
|
212
|
+
cursor: grab ? 'grabbing' : 'grab',
|
|
213
|
+
alignItems: left ? 'flex-start' : 'flex-end',
|
|
214
|
+
}, onMouseDown: () => {
|
|
215
|
+
setGrab(true);
|
|
216
|
+
const handler = () => {
|
|
217
|
+
setGrab(false);
|
|
218
|
+
document.removeEventListener('mouseup', handler);
|
|
219
|
+
};
|
|
220
|
+
document.addEventListener('mouseup', handler);
|
|
221
|
+
}, onMouseUp: () => {
|
|
222
|
+
setGrab(false);
|
|
223
|
+
} }, left
|
|
224
|
+
? React.createElement(SvgQuoteLeft, null)
|
|
225
|
+
: React.createElement(SvgQuoteRight, null)));
|
|
226
|
+
};
|
|
227
|
+
|
|
228
|
+
const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
|
|
229
|
+
const [mouseOnLeft, setMouseOnLeft] = React.useState(false);
|
|
230
|
+
const [mouseOnRight, setMouseOnRight] = React.useState(false);
|
|
231
|
+
const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
|
|
232
|
+
let divs = [];
|
|
233
|
+
if (rects) {
|
|
234
|
+
for (let i = 0; i < rects.length; ++i) {
|
|
235
|
+
const aa = rects.item(i);
|
|
236
|
+
if (aa)
|
|
237
|
+
divs.push(aa);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
return (React.createElement("div", { draggable: false, style: {
|
|
241
|
+
display: 'flex',
|
|
242
|
+
} },
|
|
243
|
+
divs.map((d, i) => React.createElement("div", { key: i, className: 'bg-yellow-300', style: {
|
|
244
|
+
userSelect: 'none',
|
|
245
|
+
position: 'absolute',
|
|
246
|
+
top: `${d.top}px`,
|
|
247
|
+
left: `${d.left}px`,
|
|
248
|
+
width: `${d.width}px`,
|
|
249
|
+
height: `${d.height}px`,
|
|
250
|
+
zIndex: -2,
|
|
251
|
+
} }, "\u00A0")),
|
|
252
|
+
React.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
|
|
253
|
+
React.createElement(TextContainer, { ref: textDiv }, children),
|
|
254
|
+
React.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
|
|
255
|
+
};
|
|
256
|
+
|
|
257
|
+
exports.FullWindow = FullWindow;
|
|
258
|
+
exports.TextSelectionZone = TextSelectionZone;
|
package/dist/esm/index.js
CHANGED
|
@@ -1,4 +1,237 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import React__default, { useState, useRef, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
const fullWindow = {
|
|
5
|
+
height: '100vh',
|
|
6
|
+
widows: '100%',
|
|
7
|
+
};
|
|
8
|
+
const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
|
|
9
|
+
const FullWindow = ({ children }) => {
|
|
10
|
+
return (React__default.createElement("div", { style: centroContainer }, children));
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const _TextContainer = ({ children }, ref) => {
|
|
14
|
+
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));
|
|
15
|
+
};
|
|
16
|
+
const TextContainer = React__default.forwardRef(_TextContainer);
|
|
17
|
+
|
|
18
|
+
const getHandlerRect = (index, node) => {
|
|
19
|
+
const range = document.createRange();
|
|
20
|
+
range.setStart(node, index);
|
|
21
|
+
range.setEnd(node, index);
|
|
22
|
+
const rects = range.getClientRects();
|
|
23
|
+
if (rects.length === 1) {
|
|
24
|
+
return rects[0];
|
|
25
|
+
}
|
|
26
|
+
return null;
|
|
27
|
+
};
|
|
28
|
+
const getAllRects = (node, start, end) => {
|
|
29
|
+
const range = document.createRange();
|
|
30
|
+
range.setStart(node, start);
|
|
31
|
+
range.setEnd(node, end);
|
|
32
|
+
return range.getClientRects();
|
|
33
|
+
};
|
|
34
|
+
const getNodeAndOffsetFromPoint = (x, y) => {
|
|
35
|
+
let range;
|
|
36
|
+
let textNode;
|
|
37
|
+
let offset;
|
|
38
|
+
if (document.caretPositionFromPoint) {
|
|
39
|
+
range = document.caretPositionFromPoint(x, y);
|
|
40
|
+
textNode = range.offsetNode;
|
|
41
|
+
offset = range.offset;
|
|
42
|
+
}
|
|
43
|
+
else if (document.caretRangeFromPoint) {
|
|
44
|
+
range = document.caretRangeFromPoint(x, y);
|
|
45
|
+
textNode = range.startContainer;
|
|
46
|
+
offset = range.startOffset;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
|
|
52
|
+
if (!Number.isNaN(offset)) {
|
|
53
|
+
return { node: textNode, offset };
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return null;
|
|
57
|
+
};
|
|
58
|
+
const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
|
|
59
|
+
// left handler pos
|
|
60
|
+
const [leftHandler, setLeftHandler] = useState(null);
|
|
61
|
+
const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
|
|
62
|
+
// right handler pos
|
|
63
|
+
const [rightHandler, setRightHandler] = useState(null);
|
|
64
|
+
const [currentRightPos, setCurrentRightPos] = useState(initRightPos);
|
|
65
|
+
const [rects, setRects] = useState(null);
|
|
66
|
+
// reference
|
|
67
|
+
const textDiv = useRef(null);
|
|
68
|
+
// mouse move handler
|
|
69
|
+
// left handler
|
|
70
|
+
useEffect(() => {
|
|
71
|
+
const handlerMove = (e) => {
|
|
72
|
+
var _a;
|
|
73
|
+
if (!leftDrag)
|
|
74
|
+
return;
|
|
75
|
+
const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
|
|
76
|
+
if (sm
|
|
77
|
+
&& sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
|
|
78
|
+
&& sm.offset <= currentRightPos) {
|
|
79
|
+
setCurrentLeftPos(sm.offset);
|
|
80
|
+
}
|
|
81
|
+
};
|
|
82
|
+
document.addEventListener('mousemove', handlerMove);
|
|
83
|
+
return () => {
|
|
84
|
+
document.removeEventListener('mousemove', handlerMove);
|
|
85
|
+
};
|
|
86
|
+
}, [leftDrag, currentRightPos]);
|
|
87
|
+
useEffect(() => {
|
|
88
|
+
setCurrentLeftPos(initLeftPos);
|
|
89
|
+
}, [initLeftPos]);
|
|
90
|
+
// right handler
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
const handlerMove = (e) => {
|
|
93
|
+
var _a;
|
|
94
|
+
if (!rightDrag)
|
|
95
|
+
return;
|
|
96
|
+
const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
|
|
97
|
+
if (sm
|
|
98
|
+
&& sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
|
|
99
|
+
&& sm.offset >= currentLeftPos) {
|
|
100
|
+
setCurrentRightPos(sm.offset);
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
document.addEventListener('mousemove', handlerMove);
|
|
104
|
+
return () => {
|
|
105
|
+
document.removeEventListener('mousemove', handlerMove);
|
|
106
|
+
};
|
|
107
|
+
}, [rightDrag, currentLeftPos]);
|
|
108
|
+
useEffect(() => {
|
|
109
|
+
setCurrentRightPos(initRightPos);
|
|
110
|
+
}, [initRightPos]);
|
|
111
|
+
// draw init left handler
|
|
112
|
+
useEffect(() => {
|
|
113
|
+
if (textDiv.current
|
|
114
|
+
&& textDiv.current.childNodes.length === 1
|
|
115
|
+
&& textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
|
|
116
|
+
const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
|
|
117
|
+
if (rect === null) {
|
|
118
|
+
setLeftHandler(null);
|
|
119
|
+
setRects(null);
|
|
120
|
+
}
|
|
121
|
+
else {
|
|
122
|
+
setLeftHandler({
|
|
123
|
+
height: rect.height,
|
|
124
|
+
left: rect.left,
|
|
125
|
+
top: rect.top,
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
}
|
|
129
|
+
}, [currentLeftPos]);
|
|
130
|
+
// draw init right handler
|
|
131
|
+
useEffect(() => {
|
|
132
|
+
if (textDiv.current
|
|
133
|
+
&& textDiv.current.childNodes.length === 1
|
|
134
|
+
&& textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
|
|
135
|
+
const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
|
|
136
|
+
if (rect === null) {
|
|
137
|
+
setRightHandler(null);
|
|
138
|
+
setRects(null);
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
setRightHandler({
|
|
142
|
+
height: rect.height,
|
|
143
|
+
left: rect.left,
|
|
144
|
+
top: rect.top,
|
|
145
|
+
});
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
}, [currentRightPos]);
|
|
149
|
+
useEffect(() => {
|
|
150
|
+
var _a;
|
|
151
|
+
const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
|
|
152
|
+
if (n)
|
|
153
|
+
setRects(getAllRects(n, currentLeftPos, currentRightPos));
|
|
154
|
+
}, [currentLeftPos, currentRightPos]);
|
|
155
|
+
// return
|
|
156
|
+
return [textDiv, leftHandler, rightHandler, rects];
|
|
157
|
+
};
|
|
158
|
+
|
|
159
|
+
var _path$1;
|
|
160
|
+
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); }
|
|
161
|
+
var SvgQuoteLeft = function SvgQuoteLeft(props) {
|
|
162
|
+
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
163
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
164
|
+
width: 24,
|
|
165
|
+
height: 24
|
|
166
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
167
|
+
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"
|
|
168
|
+
})));
|
|
169
|
+
};
|
|
170
|
+
|
|
171
|
+
var _path;
|
|
172
|
+
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); }
|
|
173
|
+
var SvgQuoteRight = function SvgQuoteRight(props) {
|
|
174
|
+
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
175
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
176
|
+
width: 24,
|
|
177
|
+
height: 24
|
|
178
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
179
|
+
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"
|
|
180
|
+
})));
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
const SelectionHandler = ({ pos, grab, setGrab, left }) => {
|
|
184
|
+
return (pos &&
|
|
185
|
+
React__default.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
|
|
186
|
+
position: 'absolute',
|
|
187
|
+
display: 'flex',
|
|
188
|
+
left: left ? pos.left - 24 : pos.left - 1,
|
|
189
|
+
top: pos.top,
|
|
190
|
+
width: '25px',
|
|
191
|
+
height: pos.height,
|
|
192
|
+
cursor: grab ? 'grabbing' : 'grab',
|
|
193
|
+
alignItems: left ? 'flex-start' : 'flex-end',
|
|
194
|
+
}, onMouseDown: () => {
|
|
195
|
+
setGrab(true);
|
|
196
|
+
const handler = () => {
|
|
197
|
+
setGrab(false);
|
|
198
|
+
document.removeEventListener('mouseup', handler);
|
|
199
|
+
};
|
|
200
|
+
document.addEventListener('mouseup', handler);
|
|
201
|
+
}, onMouseUp: () => {
|
|
202
|
+
setGrab(false);
|
|
203
|
+
} }, left
|
|
204
|
+
? React__default.createElement(SvgQuoteLeft, null)
|
|
205
|
+
: React__default.createElement(SvgQuoteRight, null)));
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
|
|
209
|
+
const [mouseOnLeft, setMouseOnLeft] = useState(false);
|
|
210
|
+
const [mouseOnRight, setMouseOnRight] = useState(false);
|
|
211
|
+
const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
|
|
212
|
+
let divs = [];
|
|
213
|
+
if (rects) {
|
|
214
|
+
for (let i = 0; i < rects.length; ++i) {
|
|
215
|
+
const aa = rects.item(i);
|
|
216
|
+
if (aa)
|
|
217
|
+
divs.push(aa);
|
|
218
|
+
}
|
|
219
|
+
}
|
|
220
|
+
return (React__default.createElement("div", { draggable: false, style: {
|
|
221
|
+
display: 'flex',
|
|
222
|
+
} },
|
|
223
|
+
divs.map((d, i) => React__default.createElement("div", { key: i, className: 'bg-yellow-300', style: {
|
|
224
|
+
userSelect: 'none',
|
|
225
|
+
position: 'absolute',
|
|
226
|
+
top: `${d.top}px`,
|
|
227
|
+
left: `${d.left}px`,
|
|
228
|
+
width: `${d.width}px`,
|
|
229
|
+
height: `${d.height}px`,
|
|
230
|
+
zIndex: -2,
|
|
231
|
+
} }, "\u00A0")),
|
|
232
|
+
React__default.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
|
|
233
|
+
React__default.createElement(TextContainer, { ref: textDiv }, children),
|
|
234
|
+
React__default.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
|
|
235
|
+
};
|
|
236
|
+
|
|
3
237
|
export { FullWindow, TextSelectionZone };
|
|
4
|
-
//# sourceMappingURL=index.js.map
|
package/dist/index.d.ts
ADDED
|
@@ -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.
|
|
3
|
+
"version": "1.0.3",
|
|
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
|
|
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
|
+
}
|
package/dist/cjs/FullWindow.js
DELETED
|
@@ -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"}
|
package/dist/cjs/handler-pos.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}
|
package/dist/cjs/index.js.map
DELETED
|
@@ -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"}
|
package/dist/cjs/quote-left.svg
DELETED
|
@@ -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>
|
package/dist/cjs/quote-right.svg
DELETED
|
@@ -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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"}
|
package/dist/esm/FullWindow.js
DELETED
|
@@ -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"}
|
package/dist/esm/handler-pos.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}
|
package/dist/esm/index.js.map
DELETED
|
@@ -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"}
|
package/dist/esm/quote-left.svg
DELETED
|
@@ -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>
|
package/dist/esm/quote-right.svg
DELETED
|
@@ -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
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|