tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

fix: markdown editor scroll issues with max-height (#5031)

Browse Source 
* add markdown editor stories to show scrolling bug

* add story

* update story content

* fix markdown editor scroll

* fix space

* lint
This commit is contained in:
Truman Gao
2026-01-02 19:33:20 -08:00
committed by GitHub
parent 09a0b34df3
commit 3fc18feacf
3 changed files with 111 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/ui/src/components/base/MarkdownEditor.vue
View File

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