react-text-range 1.0.10 → 1.0.12

package/README.md

@@ -1,6 +1,6 @@
 # react-text-range
 
-![cast](https://github.com/yetanothervan/react-text-range/assets/5338279/a6b79ef7-3cc1-4724-9ac4-1163e2f26fc1)
+![cast2](https://github.com/yetanothervan/react-text-range/assets/5338279/f5977266-4de9-412f-8f8c-e7639e8d6bc8)
 
 ## using
 
@@ -9,14 +9,7 @@
 import { TextContainer, RangeState, ReactTextRange } from "./ReactTextRange";
 
 const MyTextContainer: TextContainer = React.forwardRef(({ children }, ref) =>
-    <div ref={ref} style={{
-        fontSize: 24,
-        width: '320px',
-        backgroundColor: 'rgba(253, 224, 71, .2)',
-        userSelect: 'none',
-        padding: '20px',
-        whiteSpace: 'pre-wrap',
-    }}>
+    <div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap">
         {children}
     </div>
 );
@@ -27,7 +20,8 @@ const App: FunctionComponent = () => {
         <div style={{ margin: 20 }}>
             <ReactTextRange initLeftPos={23} initRightPos={47}
                 Container={MyTextContainer} onChange={setMyPos}
-                selectionColor='yellow' handlerWidth={18}>{
+                handlerWidth={18}
+                selectionClass='bg-yellow-300 text-black'>{
                     `Some text
 or even some real good multiline text
 here and there`}
@@ -41,3 +35,5 @@ here and there`}
     )
 }
 ```
+
+You can set selectionClass, headClass, tailClass, leftHandlerClass and RightHandlerClass in ReactTextRange

package/dist/cjs/esm/ReactTextRange.d.ts

@@ -15,7 +15,11 @@ export declare const ReactTextRange: FC<{
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;
-    selectionColor?: string;
     handlerWidth?: number;
+    leftHandlerClass?: string;
+    rightHandlerClass?: string;
+    headClass?: string;
+    selectionClass?: string;
+    tailClass?: string;
 }>;
 export default ReactTextRange;

package/dist/cjs/esm/SelectionHandler.d.ts

@@ -8,4 +8,5 @@ export declare const SelectionHandler: FC<{
     left: boolean;
     bgColor?: string;
     width?: number;
+    className?: string;
 }>;

package/dist/cjs/esm/useTextSelectionEditor.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { HandlerPos } from './handler-pos';
-import { Rect } from './rect';
 declare global {
     interface Document {
         caretPositionFromPoint: any;
     }
 }
-export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean) => [
+export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
     React.MutableRefObject<HTMLDivElement | null>,
     HandlerPos | null,
-    HandlerPos | null,
-    Rect[] | null
+    HandlerPos | null
 ];

package/dist/cjs/index.js

@@ -21,27 +21,53 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const getHandlerRect = (index, node) => {
-    const range = document.createRange();
-    range.setStart(node, index);
-    range.setEnd(node, index);
-    if (range.getClientRects) {
-        const rects = range.getClientRects();
-        if (rects.length >= 1) {
-            return rects[0];
+const getHandlerRect = (node, left) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!node || !node.childNodes || node.childNodes.length != 6)
+        return null;
+    const headLength = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length;
+    const selLength = (_d = (_c = node.childNodes[3].firstChild) === null || _c === void 0 ? void 0 : _c.nodeValue) === null || _d === void 0 ? void 0 : _d.length;
+    const tailLength = (_f = (_e = node.childNodes[5].firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) === null || _f === void 0 ? void 0 : _f.length;
+    if (left) {
+        const range = document.createRange();
+        if (selLength > 0) {
+            range.selectNodeContents(node.childNodes[3]);
         }
-    }
-    return null;
-};
-const getAllRects = (node, start, end) => {
-    const range = document.createRange();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    if (range.getClientRects) {
-        return range.getClientRects();
+        else if (tailLength > 0) {
+            range.selectNodeContents(node.childNodes[5]);
+        }
+        else {
+            range.setStart(node.childNodes[1].childNodes[0], headLength);
+            range.setEnd(node.childNodes[1].childNodes[0], headLength);
+        }
+        if (range.getClientRects) {
+            const rects = range.getClientRects();
+            if (rects.length >= 1) {
+                return rects[0];
+            }
+        }
+        return null;
     }
     else {
-        return new DOMRectList();
+        const range = document.createRange();
+        if (tailLength > 0) {
+            range.selectNodeContents(node.childNodes[5]);
+        }
+        else if (selLength > 0) {
+            range.setStart(node.childNodes[3].childNodes[0], selLength);
+            range.setEnd(node.childNodes[3].childNodes[0], selLength);
+        }
+        else {
+            range.setStart(node.childNodes[1].childNodes[0], headLength);
+            range.setEnd(node.childNodes[1].childNodes[0], headLength);
+        }
+        if (range.getClientRects) {
+            const rects = range.getClientRects();
+            if (rects.length >= 1) {
+                return rects[0];
+            }
+        }
+        return null;
     }
 };
 const getNodeAndOffsetFromPoint = (x, y) => {
@@ -70,73 +96,145 @@ const getNodeAndOffsetFromPoint = (x, y) => {
     }
     return null;
 };
-const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
+const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
     // left handler pos
     const [leftHandler, setLeftHandler] = React.useState(null);
     const [currentLeftPos, setCurrentLeftPos] = React.useState(initLeftPos);
     // right handler pos
     const [rightHandler, setRightHandler] = React.useState(null);
     const [currentRightPos, setCurrentRightPos] = React.useState(initRightPos);
-    const [rects, setRects] = React.useState(null);
     // reference
     const textDiv = React.useRef(null);
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         if (textDiv.current) {
             textDiv.current.style.position = 'relative';
         }
     }, [textDiv]);
-    // mouse move handler
-    // left handler
-    React.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);
+    // break text into three spans
+    React.useLayoutEffect(() => {
+        var _a, _b, _c;
+        let textLeftNode = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
+        if (!textLeftNode || textLeftNode.nodeType !== document.TEXT_NODE || textLeftNode.nodeValue === null) {
+            return;
+        }
+        const head = document.createRange();
+        head.setStart(textLeftNode, 0);
+        head.setEnd(textLeftNode, currentLeftPos);
+        const headSpan = document.createElement('span');
+        if (headClass)
+            headSpan.classList.value = headClass;
+        head.surroundContents(headSpan);
+        textLeftNode = (_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[2];
+        if (!textLeftNode
+            || !textLeftNode.nodeValue
+            || textLeftNode.nodeValue.length < currentRightPos - currentLeftPos)
+            return;
+        const selection = document.createRange();
+        selection.setStart(textLeftNode, 0);
+        selection.setEnd(textLeftNode, currentRightPos - currentLeftPos);
+        const selectionSpan = document.createElement('span');
+        if (selectionClass)
+            selectionSpan.classList.value = selectionClass;
+        selection.surroundContents(selectionSpan);
+        textLeftNode = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[4];
+        if (!textLeftNode)
+            return;
+        const tail = document.createRange();
+        tail.setStart(textLeftNode, 0);
+        tail.setEndAfter(textLeftNode);
+        const tailSpan = document.createElement('span');
+        if (tailClass)
+            tailSpan.classList.value = tailClass;
+        tail.surroundContents(tailSpan);
+        return () => {
+            if (textDiv.current) {
+                textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
+                while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
+                    textDiv.current.removeChild(textDiv.current.lastChild);
+                }
             }
         };
-        document.addEventListener('mousemove', handlerMove);
+    }, [textDiv.current]);
+    // mouse move handler
+    // left handler
+    const leftMoveHandler = React.useCallback((e) => {
+        var _a, _b;
+        const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+        if (!sm)
+            return;
+        let posToSet = currentLeftPos;
+        if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
+            posToSet = sm.offset;
+        }
+        else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
+            posToSet = currentLeftPos + sm.offset;
+        }
+        if (posToSet !== currentLeftPos) {
+            const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
+            const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
+            const full = headText + selText;
+            textDiv.current.childNodes[1].firstChild.nodeValue = full.substring(0, posToSet);
+            textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(posToSet);
+            setCurrentLeftPos(posToSet);
+        }
+    }, [currentLeftPos, textDiv.current]);
+    React.useLayoutEffect(() => {
+        if (!leftDrag) {
+            document.removeEventListener('mousemove', leftMoveHandler);
+        }
+        else {
+            document.addEventListener('mousemove', leftMoveHandler);
+        }
         return () => {
-            document.removeEventListener('mousemove', handlerMove);
+            document.removeEventListener('mousemove', leftMoveHandler);
         };
-    }, [leftDrag, currentRightPos]);
-    React.useEffect(() => {
+    }, [leftDrag, currentLeftPos, textDiv.current]);
+    React.useLayoutEffect(() => {
         setCurrentLeftPos(initLeftPos);
     }, [initLeftPos]);
     // right handler
-    React.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);
+    const rightMoveHandler = React.useCallback((e) => {
+        var _a, _b;
+        const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+        if (!sm)
+            return;
+        let posToSet = currentRightPos;
+        if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
+            posToSet = currentLeftPos + sm.offset;
+        }
+        else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[5].firstChild)) {
+            posToSet = currentRightPos + sm.offset;
+        }
+        if (posToSet !== currentRightPos) {
+            const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
+            const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
+            const full = selText + tailText;
+            textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(0, posToSet - currentLeftPos);
+            textDiv.current.childNodes[5].firstChild.nodeValue = full.substring(posToSet - currentLeftPos);
+            setCurrentRightPos(posToSet);
+        }
+    }, [currentLeftPos, currentRightPos, textDiv.current]);
+    React.useLayoutEffect(() => {
+        if (!rightDrag) {
+            document.removeEventListener('mousemove', rightMoveHandler);
+        }
+        else {
+            document.addEventListener('mousemove', rightMoveHandler);
+        }
         return () => {
-            document.removeEventListener('mousemove', handlerMove);
+            document.removeEventListener('mousemove', rightMoveHandler);
         };
-    }, [rightDrag, currentLeftPos]);
-    React.useEffect(() => {
+    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
+    React.useLayoutEffect(() => {
         setCurrentRightPos(initRightPos);
     }, [initRightPos]);
     // draw init left handler
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         if (textDiv.current
-            && textDiv.current.childNodes.length === 1
-            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
-            const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
+            && textDiv.current.childNodes.length === 6) {
+            const rect = getHandlerRect(textDiv.current, true);
             if (rect === null) {
                 setLeftHandler(null);
-                setRects(null);
             }
             else {
                 const divRect = textDiv.current.getBoundingClientRect();
@@ -150,14 +248,12 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag)
         }
     }, [currentLeftPos]);
     // draw init right handler
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
         if (textDiv.current
-            && textDiv.current.childNodes.length === 1
-            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
-            const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
+            && textDiv.current.childNodes.length === 6) {
+            const rect = getHandlerRect(textDiv.current, false);
             if (rect === null) {
                 setRightHandler(null);
-                setRects(null);
             }
             else {
                 const divRect = textDiv.current.getBoundingClientRect();
@@ -170,32 +266,8 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag)
             }
         }
     }, [currentRightPos]);
-    React.useEffect(() => {
-        var _a;
-        const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
-        if (!n) {
-            setRects(null);
-            return;
-        }
-        const rawRects = getAllRects(n, currentLeftPos, currentRightPos);
-        let rectArray = [];
-        if (rawRects && textDiv.current) {
-            const divRect = textDiv.current.getBoundingClientRect();
-            for (let i = 0; i < rawRects.length; ++i) {
-                const aa = rawRects.item(i);
-                if (aa)
-                    rectArray.push({
-                        height: aa.height,
-                        left: aa.left - divRect.left,
-                        top: aa.top - divRect.top,
-                        width: aa.width,
-                    });
-            }
-        }
-        setRects(rectArray);
-    }, [currentLeftPos, currentRightPos]);
     // return
-    return [textDiv, leftHandler, rightHandler, rects];
+    return [textDiv, leftHandler, rightHandler];
 };
 
 var _path$1;
@@ -247,14 +319,14 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}";
+var css_248z = "/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.w-80{width:20rem}.select-none{user-select:none}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}";
 styleInject(css_248z,{"insertAt":"top"});
 
-const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
+const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width, className }) => {
     const bgColorDef = bgColor !== null && bgColor !== void 0 ? bgColor : 'rgb(253 224 71)';
     const widthDef = width !== null && width !== void 0 ? width : 25;
     return (pos &&
-        React.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+        React.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'} ${className}`, style: {
                 position: 'absolute',
                 display: 'flex',
                 left: left ? pos.left - (widthDef - 1) : pos.left - 1,
@@ -264,8 +336,6 @@ const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
                 cursor: grab ? 'grabbing' : 'grab',
                 alignItems: left ? 'flex-start' : 'flex-end',
                 backgroundColor: bgColorDef,
-                opacity: .8,
-                // transform: 'scale(.5)'
             }, onMouseDown: () => {
                 setGrab(true);
                 const handler = () => {
@@ -280,10 +350,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
             : React.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, selectionColor, handlerWidth, className, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
     const [mouseOnLeft, setMouseOnLeft] = React.useState(false);
     const [mouseOnRight, setMouseOnRight] = React.useState(false);
-    const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
+    const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
     React.useEffect(() => {
         if (leftHandler && rightHandler) {
             onChange({
@@ -292,29 +362,10 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
             });
         }
     }, [leftHandler, rightHandler]);
-    const bgColor = selectionColor;
     return (React.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React.createElement(SelectionRects, { rects: rects, bgColor: bgColor }),
         React.createElement(Container, { ref: textDiv }, children),
-        React.createElement(SelectionHandler, { bgColor: bgColor, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
-        React.createElement(SelectionHandler, { bgColor: bgColor, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
-};
-const SelectionRects = ({ rects, bgColor }) => {
-    if (!rects)
-        return null;
-    return (React.createElement(React.Fragment, null, rects.map((d, i) => React.createElement(SelectionRect, { key: i, rect: d, bgColor: bgColor }))));
-};
-const SelectionRect = ({ rect, bgColor }) => {
-    const bgColorDef = bgColor !== null && bgColor !== void 0 ? bgColor : 'rgb(253 224 71)';
-    return (React.createElement("div", { style: {
-            userSelect: 'none',
-            position: 'absolute',
-            top: `${rect.top}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`,
-            backgroundColor: bgColorDef,
-        } }, "\u00A0"));
+        React.createElement(SelectionHandler, { className: leftHandlerClass, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
+        React.createElement(SelectionHandler, { className: rightHandlerClass, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
 };
 
 exports.ReactTextRange = ReactTextRange;

package/dist/esm/ReactTextRange.d.ts

@@ -15,7 +15,11 @@ export declare const ReactTextRange: FC<{
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;
-    selectionColor?: string;
     handlerWidth?: number;
+    leftHandlerClass?: string;
+    rightHandlerClass?: string;
+    headClass?: string;
+    selectionClass?: string;
+    tailClass?: string;
 }>;
 export default ReactTextRange;

package/dist/esm/SelectionHandler.d.ts

@@ -8,4 +8,5 @@ export declare const SelectionHandler: FC<{
     left: boolean;
     bgColor?: string;
     width?: number;
+    className?: string;
 }>;

package/dist/esm/index.js

@@ -1,27 +1,53 @@
 import * as React from 'react';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React__default, { useState, useRef, useLayoutEffect, useCallback, useEffect } from 'react';
 
-const getHandlerRect = (index, node) => {
-    const range = document.createRange();
-    range.setStart(node, index);
-    range.setEnd(node, index);
-    if (range.getClientRects) {
-        const rects = range.getClientRects();
-        if (rects.length >= 1) {
-            return rects[0];
+const getHandlerRect = (node, left) => {
+    var _a, _b, _c, _d, _e, _f;
+    if (!node || !node.childNodes || node.childNodes.length != 6)
+        return null;
+    const headLength = (_b = (_a = node.childNodes[1].firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue) === null || _b === void 0 ? void 0 : _b.length;
+    const selLength = (_d = (_c = node.childNodes[3].firstChild) === null || _c === void 0 ? void 0 : _c.nodeValue) === null || _d === void 0 ? void 0 : _d.length;
+    const tailLength = (_f = (_e = node.childNodes[5].firstChild) === null || _e === void 0 ? void 0 : _e.nodeValue) === null || _f === void 0 ? void 0 : _f.length;
+    if (left) {
+        const range = document.createRange();
+        if (selLength > 0) {
+            range.selectNodeContents(node.childNodes[3]);
         }
-    }
-    return null;
-};
-const getAllRects = (node, start, end) => {
-    const range = document.createRange();
-    range.setStart(node, start);
-    range.setEnd(node, end);
-    if (range.getClientRects) {
-        return range.getClientRects();
+        else if (tailLength > 0) {
+            range.selectNodeContents(node.childNodes[5]);
+        }
+        else {
+            range.setStart(node.childNodes[1].childNodes[0], headLength);
+            range.setEnd(node.childNodes[1].childNodes[0], headLength);
+        }
+        if (range.getClientRects) {
+            const rects = range.getClientRects();
+            if (rects.length >= 1) {
+                return rects[0];
+            }
+        }
+        return null;
     }
     else {
-        return new DOMRectList();
+        const range = document.createRange();
+        if (tailLength > 0) {
+            range.selectNodeContents(node.childNodes[5]);
+        }
+        else if (selLength > 0) {
+            range.setStart(node.childNodes[3].childNodes[0], selLength);
+            range.setEnd(node.childNodes[3].childNodes[0], selLength);
+        }
+        else {
+            range.setStart(node.childNodes[1].childNodes[0], headLength);
+            range.setEnd(node.childNodes[1].childNodes[0], headLength);
+        }
+        if (range.getClientRects) {
+            const rects = range.getClientRects();
+            if (rects.length >= 1) {
+                return rects[0];
+            }
+        }
+        return null;
     }
 };
 const getNodeAndOffsetFromPoint = (x, y) => {
@@ -50,73 +76,145 @@ const getNodeAndOffsetFromPoint = (x, y) => {
     }
     return null;
 };
-const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag) => {
+const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
     // 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);
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (textDiv.current) {
             textDiv.current.style.position = 'relative';
         }
     }, [textDiv]);
-    // 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);
+    // break text into three spans
+    useLayoutEffect(() => {
+        var _a, _b, _c;
+        let textLeftNode = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
+        if (!textLeftNode || textLeftNode.nodeType !== document.TEXT_NODE || textLeftNode.nodeValue === null) {
+            return;
+        }
+        const head = document.createRange();
+        head.setStart(textLeftNode, 0);
+        head.setEnd(textLeftNode, currentLeftPos);
+        const headSpan = document.createElement('span');
+        if (headClass)
+            headSpan.classList.value = headClass;
+        head.surroundContents(headSpan);
+        textLeftNode = (_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[2];
+        if (!textLeftNode
+            || !textLeftNode.nodeValue
+            || textLeftNode.nodeValue.length < currentRightPos - currentLeftPos)
+            return;
+        const selection = document.createRange();
+        selection.setStart(textLeftNode, 0);
+        selection.setEnd(textLeftNode, currentRightPos - currentLeftPos);
+        const selectionSpan = document.createElement('span');
+        if (selectionClass)
+            selectionSpan.classList.value = selectionClass;
+        selection.surroundContents(selectionSpan);
+        textLeftNode = (_c = textDiv.current) === null || _c === void 0 ? void 0 : _c.childNodes[4];
+        if (!textLeftNode)
+            return;
+        const tail = document.createRange();
+        tail.setStart(textLeftNode, 0);
+        tail.setEndAfter(textLeftNode);
+        const tailSpan = document.createElement('span');
+        if (tailClass)
+            tailSpan.classList.value = tailClass;
+        tail.surroundContents(tailSpan);
+        return () => {
+            if (textDiv.current) {
+                textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
+                while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
+                    textDiv.current.removeChild(textDiv.current.lastChild);
+                }
             }
         };
-        document.addEventListener('mousemove', handlerMove);
+    }, [textDiv.current]);
+    // mouse move handler
+    // left handler
+    const leftMoveHandler = useCallback((e) => {
+        var _a, _b;
+        const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+        if (!sm)
+            return;
+        let posToSet = currentLeftPos;
+        if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[1].firstChild)) {
+            posToSet = sm.offset;
+        }
+        else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[3].firstChild)) {
+            posToSet = currentLeftPos + sm.offset;
+        }
+        if (posToSet !== currentLeftPos) {
+            const headText = textDiv.current.childNodes[1].firstChild.nodeValue;
+            const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
+            const full = headText + selText;
+            textDiv.current.childNodes[1].firstChild.nodeValue = full.substring(0, posToSet);
+            textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(posToSet);
+            setCurrentLeftPos(posToSet);
+        }
+    }, [currentLeftPos, textDiv.current]);
+    useLayoutEffect(() => {
+        if (!leftDrag) {
+            document.removeEventListener('mousemove', leftMoveHandler);
+        }
+        else {
+            document.addEventListener('mousemove', leftMoveHandler);
+        }
         return () => {
-            document.removeEventListener('mousemove', handlerMove);
+            document.removeEventListener('mousemove', leftMoveHandler);
         };
-    }, [leftDrag, currentRightPos]);
-    useEffect(() => {
+    }, [leftDrag, currentLeftPos, textDiv.current]);
+    useLayoutEffect(() => {
         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);
+    const rightMoveHandler = useCallback((e) => {
+        var _a, _b;
+        const sm = getNodeAndOffsetFromPoint(e.clientX, e.clientY);
+        if (!sm)
+            return;
+        let posToSet = currentRightPos;
+        if (sm.node === ((_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[3].firstChild)) {
+            posToSet = currentLeftPos + sm.offset;
+        }
+        else if (sm.node === ((_b = textDiv.current) === null || _b === void 0 ? void 0 : _b.childNodes[5].firstChild)) {
+            posToSet = currentRightPos + sm.offset;
+        }
+        if (posToSet !== currentRightPos) {
+            const selText = textDiv.current.childNodes[3].firstChild.nodeValue;
+            const tailText = textDiv.current.childNodes[5].firstChild.nodeValue;
+            const full = selText + tailText;
+            textDiv.current.childNodes[3].firstChild.nodeValue = full.substring(0, posToSet - currentLeftPos);
+            textDiv.current.childNodes[5].firstChild.nodeValue = full.substring(posToSet - currentLeftPos);
+            setCurrentRightPos(posToSet);
+        }
+    }, [currentLeftPos, currentRightPos, textDiv.current]);
+    useLayoutEffect(() => {
+        if (!rightDrag) {
+            document.removeEventListener('mousemove', rightMoveHandler);
+        }
+        else {
+            document.addEventListener('mousemove', rightMoveHandler);
+        }
         return () => {
-            document.removeEventListener('mousemove', handlerMove);
+            document.removeEventListener('mousemove', rightMoveHandler);
         };
-    }, [rightDrag, currentLeftPos]);
-    useEffect(() => {
+    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
+    useLayoutEffect(() => {
         setCurrentRightPos(initRightPos);
     }, [initRightPos]);
     // draw init left handler
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (textDiv.current
-            && textDiv.current.childNodes.length === 1
-            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
-            const rect = getHandlerRect(currentLeftPos, textDiv.current.childNodes[0]);
+            && textDiv.current.childNodes.length === 6) {
+            const rect = getHandlerRect(textDiv.current, true);
             if (rect === null) {
                 setLeftHandler(null);
-                setRects(null);
             }
             else {
                 const divRect = textDiv.current.getBoundingClientRect();
@@ -130,14 +228,12 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag)
         }
     }, [currentLeftPos]);
     // draw init right handler
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (textDiv.current
-            && textDiv.current.childNodes.length === 1
-            && textDiv.current.childNodes[0].nodeType === document.TEXT_NODE) {
-            const rect = getHandlerRect(currentRightPos, textDiv.current.childNodes[0]);
+            && textDiv.current.childNodes.length === 6) {
+            const rect = getHandlerRect(textDiv.current, false);
             if (rect === null) {
                 setRightHandler(null);
-                setRects(null);
             }
             else {
                 const divRect = textDiv.current.getBoundingClientRect();
@@ -150,32 +246,8 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag)
             }
         }
     }, [currentRightPos]);
-    useEffect(() => {
-        var _a;
-        const n = (_a = textDiv.current) === null || _a === void 0 ? void 0 : _a.childNodes[0];
-        if (!n) {
-            setRects(null);
-            return;
-        }
-        const rawRects = getAllRects(n, currentLeftPos, currentRightPos);
-        let rectArray = [];
-        if (rawRects && textDiv.current) {
-            const divRect = textDiv.current.getBoundingClientRect();
-            for (let i = 0; i < rawRects.length; ++i) {
-                const aa = rawRects.item(i);
-                if (aa)
-                    rectArray.push({
-                        height: aa.height,
-                        left: aa.left - divRect.left,
-                        top: aa.top - divRect.top,
-                        width: aa.width,
-                    });
-            }
-        }
-        setRects(rectArray);
-    }, [currentLeftPos, currentRightPos]);
     // return
-    return [textDiv, leftHandler, rightHandler, rects];
+    return [textDiv, leftHandler, rightHandler];
 };
 
 var _path$1;
@@ -227,14 +299,14 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}";
+var css_248z = "/*! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:\"\"}html{-webkit-text-size-adjust:100%;font-feature-settings:normal;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.flex{display:flex}.w-80{width:20rem}.select-none{user-select:none}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-l-md{border-bottom-left-radius:.375rem;border-top-left-radius:.375rem}.rounded-r-md{border-bottom-right-radius:.375rem;border-top-right-radius:.375rem}.bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 249 195/var(--tw-bg-opacity))}.bg-yellow-300{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity))}.p-5{padding:1.25rem}.text-2xl{font-size:1.5rem;line-height:2rem}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}";
 styleInject(css_248z,{"insertAt":"top"});
 
-const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
+const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width, className }) => {
     const bgColorDef = bgColor !== null && bgColor !== void 0 ? bgColor : 'rgb(253 224 71)';
     const widthDef = width !== null && width !== void 0 ? width : 25;
     return (pos &&
-        React__default.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+        React__default.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'} ${className}`, style: {
                 position: 'absolute',
                 display: 'flex',
                 left: left ? pos.left - (widthDef - 1) : pos.left - 1,
@@ -244,8 +316,6 @@ const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
                 cursor: grab ? 'grabbing' : 'grab',
                 alignItems: left ? 'flex-start' : 'flex-end',
                 backgroundColor: bgColorDef,
-                opacity: .8,
-                // transform: 'scale(.5)'
             }, onMouseDown: () => {
                 setGrab(true);
                 const handler = () => {
@@ -260,10 +330,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
             : React__default.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, selectionColor, handlerWidth, className, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
     const [mouseOnLeft, setMouseOnLeft] = useState(false);
     const [mouseOnRight, setMouseOnRight] = useState(false);
-    const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
+    const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
     useEffect(() => {
         if (leftHandler && rightHandler) {
             onChange({
@@ -272,29 +342,10 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
             });
         }
     }, [leftHandler, rightHandler]);
-    const bgColor = selectionColor;
     return (React__default.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React__default.createElement(SelectionRects, { rects: rects, bgColor: bgColor }),
         React__default.createElement(Container, { ref: textDiv }, children),
-        React__default.createElement(SelectionHandler, { bgColor: bgColor, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
-        React__default.createElement(SelectionHandler, { bgColor: bgColor, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
-};
-const SelectionRects = ({ rects, bgColor }) => {
-    if (!rects)
-        return null;
-    return (React__default.createElement(React__default.Fragment, null, rects.map((d, i) => React__default.createElement(SelectionRect, { key: i, rect: d, bgColor: bgColor }))));
-};
-const SelectionRect = ({ rect, bgColor }) => {
-    const bgColorDef = bgColor !== null && bgColor !== void 0 ? bgColor : 'rgb(253 224 71)';
-    return (React__default.createElement("div", { style: {
-            userSelect: 'none',
-            position: 'absolute',
-            top: `${rect.top}px`,
-            left: `${rect.left}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`,
-            backgroundColor: bgColorDef,
-        } }, "\u00A0"));
+        React__default.createElement(SelectionHandler, { className: leftHandlerClass, width: handlerWidth, grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
+        React__default.createElement(SelectionHandler, { className: rightHandlerClass, width: handlerWidth, grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
 };
 
 export { ReactTextRange };

package/dist/esm/useTextSelectionEditor.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 import { HandlerPos } from './handler-pos';
-import { Rect } from './rect';
 declare global {
     interface Document {
         caretPositionFromPoint: any;
     }
 }
-export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean) => [
+export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
     React.MutableRefObject<HTMLDivElement | null>,
     HandlerPos | null,
-    HandlerPos | null,
-    Rect[] | null
+    HandlerPos | null
 ];

package/dist/index.d.ts

@@ -15,8 +15,12 @@ declare const ReactTextRange: FC<{
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;
-    selectionColor?: string;
     handlerWidth?: number;
+    leftHandlerClass?: string;
+    rightHandlerClass?: string;
+    headClass?: string;
+    selectionClass?: string;
+    tailClass?: string;
 }>;
 
 export { type RangeState, ReactTextRange, type TextContainer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-text-range",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "text selection editor for React",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",