Merge pull request #3818 from Agenta-AI/fix/ui-improvements-editor-sidebar

fix(frontend): improve editor typography, heading hierarchy, sidebar sizing, and fix markdown scroll bug

Author: jp-agenta

web/oss/src/components/Editor/plugins/markdown/markdownPlugin.tsx

@@ -123,20 +123,47 @@ const MarkdownPlugin = ({id}: {id: string}) => {
         return editor.registerCommand(
             KEY_ENTER_COMMAND,
             (event) => {
-                editor.update(() => {
-                    const selection = $getSelection()
-                    if (!$isRangeSelection(selection)) return false
-
-                    const anchorNode = selection.anchor.getNode()
-                    const topNode = anchorNode.getTopLevelElementOrThrow()
-
-                    if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
-                        event?.preventDefault()
-                        selection.insertRawText("\n")
-                        return true
-                    }
-                })
-                return true
+                let handled = false
+                editor.update(
+                    () => {
+                        const selection = $getSelection()
+                        if (!$isRangeSelection(selection)) return
+
+                        const anchorNode = selection.anchor.getNode()
+                        const topNode = anchorNode.getTopLevelElementOrThrow()
+
+                        if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
+                            event?.preventDefault()
+
+                            // Save scroll position before inserting text to prevent
+                            // the browser from auto-scrolling to the bottom
+                            const rootElement = editor.getRootElement()
+                            const scrollContainer = rootElement?.closest(
+                                ".agenta-editor-wrapper",
+                            ) as HTMLElement | null
+                            const savedScrollTop = scrollContainer?.scrollTop ?? 0
+                            const savedElementScrollTop = rootElement?.scrollTop ?? 0
+
+                            selection.insertRawText("\n")
+
+                            // Restore scroll position after DOM update
+                            if (scrollContainer) {
+                                requestAnimationFrame(() => {
+                                    scrollContainer.scrollTop = savedScrollTop
+                                })
+                            }
+                            if (rootElement) {
+                                requestAnimationFrame(() => {
+                                    rootElement.scrollTop = savedElementScrollTop
+                                })
+                            }
+
+                            handled = true
+                        }
+                    },
+                    {discrete: true},
+                )
+                return handled
             },
             COMMAND_PRIORITY_HIGH,
         )

web/oss/src/components/Playground/Components/Menus/SelectVariant/index.tsx

@@ -304,7 +304,7 @@ const SelectVariant = ({
 
     // Normal mode: standard picker
     return (
-        <div style={style ?? {width: 120}}>
+        <div style={style ?? {width: 200}}>
             <EntityPicker<PlaygroundRevisionSelectionResult>
                 variant="tree-select"
                 adapter={adapter}

web/oss/src/styles/code-editor-styles.css

@@ -1,7 +1,7 @@
 .code-editor {
     /* === Editor container === */
     .editor-code {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+        font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
         position: relative;
         white-space: pre;
         tab-size: 2;
@@ -10,7 +10,6 @@
         /* Initialize CSS counter for line numbers */
         counter-reset: line-number;
 
-        font-family: Menlo, Consolas, Monaco, monospace;
         display: block;
         line-height: 1.53;
         font-size: 13px;

web/oss/src/styles/editor-theme.css

@@ -41,7 +41,7 @@ h1 {
     max-width: 100%;
     color: #000;
     position: relative;
-    line-height: 20px;
+    line-height: 24px;
     font-weight: 400;
     text-align: left;
     border-top-left-radius: 10px;
@@ -98,10 +98,11 @@ h1 {
 }
 
 .editor-text-code {
-    background-color: rgb(240, 242, 245);
-    padding: 1px 0.25rem;
-    font-family: Menlo, Consolas, Monaco, monospace;
-    font-size: 94%;
+    background-color: rgba(221, 223, 225, 0.49);
+    padding: 2px 0.35rem;
+    font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
+    font-size: 90%;
+    border-radius: 3px;
 }
 
 .editor-link {
@@ -127,7 +128,7 @@ h1 {
 
 .code-only .editor-code {
     background-color: rgb(240, 242, 245);
-    font-family: Menlo, Consolas, Monaco, monospace;
+    font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
     display: block;
     padding: 8px 8px 8px 52px;
     line-height: 1.53;
@@ -184,23 +185,73 @@ h1 {
 }
 
 .editor-heading-h1 {
-    font-size: 18px;
+    font-size: 28px;
     color: rgb(5, 5, 5);
-    font-weight: 400;
+    font-weight: 700;
     margin: 0;
+    margin-top: 24px;
     margin-bottom: 12px;
     padding: 0;
-    line-height: 1.5;
+    padding-bottom: 8px;
+    letter-spacing: -0.3px;
+    line-height: 1.4;
+    border-bottom: 1px solid #e0e0e0;
 }
 
 .editor-heading-h2 {
-    font-size: 15px;
-    color: rgb(101, 103, 107);
-    font-weight: 700;
+    font-size: 24px;
+    color: rgb(5, 5, 5);
+    font-weight: 600;
+    margin: 0;
+    margin-top: 20px;
+    margin-bottom: 10px;
+    padding: 0;
+    padding-bottom: 6px;
+    line-height: 1.35;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.editor-heading-h3 {
+    font-size: 20px;
+    color: rgb(5, 5, 5);
+    font-weight: 600;
+    margin: 0;
+    margin-top: 18px;
+    margin-bottom: 8px;
+    padding: 0;
+    line-height: 1.35;
+}
+
+.editor-heading-h4 {
+    font-size: 18px;
+    color: rgb(5, 5, 5);
+    font-weight: 600;
+    margin: 0;
+    margin-top: 16px;
+    margin-bottom: 6px;
+    padding: 0;
+    line-height: 1.35;
+}
+
+.editor-heading-h5 {
+    font-size: 16px;
+    color: rgb(5, 5, 5);
+    font-weight: 600;
+    margin: 0;
+    margin-top: 14px;
+    margin-bottom: 4px;
+    padding: 0;
+    line-height: 1.35;
+}
+
+.editor-heading-h6 {
+    font-size: 14px;
+    color: rgb(37, 37, 37);
+    font-weight: 600;
     margin: 0;
-    margin-top: 10px;
+    margin-top: 12px;
+    margin-bottom: 4px;
     padding: 0;
-    text-transform: uppercase;
     line-height: 1.35;
 }
 

web/oss/src/styles/globals.css

@@ -67,8 +67,8 @@ body {
 }
 
 .editor-input > p {
-    margin-top: 4px !important;
-    margin-bottom: 4px !important;
+    margin-top: 5px !important;
+    margin-bottom: 8px !important;
 }
 
 .hover-button-wrapper {
@@ -180,22 +180,26 @@ body {
 
 .editor-inner:not(.code-editor) {
     .editor-code {
-        background-color: rgb(240, 242, 245);
-        font-family: Menlo, Consolas, Monaco, monospace;
+        background-color: rgba(223, 224, 227, 0.28);
+        font-family: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, Monaco, monospace;
         display: block;
         padding: 8px;
         line-height: 1.53;
-        font-size: 13px;
+        font-size: 13.5px;
         margin: 0;
-        margin-top: 8px;
-        margin-bottom: 8px;
+        margin-top: 12px;
+        margin-bottom: 12px;
         overflow-x: auto;
         position: relative;
         tab-size: 2;
+        border-radius: 6px;
+        border: 1px solid rgba(108, 112, 118, 0.05);
     }
 
     > .editor-input.markdown-view > .editor-code {
         background-color: transparent;
+        border: none;
+        font-size: 14px;
     }
     > .editor-input:not(.markdown-view) > .editor-code {
         &:after {

web/oss/src/styles/tokens/antd-themeConfig.json

@@ -924,7 +924,7 @@
             "lineWidth": 1,
             "lineHeight": 1.6666666666666667,
             "fontSizeLG": 14,
-            "fontSize": 12,
+            "fontSize": 13,
             "controlItemBgActive": "#f5f7fa",
             "controlHeightSM": 24,
             "controlHeightLG": 34,
@@ -944,12 +944,12 @@
             "itemSelectedBg": "#f5f7fa",
             "itemHoverColor": "#1c2c3d",
             "itemHoverBg": "rgba(5, 23, 41, 0.06)",
-            "itemHeight": 28,
+            "itemHeight": 32,
             "itemDisabledColor": "#bdc7d1",
             "itemColor": "#586673",
             "itemBorderRadius": 10,
             "itemBg": "#ffffff",
-            "iconSize": 12,
+            "iconSize": 14,
             "horizontalItemSelectedColor": "#1c2c3d",
             "horizontalItemSelectedBg": "rgba(0, 0, 0, 0)",
             "horizontalItemHoverColor": "#1c2c3d",

web/packages/agenta-ui/src/Editor/plugins/markdown/markdownPlugin.tsx

@@ -124,20 +124,47 @@ const MarkdownPlugin = ({id}: {id: string}) => {
         return editor.registerCommand(
             KEY_ENTER_COMMAND,
             (event) => {
-                editor.update(() => {
-                    const selection = $getSelection()
-                    if (!$isRangeSelection(selection)) return false
-
-                    const anchorNode = selection.anchor.getNode()
-                    const topNode = anchorNode.getTopLevelElementOrThrow()
-
-                    if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
-                        event?.preventDefault()
-                        selection.insertRawText("\n")
-                        return true
-                    }
-                })
-                return true
+                let handled = false
+                editor.update(
+                    () => {
+                        const selection = $getSelection()
+                        if (!$isRangeSelection(selection)) return
+
+                        const anchorNode = selection.anchor.getNode()
+                        const topNode = anchorNode.getTopLevelElementOrThrow()
+
+                        if ($isCodeNode(topNode) && topNode.getLanguage() === "markdown") {
+                            event?.preventDefault()
+
+                            // Save scroll position before inserting text to prevent
+                            // the browser from auto-scrolling to the bottom
+                            const rootElement = editor.getRootElement()
+                            const scrollContainer = rootElement?.closest(
+                                ".agenta-editor-wrapper",
+                            ) as HTMLElement | null
+                            const savedScrollTop = scrollContainer?.scrollTop ?? 0
+                            const savedElementScrollTop = rootElement?.scrollTop ?? 0
+
+                            selection.insertRawText("\n")
+
+                            // Restore scroll position after DOM update
+                            if (scrollContainer) {
+                                requestAnimationFrame(() => {
+                                    scrollContainer.scrollTop = savedScrollTop
+                                })
+                            }
+                            if (rootElement) {
+                                requestAnimationFrame(() => {
+                                    rootElement.scrollTop = savedElementScrollTop
+                                })
+                            }
+
+                            handled = true
+                        }
+                    },
+                    {discrete: true},
+                )
+                return handled
             },
             COMMAND_PRIORITY_HIGH,
         )