DEV: Add to-markdown decorator functions (#16943)

To be used in discourse-spoiler-alert

app/assets/javascripts/discourse/app/lib/plugin-api.js

@@ -100,7 +100,7 @@ import { addSectionLink } from "discourse/lib/sidebar/custom-topics-section-link
 // based on Semantic Versioning 2.0.0. Please update the changelog at
 // docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md whenever you change the version
 // using the format described at https://keepachangelog.com/en/1.0.0/.
-const PLUGIN_API_VERSION = "1.2.0";
+const PLUGIN_API_VERSION = "1.3.0";
 
 // This helper prevents us from applying the same `modifyClass` over and over in test mode.
 function canModify(klass, type, resolverName, changes) {

app/assets/javascripts/discourse/app/lib/to-markdown.js

@@ -11,6 +11,50 @@ const hasChild = (e, n) => {
   return (e.children || []).some((c) => c.name === n);
 };
 
+let tagDecorateCallbacks = [];
+let blockDecorateCallbacks = [];
+
+/**
+ * Allows to add support for custom inline markdown/bbcode
+ *
+ * ```
+ * addTagDecorateCallback(function (text) {
+ *   if (this.element.attributes.class === "loud") {
+ *     this.prefix = "^^";
+ *     this.suffix = "^^";
+ *     return text.toLowerCase();
+ *   }
+ * });
+ * ```
+ */
+export function addTagDecorateCallback(callback) {
+  tagDecorateCallbacks.push(callback);
+}
+
+export function clearTagDecorateCallbacks() {
+  tagDecorateCallbacks = [];
+}
+
+/**
+ * Allows to add support for custom block markdown/bbcode
+ *
+ * ```
+ * addBlockDecorateCallback(function (text) {
+ *   if (this.element.attributes.class === "spoiled") {
+ *     this.prefix = "[spoiler]";
+ *     this.suffix = "[/spoiler]";
+ *   }
+ * });
+ * ```
+ */
+export function addBlockDecorateCallback(callback) {
+  blockDecorateCallbacks.push(callback);
+}
+
+export function clearBlockDecorateCallbacks() {
+  blockDecorateCallbacks = [];
+}
+
 export class Tag {
   constructor(name, prefix = "", suffix = "", inline = false) {
     this.name = name;
@@ -20,6 +64,14 @@ export class Tag {
   }
 
   decorate(text) {
+    for (const callback of tagDecorateCallbacks) {
+      const result = callback.call(this, text);
+
+      if (typeof result !== "undefined") {
+        text = result;
+      }
+    }
+
     if (this.prefix || this.suffix) {
       text = [this.prefix, text, this.suffix].join("");
     }
@@ -137,6 +189,14 @@ export class Tag {
       decorate(text) {
         const parent = this.element.parent;
 
+        for (const callback of blockDecorateCallbacks) {
+          const result = callback.call(this, text);
+
+          if (typeof result !== "undefined") {
+            text = result;
+          }
+        }
+
         if (this.name === "p" && parent && parent.name === "li") {
           // fix for google docs
           this.gap = "";

app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js

@@ -64,6 +64,10 @@ import {
 } from "discourse/lib/user-presence";
 import PreloadStore from "discourse/lib/preload-store";
 import { resetDefaultSectionLinks as resetTopicsSectionLinks } from "discourse/lib/sidebar/custom-topics-section-links";
+import {
+  clearBlockDecorateCallbacks,
+  clearTagDecorateCallbacks,
+} from "discourse/lib/to-markdown";
 
 const LEGACY_ENV = !setupApplicationTest;
 
@@ -188,6 +192,8 @@ function testCleanup(container, app) {
   }
   restoreBaseUri();
   resetTopicsSectionLinks();
+  clearTagDecorateCallbacks();
+  clearBlockDecorateCallbacks();
 }
 
 export function discourseModule(name, options) {

app/assets/javascripts/discourse/tests/unit/lib/to-markdown-test.js

@@ -1,5 +1,8 @@
 import { module, test } from "qunit";
-import toMarkdown from "discourse/lib/to-markdown";
+import toMarkdown, {
+  addBlockDecorateCallback,
+  addTagDecorateCallback,
+} from "discourse/lib/to-markdown";
 
 module("Unit | Utility | to-markdown", function () {
   test("converts styles between normal words", function (assert) {
@@ -458,4 +461,31 @@ test2
       '<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4AJkFkb2JlAGTAAAAAAQMAFQQDBgoNAAABywAAAgsAAAJpAAACyf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8fHx8f/8IAEQgAEAAQAwERAAIRAQMRAf/EAJQAAQEBAAAAAAAAAAAAAAAAAAMFBwEAAwEAAAAAAAAAAAAAAAAAAAEDAhAAAQUBAQAAAAAAAAAAAAAAAgABAwQFESARAAIBAwIHAAAAAAAAAAAAAAERAgAhMRIDQWGRocEiIxIBAAAAAAAAAAAAAAAAAAAAIBMBAAMAAQQDAQAAAAAAAAAAAQARITHwQVGBYXGR4f/aAAwDAQACEQMRAAAB0UlMciEJn//aAAgBAQABBQK5bGtFn6pWi2K12wWTRkjb/9oACAECAAEFAvH/2gAIAQMAAQUCIuIJOqRndRiv/9oACAECAgY/Ah//2gAIAQMCBj8CH//aAAgBAQEGPwLWQzwHepfNbcUNfM4tUIbA9QL4AvnxTlAxacpWJReOlf/aAAgBAQMBPyHZDveuCyu4B4lz2lDKto2ca5uclPK0aoq32x8xgTSLeSgbyzT65n//2gAIAQIDAT8hlQjP/9oACAEDAwE/IaE9GcZFJ//aAAwDAQACEQMRAAAQ5F//2gAIAQEDAT8Q1oowKccI3KTdAWkPLw2ssIrwKYUzuJoUJsIHOCoG23ISlja+rU9QvCx//9oACAECAwE/EAuNIiKf/9oACAEDAwE/ECujJzHf7iwHOv5NhK+8efH50z//2Q==" />';
     assert.strictEqual(toMarkdown(html), "[image]");
   });
+
+  test("addTagDecorateCallback", function (assert) {
+    const html = `<span class="loud">HELLO THERE</span>`;
+
+    addTagDecorateCallback(function (text) {
+      if (this.element.attributes.class === "loud") {
+        this.prefix = "^^";
+        this.suffix = "^^";
+        return text.toLowerCase();
+      }
+    });
+
+    assert.strictEqual(toMarkdown(html), "^^hello there^^");
+  });
+
+  test("addBlockDecorateCallback", function (assert) {
+    const html = `<div class="quiet">hey<br>there</div>`;
+
+    addBlockDecorateCallback(function () {
+      if (this.element.attributes.class === "quiet") {
+        this.prefix = "[quiet]";
+        this.suffix = "[/quiet]";
+      }
+    });
+
+    assert.strictEqual(toMarkdown(html), "[quiet]hey\nthere[/quiet]");
+  });
 });

docs/CHANGELOG-JAVASCRIPT-PLUGIN-API.md

@@ -7,6 +7,12 @@ in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2022-05-29
+
+### Added
+
+- Adds `beforeToMarkdownTagDecorate` and `beforeToMarkdownBlockDecorate` that allow to modify to-markdown behavior.
+
 ## [1.2.0] - 2022-03-18
 
 ### Added