feat: value editor maintains scroll offset after refresh #162

* feat: refresh string value keep scrolltop

* fix code styles

* delete unused code

* feat: Configurable and compatible with keyPath changes

* Fix props name format, use kebab-case

* Unify coding style

---------

Co-authored-by: raojinlin <raojinlin302@gmail.com>
This commit is contained in:
raojinlin 2024-02-26 10:34:21 +08:00 committed by GitHub
parent 53563acac0
commit c4d41b12dc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 42 additions and 1 deletions

View File

@ -22,10 +22,20 @@ 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'])
const scrollTop = ref(0)
const themeVars = useThemeVars() const themeVars = useThemeVars()
/** @type {HTMLElement|null} */ /** @type {HTMLElement|null} */
const editorRef = ref(null) const editorRef = ref(null)
@ -88,6 +98,15 @@ onMounted(async () => {
emit('save') emit('save')
}) })
if (props.rememberScroll) {
editorNode.onDidScrollChange((event) => {
// Update scrolltop when scroll height changes, ie. content changes
if (!event.scrollHeightChanged) {
scrollTop.value = event.scrollTop
}
})
}
// editorNode.onDidChangeModelLanguageConfiguration(() => { // editorNode.onDidChangeModelLanguageConfiguration(() => {
// editorNode?.getAction('editor.action.formatDocument')?.run() // editorNode?.getAction('editor.action.formatDocument')?.run()
// }) // })
@ -102,14 +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)
const disposable = editorNode.onDidLayoutChange(() => {
if (props.rememberScroll && scrollTop.value > 0) {
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"
:key-path="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"
:key-path="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"
:key-path="props.keyPath"
class="flex-item-expand" class="flex-item-expand"
style="height: 100%" style="height: 100%"
@input="onInput" @input="onInput"