feat: Configurable and compatible with keyPath changes

This commit is contained in:
raojinlin 2024-02-23 10:24:11 +08:00
parent 493b339a37
commit 029b227cde
4 changed files with 38 additions and 11 deletions

View File

@ -22,6 +22,14 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
keyPath: {
type: String,
default: "",
},
rememberScroll: {
type: Boolean,
default: true,
}
}) })
const emit = defineEmits(['reset', 'input', 'save']) const emit = defineEmits(['reset', 'input', 'save'])
@ -90,12 +98,14 @@ onMounted(async () => {
emit('save') emit('save')
}); });
if (props.rememberScroll) {
editorNode.onDidScrollChange((event) => { editorNode.onDidScrollChange((event) => {
// // Update scrolltop when scroll height changes, ie. content changes
if (!event.scrollHeightChanged) { if (!event.scrollHeightChanged) {
scrollTop.value = event.scrollTop; scrollTop.value = event.scrollTop;
} }
}) })
}
// editorNode.onDidChangeModelLanguageConfiguration(() => { // editorNode.onDidChangeModelLanguageConfiguration(() => {
// editorNode?.getAction('editor.action.formatDocument')?.run() // editorNode?.getAction('editor.action.formatDocument')?.run()
@ -111,19 +121,33 @@ onMounted(async () => {
watch( watch(
() => props.content, () => props.content,
async (content) => { async (content, oldContent, onCleanup) => {
if (editorNode != null) { if (editorNode != null) {
editorNode.setValue(content) editorNode.setValue(content)
editorNode.onDidLayoutChange(() => {
if (scrollTop.value > 0) { const disposable = editorNode.onDidLayoutChange(() => {
if (props.rememberScroll && scrollTop.value > 0) {
editorNode.setScrollTop(scrollTop.value) editorNode.setScrollTop(scrollTop.value)
} }
}) });
onCleanup(() => disposable.dispose())
await nextTick(() => emit('reset', content)) await nextTick(() => emit('reset', content))
} }
}, },
) )
watch(
() => props.keyPath,
() => {
if (editorNode != null) {
scrollTop.value = 0
editorNode.setScrollTop(0)
}
}
)
watch( watch(
() => readonlyValue.value, () => readonlyValue.value,
(readOnly) => { (readOnly) => {

View File

@ -175,6 +175,7 @@ const onSave = () => {
:border="true" :border="true"
:content="displayValue" :content="displayValue"
:language="viewLanguage" :language="viewLanguage"
:keyPath="viewAs.field"
class="flex-item-expand" class="flex-item-expand"
@input="onInput" @input="onInput"
@reset="onInput" @reset="onInput"

View File

@ -149,6 +149,7 @@ defineExpose({
v-show="!props.loading" v-show="!props.loading"
:content="displayValue" :content="displayValue"
:loading="props.loading" :loading="props.loading"
:keyPath="props.keyPath"
class="flex-item-expand" class="flex-item-expand"
language="json" language="json"
style="height: 100%" style="height: 100%"

View File

@ -204,6 +204,7 @@ defineExpose({
:content="displayValue" :content="displayValue"
:language="viewLanguage" :language="viewLanguage"
:loading="props.loading" :loading="props.loading"
:keyPath="props.keyPath"
class="flex-item-expand" class="flex-item-expand"
style="height: 100%" style="height: 100%"
@input="onInput" @input="onInput"