@lensui/lens-table 0.1.96 → 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,
@@ -969,7 +1005,10 @@ function TextAreaEditor({
   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 [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 ? {
@@ -979,6 +1018,32 @@ 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();
   };
@@ -997,21 +1062,20 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
-    const offset = open ? 0 : lastLineStart;
+    const offset = open ? 0 : activeLineStart;
     control.focus();
     control.setSelectionRange(
       Math.max(0, Math.min(selection.start - offset, length)),
       Math.max(0, Math.min(selection.end - offset, length)),
       selection.direction
     );
-  }, [inline, lastLineStart, open]);
+  }, [activeLineStart, inline, 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",
           {
@@ -1020,12 +1084,12 @@ function TextAreaEditor({
             autoFocus: true,
             maxLength,
             onChange: (event) => onChange(
-              inline ? `${value.slice(0, lastLineStart)}${event.target.value}` : event.target.value
+              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",
@@ -1041,11 +1105,7 @@ function TextAreaEditor({
                 setOpen(true);
                 return;
               }
-              if (open) {
-                textareaRef.current?.focus();
-                return;
-              }
-              rememberSelection(inputRef.current, lastLineStart);
+              rememberSelection(inputRef.current, activeLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MultilineEditorIcon, {})
@@ -1062,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,
@@ -943,7 +979,10 @@ function TextAreaEditor({
   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 [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 ? {
@@ -953,6 +992,32 @@ 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();
   };
@@ -971,21 +1036,20 @@ function TextAreaEditor({
     if (!control) return;
     const selection = selectionRef.current;
     const length = control.value.length;
-    const offset = open ? 0 : lastLineStart;
+    const offset = open ? 0 : activeLineStart;
     control.focus();
     control.setSelectionRange(
       Math.max(0, Math.min(selection.start - offset, length)),
       Math.max(0, Math.min(selection.end - offset, length)),
       selection.direction
     );
-  }, [inline, lastLineStart, open]);
+  }, [activeLineStart, inline, 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",
           {
@@ -994,12 +1058,12 @@ function TextAreaEditor({
             autoFocus: true,
             maxLength,
             onChange: (event) => onChange(
-              inline ? `${value.slice(0, lastLineStart)}${event.target.value}` : event.target.value
+              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",
@@ -1015,11 +1079,7 @@ function TextAreaEditor({
                 setOpen(true);
                 return;
               }
-              if (open) {
-                textareaRef.current?.focus();
-                return;
-              }
-              rememberSelection(inputRef.current, lastLineStart);
+              rememberSelection(inputRef.current, activeLineStart);
               setOpen(true);
             },
             children: /* @__PURE__ */ jsx7(MultilineEditorIcon, {})
@@ -1036,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.96",
+  "version": "0.1.98",
   "description": "A lightweight, canvas-rendered React table component for LensUI.",
   "type": "module",
   "main": "./dist/index.cjs",