feat: add setting to disable/enable rant block styling

Author: lanice

src/main.ts

@@ -15,32 +15,51 @@ import {
   BaseRantProcessor,
 } from "./processor";
 import { randomSeed } from "./utils";
+import SettingTab from "./settings";
+
+interface RantLangSettings {
+  enableStyling: boolean;
+}
+
+const DEFAULT_SETTINGS: RantLangSettings = {
+  enableStyling: true,
+};
 
 export default class RantLangPlugin extends Plugin {
+  settings: RantLangSettings;
   fileMap: Map<TFile, BaseRantProcessor[]> = new Map();
 
   async onload() {
     // Load WebAssembly Rust plugin to have access to the Rust Rant crate.
     const buffer = Uint8Array.from(atob(rustPlugin), (c) => c.charCodeAt(0));
     await init(Promise.resolve(buffer));
 
+    // Settings initialization
+    this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData());
+    this.addSettingTab(new SettingTab(this.app, this));
+
     // Register Rant codeblocks.
     this.registerMarkdownCodeBlockProcessor(
       "rant",
-      (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+      async (
+        source: string,
+        el: HTMLElement,
+        ctx: MarkdownPostProcessorContext
+      ) => {
         const file = this.app.vault.getAbstractFileByPath(ctx.sourcePath);
         if (!file || !(file instanceof TFile)) return;
 
+        const enableStyling = this.settings.enableStyling;
         const processor = new CodeblockRantProcessor(source, el);
-        processor.rant(randomSeed());
+        processor.rant(randomSeed(), enableStyling);
 
-        this.registerRantProcessorForRerant(processor, file);
+        await this.registerRantProcessorForRerant(processor, file);
       }
     );
 
     // Register inline Rant blocks.
     this.registerMarkdownPostProcessor(
-      (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
+      async (el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
         const file = this.app.vault.getAbstractFileByPath(ctx.sourcePath);
         if (!file || !(file instanceof TFile)) return;
 
@@ -52,11 +71,12 @@ export default class RantLangPlugin extends Plugin {
           if (text.startsWith(inlineRantQueryPrefix)) {
             const code = text.substring(inlineRantQueryPrefix.length).trim();
 
+            const enableStyling = this.settings.enableStyling;
             const processor = new InlineRantProcessor(code, el, codeblock);
             ctx.addChild(processor);
-            processor.rant(randomSeed());
+            processor.rant(randomSeed(), enableStyling);
 
-            this.registerRantProcessorForRerant(processor, file);
+            await this.registerRantProcessorForRerant(processor, file);
           }
         }
       }
@@ -74,10 +94,11 @@ export default class RantLangPlugin extends Plugin {
           this.fileMap.has(view.file)
         ) {
           if (!checking) {
+            const enableStyling = this.settings.enableStyling;
             const processors = this.fileMap.get(view.file);
 
             processors.forEach((processor) => {
-              processor.rant(randomSeed());
+              processor.rant(randomSeed(), enableStyling);
             });
 
             new Notice("Re-processed Rant blocks");
@@ -88,7 +109,15 @@ export default class RantLangPlugin extends Plugin {
     });
   }
 
-  registerRantProcessorForRerant(processor: BaseRantProcessor, file: TFile) {
+  async updateSettings(settings: Partial<RantLangSettings>) {
+    Object.assign(this.settings, settings);
+    await this.saveData(this.settings);
+  }
+
+  async registerRantProcessorForRerant(
+    processor: BaseRantProcessor,
+    file: TFile
+  ) {
     // File-based tracking of registered processors inspired by javalent's excellent dice roller plugin: https://github.com/valentine195/obsidian-dice-roller
 
     if (!this.fileMap.has(file)) {

src/processor.ts

@@ -4,6 +4,7 @@ import { rant } from "../pkg/obsidian_rantlang_plugin.js";
 export abstract class BaseRantProcessor extends MarkdownRenderChild {
   result: string = "";
   target: HTMLElement;
+  enableStyling: boolean = false;
 
   constructor(public input: string, public container: HTMLElement) {
     super(container);
@@ -20,7 +21,8 @@ export abstract class BaseRantProcessor extends MarkdownRenderChild {
     }
   }
 
-  rant(seed: number) {
+  rant(seed: number, enableStyling: boolean) {
+    this.enableStyling = enableStyling;
     this.processInput(seed);
     this.renderResult();
   }
@@ -29,10 +31,16 @@ export abstract class BaseRantProcessor extends MarkdownRenderChild {
 export class CodeblockRantProcessor extends BaseRantProcessor {
   constructor(input: string, container: HTMLElement) {
     super(input, container);
-    this.target = container.createEl("p", { cls: "rant" });
+    const cls = this.enableStyling ? ["rant", "rant-block"] : "";
+    this.target = container.createEl("p", { cls });
   }
 
   renderResult() {
+    const cls = this.enableStyling ? ["rant", "rant-block"] : "";
+    const newChild = createEl("p", { cls });
+    this.container.replaceChild(newChild, this.target);
+    this.target = newChild;
+
     const node = createFragment((frag) => {
       this.result.split("\n").forEach((text) => {
         frag.appendText(text);
@@ -52,7 +60,8 @@ export class InlineRantProcessor extends BaseRantProcessor {
   }
 
   renderResult() {
-    let temp = document.createElement("span");
+    const cls = this.enableStyling ? ["rant", "rant-inline"] : "";
+    let temp = createEl("span", { cls });
     temp.appendText(this.result);
     this.target.replaceWith(temp);
     this.target = temp;

src/settings.ts

@@ -0,0 +1,29 @@
+import { App, PluginSettingTab, Setting } from "obsidian";
+import type RantLangPlugin from "./main";
+
+export default class SettingTab extends PluginSettingTab {
+  additionalContainer: HTMLDivElement;
+
+  constructor(app: App, public plugin: RantLangPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+  async display(): Promise<void> {
+    this.containerEl.empty();
+    this.containerEl.createEl("h2", { text: "Rang-Lang settings" });
+
+    new Setting(this.containerEl)
+      .setName("Enable Rant block styling")
+      .setDesc(
+        "Turning this off will remove all styling from both inline and code Rant blocks."
+      )
+      .addToggle((toggle) =>
+        toggle
+          .setValue(this.plugin.settings.enableStyling)
+          .onChange(
+            async (value) =>
+              await this.plugin.updateSettings({ enableStyling: value })
+          )
+      );
+  }
+}

styles.css

@@ -0,0 +1,11 @@
+.rant {
+    border: 1px solid var(--background-modifier-border);
+}
+
+.rant-block {
+    padding: 4px 8px;
+}
+
+.rant-inline {
+    padding: 0px 4px;
+}