@lensui/lens-table 0.1.95 → 0.1.98

package/dist/index.cjs

@@ -953,6 +953,42 @@ function TextEditor({ value, type, min, max, integer = false, style, labels, onC
 var import_react6 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime7 = require("react/jsx-runtime");
+var getLineStart = (value, position) => {
+  if (position <= 0) return 0;
+  return Math.max(
+    value.lastIndexOf("\n", position - 1),
+    value.lastIndexOf("\r", position - 1)
+  ) + 1;
+};
+var getLineEnd = (value, start) => {
+  const carriageReturn = value.indexOf("\r", start);
+  const lineFeed = value.indexOf("\n", start);
+  if (carriageReturn < 0) return lineFeed < 0 ? value.length : lineFeed;
+  if (lineFeed < 0) return carriageReturn;
+  return Math.min(carriageReturn, lineFeed);
+};
+var getPreviousLine = (value, currentStart) => {
+  if (currentStart <= 0) return null;
+  let previousEnd = currentStart - 1;
+  if (value[previousEnd] === "\n" && previousEnd > 0 && value[previousEnd - 1] === "\r") {
+    previousEnd -= 1;
+  }
+  return {
+    start: getLineStart(value, previousEnd),
+    end: previousEnd
+  };
+};
+var getNextLine = (value, currentEnd) => {
+  if (currentEnd >= value.length) return null;
+  let nextStart = currentEnd + 1;
+  if (value[currentEnd] === "\r" && nextStart < value.length && value[nextStart] === "\n") {
+    nextStart += 1;
+  }
+  return {
+    start: nextStart,
+    end: getLineEnd(value, nextStart)
+  };
+};
 function TextAreaEditor({
   value,
   title,
@@ -968,6 +1004,11 @@ 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 [collapsedLineStart, setCollapsedLineStart] = (0, import_react6.useState)(lastLineStart);
+  const activeLineStart = inline ? Math.min(collapsedLineStart, value.length) : 0;
+  const activeLineEnd = inline ? getLineEnd(value, activeLineStart) : value.length;
+  const collapsedValue = inline ? value.slice(activeLineStart, activeLineEnd) : value;
   const selectionRef = (0, import_react6.useRef)(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
@@ -977,15 +1018,41 @@ function TextAreaEditor({
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
+    if (inline && event.key === "ArrowLeft" && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0) {
+      const previousLine = getPreviousLine(value, activeLineStart);
+      if (previousLine) {
+        event.preventDefault();
+        selectionRef.current = {
+          start: previousLine.end,
+          end: previousLine.end,
+          direction: "none"
+        };
+        setCollapsedLineStart(previousLine.start);
+        return;
+      }
+    }
+    if (inline && event.key === "ArrowRight" && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.currentTarget.selectionStart === collapsedValue.length && event.currentTarget.selectionEnd === collapsedValue.length) {
+      const nextLine = getNextLine(value, activeLineEnd);
+      if (nextLine) {
+        event.preventDefault();
+        selectionRef.current = {
+          start: nextLine.start,
+          end: nextLine.start,
+          direction: "none"
+        };
+        setCollapsedLineStart(nextLine.start);
+        return;
+      }
+    }
     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,13 +1062,14 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
+    const offset = open ? 0 : activeLineStart;
     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]);
+  }, [activeLineStart, inline, open]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     "div",
     {
@@ -1012,14 +1080,16 @@ function TextAreaEditor({
           "input",
           {
             ref: inputRef,
-            value,
+            value: collapsedValue,
             autoFocus: true,
             maxLength,
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => onChange(
+              inline ? `${value.slice(0, activeLineStart)}${event.target.value}${value.slice(activeLineEnd)}` : event.target.value
+            ),
             onKeyDown: handleKeyDown
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        (!inline || !open) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "button",
           {
             type: "button",
@@ -1035,11 +1105,7 @@ function TextAreaEditor({
                 setOpen(true);
                 return;
               }
-              if (open) {
-                textareaRef.current?.focus();
-                return;
-              }
-              rememberSelection(inputRef.current);
+              rememberSelection(inputRef.current, activeLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
@@ -1056,13 +1122,24 @@ function TextAreaEditor({
             autoFocus: true,
             maxLength,
             onPointerDown: (event) => event.stopPropagation(),
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => {
+              rememberSelection(event.currentTarget);
+              onChange(event.currentTarget.value);
+            },
             onKeyDown: (event) => {
               event.stopPropagation();
               if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
                 onCommit(value);
               if (event.key === "Escape") {
                 rememberSelection(event.currentTarget);
+                if (event.currentTarget.selectionStart !== null) {
+                  setCollapsedLineStart(
+                    getLineStart(
+                      event.currentTarget.value,
+                      event.currentTarget.selectionStart
+                    )
+                  );
+                }
                 setOpen(false);
               }
             }

package/dist/index.css

@@ -2794,9 +2794,6 @@
   cursor: pointer;
   transform: translateY(-50%);
 }
-.rvg-textarea-editor.is-inline-expanded .rvg-textarea-trigger {
-  top: calc(var(--rvg-textarea-inline-header-height) / 2);
-}
 .rvg-multiline-icon {
   width: 13px;
   height: 13px;
@@ -2809,7 +2806,7 @@
   min-width: 0;
   min-height: 0;
   margin: 0;
-  padding: 0 24px 8px 4px;
+  padding: 0 4px 8px;
   resize: none;
   border: 0;
   border-radius: 0;
@@ -2824,6 +2821,20 @@
   line-height: var(--rvg-textarea-inline-header-height);
   box-shadow: none;
   box-sizing: border-box;
+  scrollbar-width: thin;
+  scrollbar-color: #aeb3b8 transparent;
+}
+.rvg-textarea-inline::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+.rvg-textarea-inline::-webkit-scrollbar-track,
+.rvg-textarea-inline::-webkit-scrollbar-corner {
+  background: transparent;
+}
+.rvg-textarea-inline::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #aeb3b8;
 }
 .rvg-textarea-backdrop {
   position: fixed;

package/dist/index.js

@@ -927,6 +927,42 @@ import {
 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var getLineStart = (value, position) => {
+  if (position <= 0) return 0;
+  return Math.max(
+    value.lastIndexOf("\n", position - 1),
+    value.lastIndexOf("\r", position - 1)
+  ) + 1;
+};
+var getLineEnd = (value, start) => {
+  const carriageReturn = value.indexOf("\r", start);
+  const lineFeed = value.indexOf("\n", start);
+  if (carriageReturn < 0) return lineFeed < 0 ? value.length : lineFeed;
+  if (lineFeed < 0) return carriageReturn;
+  return Math.min(carriageReturn, lineFeed);
+};
+var getPreviousLine = (value, currentStart) => {
+  if (currentStart <= 0) return null;
+  let previousEnd = currentStart - 1;
+  if (value[previousEnd] === "\n" && previousEnd > 0 && value[previousEnd - 1] === "\r") {
+    previousEnd -= 1;
+  }
+  return {
+    start: getLineStart(value, previousEnd),
+    end: previousEnd
+  };
+};
+var getNextLine = (value, currentEnd) => {
+  if (currentEnd >= value.length) return null;
+  let nextStart = currentEnd + 1;
+  if (value[currentEnd] === "\r" && nextStart < value.length && value[nextStart] === "\n") {
+    nextStart += 1;
+  }
+  return {
+    start: nextStart,
+    end: getLineEnd(value, nextStart)
+  };
+};
 function TextAreaEditor({
   value,
   title,
@@ -942,6 +978,11 @@ 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 [collapsedLineStart, setCollapsedLineStart] = useState4(lastLineStart);
+  const activeLineStart = inline ? Math.min(collapsedLineStart, value.length) : 0;
+  const activeLineEnd = inline ? getLineEnd(value, activeLineStart) : value.length;
+  const collapsedValue = inline ? value.slice(activeLineStart, activeLineEnd) : value;
   const selectionRef = useRef4(null);
   const inlineHeaderHeight = typeof style.height === "number" ? style.height : 34;
   const editorStyle = inline && open ? {
@@ -951,15 +992,41 @@ function TextAreaEditor({
   } : style;
   const handleKeyDown = (event) => {
     event.stopPropagation();
+    if (inline && event.key === "ArrowLeft" && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === 0) {
+      const previousLine = getPreviousLine(value, activeLineStart);
+      if (previousLine) {
+        event.preventDefault();
+        selectionRef.current = {
+          start: previousLine.end,
+          end: previousLine.end,
+          direction: "none"
+        };
+        setCollapsedLineStart(previousLine.start);
+        return;
+      }
+    }
+    if (inline && event.key === "ArrowRight" && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey && event.currentTarget.selectionStart === collapsedValue.length && event.currentTarget.selectionEnd === collapsedValue.length) {
+      const nextLine = getNextLine(value, activeLineEnd);
+      if (nextLine) {
+        event.preventDefault();
+        selectionRef.current = {
+          start: nextLine.start,
+          end: nextLine.start,
+          direction: "none"
+        };
+        setCollapsedLineStart(nextLine.start);
+        return;
+      }
+    }
     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,13 +1036,14 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
+    const offset = open ? 0 : activeLineStart;
     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]);
+  }, [activeLineStart, inline, open]);
   return /* @__PURE__ */ jsxs7(
     "div",
     {
@@ -986,14 +1054,16 @@ function TextAreaEditor({
           "input",
           {
             ref: inputRef,
-            value,
+            value: collapsedValue,
             autoFocus: true,
             maxLength,
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => onChange(
+              inline ? `${value.slice(0, activeLineStart)}${event.target.value}${value.slice(activeLineEnd)}` : event.target.value
+            ),
             onKeyDown: handleKeyDown
           }
         ),
-        /* @__PURE__ */ jsx7(
+        (!inline || !open) && /* @__PURE__ */ jsx7(
           "button",
           {
             type: "button",
@@ -1009,11 +1079,7 @@ function TextAreaEditor({
                 setOpen(true);
                 return;
               }
-              if (open) {
-                textareaRef.current?.focus();
-                return;
-              }
-              rememberSelection(inputRef.current);
+              rememberSelection(inputRef.current, activeLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
@@ -1030,13 +1096,24 @@ function TextAreaEditor({
             autoFocus: true,
             maxLength,
             onPointerDown: (event) => event.stopPropagation(),
-            onChange: (event) => onChange(event.target.value),
+            onChange: (event) => {
+              rememberSelection(event.currentTarget);
+              onChange(event.currentTarget.value);
+            },
             onKeyDown: (event) => {
               event.stopPropagation();
               if ((event.metaKey || event.ctrlKey) && event.key === "Enter")
                 onCommit(value);
               if (event.key === "Escape") {
                 rememberSelection(event.currentTarget);
+                if (event.currentTarget.selectionStart !== null) {
+                  setCollapsedLineStart(
+                    getLineStart(
+                      event.currentTarget.value,
+                      event.currentTarget.selectionStart
+                    )
+                  );
+                }
                 setOpen(false);
               }
             }

package/package.json

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