codemirror-foldable-indentation-guides 1.0.3 → 1.1.0

package/dist/index.cjs

@@ -354,6 +354,57 @@ class ClickableIndentationGuideWidget extends view.WidgetType {
     }
 }
 
+function buildIndentationDecorations(view$1, indentationMap, visibleLines) {
+    var _a;
+    const state = view$1.state;
+    const widgets = [];
+    const indentWidth = language.getIndentUnit(state);
+    const { thickness, activeThickness, hoverThickness, additionalPadding, foldBlockOnClick, highlightActiveBlockBackground, hideFirstIndent, } = state.facet(indentationGuidesConfig);
+    const lineLevels = new Map();
+    for (const line of visibleLines) {
+        const entry = indentationMap.get(line.number);
+        const level = (_a = entry === null || entry === void 0 ? void 0 : entry.level) !== null && _a !== void 0 ? _a : 0;
+        lineLevels.set(line.number, level);
+        if (!entry) {
+            continue;
+        }
+        /** Workaround for folded empty lines in python and similar languages.
+         *  Without this check, unwanted indentation guides will be drawn after foldPlaceholder
+         */
+        const foldedAndEmpty = isLineFolded(view$1, entry.line.number) &&
+            isLineEmpty(view$1, entry.line.number);
+        if (!level || foldedAndEmpty) {
+            continue;
+        }
+        const deco = view.Decoration.widget({
+            widget: new ClickableIndentationGuideWidget(indentWidth, level, line.number, {
+                thickness,
+                activeThickness,
+                hoverThickness,
+                additionalPadding,
+                foldOnClick: foldBlockOnClick,
+                highlightBackground: highlightActiveBlockBackground,
+                hideFirstIndent,
+            }),
+            side: 0,
+        });
+        widgets.push(deco.range(line.from));
+    }
+    return {
+        decoSet: view.Decoration.set(widgets),
+        lineLevels,
+    };
+}
+
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 /**
  * Indentation map for a set of lines.
  *
@@ -371,15 +422,40 @@ class IndentationMap {
      * @param markerType - The type of indentation to use (terminate at end of scope vs last line of code in scope)
      */
     constructor(lines, state, unitWidth, markerType) {
-        this.lines = lines;
+        this.terminated = false;
         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) {
+        const linesArr = [...lines];
+        for (let i = 0; i < linesArr.length; i++) {
+            const line = linesArr[i];
+            this.add(line);
+        }
+    }
+    initLinesAsync(lines) {
+        return __awaiter(this, void 0, void 0, function* () {
+            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) {
+                    yield new Promise((resolve) => setTimeout(resolve));
+                }
+            }
+        });
+    }
+    terminate() {
+        this.terminated = true;
+    }
     /**
      * Checks if the indentation map has an entry for the given line.
      *
@@ -397,9 +473,6 @@ class IndentationMap {
      */
     get(line) {
         const entry = this.map.get(typeof line === 'number' ? line : line.number);
-        if (!entry) {
-            throw new Error('Line not found in indentation map');
-        }
         return entry;
     }
     /**
@@ -421,6 +494,7 @@ class IndentationMap {
      * @param line - The {@link Line} to add to the map.
      */
     add(line) {
+        var _a;
         if (this.has(line)) {
             return this.get(line);
         }
@@ -433,10 +507,13 @@ class IndentationMap {
             // if we're at the end, we'll just use the previous line's indentation
             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, (_a = prev === null || prev === void 0 ? void 0 : prev.level) !== null && _a !== void 0 ? _a : 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
             if (prev.level >= next.level && this.markerType !== 'codeOnly') {
@@ -470,7 +547,7 @@ 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 === null || entry === void 0 ? void 0 : entry.empty)) {
                     return entry;
                 }
             }
@@ -500,6 +577,9 @@ class IndentationMap {
             return;
         }
         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)) {
@@ -528,7 +608,7 @@ class IndentationMap {
                 continue;
             }
             const prev = this.get(start - 1);
-            if (prev.level < current.level) {
+            if (!prev || prev.level < current.level) {
                 break;
             }
             prev.active = current.level;
@@ -540,7 +620,7 @@ class IndentationMap {
                 continue;
             }
             const next = this.get(end + 1);
-            if (next.level < current.level) {
+            if (!next || next.level < current.level) {
                 break;
             }
             next.active = current.level;
@@ -556,48 +636,6 @@ function getNewIndentationMap(state, lines) {
     return new IndentationMap(lines, state, indentWidth, markerType);
 }
 
-function buildIndentationDecorations(view$1) {
-    var _a;
-    const state = view$1.state;
-    const widgets = [];
-    const lines = getVisibleLines(view$1);
-    const indentWidth = language.getIndentUnit(state);
-    const { thickness, activeThickness, hoverThickness, additionalPadding, foldBlockOnClick, highlightActiveBlockBackground, hideFirstIndent, } = state.facet(indentationGuidesConfig);
-    const map = getNewIndentationMap(state, lines);
-    const lineLevels = new Map();
-    for (const line of lines) {
-        const entry = map.get(line.number);
-        const level = (_a = entry === null || entry === void 0 ? void 0 : entry.level) !== null && _a !== void 0 ? _a : 0;
-        lineLevels.set(line.number, level);
-        /** Workaround for folded empty lines in python and similar languages.
-         *  Without this check, unwanted indentation guides will be drawn after foldPlaceholder
-         */
-        const foldedAndEmpty = isLineFolded(view$1, entry.line.number) &&
-            isLineEmpty(view$1, entry.line.number);
-        if (!level || foldedAndEmpty) {
-            continue;
-        }
-        const deco = view.Decoration.widget({
-            widget: new ClickableIndentationGuideWidget(indentWidth, level, line.number, {
-                thickness,
-                activeThickness,
-                hoverThickness,
-                additionalPadding,
-                foldOnClick: foldBlockOnClick,
-                highlightBackground: highlightActiveBlockBackground,
-                hideFirstIndent,
-            }),
-            side: 0,
-        });
-        widgets.push(deco.range(line.from));
-    }
-    return {
-        indentationMap: map,
-        decoSet: view.Decoration.set(widgets),
-        lineLevels,
-    };
-}
-
 function handleGuideHover(guideElement, plugin) {
     var _a, _b, _c, _d, _e;
     if (!guideElement || !plugin) {
@@ -622,28 +660,42 @@ function handleGuideHover(guideElement, plugin) {
     plugin.applyHoverClasses(start, end, col);
 }
 
+const DEBOUNCE_DELAY_MS = 500;
 class IndentationViewPlugin {
     constructor(view) {
         var _a, _b;
         this.hoveredGuide = null;
-        const built = buildIndentationDecorations(view);
+        this.lastCursorPos = null;
+        this.allStateDebounceId = null;
+        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 =
-            (_b = (_a = view.dom.querySelector('.cm-content')) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
-        this.contentElement = view.dom.querySelector('.cm-content');
+        this.viewContentWidth = (_b = (_a = view.contentDOM) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0;
+        this.contentElement = view.contentDOM;
         this.decorations = built.decoSet;
         this.lineLevels = built.lineLevels;
-        this.indentationMap = built.indentationMap;
         this.unitWidth = language.getIndentUnit(view.state);
         this.currentLineNumber = getCurrentLine(view.state).number;
     }
+    updateIndentationMap(view, visibleLines) {
+        var _a;
+        if (this.allStateDebounceId) {
+            clearTimeout(this.allStateDebounceId);
+        }
+        (_a = this.indentationMap) === null || _a === void 0 ? void 0 : _a.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) {
         var _a, _b, _c;
-        (_a = this.contentElement) !== null && _a !== void 0 ? _a : (this.contentElement = update.view.dom.querySelector('.cm-content'));
+        (_a = this.contentElement) !== null && _a !== void 0 ? _a : (this.contentElement = update.view.contentDOM);
         const unitWidth = language.getIndentUnit(update.state);
         const unitWidthChanged = unitWidth !== this.unitWidth;
         if (unitWidthChanged) {
@@ -661,11 +713,25 @@ class IndentationViewPlugin {
             update.viewportChanged ||
             viewContentWidth !== this.viewContentWidth;
         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();
         }
         if (activeBlockUpdateRequired) {
@@ -675,46 +741,20 @@ class IndentationViewPlugin {
     }
     updateActiveColumns(lineNumber, highlightActiveMarker, highlightActiveBlockBackground) {
         requestAnimationFrame(() => {
-            var _a, _b;
+            var _a;
             this.clearActiveClasses();
-            const lines = (_a = this.indentationMap
-                .getActiveLinesNumbers(lineNumber)) === null || _a === void 0 ? void 0 : _a.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 !== null && activeCol !== void 0 ? activeCol : 0);
-                    }
-                    if (highlightActiveBlockBackground) {
-                        this.applyBackgroundHighlight(lineNumber, activeCol !== null && activeCol !== void 0 ? activeCol : 0, 'active');
-                    }
-                });
-                this.activeColEdges = [
-                    lines[0].line.number,
-                    lines[lines.length - 1].line.number,
-                ];
-                this.activeCol = (_b = lines[0].active) !== null && _b !== void 0 ? _b : 0;
+            const activeLines = (_a = this.indentationMap) === null || _a === void 0 ? void 0 : _a.getActiveLinesNumbers(lineNumber);
+            if (!(activeLines === null || activeLines === void 0 ? void 0 : activeLines.length) || activeLines[0].active === undefined) {
                 return;
             }
-            if (!this.activeColEdges || !this.activeCol) {
-                return;
+            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);
+            }
+            if (highlightActiveBlockBackground) {
+                this.applyBackgroundHighlight(minLineNumber, maxLineNumber, activeLines[0].active, 'active');
             }
-            /** 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));
-            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));
         });
     }
     /** compute block (inclusive line numbers) for a given clicked line and column (0-based) */
@@ -746,29 +786,37 @@ class IndentationViewPlugin {
         return { start, end };
     }
     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('.cm-indentation-guide-background-highlight_active')
-            .forEach(el => {
+            .forEach((el) => {
             el.classList.remove('cm-indentation-guide-background-highlight_active');
         });
     }
-    applyActiveMarker(lineNumber, col) {
-        const root = this.view.dom;
-        const selector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-button[data-col="${col}"]`;
-        root.querySelectorAll(selector).forEach(btn => {
-            btn.classList.add('cm-indentation-guide-button_active');
+    applyActiveMarker(start, end, col) {
+        const root = this.view.contentDOM;
+        const selector = `.cm-indentation-guide-button[data-col="${col}"]`;
+        root.querySelectorAll(selector).forEach((btn) => {
+            var _a;
+            const lineAttr = (_a = btn.parentElement) === null || _a === void 0 ? void 0 : _a.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, end, col) {
         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) => {
             var _a;
             const lineAttr = (_a = btn.parentElement) === null || _a === void 0 ? void 0 : _a.dataset.line;
             if (!lineAttr) {
@@ -780,68 +828,88 @@ class IndentationViewPlugin {
                     btn.classList.add('cm-indentation-guide-button_hover');
                 }
                 if (this.highlightHoveredBlock) {
-                    this.applyBackgroundHighlight(ln, col, 'hover');
+                    this.applyBackgroundHighlight(start, end, col, 'hover');
                 }
             }
         });
         this.hoveredGuide = { col, start, end };
     }
-    applyBackgroundHighlight(lineNumber, col, type) {
-        const root = this.view.dom;
-        const selector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-button[data-col="${col}"]`;
-        const button = root.querySelector(selector);
-        if (!button) {
-            return;
-        }
-        let highlightLeft = button.offsetLeft;
-        let btnWidth = button.offsetWidth;
-        const highlightBackgroundSelector = `.cm-indentation-guide[data-line="${lineNumber}"] > .cm-indentation-guide-background-highlight`;
-        const backgroundDiv = root.querySelector(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 !== null && highlightLeft !== void 0 ? highlightLeft : 0) - (btnWidth !== null && btnWidth !== void 0 ? btnWidth : 0) / 2}px`);
-        backgroundDiv.classList.add(`cm-indentation-guide-background-highlight_${type}`);
+    applyBackgroundHighlight(start, end, col, type) {
+        const root = this.view.contentDOM;
+        const selector = `.cm-indentation-guide-button[data-col="${col}"]`;
+        const highlightBackgroundSelector = `.cm-indentation-guide-background-highlight`;
+        root.querySelectorAll(selector).forEach((button) => {
+            var _a, _b;
+            const lineAttr = (_a = button.parentElement) === null || _a === void 0 ? void 0 : _a.dataset.line;
+            if (!lineAttr) {
+                return;
+            }
+            const ln = Number(lineAttr);
+            if (ln < start || ln > end) {
+                return;
+            }
+            const backgroundDiv = (_b = button.parentElement) === null || _b === void 0 ? void 0 : _b.querySelector(highlightBackgroundSelector);
+            if (!backgroundDiv) {
+                return;
+            }
+            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 !== null && highlightLeft !== void 0 ? highlightLeft : 0) - (btnWidth !== null && btnWidth !== void 0 ? btnWidth : 0) / 2}px`);
+            backgroundDiv.classList.add(`cm-indentation-guide-background-highlight_${type}`);
+        });
     }
     clearHoverClasses() {
         var _a;
         if (((_a = this.hoveredGuide) === null || _a === void 0 ? void 0 : _a.col) === null) {
             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('.cm-indentation-guide-background-highlight')
-            .forEach(el => {
+            .forEach((el) => {
             el.classList.remove('cm-indentation-guide-background-highlight_hover');
         });
     }
 }
 const indentationGuidesPlugin = view.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() {
+            var _a;
+            if (!this.lastCursorPos) {
                 return;
             }
-            const plugin = view.plugin(indentationGuidesPlugin);
-            if (!plugin) {
+            const target = (_a = document
+                .elementFromPoint(this.lastCursorPos.x, this.lastCursorPos.y)) === null || _a === void 0 ? void 0 : _a.closest('.cm-indentation-guide-button');
+            if (target) {
+                handleGuideHover(target, this);
+            }
+            return;
+        },
+        mousemove(e, view) {
+            const { highlightHoveredMarker, highlightHoveredBlockBackground } = view.state.facet(indentationGuidesConfig);
+            if (!highlightHoveredMarker && !highlightHoveredBlockBackground) {
                 return;
             }
             const target = e.target.closest('.cm-indentation-guide-button');
             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) {
                 return;
@@ -851,11 +919,10 @@ const indentationGuidesPlugin = view.ViewPlugin.fromClass(IndentationViewPlugin,
             if (!related ||
                 !related.closest ||
                 !related.closest('.cm-indentation-guide')) {
-                const plugin = view.plugin(indentationGuidesPlugin);
-                plugin === null || plugin === void 0 ? void 0 : plugin.clearHoverClasses();
+                this.clearHoverClasses();
             }
         },
-        mousedown: (e, view) => {
+        mousedown(e, view) {
             var _a, _b;
             const { foldBlockOnClick } = view.state.facet(indentationGuidesConfig);
             if (!foldBlockOnClick) {
@@ -871,10 +938,6 @@ const indentationGuidesPlugin = view.ViewPlugin.fromClass(IndentationViewPlugin,
             if (!lineAttr || !colAttr) {
                 return false;
             }
-            const plugin = view.plugin(indentationGuidesPlugin);
-            if (!plugin) {
-                return false;
-            }
             const lineNumber = Number(lineAttr);
             const col = Number(colAttr);
             const lines = getAllLines(view);
@@ -885,8 +948,8 @@ const indentationGuidesPlugin = view.ViewPlugin.fromClass(IndentationViewPlugin,
                 const level = (_b = entry === null || entry === void 0 ? void 0 : entry.level) !== null && _b !== void 0 ? _b : 0;
                 lineLevels.set(line.number, level);
             }
-            plugin.lineLevels = lineLevels;
-            const { start } = plugin.computeBlockRange(lineNumber, col);
+            this.lineLevels = lineLevels;
+            const { start } = this.computeBlockRange(lineNumber, col);
             const range = getNearestFoldRange(view, start - 1);
             if (!range) {
                 return;