react-text-range 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2023, Aleksandr Novikov <yetanothervan@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# react-text-range

package/dist/cjs/FullWindow.d.ts

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+export declare const FullWindow: FC<{
+    children: React.ReactNode;
+}>;
+export default FullWindow;

package/dist/cjs/FullWindow.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FullWindow = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const fullWindow = {
+    height: '100vh',
+    widows: '100%',
+};
+const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
+const FullWindow = ({ children }) => {
+    return (react_1.default.createElement("div", { style: centroContainer }, children));
+};
+exports.FullWindow = FullWindow;
+exports.default = exports.FullWindow;
+//# sourceMappingURL=FullWindow.js.map

package/dist/cjs/FullWindow.js.map

@@ -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"}

package/dist/cjs/SelectionHandler.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { HandlerPos } from './handler-pos';
+export declare const SelectionHandler: FC<{
+    pos: HandlerPos | null;
+    grab: boolean;
+    setGrab: (value: boolean) => void;
+    left: boolean;
+}>;

package/dist/cjs/SelectionHandler.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SelectionHandler = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const quote_left_svg_1 = require("../assets/quote-left.svg");
+const quote_right_svg_1 = require("../assets/quote-right.svg");
+const SelectionHandler = ({ pos, grab, setGrab, left }) => {
+    return (pos &&
+        react_1.default.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+                position: 'absolute',
+                display: 'flex',
+                left: left ? pos.left - 24 : pos.left - 1,
+                top: pos.top,
+                width: '25px',
+                height: pos.height,
+                cursor: grab ? 'grabbing' : 'grab',
+                alignItems: left ? 'flex-start' : 'flex-end',
+            }, onMouseDown: () => {
+                setGrab(true);
+                const handler = () => {
+                    setGrab(false);
+                    document.removeEventListener('mouseup', handler);
+                };
+                document.addEventListener('mouseup', handler);
+            }, onMouseUp: () => {
+                setGrab(false);
+            } }, left
+            ? react_1.default.createElement(quote_left_svg_1.ReactComponent, null)
+            : react_1.default.createElement(quote_right_svg_1.ReactComponent, null)));
+};
+exports.SelectionHandler = SelectionHandler;
+//# sourceMappingURL=SelectionHandler.js.map

package/dist/cjs/SelectionHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionHandler.js","sourceRoot":"","sources":["../../src/SelectionHandler.tsx"],"names":[],"mappings":";;;;AAAA,0DAAkC;AAElC,6DAAuE;AACvE,+DAAyE;AAElE,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,+BAAS,OAAG;YACf,CAAC,CAAC,8BAAC,gCAAU,OAAG,CACd,CACP,CAAC;AACJ,CAAC,CAAC;AAtCW,QAAA,gBAAgB,oBAsC3B"}

package/dist/cjs/TextContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TextContainer: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/TextContainer.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextContainer = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const _TextContainer = ({ children }, ref) => {
+    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));
+};
+exports.TextContainer = react_1.default.forwardRef(_TextContainer);
+//# sourceMappingURL=TextContainer.js.map

package/dist/cjs/TextContainer.js.map

@@ -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"}

package/dist/cjs/TextSelectionZone.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const TextSelectionZone: FC<{
+    initLeftPos: number;
+    initRightPos: number;
+    children: string;
+}>;
+export default TextSelectionZone;

package/dist/cjs/TextSelectionZone.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextSelectionZone = void 0;
+const tslib_1 = require("tslib");
+const react_1 = require("react");
+const TextContainer_1 = require("./TextContainer");
+const useTextSelectionEditor_1 = require("./useTextSelectionEditor");
+const SelectionHandler_1 = require("./SelectionHandler");
+const react_2 = tslib_1.__importDefault(require("react"));
+const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
+    const [mouseOnLeft, setMouseOnLeft] = (0, react_1.useState)(false);
+    const [mouseOnRight, setMouseOnRight] = (0, react_1.useState)(false);
+    const [textDiv, leftHandler, rightHandler, rects] = (0, useTextSelectionEditor_1.useTextSelectionEditor)(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
+    let divs = [];
+    if (rects) {
+        for (let i = 0; i < rects.length; ++i) {
+            const aa = rects.item(i);
+            if (aa)
+                divs.push(aa);
+        }
+    }
+    return (react_2.default.createElement("div", { draggable: false, style: {
+            display: 'flex',
+        } },
+        divs.map((d, i) => react_2.default.createElement("div", { key: i, className: 'bg-yellow-300', style: {
+                userSelect: 'none',
+                position: 'absolute',
+                top: `${d.top}px`,
+                left: `${d.left}px`,
+                width: `${d.width}px`,
+                height: `${d.height}px`,
+                zIndex: -2,
+            } }, "\u00A0")),
+        react_2.default.createElement(SelectionHandler_1.SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
+        react_2.default.createElement(TextContainer_1.TextContainer, { ref: textDiv }, children),
+        react_2.default.createElement(SelectionHandler_1.SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
+};
+exports.TextSelectionZone = TextSelectionZone;
+exports.default = exports.TextSelectionZone;
+//# sourceMappingURL=TextSelectionZone.js.map

package/dist/cjs/TextSelectionZone.js.map

@@ -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.d.ts

@@ -0,0 +1,5 @@
+export interface HandlerPos {
+    left: number;
+    top: number;
+    height: number;
+}

package/dist/cjs/handler-pos.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=handler-pos.js.map

package/dist/cjs/handler-pos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}

package/dist/cjs/index.d.ts

@@ -0,0 +1,3 @@
+import FullWindow from "./FullWindow";
+import TextSelectionZone from "./TextSelectionZone";
+export { FullWindow, TextSelectionZone };

package/dist/cjs/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextSelectionZone = exports.FullWindow = void 0;
+const tslib_1 = require("tslib");
+const FullWindow_1 = tslib_1.__importDefault(require("./FullWindow"));
+exports.FullWindow = FullWindow_1.default;
+const TextSelectionZone_1 = tslib_1.__importDefault(require("./TextSelectionZone"));
+exports.TextSelectionZone = TextSelectionZone_1.default;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -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/useTextSelectionEditor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HandlerPos } from './handler-pos';
+declare global {
+    interface Document {
+        caretPositionFromPoint: any;
+    }
+}
+export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean) => [
+    React.MutableRefObject<HTMLDivElement | null>,
+    HandlerPos | null,
+    HandlerPos | null,
+    DOMRectList | null
+];

package/dist/cjs/useTextSelectionEditor.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTextSelectionEditor = void 0;
+const react_1 = require("react");
+const getHandlerRect = (index, node) => {
+    const range = document.createRange();
+    range.setStart(node, index);
+    range.setEnd(node, index);
+    const rects = range.getClientRects();
+    if (rects.length === 1) {
+        return rects[0];
+    }
+    return null;
+};
+const getAllRects = (node, start, end) => {
+    const range = document.createRange();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range.getClientRects();
+};
+const getNodeAndOffsetFromPoint = (x, y) => {
+    let range;
+    let textNode;
+    let offset;
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(x, y);
+        textNode = range.offsetNode;
+        offset = range.offset;
+    }
+    else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(x, y);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+    else {
+        return null;
+    }
+    if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
+        if (!Number.isNaN(offset)) {
+            return { node: textNode, offset };
+        }
+    }
+    return null;
+};
+const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
+    // left handler pos
+    const [leftHandler, setLeftHandler] = (0, react_1.useState)(null);
+    const [currentLeftPos, setCurrentLeftPos] = (0, react_1.useState)(initLeftPos);
+    // right handler pos
+    const [rightHandler, setRightHandler] = (0, react_1.useState)(null);
+    const [currentRightPos, setCurrentRightPos] = (0, react_1.useState)(initRightPos);
+    const [rects, setRects] = (0, react_1.useState)(null);
+    // reference
+    const textDiv = (0, react_1.useRef)(null);
+    // mouse move handler
+    // left handler
+    (0, react_1.useEffect)(() => {
+        const handlerMove = (e) => {
+            var _a;
+            if (!leftDrag)
+                return;
+            const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+            if (sm
+                && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
+                && sm.offset <= currentRightPos) {
+                setCurrentLeftPos(sm.offset);
+            }
+        };
+        document.addEventListener('mousemove', handlerMove);
+        return () => {
+            document.removeEventListener('mousemove', handlerMove);
+        };
+    }, [leftDrag, currentRightPos]);
+    (0, react_1.useEffect)(() => {
+        setCurrentLeftPos(initLeftPos);
+    }, [initLeftPos]);
+    // right handler
+    (0, react_1.useEffect)(() => {
+        const handlerMove = (e) => {
+            var _a;
+            if (!rightDrag)
+                return;
+            const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+            if (sm
+                && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
+                && sm.offset >= currentLeftPos) {
+                setCurrentRightPos(sm.offset);
+            }
+        };
+        document.addEventListener('mousemove', handlerMove);
+        return () => {
+            document.removeEventListener('mousemove', handlerMove);
+        };
+    }, [rightDrag, currentLeftPos]);
+    (0, react_1.useEffect)(() => {
+        setCurrentRightPos(initRightPos);
+    }, [initRightPos]);
+    // draw init left handler
+    (0, react_1.useEffect)(() => {
+        if (textDiv.current
+            && textDiv.current.childNodes.length === 1
+            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
+            const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
+            if (rect === null) {
+                setLeftHandler(null);
+                setRects(null);
+            }
+            else {
+                setLeftHandler({
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                });
+            }
+        }
+    }, [currentLeftPos]);
+    // draw init right handler
+    (0, react_1.useEffect)(() => {
+        if (textDiv.current
+            && textDiv.current.childNodes.length === 1
+            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
+            const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
+            if (rect === null) {
+                setRightHandler(null);
+                setRects(null);
+            }
+            else {
+                setRightHandler({
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                });
+            }
+        }
+    }, [currentRightPos]);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
+        if (n)
+            setRects(getAllRects(n, currentLeftPos, currentRightPos));
+    }, [currentLeftPos, currentRightPos]);
+    // return
+    return [textDiv, leftHandler, rightHandler, rects];
+};
+exports.useTextSelectionEditor = useTextSelectionEditor;
+//# sourceMappingURL=useTextSelectionEditor.js.map

package/dist/cjs/useTextSelectionEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextSelectionEditor.js","sourceRoot":"","sources":["../../src/useTextSelectionEditor.tsx"],"names":[],"mappings":"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"}

package/dist/esm/FullWindow.d.ts

@@ -0,0 +1,5 @@
+import React, { FC } from 'react';
+export declare const FullWindow: FC<{
+    children: React.ReactNode;
+}>;
+export default FullWindow;

package/dist/esm/FullWindow.js

@@ -0,0 +1,11 @@
+import React from 'react';
+const fullWindow = {
+    height: '100vh',
+    widows: '100%',
+};
+const centroContainer = Object.assign(Object.assign({}, fullWindow), { display: 'flex', alignItems: 'center', justifyContent: 'center', flexDirection: 'column' });
+export const FullWindow = ({ children }) => {
+    return (React.createElement("div", { style: centroContainer }, children));
+};
+export default FullWindow;
+//# sourceMappingURL=FullWindow.js.map

package/dist/esm/FullWindow.js.map

@@ -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"}

package/dist/esm/SelectionHandler.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { HandlerPos } from './handler-pos';
+export declare const SelectionHandler: FC<{
+    pos: HandlerPos | null;
+    grab: boolean;
+    setGrab: (value: boolean) => void;
+    left: boolean;
+}>;

package/dist/esm/SelectionHandler.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ReactComponent as QuoteLeft } from "../assets/quote-left.svg";
+import { ReactComponent as QuoteRight } from "../assets/quote-right.svg";
+export const SelectionHandler = ({ pos, grab, setGrab, left }) => {
+    return (pos &&
+        React.createElement("div", { draggable: false, className: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+                position: 'absolute',
+                display: 'flex',
+                left: left ? pos.left - 24 : pos.left - 1,
+                top: pos.top,
+                width: '25px',
+                height: pos.height,
+                cursor: grab ? 'grabbing' : 'grab',
+                alignItems: left ? 'flex-start' : 'flex-end',
+            }, onMouseDown: () => {
+                setGrab(true);
+                const handler = () => {
+                    setGrab(false);
+                    document.removeEventListener('mouseup', handler);
+                };
+                document.addEventListener('mouseup', handler);
+            }, onMouseUp: () => {
+                setGrab(false);
+            } }, left
+            ? React.createElement(QuoteLeft, null)
+            : React.createElement(QuoteRight, null)));
+};
+//# sourceMappingURL=SelectionHandler.js.map

package/dist/esm/SelectionHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionHandler.js","sourceRoot":"","sources":["../../src/SelectionHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAC;AAElC,OAAO,EAAE,cAAc,IAAI,SAAS,EAAE,MAAM,0BAA0B,CAAC;AACvE,OAAO,EAAE,cAAc,IAAI,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEzE,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"}

package/dist/esm/TextContainer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TextContainer: React.ForwardRefExoticComponent<{
+    children: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/TextContainer.js

@@ -0,0 +1,6 @@
+import React from 'react';
+const _TextContainer = ({ children }, ref) => {
+    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));
+};
+export const TextContainer = React.forwardRef(_TextContainer);
+//# sourceMappingURL=TextContainer.js.map

package/dist/esm/TextContainer.js.map

@@ -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"}

package/dist/esm/TextSelectionZone.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export declare const TextSelectionZone: FC<{
+    initLeftPos: number;
+    initRightPos: number;
+    children: string;
+}>;
+export default TextSelectionZone;

package/dist/esm/TextSelectionZone.js

@@ -0,0 +1,35 @@
+import { useState } from 'react';
+import { TextContainer } from './TextContainer';
+import { useTextSelectionEditor } from './useTextSelectionEditor';
+import { SelectionHandler } from './SelectionHandler';
+import React from 'react';
+export const TextSelectionZone = ({ initLeftPos, initRightPos, children, }) => {
+    const [mouseOnLeft, setMouseOnLeft] = useState(false);
+    const [mouseOnRight, setMouseOnRight] = useState(false);
+    const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
+    let divs = [];
+    if (rects) {
+        for (let i = 0; i < rects.length; ++i) {
+            const aa = rects.item(i);
+            if (aa)
+                divs.push(aa);
+        }
+    }
+    return (React.createElement("div", { draggable: false, style: {
+            display: 'flex',
+        } },
+        divs.map((d, i) => React.createElement("div", { key: i, className: 'bg-yellow-300', style: {
+                userSelect: 'none',
+                position: 'absolute',
+                top: `${d.top}px`,
+                left: `${d.left}px`,
+                width: `${d.width}px`,
+                height: `${d.height}px`,
+                zIndex: -2,
+            } }, "\u00A0")),
+        React.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
+        React.createElement(TextContainer, { ref: textDiv }, children),
+        React.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
+};
+export default TextSelectionZone;
+//# sourceMappingURL=TextSelectionZone.js.map

package/dist/esm/TextSelectionZone.js.map

@@ -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.d.ts

@@ -0,0 +1,5 @@
+export interface HandlerPos {
+    left: number;
+    top: number;
+    height: number;
+}

package/dist/esm/handler-pos.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=handler-pos.js.map

package/dist/esm/handler-pos.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"handler-pos.js","sourceRoot":"","sources":["../../src/handler-pos.ts"],"names":[],"mappings":""}

package/dist/esm/index.d.ts

@@ -0,0 +1,3 @@
+import FullWindow from "./FullWindow";
+import TextSelectionZone from "./TextSelectionZone";
+export { FullWindow, TextSelectionZone };

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+import FullWindow from "./FullWindow";
+import TextSelectionZone from "./TextSelectionZone";
+export { FullWindow, TextSelectionZone };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -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/useTextSelectionEditor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { HandlerPos } from './handler-pos';
+declare global {
+    interface Document {
+        caretPositionFromPoint: any;
+    }
+}
+export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean) => [
+    React.MutableRefObject<HTMLDivElement | null>,
+    HandlerPos | null,
+    HandlerPos | null,
+    DOMRectList | null
+];

package/dist/esm/useTextSelectionEditor.js

@@ -0,0 +1,142 @@
+import { useEffect, useRef, useState } from 'react';
+const getHandlerRect = (index, node) => {
+    const range = document.createRange();
+    range.setStart(node, index);
+    range.setEnd(node, index);
+    const rects = range.getClientRects();
+    if (rects.length === 1) {
+        return rects[0];
+    }
+    return null;
+};
+const getAllRects = (node, start, end) => {
+    const range = document.createRange();
+    range.setStart(node, start);
+    range.setEnd(node, end);
+    return range.getClientRects();
+};
+const getNodeAndOffsetFromPoint = (x, y) => {
+    let range;
+    let textNode;
+    let offset;
+    if (document.caretPositionFromPoint) {
+        range = document.caretPositionFromPoint(x, y);
+        textNode = range.offsetNode;
+        offset = range.offset;
+    }
+    else if (document.caretRangeFromPoint) {
+        range = document.caretRangeFromPoint(x, y);
+        textNode = range.startContainer;
+        offset = range.startOffset;
+    }
+    else {
+        return null;
+    }
+    if ((textNode === null || textNode === void 0 ? void 0 : textNode.nodeType) === document.TEXT_NODE) {
+        if (!Number.isNaN(offset)) {
+            return { node: textNode, offset };
+        }
+    }
+    return null;
+};
+export const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
+    // left handler pos
+    const [leftHandler, setLeftHandler] = useState(null);
+    const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
+    // right handler pos
+    const [rightHandler, setRightHandler] = useState(null);
+    const [currentRightPos, setCurrentRightPos] = useState(initRightPos);
+    const [rects, setRects] = useState(null);
+    // reference
+    const textDiv = useRef(null);
+    // mouse move handler
+    // left handler
+    useEffect(() => {
+        const handlerMove = (e) => {
+            var _a;
+            if (!leftDrag)
+                return;
+            const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+            if (sm
+                && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
+                && sm.offset <= currentRightPos) {
+                setCurrentLeftPos(sm.offset);
+            }
+        };
+        document.addEventListener('mousemove', handlerMove);
+        return () => {
+            document.removeEventListener('mousemove', handlerMove);
+        };
+    }, [leftDrag, currentRightPos]);
+    useEffect(() => {
+        setCurrentLeftPos(initLeftPos);
+    }, [initLeftPos]);
+    // right handler
+    useEffect(() => {
+        const handlerMove = (e) => {
+            var _a;
+            if (!rightDrag)
+                return;
+            const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+            if (sm
+                && sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0])
+                && sm.offset >= currentLeftPos) {
+                setCurrentRightPos(sm.offset);
+            }
+        };
+        document.addEventListener('mousemove', handlerMove);
+        return () => {
+            document.removeEventListener('mousemove', handlerMove);
+        };
+    }, [rightDrag, currentLeftPos]);
+    useEffect(() => {
+        setCurrentRightPos(initRightPos);
+    }, [initRightPos]);
+    // draw init left handler
+    useEffect(() => {
+        if (textDiv.current
+            && textDiv.current.childNodes.length === 1
+            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
+            const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
+            if (rect === null) {
+                setLeftHandler(null);
+                setRects(null);
+            }
+            else {
+                setLeftHandler({
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                });
+            }
+        }
+    }, [currentLeftPos]);
+    // draw init right handler
+    useEffect(() => {
+        if (textDiv.current
+            && textDiv.current.childNodes.length === 1
+            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
+            const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
+            if (rect === null) {
+                setRightHandler(null);
+                setRects(null);
+            }
+            else {
+                setRightHandler({
+                    height: rect.height,
+                    left: rect.left,
+                    top: rect.top,
+                });
+            }
+        }
+    }, [currentRightPos]);
+    useEffect(() => {
+        var _a;
+        const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
+        if (n)
+            setRects(getAllRects(n, currentLeftPos, currentRightPos));
+    }, [currentLeftPos, currentRightPos]);
+    // return
+    return [textDiv, leftHandler, rightHandler, rects];
+};
+//# sourceMappingURL=useTextSelectionEditor.js.map

package/dist/esm/useTextSelectionEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTextSelectionEditor.js","sourceRoot":"","sources":["../../src/useTextSelectionEditor.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-text-range",
+  "version": "1.0.0",
+  "description": "text selection editor for React",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "scripts": {
+    "build:esm": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build": "npm run build:esm && npm run build:cjs",
+    "test": "jest --config jestconfig.json",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm test"
+  },
+  "keywords": [
+    "react",
+    "text",
+    "selection",
+    "range",
+    "editor"
+  ],
+  "author": "Aleksandr Novikov (yetanothervan)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yetanothervan/react-text-range.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.24",
+    "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "ts-jest": "^29.1.1",
+    "tslib": "^2.6.2",
+    "typescript": "^5.2.2"
+  }
+}