From b8aa9b2c9cac08955ebed3c9b804e38c05ac63f3 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Thu, 23 Sep 2021 20:31:59 +0200
Subject: [PATCH] eliminate obsolete workarounds from markdown toolbar, update
 escape regex

---
 assets/js/markdowntoolbar.js                  | 38 ++++---------------
 .../templates/markdown/_toolbar.html.slime    |  2 +-
 2 files changed, 9 insertions(+), 31 deletions(-)

diff --git a/assets/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js
index b1159b19..3992bdfa 100644
--- a/assets/js/markdowntoolbar.js
+++ b/assets/js/markdowntoolbar.js
@@ -49,7 +49,7 @@ const markdownSyntax = {
     action: insertLink,
     options: { image: true, shortcutKey: 'k' }
   },
-  noParse: {
+  escape: {
     action: escapeSelection,
     options: { escapeChar: '\\' }
   }
@@ -104,21 +104,12 @@ function getSelections(textarea, linesOnly = false) {
   };
 }
 
-function getSurroundingTwoLines(beforeText, afterText) {
-  // Selection typically includes the new line right before it
-  // therefore you need to include two lines before and after
-  return {
-    twoLinesBefore: beforeText.split('\n').slice(-2).join('\n'),
-    twoLinesAfter: afterText.split('\n').slice(0, 2).join('\n')
-  };
-}
-
 function transformSelection(textarea, transformer, eachLine) {
   const { selectedText, beforeSelection, afterSelection } = getSelections(textarea, eachLine),
         // For long comments, record scrollbar position to restore it later
         { scrollTop } = textarea;
 
-  const { newText, caretOffset } = transformer(selectedText, beforeSelection, afterSelection);
+  const { newText, caretOffset } = transformer(selectedText);
 
   textarea.value = beforeSelection + newText + afterSelection;
 
@@ -142,7 +133,7 @@ function insertLink(textarea, options) {
   }
 
   const prefix = options.image ? '![' : '[',
-        suffix = `](${escapeHyperlink(hyperlink)})`;
+        suffix = `](${hyperlink})`;
 
   wrapSelection(textarea, { prefix, suffix });
 }
@@ -161,15 +152,14 @@ function wrapSelection(textarea, options) {
 
     return {
       newText: prefix + newText + suffix,
-      caretOffset: emptyText ? prefix.length : -suffix.length
+      caretOffset: emptyText ? prefix.length : 0
     };
   });
 }
 
 function wrapLines(textarea, options) {
-  transformSelection(textarea, (selectedText, before, after) => {
+  transformSelection(textarea, (selectedText) => {
     const { text = selectedText, prefix = '', suffix = '' } = options,
-          { twoLinesBefore, twoLinesAfter } = getSurroundingTwoLines(before, after),
           emptyText = text === '';
     let newText = prefix;
 
@@ -180,11 +170,7 @@ function wrapLines(textarea, options) {
       newText += suffix;
     }
 
-    // Add blank lines before/after if surrounding line are not empty
-    if (isNotBlank(twoLinesBefore)) newText = `\n${newText}`;
-    if (isNotBlank(twoLinesAfter)) newText += '\n';
-
-    return { newText, caretOffset: newText.length - suffix.length };
+    return { newText, caretOffset: newText.length };
   });
 }
 
@@ -195,7 +181,7 @@ function escapeSelection(textarea, options) {
 
     if (emptyText) return;
 
-    const newText = text.replace(/([[\]()*_`\\~<>^])/g, '\\$1').replace(/\|\|/g, '\\|\\|');
+    const newText = text.replace(/([*_[\]()^`%\\~<>#|])/g, '\\$1');
 
     return {
       newText,
@@ -204,21 +190,13 @@ function escapeSelection(textarea, options) {
   });
 }
 
-function escapeHyperlink(url) {
-  return typeof url === 'string' ? url.replace(/([()])/g, '\\$1') : url;
-}
-
-function isNotBlank(string) {
-  return /\S/.test(string);
-}
-
 function clickHandler(event) {
   const button = event.target.closest('.communication__toolbar__button');
   if (!button) return;
   const toolbar = button.closest('.communication__toolbar'),
         // There may be multiple toolbars present on the page,
         // in the case of image pages with description edit active
-        // we target the textarea that shares the same parent as the toolabr
+        // we target the textarea that shares the same parent as the toolbar
         textarea = $('.js-toolbar-input', toolbar.parentNode),
         id = button.dataset.syntaxId;
 
diff --git a/lib/philomena_web/templates/markdown/_toolbar.html.slime b/lib/philomena_web/templates/markdown/_toolbar.html.slime
index 1b8b7a5f..5d7ef785 100644
--- a/lib/philomena_web/templates/markdown/_toolbar.html.slime
+++ b/lib/philomena_web/templates/markdown/_toolbar.html.slime
@@ -29,6 +29,6 @@
     i.fa.fa-link
   button.communication__toolbar__button tabindex="-1" type="button" title="insert image (ctrl+k)" data-syntax-id="image"
     i.fa.fa-image
-  button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="noParse"
+  button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="escape"
     span
       | escape