Remove VSCode from highlights code (#1221)

## Checklist

- [ ] I have added
[tests](https://www.cursorless.org/docs/contributing/test-case-recorder/)
- [ ] Add new "clear highlights" command that will remove all highlights
in active editor
- [ ] I have updated the
[docs](https://github.com/cursorless-dev/cursorless/tree/main/docs) and
[cheatsheet](https://github.com/cursorless-dev/cursorless/tree/main/cursorless-talon/src/cheatsheet)
- [ ] I have not broken the cheatsheet

---------

Co-authored-by: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 3 people

src/actions/BringMoveSwap.ts

@@ -8,11 +8,16 @@ import {
   getSelectionInfo,
   performEditsAndUpdateFullSelectionInfos,
 } from "../core/updateSelections/updateSelections";
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
 import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { EditWithRangeUpdater, Graph } from "../typings/Types";
 import { setSelectionsWithoutFocusingEditor } from "../util/setSelectionsAndFocusEditor";
-import { getContentRange, runForEachEditor } from "../util/targetUtils";
+import {
+  flashTargets,
+  getContentRange,
+  runForEachEditor,
+} from "../util/targetUtils";
 import { unifyRemovalTargets } from "../util/unifyRanges";
 import { Action, ActionReturnValue } from "./actions.types";
 
@@ -47,39 +52,37 @@ class BringMoveSwap implements Action {
   }
 
   private getDecorationContext() {
-    let sourceStyle;
+    let sourceStyle: FlashStyle;
     let getSourceRangeCallback;
     if (this.type === "bring") {
-      sourceStyle = this.graph.editStyles.referenced;
+      sourceStyle = FlashStyle.referenced;
       getSourceRangeCallback = getContentRange;
     } else if (this.type === "move") {
-      sourceStyle = this.graph.editStyles.pendingDelete;
+      sourceStyle = FlashStyle.pendingDelete;
       getSourceRangeCallback = getRemovalHighlightRange;
     }
     // NB this.type === "swap"
     else {
-      sourceStyle = this.graph.editStyles.pendingModification1;
+      sourceStyle = FlashStyle.pendingModification1;
       getSourceRangeCallback = getContentRange;
     }
     return {
       sourceStyle,
-      destinationStyle: this.graph.editStyles.pendingModification0,
+      destinationStyle: FlashStyle.pendingModification0,
       getSourceRangeCallback,
     };
   }
 
   private async decorateTargets(sources: Target[], destinations: Target[]) {
     const decorationContext = this.getDecorationContext();
     await Promise.all([
-      this.graph.editStyles.displayPendingEditDecorations(
+      flashTargets(
+        ide(),
         sources,
         decorationContext.sourceStyle,
         decorationContext.getSourceRangeCallback,
       ),
-      this.graph.editStyles.displayPendingEditDecorations(
-        destinations,
-        decorationContext.destinationStyle,
-      ),
+      flashTargets(ide(), destinations, decorationContext.destinationStyle),
     ]);
   }
 
@@ -220,12 +223,14 @@ class BringMoveSwap implements Action {
     const getRange = (target: Target) =>
       thatMark.find((t) => t.target === target)!.selection;
     return Promise.all([
-      this.graph.editStyles.displayPendingEditDecorations(
+      flashTargets(
+        ide(),
         thatMark.filter(({ isSource }) => isSource).map(({ target }) => target),
         decorationContext.sourceStyle,
         getRange,
       ),
-      this.graph.editStyles.displayPendingEditDecorations(
+      flashTargets(
+        ide(),
         thatMark
           .filter(({ isSource }) => !isSource)
           .map(({ target }) => target),

src/actions/CallbackAction.ts

@@ -2,6 +2,7 @@ import { EditableTextEditor, TextEditor } from "@cursorless/common";
 import { flatten } from "lodash";
 import { selectionToThatTarget } from "../core/commandRunner/selectionToThatTarget";
 import { callFunctionAndUpdateSelections } from "../core/updateSelections/updateSelections";
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
 import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
@@ -12,6 +13,7 @@ import {
 import {
   ensureSingleEditor,
   ensureSingleTarget,
+  flashTargets,
   runOnTargetsForEachEditor,
   runOnTargetsForEachEditorSequentially,
 } from "../util/targetUtils";
@@ -41,10 +43,7 @@ export class CallbackAction implements Action {
     options: CallbackOptions,
   ): Promise<ActionReturnValue> {
     if (options.showDecorations) {
-      await this.graph.editStyles.displayPendingEditDecorations(
-        targets,
-        this.graph.editStyles.referenced,
-      );
+      await flashTargets(ide(), targets, FlashStyle.referenced);
     }
 
     if (options.ensureSingleEditor) {

src/actions/CutToClipboard.ts

@@ -1,7 +1,15 @@
-import { PlainTarget } from "../processTargets/targets";
+import { Range } from "@cursorless/common";
+import {
+  FlashDescriptor,
+  FlashStyle,
+} from "../libs/common/ide/types/FlashDescriptor";
+import {
+  toCharacterRange,
+  toLineRange,
+} from "../libs/common/types/GeneralizedRange";
+import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
-import { getOutsideOverflow } from "../util/targetUtils";
 import { Action, ActionReturnValue } from "./actions.types";
 
 export class CutToClipboard implements Action {
@@ -10,32 +18,42 @@ export class CutToClipboard implements Action {
   }
 
   async run([targets]: [Target[]]): Promise<ActionReturnValue> {
-    const overflowTargets = targets.flatMap((target) => {
-      const range = target.getRemovalHighlightRange();
-      if (range == null) {
-        return [];
-      }
-      return getOutsideOverflow(target.editor, target.contentRange, range).map(
-        (overflow): Target =>
-          // TODO Instead of creating a new target display decorations by range
-          new PlainTarget({
-            editor: target.editor,
-            contentRange: overflow,
-            isReversed: target.isReversed,
-          }),
-      );
-    });
-
-    await Promise.all([
-      this.graph.editStyles.displayPendingEditDecorations(
-        targets,
-        this.graph.editStyles.referenced,
-      ),
-      this.graph.editStyles.displayPendingEditDecorations(
-        overflowTargets,
-        this.graph.editStyles.pendingDelete,
-      ),
-    ]);
+    await ide().flashRanges(
+      targets.flatMap((target) => {
+        const { editor, contentRange } = target;
+        const removalHighlightRange = target.getRemovalHighlightRange();
+
+        if (target.isLine) {
+          return [
+            {
+              editor,
+              range: toCharacterRange(contentRange),
+              style: FlashStyle.referenced,
+            },
+            {
+              editor,
+              range: toLineRange(removalHighlightRange),
+              style: FlashStyle.pendingDelete,
+            },
+          ];
+        }
+
+        return [
+          {
+            editor,
+            range: toCharacterRange(contentRange),
+            style: FlashStyle.referenced,
+          },
+          ...getOutsideOverflow(contentRange, removalHighlightRange).map(
+            (overflow): FlashDescriptor => ({
+              editor,
+              range: toCharacterRange(overflow),
+              style: FlashStyle.pendingDelete,
+            }),
+          ),
+        ];
+      }),
+    );
 
     const options = { showDecorations: false };
 
@@ -49,3 +67,17 @@ export class CutToClipboard implements Action {
     return { thatSelections: thatMark };
   }
 }
+
+/** Get the possible leading and trailing overflow ranges of the outside range compared to the inside range */
+function getOutsideOverflow(insideRange: Range, outsideRange: Range): Range[] {
+  const { start: insideStart, end: insideEnd } = insideRange;
+  const { start: outsideStart, end: outsideEnd } = outsideRange;
+  const result = [];
+  if (outsideStart.isBefore(insideStart)) {
+    result.push(new Range(outsideStart, insideStart));
+  }
+  if (outsideEnd.isAfter(insideEnd)) {
+    result.push(new Range(insideEnd, outsideEnd));
+  }
+  return result;
+}

src/actions/FollowLink.ts

@@ -1,7 +1,12 @@
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
 import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
-import { createThatMark, ensureSingleTarget } from "../util/targetUtils";
+import {
+  createThatMark,
+  ensureSingleTarget,
+  flashTargets,
+} from "../util/targetUtils";
 import { Action, ActionReturnValue } from "./actions.types";
 
 export default class FollowLink implements Action {
@@ -12,10 +17,7 @@ export default class FollowLink implements Action {
   async run([targets]: [Target[]]): Promise<ActionReturnValue> {
     const target = ensureSingleTarget(targets);
 
-    await this.graph.editStyles.displayPendingEditDecorations(
-      targets,
-      this.graph.editStyles.referenced,
-    );
+    await flashTargets(ide(), targets, FlashStyle.referenced);
 
     const openedLink = await ide()
       .getEditableTextEditor(target.editor)

src/actions/GenerateSnippet/GenerateSnippet.ts

@@ -1,10 +1,11 @@
 import { Range } from "@cursorless/common";
+import { FlashStyle } from "../../libs/common/ide/types/FlashDescriptor";
 import ide from "../../libs/cursorless-engine/singletons/ide.singleton";
 import { Offsets } from "../../processTargets/modifiers/surroundingPair/types";
 import isTesting from "../../testUtil/isTesting";
 import { Target } from "../../typings/target.types";
 import { Graph } from "../../typings/Types";
-import { ensureSingleTarget } from "../../util/targetUtils";
+import { ensureSingleTarget, flashTargets } from "../../util/targetUtils";
 import { Action, ActionReturnValue } from "../actions.types";
 import { constructSnippetBody } from "./constructSnippetBody";
 import { editText } from "./editText";
@@ -62,10 +63,7 @@ export default class GenerateSnippet implements Action {
     // immediately starts saying the name of the snippet (eg command chain
     // "snippet make funk camel my function"), we're more likely to
     // win the race and have the input box ready for them
-    this.graph.editStyles.displayPendingEditDecorations(
-      targets,
-      this.graph.editStyles.referenced,
-    );
+    flashTargets(ide(), targets, FlashStyle.referenced);
 
     if (snippetName == null) {
       snippetName = await ide().showInputBox({

src/actions/GetText.ts

@@ -1,6 +1,8 @@
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
+import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
-import { ensureSingleTarget } from "../util/targetUtils";
+import { ensureSingleTarget, flashTargets } from "../util/targetUtils";
 import { Action, ActionReturnValue } from "./actions.types";
 
 export default class GetText implements Action {
@@ -16,10 +18,7 @@ export default class GetText implements Action {
     } = {},
   ): Promise<ActionReturnValue> {
     if (showDecorations) {
-      await this.graph.editStyles.displayPendingEditDecorations(
-        targets,
-        this.graph.editStyles.referenced,
-      );
+      await flashTargets(ide(), targets, FlashStyle.referenced);
     }
 
     if (doEnsureSingleTarget) {

src/actions/Highlight.ts

@@ -1,6 +1,11 @@
-import { EditStyleName } from "../core/editStyles";
+import { HighlightId } from "@cursorless/common";
+import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
+import {
+  runOnTargetsForEachEditor,
+  toGeneralizedRange,
+} from "../util/targetUtils";
 import { Action, ActionReturnValue } from "./actions.types";
 
 export default class Highlight implements Action {
@@ -10,12 +15,33 @@ export default class Highlight implements Action {
 
   async run(
     [targets]: [Target[]],
-    styleName: EditStyleName = "highlight0",
+    highlightId?: HighlightId,
   ): Promise<ActionReturnValue> {
-    const style = this.graph.editStyles[styleName];
+    if (ide().capabilities.commands["highlight"] == null) {
+      throw Error(`The highlight action is not supported by your ide`);
+    }
 
-    this.graph.editStyles.clearDecorations(style);
-    await this.graph.editStyles.setDecorations(targets, style);
+    if (targets.length === 0) {
+      // Special case to clear highlights for the active editor when user says
+      // "highlight nothing"
+      const { activeTextEditor } = ide();
+
+      if (activeTextEditor == null) {
+        throw Error(
+          "The `highlight nothing` command requires an active text editor",
+        );
+      }
+
+      await ide().setHighlightRanges(highlightId, activeTextEditor, []);
+    } else {
+      await runOnTargetsForEachEditor(targets, (editor, targets) =>
+        ide().setHighlightRanges(
+          highlightId,
+          editor,
+          targets.map(toGeneralizedRange),
+        ),
+      );
+    }
 
     return {
       thatTargets: targets,

src/actions/InsertCopy.ts

@@ -2,9 +2,11 @@ import {
   RangeExpansionBehavior,
   Selection,
   TextEditor,
+  toCharacterRange,
 } from "@cursorless/common";
 import { flatten, zip } from "lodash";
 import { performEditsAndUpdateSelectionsWithBehavior } from "../core/updateSelections/updateSelections";
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
 import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { containingLineIfUntypedStage } from "../processTargets/modifiers/commonContainingScopeIfUntypedStages";
 import { Target } from "../typings/target.types";
@@ -26,15 +28,14 @@ class InsertCopy implements Action {
       await runOnTargetsForEachEditor(targets, this.runForEditor),
     );
 
-    await this.graph.editStyles.displayPendingEditDecorationsForRanges(
+    await ide().flashRanges(
       results.flatMap((result) =>
         result.thatMark.map((that) => ({
           editor: that.editor,
-          range: that.selection,
+          range: toCharacterRange(that.selection),
+          style: FlashStyle.justAdded,
         })),
       ),
-      this.graph.editStyles.justAdded,
-      true,
     );
 
     return {

src/actions/InsertEmptyLines.ts

@@ -1,6 +1,8 @@
 import { Range, Selection } from "@cursorless/common";
 import { flatten } from "lodash";
 import { performEditsAndUpdateSelections } from "../core/updateSelections/updateSelections";
+import { FlashStyle } from "../libs/common/ide/types/FlashDescriptor";
+import { toLineRange } from "../libs/common/types/GeneralizedRange";
 import ide from "../libs/cursorless-engine/singletons/ide.singleton";
 import { Target } from "../typings/target.types";
 import { Graph } from "../typings/Types";
@@ -85,10 +87,14 @@ class InsertEmptyLines implements Action {
       }),
     );
 
-    await this.graph.editStyles.displayPendingEditDecorationsForRanges(
-      results.flatMap((result) => result.lineSelections),
-      this.graph.editStyles.justAdded,
-      false,
+    await ide().flashRanges(
+      results.flatMap((result) =>
+        result.lineSelections.map(({ editor, range }) => ({
+          editor,
+          range: toLineRange(range),
+          style: FlashStyle.justAdded,
+        })),
+      ),
     );
 
     const thatMark = results.flatMap((result) => result.thatMark);