feat: support multiline for EditableText

packages/core/src/components/EditableText/EditableText.tsx

@@ -18,14 +18,24 @@ export interface EditableTextProps extends VibeComponentProps, EditableTypograph
   /** Sets the Text weight
    */
   weight?: TextWeight;
+  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines
+   */
+  multiline?: boolean;
 }
 
 const EditableText: VibeComponent<EditableTextProps, HTMLElement> & {
   types?: typeof TextTypeEnum;
   weights?: typeof TextWeightEnum;
 } = forwardRef(
   (
-    { type = "text2", weight = "normal", "data-testid": dataTestId, id, ...editableTypographyProps }: EditableTextProps,
+    {
+      type = "text2",
+      weight = "normal",
+      "data-testid": dataTestId,
+      id,
+      multiline = false,
+      ...editableTypographyProps
+    }: EditableTextProps,
     ref
   ) => {
     return (
@@ -38,6 +48,7 @@ const EditableText: VibeComponent<EditableTextProps, HTMLElement> & {
         clearable
         type={type}
         weight={weight}
+        multiline={multiline}
         {...editableTypographyProps}
       />
     );

packages/core/src/components/EditableText/__stories__/EditableText.mdx

@@ -53,6 +53,12 @@ Editable text can be used with any of the <StorybookLink page="Text/Text">Text</
 
 <Canvas of={EditableTextStories.Types} />
 
+### Multiline
+
+Editable text can be used to allow multiline input.
+
+<Canvas of={EditableTextStories.Multiline} />
+
 ## Related components
 
 <RelatedComponents componentsNames={[TEXT, HEADING, EDITABLE_HEADING]} />

packages/core/src/components/EditableText/__stories__/EditableText.stories.module.scss

@@ -14,3 +14,13 @@
     }
   }
 }
+
+.multilineContainer {
+  display: flex;
+  flex-direction: row;
+
+  .editableText {
+    width: 400px;
+    max-height: 200px;
+  }
+}

packages/core/src/components/EditableText/__stories__/EditableText.stories.tsx

@@ -102,3 +102,25 @@ export const Types = {
     }
   }
 };
+
+const multilineValue = "This is a multiline\nhere's the second line";
+export const Multiline = {
+  render: () => (
+    <div className={styles.multilineContainer}>
+      <EditableText
+        type={EditableText.types.TEXT1}
+        weight={EditableText.weights.NORMAL}
+        multiline
+        value={multilineValue}
+        className={styles.editableText}
+      />
+    </div>
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { styles }
+      }
+    }
+  }
+};

packages/core/src/components/EditableText/__tests__/EditableText.test.tsx

@@ -18,6 +18,17 @@ describe("EditableText", () => {
     expect(input).toBeInTheDocument();
   });
 
+  it("should render a textarea in edit mode with multiline", () => {
+    render(<EditableText multiline value="Editable text" />);
+
+    const component = screen.getByRole("button");
+    fireEvent.click(component);
+
+    const input = screen.queryByRole("input");
+    expect(input).toBeInTheDocument();
+    expect(input.tagName).toBe("TEXTAREA");
+  });
+
   it("should not render an input when 'readOnly' is false when clicked", () => {
     render(<EditableText value="Editable test" readOnly />);
 
@@ -98,6 +109,29 @@ describe("EditableText", () => {
         expect(onChange).toHaveBeenCalledWith(newValue);
       });
 
+      it("should call onChange with new value when changed in a multiline editable component", async () => {
+        const value = "Editable test";
+        const newValue = "New Editable test";
+        render(<EditableText value={value} onChange={onChange} multiline />);
+
+        const component = screen.getByRole("button");
+        fireEvent.click(component);
+
+        const input = screen.getByRole("input");
+        fireEvent.change(input, {
+          target: { value: newValue }
+        });
+
+        expect(input).toHaveValue(newValue);
+
+        await waitFor(() => {
+          fireEvent.keyDown(input, { key: "Enter" });
+        });
+        expect(within(await screen.findByRole("button")).getByText(newValue)).toBeInTheDocument();
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith(newValue);
+      });
+
       it("should not call onChange when value isn't changed in an editable component", async () => {
         const value = "Editable test";
         render(<EditableText value={value} onChange={onChange} />);
@@ -118,6 +152,24 @@ describe("EditableText", () => {
         expect(onChange).not.toBeCalled();
       });
 
+      it("should not call onChange when value changed but Shift+Enter was clicked for multiline in an editable component", async () => {
+        const value = "Editable test";
+        render(<EditableText value={value} onChange={onChange} multiline />);
+
+        const component = screen.getByRole("button");
+        fireEvent.click(component);
+
+        const input = screen.getByRole("input");
+
+        expect(input).toHaveValue(value);
+
+        await waitFor(() => {
+          fireEvent.keyDown(input, { key: "Enter", shiftKey: true });
+        });
+
+        expect(onChange).not.toBeCalled();
+      });
+
       it("should not call onChange when value of an editable component is cleared", async () => {
         const value = "Editable test";
         render(<EditableText value={value} onChange={onChange} />);

packages/core/src/components/EditableTypography/EditableTypography.module.scss

@@ -9,7 +9,7 @@
   overflow: hidden;
   position: relative;
 
-  .input {
+  .input,.textarea {
     display: inline-block;
     max-width: 100%;
     min-width: 64px;
@@ -26,6 +26,12 @@
     }
   }
 
+  .textarea {
+    max-height: inherit;
+    resize: none;
+    box-sizing: border-box;
+  }
+
   .typography {
     border: 1px solid transparent;
     padding: 0 var(--spacing-xs);

packages/core/src/components/EditableTypography/EditableTypography.tsx

@@ -43,6 +43,8 @@ export interface EditableTypographyProps extends VibeComponentProps, EditableTyp
   type?: TextType | HeadingType;
   /** Sets the Text/Heading weight */
   weight?: TextWeight | HeadingWeight;
+  /** Controls whether a textarea or a simple input would be rendered, allowing multi-lines */
+  multiline?: boolean;
 }
 
 const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> = forwardRef(
@@ -64,7 +66,8 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       onEditModeChange,
       tooltipProps,
       type,
-      weight
+      weight,
+      multiline = false
     }: EditableTypographyProps,
     ref
   ) => {
@@ -74,6 +77,7 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
     const [isEditing, setIsEditing] = useState(isEditMode || false);
     const [inputValue, setInputValue] = useState(value);
     const [inputWidth, setInputWidth] = useState(0);
+    const [inputHeight, setInputHeight] = useState<number | string>(0);
 
     const prevValue = usePrevious(value);
 
@@ -128,8 +132,12 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       handleInputValueChange();
     }
 
-    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) {
       if (event.key === keyCodes.ENTER) {
+        if (multiline && event.shiftKey) {
+          return;
+        }
+
         handleInputValueChange();
       }
       if (event.key === keyCodes.ESCAPE) {
@@ -138,15 +146,56 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       }
     }
 
-    function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
+    function handleChange(event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
       setInputValue(event.target.value);
+
+      if (multiline) {
+        resizeTextarea();
+      }
     }
 
     const toggleKeyboardEditMode = useKeyboardButtonPressedFunc(toggleEditMode);
 
     function focus() {
       if (inputRef.current) {
         inputRef.current?.focus();
+
+        if (multiline) {
+          resizeTextarea();
+        }
+      }
+    }
+
+    /* Dynamically resizes the textarea to fit its content */
+    function resizeTextarea() {
+      console.log("*************************resize called, why?", multiline, inputRef.current);
+      if (inputRef.current) {
+        // Temporarily set the height to "auto" to accurately measure the scroll height of the content inside the textarea.
+        setInputHeight("auto");
+
+        requestAnimationFrame(() => {
+          const textarea = inputRef.current as HTMLTextAreaElement;
+
+          if (!textarea) {
+            return;
+          }
+
+          const computedStyle = window.getComputedStyle(textarea);
+
+          // Calculate the appropriate height by taking into account the scrollable content inside the textarea,
+          // as well as the styles applied to it, such as padding and border widths.
+          const lineHeight = parseFloat(computedStyle.lineHeight) || 16;
+          const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+          const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+          const borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
+          const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
+
+          const newHeight = textarea.scrollHeight + borderTopWidth + borderBottomWidth;
+          const minHeight = lineHeight + paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+
+          // Ensure we at least have 1 line
+          setInputHeight(Math.max(newHeight, minHeight));
+        });
       }
     }
 
@@ -160,22 +209,30 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       if (!typographyRef.current) {
         return;
       }
+
       const { width } = typographyRef.current.getBoundingClientRect();
       setInputWidth(width);
     }, [inputValue, isEditing]);
 
-    return (
-      <div
-        ref={mergedRef}
-        id={id}
-        aria-label={ariaLabel}
-        data-testid={dataTestId}
-        className={cx(styles.editableTypography, className)}
-        role={isEditing ? null : "button"}
-        onClick={onTypographyClick}
-        onKeyDown={toggleKeyboardEditMode}
-      >
-        {isEditing && (
+    function getEditableElement() {
+      if (multiline) {
+        return (
+          <textarea
+            ref={inputRef}
+            className={cx(styles.textarea, typographyClassName)}
+            value={inputValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            onBlur={handleBlur}
+            aria-label={ariaLabel}
+            placeholder={placeholder}
+            style={{ width: inputWidth, height: inputHeight }}
+            role="input"
+            rows={1}
+          />
+        );
+      } else {
+        return (
           <input
             ref={inputRef}
             className={cx(styles.input, typographyClassName)}
@@ -188,7 +245,22 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
             style={{ width: inputWidth }}
             role="input"
           />
-        )}
+        );
+      }
+    }
+
+    return (
+      <div
+        ref={mergedRef}
+        id={id}
+        aria-label={ariaLabel}
+        data-testid={dataTestId}
+        className={cx(styles.editableTypography, className)}
+        role={isEditing ? null : "button"}
+        onClick={onTypographyClick}
+        onKeyDown={toggleKeyboardEditMode}
+      >
+        {isEditing && getEditableElement()}
         <TypographyComponent
           ref={typographyRef}
           aria-hidden={isEditing}
@@ -201,8 +273,16 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
           tooltipProps={tooltipProps}
           weight={weight}
           type={type}
+          ellipsis={!multiline}
         >
-          {inputValue || placeholder}
+          {(multiline
+            ? inputValue.split("\n").map((line, index) => (
+                <React.Fragment key={index}>
+                  {line}
+                  {index < inputValue.split("\n").length - 1 && <br />}
+                </React.Fragment>
+              ))
+            : inputValue) || placeholder}
         </TypographyComponent>
       </div>
     );