Editor and Document
Document
The useDocumentText composable can be used to get the text of the document.
ts
import type { ExtensionContext } from 'vscode'
import { computed, defineExtension, ref, useActiveTextEditor, useDocumentText, watchEffect } from 'reactive-vscode'
export = defineExtension(() => {
const editor = useActiveTextEditor()
const text = useDocumentText(() => editor.value?.document)
// Reactive, may be set from other places
const name = ref('John Doe')
watchEffect(() => {
text.value = `Hello, ${name.value}!`
})
})
Editor Decoration
The useEditorDecorations composable can be used to add decorations to the editor.
ts
import { defineExtension, useActiveTextEditor, useEditorDecorations } from 'reactive-vscode'
export = defineExtension(() => {
const editor = useActiveTextEditor()
useEditorDecorations(
editor,
{ backgroundColor: 'red' }, // Or created decoration type
() => [/* Dynamic calculated ranges */] // Or Ref/Computed
)
})
See TextEditor.setDecorations for more information. To create a decoration type, use window.createTextEditorDecorationType.
Editor Selections
The following 4 composables can be used to get and set the selections of editors.
- useTextEditorSelections - All selections in the text editor.
- useTextEditorSelection - The primary selection in the text editor.
- useNotebookEditorSelections - All selections in the notebook editor.
- useNotebookEditorSelection - The primary selection in the notebook editor.
See their docs for more information. Note that useTextEditorSelections and useTextEditorSelection also support an acceptKind
option to filter the change kind which has triggered this event (See TextEditorSelectionChangeKind).
Editor Viewport
The following 3 composables can be used to get the viewport information of editors.
- useTextEditorViewColumn - The view column of the text editor.
- useTextEditorVisibleRanges - The visible ranges of the text editor.
- useNotebookEditorVisibleRanges - The visible ranges of the notebook editor.
See their docs for more information.