more format

src/components/editors/ScriptEditor/index.tsx

@@ -1,11 +1,11 @@
+import React, { useEffect } from 'react'
+import MonacoEditor from 'monaco-editor'
 import Editor, { Monaco } from '@monaco-editor/react'
 import {
   leftBarTrackScaleWidth,
   TimelineStore,
   useTimeline,
 } from '@aitube/timeline'
-import MonacoEditor from 'monaco-editor'
-import { useEffect } from 'react'
 
 import { useScriptEditor } from '@/services/editors/script-editor/useScriptEditor'
 import { useUI } from '@/services/ui'
@@ -37,7 +37,11 @@ export function ScriptEditor() {
     if (!standaloneCodeEditor) {
       return
     }
-    // let's do something basic for now: we disable the
+
+    // various things we can do here!
+    // move the scroll:
+    // editor.setScrollPosition({ scrollTop: horizontalTimelineRatio })
+
     // timeline-to-editor scroll sync when the user is
     // hovering the editor
     if (useScriptEditor.getState().mouseIsInside) {
@@ -49,7 +53,7 @@ export function ScriptEditor() {
         scrollTop: horizontalTimelineRatio,
       })
     }
-    // let's do something basic for now: we disable the
+        // let's do something basic for now: we disable the
     // Scroll to a specific line:
     // editor.revealLine(15);
 
@@ -87,6 +91,7 @@ export function ScriptEditor() {
         onDidScrollChange({ scrollTop, scrollLeft, scrollWidth, scrollHeight })
       }
     )
+
     // as an optimization we can use this later, for surgical edits,
     // to perform real time updates of the timeline
 
@@ -122,6 +127,7 @@ export function ScriptEditor() {
         base: 'vs-dark', // Base theme (you can change to vs for a lighter theme if preferred)
         inherit: true, // Inherit the default rules
         rules: [
+          // You can define token-specific styles here if needed
           { token: 'scene.int', foreground: '#4EC9B0' },
           { token: 'scene.ext', foreground: '#9CDCFE' },
           { token: 'character', foreground: '#DCDCAA' },
@@ -144,10 +150,12 @@ export function ScriptEditor() {
           'editorIndentGuide.background': '#78716c', // Indent guides color
           'editorIndentGuide.activeBackground': '#a8a29e', // Active indent guides color
           'editorWhitespace.foreground': '#a8a29e', // Whitespace symbols color
+          // Add more color overrides if needed here
         },
       })
     }
 
+    // Apply the custom theme immediately after defining it
     monaco.editor.setTheme(themes.backstage.id)
 
     const textModel: MonacoEditor.editor.ITextModel = monaco.editor.createModel(