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

@@ -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;

packages/ui/src/components/base/MarkdownEditor.vue

@@ -48,7 +48,7 @@
 				<Button :action="() => linkModal?.hide()"><XIcon /> Cancel</Button>
 				<Button
 					color="primary"
-					:disabled="linkValidationErrorMessage || !linkUrl"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
 					:action="
 						() => {
 							if (editor) markdownCommands.replaceSelection(editor, linkMarkdown)
@@ -189,7 +189,7 @@
 				<Button :action="() => videoModal?.hide()"><XIcon /> Cancel</Button>
 				<Button
 					color="primary"
-					:disabled="linkValidationErrorMessage || !linkUrl"
+					:disabled="!!linkValidationErrorMessage || !linkUrl"
 					:action="
 						() => {
 							if (editor) markdownCommands.replaceSelection(editor, videoMarkdown)
@@ -230,7 +230,7 @@
 			</div>
 		</div>
 		<div ref="editorRef" :class="{ hide: previewMode }" />
-		<div v-if="!previewMode" class="info-blurb">
+		<div v-if="!previewMode" class="info-blurb mt-2">
 			<div class="info-blurb">
 				<InfoIcon />
 				<span
@@ -345,19 +345,32 @@ onMounted(() => {
 
 	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;
-}
 </style>

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*/ `
 			<div class="h-96">
 				<MarkdownEditor v-model="content" />
 			</div>
@@ -32,10 +74,40 @@ export const WithPlaceholder: StoryObj = {
 			const content = ref('')
 			return { content }
 		},
-		template: `
+		template: /*html*/ `
 			<div class="h-96">
 				<MarkdownEditor v-model="content" placeholder="Write your description here..." />
 			</div>
 		`,
 	}),
 }
+
+export const WithContent: StoryObj = {
+	render: () => ({
+		components: { MarkdownEditor },
+		setup() {
+			const content = ref(CONTENT)
+			return { content }
+		},
+		template: /*html*/ `
+			<div>
+				<MarkdownEditor v-model="content" />
+			</div>
+		`,
+	}),
+}
+
+export const MaxHeightWithScroll: StoryObj = {
+	render: () => ({
+		components: { MarkdownEditor },
+		setup() {
+			const content = ref(CONTENT)
+			return { content }
+		},
+		template: /*html*/ `
+			<div>
+				<MarkdownEditor v-model="content" :max-height="300" />
+			</div>
+		`,
+	}),
+}