optimize code-editor insertion

Author: nighca

spx-gui/src/components/editor/code-editor/code-editor.ts

@@ -54,7 +54,6 @@ import {
   type CommandArgs,
   getTextDocumentId,
   containsPosition,
-  makeBasicMarkdownString,
   type WorkspaceDiagnostics,
   type TextDocumentDiagnostics,
   fromLSPDiagnostic
@@ -273,6 +272,11 @@ class CompletionProvider implements ICompletionProvider {
           documentation: null
         }
 
+        if (item.insertText != null) {
+          result.insertText = item.insertText
+          result.insertTextFormat = this.getInsertTextFormat(item.insertTextFormat)
+        }
+
         const defId = item.data?.definition
         const definition = defId != null ? await this.documentBase.getDocumentation(defId) : null
 
@@ -284,18 +288,14 @@ class CompletionProvider implements ICompletionProvider {
           result.kind = definition.kind
           result.insertText = definition.insertText
           result.insertTextFormat = InsertTextFormat.Snippet
-          result.documentation = makeBasicMarkdownString(definition.overview)
+          result.documentation = definition.detail
         }
 
         if (item.documentation != null) {
           const docStr = lsp.MarkupContent.is(item.documentation) ? item.documentation.value : item.documentation
           result.documentation = makeAdvancedMarkdownString(docStr)
         }
 
-        if (item.insertText != null) {
-          result.insertText = item.insertText
-          result.insertTextFormat = this.getInsertTextFormat(item.insertTextFormat)
-        }
         return result
       })
     )

spx-gui/src/components/editor/code-editor/text-document.ts

@@ -173,6 +173,10 @@ export class TextDocument
     return this.monacoTextModel.getValueInRange(toMonacoRange(range))
   }
 
+  getLineContent(line: number): string {
+    return this.monacoTextModel.getLineContent(line)
+  }
+
   getWordAtPosition(position: Position): WordAtPosition | null {
     return this.monacoTextModel.getWordAtPosition(toMonacoPosition(position))
   }

spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useMessageHandle } from '@/utils/exception'
 import { UITooltip } from '@/components/ui'
+import { DefinitionKind } from '../../common'
 import DefinitionOverviewWrapper from '../definition/DefinitionOverviewWrapper.vue'
 import DefinitionDetailWrapper from '../definition/DefinitionDetailWrapper.vue'
 import MarkdownView from '../markdown/MarkdownView.vue'
@@ -14,10 +15,21 @@ const props = defineProps<{
 
 const codeEditorCtx = useCodeEditorUICtx()
 
-const handleInsert = useMessageHandle(() => codeEditorCtx.ui.insertSnippet(props.item.insertText), {
-  en: 'Failed to insert',
-  zh: '插入失败'
-}).fn
+const blockDefinitionKinds = [DefinitionKind.Command, DefinitionKind.Listen, DefinitionKind.Statement]
+
+const handleInsert = useMessageHandle(
+  () => {
+    if (blockDefinitionKinds.includes(props.item.kind)) {
+      codeEditorCtx.ui.insertBlockSnippet(props.item.insertText)
+    } else {
+      codeEditorCtx.ui.insertInlineSnippet(props.item.insertText)
+    }
+  },
+  {
+    en: 'Failed to insert',
+    zh: '插入失败'
+  }
+).fn
 
 const handleExplain = useMessageHandle(
   () =>

spx-gui/src/components/editor/code-editor/ui/code-editor-ui.ts

@@ -282,6 +282,103 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
     this.editor.focus()
   }
 
+  private async insertInlineContent(type: 'text' | 'snippet', content: string, range: Range) {
+    const textDocument = this.activeTextDocument
+    if (textDocument == null) return
+
+    const insert = async (cnt: string, rg: Range) => {
+      if (type === 'text') await this.insertText(cnt, rg)
+      else await this.insertSnippet(cnt, rg)
+    }
+
+    if (!isRangeEmpty(range)) return insert(content, range)
+
+    const pos = range.start
+    const lineCnt = textDocument.getLineContent(pos.line)
+    if (isEmptyText(lineCnt)) return insert(content, range)
+
+    const word = textDocument.getWordAtPosition(pos)
+    if (word == null) return insert(content, range)
+
+    const isPosInWord = pos.column >= word.startColumn && pos.column <= word.endColumn
+    if (isPosInWord) {
+      const wordEndPos = { line: pos.line, column: word.endColumn }
+      this.editor.setPosition(toMonacoPosition(wordEndPos))
+      return insert(' ' + content, { start: wordEndPos, end: wordEndPos })
+    }
+
+    return insert(content, range)
+  }
+
+  private async insertBlockContent(type: 'text' | 'snippet', content: string, range: Range) {
+    const textDocument = this.activeTextDocument
+    if (textDocument == null) return
+
+    const insert = async (cnt: string, rg: Range) => {
+      // Ensure trailing newline if the insertion occurs at the end of the file
+      const currentContent = textDocument.getValue()
+      const insertionEndOffset = textDocument.getOffsetAt(rg.end)
+      if (insertionEndOffset === currentContent.length && !cnt.endsWith('\n')) cnt += '\n'
+
+      if (type === 'snippet') {
+        await this.insertSnippet(cnt, rg)
+        return
+      }
+
+      await this.insertText(cnt, rg)
+
+      // Properly indent the inserted content for type `text`:
+      // 1. Select inserted content
+      const cursorPos = this.editor.getPosition()
+      if (cursorPos == null) return
+      this.editor.setSelection(toMonacoRange({ start: rg.start, end: fromMonacoPosition(cursorPos) }))
+      // 2. Indent selected content
+      this.editor.trigger('insertBlockContent', 'editor.action.reindentselectedlines', null)
+      // 3. Clear selection, move cursor to end of the selection
+      const selection = this.editor.getSelection()
+      if (selection == null) return
+      this.editor.setSelection({
+        startLineNumber: selection.endLineNumber,
+        startColumn: selection.endColumn,
+        endLineNumber: selection.endLineNumber,
+        endColumn: selection.endColumn
+      })
+    }
+
+    const pos = range.end
+    const lineCnt = textDocument.getLineContent(pos.line)
+    if (isEmptyText(lineCnt)) return insert(content, range)
+
+    const lineStartPos = { line: pos.line, column: 1 }
+    const lineCntBeforePos = textDocument.getValueInRange({ start: lineStartPos, end: pos })
+    const isPosAtLineStart = isEmptyText(lineCntBeforePos)
+    if (isPosAtLineStart) {
+      if (!content.endsWith('\n')) content = content + '\n'
+      return insert(content, range)
+    }
+
+    const lineEndPos = { line: pos.line, column: lineCnt.length + 1 }
+    this.editor.setPosition(toMonacoPosition(lineEndPos))
+    content = '\n' + content.replace(/\n$/, '')
+    return insert(content, { start: lineEndPos, end: lineEndPos })
+  }
+
+  async insertInlineText(text: string, range: Range = this.getSelectionRange()) {
+    return this.insertInlineContent('text', text, range)
+  }
+
+  async insertInlineSnippet(snippet: string, range: Range = this.getSelectionRange()) {
+    return this.insertInlineContent('snippet', snippet, range)
+  }
+
+  async insertBlockText(text: string, range: Range = this.getSelectionRange()) {
+    return this.insertBlockContent('text', text, range)
+  }
+
+  async insertBlockSnippet(snippet: string, range: Range = this.getSelectionRange()) {
+    return this.insertBlockContent('snippet', snippet, range)
+  }
+
   private cursorPositionRef = shallowRef<Position | null>(null)
   /** Cursor position (in current active text document) */
   get cursorPosition() {
@@ -478,3 +575,7 @@ export class CodeEditorUI extends Disposable implements ICodeEditorUI {
     super.dispose()
   }
 }
+
+function isEmptyText(s: string) {
+  return /^\s*$/.test(s)
+}

spx-gui/src/components/editor/code-editor/ui/markdown/CodeBlock.vue

@@ -19,7 +19,7 @@ const code = useSlotText()
 const handleInsert = useMessageHandle(
   () =>
     editorCtx.project.history.doAction({ name: { en: 'Insert code', zh: '插入代码' } }, () =>
-      codeEditorUICtx.ui.insertText(code.value)
+      codeEditorUICtx.ui.insertBlockText(code.value)
     ),
   { en: 'Failed to insert code', zh: '插入代码失败' }
 ).fn