Add selectionStart / selectionEnd getter to handle

Author: inokawa

src/textarea.tsx

@@ -121,6 +121,8 @@ export type CaretPosition = {
 
 export type RichTextareaHandle = {
   textareaRef: React.RefObject<HTMLTextAreaElement>;
+  selectionStart: number;
+  selectionEnd: number;
   setRangeText: (
     text: string,
     start: number,
@@ -168,6 +170,12 @@ export const RichTextarea = forwardRef<RichTextareaHandle, RichTextareaProps>(
       propRef,
       () => ({
         textareaRef: ref,
+        get selectionStart() {
+          return ref.current?.selectionStart ?? 0;
+        },
+        get selectionEnd() {
+          return ref.current?.selectionEnd ?? 0;
+        },
         setRangeText: (text, start, end, preserve) => {
           if (!ref.current) return;
           setRangeText(ref.current, text, start, end, preserve);

stories/toolbar.stories.tsx

@@ -17,8 +17,8 @@ export const Toolbar = () => {
       <div>
         <button
           onClick={() => {
-            const start = ref.current.textareaRef.current.selectionStart;
-            const end = ref.current.textareaRef.current.selectionEnd;
+            const start = ref.current.selectionStart;
+            const end = ref.current.selectionEnd;
             ref.current.setRangeText(
               `**${text.slice(start, end)}**`,
               start,
@@ -30,17 +30,17 @@ export const Toolbar = () => {
         </button>
         <button
           onClick={() => {
-            const start = ref.current.textareaRef.current.selectionStart;
-            const end = ref.current.textareaRef.current.selectionEnd;
+            const start = ref.current.selectionStart;
+            const end = ref.current.selectionEnd;
             ref.current.setRangeText(`*${text.slice(start, end)}*`, start, end);
           }}
         >
           <i>I</i>
         </button>
         <button
           onClick={() => {
-            const start = ref.current.textareaRef.current.selectionStart;
-            const end = ref.current.textareaRef.current.selectionEnd;
+            const start = ref.current.selectionStart;
+            const end = ref.current.selectionEnd;
             ref.current.setRangeText(
               `~~${text.slice(start, end)}~~`,
               start,