fix: output css error when preflight selection (#4483)

Author: zhangmo8

packages-integrations/inspector/client/composables/codemirror.ts

@@ -116,10 +116,20 @@ export function useCodeMirror(
     (v) => {
       if (v !== cm.state.doc.toString()) {
         skip = true
+
         const selections = cm.state.selection.ranges
+        const newContent = v
+        const newLength = newContent.length
+
+        const validSelections = selections.map((range) => {
+          const from = Math.min(range.from, newLength)
+          const to = Math.min(range.to, newLength)
+          return EditorSelection.range(from, to)
+        })
+
         cm.dispatch({
-          changes: { from: 0, to: cm.state.doc.length, insert: v },
-          selection: EditorSelection.create(selections),
+          changes: { from: 0, to: cm.state.doc.length, insert: newContent },
+          selection: EditorSelection.create(validSelections),
         })
       }
     },

playground/src/auto-imports.d.ts

@@ -87,6 +87,7 @@ declare global {
   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
   const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
   const onLongPress: typeof import('@vueuse/core')['onLongPress']
@@ -186,6 +187,7 @@ declare global {
   const useCloned: typeof import('@vueuse/core')['useCloned']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
   const useCounter: typeof import('@vueuse/core')['useCounter']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVar: typeof import('@vueuse/core')['useCssVar']
@@ -442,6 +444,7 @@ declare module 'vue' {
     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
     readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
@@ -540,6 +543,7 @@ declare module 'vue' {
     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>

playground/src/components.d.ts

@@ -7,32 +7,32 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Analyzer: typeof import('./../../packages-engine/inspector/client/components/Analyzer.vue')['default']
-    AnalyzerItem: typeof import('./../../packages-engine/inspector/client/components/AnalyzerItem.vue')['default']
-    CodeMirror: typeof import('./../../packages-engine/inspector/client/components/CodeMirror.vue')['default']
-    Copy: typeof import('./../../packages-engine/inspector/client/components/Copy.vue')['default']
+    Analyzer: typeof import('./../../packages-integrations/inspector/client/components/Analyzer.vue')['default']
+    AnalyzerItem: typeof import('./../../packages-integrations/inspector/client/components/AnalyzerItem.vue')['default']
+    CodeMirror: typeof import('./../../packages-integrations/inspector/client/components/CodeMirror.vue')['default']
+    Copy: typeof import('./../../packages-integrations/inspector/client/components/Copy.vue')['default']
     Editor: typeof import('./components/Editor.vue')['default']
-    FileIcon: typeof import('./../../packages-engine/inspector/client/components/FileIcon.vue')['default']
+    FileIcon: typeof import('./../../packages-integrations/inspector/client/components/FileIcon.vue')['default']
     HeaderBar: typeof import('./components/HeaderBar.vue')['default']
-    ModuleId: typeof import('./../../packages-engine/inspector/client/components/ModuleId.vue')['default']
-    ModuleInfo: typeof import('./../../packages-engine/inspector/client/components/ModuleInfo.vue')['default']
-    ModuleTreeNode: typeof import('./../../packages-engine/inspector/client/components/ModuleTreeNode.vue')['default']
-    NarBar: typeof import('./../../packages-engine/inspector/client/components/NarBar.vue')['default']
-    Overview: typeof import('./../../packages-engine/inspector/client/components/Overview.vue')['default']
-    OverviewTabs: typeof import('./../../packages-engine/inspector/client/components/OverviewTabs.vue')['default']
+    ModuleId: typeof import('./../../packages-integrations/inspector/client/components/ModuleId.vue')['default']
+    ModuleInfo: typeof import('./../../packages-integrations/inspector/client/components/ModuleInfo.vue')['default']
+    ModuleTreeNode: typeof import('./../../packages-integrations/inspector/client/components/ModuleTreeNode.vue')['default']
+    NarBar: typeof import('./../../packages-integrations/inspector/client/components/NarBar.vue')['default']
+    Overview: typeof import('./../../packages-integrations/inspector/client/components/Overview.vue')['default']
+    OverviewTabs: typeof import('./../../packages-integrations/inspector/client/components/OverviewTabs.vue')['default']
     PanelConfig: typeof import('./components/panel/PanelConfig.vue')['default']
     PanelCustomCss: typeof import('./components/panel/PanelCustomCss.vue')['default']
     PanelHtml: typeof import('./components/panel/PanelHtml.vue')['default']
     PanelOutputCss: typeof import('./components/panel/PanelOutputCss.vue')['default']
     Playground: typeof import('./components/Playground.vue')['default']
     Preview: typeof import('./components/Preview.vue')['default']
-    ReplPlayground: typeof import('./../../packages-engine/inspector/client/components/ReplPlayground.vue')['default']
+    ReplPlayground: typeof import('./../../packages-integrations/inspector/client/components/ReplPlayground.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SelectVersion: typeof import('./components/SelectVersion.vue')['default']
-    Sidebar: typeof import('./../../packages-engine/inspector/client/components/Sidebar.vue')['default']
-    StatusBar: typeof import('./../../packages-engine/inspector/client/components/StatusBar.vue')['default']
-    Tabs: typeof import('./../../packages-engine/inspector/client/components/Tabs.vue')['default']
-    TitleBar: typeof import('./../../packages-engine/inspector/client/components/TitleBar.vue')['default']
+    Sidebar: typeof import('./../../packages-integrations/inspector/client/components/Sidebar.vue')['default']
+    StatusBar: typeof import('./../../packages-integrations/inspector/client/components/StatusBar.vue')['default']
+    Tabs: typeof import('./../../packages-integrations/inspector/client/components/Tabs.vue')['default']
+    TitleBar: typeof import('./../../packages-integrations/inspector/client/components/TitleBar.vue')['default']
   }
 }