From 85c4e8fd32fdf61a2987c2b181661bbd7d203913 Mon Sep 17 00:00:00 2001
From: Arpit Jalan <arpit@techapj.com>
Date: Mon, 15 Feb 2021 21:47:30 +0530
Subject: [PATCH] FEATURE: support `mark` tag (#12088)

This commit adds support for `mark` tag for highlighting text content.
---
 .../javascripts/discourse/app/lib/to-markdown.js    | 13 ++++++++++++-
 .../discourse/tests/unit/lib/sanitizer-test.js      |  1 -
 .../discourse/tests/unit/lib/to-markdown-test.js    |  3 +++
 .../javascripts/pretty-text/addon/allow-lister.js   |  1 +
 app/assets/stylesheets/common/base/topic-post.scss  |  6 +++++-
 lib/html_to_markdown.rb                             |  2 +-
 spec/components/html_to_markdown_spec.rb            |  4 ++++
 7 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/to-markdown.js b/app/assets/javascripts/discourse/app/lib/to-markdown.js
index 88459e3d244..5f2b6cf98a0 100644
--- a/app/assets/javascripts/discourse/app/lib/to-markdown.js
+++ b/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) {
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/sanitizer-test.js b/app/assets/javascripts/discourse/tests/unit/lib/sanitizer-test.js
index aa0efbf80e3..27aac256de3 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/sanitizer-test.js
+++ b/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))",
diff --git a/app/assets/javascripts/discourse/tests/unit/lib/to-markdown-test.js b/app/assets/javascripts/discourse/tests/unit/lib/to-markdown-test.js
index 9a74adf00c3..ac593a20c9b 100644
--- a/app/assets/javascripts/discourse/tests/unit/lib/to-markdown-test.js
+++ b/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);
diff --git a/app/assets/javascripts/pretty-text/addon/allow-lister.js b/app/assets/javascripts/pretty-text/addon/allow-lister.js
index fbd35ea0f38..ab4fee7e798 100644
--- a/app/assets/javascripts/pretty-text/addon/allow-lister.js
+++ b/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",
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 81d21b78a03..6c67901ebb9 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/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;
diff --git a/lib/html_to_markdown.rb b/lib/html_to_markdown.rb
index d2fb51f34c8..7e3fb315280 100644
--- a/lib/html_to_markdown.rb
+++ b/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}>"
diff --git a/spec/components/html_to_markdown_spec.rb b/spec/components/html_to_markdown_spec.rb
index 0fde6eaa12b..d4c71bb0fdd 100644
--- a/spec/components/html_to_markdown_spec.rb
+++ b/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