Skip to content

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.

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.

See their docs for more information.