From ed0d67ee56f7188762c38ecc181b23a9f927e14a Mon Sep 17 00:00:00 2001
From: Cats Juice <wp1298554944@hotmail.com>
Date: Wed, 21 Feb 2024 10:03:05 +0000
Subject: [PATCH] fix(component): nowrap inline-edit (#5844)

---
 .../frontend/component/src/ui/editable/inline-edit.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/component/src/ui/editable/inline-edit.tsx b/packages/frontend/component/src/ui/editable/inline-edit.tsx
index 845a3f4e8..07e0de7f7 100644
--- a/packages/frontend/component/src/ui/editable/inline-edit.tsx
+++ b/packages/frontend/component/src/ui/editable/inline-edit.tsx
@@ -7,6 +7,7 @@ import {
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -139,6 +140,11 @@ export const InlineEdit = ({
     setEditingValue(value);
   }, [value]);
 
+  // to make sure text is not wrapped, and multi-space is shown normally
+  const displayValue = useMemo(() => {
+    return editingValue ? editingValue.replace(/\n/g, '') : '';
+  }, [editingValue]);
+
   // to make sure input's style is the same as displayed text
   const inputWrapperInheritsStyles = {
     margin: 'inherit',
@@ -172,9 +178,9 @@ export const InlineEdit = ({
         onDoubleClick={onDoubleClick}
         className={clsx(styles.inlineEdit)}
       >
-        {editingValue}
+        {displayValue}
 
-        {!editingValue && (
+        {!displayValue && (
           <Placeholder
             className={placeholderClassName}
             label={placeholder}