react-text-range 1.0.16 → 1.0.17

package/README.md

@@ -8,24 +8,23 @@
 // ...
 import { TextContainer, RangeState, ReactTextRange } from "./ReactTextRange";
 
-const MyTextContainer: TextContainer = React.forwardRef(({ children }, ref) =>
-    <div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap">
-        {children}
-    </div>
+const MyTextContainer: TextContainer = React.forwardRef(({ }, ref) =>
+    <div ref={ref} className="text-2xl text-gray-300 w-80 bg-yellow-100 select-none p-5 whitespace-pre-wrap" />
 );
 
 const App: FunctionComponent = () => {
-    const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 37 })
+    const [myPos, setMyPos] = useState<RangeState>({ left: 23, right: 47 });
+
     return (
         <div style={{ margin: 20 }}>
-            <ReactTextRange initLeftPos={23} initRightPos={47}
+            <ReactTextRange initLeftPos={myPos.left} initRightPos={myPos.right}
                 Container={MyTextContainer} onChange={setMyPos}
                 handlerWidth={18}
-                selectionClass='bg-yellow-300 text-black'>{
-                    `Some text
+                selectionClass='bg-yellow-300 text-black'
+                text={`Some text
 or even some real good multiline text
 here and there`}
-            </ReactTextRange>
+            />
             <div>
                 <span>{myPos?.left}</span>
                 &nbsp;

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

@@ -8,10 +8,10 @@ export interface RangeState {
     right: number;
 }
 export declare const ReactTextRange: FC<{
+    text: string;
     initLeftPos: number;
     initRightPos: number;
     Container: TextContainer;
-    children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;

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

@@ -5,7 +5,7 @@ declare global {
         caretPositionFromPoint: any;
     }
 }
-export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
+export declare const useTextSelectionEditor: (text: string, initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
     React.MutableRefObject<HTMLDivElement | null>,
     HandlerPos | null,
     HandlerPos | null

package/dist/cjs/index.js

@@ -107,7 +107,7 @@ const getNodeAndOffsetFromPoint = (x, y) => {
     }
     return null;
 };
-const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
+const useTextSelectionEditor = (text, initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
     // left handler pos
     const [leftHandler, setLeftHandler] = React.useState(null);
     const [currentLeftPos, setCurrentLeftPos] = React.useState(initLeftPos);
@@ -120,10 +120,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         if (textDiv.current) {
             textDiv.current.style.position = 'relative';
         }
-    }, [textDiv]);
+    }, [textDiv.current]);
     // break text into three spans
     React.useLayoutEffect(() => {
         var _a, _b, _c;
+        if (!textDiv.current)
+            return;
+        // remove all nodes
+        while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
+            textDiv.current.removeChild(textDiv.current.lastChild);
+        }
+        const textNode = document.createTextNode(text);
+        textDiv.current.appendChild(textNode);
         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;
@@ -159,13 +167,12 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         tail.surroundContents(tailSpan);
         return () => {
             if (textDiv.current && textDiv.current.childNodes[0]) {
-                textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
-                while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
+                while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
                     textDiv.current.removeChild(textDiv.current.lastChild);
                 }
             }
         };
-    }, [textDiv.current]);
+    }, [text]);
     // mouse move handler
     // left handler
     const leftMoveHandler = React.useCallback((e) => {
@@ -192,7 +199,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
             nodeChild3.nodeValue = full.substring(posToSet);
             setCurrentLeftPos(posToSet);
         }
-    }, [currentLeftPos, textDiv.current]);
+    }, [currentLeftPos, textDiv.current, text]);
     React.useLayoutEffect(() => {
         if (!leftDrag) {
             document.removeEventListener('mousemove', leftMoveHandler);
@@ -203,7 +210,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         return () => {
             document.removeEventListener('mousemove', leftMoveHandler);
         };
-    }, [leftDrag, currentLeftPos, textDiv.current]);
+    }, [leftDrag, currentLeftPos, textDiv.current, text]);
     React.useLayoutEffect(() => {
         setCurrentLeftPos(initLeftPos);
     }, [initLeftPos]);
@@ -233,7 +240,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
             nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
             setCurrentRightPos(posToSet);
         }
-    }, [currentLeftPos, currentRightPos, textDiv.current]);
+    }, [currentLeftPos, currentRightPos, textDiv.current, text]);
     React.useLayoutEffect(() => {
         if (!rightDrag) {
             document.removeEventListener('mousemove', rightMoveHandler);
@@ -244,7 +251,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         return () => {
             document.removeEventListener('mousemove', rightMoveHandler);
         };
-    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
+    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current, text]);
     React.useLayoutEffect(() => {
         setCurrentRightPos(initRightPos);
     }, [initRightPos]);
@@ -368,10 +375,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, width, className }) => {
             : React.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, text, 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] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
+    const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(text, initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
     React.useEffect(() => {
         if (leftHandler && rightHandler) {
             onChange({
@@ -381,7 +388,7 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
         }
     }, [leftHandler, rightHandler]);
     return (React.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React.createElement(Container, { ref: textDiv }, children),
+        React.createElement(Container, { ref: textDiv }, text),
         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) })));
 };

package/dist/esm/ReactTextRange.d.ts

@@ -8,10 +8,10 @@ export interface RangeState {
     right: number;
 }
 export declare const ReactTextRange: FC<{
+    text: string;
     initLeftPos: number;
     initRightPos: number;
     Container: TextContainer;
-    children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;

package/dist/esm/index.js

@@ -87,7 +87,7 @@ const getNodeAndOffsetFromPoint = (x, y) => {
     }
     return null;
 };
-const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
+const useTextSelectionEditor = (text, initLeftPos, initRightPos, leftDrag, rightDrag, headClass, selectionClass, tailClass) => {
     // left handler pos
     const [leftHandler, setLeftHandler] = useState(null);
     const [currentLeftPos, setCurrentLeftPos] = useState(initLeftPos);
@@ -100,10 +100,18 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         if (textDiv.current) {
             textDiv.current.style.position = 'relative';
         }
-    }, [textDiv]);
+    }, [textDiv.current]);
     // break text into three spans
     useLayoutEffect(() => {
         var _a, _b, _c;
+        if (!textDiv.current)
+            return;
+        // remove all nodes
+        while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
+            textDiv.current.removeChild(textDiv.current.lastChild);
+        }
+        const textNode = document.createTextNode(text);
+        textDiv.current.appendChild(textNode);
         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;
@@ -139,13 +147,12 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         tail.surroundContents(tailSpan);
         return () => {
             if (textDiv.current && textDiv.current.childNodes[0]) {
-                textDiv.current.childNodes[0].nodeValue = textDiv.current.textContent;
-                while (textDiv.current.childNodes.length > 1 && textDiv.current.lastChild) {
+                while (textDiv.current.childNodes.length > 0 && textDiv.current.lastChild) {
                     textDiv.current.removeChild(textDiv.current.lastChild);
                 }
             }
         };
-    }, [textDiv.current]);
+    }, [text]);
     // mouse move handler
     // left handler
     const leftMoveHandler = useCallback((e) => {
@@ -172,7 +179,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
             nodeChild3.nodeValue = full.substring(posToSet);
             setCurrentLeftPos(posToSet);
         }
-    }, [currentLeftPos, textDiv.current]);
+    }, [currentLeftPos, textDiv.current, text]);
     useLayoutEffect(() => {
         if (!leftDrag) {
             document.removeEventListener('mousemove', leftMoveHandler);
@@ -183,7 +190,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         return () => {
             document.removeEventListener('mousemove', leftMoveHandler);
         };
-    }, [leftDrag, currentLeftPos, textDiv.current]);
+    }, [leftDrag, currentLeftPos, textDiv.current, text]);
     useLayoutEffect(() => {
         setCurrentLeftPos(initLeftPos);
     }, [initLeftPos]);
@@ -213,7 +220,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
             nodeChild5.nodeValue = full.substring(posToSet - currentLeftPos);
             setCurrentRightPos(posToSet);
         }
-    }, [currentLeftPos, currentRightPos, textDiv.current]);
+    }, [currentLeftPos, currentRightPos, textDiv.current, text]);
     useLayoutEffect(() => {
         if (!rightDrag) {
             document.removeEventListener('mousemove', rightMoveHandler);
@@ -224,7 +231,7 @@ const useTextSelectionEditor = (initLeftPos, initRightPos, leftDrag, rightDrag,
         return () => {
             document.removeEventListener('mousemove', rightMoveHandler);
         };
-    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current]);
+    }, [rightDrag, currentLeftPos, currentRightPos, textDiv.current, text]);
     useLayoutEffect(() => {
         setCurrentRightPos(initRightPos);
     }, [initRightPos]);
@@ -348,10 +355,10 @@ const SelectionHandler = ({ pos, grab, setGrab, left, width, className }) => {
             : React__default.createElement(SvgQuoteRight, null)));
 };
 
-const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
+const ReactTextRange = ({ initLeftPos, initRightPos, Container, text, onChange, props, handlerWidth, className, leftHandlerClass, rightHandlerClass, headClass, selectionClass, tailClass, }) => {
     const [mouseOnLeft, setMouseOnLeft] = useState(false);
     const [mouseOnRight, setMouseOnRight] = useState(false);
-    const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
+    const [textDiv, leftHandler, rightHandler] = useTextSelectionEditor(text, initLeftPos, initRightPos, mouseOnLeft, mouseOnRight, headClass, selectionClass, tailClass);
     useEffect(() => {
         if (leftHandler && rightHandler) {
             onChange({
@@ -361,7 +368,7 @@ const ReactTextRange = ({ initLeftPos, initRightPos, Container, children, onChan
         }
     }, [leftHandler, rightHandler]);
     return (React__default.createElement("div", { className: className, draggable: false, style: Object.assign({ position: 'relative' }, props) },
-        React__default.createElement(Container, { ref: textDiv }, children),
+        React__default.createElement(Container, { ref: textDiv }, text),
         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) })));
 };

package/dist/esm/useTextSelectionEditor.d.ts

@@ -5,7 +5,7 @@ declare global {
         caretPositionFromPoint: any;
     }
 }
-export declare const useTextSelectionEditor: (initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
+export declare const useTextSelectionEditor: (text: string, initLeftPos: number, initRightPos: number, leftDrag: boolean, rightDrag: boolean, headClass?: string, selectionClass?: string, tailClass?: string) => [
     React.MutableRefObject<HTMLDivElement | null>,
     HandlerPos | null,
     HandlerPos | null

package/dist/index.d.ts

@@ -8,10 +8,10 @@ interface RangeState {
     right: number;
 }
 declare const ReactTextRange: FC<{
+    text: string;
     initLeftPos: number;
     initRightPos: number;
     Container: TextContainer;
-    children: string;
     onChange: (state: RangeState) => void;
     props?: React.CSSProperties;
     className?: string;

package/package.json

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