react-text-range 1.0.8 → 1.0.9

package/README.md

@@ -1,5 +1,7 @@
 # react-text-range
 
+![cast](https://github.com/yetanothervan/react-text-range/assets/5338279/a6b79ef7-3cc1-4724-9ac4-1163e2f26fc1)
+
 ## using
 
 ```js
@@ -8,11 +10,12 @@ import { TextContainer, RangeState, ReactTextRange } from "./ReactTextRange";
 
 const MyTextContainer: TextContainer = React.forwardRef(({ children }, ref) =>
     <div ref={ref} style={{
-        fontSize: 30,
+        fontSize: 24,
         width: '320px',
         backgroundColor: 'rgba(253, 224, 71, .2)',
         userSelect: 'none',
         padding: '20px',
+        whiteSpace: 'pre-wrap',
     }}>
         {children}
     </div>
@@ -22,9 +25,12 @@ const App: FunctionComponent = () => {
     const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 37 })
     return (
         <div style={{ margin: 20 }}>
-            <ReactTextRange initLeftPos={23} initRightPos={37}
-                Container={MyTextContainer} onChange={setMyPos}>
-                Some text or even some real good text here and there and here again
+            <ReactTextRange initLeftPos={23} initRightPos={47}
+                Container={MyTextContainer} onChange={setMyPos}
+                selectionColor='yellow' handlerWidth={18}>{
+                    `Some text
+or even some real good multiline text
+here and there`}
             </ReactTextRange>
             <div>
                 <span>{myPos?.left}</span>

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

@@ -14,5 +14,7 @@ export declare const ReactTextRange: FC<{
     children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
+    selectionColor?: string;
+    handlerWidth?: number;
 }>;
 export default ReactTextRange;

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

@@ -6,4 +6,6 @@ export declare const SelectionHandler: FC<{
     grab: boolean;
     setGrab: (value: boolean) => void;
     left: boolean;
+    bgColor?: string;
+    width?: number;
 }>;

package/dist/cjs/index.js

@@ -27,7 +27,7 @@ const getHandlerRect = (index, node) => {
     range.setEnd(node, index);
     if (range.getClientRects) {
         const rects = range.getClientRects();
-        if (rects.length === 1) {
+        if (rects.length >= 1) {
             return rects[0];
         }
     }
@@ -203,8 +203,7 @@ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : func
 var SvgQuoteLeft = function SvgQuoteLeft(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    viewBox: "0 0 24 24"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M13 14.725C13 9.584 16.892 4.206 23 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 24 16.021C24 19.203 21.416 21 18.801 21 15.786 21 13 18.695 13 14.725zm-13 0C0 9.584 3.892 4.206 10 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 11 16.021C11 19.203 8.416 21 5.801 21 2.786 21 0 18.695 0 14.725z"
   })));
@@ -215,8 +214,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var SvgQuoteRight = function SvgQuoteRight(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    viewBox: "0 0 24 24"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M11 9.275C11 14.416 7.108 19.794 1 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 0 7.979C0 4.797 2.584 3 5.199 3 8.214 3 11 5.305 11 9.275zm13 0C24 14.416 20.108 19.794 14 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 13 7.979C13 4.797 15.584 3 18.199 3 21.214 3 24 5.305 24 9.275z"
   })));
@@ -249,20 +247,25 @@ 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}.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-300{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity))}.opacity-80{opacity:.8}";
+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}";
 styleInject(css_248z,{"insertAt":"top"});
 
-const SelectionHandler = ({ pos, grab, setGrab, left }) => {
+const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
+    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: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+        React.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
                 position: 'absolute',
                 display: 'flex',
-                left: left ? pos.left - 24 : pos.left - 1,
+                left: left ? pos.left - (widthDef - 1) : pos.left - 1,
                 top: pos.top,
-                width: '25px',
+                width: `${widthDef}px`,
                 height: pos.height,
                 cursor: grab ? 'grabbing' : 'grab',
                 alignItems: left ? 'flex-start' : 'flex-end',
+                backgroundColor: bgColorDef,
+                opacity: .8,
+                // transform: 'scale(.5)'
             }, onMouseDown: () => {
                 setGrab(true);
                 const handler = () => {
@@ -277,7 +280,7 @@ const SelectionHandler = ({ pos, grab, setGrab, left }) => {
             : React.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, selectionColor, handlerWidth, }) => {
     const [mouseOnLeft, setMouseOnLeft] = React.useState(false);
     const [mouseOnRight, setMouseOnRight] = React.useState(false);
     const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
@@ -289,25 +292,28 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
             });
         }
     }, [leftHandler, rightHandler]);
+    const bgColor = selectionColor;
     return (React.createElement("div", { draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React.createElement(SelectionRects, { rects: rects }),
+        React.createElement(SelectionRects, { rects: rects, bgColor: bgColor }),
         React.createElement(Container, { ref: textDiv }, children),
-        React.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
-        React.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
+        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 }) => {
+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 }))));
+    return (React.createElement(React.Fragment, null, rects.map((d, i) => React.createElement(SelectionRect, { key: i, rect: d, bgColor: bgColor }))));
 };
-const SelectionRect = ({ rect }) => {
-    return (React.createElement("div", { className: 'bg-yellow-300', style: {
+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"));
 };
 

package/dist/cjs/server.js

@@ -0,0 +1,6 @@
+var connect = require('connect');
+var serveStatic = require('serve-static');
+
+connect()
+    .use(serveStatic(__dirname))
+    .listen(3005, () => console.log('Client running on 3005...'));

package/dist/esm/ReactTextRange.d.ts

@@ -14,5 +14,7 @@ export declare const ReactTextRange: FC<{
     children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
+    selectionColor?: string;
+    handlerWidth?: number;
 }>;
 export default ReactTextRange;

package/dist/esm/SelectionHandler.d.ts

@@ -6,4 +6,6 @@ export declare const SelectionHandler: FC<{
     grab: boolean;
     setGrab: (value: boolean) => void;
     left: boolean;
+    bgColor?: string;
+    width?: number;
 }>;

package/dist/esm/index.js

@@ -7,7 +7,7 @@ const getHandlerRect = (index, node) => {
     range.setEnd(node, index);
     if (range.getClientRects) {
         const rects = range.getClientRects();
-        if (rects.length === 1) {
+        if (rects.length >= 1) {
             return rects[0];
         }
     }
@@ -183,8 +183,7 @@ function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : func
 var SvgQuoteLeft = function SvgQuoteLeft(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    viewBox: "0 0 24 24"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     d: "M13 14.725C13 9.584 16.892 4.206 23 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 24 16.021C24 19.203 21.416 21 18.801 21 15.786 21 13 18.695 13 14.725zm-13 0C0 9.584 3.892 4.206 10 3l.984 2.126c-2.215.835-4.163 3.742-4.38 5.746A5.213 5.213 0 0 1 11 16.021C11 19.203 8.416 21 5.801 21 2.786 21 0 18.695 0 14.725z"
   })));
@@ -195,8 +194,7 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var SvgQuoteRight = function SvgQuoteRight(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24
+    viewBox: "0 0 24 24"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     d: "M11 9.275C11 14.416 7.108 19.794 1 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 0 7.979C0 4.797 2.584 3 5.199 3 8.214 3 11 5.305 11 9.275zm13 0C24 14.416 20.108 19.794 14 21l-.984-2.126c2.215-.835 4.163-3.742 4.38-5.746A5.213 5.213 0 0 1 13 7.979C13 4.797 15.584 3 18.199 3 21.214 3 24 5.305 24 9.275z"
   })));
@@ -229,20 +227,25 @@ 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}.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-300{--tw-bg-opacity:1;background-color:rgb(253 224 71/var(--tw-bg-opacity))}.opacity-80{opacity:.8}";
+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}";
 styleInject(css_248z,{"insertAt":"top"});
 
-const SelectionHandler = ({ pos, grab, setGrab, left }) => {
+const SelectionHandler = ({ pos, grab, setGrab, left, bgColor, width }) => {
+    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: `bg-yellow-300 opacity-80 ${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
+        React__default.createElement("div", { draggable: false, className: `${left ? 'rounded-l-md' : 'rounded-r-md'}`, style: {
                 position: 'absolute',
                 display: 'flex',
-                left: left ? pos.left - 24 : pos.left - 1,
+                left: left ? pos.left - (widthDef - 1) : pos.left - 1,
                 top: pos.top,
-                width: '25px',
+                width: `${widthDef}px`,
                 height: pos.height,
                 cursor: grab ? 'grabbing' : 'grab',
                 alignItems: left ? 'flex-start' : 'flex-end',
+                backgroundColor: bgColorDef,
+                opacity: .8,
+                // transform: 'scale(.5)'
             }, onMouseDown: () => {
                 setGrab(true);
                 const handler = () => {
@@ -257,7 +260,7 @@ const SelectionHandler = ({ pos, grab, setGrab, left }) => {
             : React__default.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, selectionColor, handlerWidth, }) => {
     const [mouseOnLeft, setMouseOnLeft] = useState(false);
     const [mouseOnRight, setMouseOnRight] = useState(false);
     const [textDiv, leftHandler, rightHandler, rects] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight);
@@ -269,25 +272,28 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
             });
         }
     }, [leftHandler, rightHandler]);
+    const bgColor = selectionColor;
     return (React__default.createElement("div", { draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React__default.createElement(SelectionRects, { rects: rects }),
+        React__default.createElement(SelectionRects, { rects: rects, bgColor: bgColor }),
         React__default.createElement(Container, { ref: textDiv }, children),
-        React__default.createElement(SelectionHandler, { grab: mouseOnLeft, left: true, pos: leftHandler, setGrab: (v) => setMouseOnLeft(v) }),
-        React__default.createElement(SelectionHandler, { grab: mouseOnRight, left: false, pos: rightHandler, setGrab: (v) => setMouseOnRight(v) })));
+        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 }) => {
+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 }))));
+    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 }) => {
-    return (React__default.createElement("div", { className: 'bg-yellow-300', style: {
+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"));
 };
 

package/dist/index.d.ts

@@ -14,6 +14,8 @@ declare const ReactTextRange: FC<{
     children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
+    selectionColor?: string;
+    handlerWidth?: number;
 }>;
 
 export { type RangeState, ReactTextRange, type TextContainer };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-text-range",
-  "version": "1.0.8",
+  "version": "1.0.9",
   "description": "text selection editor for React",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "scripts": {
-    "build:sample": "rollup -c && cp ./src/server.js ./dist/cjs && cp ./src/index.html ./dist/cjs",
+    "build:sample": "rollup --config rollup-sample.config.mjs && cp ./src/server.js ./dist/cjs && cp ./src/index.html ./dist/cjs",
     "build": "rollup -c",
     "test": "jest --config jestconfig.json",
     "prepare": "npm run build",

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

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

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

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

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

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import React from 'react';
-export type TextContainer = React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const ReactTextRange: FC<{
-    initLeftPos: number;
-    initRightPos: number;
-    Container: TextContainer;
-    children: string;
-}>;
-export default ReactTextRange;

package/dist/esm/FullWindow.d.ts

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

package/dist/esm/TextContainer.d.ts

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

package/dist/esm/TextSelectionZone.d.ts

@@ -1,12 +0,0 @@
-import { FC } from 'react';
-import React from 'react';
-export type TextContainer = React.ForwardRefExoticComponent<{
-    children: React.ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
-export declare const ReactTextRange: FC<{
-    initLeftPos: number;
-    initRightPos: number;
-    Container: TextContainer;
-    children: string;
-}>;
-export default ReactTextRange;

package/dist/esm/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-</head>
-
-<body>
-    <div id="root"></div>
-    <script type="module" src="/index.js"></script>
-</body>
-
-</body>
-
-</html>