fix: Trail view in live preview doesn't scroll with the content

package.json

@@ -17,6 +17,10 @@
   "license": "MIT",
   "devDependencies": {
     "@aidenlx/folder-note-core": "^1.3.1",
+    "@codemirror/language": "^0.19.0",
+    "@codemirror/rangeset": "^0.19.0",
+    "@codemirror/state": "^0.19.0",
+    "@codemirror/view": "^0.19.0",
     "@rollup/plugin-commonjs": "^18.1.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-typescript": "^8.2.1",
@@ -31,7 +35,7 @@
     "auto-plugin-obsidian": "^0.1.4",
     "eslint": "^7.29.0",
     "mocha": "^9.1.3",
-    "obsidian": "^0.12.0",
+    "obsidian": "^0.13.11",
     "obsidian-dataview": "^0.4.20",
     "rollup": "^2.32.1",
     "rollup-plugin-svelte": "7.1.0",

rollup.config.js

@@ -12,7 +12,21 @@ export default {
     file: "main.js",
     exports: "default",
   },
-  external: ["obsidian", "fs", "os", "path"],
+  external: ["obsidian", "fs", "os", "path",
+    "@codemirror/autocomplete",
+    "@codemirror/closebrackets",
+    "@codemirror/commands",
+    "@codemirror/fold",
+    "@codemirror/gutter",
+    "@codemirror/history",
+    "@codemirror/language",
+    "@codemirror/rangeset",
+    "@codemirror/rectangular-selection",
+    "@codemirror/search",
+    "@codemirror/state",
+    "@codemirror/stream-parser",
+    "@codemirror/text",
+    "@codemirror/view",],
   plugins: [
     svelte({
       emitCss: false,

src/BreadcrumbsSettingTab.ts

@@ -26,7 +26,7 @@ import type { DebugLevel, Relations, visTypes } from "./interfaces";
 import type BCPlugin from "./main";
 import MatrixView from "./Views/MatrixView";
 import { getFields, splitAndTrim, strToRegex } from "./sharedFunctions";
-import { drawTrail } from "./Views/TrailView";
+import {drawTrail, updateLPView} from "./Views/TrailView";
 
 const fragWithHTML = (html: string) =>
   createFragment((frag) => (frag.createDiv().innerHTML = html));
@@ -485,6 +485,7 @@ export class BCSettingTab extends PluginSettingTab {
           settings.showBCs = value;
           await plugin.saveSettings();
           await drawTrail(plugin);
+          updateLPView();
         })
       );
 
@@ -500,6 +501,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.showBCsInEditLPMode = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           })
       );
 
@@ -533,6 +535,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.showTrail = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           });
       })
       .addToggle((toggle) => {
@@ -543,6 +546,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.showGrid = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           });
       })
       .addToggle((toggle) => {
@@ -553,6 +557,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.showJuggl = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           });
       })
       .addToggle((toggle) => {
@@ -563,6 +568,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.showPrevNext = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           });
       });
 
@@ -576,6 +582,7 @@ export class BCSettingTab extends PluginSettingTab {
           settings.gridDots = value;
           await plugin.saveSettings();
           await drawTrail(plugin);
+          updateLPView();
         })
       );
 
@@ -603,6 +610,7 @@ export class BCSettingTab extends PluginSettingTab {
           settings.gridHeatmap = value;
           await plugin.saveSettings();
           await drawTrail(plugin);
+          updateLPView();
         })
       );
 
@@ -659,6 +667,7 @@ export class BCSettingTab extends PluginSettingTab {
 
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           })
       );
 
@@ -673,6 +682,7 @@ export class BCSettingTab extends PluginSettingTab {
 
           await plugin.saveSettings();
           await drawTrail(plugin);
+          updateLPView();
         })
       );
 
@@ -689,6 +699,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.trailSeperator = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           })
       );
 
@@ -705,6 +716,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.noPathMessage = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           })
       );
 
@@ -720,6 +732,7 @@ export class BCSettingTab extends PluginSettingTab {
             settings.respectReadableLineLength = value;
             await plugin.saveSettings();
             await drawTrail(plugin);
+            updateLPView();
           })
       );
 

src/Views/TrailView.ts

@@ -1,6 +1,6 @@
 import type { MultiGraph } from "graphology";
 import { error, info } from "loglevel";
-import { MarkdownView, Notice, TFile } from "obsidian";
+import { MarkdownView, Notice, TFile, editorViewField } from "obsidian";
 import type { BCSettings } from "../interfaces";
 import NextPrev from "../Components/NextPrev.svelte";
 import TrailGrid from "../Components/TrailGrid.svelte";
@@ -16,6 +16,70 @@ import {
 import type BCPlugin from "../main";
 import { getFields, getRealnImplied } from "../sharedFunctions";
 import {createJugglTrail} from "../Visualisations/Juggl";
+import {Decoration, DecorationSet, EditorView, ViewPlugin, ViewUpdate, WidgetType} from "@codemirror/view";
+import {RangeSet, RangeSetBuilder} from "@codemirror/rangeset";
+
+let UPDATE_LP_VIEW = false;
+
+export function updateLPView() {
+  UPDATE_LP_VIEW = true;
+}
+
+export function buildCMPlugin(plugin: BCPlugin) {
+  class TrailWidget extends WidgetType {
+    element: HTMLElement;
+    constructor(element: HTMLElement) {
+      super();
+      this.element = element;
+    }
+
+    toDOM(view: EditorView): HTMLElement {
+      console.log("TO the doM!");
+      this.element.detach();
+      return this.element;
+    }
+
+    ignoreEvent(_event: Event): boolean {
+      return true;
+    }
+  }
+
+  return ViewPlugin.fromClass(
+      class {
+        decorations: DecorationSet;
+
+        constructor(view: EditorView) {
+          this.decorations = new RangeSetBuilder<Decoration>().finish();
+          this.buildDecorations(view).then(value => {this.decorations = value;});
+        }
+
+        update(update: ViewUpdate) {
+          if (UPDATE_LP_VIEW) {
+            this.buildDecorations(update.view).then(value => {this.decorations = value;});
+            UPDATE_LP_VIEW = false;
+          }
+        }
+
+        destroy() {}
+
+        async buildDecorations(view: EditorView) {
+          let builder = new RangeSetBuilder<Decoration>();
+          if (plugin.settings.showBCsInEditLPMode) {
+            let mdView: MarkdownView = view.state.field(editorViewField);
+            let element = await _drawTrail(plugin, mdView);
+            let widget = Decoration.widget({
+              widget: new TrailWidget(element)
+            });
+            builder.add(0, 0, widget);
+          }
+          return builder.finish();
+        }
+      },
+      {
+        decorations: v => v.decorations
+      }
+  )
+}
 
 function getLimitedTrailSub(plugin: BCPlugin) {
   const { settings, mainG } = plugin;
@@ -70,6 +134,15 @@ function getBreadcrumbs(
 }
 
 export async function drawTrail(plugin: BCPlugin): Promise<void> {
+  const activeMDView = plugin.app.workspace.getActiveViewOfType(MarkdownView);
+  console.log(activeMDView.getMode());
+  if (activeMDView.getMode() !== "preview") {
+    return;
+  }
+  await _drawTrail(plugin, activeMDView);
+}
+
+async function _drawTrail(plugin: BCPlugin, activeMDView: MarkdownView): Promise<HTMLElement> {
   try {
     const { settings, db, app } = plugin;
     const {
@@ -83,7 +156,7 @@ export async function drawTrail(plugin: BCPlugin): Promise<void> {
       showBCsInEditLPMode,
     } = settings;
     db.start2G("drawTrail");
-    const activeMDView = app.workspace.getActiveViewOfType(MarkdownView);
+
     const mode = activeMDView?.getMode();
     if (
       !showBCs ||
@@ -116,14 +189,16 @@ export async function drawTrail(plugin: BCPlugin): Promise<void> {
       view = activeMDView.previewMode.containerEl.querySelector(
         "div.markdown-preview-view"
       );
-    } else {
+      activeMDView.containerEl
+          .querySelectorAll(".BC-trail")
+          ?.forEach((trail) => trail.remove());
+    }
+    else {
       view = activeMDView.contentEl.querySelector("div.markdown-source-view");
       if (view.hasClass("is-live-preview")) livePreview = true;
     }
 
-    activeMDView.containerEl
-      .querySelectorAll(".BC-trail")
-      ?.forEach((trail) => trail.remove());
+
 
     const closedUp = getLimitedTrailSub(plugin);
     const sortedTrails = getBreadcrumbs(settings, closedUp, file);
@@ -194,6 +269,7 @@ export async function drawTrail(plugin: BCPlugin): Promise<void> {
       if (cmSizer) cmSizer.before(trailDiv);
     }
 
+
     trailDiv.empty();
     if (settings.indexNotes.includes(basename)) {
       trailDiv.innerText = "Index Note";
@@ -237,6 +313,7 @@ export async function drawTrail(plugin: BCPlugin): Promise<void> {
       );
     }
     db.end2G();
+    return trailDiv;
   } catch (err) {
     error(err);
     plugin.db.end2G();

src/Visualisations/Juggl.ts

@@ -225,14 +225,12 @@ export function createJugglTrail(
                     .split("\n")
                     .map((line) => {
                         const pair = line.split("- ");
-                        console.log({pair})
-                        return pair[1];
+                        return pair.slice(1).join("- ");
                     })
                     .filter((pair) => pair && pair !== "");
                 let nodesS = new Set(lines);
                 nodesS.add(source);
                 const nodes = Array.from(nodesS).map(s => s + ".md");
-                console.log({nodes});
 
                 jugglDown = createJuggl(plugin, target, nodes, args);
 

src/main.ts

@@ -33,7 +33,7 @@ import { getFields } from "./sharedFunctions";
 import DucksView from "./Views/DucksView";
 import MatrixView from "./Views/MatrixView";
 import StatsView from "./Views/StatsView";
-import { drawTrail } from "./Views/TrailView";
+import {buildCMPlugin, drawTrail, UPDATE_LP_VIEW, updateLPView} from "./Views/TrailView";
 import TreeView from "./Views/TreeView";
 import { VisModal } from "./VisModal";
 
@@ -240,7 +240,7 @@ export default class BCPlugin extends Plugin {
       callback: async () => {
         settings.showBCsInEditLPMode = !settings.showBCsInEditLPMode;
         await this.saveSettings();
-        await drawTrail(this);
+        updateLPView();
       },
     });
 
@@ -293,6 +293,9 @@ export default class BCPlugin extends Plugin {
       () => new VisModal(this.app, this).open()
     );
 
+    this.registerEditorExtension(buildCMPlugin(this));
+    console.log("Registered editor extension");
+
     this.registerMarkdownCodeBlockProcessor(
       "breadcrumbs",
       getCodeblockCB(this)