codemirror-foldable-indentation-guides 1.0.2 → 1.1.0

package/src/indentation-view-plugin.ts

@@ -12,11 +12,15 @@ import {
   getAllLines,
   getCurrentLine,
   getNearestFoldRange,
+  getVisibleLines,
   toggleFoldRange,
 } from './utils';
 import { buildIndentationDecorations } from './build-indentation-decorations';
 import { getNewIndentationMap } from './get-new-indentation-map';
 import { handleGuideHover } from './handle-guide-hover';
+import { Line } from '@codemirror/state';
+
+const DEBOUNCE_DELAY_MS = 500;
 
 export class IndentationViewPlugin implements PluginValue {
   private unitWidth: number;
@@ -26,10 +30,6 @@ export class IndentationViewPlugin implements PluginValue {
   private viewContentWidth: number;
   decorations: DecorationSet;
 
-  /** Edges of current active block in a viewport */
-  private activeColEdges: number[];
-  private activeCol: number;
-
   /** map of lineNumber -> indent level (integer) */
   lineLevels: Map<number, number>;
 
@@ -44,25 +44,49 @@ export class IndentationViewPlugin implements PluginValue {
     end: number;
   } | null = null;
 
+  lastCursorPos: {
+    x: number;
+    y: number;
+  } | null = null;
+
+  private allStateDebounceId: ReturnType<typeof setTimeout> | null = null;
+
   constructor(view: EditorView) {
-    const built = buildIndentationDecorations(view);
+    const visibleLines = getVisibleLines(view);
+    this.indentationMap = this.updateIndentationMap(view, visibleLines);
+    const built = buildIndentationDecorations(
+      view,
+      this.indentationMap,
+      visibleLines,
+    );
     this.highlightHoveredGuide = false;
     this.highlightHoveredBlock = false;
-    this.activeColEdges = [];
-    this.activeCol = 0;
     this.view = view;
-    this.viewContentWidth =
-      view.dom.querySelector('.cm-content')?.clientWidth ?? 0;
-    this.contentElement = view.dom.querySelector('.cm-content');
+    this.viewContentWidth = view.contentDOM?.clientWidth ?? 0;
+    this.contentElement = view.contentDOM;
     this.decorations = built.decoSet;
     this.lineLevels = built.lineLevels;
-    this.indentationMap = built.indentationMap;
     this.unitWidth = getIndentUnit(view.state);
     this.currentLineNumber = getCurrentLine(view.state).number;
   }
 
+  private updateIndentationMap(view: EditorView, visibleLines: Set<Line>) {
+    if (this.allStateDebounceId) {
+      clearTimeout(this.allStateDebounceId);
+    }
+    this.indentationMap?.terminate();
+    this.indentationMap = getNewIndentationMap(view.state, visibleLines);
+
+    this.allStateDebounceId = setTimeout(() => {
+      const allLines = getAllLines(view);
+      this.indentationMap.initLinesAsync(allLines);
+    }, DEBOUNCE_DELAY_MS);
+
+    return this.indentationMap;
+  }
+
   update(update: ViewUpdate) {
-    this.contentElement ??= update.view.dom.querySelector('.cm-content');
+    this.contentElement ??= update.view.contentDOM;
     const unitWidth = getIndentUnit(update.state);
     const unitWidthChanged = unitWidth !== this.unitWidth;
     if (unitWidthChanged) {
@@ -91,12 +115,34 @@ export class IndentationViewPlugin implements PluginValue {
 
     const activeBlockUpdateRequired = isHighlightActive && viewChanged;
 
-    if (update.docChanged || update.viewportChanged || unitWidthChanged) {
-      const built = buildIndentationDecorations(update.view);
+    const visibleLines =
+      update.docChanged ||
+      update.viewportChanged ||
+      unitWidthChanged ||
+      activeBlockUpdateRequired
+        ? getVisibleLines(update.view)
+        : null;
+    if (!visibleLines) {
+      return;
+    }
+
+    if (update.docChanged || unitWidthChanged) {
+      this.updateIndentationMap(update.view, visibleLines);
+    }
+
+    if (update.viewportChanged || unitWidthChanged) {
+      if (!update.docChanged) {
+        this.indentationMap.initLinesSync(visibleLines);
+      }
 
+      const built = buildIndentationDecorations(
+        update.view,
+        this.indentationMap,
+        visibleLines,
+      );
       this.decorations = built.decoSet;
       this.lineLevels = built.lineLevels;
-      this.indentationMap = built.indentationMap;
+
       this.clearHoverClasses();
     }
 
@@ -105,7 +151,7 @@ export class IndentationViewPlugin implements PluginValue {
       this.updateActiveColumns(
         lineNumber,
         highlightActiveMarker,
-        highlightActiveBlockBackground
+        highlightActiveBlockBackground,
       );
     }
   }
@@ -113,56 +159,45 @@ export class IndentationViewPlugin implements PluginValue {
   private updateActiveColumns(
     lineNumber: number,
     highlightActiveMarker: boolean,
-    highlightActiveBlockBackground: boolean
+    highlightActiveBlockBackground: boolean,
   ) {
     requestAnimationFrame(() => {
       this.clearActiveClasses();
 
-      const lines = this.indentationMap
-        .getActiveLinesNumbers(lineNumber)
-        ?.sort((a, b) => a.line.number - b.line.number);
-      if (lines) {
-        lines.forEach(line => {
-          const { active: activeCol } = line;
-          const lineNumber = line.line.number;
-
-          if (highlightActiveMarker) {
-            this.applyActiveMarker(lineNumber, activeCol ?? 0);
-          }
-          if (highlightActiveBlockBackground) {
-            this.applyBackgroundHighlight(lineNumber, activeCol ?? 0, 'active');
-          }
-        });
-        this.activeColEdges = [
-          lines[0].line.number,
-          lines[lines.length - 1].line.number,
-        ];
-        this.activeCol = lines[0].active ?? 0;
-        return;
-      }
+      const activeLines =
+        this.indentationMap?.getActiveLinesNumbers(lineNumber);
 
-      if (!this.activeColEdges || !this.activeCol) {
+      if (!activeLines?.length || activeLines[0].active === undefined) {
         return;
       }
 
-      /** If current line is outside computed indentation map lines,
-       *  compute active block lines from active column points */
-      const ranges = this.activeColEdges.map(edge =>
-        this.computeBlockRange(edge, this.activeCol)
-      );
+      const minLineNumber =
+        activeLines.reduce(
+          (acc, line) => Math.min(acc, line.line.number),
+          Infinity,
+        ) - 1;
+      const maxLineNumber =
+        activeLines.reduce(
+          (acc, line) => Math.max(acc, line.line.number),
+          -Infinity,
+        ) + 1;
+
+      if (highlightActiveMarker) {
+        this.applyActiveMarker(
+          minLineNumber,
+          maxLineNumber,
+          activeLines[0].active,
+        );
+      }
 
-      ranges.forEach(range => {
-        for (let i = range.start; i <= range.end; i++) {
-          if (highlightActiveMarker) {
-            this.applyActiveMarker(lineNumber, this.activeCol);
-          }
-          if (highlightActiveBlockBackground) {
-            this.applyBackgroundHighlight(lineNumber, this.activeCol, 'active');
-          }
-        }
-        this.activeColEdges.push(range.start, range.end);
-      });
-      this.activeColEdges = Array.from(new Set(this.activeColEdges));
+      if (highlightActiveBlockBackground) {
+        this.applyBackgroundHighlight(
+          minLineNumber,
+          maxLineNumber,
+          activeLines[0].active,
+          'active',
+        );
+      }
     });
   }
 
@@ -195,36 +230,45 @@ export class IndentationViewPlugin implements PluginValue {
   }
 
   clearActiveClasses() {
-    const dom = this.view.dom;
+    const dom = this.view.contentDOM;
 
     dom
       .querySelectorAll('.cm-indentation-guide-button_active')
-      .forEach(el => el.classList.remove('cm-indentation-guide-button_active'));
+      .forEach((el) =>
+        el.classList.remove('cm-indentation-guide-button_active'),
+      );
 
     dom
       .querySelectorAll<HTMLElement>(
-        '.cm-indentation-guide-background-highlight_active'
+        '.cm-indentation-guide-background-highlight_active',
       )
-      .forEach(el => {
+      .forEach((el) => {
         el.classList.remove('cm-indentation-guide-background-highlight_active');
       });
   }
 
-  applyActiveMarker(lineNumber: number, col: number) {
-    const root = this.view.dom;
-    const selector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-button[data-col="${col}"]`;
+  private applyActiveMarker(start: number, end: number, col: number) {
+    const root = this.view.contentDOM;
+    const selector = `.cm-indentation-guide-button[data-col="${col}"]`;
 
-    root.querySelectorAll(selector).forEach(btn => {
-      btn.classList.add('cm-indentation-guide-button_active');
+    root.querySelectorAll<HTMLButtonElement>(selector).forEach((btn) => {
+      const lineAttr = btn.parentElement?.dataset.line;
+      if (!lineAttr) {
+        return;
+      }
+      const ln = Number(lineAttr);
+      if (ln >= start && ln <= end) {
+        btn.classList.add('cm-indentation-guide-button_active');
+      }
     });
   }
 
   /** highlight DOM buttons in column `col` for lines in [start, end]  */
   applyHoverClasses(start: number, end: number, col: number) {
     this.clearHoverClasses();
-    const root = this.view.dom;
+    const root = this.view.contentDOM;
     const selector = `.cm-indentation-guide-button[data-col="${col}"]`;
-    root.querySelectorAll(selector).forEach(btn => {
+    root.querySelectorAll(selector).forEach((btn) => {
       const lineAttr = btn.parentElement?.dataset.line;
       if (!lineAttr) {
         return;
@@ -235,7 +279,7 @@ export class IndentationViewPlugin implements PluginValue {
           btn.classList.add('cm-indentation-guide-button_hover');
         }
         if (this.highlightHoveredBlock) {
-          this.applyBackgroundHighlight(ln, col, 'hover');
+          this.applyBackgroundHighlight(start, end, col, 'hover');
         }
       }
     });
@@ -243,40 +287,46 @@ export class IndentationViewPlugin implements PluginValue {
   }
 
   applyBackgroundHighlight(
-    lineNumber: number,
+    start: number,
+    end: number,
     col: number,
-    type: 'active' | 'hover'
+    type: 'active' | 'hover',
   ) {
-    const root = this.view.dom;
-    const selector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-button[data-col="${col}"]`;
-
-    const button = root.querySelector<HTMLButtonElement>(selector);
-    if (!button) {
-      return;
-    }
+    const root = this.view.contentDOM;
+    const selector = `.cm-indentation-guide-button[data-col="${col}"]`;
+    const highlightBackgroundSelector = `.cm-indentation-guide-background-highlight`;
 
-    let highlightLeft = button.offsetLeft;
-    let btnWidth = button.offsetWidth;
+    root.querySelectorAll<HTMLButtonElement>(selector).forEach((button) => {
+      const lineAttr = button.parentElement?.dataset.line;
+      if (!lineAttr) {
+        return;
+      }
+      const ln = Number(lineAttr);
+      if (ln < start || ln > end) {
+        return;
+      }
 
-    const highlightBackgroundSelector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-background-highlight`;
-    const backgroundDiv = root.querySelector<HTMLElement>(
-      highlightBackgroundSelector
-    );
-    if (!backgroundDiv) {
-      return;
-    }
+      const backgroundDiv = button.parentElement?.querySelector<HTMLElement>(
+        highlightBackgroundSelector,
+      );
+      if (!backgroundDiv) {
+        return;
+      }
 
-    backgroundDiv.style.setProperty(
-      `--indentation-guide-background-highlight-${type}-left`,
-      `${highlightLeft}px`
-    );
-    backgroundDiv.style.setProperty(
-      `--indentation-guide-background-highlight-${type}-width`,
-      `${this.viewContentWidth - (highlightLeft ?? 0) - (btnWidth ?? 0) / 2}px`
-    );
-    backgroundDiv.classList.add(
-      `cm-indentation-guide-background-highlight_${type}`
-    );
+      let highlightLeft = button.offsetLeft;
+      let btnWidth = button.offsetWidth;
+      backgroundDiv.style.setProperty(
+        `--indentation-guide-background-highlight-${type}-left`,
+        `${highlightLeft}px`,
+      );
+      backgroundDiv.style.setProperty(
+        `--indentation-guide-background-highlight-${type}-width`,
+        `${this.viewContentWidth - (highlightLeft ?? 0) - (btnWidth ?? 0) / 2}px`,
+      );
+      backgroundDiv.classList.add(
+        `cm-indentation-guide-background-highlight_${type}`,
+      );
+    });
   }
 
   clearHoverClasses() {
@@ -284,18 +334,20 @@ export class IndentationViewPlugin implements PluginValue {
       return;
     }
 
-    const dom = this.view.dom;
+    const dom = this.view.contentDOM;
 
     dom
       .querySelectorAll('.cm-indentation-guide-button_hover')
-      .forEach(el => el.classList.remove('cm-indentation-guide-button_hover'));
+      .forEach((el) =>
+        el.classList.remove('cm-indentation-guide-button_hover'),
+      );
     this.hoveredGuide = null;
 
     dom
       .querySelectorAll<HTMLElement>(
-        '.cm-indentation-guide-background-highlight'
+        '.cm-indentation-guide-background-highlight',
       )
-      .forEach(el => {
+      .forEach((el) => {
         el.classList.remove('cm-indentation-guide-background-highlight_hover');
       });
   }
@@ -304,32 +356,47 @@ export class IndentationViewPlugin implements PluginValue {
 export const indentationGuidesPlugin = ViewPlugin.fromClass(
   IndentationViewPlugin,
   {
-    decorations: v => v.decorations,
+    decorations: (v) => v.decorations,
 
     eventHandlers: {
-      mousemove: (e, view) => {
-        const { highlightHoveredMarker, highlightHoveredBlockBackground } =
-          view.state.facet(indentationGuidesConfig);
-        if (!highlightHoveredMarker && !highlightHoveredBlockBackground) {
+      scroll() {
+        if (!this.lastCursorPos) {
           return;
         }
 
-        const plugin = view.plugin(indentationGuidesPlugin);
-        if (!plugin) {
+        const target = document
+          .elementFromPoint(this.lastCursorPos.x, this.lastCursorPos.y)
+          ?.closest('.cm-indentation-guide-button') as HTMLElement | null;
+
+        if (target) {
+          handleGuideHover(target, this);
+        }
+        return;
+      },
+
+      mousemove(e, view) {
+        const { highlightHoveredMarker, highlightHoveredBlockBackground } =
+          view.state.facet(indentationGuidesConfig);
+        if (!highlightHoveredMarker && !highlightHoveredBlockBackground) {
           return;
         }
 
         const target = (e.target as HTMLElement).closest(
-          '.cm-indentation-guide-button'
+          '.cm-indentation-guide-button',
         ) as HTMLElement | null;
         if (target) {
-          handleGuideHover(target, plugin);
+          handleGuideHover(target, this);
+          this.lastCursorPos = {
+            x: e.clientX,
+            y: e.clientY,
+          };
         } else {
-          plugin.clearHoverClasses();
+          this.clearHoverClasses();
+          this.lastCursorPos = null;
         }
       },
 
-      mouseout: (e, view) => {
+      mouseout(e, view) {
         const { highlightHoveredMarker, highlightHoveredBlockBackground } =
           view.state.facet(indentationGuidesConfig);
         if (!highlightHoveredMarker && !highlightHoveredBlockBackground) {
@@ -343,19 +410,18 @@ export const indentationGuidesPlugin = ViewPlugin.fromClass(
           !related.closest ||
           !related.closest('.cm-indentation-guide')
         ) {
-          const plugin = view.plugin(indentationGuidesPlugin);
-          plugin?.clearHoverClasses();
+          this.clearHoverClasses();
         }
       },
 
-      mousedown: (e, view) => {
+      mousedown(e, view) {
         const { foldBlockOnClick } = view.state.facet(indentationGuidesConfig);
         if (!foldBlockOnClick) {
           return;
         }
 
         const target = (e.target as HTMLElement).closest(
-          '.cm-indentation-guide-button'
+          '.cm-indentation-guide-button',
         ) as HTMLElement | null;
         if (!target) {
           return false;
@@ -368,10 +434,7 @@ export const indentationGuidesPlugin = ViewPlugin.fromClass(
         if (!lineAttr || !colAttr) {
           return false;
         }
-        const plugin = view.plugin(indentationGuidesPlugin);
-        if (!plugin) {
-          return false;
-        }
+
         const lineNumber = Number(lineAttr);
         const col = Number(colAttr);
 
@@ -383,9 +446,9 @@ export const indentationGuidesPlugin = ViewPlugin.fromClass(
           const level = entry?.level ?? 0;
           lineLevels.set(line.number, level);
         }
-        plugin.lineLevels = lineLevels;
+        this.lineLevels = lineLevels;
 
-        const { start } = plugin.computeBlockRange(lineNumber, col);
+        const { start } = this.computeBlockRange(lineNumber, col);
         const range = getNearestFoldRange(view, start - 1);
         if (!range) {
           return;
@@ -395,5 +458,5 @@ export const indentationGuidesPlugin = ViewPlugin.fromClass(
         return true;
       },
     },
-  }
+  },
 );

package/src/map.ts

@@ -1,4 +1,4 @@
-import { Line, EditorState } from '@codemirror/state';
+import { EditorState, Line } from '@codemirror/state';
 import { numColumns } from './utils';
 
 export interface IndentEntry {
@@ -22,9 +22,6 @@ export class IndentationMap {
   /** The {@link EditorState} indentation is derived from. */
   private state: EditorState;
 
-  /** The set of lines that are used as an entrypoint. */
-  private lines: Set<Line>;
-
   /** The internal mapping of line numbers to {@link IndentEntry} objects. */
   private map: Map<number, IndentEntry>;
 
@@ -34,6 +31,8 @@ export class IndentationMap {
   /** The type of indentation to use (terminate at end of scope vs last non-empty line in scope) */
   private markerType: 'fullScope' | 'codeOnly';
 
+  private terminated = false;
+
   /**
    * @param lines - The set of lines to get the indentation map for.
    * @param state - The {@link EditorState} to derive the indentation map from.
@@ -44,19 +43,45 @@ export class IndentationMap {
     lines: Set<Line>,
     state: EditorState,
     unitWidth: number,
-    markerType: 'fullScope' | 'codeOnly'
+    markerType: 'fullScope' | 'codeOnly',
   ) {
-    this.lines = lines;
     this.state = state;
     this.map = new Map();
     this.unitWidth = unitWidth;
     this.markerType = markerType;
 
-    for (const line of this.lines) {
+    for (const line of lines) {
       this.add(line);
     }
   }
 
+  initLinesSync(lines: Set<Line>) {
+    const linesArr = [...lines];
+    for (let i = 0; i < linesArr.length; i++) {
+      const line = linesArr[i];
+      this.add(line);
+    }
+  }
+
+  async initLinesAsync(lines: Set<Line>) {
+    const linesArr = [...lines];
+    for (let i = 0; i < linesArr.length; i++) {
+      if (this.terminated) {
+        break;
+      }
+
+      const line = linesArr[i];
+      this.add(line);
+      if (i % 100 === 0) {
+        await new Promise((resolve) => setTimeout(resolve));
+      }
+    }
+  }
+
+  terminate() {
+    this.terminated = true;
+  }
+
   /**
    * Checks if the indentation map has an entry for the given line.
    *
@@ -76,10 +101,6 @@ export class IndentationMap {
   get(line: Line | number) {
     const entry = this.map.get(typeof line === 'number' ? line : line.number);
 
-    if (!entry) {
-      throw new Error('Line not found in indentation map');
-    }
-
     return entry;
   }
 
@@ -119,11 +140,14 @@ export class IndentationMap {
       if (line.number === this.state.doc.lines) {
         const prev = this.closestNonEmpty(line, -1);
 
-        return this.set(line, 0, prev.level);
+        return this.set(line, 0, prev?.level ?? 0);
       }
 
       const prev = this.closestNonEmpty(line, -1);
       const next = this.closestNonEmpty(line, 1);
+      if (!prev || !next) {
+        return this.set(line, 0, 0);
+      }
 
       // if the next line ends the block and the marker type is not set to codeOnly,
       // we'll just use the previous line's indentation
@@ -165,7 +189,7 @@ export class IndentationMap {
     while (dir === -1 ? lineNo >= 1 : lineNo <= this.state.doc.lines) {
       if (this.has(lineNo)) {
         const entry = this.get(lineNo);
-        if (!entry.empty) {
+        if (!entry?.empty) {
           return entry;
         }
       }
@@ -205,11 +229,14 @@ export class IndentationMap {
     }
 
     let current = this.get(currentLine);
+    if (!current) {
+      return;
+    }
 
     // check if the current line is starting a new block, if yes, we want to
     // start from inside the block.
     if (this.has(current.line.number + 1)) {
-      const next = this.get(current.line.number + 1);
+      const next = this.get(current.line.number + 1)!;
       if (next.level > current.level) {
         current = next;
       }
@@ -217,7 +244,7 @@ export class IndentationMap {
 
     // same, but if the current line is ending a block
     if (this.has(current.line.number - 1)) {
-      const prev = this.get(current.line.number - 1);
+      const prev = this.get(current.line.number - 1)!;
       if (prev.level > current.level) {
         current = prev;
       }
@@ -240,8 +267,7 @@ export class IndentationMap {
       }
 
       const prev = this.get(start - 1);
-
-      if (prev.level < current.level) {
+      if (!prev || prev.level < current.level) {
         break;
       }
 
@@ -256,8 +282,7 @@ export class IndentationMap {
       }
 
       const next = this.get(end + 1);
-
-      if (next.level < current.level) {
+      if (!next || next.level < current.level) {
         break;
       }