Repository: onlook-dev/onlook
Pull request #1906: refactor: div selected editor bar
Author: login: Kitenite
Created: 2025-05-22T17:08:26Z | Merged: 2025-05-22T17:08:45Z

## Description

<!-- Provide a clear and concise description of your changes -->

## Related Issues

<!-- Link any related issues using GitHub keywords (e.g., "closes #123", "fixes #456", "related to #789") -->

## Type of Change

<!-- Put an `x` in the boxes that apply -->

- [ ] Bug fix
- [ ] New feature
- [ ] Documentation update
- [ ] Release
- [x] Refactor
- [ ] Other (please describe):

## Testing

<!-- Describe the tests you ran or the steps to verify your changes -->

## Screenshots (if applicable)

<!-- Add screenshots to help explain your changes -->

## Additional Notes

<!-- Add any other context about the PR here -->

<!-- ELLIPSIS_HIDDEN -->

----

> [!IMPORTANT]
> Refactor `div-selected.tsx` and `text-selected.tsx` to directly use component instances, and reorganize text input components into `text-inputs` directory.
> 
>   - **Refactor**:
>     - `div-selected.tsx` and `text-selected.tsx` now directly use component instances in `DIV_SELECTED_GROUPS` and `TEXT_SELECTED_GROUPS` arrays, removing the need for a component map.
>     - Simplifies rendering logic by directly mapping components in `div-selected.tsx` and `text-selected.tsx`.
>   - **Renames**:
>     - Moves text input components from `text-selected` to `text-inputs` directory, including `font-family.tsx`, `font-size.tsx`, `font-weight.tsx`, `text-align.tsx`, `text-color.tsx`, and `advanced-typography.tsx`.
> 
> <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=onlook-dev%2Fonlook&utm_source=github&utm_medium=referral)<sup> for 23714b82fd8e9b3f852277ebfca1046f64b92508. You can [customize](https://app.ellipsis.dev/onlook-dev/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>

<!-- ELLIPSIS_HIDDEN -->

Linked issue #123: [FEAT] Add better onboarding docs
#### Describe the feature
Add framework documentation
- Next.js
- Remix
- Webpack
- Babel

Diff:
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx
index 53352965c6..55b3c0efa7 100644
--- a/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx
@@ -8,55 +8,59 @@ import { Border } from './dropdowns/border';
 import { ColorBackground } from './dropdowns/color-background';
 import { Display } from './dropdowns/display';
 import { Height } from './dropdowns/height';
-import { ImageBackground } from './dropdowns/img-background';
 import { Margin } from './dropdowns/margin';
 import { Opacity } from './dropdowns/opacity';
 import { Padding } from './dropdowns/padding';
 import { Radius } from './dropdowns/radius';
 import { Width } from './dropdowns/width';
-import { ViewButtons } from './panels/panel-bar/bar';
 import { InputSeparator } from './separator';
-
-const COMPONENT_MAP: { [key: string]: any } = {
-    Opacity,
-    Width,
-    Height,
-    Display,
-    Padding,
-    Margin,
-    Radius,
-    Border,
-    ColorBackground,
-    ImageBackground,
-    ViewButtons,
-};
+import { FontFamilySelector } from './text-inputs/font-family';
+import { FontSizeSelector } from './text-inputs/font-size';
+import { FontWeightSelector } from './text-inputs/font-weight';
 
 // Group definitions for the div-selected toolbar
 export const DIV_SELECTED_GROUPS = [
     {
         key: 'dimensions',
         label: 'Dimensions',
-        components: ['Width', 'Height'],
+        components: [
+            <Width />,
+            <Height />,
+        ],
     },
     {
         key: 'base',
         label: 'Base',
-        components: ['ColorBackground', 'Border', 'Radius'],
+        components: [
+            <ColorBackground />,
+            <Border />,
+            <Radius />,
+        ]
     },
     {
         key: 'layout',
         label: 'Layout',
-        components: ['Display', 'Padding', 'Margin'],
+        components: [
+            <Display />,
+            <Padding />,
+            <Margin />,
+        ],
     },
     {
         key: 'typography',
         label: 'Typography',
-        components: ['FontFamily', 'FontWeight', 'FontSize', 'FontColor', 'TextAlign'],
+        components: [
+            <FontFamilySelector fontFamily="Arial" />,
+            <FontWeightSelector fontWeight="normal" handleFontWeightChange={() => { }} />,
+            <FontSizeSelector fontSize={16} handleFontSizeChange={() => { }} />,
+        ],
     },
     {
         key: 'opacity',
         label: 'Opacity',
-        components: ['Opacity'],
+        components: [
+            <Opacity />,
+        ]
     },
 ];
 
@@ -135,10 +139,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
                         className="flex items-center justify-center gap-0.5"
                         ref={el => { groupRefs.current[groupIdx] = el; }}
                     >
-                        {group.components.map((compKey, idx) => {
-                            const Comp = COMPONENT_MAP[compKey];
-                            return Comp ? <Comp key={compKey + idx} /> : null;
-                        })}
+                        {group.components.map((comp, idx) => (
+                            <React.Fragment key={idx}>
+                                {comp}
+                            </React.Fragment>
+                        ))}
                     </div>
                 ))}
             </div>
@@ -150,10 +155,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
                         <React.Fragment key={group.key}>
                             {groupIdx > 0 && <InputSeparator />}
                             <div className="flex items-center justify-center gap-0.5">
-                                {group.components.map((compKey, idx) => {
-                                    const Comp = COMPONENT_MAP[compKey];
-                                    return Comp ? <Comp key={compKey + idx} /> : null;
-                                })}
+                                {group.components.map((comp, idx) => (
+                                    <React.Fragment key={idx}>
+                                        {comp}
+                                    </React.Fragment>
+                                ))}
                             </div>
                         </React.Fragment>
                     ) : null
@@ -176,10 +182,11 @@ export const DivSelected = ({ availableWidth = 0 }: { availableWidth?: number })
                                 <React.Fragment key={group.key}>
                                     {groupIdx > 0 && <InputSeparator />}
                                     <div className="flex items-center gap-0.5">
-                                        {group.components.map((compKey, idx) => {
-                                            const Comp = COMPONENT_MAP[compKey];
-                                            return Comp ? <Comp key={compKey + idx} /> : null;
-                                        })}
+                                        {group.components.map((comp, idx) => (
+                                            <React.Fragment key={idx}>
+                                                {comp}
+                                            </React.Fragment>
+                                        ))}
                                     </div>
                                 </React.Fragment>
                             ))}
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/advanced-typography.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/advanced-typography.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/advanced-typography.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/advanced-typography.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-family.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-family.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-family.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-family.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-size.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-size.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-size.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-size.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-weight.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-weight.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/font-weight.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/font-weight.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-align.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-align.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-align.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-align.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-color.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-color.tsx
similarity index 100%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/text-color.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-inputs/text-color.tsx
diff --git a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/index.tsx b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
similarity index 74%
rename from apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/index.tsx
rename to apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
index 99bca45b64..c0625601bc 100644
--- a/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected/index.tsx
+++ b/apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
@@ -4,51 +4,71 @@ import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Border } from '../dropdowns/border';
-import { ColorBackground } from '../dropdowns/color-background';
-import { Display } from '../dropdowns/display';
-import { Height } from '../dropdowns/height';
-import { Margin } from '../dropdowns/margin';
-import { Opacity } from '../dropdowns/opacity';
-import { Padding } from '../dropdowns/padding';
-import { Radius } from '../dropdowns/radius';
-import { Width } from '../dropdowns/width';
-import { useTextControl } from '../hooks/use-text-control';
-import { ViewButtons } from '../panels/panel-bar/bar';
-import { InputSeparator } from '../separator';
-import { AdvancedTypography } from './advanced-typography';
-import { FontFamilySelector } from './font-family';
-import { FontSizeSelector } from './font-size';
-import { FontWeightSelector } from './font-weight';
-import { TextAlignSelector } from './text-align';
-import { TextColor } from './text-color';
+import { Border } from './dropdowns/border';
+import { ColorBackground } from './dropdowns/color-background';
+import { Display } from './dropdowns/display';
+import { Height } from './dropdowns/height';
+import { Margin } from './dropdowns/margin';
+import { Opacity } from './dropdowns/opacity';
+import { Padding } from './dropdowns/padding';
+import { Radius } from './dropdowns/radius';
+import { Width } from './dropdowns/width';
+import { useTextControl } from './hooks/use-text-control';
+import { ViewButtons } from './panels/panel-bar/bar';
+import { InputSeparator } from './separator';
+import { AdvancedTypography } from './text-inputs/advanced-typography';
+import { FontFamilySelector } from './text-inputs/font-family';
+import { FontSizeSelector } from './text-inputs/font-size';
+import { FontWeightSelector } from './text-inputs/font-weight';
+import { TextAlignSelector } from './text-inputs/text-align';
+import { TextColor } from './text-inputs/text-color';
 
 // Group definitions for the text-selected toolbar
 export const TEXT_SELECTED_GROUPS = [
     {
         key: 'typography',
         label: 'Typography',
-        components: ['FontFamily', 'FontWeight', 'FontSize', 'TextColor', 'TextAlign', 'AdvancedTypography'],
+        components: [
+            <FontFamilySelector fontFamily="Arial" />,
+            <FontWeightSelector fontWeight="normal" handleFontWeightChange={() => { }} />,
+            <FontSizeSelector fontSize={16} handleFontSizeChange={() => { }} />,
+            <TextColor handleTextColorChange={() => { }} textColor="black" />,
+            <TextAlignSelector textAlign="left" handleTextAlignChange={() => { }} />,
+            <AdvancedTypography />,
+        ],
     },
     {
         key: 'dimensions',
         label: 'Dimensions',
-        components: ['Width', 'Height'],
+        components: [
+            <Width />,
+            <Height />,
+        ],
     },
     {
         key: 'base',
         label: 'Base',
-        components: ['ColorBackground', 'Border', 'Radius'],
+        components: [
+            <ColorBackground />,
+            <Border />,
+            <Radius />,
+        ],
     },
     {
         key: 'layout',
         label: 'Layout',
-        components: ['Display', 'Padding', 'Margin'],
+        components: [
+            <Display />,
+            <Padding />,
+            <Margin />,
+        ],
     },
     {
         key: 'opacity',
         label: 'Opacity',
-        components: ['Opacity'],
+        components: [
+            <Opacity />,
+        ],
     },
 ];
 
@@ -175,10 +195,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
                         className="flex items-center justify-center gap-0.5"
                         ref={el => { groupRefs.current[groupIdx] = el; }}
                     >
-                        {group.components.map((compKey, idx) => {
-                            const Comp = COMPONENT_MAP[compKey];
-                            return Comp ? <Comp key={compKey + idx} /> : null;
-                        })}
+                        {group.components.map((comp, idx) => (
+                            <React.Fragment key={idx}>
+                                {comp}
+                            </React.Fragment>
+                        ))}
                     </div>
                 ))}
             </div>
@@ -188,10 +209,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
                         <React.Fragment key={group.key}>
                             {groupIdx > 0 && <InputSeparator />}
                             <div className="flex items-center justify-center gap-0.5">
-                                {group.components.map((compKey, idx) => {
-                                    const Comp = COMPONENT_MAP[compKey];
-                                    return Comp ? <Comp key={compKey + idx} /> : null;
-                                })}
+                                {group.components.map((comp, idx) => (
+                                    <React.Fragment key={idx}>
+                                        {comp}
+                                    </React.Fragment>
+                                ))}
                             </div>
                         </React.Fragment>
                     ) : null
@@ -214,10 +236,11 @@ export const TextSelected = ({ availableWidth = 0 }: { availableWidth?: number }
                                 <React.Fragment key={group.key}>
                                     {groupIdx > 0 && <InputSeparator />}
                                     <div className="flex items-center gap-0.5">
-                                        {group.components.map((compKey, idx) => {
-                                            const Comp = COMPONENT_MAP[compKey];
-                                            return Comp ? <Comp key={compKey + idx} /> : null;
-                                        })}
+                                        {group.components.map((comp, idx) => (
+                                            <React.Fragment key={idx}>
+                                                {comp}
+                                            </React.Fragment>
+                                        ))}
                                     </div>
                                 </React.Fragment>
                             ))}


Reviews:
user: login: ellipsis-dev[bot]
body: > [!CAUTION]
> **Changes requested  :x:**
> <details>
> <summary>Reviewed everything up to 23714b82fd8e9b3f852277ebfca1046f64b92508 in <ellipsistime>2 minutes and 14 seconds</ellipsistime>. Click for details.</summary> 
> 
> - Reviewed `307` lines of code in `8` files
> - Skipped `0` files when reviewing.
> - Skipped posting `2` draft comments. View those below.
> - Modify your [settings](https://app.ellipsis.dev/onlook-dev/settings/code-review) and [rules](https://app.ellipsis.dev/onlook-dev/code-review/rules) to customize what types of comments Ellipsis leaves. And don't forget to react with :+1: or :-1: to teach Ellipsis.
> 
> <details>
> <summary>1. <code>apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx:149</code></summary>
> 
> - **Draft comment:** 
> COMPONENT_MAP is defined but never used. If dynamic rendering with current state is desired, consider using it or remove it to avoid confusion.
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> <details>
> <summary>2. <code>apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx:221</code></summary>
> 
> - **Draft comment:** 
> InputSeparator is rendered unconditionally at line 221 even when there are no overflow groups, which can cause an unnecessary separator to appear. Consider conditionally rendering it (as done in div-selected).
> - **Reason this comment was not posted:**
> Comment was not on a location in the diff, so it can't be submitted as a review comment.
> 
> 
> </details>
> 
> 
> Workflow ID: <workflowid>`wflow_s3gTa93xJGl24E3v`</workflowid>
> </details>
> 
> <sup>You can customize </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=onlook-dev%2Fonlook&utm_source=github&utm_medium=referral)<sup> by changing your [verbosity settings](https://app.ellipsis.dev/onlook-dev/settings/code-review), reacting with :+1: or :-1:, [replying to comments](https://docs.ellipsis.dev/features/code-review#teaching-ellipsis), or adding [code review rules](https://app.ellipsis.dev/onlook-dev/code-review/rules).</sup>
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-22T17:10:48Z

Review comments:
diff_hunk: @@ -8,55 +8,59 @@ import { Border } from './dropdowns/border';
 import { ColorBackground } from './dropdowns/color-background';
 import { Display } from './dropdowns/display';
 import { Height } from './dropdowns/height';
-import { ImageBackground } from './dropdowns/img-background';
 import { Margin } from './dropdowns/margin';
 import { Opacity } from './dropdowns/opacity';
 import { Padding } from './dropdowns/padding';
 import { Radius } from './dropdowns/radius';
 import { Width } from './dropdowns/width';
-import { ViewButtons } from './panels/panel-bar/bar';
 import { InputSeparator } from './separator';
-
-const COMPONENT_MAP: { [key: string]: any } = {
-    Opacity,
-    Width,
-    Height,
-    Display,
-    Padding,
-    Margin,
-    Radius,
-    Border,
-    ColorBackground,
-    ImageBackground,
-    ViewButtons,
-};
+import { FontFamilySelector } from './text-inputs/font-family';
+import { FontSizeSelector } from './text-inputs/font-size';
+import { FontWeightSelector } from './text-inputs/font-weight';
 
 // Group definitions for the div-selected toolbar
 export const DIV_SELECTED_GROUPS = [
path: apps/web/client/src/app/project/[id]/_components/editor-bar/div-selected.tsx
user: login: ellipsis-dev[bot]
body: Storing inline JSX elements in `DIV_SELECTED_GROUPS` can lead to reusing the same element instances across multiple renders (hidden container, toolbar, popover). It’s better to store component types or factory functions to instantiate new elements.

created_at: 2025-05-22T17:10:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -4,51 +4,71 @@ import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Border } from '../dropdowns/border';
-import { ColorBackground } from '../dropdowns/color-background';
-import { Display } from '../dropdowns/display';
-import { Height } from '../dropdowns/height';
-import { Margin } from '../dropdowns/margin';
-import { Opacity } from '../dropdowns/opacity';
-import { Padding } from '../dropdowns/padding';
-import { Radius } from '../dropdowns/radius';
-import { Width } from '../dropdowns/width';
-import { useTextControl } from '../hooks/use-text-control';
-import { ViewButtons } from '../panels/panel-bar/bar';
-import { InputSeparator } from '../separator';
-import { AdvancedTypography } from './advanced-typography';
-import { FontFamilySelector } from './font-family';
-import { FontSizeSelector } from './font-size';
-import { FontWeightSelector } from './font-weight';
-import { TextAlignSelector } from './text-align';
-import { TextColor } from './text-color';
+import { Border } from './dropdowns/border';
+import { ColorBackground } from './dropdowns/color-background';
+import { Display } from './dropdowns/display';
+import { Height } from './dropdowns/height';
+import { Margin } from './dropdowns/margin';
+import { Opacity } from './dropdowns/opacity';
+import { Padding } from './dropdowns/padding';
+import { Radius } from './dropdowns/radius';
+import { Width } from './dropdowns/width';
+import { useTextControl } from './hooks/use-text-control';
+import { ViewButtons } from './panels/panel-bar/bar';
+import { InputSeparator } from './separator';
+import { AdvancedTypography } from './text-inputs/advanced-typography';
+import { FontFamilySelector } from './text-inputs/font-family';
+import { FontSizeSelector } from './text-inputs/font-size';
+import { FontWeightSelector } from './text-inputs/font-weight';
+import { TextAlignSelector } from './text-inputs/text-align';
+import { TextColor } from './text-inputs/text-color';
 
 // Group definitions for the text-selected toolbar
 export const TEXT_SELECTED_GROUPS = [
path: apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
user: login: ellipsis-dev[bot]
body: `TEXT_SELECTED_GROUPS` is defined with static JSX (e.g. `fontFamily 'Arial'`) so it won’t reflect dynamic `textState` values. Consider generating these components with current state (or using a factory) so changes from `useTextControl` are passed correctly.

created_at: 2025-05-22T17:10:47Z
author_association: CONTRIBUTOR
diff_hunk: @@ -4,51 +4,71 @@ import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { Popover, PopoverContent, PopoverTrigger } from '@onlook/ui/popover';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { Border } from '../dropdowns/border';
-import { ColorBackground } from '../dropdowns/color-background';
-import { Display } from '../dropdowns/display';
-import { Height } from '../dropdowns/height';
-import { Margin } from '../dropdowns/margin';
-import { Opacity } from '../dropdowns/opacity';
-import { Padding } from '../dropdowns/padding';
-import { Radius } from '../dropdowns/radius';
-import { Width } from '../dropdowns/width';
-import { useTextControl } from '../hooks/use-text-control';
-import { ViewButtons } from '../panels/panel-bar/bar';
-import { InputSeparator } from '../separator';
-import { AdvancedTypography } from './advanced-typography';
-import { FontFamilySelector } from './font-family';
-import { FontSizeSelector } from './font-size';
-import { FontWeightSelector } from './font-weight';
-import { TextAlignSelector } from './text-align';
-import { TextColor } from './text-color';
+import { Border } from './dropdowns/border';
+import { ColorBackground } from './dropdowns/color-background';
+import { Display } from './dropdowns/display';
+import { Height } from './dropdowns/height';
+import { Margin } from './dropdowns/margin';
+import { Opacity } from './dropdowns/opacity';
+import { Padding } from './dropdowns/padding';
+import { Radius } from './dropdowns/radius';
+import { Width } from './dropdowns/width';
+import { useTextControl } from './hooks/use-text-control';
+import { ViewButtons } from './panels/panel-bar/bar';
+import { InputSeparator } from './separator';
+import { AdvancedTypography } from './text-inputs/advanced-typography';
+import { FontFamilySelector } from './text-inputs/font-family';
+import { FontSizeSelector } from './text-inputs/font-size';
+import { FontWeightSelector } from './text-inputs/font-weight';
+import { TextAlignSelector } from './text-inputs/text-align';
+import { TextColor } from './text-inputs/text-color';
 
 // Group definitions for the text-selected toolbar
 export const TEXT_SELECTED_GROUPS = [
     {
         key: 'typography',
         label: 'Typography',
-        components: ['FontFamily', 'FontWeight', 'FontSize', 'TextColor', 'TextAlign', 'AdvancedTypography'],
+        components: [
+            <FontFamilySelector fontFamily="Arial" />,
path: apps/web/client/src/app/project/[id]/_components/editor-bar/text-selected.tsx
user: login: ellipsis-dev[bot]
body: Similar to `div-selected`, storing inline JSX in `TEXT_SELECTED_GROUPS` risks reusing the same element instances across multiple render locations. Consider using component factories to ensure a fresh instance for each render.
```suggestion
            () => <FontFamilySelector fontFamily="Arial" />,
```

created_at: 2025-05-22T17:10:47Z
author_association: CONTRIBUTOR

PR comments:
user: login: vercel[bot]
created_at: 2025-05-22T17:08:31Z
body: [vc]: #891/Gxt9864vUOr4lAfBWzQTwy3bB5Vk+hFvdq5Oyms=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJkb2NzIiwicm9vdERpcmVjdG9yeSI6ImRvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vb25sb29rL2RvY3MvRnlkR0NnMm13NE1CYmJqS0wzZE53YnhaZmFQdSIsInByZXZpZXdVcmwiOiJkb2NzLWdpdC1yZWZhY3Rvci1lZGl0b3ItYmFyLWRpdi1vbmxvb2sudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJQRU5ESU5HIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImRvY3MtZ2l0LXJlZmFjdG9yLWVkaXRvci1iYXItZGl2LW9ubG9vay52ZXJjZWwuYXBwIn19LHsibmFtZSI6IndlYiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL3dlYi9jbGllbnQiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vb25sb29rL3dlYi81eGRzdEppOXhDN2hQZk40YWFXQktlekd5SGh5IiwicHJldmlld1VybCI6IndlYi1naXQtcmVmYWN0b3ItZWRpdG9yLWJhci1kaXYtb25sb29rLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiUEVORElORyIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJ3ZWItZ2l0LXJlZmFjdG9yLWVkaXRvci1iYXItZGl2LW9ubG9vay52ZXJjZWwuYXBwIn19XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **docs** | 🔄 Building ([Inspect](https://vercel.com/onlook/docs/FydGCg2mw4MBbbjKL3dNwbxZfaPu)) | [Visit Preview](https://docs-git-refactor-editor-bar-div-onlook.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/docs-git-refactor-editor-bar-div-onlook.vercel.app?via=pr-comment-feedback-link) | May 22, 2025 5:08pm |
| **web** | 🔄 Building ([Inspect](https://vercel.com/onlook/web/5xdstJi9xC7hPfN4aaWBKezGyHhy)) | [Visit Preview](https://web-git-refactor-editor-bar-div-onlook.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/web-git-refactor-editor-bar-div-onlook.vercel.app?via=pr-comment-feedback-link) | May 22, 2025 5:08pm |



author_association: NONE
user: login: supabase[bot]
created_at: 2025-05-22T17:08:33Z
body: [supa]:wowaemfasoptxrdjhilu
This pull request has been ignored for the connected project `wowaemfasoptxrdjhilu` because there are no changes detected in `apps/backend/supabase` directory. You can change this behaviour in [Project Integrations Settings ↗︎](https://supabase.com/dashboard/project/wowaemfasoptxrdjhilu/settings/integrations).

<hr/>

Preview Branches by Supabase.
Learn more about [Supabase Branching ↗︎](https://supabase.com/docs/guides/platform/branching).
author_association: NONE