add permanent trailing space overlay for testing

src/index.ts

@@ -1,14 +1,40 @@
 import joplin from "api";
-import { ContentScriptType } from "api/types";
+import { ContentScriptType, SettingItemType } from "api/types";
 
 const contentScriptId = "whitespacer";
 
 joplin.plugins.register({
   onStart: async function () {
+    await joplin.settings.registerSettings({
+      whiteSpaceMode: {
+        value: "allWhitespaces",
+        isEnum: true,
+        type: SettingItemType.String,
+        section: "whitespacerSection",
+        label: "Show Whitespaces",
+        public: true,
+        options: {
+          allWhitespaces: "All Whitespaces",
+          trailingWhitespaces: "Trailing Whitespaces Only",
+        },
+      },
+    });
+
     await joplin.contentScripts.register(
       ContentScriptType.CodeMirrorPlugin,
       contentScriptId,
       "./whitespacer.js"
     );
+
+    await joplin.contentScripts.onMessage(
+      contentScriptId,
+      async (message: { function: string; name: string }) => {
+        if (message.function === "getSetting") {
+          return await joplin.settings.value(message.name);
+        } else {
+          console.info("Invalid function", message.function);
+        }
+      }
+    );
   },
 });

src/whitespacer.css

@@ -1,13 +1,12 @@
-.CodeMirror .cm-tab::before {
+.CodeMirror .cm-ws-whitespace-tab > .cm-tab::before,
+.CodeMirror .cm-ws-trailingspace-tab > .cm-tab::before {
   content: "→";
   opacity: 0.3;
 }
-.CodeMirror-line > span::after {
-  content: "¬";
-  opacity: 0.3;
-}
-.CodeMirror .cm-whitespace-a::before,
-.CodeMirror .cm-whitespace-b::before {
+.CodeMirror .cm-ws-whitespace-a::before,
+.CodeMirror .cm-ws-whitespace-b::before,
+.CodeMirror .cm-ws-trailingspace-a::before,
+.CodeMirror .cm-ws-trailingspace-b::before {
   content: "·";
   position: absolute;
   opacity: 0.3;

src/whitespacer.ts

@@ -1,30 +1,75 @@
+const overlays = [
+  {
+    name: "allWhitespaces",
+    token: function (stream) {
+      const nextCharacter = stream.next();
+      if (nextCharacter === " ") {
+        this.togglingLabel = !this.togglingLabel;
+        return `ws-whitespace-${this.togglingLabel ? "a" : "b"}`;
+      } else if (nextCharacter === "	") {
+        // TODO: why doesn't "\t" work?
+        return "ws-whitespace-tab";
+      }
+    },
+    // We need two separate classes for consecutive space characters.
+    // Else all spaces after the first one are ignored (not sure why).
+    togglingLabel: false,
+  },
+  {
+    name: "trailingWhitespaces",
+    token: function (stream) {
+      const stringLengthWithoutTrailingWhitespaces =
+        stream.string.trimEnd().length;
+
+      if (stringLengthWithoutTrailingWhitespaces > stream.pos) {
+        // advance to last char that isn't whitespace
+        stream.pos = stringLengthWithoutTrailingWhitespaces;
+        return null;
+      }
+      // rest of the stream are trailing spaces
+      const nextCharacter = stream.next();
+      if (nextCharacter === " ") {
+        this.togglingLabel = !this.togglingLabel;
+        return `ws-trailingspace-${this.togglingLabel ? "a" : "b"}`;
+      } else if (nextCharacter === "	") {
+        return "ws-trailingspace-tab";
+      }
+    },
+    togglingLabel: false,
+  },
+];
+
 module.exports = {
-  default: function (_context) {
+  default: function (context) {
     return {
       plugin: function (CodeMirror) {
-        CodeMirror.defineOption("showWhitespaces", false, (cm, val, prev) => {
+        CodeMirror.defineOption("enableWhitespacer", false, (cm, val, prev) => {
           if (prev === CodeMirror.Init) prev = false;
-          if (prev && !val) cm.removeOverlay("whitespaces");
-
-          // We need two separate classes for consecutive space characters.
-          // Else all spaces after the first one are ignored (not sure why).
-          let togglingLabel = false;
+          if (prev && !val)
+            for (let overlay of overlays) cm.removeOverlay(overlay);
 
           if (!prev && val) {
-            cm.addOverlay({
-              name: "whitespaces",
-              token: function nextToken(stream) {
-                if (stream.next() === " ") {
-                  togglingLabel = !togglingLabel;
-                  return `whitespace-${togglingLabel ? "a" : "b"}`;
-                }
-              },
-            });
+            async function getSetting(timeout: number, name: string) {
+              const enabledOverlay = await context.postMessage({
+                function: "getSetting",
+                name: "whiteSpaceMode",
+              });
+
+              if (enabledOverlay) {
+                for (let overlay of overlays)
+                  if (overlay.name === enabledOverlay) cm.addOverlay(overlay);
+              } else {
+                setTimeout(getSetting, timeout * 2, name);
+              }
+            }
+
+            // Wait until the settings are available.
+            setTimeout(getSetting, 100, "whiteSpaceMode");
           }
         });
       },
       codeMirrorResources: [],
-      codeMirrorOptions: { showWhitespaces: true },
+      codeMirrorOptions: { enableWhitespacer: true },
       assets: function () {
         return [{ name: "whitespacer.css" }];
       },