From 2d261e9ba240f58658ca95202947b9b3a7bd72af Mon Sep 17 00:00:00 2001
From: nighca <nighca@live.cn>
Date: Fri, 20 Dec 2024 15:42:21 +0800
Subject: [PATCH] LS integration for Rename & Formatting

---
 spx-gui/src/components/asset/index.ts         |  26 +-
 .../{asset => common}/RenameModal.vue         |   8 +-
 .../editor/code-editor/FormatButton.vue       |  10 +-
 .../editor/code-editor/code-editor.ts         | 273 ++++++++++++------
 .../components/editor/code-editor/common.ts   |  17 ++
 .../components/editor/code-editor/context.ts  |  20 +-
 .../editor/code-editor/document-base/index.ts |   4 +
 .../editor/code-editor/lsp/index.ts           |  31 +-
 .../editor/code-editor/ui/CodeEditorUI.vue    |  34 ++-
 .../ui/api-reference/APIReferenceUI.vue       |   1 +
 .../code-editor/ui/api-reference/index.ts     |   5 +
 .../editor/code-editor/ui/code-editor-ui.ts   |  30 +-
 .../editor/code-editor/ui/common.ts           |  16 -
 .../code-editor/ui/context-menu/index.ts      |   4 +-
 .../editor/code-editor/ui/formatting.ts       |   8 -
 .../editor/code-editor/ui/hover/index.ts      |   5 +-
 .../editor/preview/EditorPreview.vue          |  42 ++-
 spx-gui/src/models/common/asset-name.ts       |  12 +-
 spx-gui/src/utils/spx/highlighter.ts          |   3 +
 spx-gui/src/utils/spx/index.ts                |  20 ++
 tools/spxls/internal/server/command.go        |   4 +
 tools/spxls/internal/server/rename.go         |  17 +-
 tools/spxls/internal/server/rename_test.go    |  51 ++++
 23 files changed, 461 insertions(+), 180 deletions(-)
 rename spx-gui/src/components/{asset => common}/RenameModal.vue (90%)
 delete mode 100644 spx-gui/src/components/editor/code-editor/ui/formatting.ts

diff --git a/spx-gui/src/components/asset/index.ts b/spx-gui/src/components/asset/index.ts
index 649f540ff..a5659dea1 100644
--- a/spx-gui/src/components/asset/index.ts
+++ b/spx-gui/src/components/asset/index.ts
@@ -17,6 +17,7 @@ import { Monitor } from '@/models/widget/monitor'
 import * as assetName from '@/models/common/asset-name'
 import type { Costume } from '@/models/costume'
 import type { Widget } from '@/models/widget'
+import RenameModal from '../common/RenameModal.vue'
 import SoundRecorderModal from '../editor/sound/SoundRecorderModal.vue'
 import { useEditorCtx } from '../editor/EditorContextProvider.vue'
 import { useCodeEditorCtx } from '../editor/code-editor/context'
@@ -26,7 +27,6 @@ import AssetAddModal from './library/AssetAddModal.vue'
 import LoadFromScratchModal from './scratch/LoadFromScratchModal.vue'
 import PreprocessModal from './preprocessing/PreprocessModal.vue'
 import GroupCostumesModal from './animation/GroupCostumesModal.vue'
-import RenameModal from './RenameModal.vue'
 
 function selectAsset(project: Project, asset: AssetModel | undefined) {
   if (asset instanceof Sprite) project.select({ type: 'sprite', id: asset.id })
@@ -206,10 +206,10 @@ export function useRenameSprite() {
         validateName(name) {
           return assetName.validateSpriteName(name, editorCtx.project)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename sprite', zh: '重命名精灵' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(sprite), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(sprite), newName)
             sprite.setName(newName)
           })
         },
@@ -230,10 +230,10 @@ export function useRenameSound() {
         validateName(name) {
           return assetName.validateSoundName(name, editorCtx.project)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename sound', zh: '重命名声音' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(sound), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(sound), newName)
             sound.setName(newName)
           })
         },
@@ -254,10 +254,10 @@ export function useRenameCostume() {
         validateName(name) {
           return assetName.validateCostumeName(name, costume.parent)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename costume', zh: '重命名造型' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(costume), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(costume), newName)
             costume.setName(newName)
           })
         },
@@ -278,10 +278,10 @@ export function useRenameBackdrop() {
         validateName(name) {
           return assetName.validateBackdropName(name, editorCtx.project.stage)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename backdrop', zh: '重命名背景' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(backdrop), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(backdrop), newName)
             backdrop.setName(newName)
           })
         },
@@ -302,10 +302,10 @@ export function useRenameAnimation() {
         validateName(name) {
           return assetName.validateAnimationName(name, animation.sprite)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename animation', zh: '重命名动画' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(animation), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(animation), newName)
             animation.setName(newName)
           })
         },
@@ -326,10 +326,10 @@ export function useRenameWidget() {
         validateName(name) {
           return assetName.validateWidgetName(name, editorCtx.project.stage)
         },
-        async setName(newName) {
+        async applyName(newName) {
           const action = { name: { en: 'Rename widget', zh: '重命名控件' } }
           await editorCtx.project.history.doAction(action, async () => {
-            await codeEditorCtx.updateResourceReferencesOnRename(getResourceIdentifier(widget), newName)
+            await codeEditorCtx.renameResource(getResourceIdentifier(widget), newName)
             widget.setName(newName)
           })
         },
diff --git a/spx-gui/src/components/asset/RenameModal.vue b/spx-gui/src/components/common/RenameModal.vue
similarity index 90%
rename from spx-gui/src/components/asset/RenameModal.vue
rename to spx-gui/src/components/common/RenameModal.vue
index 312b3b4c8..ce65afdc2 100644
--- a/spx-gui/src/components/asset/RenameModal.vue
+++ b/spx-gui/src/components/common/RenameModal.vue
@@ -1,8 +1,12 @@
 <script lang="ts">
 export interface IRenameTarget {
+  /** Current name */
   name: string
+  /** Validate the new name */
   validateName(newName: string): LocaleMessage | null | undefined
-  setName(newName: string): Promise<void>
+  /** Apply the new name */
+  applyName(newName: string): Promise<void>
+  /** Tip for new name input */
   inputTip: LocaleMessage
 }
 </script>
@@ -31,7 +35,7 @@ const form = useForm({
 const handleSubmit = useMessageHandle(
   async () => {
     if (form.value.name !== props.target.name) {
-      await props.target.setName(form.value.name)
+      await props.target.applyName(form.value.name)
     }
     emit('resolved')
   },
diff --git a/spx-gui/src/components/editor/code-editor/FormatButton.vue b/spx-gui/src/components/editor/code-editor/FormatButton.vue
index 89d9cd21b..1ac8c2521 100644
--- a/spx-gui/src/components/editor/code-editor/FormatButton.vue
+++ b/spx-gui/src/components/editor/code-editor/FormatButton.vue
@@ -7,6 +7,7 @@
 <script setup lang="ts">
 import { UIButton } from '@/components/ui'
 import { useMessageHandle } from '@/utils/exception'
+import { useEditorCtx } from '../EditorContextProvider.vue'
 import { useCodeEditorCtx } from './context'
 import { getTextDocumentId } from './common'
 
@@ -14,12 +15,13 @@ const props = defineProps<{
   codeFilePath: string
 }>()
 
+const editorCtx = useEditorCtx()
 const codeEditorCtx = useCodeEditorCtx()
 const handleFormat = useMessageHandle(
-  () => {
-    const textDocumentId = getTextDocumentId(props.codeFilePath)
-    return codeEditorCtx.formatTextDocument(textDocumentId)
-  },
+  () =>
+    editorCtx.project.history.doAction({ name: { en: 'Format code', zh: '格式化代码' } }, () =>
+      codeEditorCtx.formatTextDocument(getTextDocumentId(props.codeFilePath))
+    ),
   {
     en: 'Failed to format',
     zh: '格式化失败'
diff --git a/spx-gui/src/components/editor/code-editor/code-editor.ts b/spx-gui/src/components/editor/code-editor/code-editor.ts
index 3ea8fbb19..572467a6b 100644
--- a/spx-gui/src/components/editor/code-editor/code-editor.ts
+++ b/spx-gui/src/components/editor/code-editor/code-editor.ts
@@ -1,6 +1,7 @@
 import * as lsp from 'vscode-languageserver-protocol'
 import { Disposable } from '@/utils/disposable'
 import Emitter from '@/utils/emitter'
+import { insertSpaces, tabSize } from '@/utils/spx/highlighter'
 import type { Runtime } from '@/models/runtime'
 import type { Project } from '@/models/project'
 import { Copilot } from './copilot'
@@ -17,10 +18,14 @@ import {
   ChatExplainKind,
   type ChatExplainTargetCodeSegment,
   builtInCommandCopilotReview,
-  type ChatTopicReview,
   builtInCommandGoToDefinition,
   type HoverContext,
-  type Hover
+  type Hover,
+  type ContextMenuContext,
+  type IContextMenuProvider,
+  type IHoverProvider,
+  builtInCommandRename,
+  type MenuItem
 } from './ui/code-editor-ui'
 import {
   type Action,
@@ -42,7 +47,10 @@ import {
   textDocumentId2ResourceModelId,
   parseDefinitionId,
   type Position,
-  type TextDocumentRange
+  type Selection,
+  type CommandArgs,
+  getTextDocumentId,
+  containsPosition
 } from './common'
 import * as spxDocumentationItems from './document-base/spx'
 import * as gopDocumentationItems from './document-base/gop'
@@ -145,7 +153,7 @@ class DiagnosticsProvider
   }
 }
 
-class HoverProvider {
+class HoverProvider implements IHoverProvider {
   constructor(
     private lspClient: SpxLSPClient,
     private documentBase: DocumentBase
@@ -172,10 +180,10 @@ class HoverProvider {
     }
   }
 
-  private async getGoToDefinitionAction(params: lsp.TextDocumentPositionParams) {
+  private async getGoToDefinitionAction(position: Position, lspParams: lsp.TextDocumentPositionParams) {
     const lspClient = this.lspClient
     const [definition, typeDefinition] = (
-      await Promise.all([lspClient.textDocumentDefinition(params), lspClient.textDocumentTypeDefinition(params)])
+      await Promise.all([lspClient.textDocumentDefinition(lspParams), lspClient.textDocumentTypeDefinition(lspParams)])
     ).map((def) => {
       if (def == null) return null
       if (Array.isArray(def)) return def[0]
@@ -183,14 +191,32 @@ class HoverProvider {
     })
     const location = definition ?? typeDefinition
     if (location == null) return null
+    const range = fromLSPRange(location.range)
+    if (containsPosition(range, position)) return null
     return {
       command: builtInCommandGoToDefinition,
       arguments: [
         {
           textDocument: { uri: location.uri },
-          range: fromLSPRange(location.range)
-        } satisfies TextDocumentRange
-      ]
+          range
+        }
+      ] satisfies CommandArgs<typeof builtInCommandGoToDefinition>
+    }
+  }
+
+  private async getRenameAction(ctx: HoverContext, position: Position, lspParams: lsp.TextDocumentPositionParams) {
+    const lspClient = this.lspClient
+    const result = await lspClient.textDocumentPrepareRename(lspParams)
+    if (result == null || !lsp.Range.is(result)) return null // For now, we support Range only
+    return {
+      command: builtInCommandRename,
+      arguments: [
+        {
+          textDocument: ctx.textDocument.id,
+          position,
+          range: fromLSPRange(result)
+        }
+      ] satisfies CommandArgs<typeof builtInCommandRename>
     }
   }
 
@@ -203,19 +229,102 @@ class HoverProvider {
     if (lspHover == null) return null
     const contents: DefinitionDocumentationString[] = []
     if (lsp.MarkupContent.is(lspHover.contents)) {
-      // For now, we only support MarkupContent
+      // For now, we support MarkupContent only
       contents.push(makeAdvancedMarkdownString(lspHover.contents.value))
     }
     let range: Range | undefined = undefined
     if (lspHover.range != null) range = fromLSPRange(lspHover.range)
-    const actions: Action[] = []
-    for (const a of await Promise.all([this.getExplainAction(lspHover), this.getGoToDefinitionAction(lspParams)])) {
-      if (a != null) actions.push(a)
-    }
+    const maybeActions = await Promise.all([
+      this.getExplainAction(lspHover),
+      this.getGoToDefinitionAction(position, lspParams),
+      this.getRenameAction(ctx, position, lspParams)
+    ])
+    const actions = maybeActions.filter((a) => a != null) as Action[]
     return { contents, range, actions }
   }
 }
 
+class ContextMenuProvider implements IContextMenuProvider {
+  constructor(private lspClient: SpxLSPClient) {}
+
+  private getExplainMenuItemForPosition({ textDocument }: ContextMenuContext, position: Position) {
+    const word = textDocument.getWordAtPosition(position)
+    if (word == null) return null
+    const wordStart = { ...position, column: word.startColumn }
+    const wordEnd = { ...position, column: word.endColumn }
+    const explainTarget: ChatExplainTargetCodeSegment = {
+      kind: ChatExplainKind.CodeSegment,
+      codeSegment: {
+        // TODO: use definition info from LS and explain definition instead of code-segment
+        textDocument: textDocument.id,
+        range: { start: wordStart, end: wordEnd },
+        content: word.word
+      }
+    }
+    return {
+      command: builtInCommandCopilotExplain,
+      arguments: [explainTarget] satisfies CommandArgs<typeof builtInCommandCopilotExplain>
+    }
+  }
+
+  private async getRenameMenuItemForPosition({ textDocument }: ContextMenuContext, position: Position) {
+    const lspParams = {
+      textDocument: textDocument.id,
+      position: toLSPPosition(position)
+    }
+    const result = await this.lspClient.textDocumentPrepareRename(lspParams)
+    if (result == null || !lsp.Range.is(result)) return null // For now, we support Range only
+    return {
+      command: builtInCommandRename,
+      arguments: [
+        {
+          textDocument: textDocument.id,
+          position,
+          range: fromLSPRange(result)
+        }
+      ] satisfies CommandArgs<typeof builtInCommandRename>
+    }
+  }
+
+  async provideContextMenu(ctx: ContextMenuContext, position: Position) {
+    const maybeMenuItems: Array<MenuItem | null> = await Promise.all([
+      this.getExplainMenuItemForPosition(ctx, position),
+      this.getRenameMenuItemForPosition(ctx, position)
+    ])
+    return maybeMenuItems.filter((item) => item != null) as MenuItem[]
+  }
+
+  async provideSelectionContextMenu({ textDocument }: ContextMenuContext, selection: Selection) {
+    const range = selection2Range(selection)
+    const code = textDocument.getValueInRange(range)
+    return [
+      {
+        command: builtInCommandCopilotExplain,
+        arguments: [
+          {
+            kind: ChatExplainKind.CodeSegment,
+            codeSegment: {
+              textDocument: textDocument.id,
+              range,
+              content: code
+            }
+          }
+        ] satisfies CommandArgs<typeof builtInCommandCopilotExplain>
+      },
+      {
+        command: builtInCommandCopilotReview,
+        arguments: [
+          {
+            textDocument: textDocument.id,
+            range,
+            code
+          }
+        ] satisfies CommandArgs<typeof builtInCommandCopilotReview>
+      }
+    ]
+  }
+}
+
 export class CodeEditor extends Disposable {
   private copilot: Copilot
   private documentBase: DocumentBase
@@ -261,19 +370,54 @@ export class CodeEditor extends Disposable {
   }
 
   async formatTextDocument(id: TextDocumentIdentifier) {
-    console.warn('TODO: format', id)
+    const textDocument = this.getTextDocument(id)
+    if (textDocument == null) return
+    const edits = await this.lspClient.textDocumentFormatting({
+      textDocument: id,
+      options: lsp.FormattingOptions.create(tabSize, insertSpaces)
+    })
+    if (edits == null) return
+    textDocument.pushEdits(edits.map(fromLSPTextEdit))
+  }
+
+  async formatWorkspace() {
+    const { stage, sprites } = this.project
+    const textDocuments = [stage.codeFilePath, ...sprites.map((s) => s.codeFilePath)]
+      .map((codeFilePath) => this.getTextDocument(getTextDocumentId(codeFilePath)))
+      .filter((td) => td != null) as TextDocument[]
+    await Promise.all(textDocuments.map((td) => this.formatTextDocument(td.id)))
   }
 
-  /** Update references in code for resource renaming, should be called before model name update */
-  async updateResourceReferencesOnRename(resource: ResourceIdentifier, newName: string) {
-    const workspaceEdit = await this.lspClient.workspaceExecuteCommandSpxRenameResources({ resource, newName })
-    if (workspaceEdit == null || workspaceEdit.changes == null) return
+  private applyWorkspaceEdit(workspaceEdit: lsp.WorkspaceEdit) {
+    if (workspaceEdit.changes == null) return // For now, we support `changes` only
     for (const [uri, edits] of Object.entries(workspaceEdit.changes)) {
       const textDocument = this.getTextDocument({ uri })
-      textDocument?.pushEdits(edits.map(fromLSPTextEdit))
+      if (textDocument == null) {
+        console.warn(`Text document not found for uri: ${uri}`)
+        continue
+      }
+      textDocument.pushEdits(edits.map(fromLSPTextEdit))
     }
   }
 
+  /** Update code for renaming */
+  async rename(id: TextDocumentIdentifier, position: Position, newName: string) {
+    const edit = await this.lspClient.textDocumentRename({
+      textDocument: id,
+      position: toLSPPosition(position),
+      newName
+    })
+    if (edit == null) return
+    this.applyWorkspaceEdit(edit)
+  }
+
+  /** Update code for resource renaming, should be called before model name update */
+  async renameResource(resource: ResourceIdentifier, newName: string) {
+    const edit = await this.lspClient.workspaceExecuteCommandSpxRenameResources({ resource, newName })
+    if (edit == null) return
+    this.applyWorkspaceEdit(edit)
+  }
+
   private uis: ICodeEditorUI[] = []
 
   attachUI(ui: ICodeEditorUI) {
@@ -283,15 +427,28 @@ export class CodeEditor extends Disposable {
 
     ui.registerAPIReferenceProvider({
       async provideAPIReference(ctx, position) {
-        const definitions = await lspClient.workspaceExecuteCommandSpxGetDefinitions({
-          // TODO: support signal
-          textDocument: ctx.textDocument.id,
-          position: toLSPPosition(position)
-        })
+        const definitions = await lspClient
+          .workspaceExecuteCommandSpxGetDefinitions({
+            // TODO: support signal
+            textDocument: ctx.textDocument.id,
+            position: toLSPPosition(position)
+          })
+          .catch((e) => {
+            console.warn('Failed to get definitions', e)
+            return null
+          })
         ctx.signal.throwIfAborted()
-        if (definitions == null) return []
-        const defWithDocs = await Promise.all(definitions.map((def) => documentBase.getDocumentation(def)))
-        return defWithDocs.filter((d) => d != null) as DefinitionDocumentationItem[]
+        let apiReferenceItems: DefinitionDocumentationItem[]
+        if (definitions != null && definitions.length > 0) {
+          const maybeDocumentationItems = await Promise.all(
+            definitions.map((def) => documentBase.getDocumentation(def))
+          )
+          apiReferenceItems = maybeDocumentationItems.filter((d) => d != null) as DefinitionDocumentationItem[]
+        } else {
+          // There may be compiling errors, so we fallback to all items
+          apiReferenceItems = await documentBase.getAllDocumentations()
+        }
+        return apiReferenceItems
       }
     })
 
@@ -315,67 +472,9 @@ export class CodeEditor extends Disposable {
       }
     })
 
-    ui.registerContextMenuProvider({
-      async provideContextMenu({ textDocument }, position) {
-        const word = textDocument.getWordAtPosition(position)
-        if (word == null) return []
-        const wordStart = { ...position, column: word.startColumn }
-        const wordEnd = { ...position, column: word.endColumn }
-        const explainTarget: ChatExplainTargetCodeSegment = {
-          kind: ChatExplainKind.CodeSegment,
-          codeSegment: {
-            // TODO: use definition info from LS and explain definition instead of code-segment
-            textDocument: textDocument.id,
-            range: { start: wordStart, end: wordEnd },
-            content: word.word
-          }
-        }
-        return [
-          {
-            command: builtInCommandCopilotExplain,
-            arguments: [explainTarget]
-          }
-        ]
-      },
-      async provideSelectionContextMenu({ textDocument }, selection) {
-        const range = selection2Range(selection)
-        const code = textDocument.getValueInRange(range)
-        const explainTarget: ChatExplainTargetCodeSegment = {
-          kind: ChatExplainKind.CodeSegment,
-          codeSegment: {
-            textDocument: textDocument.id,
-            range,
-            content: code
-          }
-        }
-        const reviewTarget: Omit<ChatTopicReview, 'kind'> = {
-          textDocument: textDocument.id,
-          range,
-          code
-        }
-        return [
-          {
-            command: builtInCommandCopilotExplain,
-            arguments: [explainTarget]
-          },
-          {
-            command: builtInCommandCopilotReview,
-            arguments: [reviewTarget]
-          }
-        ]
-      }
-    })
-
+    ui.registerContextMenuProvider(new ContextMenuProvider(this.lspClient))
     ui.registerCopilot(copilot)
     ui.registerDiagnosticsProvider(this.diagnosticsProvider)
-
-    ui.registerFormattingEditProvider({
-      async provideDocumentFormattingEdits(ctx) {
-        console.warn('TODO', ctx)
-        return []
-      }
-    })
-
     ui.registerHoverProvider(this.hoverProvider)
     ui.registerResourceReferencesProvider(this.resourceReferencesProvider)
     ui.registerDocumentBase(documentBase)
diff --git a/spx-gui/src/components/editor/code-editor/common.ts b/spx-gui/src/components/editor/code-editor/common.ts
index 32079716b..a292ee21d 100644
--- a/spx-gui/src/components/editor/code-editor/common.ts
+++ b/spx-gui/src/components/editor/code-editor/common.ts
@@ -328,6 +328,7 @@ export type CommandInfo<A extends any[], R> = {
   title: LocaleMessage
   handler: CommandHandler<A, R>
 }
+export type CommandArgs<C> = C extends Command<infer A, any> ? A : never
 
 export type Action<A extends any[] = any, R = any> = {
   /** Title for the action. Command title will be used if not provided. */
@@ -359,6 +360,22 @@ export function positionAfter(p1: Position, p2: Position) {
   return p1.line > p2.line || (p1.line === p2.line && p1.column > p2.column)
 }
 
+export function isRangeEmpty(range: Range) {
+  return positionEq(range.start, range.end)
+}
+
+export function isSelectionEmpty(selection: Selection | null) {
+  if (selection == null) return true
+  return positionEq(selection.start, selection.position)
+}
+
+export function containsPosition(range: Range, position: Position) {
+  if (position.line < range.start.line || position.line > range.end.line) return false
+  if (position.line === range.start.line && position.column < range.start.column) return false
+  if (position.line === range.end.line && position.column > range.end.column) return false
+  return true
+}
+
 export function selection2Range(selection: Selection): Range {
   const reversed = positionAfter(selection.start, selection.position)
   return {
diff --git a/spx-gui/src/components/editor/code-editor/context.ts b/spx-gui/src/components/editor/code-editor/context.ts
index 61edd862c..72e5bd8ae 100644
--- a/spx-gui/src/components/editor/code-editor/context.ts
+++ b/spx-gui/src/components/editor/code-editor/context.ts
@@ -6,7 +6,7 @@ import { getHighlighter } from '@/utils/spx/highlighter'
 import { untilQueryLoaded, useQuery, type QueryRet } from '@/utils/query'
 import type { Project } from '@/models/project'
 import type { Runtime } from '@/models/runtime'
-import { type ResourceIdentifier, type TextDocumentIdentifier } from './common'
+import { type Position, type ResourceIdentifier, type TextDocumentIdentifier } from './common'
 import { type ICodeEditorUI } from './ui/code-editor-ui'
 import { TextDocument } from './text-document'
 import { getMonaco, type monaco, type Monaco } from './monaco'
@@ -18,7 +18,11 @@ export type CodeEditorCtx = {
   getMonaco(): Monaco
   getTextDocument: (id: TextDocumentIdentifier) => TextDocument | null
   formatTextDocument(id: TextDocumentIdentifier): Promise<void>
-  updateResourceReferencesOnRename(resource: ResourceIdentifier, newName: string): Promise<void>
+  formatWorkspace(): Promise<void>
+  /** Update code for renaming */
+  rename(id: TextDocumentIdentifier, position: Position, newName: string): Promise<void>
+  /** Update code for resource renaming, should be called before model name update */
+  renameResource(resource: ResourceIdentifier, newName: string): Promise<void>
 }
 
 const codeEditorCtxInjectionKey: InjectionKey<CodeEditorCtx> = Symbol('code-editor-ctx')
@@ -167,9 +171,17 @@ export function useProvideCodeEditorCtx(
       if (editorRef.value == null) throw new Error('Code editor not initialized')
       return editorRef.value.formatTextDocument(id)
     },
-    updateResourceReferencesOnRename(resource: ResourceIdentifier, newName: string) {
+    formatWorkspace() {
       if (editorRef.value == null) throw new Error('Code editor not initialized')
-      return editorRef.value.updateResourceReferencesOnRename(resource, newName)
+      return editorRef.value.formatWorkspace()
+    },
+    rename(id: TextDocumentIdentifier, position: Position, newName: string) {
+      if (editorRef.value == null) throw new Error('Code editor not initialized')
+      return editorRef.value.rename(id, position, newName)
+    },
+    renameResource(resource: ResourceIdentifier, newName: string) {
+      if (editorRef.value == null) throw new Error('Code editor not initialized')
+      return editorRef.value.renameResource(resource, newName)
     }
   })
 
diff --git a/spx-gui/src/components/editor/code-editor/document-base/index.ts b/spx-gui/src/components/editor/code-editor/document-base/index.ts
index 0d05f7aca..9f55dc76c 100644
--- a/spx-gui/src/components/editor/code-editor/document-base/index.ts
+++ b/spx-gui/src/components/editor/code-editor/document-base/index.ts
@@ -22,4 +22,8 @@ export class DocumentBase extends Disposable {
     const key = stringifyDefinitionId(defId)
     return this.storage.get(key) ?? null
   }
+
+  async getAllDocumentations(): Promise<DefinitionDocumentationItem[]> {
+    return [...this.storage.values()]
+  }
 }
diff --git a/spx-gui/src/components/editor/code-editor/lsp/index.ts b/spx-gui/src/components/editor/code-editor/lsp/index.ts
index 0500a7d4e..345ab58f4 100644
--- a/spx-gui/src/components/editor/code-editor/lsp/index.ts
+++ b/spx-gui/src/components/editor/code-editor/lsp/index.ts
@@ -59,7 +59,7 @@ export class SpxLSPClient extends Disposable {
     this.isFilesStale.value = false
   }
 
-  private async prepareRquest() {
+  private async prepareRequest() {
     const [spxlc] = await Promise.all([
       untilNotNull(this.spxlcRef),
       // Typically requests are triggered earlier than file-loading:
@@ -78,7 +78,7 @@ export class SpxLSPClient extends Disposable {
   }
 
   private async executeCommand<A extends any[], R>(command: string, ...args: A): Promise<R> {
-    const spxlc = await this.prepareRquest()
+    const spxlc = await this.prepareRequest()
     return spxlc.request<R>(lsp.ExecuteCommandRequest.method, {
       command,
       arguments: args
@@ -104,27 +104,42 @@ export class SpxLSPClient extends Disposable {
   }
 
   async textDocumentDocumentLink(params: lsp.DocumentLinkParams): Promise<lsp.DocumentLink[] | null> {
-    const spxlc = await this.prepareRquest()
+    const spxlc = await this.prepareRequest()
     return spxlc.request<lsp.DocumentLink[] | null>(lsp.DocumentLinkRequest.method, params)
   }
 
   async textDocumentDiagnostic(params: lsp.DocumentDiagnosticParams): Promise<lsp.DocumentDiagnosticReport> {
-    const spxlc = await this.prepareRquest()
-    return spxlc.request(lsp.DocumentDiagnosticRequest.method, params)
+    const spxlc = await this.prepareRequest()
+    return spxlc.request<lsp.DocumentDiagnosticReport>(lsp.DocumentDiagnosticRequest.method, params)
   }
 
   async textDocumentHover(params: lsp.HoverParams): Promise<lsp.Hover | null> {
-    const spxlc = await this.prepareRquest()
+    const spxlc = await this.prepareRequest()
     return spxlc.request<lsp.Hover | null>(lsp.HoverRequest.method, params)
   }
 
   async textDocumentDefinition(params: lsp.DefinitionParams): Promise<lsp.Definition | null> {
-    const spxlc = await this.prepareRquest()
+    const spxlc = await this.prepareRequest()
     return spxlc.request<lsp.Definition | null>(lsp.DefinitionRequest.method, params)
   }
 
   async textDocumentTypeDefinition(params: lsp.TypeDefinitionParams): Promise<lsp.Definition | null> {
-    const spxlc = await this.prepareRquest()
+    const spxlc = await this.prepareRequest()
     return spxlc.request<lsp.Definition | null>(lsp.TypeDefinitionRequest.method, params)
   }
+
+  async textDocumentPrepareRename(params: lsp.PrepareRenameParams): Promise<lsp.PrepareRenameResult | null> {
+    const spxlc = await this.prepareRequest()
+    return spxlc.request<lsp.PrepareRenameResult | null>(lsp.PrepareRenameRequest.method, params)
+  }
+
+  async textDocumentRename(params: lsp.RenameParams): Promise<lsp.WorkspaceEdit | null> {
+    const spxlc = await this.prepareRequest()
+    return spxlc.request<lsp.WorkspaceEdit | null>(lsp.RenameRequest.method, params)
+  }
+
+  async textDocumentFormatting(params: lsp.DocumentFormattingParams): Promise<lsp.TextEdit[] | null> {
+    const spxlc = await this.prepareRequest()
+    return spxlc.request<lsp.TextEdit[] | null>(lsp.DocumentFormattingRequest.method, params)
+  }
 }
diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
index 84717fae6..866d39671 100644
--- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue
@@ -20,8 +20,9 @@ export function makeContentWidgetEl() {
 import { type InjectionKey, inject, provide, ref, watchEffect, shallowRef, watch, computed } from 'vue'
 import { computedShallowReactive, untilNotNull, useLocalStorage } from '@/utils/utils'
 import { getCleanupSignal } from '@/utils/disposable'
-import { theme, tabSize } from '@/utils/spx/highlighter'
+import { theme, tabSize, insertSpaces } from '@/utils/spx/highlighter'
 import { useI18n } from '@/utils/i18n'
+import { getGopIdentifierNameTip, validateGopIdentifierName } from '@/utils/spx'
 import { Sprite } from '@/models/sprite'
 import {
   useRenameAnimation,
@@ -36,9 +37,18 @@ import { Costume } from '@/models/costume'
 import { Animation } from '@/models/animation'
 import { Backdrop } from '@/models/backdrop'
 import { isWidget } from '@/models/widget'
+import { useModal } from '@/components/ui'
+import RenameModal from '@/components/common/RenameModal.vue'
 import { useEditorCtx } from '../../EditorContextProvider.vue'
 import { useCodeEditorCtx } from '../context'
-import { getResourceModel, getTextDocumentId, type ResourceIdentifier } from '../common'
+import {
+  getResourceModel,
+  getTextDocumentId,
+  type Position,
+  type Range,
+  type ResourceIdentifier,
+  type TextDocumentIdentifier
+} from '../common'
 import { type MonacoEditor, type monaco } from '../monaco'
 import { CodeEditorUI } from './code-editor-ui'
 import MonacoEditorComp, { type InitData as MonacoEditorInitData } from './MonacoEditor.vue'
@@ -57,6 +67,7 @@ const props = defineProps<{
 const i18n = useI18n()
 const editorCtx = useEditorCtx()
 const codeEditorCtx = useCodeEditorCtx()
+const invokeRenameModal = useModal(RenameModal)
 const renameSprite = useRenameSprite()
 const renameSound = useRenameSound()
 const renameCostume = useRenameCostume()
@@ -64,6 +75,23 @@ const renameBackdrop = useRenameBackdrop()
 const renameAnimation = useRenameAnimation()
 const renameWidget = useRenameWidget()
 
+function rename(textDocumentId: TextDocumentIdentifier, position: Position, range: Range): Promise<void> {
+  const textDocument = codeEditorCtx.getTextDocument(textDocumentId)
+  if (textDocument == null) throw new Error(`Text document (${textDocumentId.uri}) not found`)
+  const name = textDocument.getValueInRange(range)
+  return invokeRenameModal({
+    target: {
+      name,
+      validateName: validateGopIdentifierName,
+      applyName: (newName) =>
+        editorCtx.project.history.doAction({ name: { en: 'Rename', zh: '重命名' } }, () =>
+          codeEditorCtx.rename(textDocumentId, position, newName)
+        ),
+      inputTip: getGopIdentifierNameTip()
+    }
+  })
+}
+
 function renameResource(resourceId: ResourceIdentifier): Promise<void> {
   const model = getResourceModel(editorCtx.project, resourceId)
   if (model == null) throw new Error(`Resource (${resourceId.uri}) not found`)
@@ -84,6 +112,7 @@ const uiRef = computed(() => {
     i18n,
     codeEditorCtx.getMonaco(),
     codeEditorCtx.getTextDocument,
+    rename,
     renameResource
   )
 })
@@ -92,6 +121,7 @@ const monacoEditorOptions: monaco.editor.IStandaloneEditorConstructionOptions =
   language: 'spx',
   theme,
   tabSize,
+  insertSpaces,
   contextmenu: false
 }
 
diff --git a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceUI.vue b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceUI.vue
index c150c5983..f06da2ee9 100644
--- a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceUI.vue
+++ b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceUI.vue
@@ -273,6 +273,7 @@ function handleCategoryClick(id: string) {
   flex: 1 1 0;
   padding: 0 16px 12px;
   overflow-y: auto;
+  scrollbar-width: thin;
 
   .subcategory-wrapper {
     padding-bottom: 20px;
diff --git a/spx-gui/src/components/editor/code-editor/ui/api-reference/index.ts b/spx-gui/src/components/editor/code-editor/ui/api-reference/index.ts
index 2502516d6..78e8fc985 100644
--- a/spx-gui/src/components/editor/code-editor/ui/api-reference/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/api-reference/index.ts
@@ -1,6 +1,7 @@
 import { debounce } from 'lodash'
 import { shallowRef, watchEffect } from 'vue'
 import { Disposable, getCleanupSignal } from '@/utils/disposable'
+import { timeout } from '@/utils/utils'
 import { type BaseContext, type Position, type DefinitionDocumentationItem } from '../../common'
 import type { CodeEditorUI } from '../code-editor-ui'
 
@@ -45,6 +46,10 @@ export class APIReferenceController extends Disposable {
         if (activeTextDocument == null) return
         const context: APIReferenceContext = { textDocument: activeTextDocument, signal }
         updateItems(provider, context, cursorPosition)
+
+        // Do not wait for debouncing to finish if there is no existing items
+        await timeout(0) // `timeout(0)` to avoid `this.items` collected as dep of `watchEffect`
+        if (this.items == null) updateItems.flush()
       })
     )
   }
diff --git a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
index 3109540c6..2f410cc20 100644
--- a/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts
@@ -20,7 +20,8 @@ import {
   type TextDocumentPosition,
   type ResourceIdentifier,
   getResourceModel,
-  type TextDocumentRange
+  type TextDocumentRange,
+  isRangeEmpty
 } from '../common'
 import { TextDocument } from '../text-document'
 import type { Monaco, MonacoEditor } from '../monaco'
@@ -41,15 +42,7 @@ import {
   type ChatTopicExplainTarget,
   type ChatTopicReview
 } from './copilot'
-import type { IFormattingEditProvider } from './formatting'
-import {
-  fromMonacoPosition,
-  toMonacoRange,
-  fromMonacoSelection,
-  isRangeEmpty,
-  toMonacoPosition,
-  supportGoTo
-} from './common'
+import { fromMonacoPosition, toMonacoRange, fromMonacoSelection, toMonacoPosition, supportGoTo } from './common'
 
 export * from './hover'
 export * from './completion'
@@ -58,7 +51,6 @@ export * from './context-menu'
 export * from './diagnostics'
 export * from './api-reference'
 export * from './copilot'
-export * from './formatting'
 
 export interface ICodeEditorUI {
   registerHoverProvider(provider: IHoverProvider): void
@@ -68,7 +60,6 @@ export interface ICodeEditorUI {
   registerDiagnosticsProvider(provider: IDiagnosticsProvider): void
   registerAPIReferenceProvider(provider: IAPIReferenceProvider): void
   registerCopilot(copilot: ICopilot): void
-  registerFormattingEditProvider(provider: IFormattingEditProvider): void
   registerDocumentBase(documentBase: IDocumentBase): void
 
   /** Execute a command */
@@ -99,7 +90,7 @@ export const builtInCommandPaste: Command<[], void> = 'editor.action.paste'
 export const builtInCommandGoToDefinition: Command<[TextDocumentPosition | TextDocumentRange], void> =
   'spx.goToDefinition'
 export const builtInCommandGoToResource: Command<[ResourceIdentifier], void> = 'spx.goToResource'
-// export const builtInCommandRename: Command<[TextDocumentPosition], void> = 'spx.rename'
+export const builtInCommandRename: Command<[TextDocumentPosition & TextDocumentRange], void> = 'spx.rename'
 export const builtInCommandRenameResource: Command<[ResourceIdentifier], void> = 'spx.renameResource'
 export const builtInCommandModifyResourceReference: Command<[InternalResourceReference], void> =
   'spx.modifyResourceReference'
@@ -133,9 +124,6 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
   registerCopilot(copilot: ICopilot): void {
     this.copilotController.registerCopilot(copilot)
   }
-  registerFormattingEditProvider(provider: IFormattingEditProvider): void {
-    console.warn('TODO', provider)
-  }
   registerDocumentBase(documentBase: IDocumentBase): void {
     this.documentBase = documentBase
   }
@@ -184,6 +172,7 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
     public i18n: I18n,
     public monaco: Monaco,
     private getTextDocument: (id: TextDocumentIdentifier) => TextDocument | null,
+    private renameHandler: (textDocument: TextDocumentIdentifier, position: Position, range: Range) => Promise<void>,
     private renameResourceHandler: (resource: ResourceIdentifier) => Promise<void>
   ) {
     super()
@@ -404,6 +393,15 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
       }
     })
 
+    this.registerCommand(builtInCommandRename, {
+      icon: 'rename',
+      title: { en: 'Rename', zh: '重命名' },
+      handler: async (params) => {
+        const { textDocument, position, range } = params
+        await this.renameHandler(textDocument, position, range)
+      }
+    })
+
     this.registerCommand(builtInCommandRenameResource, {
       icon: 'rename',
       title: { en: 'Rename', zh: '重命名' },
diff --git a/spx-gui/src/components/editor/code-editor/ui/common.ts b/spx-gui/src/components/editor/code-editor/ui/common.ts
index 81a3d0124..ae69e459a 100644
--- a/spx-gui/src/components/editor/code-editor/ui/common.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/common.ts
@@ -60,22 +60,6 @@ export function toMonacoSelection(selection: Selection): monaco.ISelection {
   }
 }
 
-export function isRangeEmpty(range: Range) {
-  return positionEq(range.start, range.end)
-}
-
-export function isSelectionEmpty(selection: Selection | null) {
-  if (selection == null) return true
-  return positionEq(selection.start, selection.position)
-}
-
-export function containsPosition(range: Range, position: Position) {
-  if (position.line < range.start.line || position.line > range.end.line) return false
-  if (position.line === range.start.line && position.column < range.start.column) return false
-  if (position.line === range.end.line && position.column > range.end.column) return false
-  return true
-}
-
 export function fromMonacoUri(uri: monaco.Uri): TextDocumentIdentifier {
   // TODO: check if this is correct
   return { uri: uri.toString() }
diff --git a/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts b/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
index 0deebf587..bad55eece 100644
--- a/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/context-menu/index.ts
@@ -1,7 +1,7 @@
 import { shallowRef, watch } from 'vue'
 import { Disposable } from '@/utils/disposable'
 import { timeout } from '@/utils/utils'
-import { type Action, type BaseContext, type Selection, type Position } from '../../common'
+import { type Action, type BaseContext, type Selection, type Position, isSelectionEmpty } from '../../common'
 import type { monaco } from '../../monaco'
 import {
   builtInCommandCopy,
@@ -11,7 +11,7 @@ import {
   type InternalAction
 } from '../code-editor-ui'
 import { makeContentWidgetEl } from '../CodeEditorUI.vue'
-import { toMonacoPosition, isSelectionEmpty, fromMonacoPosition, fromMonacoSelection } from '../common'
+import { toMonacoPosition, fromMonacoPosition, fromMonacoSelection } from '../common'
 
 export type ContextMenuContext = BaseContext
 
diff --git a/spx-gui/src/components/editor/code-editor/ui/formatting.ts b/spx-gui/src/components/editor/code-editor/ui/formatting.ts
deleted file mode 100644
index 808c88741..000000000
--- a/spx-gui/src/components/editor/code-editor/ui/formatting.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { type BaseContext, type TextEdit } from '../common'
-
-export type FormattingContext = BaseContext
-
-export interface IFormattingEditProvider {
-  /** Get edits for formatting single text document */
-  provideDocumentFormattingEdits(ctx: FormattingContext): Promise<TextEdit[]>
-}
diff --git a/spx-gui/src/components/editor/code-editor/ui/hover/index.ts b/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
index b152819d3..4317d17d8 100644
--- a/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
+++ b/spx-gui/src/components/editor/code-editor/ui/hover/index.ts
@@ -9,7 +9,8 @@ import {
   type Position,
   makeBasicMarkdownString,
   getResourceModel,
-  type ITextDocument
+  type ITextDocument,
+  containsPosition
 } from '../../common'
 import {
   builtInCommandCopilotFixProblem,
@@ -19,7 +20,7 @@ import {
   builtInCommandModifyResourceReference,
   builtInCommandRenameResource
 } from '../code-editor-ui'
-import { fromMonacoPosition, toMonacoPosition, token2Signal, containsPosition, supportGoTo } from '../common'
+import { fromMonacoPosition, toMonacoPosition, token2Signal, supportGoTo } from '../common'
 import type { monaco } from '../../monaco'
 import { makeContentWidgetEl } from '../CodeEditorUI.vue'
 
diff --git a/spx-gui/src/components/editor/preview/EditorPreview.vue b/spx-gui/src/components/editor/preview/EditorPreview.vue
index 95943574e..22cf4466b 100644
--- a/spx-gui/src/components/editor/preview/EditorPreview.vue
+++ b/spx-gui/src/components/editor/preview/EditorPreview.vue
@@ -4,10 +4,24 @@
       <div class="header">
         {{ $t({ en: 'Preview', zh: '预览' }) }}
       </div>
-      <UIButton ref="runButtonRef" class="button" type="primary" icon="play" @click="setRunning('debug')">
+      <UIButton
+        ref="runButtonRef"
+        class="button"
+        type="primary"
+        icon="play"
+        :loading="startDebugging.isLoading.value"
+        @click="startDebugging.fn"
+      >
         {{ $t({ en: 'Run', zh: '运行' }) }}
       </UIButton>
-      <UIButton ref="fullScreenRunButtonRef" class="button" type="primary" icon="play" @click="setRunning('run')">
+      <UIButton
+        ref="fullScreenRunButtonRef"
+        class="button"
+        type="primary"
+        icon="play"
+        :loading="startRunning.isLoading.value"
+        @click="startRunning.fn"
+      >
         {{ $t({ en: 'Full screen', zh: '全屏' }) }}
       </UIButton>
     </UICardHeader>
@@ -42,14 +56,17 @@
 
 <script lang="ts" setup>
 import { ref, computed } from 'vue'
+import { useAction, useMessageHandle } from '@/utils/exception'
 import type { RunningMode } from '@/models/runtime'
 import { useEditorCtx } from '@/components/editor/EditorContextProvider.vue'
+import { useCodeEditorCtx } from '@/components/editor/code-editor/context'
 import { UICard, UICardHeader, UIButton } from '@/components/ui'
 import StageViewer from './stage-viewer/StageViewer.vue'
 import RunnerContainer from './RunnerContainer.vue'
 import InPlaceRunner from './InPlaceRunner.vue'
 
 const editorCtx = useEditorCtx()
+const codeEditorCtx = useCodeEditorCtx()
 
 const running = computed(() => editorCtx.runtime.running)
 
@@ -57,6 +74,27 @@ function setRunning(running: RunningMode) {
   editorCtx.runtime.setRunning(running)
 }
 
+const formatWorkspace = useAction(
+  () =>
+    editorCtx.project.history.doAction({ name: { en: 'Format code', zh: '格式化代码' } }, () =>
+      codeEditorCtx.formatWorkspace()
+    ),
+  {
+    en: 'Failed to format code',
+    zh: '格式化代码失败'
+  }
+)
+
+const startRunning = useMessageHandle(async () => {
+  await formatWorkspace()
+  setRunning('run')
+})
+
+const startDebugging = useMessageHandle(async () => {
+  await formatWorkspace()
+  setRunning('debug')
+})
+
 const fullScreenRunButtonRef = ref<InstanceType<typeof UIButton>>()
 const modalStyle = computed(() => {
   if (!fullScreenRunButtonRef.value) return null
diff --git a/spx-gui/src/models/common/asset-name.ts b/spx-gui/src/models/common/asset-name.ts
index c13835083..00811814f 100644
--- a/spx-gui/src/models/common/asset-name.ts
+++ b/spx-gui/src/models/common/asset-name.ts
@@ -1,5 +1,5 @@
 import type { LocaleMessage } from '@/utils/i18n'
-import { keywords, typeKeywords } from '@/utils/spx'
+import { getGopIdentifierNameTip, validateGopIdentifierName } from '@/utils/spx'
 import type { Project } from '../project'
 import type { Stage } from '../stage'
 import type { Sprite } from '../sprite'
@@ -26,17 +26,11 @@ function validateGopIdentifierAssetName(name: string) {
   if (err != null) return err
   // spx code is go+ code, and the asset name will compiled to an identifier of go+
   // so asset name rules is depend on the identifier rules of go+.
-  const regex = /^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/
-  if (!regex.test(name)) return { en: 'Invalid name', zh: '格式不正确' }
-  if (typeKeywords.includes(name)) return { en: 'Conflict with keywords', zh: '与关键字冲突' }
-  if (keywords.includes(name)) return { en: 'Conflict with keywords', zh: '与关键字冲突' }
+  return validateGopIdentifierName(name)
 }
 
 function getGopIdentifierAssetNameTip(asset: LocaleMessage) {
-  return {
-    en: `The ${asset.en} name can only contain Chineses / English letters, digits, and the character _.`,
-    zh: `${asset.zh}名称只能包含中英文字符、数字及下划线`
-  }
+  return getGopIdentifierNameTip(asset)
 }
 
 export const spriteNameTip = getGopIdentifierAssetNameTip({ en: 'sprite', zh: '精灵' })
diff --git a/spx-gui/src/utils/spx/highlighter.ts b/spx-gui/src/utils/spx/highlighter.ts
index 323d63a86..720fc7d2c 100644
--- a/spx-gui/src/utils/spx/highlighter.ts
+++ b/spx-gui/src/utils/spx/highlighter.ts
@@ -5,7 +5,10 @@ import defaultLightTheme from './default-light-theme.json'
 // Use `transparent` instead of `#ffffff` to fit specific background color, e.g., `APIReferenceItem` hovered
 defaultLightTheme.colors['editor.background'] = 'transparent'
 
+/** Size of a tab in spaces. */
 export const tabSize = 4
+/** Prefer spaces over tabs. */
+export const insertSpaces = false
 export const theme = defaultLightTheme.name
 
 export type Highlighter = Awaited<ReturnType<typeof createHighlighter>>
diff --git a/spx-gui/src/utils/spx/index.ts b/spx-gui/src/utils/spx/index.ts
index c61661397..3cef8bfac 100644
--- a/spx-gui/src/utils/spx/index.ts
+++ b/spx-gui/src/utils/spx/index.ts
@@ -8,6 +8,7 @@ import { getMimeFromExt } from '../file'
 import { stripExt } from '../path'
 import { toWav } from '../audio'
 import { toJpeg } from '../img'
+import type { LocaleMessage } from '../i18n'
 
 export const keywords = [
   'func',
@@ -144,3 +145,22 @@ export async function adaptImg(file: File): Promise<File> {
   const jpegFileName = stripExt(file.name) + '.jpeg'
   return fromBlob(jpegFileName, jpegBlob)
 }
+
+export function validateGopIdentifierName(name: string) {
+  const regex = /^[\u4e00-\u9fa5a-zA-Z_][\u4e00-\u9fa5a-zA-Z0-9_]*$/
+  if (!regex.test(name)) return { en: 'Invalid name', zh: '格式不正确' }
+  if (typeKeywords.includes(name)) return { en: 'Conflict with keywords', zh: '与关键字冲突' }
+  if (keywords.includes(name)) return { en: 'Conflict with keywords', zh: '与关键字冲突' }
+}
+
+export function getGopIdentifierNameTip(target?: LocaleMessage) {
+  if (target == null)
+    return {
+      en: 'The name can only contain Chineses / English letters, digits, and the character _.',
+      zh: '名称只能包含中英文字符、数字及下划线'
+    }
+  return {
+    en: `The ${target.en} name can only contain Chineses / English letters, digits, and the character _.`,
+    zh: `${target.zh}名称只能包含中英文字符、数字及下划线`
+  }
+}
diff --git a/tools/spxls/internal/server/command.go b/tools/spxls/internal/server/command.go
index ac124a0bc..e07426b51 100644
--- a/tools/spxls/internal/server/command.go
+++ b/tools/spxls/internal/server/command.go
@@ -113,6 +113,10 @@ func (s *Server) spxGetDefinitions(params []SpxGetDefinitionsParams) ([]SpxDefin
 		return nil, err
 	}
 	if astFile == nil {
+		diagnostics := result.diagnostics[param.TextDocument.URI]
+		if len(diagnostics) > 0 {
+			return nil, fmt.Errorf("failed to compile file: %s", diagnostics[0].Message)
+		}
 		return nil, nil
 	}
 	astFileScope := result.typeInfo.Scopes[astFile]
diff --git a/tools/spxls/internal/server/rename.go b/tools/spxls/internal/server/rename.go
index b3f99915c..967412041 100644
--- a/tools/spxls/internal/server/rename.go
+++ b/tools/spxls/internal/server/rename.go
@@ -36,7 +36,7 @@ func (s *Server) textDocumentPrepareRename(params *PrepareRenameParams) (*Range,
 
 // See https://microsoft.github.io/language-server-protocol/specifications/lsp/3.18/specification/#textDocument_rename
 func (s *Server) textDocumentRename(params *RenameParams) (*WorkspaceEdit, error) {
-	result, spxFile, astFile, err := s.compileAndGetASTFileForDocumentURI(params.TextDocument.URI)
+	result, _, astFile, err := s.compileAndGetASTFileForDocumentURI(params.TextDocument.URI)
 	if err != nil {
 		if errors.Is(err, errNoValidSpxFiles) || errors.Is(err, errNoMainSpxFile) {
 			return nil, nil
@@ -59,18 +59,25 @@ func (s *Server) textDocumentRename(params *RenameParams) (*WorkspaceEdit, error
 		}})
 	}
 
-	ident, obj := result.identAndObjectAtASTFilePosition(astFile, params.Position)
+	_, obj := result.identAndObjectAtASTFilePosition(astFile, params.Position)
 	if !isRenameableObject(obj) {
 		return nil, nil
 	}
 
+	defIdent := result.defIdentOf(obj)
+	if defIdent == nil {
+		return nil, fmt.Errorf("failed to find definition of object %q", obj.Name())
+	}
+
+	defLoc := s.createLocationFromIdent(result.fset, defIdent)
+
 	workspaceEdit := WorkspaceEdit{
 		Changes: map[DocumentURI][]TextEdit{
-			s.toDocumentURI(spxFile): {
+			defLoc.URI: {
 				{
 					Range: Range{
-						Start: FromGopTokenPosition(result.fset.Position(ident.Pos())),
-						End:   FromGopTokenPosition(result.fset.Position(ident.End())),
+						Start: FromGopTokenPosition(result.fset.Position(defIdent.Pos())),
+						End:   FromGopTokenPosition(result.fset.Position(defIdent.End())),
 					},
 					NewText: params.NewName,
 				},
diff --git a/tools/spxls/internal/server/rename_test.go b/tools/spxls/internal/server/rename_test.go
index bb1ea2ca7..702cfbf6e 100644
--- a/tools/spxls/internal/server/rename_test.go
+++ b/tools/spxls/internal/server/rename_test.go
@@ -117,6 +117,57 @@ onStart => {
 		})
 	})
 
+	t.Run("Rename reference", func(t *testing.T) {
+		s := New(vfs.NewMapFS(func() map[string][]byte {
+			return map[string][]byte{
+				"main.spx": []byte(`
+var (
+	MySprite Sprite
+)
+const Foo = "bar"
+MySprite.turn Left
+run "assets", {Title: "My Game"}
+`),
+				"MySprite.spx": []byte(`
+println Foo
+onStart => {
+	MySprite.turn Right
+}
+`),
+				"assets/sprites/MySprite/index.json": []byte(`{}`),
+			}
+		}), nil)
+
+		workspaceEdit, err := s.textDocumentRename(&RenameParams{
+			TextDocument: TextDocumentIdentifier{URI: "file:///MySprite.spx"},
+			Position:     Position{Line: 1, Character: 9},
+			NewName:      "Bar",
+		})
+		require.NoError(t, err)
+		require.NotNil(t, workspaceEdit)
+		require.NotNil(t, workspaceEdit.Changes)
+
+		mainSpxChanges := workspaceEdit.Changes["file:///main.spx"]
+		require.Len(t, mainSpxChanges, 1)
+		assert.Contains(t, mainSpxChanges, TextEdit{
+			Range: Range{
+				Start: Position{Line: 4, Character: 6},
+				End:   Position{Line: 4, Character: 9},
+			},
+			NewText: "Bar",
+		})
+
+		mySpriteSpxChanges := workspaceEdit.Changes["file:///MySprite.spx"]
+		require.Len(t, mySpriteSpxChanges, 1)
+		assert.Contains(t, mySpriteSpxChanges, TextEdit{
+			Range: Range{
+				Start: Position{Line: 1, Character: 8},
+				End:   Position{Line: 1, Character: 11},
+			},
+			NewText: "Bar",
+		})
+	})
+
 	t.Run("SpxResource", func(t *testing.T) {
 		s := New(vfs.NewMapFS(func() map[string][]byte {
 			return map[string][]byte{