lingling
/
tiny-rdm
mirror of https://github.com/tiny-craft/tiny-rdm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: monaco editor can not adjust height when parent node's size changes from large to small

This commit is contained in:
Lykin 2023-12-11 18:32:16 +08:00
parent ac76131f18
commit e942f41f66
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/content_value/ContentEditor.vue
View File

@ -152,7 +152,9 @@ onUnmounted(() => {
</script>
<template>
<div ref="editorRef" :class="{ 'editor-border': props.border === true }" />
<div :class="{ 'editor-border': props.border === true }" style="position: relative">
<div ref="editorRef" class="editor-inst" />
</div>
</template>
<style lang="scss" scoped>
@ -162,4 +164,12 @@ onUnmounted(() => {
padding: 3px;
box-sizing: border-box;
}
.editor-inst {
position: absolute;
top: 2px;
bottom: 2px;
left: 2px;
right: 2px;
}
</style>

13
frontend/src/components/content_value/ContentEntryEditor.vue
View File

@ -157,8 +157,8 @@ const onSave = () => {
<template>
<div v-show="show" class="entry-editor flex-box-v">
<n-card :title="$t('interface.edit_row')" autofocus size="small" style="height: 100%">
<div class="editor-content flex-box-v" style="height: 100%">
<n-card :title="$t('interface.edit_row')" autofocus class="flex-item-expand" size="small">
<div class="editor-content flex-box-v flex-item-expand">
<!-- field -->
<div class="editor-content-item flex-box-v">
<div class="editor-content-item-label">{{ props.fieldLabel }}</div>
@ -180,7 +180,6 @@ const onSave = () => {
:language="viewLanguage"
:show-line-num="prefStore.showLineNum"
class="flex-item-expand"
style="height: 100%"
@input="onInput"
@reset="onInput"
@save="onSave" />
@ -248,7 +247,7 @@ const onSave = () => {
}
&-label {
line-height: 1.25;
height: 18px;
color: v-bind('themeVars.textColor3');
font-size: 13px;
padding: 5px 0;
@ -260,6 +259,12 @@ const onSave = () => {
}
}
:deep(.n-card__content) {
display: flex;
flex-direction: column;
flex-grow: 1;
}
:deep(.n-card__action) {
padding: 5px 10px;
background-color: unset;