@lensui/lens-table 0.1.95 → 0.1.96

package/dist/index.cjs

@@ -968,6 +968,8 @@ function TextAreaEditor({
   const [open, setOpen] = (0, import_react6.useState)(false);
   const inputRef = (0, import_react6.useRef)(null);
   const textareaRef = (0, import_react6.useRef)(null);
+  const lastLineStart = inline ? Math.max(value.lastIndexOf("\n"), value.lastIndexOf("\r")) + 1 : 0;
+  const collapsedValue = inline ? value.slice(lastLineStart) : value;
   const selectionRef = (0, import_react6.useRef)(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
@@ -980,12 +982,12 @@ function TextAreaEditor({
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
-  const rememberSelection = (control) => {
+  const rememberSelection = (control, offset = 0) => {
     if (!control || control.selectionStart === null || control.selectionEnd === null)
       return;
     selectionRef.current = {
-      start: control.selectionStart,
-      end: control.selectionEnd,
+      start: control.selectionStart + offset,
+      end: control.selectionEnd + offset,
       direction: control.selectionDirection ?? "none"
     };
   };
@@ -995,27 +997,31 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
+    const offset = open ? 0 : lastLineStart;
     control.focus();
     control.setSelectionRange(
-      Math.min(selection.start, length),
-      Math.min(selection.end, length),
+      Math.max(0, Math.min(selection.start - offset, length)),
+      Math.max(0, Math.min(selection.end - offset, length)),
       selection.direction
     );
-  }, [inline, open]);
+  }, [inline, lastLineStart, open]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
       className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
       style: editorStyle,
       children: [
+        inline && !open && lastLineStart > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "rvg-textarea-collapsed-prefix", "aria-hidden": "true", children: "\u21B5" }),
         !(inline && open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "input",
           {
             ref: inputRef,
-            value,
+            value: collapsedValue,
             autoFocus: true,
             maxLength,
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => onChange(
+              inline ? `${value.slice(0, lastLineStart)}${event.target.value}` : event.target.value
+            ),
             onKeyDown: handleKeyDown
           }
         ),
@@ -1039,7 +1045,7 @@ function TextAreaEditor({
                 textareaRef.current?.focus();
                 return;
               }
-              rememberSelection(inputRef.current);
+              rememberSelection(inputRef.current, lastLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})

package/dist/index.js

@@ -942,6 +942,8 @@ function TextAreaEditor({
   const [open, setOpen] = useState4(false);
   const inputRef = useRef4(null);
   const textareaRef = useRef4(null);
+  const lastLineStart = inline ? Math.max(value.lastIndexOf("\n"), value.lastIndexOf("\r")) + 1 : 0;
+  const collapsedValue = inline ? value.slice(lastLineStart) : value;
   const selectionRef = useRef4(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
@@ -954,12 +956,12 @@ function TextAreaEditor({
     if (event.key === "Enter") onCommit(value);
     if (event.key === "Escape") onCancel();
   };
-  const rememberSelection = (control) => {
+  const rememberSelection = (control, offset = 0) => {
     if (!control || control.selectionStart === null || control.selectionEnd === null)
       return;
     selectionRef.current = {
-      start: control.selectionStart,
-      end: control.selectionEnd,
+      start: control.selectionStart + offset,
+      end: control.selectionEnd + offset,
       direction: control.selectionDirection ?? "none"
     };
   };
@@ -969,27 +971,31 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
+    const offset = open ? 0 : lastLineStart;
     control.focus();
     control.setSelectionRange(
-      Math.min(selection.start, length),
-      Math.min(selection.end, length),
+      Math.max(0, Math.min(selection.start - offset, length)),
+      Math.max(0, Math.min(selection.end - offset, length)),
       selection.direction
     );
-  }, [inline, open]);
+  }, [inline, lastLineStart, open]);
   return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: `rvg-native-editor rvg-textarea-editor${inline && open ? " is-inline-expanded" : ""}`,
       style: editorStyle,
       children: [
+        inline && !open && lastLineStart > 0 && /* @__PURE__ */ jsx7("span", { className: "rvg-textarea-collapsed-prefix", "aria-hidden": "true", children: "\u21B5" }),
         !(inline && open) && /* @__PURE__ */ jsx7(
           "input",
           {
             ref: inputRef,
-            value,
+            value: collapsedValue,
             autoFocus: true,
             maxLength,
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => onChange(
+              inline ? `${value.slice(0, lastLineStart)}${event.target.value}` : event.target.value
+            ),
             onKeyDown: handleKeyDown
           }
         ),
@@ -1013,7 +1019,7 @@ function TextAreaEditor({
                 textareaRef.current?.focus();
                 return;
               }
-              rememberSelection(inputRef.current);
+              rememberSelection(inputRef.current, lastLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lensui/lens-table",
-  "version": "0.1.95",
+  "version": "0.1.96",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",