♻️ ✨ Plugin settings instead of style settings

README.md

@@ -12,10 +12,12 @@ Basic CSS styling provided by the plugin renders characters for whitespace at th
 
 ## Look / Feel options
 
-1. Use the **Style settings plugin** to toggle additional CSS styles on and off
-2. **Use your own snippet**:
-    - Set `--show-whitespace-color` to change the color of the filler characters
-    - Copy style.css (from the release) and fully customize how things are rendered
+The plugin provides a few options to customize the look and feel of whitespace characters.
+
+You can also completely disable the plugin's CSS and use your own.
+1. Use the plugin setting to disable registration of style.css (this functions as a style settings plugin would)
+2. Copy the plugin `style.css` into your own CSS snippet
+3. Update styles as desired.
 
 ## Installation
 

src/@types/settings.d.ts

@@ -0,0 +1,14 @@
+export type SWVersion = {
+    major: number;
+    minor: number;
+    patch: number;
+};
+
+export interface SWSettings {
+    version: SWVersion;
+    disablePluginStyles: boolean;
+    showBlockquoteMarkers: boolean;
+    showCodeblockWhitespace: boolean;
+    showAllWhitespace: boolean;
+    outlineListMarkers: boolean;
+}

src/styles.scss

@@ -1,45 +1,3 @@
-/*! @settings
-
-name: Show Whitespace (CM6)
-id: show-whitespace-cm6
-settings:
-  -
-    id: show-whitespace-color
-    title: Fill character color
-    description: "Set `--show-whitespace-color` in a snippet to change the color of fill characters"
-    type: info-text
-    markdown: true
-  -
-    id: nix-show-whitespace-styles
-    title: Suppress/Remove this plugin's style
-    description: Set this to true to suppress the plugin's style
-    type: class-toggle
-    default: false
-  -
-    id: highlight-blockquote-markers
-    title: Always show blockquote markers
-    description: Show the leading > for blockquotes in Live Preview
-    type: class-toggle
-    default: false
-  -
-    id: highlight-all-codeblock-whitespace
-    title: Highlight all whitespace characters in code blocks
-    description: Add a marker for all whitespace characters in code blocks
-    type: class-toggle
-    default: false
-  -
-    id: highlight-all-whitespace
-    title: Highlight all whitespace characters
-    description: Add a marker for all whitespace characters, even those between words
-    type: class-toggle
-    default: false
-  -
-    id: highlight-min-width-list-markers
-    title: Highlight list markers
-    description: Add a very faint underline to min-width list markers
-    type: class-toggle
-    default: false
-*/
 @mixin whitespace {
   white-space: pre;
   font-family: var(--font-monospace);
@@ -63,8 +21,14 @@ settings:
     content: '∙';
   }
 }
+.theme-dark {
+  --swcm6-outline-list-markers-color: rgba(var(--mono-rgb-100), 0.05);
+}
+.theme-light {
+  --swcm6-outline-list-markers-color: rgba(var(--mono-rgb-100), 0.03);
+}
 
-body:not(.nix-show-whitespace-styles) {
+body:not(.swcm6-nix-plugin-styles) {
   --show-whitespace-color: var(--color-base-40);
 
   .markdown-source-view.mod-cm6 {
@@ -121,15 +85,15 @@ body:not(.nix-show-whitespace-styles) {
   }
 }
 
-body:not(.nix-show-whitespace-styles).highlight-blockquote-markers {
+body:not(.swcm6-nix-plugin-styles).swcm6-show-blockquote-markers {
   .markdown-source-view.mod-cm6 {
     .HyperMD-quote .cm-transparent {
       color: var(--show-whitespace-color);
     }
   }
 }
 
-body:not(.nix-show-whitespace-styles):not(.highlight-all-whitespace).highlight-all-codeblock-whitespace {
+body:not(.swcm6-nix-plugin-styles):not(.swcm6-show-all-whitespace).swcm6-show-codeblock-whitespace {
   .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
     @include all-whitespace;
 
@@ -139,27 +103,27 @@ body:not(.nix-show-whitespace-styles):not(.highlight-all-whitespace).highlight-a
   }
 }
 
-body:not(.nix-show-whitespace-styles).highlight-all-whitespace {
+body:not(.swcm6-nix-plugin-styles).swcm6-show-all-whitespace {
   .markdown-source-view.mod-cm6 .cm-line {
     @include all-whitespace;
   }
 }
 
-body:not(.nix-show-whitespace-styles):not(.highlight-all-whitespace):not(.highlight-all-codeblock-whitespace) {
+body:not(.swcm6-nix-plugin-styles):not(.swcm6-show-all-whitespace):not(.swcm6-show-codeblock-whitespace) {
   .markdown-source-view.mod-cm6 .cm-line {
     .cm-highlightSpace:not(.cm-indent .cm-highlightSpace):not(.cm-trailingSpace .cm-highlightSpace):before {
       content: '';
     }
   }
 }
 
-body:not(.nix-show-whitespace-styles).highlight-min-width-list-markers {
+body:not(.swcm6-nix-plugin-styles).swcm6-outline-list-markers {
   .markdown-source-view.mod-cm6 {
     .cm-line {
       .cm-formatting-list-ul,
       .cm-formatting-list-ol,
       .task-list-label {
-        border-bottom: 1px dotted var(--show-whitespace-color);
+        background-color: var(--swcm6-outline-list-markers-color);
       }
     }
   }

src/whitespace-Plugin.ts

@@ -4,20 +4,115 @@ import {
     highlightWhitespace,
 } from "@codemirror/view";
 import { Extension } from "@codemirror/state";
+import { SWSettings, SWVersion } from "./@types/settings";
+import { ShowWhitespaceSettingsTab } from "./whitespace-SettingsTab";
+
+export const DEFAULT_SETTINGS: SWSettings = {
+    version: {
+        major: 0,
+        minor: 0,
+        patch: 0,
+    },
+    disablePluginStyles: false,
+    showBlockquoteMarkers: false,
+    showCodeblockWhitespace: false,
+    showAllWhitespace: false,
+    outlineListMarkers: false,
+};
 
 export class ShowWhitespacePlugin extends Plugin {
     /** CodeMirror 6 extensions. Tracked via array to allow for dynamic updates. */
     private cmExtension: Extension[] = [];
+    settings: SWSettings;
+    classList: string[] = [];
 
     async onload(): Promise<void> {
-        console.info("loading Show Whitespace (CM6) v" + this.manifest.version);
+        console.info(
+            "loading Show Whitespace (SW-CM6) v" + this.manifest.version,
+        );
+
+        await this.loadSettings();
+        this.addSettingTab(new ShowWhitespaceSettingsTab(this.app, this));
+
+        document.body.classList.add(this.manifest.id);
+        this.initClasses();
 
         this.cmExtension.push(highlightWhitespace());
         this.cmExtension.push(highlightTrailingWhitespace());
         this.registerEditorExtension(this.cmExtension);
     }
 
+    initClasses(): void {
+        this.classList = [];
+        if (this.settings.disablePluginStyles) {
+            this.classList.push("swcm6-nix-plugin-styles");
+        }
+        if (this.settings.showBlockquoteMarkers) {
+            this.classList.push("swcm6-show-blockquote-markers");
+        }
+        if (this.settings.showCodeblockWhitespace) {
+            this.classList.push("swcm6-show-codeblock-whitespace");
+        }
+        if (this.settings.showAllWhitespace) {
+            this.classList.push("swcm6-show-all-whitespace");
+        }
+        if (this.settings.outlineListMarkers) {
+            this.classList.push("swcm6-outline-list-markers");
+        }
+        document.body.classList.add(...this.classList);
+    }
+
+    removeClasses(): void {
+        document.body.classList.remove(...this.classList);
+    }
+
     onunload(): void {
-        console.log("unloading Show Whitespace (CM6)");
+        console.log("unloading Show Whitespace (SW-CM6)");
+        document.body.classList.add(this.manifest.id);
+        this.removeClasses();
+    }
+
+    async loadSettings(): Promise<void> {
+        if (!this.settings) {
+            const options = await this.loadData();
+            this.settings = Object.assign({}, DEFAULT_SETTINGS, options);
+
+            // check settings version, adapt if necessary
+            const version = toVersion(this.manifest.version);
+            if (compareVersion(version, this.settings.version) != 0) {
+                this.settings.version = version;
+                await this.saveSettings();
+            }
+        }
+    }
+
+    async updateSettings(newSettings: SWSettings): Promise<void> {
+        this.settings = Object.assign({}, this.settings, newSettings);
+        await this.saveSettings();
+    }
+
+    async saveSettings(): Promise<void> {
+        console.debug("(SW-CM6): saving settings");
+        await this.saveData(this.settings);
+        this.removeClasses();
+        this.initClasses();
     }
 }
+
+function compareVersion(v1: SWVersion, v2: SWVersion): number {
+    if (v1.major === v2.major) {
+        if (v1.minor === v2.minor) {
+            return v1.patch - v2.patch;
+        }
+        return v1.minor - v2.minor;
+    }
+    return v1.major - v2.major;
+}
+function toVersion(version: string): SWVersion {
+    const v = version.split(".");
+    return {
+        major: Number(v[0]),
+        minor: Number(v[1]),
+        patch: Number(v[2]),
+    };
+}