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;
+  /** Enables editing multiple lines of text
+   */
+  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,
+      ...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,9 @@
     }
   }
 }
+
+.multilineContainer {
+  .editableText {
+    width: 400px;
+  }
+}

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

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

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

@@ -18,6 +18,16 @@ 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("textbox");
+    expect(input).toBeInTheDocument();
+  });
+
   it("should not render an input when 'readOnly' is false when clicked", () => {
     render(<EditableText value="Editable test" readOnly />);
 
@@ -98,6 +108,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("textbox");
+        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 +151,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("textbox");
+
+        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,10 @@
     }
   }
 
+  .textarea {
+    resize: none;
+  }
+
   .typography {
     border: 1px solid transparent;
     padding: 0 var(--spacing-xs);
@@ -46,5 +50,9 @@
     &.placeholder {
       color: var(--secondary-text-color);
     }
+
+    &.multiline {
+      white-space: pre-wrap;
+    }
   }
 }

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

@@ -45,6 +45,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(
@@ -67,7 +69,8 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       onEditModeChange,
       tooltipProps,
       type,
-      weight
+      weight,
+      multiline = false
     }: EditableTypographyProps,
     ref
   ) => {
@@ -77,6 +80,9 @@ 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 textareaBorderBoxSizing = useRef(0);
+    const textareaLineHeight = useRef(0);
 
     const prevValue = usePrevious(value);
 
@@ -131,8 +137,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) {
@@ -141,14 +151,46 @@ 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() {
       inputRef.current?.focus?.();
+
+      if (multiline) {
+        calculateTextareaHeightAttrs();
+      }
+    }
+
+    /* Dynamically resizes the textarea to fit its content */
+    function resizeTextarea() {
+      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;
+          }
+
+          // Ensure we at least have 1 line
+          setInputHeight(
+            Math.max(
+              textarea.scrollHeight + textareaBorderBoxSizing.current,
+              textareaLineHeight.current + textareaBorderBoxSizing.current
+            )
+          );
+        });
+      }
     }
 
     function selectAllInputText() {
@@ -167,10 +209,38 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
       if (!typographyRef.current) {
         return;
       }
+
       const { width } = typographyRef.current.getBoundingClientRect();
       setInputWidth(width);
     }, [inputValue, isEditing]);
 
+    /* Calculate the minimual textarea height, taking its applied styles (padding, border width) into consideration 
+       This is done only on focus, so that we don't need to get the computed style every time.
+    */
+    function calculateTextareaHeightAttrs() {
+      if (multiline && inputRef.current) {
+        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;
+
+        textareaLineHeight.current = lineHeight;
+        textareaBorderBoxSizing.current = paddingTop + paddingBottom + borderTopWidth + borderBottomWidth;
+        resizeTextarea();
+      }
+    }
+
     return (
       <div
         ref={mergedRef}
@@ -182,32 +252,49 @@ const EditableTypography: VibeComponent<EditableTypographyProps, HTMLElement> =
         onClick={onTypographyClick}
         onKeyDown={toggleKeyboardEditMode}
       >
-        {isEditing && (
-          <input
-            ref={inputRef}
-            className={cx(styles.input, typographyClassName)}
-            value={inputValue}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            onBlur={handleBlur}
-            aria-label={ariaLabel}
-            placeholder={placeholder}
-            style={{ width: inputWidth }}
-            role="input"
-          />
-        )}
+        {isEditing &&
+          (multiline ? (
+            <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="textbox"
+              rows={1}
+            />
+          ) : (
+            <input
+              ref={inputRef}
+              className={cx(styles.input, typographyClassName)}
+              value={inputValue}
+              onChange={handleChange}
+              onKeyDown={handleKeyDown}
+              onBlur={handleBlur}
+              aria-label={ariaLabel}
+              placeholder={placeholder}
+              style={{ width: inputWidth }}
+              role="input"
+            />
+          ))}
         <TypographyComponent
           ref={typographyRef}
           aria-hidden={isEditing}
           className={cx(styles.typography, typographyClassName, {
             [styles.hidden]: isEditing,
             [styles.disabled]: readOnly,
-            [styles.placeholder]: !inputValue && placeholder
+            [styles.placeholder]: !inputValue && placeholder,
+            [styles.multiline]: !isEditing && multiline,
           })}
           tabIndex={0}
           tooltipProps={tooltipProps}
           weight={weight}
           type={type}
+          ellipsis={!multiline}
         >
           {inputValue || placeholder}
         </TypographyComponent>