feat: show gutter marker next to line under pointer

Author: ivan-lednev

src/main.ts

@@ -1,3 +1,4 @@
+import { type Extension } from "@codemirror/state";
 import {
   MarkdownView,
   Notice,
@@ -69,6 +70,7 @@ import { createGetTasksApi } from "./tasks-plugin";
 import type { ObsidianContext, OnUpdateFn, PointerDateTime } from "./types";
 import { askForConfirmation } from "./ui/confirmation-modal";
 import { createEditorMenuCallback } from "./ui/editor-menu";
+import { hoverPlugin } from "./ui/gutter-plugin";
 import { useDateRanges } from "./ui/hooks/use-date-ranges";
 import { useDebounceWithDelay } from "./ui/hooks/use-debounce-with-delay";
 import { mountStatusBarWidget } from "./ui/hooks/use-status-bar-widget";
@@ -94,6 +96,7 @@ export default class DayPlanner extends Plugin {
   private sTaskEditor!: STaskEditor;
   private vaultFacade!: VaultFacade;
   private transactionWriter!: TransactionWriter;
+  private extensions: Extension[] = [];
 
   async onload() {
     const initialPluginData: PluginData = {
@@ -183,6 +186,13 @@ export default class DayPlanner extends Plugin {
 
     await this.handleNewPluginVersion();
     await this.initTimelineLeafSilently();
+
+    this.registerEditorExtension([
+      hoverPlugin({
+        onpointerup: () => {},
+        markerPredicate: () => true,
+      }),
+    ]);
   }
 
   async onunload() {

src/ui/gutter-plugin.ts

@@ -0,0 +1,126 @@
+import { Prec, StateEffect, StateField } from "@codemirror/state";
+import { EditorView, gutter, GutterMarker, ViewPlugin } from "@codemirror/view";
+import { getIcon } from "obsidian";
+import { isNotVoid } from "typed-assert";
+
+class ClockControlMarker extends GutterMarker {
+  toDOM() {
+    const icon = getIcon("play");
+
+    isNotVoid(icon);
+
+    return icon;
+  }
+}
+
+export function createClockControlExtension(props: {
+  onpointerup: (event: Event, line: number) => void;
+}) {
+  const { onpointerup } = props;
+
+  const marker = new ClockControlMarker();
+
+  return Prec.lowest(
+    gutter({
+      class: "cm-planner-clock-gutter",
+      lineMarker(view, line) {
+        if (
+          view.state.doc.lineAt(line.from).number ===
+          view.state.field(hoveredLineNumber)
+        ) {
+          return marker;
+        }
+
+        return null;
+      },
+      lineMarkerChange(update) {
+        return (
+          update.state.field(hoveredLineNumber) !==
+          update.startState.field(hoveredLineNumber)
+        );
+      },
+      initialSpacer() {
+        return marker;
+      },
+      domEventHandlers: {
+        pointerup: (view, line, event) => {
+          onpointerup(event, view.state.doc.lineAt(line.from).number);
+
+          return true;
+        },
+      },
+    }),
+  );
+}
+
+const setHoveredLineNumber = StateEffect.define<number | null>({
+  map(line) {
+    return line;
+  },
+});
+
+const hoveredLineNumber = StateField.define<number | null>({
+  create() {
+    return null;
+  },
+  update(previous, transaction) {
+    return (
+      transaction.effects.find((it) => it.is(setHoveredLineNumber))?.value ??
+      previous
+    );
+  },
+});
+
+function createLineNumberPlugin(props: {
+  markerPredicate: (line: number | null) => boolean;
+}) {
+  const { markerPredicate } = props;
+
+  return ViewPlugin.fromClass(
+    class {
+      private readonly markerPredicate = markerPredicate;
+
+      constructor(readonly view: EditorView) {}
+
+      setHoveredLineNumber(lineNumber: number | null) {
+        if (
+          this.view.state.field(hoveredLineNumber) !== lineNumber &&
+          this.markerPredicate(lineNumber)
+        ) {
+          this.view.dispatch({
+            effects: setHoveredLineNumber.of(lineNumber),
+          });
+        }
+      }
+    },
+    {
+      eventObservers: {
+        mouseover(event, view) {
+          const posAtCoords = view.posAtCoords({
+            x: event.clientX,
+            y: event.clientY,
+          });
+
+          const lineAtCursor = posAtCoords
+            ? view.state.doc.lineAt(posAtCoords).number
+            : null;
+
+          this.setHoveredLineNumber(lineAtCursor);
+        },
+      },
+    },
+  );
+}
+
+export function hoverPlugin(props: {
+  onpointerup: (event: Event, line: number) => void;
+  markerPredicate: (line: number | null) => boolean;
+}) {
+  const { onpointerup, markerPredicate } = props;
+
+  return [
+    createClockControlExtension({ onpointerup }),
+    createLineNumberPlugin({ markerPredicate }),
+    hoveredLineNumber,
+  ];
+}

vite.config.mts

@@ -73,7 +73,18 @@ export default defineConfig((env) => ({
           return assetInfo.name;
         },
       },
-      external: ["obsidian", "electron"],
+      external: [
+        "obsidian",
+        "electron",
+        "@codemirror/autocomplete",
+        "@codemirror/collab",
+        "@codemirror/commands",
+        "@codemirror/language",
+        "@codemirror/lint",
+        "@codemirror/search",
+        "@codemirror/state",
+        "@codemirror/view",
+      ],
     },
   },
   test: {