fix markdown editor scroll

Author: tdgao

packages/assets/styles/defaults.scss

@@ -61,21 +61,12 @@ textarea,
 	font-weight: var(--font-weight-medium);
 	transition: box-shadow 0.1s ease-in-out;
 	min-height: 36px;
-	box-shadow:
+		box-shadow:
 		var(--shadow-inset-sm),
 		0 0 0 0 transparent;
 	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
@@ -270,7 +270,7 @@
 import { history, historyKeymap, indentWithTab } from '@codemirror/commands'
 import { markdown } from '@codemirror/lang-markdown'
 import { Compartment, EditorState } from '@codemirror/state'
-import { EditorView, keymap, placeholder as cm_placeholder } from '@codemirror/view'
+import { placeholder as cm_placeholder, EditorView, keymap } from '@codemirror/view'
 import {
 	AlignLeftIcon,
 	BoldIcon,
@@ -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>