FEATURE: support `mark` tag (#12088)

This commit adds support for `mark` tag for highlighting text content.

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

@@ -113,7 +113,18 @@ export class Tag {
   }
 
   static allowedTags() {
-    return ["ins", "del", "small", "big", "kbd", "ruby", "rt", "rb", "rp"];
+    return [
+      "ins",
+      "del",
+      "small",
+      "big",
+      "kbd",
+      "ruby",
+      "rt",
+      "rb",
+      "rp",
+      "mark",
+    ];
   }
 
   static block(name, prefix, suffix) {

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

@@ -71,7 +71,6 @@ module("Unit | Utility | sanitizer", function () {
     assert.equal(pt.sanitize("<button>press me!</button>"), "press me!");
     assert.equal(pt.sanitize("<canvas>draw me!</canvas>"), "draw me!");
     assert.equal(pt.sanitize("<progress>hello"), "hello");
-    assert.equal(pt.sanitize("<mark>highlight</mark>"), "highlight");
 
     cooked(
       "[the answer](javascript:alert(42))",

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

@@ -226,6 +226,9 @@ module("Unit | Utility | to-markdown", function () {
     html = `Have you tried clicking the <kbd>Help Me!</kbd> button?`;
     assert.equal(toMarkdown(html), html);
 
+    html = `<mark>This is highlighted!</mark>`;
+    assert.equal(toMarkdown(html), html);
+
     html = `Lorem <a href="http://example.com"><del>ipsum \n\n\n dolor</del> sit.</a>`;
     output = `Lorem [<del>ipsum dolor</del> sit.](http://example.com)`;
     assert.equal(toMarkdown(html), output);

app/assets/javascripts/pretty-text/addon/allow-lister.js

@@ -194,6 +194,7 @@ export const DEFAULT_LIST = [
   "ins",
   "kbd",
   "li",
+  "mark",
   "ol",
   "ol[start]",
   "p",

app/assets/stylesheets/common/base/topic-post.scss

@@ -125,7 +125,8 @@ $quote-share-maxwidth: 150px;
   }
 
   del,
-  ins {
+  ins,
+  mark {
     text-decoration: none;
   }
 
@@ -135,6 +136,9 @@ $quote-share-maxwidth: 150px;
   del {
     background-color: var(--danger-low);
   }
+  mark {
+    background-color: var(--highlight);
+  }
   // Prevents users from breaking posts with tag nesting
   big {
     font-size: 1.5rem;

lib/html_to_markdown.rb

@@ -180,7 +180,7 @@ class HtmlToMarkdown
     end
   end
 
-  ALLOWED ||= %w{kbd del ins small big sub sup dl dd dt}
+  ALLOWED ||= %w{kbd del ins small big sub sup dl dd dt mark}
   ALLOWED.each do |tag|
     define_method("visit_#{tag}") do |node|
       "<#{tag}>#{traverse(node)}</#{tag}>"

spec/components/html_to_markdown_spec.rb

@@ -205,6 +205,10 @@ describe HtmlToMarkdown do
     expect(html_to_markdown("H<sub>2</sub>O")).to eq("H<sub>2</sub>O")
   end
 
+  it "supports <mark>" do
+    expect(html_to_markdown("<mark>This is highlighted!</mark>")).to eq("<mark>This is highlighted!</mark>")
+  end
+
   it "supports <sup>" do
     expect(html_to_markdown("<sup>Super Script!</sup>")).to eq("<sup>Super Script!</sup>")
   end