From 074453ddf172c2af7ca4c8f750689bb9c43aa8c4 Mon Sep 17 00:00:00 2001
From: "byte[]" <byteslice@airmail.cc>
Date: Mon, 14 Sep 2020 22:00:44 -0400
Subject: [PATCH] allow removing existing tag with -tag, ctrl+enter for form
 submission, disable autocomplete on tag editor

---
 assets/js/tagsinput.js                        | 21 ++++++++++++++++++-
 assets/js/utils/dom.js                        |  7 ++++++-
 .../templates/tag/_tag_editor.html.slime      |  3 ++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/assets/js/tagsinput.js b/assets/js/tagsinput.js
index 019433ae..e6fe4cfe 100644
--- a/assets/js/tagsinput.js
+++ b/assets/js/tagsinput.js
@@ -2,7 +2,7 @@
  * Fancy tag editor.
  */
 
-import { $, $$, clearEl, removeEl, showEl, hideEl, escapeHtml } from './utils/dom';
+import { $, $$, clearEl, removeEl, showEl, hideEl, escapeCss, escapeHtml } from './utils/dom';
 
 function setupTagsInput(tagBlock) {
   const [ textarea, container ] = $$('.js-taginput', tagBlock);
@@ -29,6 +29,9 @@ function setupTagsInput(tagBlock) {
   // Respond to autocomplete form clicks
   inputField.addEventListener('autocomplete', handleAutocomplete);
 
+  // Respond to Ctrl+Enter shortcut
+  tagBlock.addEventListener('keydown', handleCtrlEnter);
+
   // TODO: Cleanup this bug fix
   // Switch to fancy tagging if user settings want it
   if (fancyEditorRequested(tagBlock)) {
@@ -85,11 +88,27 @@ function setupTagsInput(tagBlock) {
 
   }
 
+  function handleCtrlEnter(event) {
+    const { keyCode, ctrlKey } = event;
+    if (keyCode !== 13 || !ctrlKey) return;
+
+    $('[type="submit"]', tagBlock.closest('form')).click();
+  }
+
   function insertTag(name) {
     name = name.trim(); // eslint-disable-line no-param-reassign
 
     // Add if not degenerate or already present
     if (name.length === 0 || tags.indexOf(name) !== -1) return;
+
+    // Remove instead if the tag name starts with a minus
+    if (name[0] === "-") {
+      name = name.slice(1); // eslint-disable-line no-param-reassign
+      tagLink = $(`[data-tag-name="${escapeCss(name)}"]`, container);
+
+      return removeTag(name, tagLink.parentNode);
+    }
+
     tags.push(name);
     textarea.value = tags.join(', ');
 
diff --git a/assets/js/utils/dom.js b/assets/js/utils/dom.js
index df128d23..97466694 100644
--- a/assets/js/utils/dom.js
+++ b/assets/js/utils/dom.js
@@ -62,8 +62,13 @@ function escapeHtml(html) {
     .replace(/"/g, '&quot;');
 }
 
+function escapeCss(css) {
+  return css.replace(/\\/g, '\\\\')
+    .replace(/"/g, '\\"');
+}
+
 function findFirstTextNode(of) {
   return Array.prototype.filter.call(of.childNodes, el => el.nodeType === Node.TEXT_NODE)[0];
 }
 
-export { $, $$, showEl, hideEl, toggleEl, clearEl, removeEl, makeEl, insertBefore, onLeftClick, whenReady, escapeHtml, findFirstTextNode };
+export { $, $$, showEl, hideEl, toggleEl, clearEl, removeEl, makeEl, insertBefore, onLeftClick, whenReady, escapeHtml, escapeCss, findFirstTextNode };
diff --git a/lib/philomena_web/templates/tag/_tag_editor.html.slime b/lib/philomena_web/templates/tag/_tag_editor.html.slime
index 7c34c66b..2a6a1b4c 100644
--- a/lib/philomena_web/templates/tag/_tag_editor.html.slime
+++ b/lib/philomena_web/templates/tag/_tag_editor.html.slime
@@ -1,7 +1,8 @@
 elixir:
   textarea_options = [
     class: "input input--wide tagsinput js-image-input js-taginput js-taginput-plain js-taginput-#{@name}",
-    placeholder: "Add tags separated with commas"
+    placeholder: "Add tags separated with commas",
+    autocomplete: "off"
   ]
   html_options = Keyword.merge(textarea_options, assigns[:extra] || [])