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:
parent
53563acac0
commit
c4d41b12dc
|
@ -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) => {
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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%"
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue