Skip to content

Commit

Permalink
feat(monaco): support to keep selection and cursor position (vuejs#99)
Browse files Browse the repository at this point in the history
  • Loading branch information
zqran authored Jun 22, 2023
1 parent b6a0b3b commit db8c1bd
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 7 deletions.
27 changes: 20 additions & 7 deletions src/monaco/Monaco.vue
Original file line number Diff line number Diff line change
Expand Up @@ -105,26 +105,26 @@ onMounted(async () => {
editor.value = editorInstance
// Support for semantic highlighting
const t = (editorInstance as any)._themeService._theme;
const t = (editorInstance as any)._themeService._theme
t.getTokenStyleMetadata = (
type: string,
modifiers: string[],
_language: string
) => {
const _readonly = modifiers.includes('readonly');
const _readonly = modifiers.includes('readonly')
switch (type) {
case 'function':
case 'method':
return { foreground: 12 };
return { foreground: 12 }
case 'class':
return { foreground: 11 };
return { foreground: 11 }
case 'variable':
case 'property':
return { foreground: _readonly ? 21 : 9 };
return { foreground: _readonly ? 21 : 9 }
default:
return { foreground: 0 };
return { foreground: 0 }
}
};
}
if (props.readonly) {
watch(
Expand All @@ -147,6 +147,11 @@ onMounted(async () => {
file.code
)
editorInstance.setModel(model)
if (file.selection) {
editorInstance.setSelection(file.selection)
editorInstance.focus()
}
},
{ immediate: true }
)
Expand All @@ -161,6 +166,14 @@ onMounted(async () => {
editorInstance.onDidChangeModelContent(() => {
emits('change', editorInstance.getValue())
})
editorInstance.onDidChangeCursorSelection(e => {
const selection = e.selection
const file = store.state.files[props.filename]
if (file) {
file.selection = selection
}
})
})
onBeforeUnmount(() => {
Expand Down
2 changes: 2 additions & 0 deletions src/store.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
SFCTemplateCompileOptions
} from 'vue/compiler-sfc'
import { OutputModes } from './output/types'
import { Selection } from 'monaco-editor-core'

const defaultMainFile = 'App.vue'

Expand Down Expand Up @@ -35,6 +36,7 @@ export class File {
css: '',
ssr: ''
}
selection: Selection | null = null

constructor(filename: string, code = '', hidden = false) {
this.filename = filename
Expand Down

0 comments on commit db8c1bd

Please sign in to comment.