fix(editor): Fix code node’s content property to be reactive (#6931)

Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
This commit is contained in:
OlegIvaniv 2023-08-15 17:16:38 +02:00 committed by GitHub
parent 6c607635ed
commit 3b75bc6bc1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -83,12 +83,16 @@ export default defineComponent({
mode(newMode, previousMode: CodeExecutionMode) { mode(newMode, previousMode: CodeExecutionMode) {
this.reloadLinter(); this.reloadLinter();
if (this.content.trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]) { if (
this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[this.language]?.[previousMode]
) {
this.refreshPlaceholder(); this.refreshPlaceholder();
} }
}, },
language(newLanguage, previousLanguage: CodeNodeEditorLanguage) { language(newLanguage, previousLanguage: CodeNodeEditorLanguage) {
if (this.content.trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]) { if (
this.getCurrentEditorContent().trim() === CODE_PLACEHOLDERS[previousLanguage]?.[this.mode]
) {
this.refreshPlaceholder(); this.refreshPlaceholder();
} }
@ -100,11 +104,6 @@ export default defineComponent({
}, },
computed: { computed: {
...mapStores(useRootStore), ...mapStores(useRootStore),
content(): string {
if (!this.editor) return '';
return this.editor.state.doc.toString();
},
placeholder(): string { placeholder(): string {
return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? ''; return CODE_PLACEHOLDERS[this.language]?.[this.mode] ?? '';
}, },
@ -120,6 +119,9 @@ export default defineComponent({
}, },
}, },
methods: { methods: {
getCurrentEditorContent() {
return this.editor?.state.doc.toString() ?? '';
},
onMouseOver(event: MouseEvent) { onMouseOver(event: MouseEvent) {
const fromElement = event.relatedTarget as HTMLElement; const fromElement = event.relatedTarget as HTMLElement;
const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined; const ref = this.$refs.codeNodeEditorContainer as HTMLDivElement | undefined;
@ -151,7 +153,7 @@ export default defineComponent({
if (!this.editor) return; if (!this.editor) return;
this.editor.dispatch({ this.editor.dispatch({
changes: { from: 0, to: this.content.length, insert: this.placeholder }, changes: { from: 0, to: this.getCurrentEditorContent().length, insert: this.placeholder },
}); });
}, },
line(lineNumber: number): Line | null { line(lineNumber: number): Line | null {
@ -166,7 +168,7 @@ export default defineComponent({
if (lineNumber === 'final') { if (lineNumber === 'final') {
this.editor.dispatch({ this.editor.dispatch({
selection: { anchor: (this.modelValue ?? this.content).length }, selection: { anchor: (this.modelValue ?? this.getCurrentEditorContent()).length },
}); });
return; return;
} }
@ -187,7 +189,7 @@ export default defineComponent({
try { try {
// @ts-ignore - undocumented fields // @ts-ignore - undocumented fields
const { fromA, toB } = viewUpdate?.changedRanges[0]; const { fromA, toB } = viewUpdate?.changedRanges[0];
const full = this.content.slice(fromA, toB); const full = this.getCurrentEditorContent().slice(fromA, toB);
const lastDotIndex = full.lastIndexOf('.'); const lastDotIndex = full.lastIndexOf('.');
let context = null; let context = null;