dynamic css provider for setting changes (#2270)

src/main.ts

@@ -29,11 +29,14 @@ import {
 import { DataviewInit } from "ui/markdown";
 import { inlinePlugin } from "./ui/lp-render";
 import { Extension } from "@codemirror/state";
+import { StyleProvider } from "util/style-provider";
 
 export default class DataviewPlugin extends Plugin {
     /** Plugin-wide default settings. */
     public settings: DataviewSettings;
 
+    private customStyles: StyleProvider;
+
     /** The index that stores all dataview data. */
     public index: FullIndex;
     /** External-facing plugin API. */
@@ -53,6 +56,11 @@ export default class DataviewPlugin extends Plugin {
             })
         );
 
+        this.customStyles = new StyleProvider(`${this.manifest.name}@${this.manifest.version}`);
+
+        // Set up settings listeners.
+        this.updateSettingListeners(this.settings);
+
         // Set up automatic (intelligent) view refreshing that debounces.
         this.updateRefreshSettings();
 
@@ -174,6 +182,7 @@ export default class DataviewPlugin extends Plugin {
     }
 
     public onunload() {
+        this.customStyles.detach();
         console.log(`Dataview: version ${this.manifest.version} unloaded.`);
     }
 
@@ -285,8 +294,25 @@ export default class DataviewPlugin extends Plugin {
         }
     }
 
+    private updateSettingListeners(settings: Partial<DataviewSettings>) {
+        for (const [key, value] of Object.entries(settings)) {
+            switch (key) {
+                case "dataviewJsKeyword":
+                    this.customStyles.setStyle(
+                        "codeblock scrolling during inline-edit",
+                        `div.block-language-${value} {
+                            overflow-x: auto;
+                        }`
+                    );
+                    // TODO: add support for syntax highlighting during inline editing
+                    break;
+            }
+        }
+    }
+
     /** Update plugin settings. */
     async updateSettings(settings: Partial<DataviewSettings>) {
+        this.updateSettingListeners(settings);
         Object.assign(this.settings, settings);
         this.updateRefreshSettings();
         await this.saveData(this.settings);

src/util/style-provider.ts

@@ -0,0 +1,53 @@
+export class StyleProvider {
+    private node: HTMLStyleElement;
+    private styles: Map<string, string>;
+    private waiting: boolean;
+    private css: string;
+
+    constructor(name: string) {
+        this.node = document.createElement("style");
+        this.node.setAttribute("type", "text/css");
+        this.node.setAttribute("data-style-provider", name);
+        this.styles = new Map();
+        this.waiting = false;
+        this.css = "";
+        this.attach();
+    }
+
+    attach() {
+        document.head.appendChild(this.node);
+    }
+
+    detach() {
+        this.node.parentNode?.removeChild(this.node);
+    }
+
+    setStyle(name: string, style: string) {
+        const old = this.styles.get(name);
+        if (old === style) return;
+        this.styles.set(name, style);
+        this.updateStyles();
+    }
+
+    removeStyle(name: string) {
+        this.styles.delete(name);
+        this.updateStyles();
+    }
+
+    private updateStyles() {
+        this.css = "";
+        for (const [name, style] of this.styles) {
+            this.css += `/* ${name}: */\n${style}\n\n`;
+        }
+        this.queueUpdate();
+    }
+
+    private queueUpdate = () => {
+        if (this.waiting) return;
+        this.waiting = true;
+        requestAnimationFrame(() => {
+            this.waiting = false;
+            this.node.textContent = this.css.trimEnd();
+        });
+    };
+}