fix: show token name when convert local styles to token (#5123)

Ref
https://discord.com/channels/955905230107738152/1360809139810599063/1360809139810599063

There were two problems here

1. empty token name collapsed and was not editable; fixed it with nbsp
2. the label set with dom didn't have proper timing; fixed it by
rendering label by react

Author: TrySound

apps/builder/app/builder/features/navigator/navigator-tree.tsx

@@ -437,7 +437,9 @@ const TreeNodeContent = ({
         ref={mergeRefs(editableRef, ref)}
         {...handlers}
         isEditing={isEditing}
-      />
+      >
+        {label}
+      </EditableTreeNodeLabel>
     </TreeNodeLabel>
   );
 };

apps/builder/app/builder/features/style-panel/style-source/style-source-control.tsx

@@ -136,12 +136,16 @@ const EditableText = ({
       spellCheck={false}
       userSelect={isEditing ? "text" : "none"}
       css={{
+        // prevent collapsing horizontally editable text when empty
+        flexGrow: 1,
         outline: "none",
         textOverflow: isEditing ? "clip" : "ellipsis",
         cursor: isEditing ? "auto" : "default",
       }}
       {...handlers}
-    />
+    >
+      {value}
+    </Text>
   );
 };
 

apps/builder/app/shared/dom-hooks/use-content-editable.ts

@@ -20,19 +20,8 @@ export const useContentEditable = ({
   value: string;
 }) => {
   const elementRef = useRef<HTMLDivElement | null>(null);
-  const setTextContent = () => {
-    if (elementRef.current && isEditing === false) {
-      elementRef.current.textContent = value;
-    }
-  };
-  const ref = (element: HTMLDivElement | null) => {
-    elementRef.current = element;
-    setTextContent();
-  };
   const getValue = () => elementRef.current?.textContent ?? "";
 
-  useEffect(setTextContent, [value, isEditing]);
-
   useEffect(() => {
     const element = elementRef.current;
     if (element === null) {
@@ -56,13 +45,6 @@ export const useContentEditable = ({
     }
 
     element.removeAttribute("contenteditable");
-    // This is needed to force layout to recalc max-width when editing is done,
-    // because otherwise, layout will keep the value from before engaging contenteditable.
-    const { parentElement } = element;
-    if (parentElement) {
-      parentElement.removeChild(element);
-      parentElement.appendChild(element);
-    }
   }, [isEditing]);
 
   const handleEnd = (event: KeyboardEvent<Element> | FocusEvent<Element>) => {
@@ -111,5 +93,5 @@ export const useContentEditable = ({
     onDoubleClick: handleDoubleClick,
   };
 
-  return { ref, handlers };
+  return { ref: elementRef, handlers };
 };