feat: add bold/italic styling options to rant codeblocks

Author: lanice

README.md

@@ -1,4 +1,6 @@
 # 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/deathau/cooklang-obsidian/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

@@ -13,17 +13,10 @@ import {
   CodeblockRantProcessor,
   InlineRantProcessor,
   BaseRantProcessor,
+  Customization,
 } from "./processor";
 import { randomSeed } from "./utils";
-import SettingTab from "./settings";
-
-interface RantLangSettings {
-  enableStyling: boolean;
-}
-
-const DEFAULT_SETTINGS: RantLangSettings = {
-  enableStyling: true,
-};
+import SettingTab, { DEFAULT_SETTINGS, RantLangSettings } from "./settings";
 
 export default class RantLangPlugin extends Plugin {
   settings: RantLangSettings;
@@ -49,9 +42,20 @@ export default class RantLangPlugin extends Plugin {
         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(), enableStyling);
+        let customizations: Customization[] = [];
+        let lines = source.split("\n");
+        while (lines.length > 0 && ["bold", "italic"].contains(lines[0])) {
+          customizations.push(lines.shift() as Customization);
+        }
+        const input = lines.join("\n");
+
+        const processor = new CodeblockRantProcessor(
+          input,
+          el,
+          this.settings,
+          customizations
+        );
+        processor.rant(randomSeed());
 
         await this.registerRantProcessorForRerant(processor, file);
       }
@@ -71,10 +75,14 @@ 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);
+            const processor = new InlineRantProcessor(
+              code,
+              el,
+              codeblock,
+              this.settings
+            );
             ctx.addChild(processor);
-            processor.rant(randomSeed(), enableStyling);
+            processor.rant(randomSeed());
 
             await this.registerRantProcessorForRerant(processor, file);
           }
@@ -94,11 +102,10 @@ 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(), enableStyling);
+              processor.rant(randomSeed());
             });
 
             new Notice("Re-processed Rant blocks");

src/processor.ts

@@ -1,12 +1,16 @@
 import { MarkdownRenderChild } 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;
-  enableStyling: boolean = false;
 
-  constructor(public input: string, public container: HTMLElement) {
+  constructor(
+    public input: string,
+    public container: HTMLElement,
+    public settings: RantLangSettings
+  ) {
     super(container);
   }
 
@@ -21,22 +25,30 @@ export abstract class BaseRantProcessor extends MarkdownRenderChild {
     }
   }
 
-  rant(seed: number, enableStyling: boolean) {
-    this.enableStyling = enableStyling;
+  rant(seed: number) {
     this.processInput(seed);
     this.renderResult();
   }
 }
 
+export type Customization = "bold" | "italic";
+
 export class CodeblockRantProcessor extends BaseRantProcessor {
-  constructor(input: string, container: HTMLElement) {
-    super(input, container);
-    const cls = this.enableStyling ? ["rant", "rant-block"] : "";
-    this.target = container.createEl("p", { cls });
+  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.enableStyling ? ["rant", "rant-block"] : "";
+    const cls = this.getStyles();
     const newChild = createEl("p", { cls });
     this.container.replaceChild(newChild, this.target);
     this.target = newChild;
@@ -50,17 +62,30 @@ export class CodeblockRantProcessor extends BaseRantProcessor {
 
     this.target.replaceChildren(node);
   }
+
+  getStyles() {
+    let cls = this.settings.enableStyling ? ["rant", "rant-block"] : [];
+    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) {
-    super(input, container);
+  constructor(
+    input: string,
+    container: HTMLElement,
+    target: HTMLElement,
+    settings: RantLangSettings
+  ) {
+    super(input, container, settings);
     this.target = target;
   }
 
   renderResult() {
-    const cls = this.enableStyling ? ["rant", "rant-inline"] : "";
+    const cls = this.settings.enableStyling ? ["rant", "rant-inline"] : "";
     let temp = createEl("span", { cls });
     temp.appendText(this.result);
     this.target.replaceWith(temp);

src/settings.ts

@@ -1,6 +1,14 @@
 import { App, PluginSettingTab, Setting } from "obsidian";
 import type RantLangPlugin from "./main";
 
+export interface RantLangSettings {
+  enableStyling: boolean;
+}
+
+export const DEFAULT_SETTINGS: RantLangSettings = {
+  enableStyling: true,
+};
+
 export default class SettingTab extends PluginSettingTab {
   additionalContainer: HTMLDivElement;
 

styles.css

@@ -9,3 +9,11 @@
 .rant-inline {
     padding: 0px 4px;
 }
+
+.rant-bold {
+    font-weight: bold;
+}
+
+.rant-italic {
+    font-style: italic;
+}