feat: enable markdown processing within Rant codeblocks

This allows for e.g. links, md styling, or markdown post processing from other plugins (e.g., dice-roller) to be displayed correctly.

Author: lanice

README.md

@@ -1,6 +1,5 @@
 # Obsidian Rant-Lang
 [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/lanice/obsidian-rant?style=for-the-badge&sort=semver)](https://github.com/lanice/obsidian-rant/releases/latest)
-![GitHub All Releases](https://img.shields.io/github/downloads/lanice/obsidian-rant/total?style=for-the-badge)
 
 Thin wrapper around the [Rant language](https://rant-lang.org/) Rust crate to be used in Obsidian.
 

src/main.ts

@@ -27,7 +27,7 @@ export default class RantLangPlugin extends Plugin {
     const buffer = Uint8Array.from(atob(rustPlugin), (c) => c.charCodeAt(0));
     await init(Promise.resolve(buffer));
 
-    // Settings initialization
+    // Initialize settings.
     this.settings = Object.assign(DEFAULT_SETTINGS, await this.loadData());
     this.addSettingTab(new SettingTab(this.app, this));
 
@@ -53,9 +53,11 @@ export default class RantLangPlugin extends Plugin {
           input,
           el,
           this.settings,
+          ctx.sourcePath,
           customizations
         );
         processor.rant(randomSeed());
+        ctx.addChild(processor);
 
         await this.registerRantProcessorForRerant(processor, file);
       }
@@ -77,9 +79,9 @@ export default class RantLangPlugin extends Plugin {
 
             const processor = new InlineRantProcessor(
               code,
-              el,
               codeblock,
-              this.settings
+              this.settings,
+              ctx.sourcePath
             );
             ctx.addChild(processor);
             processor.rant(randomSeed());

src/processor.ts

@@ -1,15 +1,16 @@
-import { MarkdownRenderChild } from "obsidian";
+import { MarkdownRenderChild, MarkdownRenderer } from "obsidian";
 import { rant } from "../pkg/obsidian_rantlang_plugin.js";
 import { RantLangSettings } from "./settings.js";
 
 export abstract class BaseRantProcessor extends MarkdownRenderChild {
   result: string = "";
-  target: HTMLElement;
 
   constructor(
     public input: string,
     public container: HTMLElement,
-    public settings: RantLangSettings
+    public settings: RantLangSettings,
+    public sourcePath: string,
+    public customizations: Customization[] = []
   ) {
     super(container);
   }
@@ -34,61 +35,42 @@ export abstract class BaseRantProcessor extends MarkdownRenderChild {
 export type Customization = "bold" | "italic";
 
 export class CodeblockRantProcessor extends BaseRantProcessor {
-  customizations: Customization[];
-
-  constructor(
-    input: string,
-    container: HTMLElement,
-    settings: RantLangSettings,
-    customizations: Customization[] = []
-  ) {
-    super(input, container, settings);
-    this.customizations = customizations;
-    this.target = container.createEl("p");
-  }
-
   renderResult() {
-    const cls = this.getStyles();
-    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);
-        frag.createEl("br");
-      });
-    });
-
-    this.target.replaceChildren(node);
+    this.container.empty();
+    const content = this.container.createDiv({ cls: this.getStyles() });
+    MarkdownRenderer.renderMarkdown(
+      this.result,
+      content,
+      this.sourcePath,
+      this
+    );
   }
 
   getStyles() {
-    let cls = this.settings.enableStyling ? ["rant", "rant-block"] : [];
+    let cls = ["rant-block"];
+    if (this.settings.highlight) {
+      cls.push("rant-highlight");
+    }
     this.customizations.forEach((style) => {
       cls.push(`rant-${style}`);
     });
     return cls;
   }
 }
 
-/** Processes inline Rant blocks. */
 export class InlineRantProcessor extends BaseRantProcessor {
-  constructor(
-    input: string,
-    container: HTMLElement,
-    target: HTMLElement,
-    settings: RantLangSettings
-  ) {
-    super(input, container, settings);
-    this.target = target;
-  }
-
   renderResult() {
-    const cls = this.settings.enableStyling ? ["rant", "rant-inline"] : "";
-    let temp = createEl("span", { cls });
+    let temp = createEl("span", { cls: this.getStyles() });
     temp.appendText(this.result);
-    this.target.replaceWith(temp);
-    this.target = temp;
+    this.container.replaceWith(temp);
+    this.container = temp;
+  }
+
+  getStyles() {
+    let cls = ["rant-inline"];
+    if (this.settings.highlight) {
+      cls.push("rant-highlight");
+    }
+    return cls;
   }
 }

src/settings.ts

@@ -2,11 +2,11 @@ import { App, PluginSettingTab, Setting } from "obsidian";
 import type RantLangPlugin from "./main";
 
 export interface RantLangSettings {
-  enableStyling: boolean;
+  highlight: boolean;
 }
 
 export const DEFAULT_SETTINGS: RantLangSettings = {
-  enableStyling: true,
+  highlight: false,
 };
 
 export default class SettingTab extends PluginSettingTab {
@@ -18,19 +18,20 @@ export default class SettingTab extends PluginSettingTab {
   }
   async display(): Promise<void> {
     this.containerEl.empty();
+    this.containerEl.addClass("rant-settings");
     this.containerEl.createEl("h2", { text: "Rang-Lang settings" });
 
     new Setting(this.containerEl)
-      .setName("Enable Rant block styling")
+      .setName("Highlight Rant blocks")
       .setDesc(
-        "Turning this off will remove all styling from both inline and code Rant blocks."
+        "Highlight Rant blocks (both inline and codeblocks) by adding a box around them."
       )
       .addToggle((toggle) =>
         toggle
-          .setValue(this.plugin.settings.enableStyling)
+          .setValue(this.plugin.settings.highlight)
           .onChange(
             async (value) =>
-              await this.plugin.updateSettings({ enableStyling: value })
+              await this.plugin.updateSettings({ highlight: value })
           )
       );
   }

styles.css

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