fix(vue-playground): can not focus new file

Author: 2214962083

.vscode/settings.json

@@ -47,6 +47,7 @@
     "source.fixAll.stylelint": true
   },
   "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true,
       "source.fixAll.stylelint": true

packages/vue-playground/src/playground/hooks/useMonaco.ts

@@ -121,6 +121,7 @@ export function useMonaco(target: Ref<HTMLElement | undefined>, options: UseMona
       async () => {
         const activeFileName = unref(activeFile)?.filename
         const activeModel = getModels()?.find(model => model.uri.path.endsWith(activeFileName))
+
         if (editor && activeModel && !activeModel.isDisposed() && editor.getModel() !== activeModel) {
           editor.setModel(activeModel)
           editor.onDidChangeModelContent(() => {

packages/vue-playground/src/playground/hooks/useMonacoModels.ts

@@ -36,15 +36,20 @@ export function useMonacoModels(options: UseMonacoModelsOptions) {
     () => {
       if (!unref(isSetup) || !getEditor() || !unref(projectId)) return
 
-      if (!models || !models.length) {
+      const findModel = (file: File) =>
+        models?.find(model => getFileUri(monaco, unref(projectId), file.filename).path === model.uri.path)
+
+      if (!models || !models.length || models.length !== unref(files).length) {
         const newModels = unref(files).map(file => {
-          return monaco.editor.createModel(
-            file.code,
-            getFileLanguage(file),
-            getFileUri(monaco, unref(projectId), file.filename)
+          return (
+            findModel(file) ||
+            monaco.editor.createModel(
+              file.code,
+              getFileLanguage(file),
+              getFileUri(monaco, unref(projectId), file.filename)
+            )
           )
         })
-        console.log('newModels', newModels)
         setModels(newModels)
       } else {
         models.forEach(model => {