From 3fc18feacf4b4bbea5ffb1952bc9888a795528a0 Mon Sep 17 00:00:00 2001
From: Truman Gao <106889354+tdgao@users.noreply.github.com>
Date: Fri, 2 Jan 2026 19:33:20 -0800
Subject: [PATCH] fix: markdown editor scroll issues with max-height (#5031)
* add markdown editor stories to show scrolling bug
* add story
* update story content
* fix markdown editor scroll
* fix space
* lint
---
packages/assets/styles/defaults.scss | 9 ---
.../ui/src/components/base/MarkdownEditor.vue | 53 +++++++++----
.../stories/base/MarkdownEditor.stories.ts | 76 ++++++++++++++++++-
3 files changed, 111 insertions(+), 27 deletions(-)
diff --git a/packages/assets/styles/defaults.scss b/packages/assets/styles/defaults.scss
index e0490a1d6..8c3c5a538 100644
--- a/packages/assets/styles/defaults.scss
+++ b/packages/assets/styles/defaults.scss
@@ -67,15 +67,6 @@ textarea,
border: none;
outline: none;
- &:focus,
- &:focus-visible {
- box-shadow:
- inset 0 0 0 transparent,
- 0 0 0 0.25rem var(--color-brand-shadow);
- color: var(--color-contrast);
- outline: none;
- }
-
&:disabled,
&[disabled] {
opacity: 0.6;
diff --git a/packages/ui/src/components/base/MarkdownEditor.vue b/packages/ui/src/components/base/MarkdownEditor.vue
index 90217e25c..e8b6bc09e 100644
--- a/packages/ui/src/components/base/MarkdownEditor.vue
+++ b/packages/ui/src/components/base/MarkdownEditor.vue
@@ -48,7 +48,7 @@
-
+
{
const theme = EditorView.theme({
// in defaults.scss there's references to .cm-content and such to inherit global styles
+ '&': {
+ borderRadius: 'var(--radius-md)',
+ background: 'var(--color-button-bg)',
+ border: '0.25rem solid transparent',
+ transition: 'border-color 0.1s ease-in-out',
+ },
+ '&.cm-focused': {
+ 'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
+ color: 'var(--color-contrast)',
+ outline: 'none',
+ },
+ '.cm-focused': {
+ border: 'none',
+ },
'.cm-content': {
marginBlockEnd: '0.5rem',
padding: '0.5rem',
minHeight: '200px',
caretColor: 'var(--color-contrast)',
width: '100%',
- overflowX: 'scroll',
- maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
- overflowY: 'scroll',
},
'.cm-scroller': {
+ borderRadius: 'var(--radius-md)',
height: '100%',
- overflow: 'visible',
+ maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
+ overflow: 'auto',
},
})
@@ -581,23 +594,35 @@ watch(
editorThemeCompartment.reconfigure(
EditorView.theme({
// in defaults.scss there's references to .cm-content and such to inherit global styles
+ '&': {
+ borderRadius: 'var(--radius-md)',
+ background: 'var(--color-button-bg)',
+ border: '0.25rem solid transparent',
+ transition: 'border-color 0.1s ease-in-out',
+ },
+ '&.cm-focused': {
+ 'box-shadow': 'inset 0 0 0 transparent, 0 0 0 0.25rem var(--color-brand-shadow)',
+ color: 'var(--color-contrast)',
+ outline: 'none',
+ },
+ '.cm-focused': {
+ border: 'none',
+ },
'.cm-content': {
marginBlockEnd: '0.5rem',
padding: '0.5rem',
minHeight: '200px',
caretColor: 'var(--color-contrast)',
width: '100%',
- overflowX: 'scroll',
- maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
- overflowY: 'scroll',
-
opacity: newValue ? 0.6 : 1,
pointerEvents: newValue ? 'none' : 'all',
cursor: newValue ? 'not-allowed' : 'auto',
},
'.cm-scroller': {
+ borderRadius: 'var(--radius-md)',
height: '100%',
- overflow: 'visible',
+ maxHeight: props.maxHeight ? `${props.maxHeight}px` : 'unset',
+ overflow: 'auto',
},
}),
),
@@ -957,8 +982,4 @@ function openVideoModal() {
pointer-events: none;
cursor: not-allowed;
}
-
-:deep(.cm-content) {
- overflow: auto;
-}
diff --git a/packages/ui/src/stories/base/MarkdownEditor.stories.ts b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
index 0f8f07ebf..3f3a8d74e 100644
--- a/packages/ui/src/stories/base/MarkdownEditor.stories.ts
+++ b/packages/ui/src/stories/base/MarkdownEditor.stories.ts
@@ -10,6 +10,48 @@ const meta = {
export default meta
+const CONTENT = `# Sample Markdown Document
+
+This is a demonstration of the markdown editor component.
+
+## Features
+
+The editor supports various markdown formatting options:
+
+- **Bold text** for emphasis
+- *Italic text* for subtle emphasis
+- \`Inline code\` for technical terms
+- [Links](https://example.com) for references
+
+## Code Blocks
+
+\`\`\`javascript
+function greet(name) {
+ return \`Hello, \${name}!\`;
+}
+\`\`\`
+
+## Lists
+
+1. First item
+2. Second item
+3. Third item
+
+### Nested Lists
+
+- Parent item
+ - Child item
+ - Another child
+- Another parent
+
+## Blockquotes
+
+> This is a blockquote that can be used for callouts or citations.
+
+## Conclusion
+
+This content demonstrates the editor's capabilities.`
+
export const Default: StoryObj = {
render: () => ({
components: { MarkdownEditor },
@@ -17,7 +59,7 @@ export const Default: StoryObj = {
const content = ref('# Hello World\n\nThis is some **markdown** content.')
return { content }
},
- template: `
+ template: /*html*/ `
@@ -32,10 +74,40 @@ export const WithPlaceholder: StoryObj = {
const content = ref('')
return { content }
},
- template: `
+ template: /*html*/ `
`,
}),
}
+
+export const WithContent: StoryObj = {
+ render: () => ({
+ components: { MarkdownEditor },
+ setup() {
+ const content = ref(CONTENT)
+ return { content }
+ },
+ template: /*html*/ `
+
+
+
+ `,
+ }),
+}
+
+export const MaxHeightWithScroll: StoryObj = {
+ render: () => ({
+ components: { MarkdownEditor },
+ setup() {
+ const content = ref(CONTENT)
+ return { content }
+ },
+ template: /*html*/ `
+
+
+
+ `,
+ }),
+}