From 71fa95e4628487dfe8ef29da071ae96ff18b2668 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Mon, 13 Sep 2021 01:19:00 +0200
Subject: [PATCH 1/7] initial implementation of markdown-based text editor

---
 assets/css/common/_base.scss                  |   4 +-
 assets/css/common/_blocks.scss                |  47 ++++
 assets/css/common/_forms.scss                 |   4 +
 assets/css/views/_communications.scss         |   4 +-
 assets/js/markdowntoolbar.js                  | 257 ++++++++++++++++++
 assets/js/preview.js                          | 100 +++++--
 assets/js/textiletoolbar.js                   | 172 ------------
 assets/js/utils/events.js                     |  19 ++
 assets/js/utils/requests.js                   |   3 +-
 assets/js/when-ready.js                       |   2 +-
 .../comment/_comment_with_image.html.slime    |   2 +-
 .../conversation/message/_form.html.slime     |  23 +-
 .../templates/conversation/new.html.slime     |  21 +-
 .../templates/image/comment/_form.html.slime  |  25 +-
 .../templates/image/comment/edit.html.slime   |  27 +-
 .../image/comment/history/index.html.slime    |   2 +-
 .../image/description/_form.html.slime        |   4 +-
 .../templates/image/new.html.slime            |  22 +-
 .../markdown/_anon_checkbox.html.slime        |   5 +
 .../{textile => markdown}/_help.html.slime    |  24 +-
 .../templates/markdown/_input.html.slime      |  27 ++
 .../{textile => markdown}/_toolbar.html.slime |   2 +-
 .../templates/post/preview/create.html.slime  |   4 +-
 .../profile/description/edit.html.slime       |  21 +-
 .../profile/scratchpad/edit.html.slime        |  21 +-
 .../templates/report/new.html.slime           |  19 +-
 .../templates/topic/new.html.slime            |  41 +--
 .../templates/topic/post/_form.html.slime     |  25 +-
 .../templates/topic/post/edit.html.slime      |  22 +-
 .../topic/post/history/index.html.slime       |   2 +-
 .../templates/topic/show.html.slime           |   2 +-
 lib/philomena_web/views/image/comment_view.ex |   4 -
 lib/philomena_web/views/image_view.ex         |   4 -
 lib/philomena_web/views/markdown_view.ex      |   7 +
 lib/philomena_web/views/textile_view.ex       |   3 -
 lib/philomena_web/views/topic/post_view.ex    |   4 -
 lib/philomena_web/views/topic_view.ex         |   4 -
 37 files changed, 511 insertions(+), 468 deletions(-)
 create mode 100644 assets/js/markdowntoolbar.js
 delete mode 100644 assets/js/textiletoolbar.js
 create mode 100644 lib/philomena_web/templates/markdown/_anon_checkbox.html.slime
 rename lib/philomena_web/templates/{textile => markdown}/_help.html.slime (54%)
 create mode 100644 lib/philomena_web/templates/markdown/_input.html.slime
 rename lib/philomena_web/templates/{textile => markdown}/_toolbar.html.slime (99%)
 create mode 100644 lib/philomena_web/views/markdown_view.ex
 delete mode 100644 lib/philomena_web/views/textile_view.ex

diff --git a/assets/css/common/_base.scss b/assets/css/common/_base.scss
index 9870edc5..115c501c 100644
--- a/assets/css/common/_base.scss
+++ b/assets/css/common/_base.scss
@@ -215,7 +215,7 @@ hr {
   }
 }
 
-//textile
+// Text Editor
 blockquote {
   margin: 1em 2em;
   border: 1px dotted $foreground_color;
@@ -298,7 +298,7 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
   white-space: pre-wrap;
 }
 
-.textile-syntax-reference {
+.editor-syntax-reference {
   margin-bottom: 6px;
 }
 
diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss
index fe57f608..d00ccd92 100644
--- a/assets/css/common/_blocks.scss
+++ b/assets/css/common/_blocks.scss
@@ -222,3 +222,50 @@ a.block__header--single-item, .block__header a {
     display: none;
   }
 }
+
+.block__content--top-border {
+  border-top: $border;
+}
+
+.block__column__header {
+  font-size: 14px;
+  line-height: $block_header_sub_height;
+  margin-bottom: $header_field_spacing;
+  border-bottom: 1px solid;
+  font-weight: bold;
+}
+
+@media (min-width: $min_px_width_for_desktop_layout) {
+  .block--split {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+  }
+
+  .block__column--full, .block__column--half {
+    flex-grow: 0;
+    flex-shrink: 0;
+    box-sizing: border-box;
+  }
+
+  .block__column--full {
+    flex-basis: 100%;
+  }
+
+  .block__column--half {
+    flex-basis: 50%;
+    max-width: 50%;
+
+    &:first-child {
+      padding-right: $block-spacing;
+    }
+    &:last-child {
+      padding-left: $block-spacing;
+    }
+
+    .flex__grow {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+}
diff --git a/assets/css/common/_forms.scss b/assets/css/common/_forms.scss
index 2d17ac9e..2efb0b0e 100644
--- a/assets/css/common/_forms.scss
+++ b/assets/css/common/_forms.scss
@@ -74,6 +74,10 @@ form p {
   box-sizing: border-box;
 }
 
+.input--resize-vertical {
+  resize: vertical;
+}
+
 .checkbox {
   margin: 0.2em 0 0 0.4em;
   padding: 0;
diff --git a/assets/css/views/_communications.scss b/assets/css/views/_communications.scss
index 5809534f..7e410306 100644
--- a/assets/css/views/_communications.scss
+++ b/assets/css/views/_communications.scss
@@ -51,7 +51,7 @@ span.communication__sender__stats,
   margin-left: 6px;
 }
 
-.communication-edit__tab {
+.communication-edit__wrap {
   padding-bottom: 12px;
 }
 
@@ -89,7 +89,7 @@ span.communication__sender__stats,
   }
 }
 
-.hyphenate-breaks{
+.hyphenate-breaks {
   hyphens: auto;
 }
 
diff --git a/assets/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js
new file mode 100644
index 00000000..7511fd50
--- /dev/null
+++ b/assets/js/markdowntoolbar.js
@@ -0,0 +1,257 @@
+/**
+ * Markdown toolbar
+ */
+
+import { $, $$, showEl } from './utils/dom';
+
+const markdownSyntax = {
+  bold: {
+    action: wrapSelection,
+    options: { prefix: '**', shortcutKey: 'b' }
+  },
+  italics: {
+    action: wrapSelection,
+    options: { prefix: '*', shortcutKey: 'i' }
+  },
+  under: {
+    action: wrapSelection,
+    options: { prefix: '__', shortcutKey: 'u' }
+  },
+  spoiler: {
+    action: wrapSelection,
+    options: { prefix: '||', shortcutKey: 's' }
+  },
+  code: {
+    action: wrapSelection,
+    options: { prefix: '`', shortcutKey: 'e' }
+  },
+  strike: {
+    action: wrapSelection,
+    options: { prefix: '~~' }
+  },
+  superscript: {
+    action: wrapSelection,
+    options: { prefix: '^' }
+  },
+  subscript: {
+    action: wrapSelection,
+    options: { prefix: '%' }
+  },
+  quote: {
+    action: wrapLines,
+    options: { prefix: '> ' }
+  },
+  link: {
+    action: insertLink,
+    options: { shortcutKey: 'l' }
+  },
+  image: {
+    action: insertLink,
+    options: { image: true, shortcutKey: 'k' }
+  },
+  noParse: {
+    action: escapeSelection,
+    options: { escapeChar: '\\' }
+  },
+};
+
+function getSelections(textarea, linesOnly = false) {
+  let { selectionStart, selectionEnd } = textarea,
+      selection = textarea.value.substring(selectionStart, selectionEnd),
+      leadingSpace = '',
+      trailingSpace = '',
+      caret;
+
+  if (linesOnly) {
+    let startNewlineIndex = 0,
+        endNewlineIndex = textarea.value.length,
+        explorer = /\n/g;
+    while (explorer.exec(textarea.value)) {
+      const { lastIndex } = explorer;
+      if (lastIndex < selectionStart) {
+        startNewlineIndex = lastIndex + 1;
+      } else if (lastIndex > selectionEnd) {
+        endNewlineIndex = lastIndex;
+        break;
+      }
+    }
+
+    selectionStart = startNewlineIndex;
+    selectionEnd = endNewlineIndex;
+    selection = textarea.value.substring(selectionStart, selectionEnd);
+  } else {
+    // Deselect trailing space and line break
+    for (caret = selection.length - 1; caret > 0; caret--) {
+      if (selection[caret] !== ' ' && selection[caret] !== '\n') break;
+      trailingSpace = selection[caret] + trailingSpace;
+    }
+    selection = selection.substring(0, caret + 1);
+
+    // Deselect leading space and line break
+    for (caret = 0; caret < selection.length; caret++) {
+      if (selection[caret] !== ' ' && selection[caret] !== '\n') break;
+      leadingSpace += selection[caret];
+    }
+    selection = selection.substring(caret);
+  }
+
+  return {
+    selectedText: selection,
+    beforeSelection: textarea.value.substring(0, selectionStart) + leadingSpace,
+    afterSelection: trailingSpace + textarea.value.substring(selectionEnd),
+  };
+}
+
+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);
+
+  textarea.value = beforeSelection + newText + afterSelection;
+
+  const newSelectionStart = caretOffset >= 1
+    ? beforeSelection.length + caretOffset
+    : textarea.value.length - afterSelection.length - caretOffset;
+
+  textarea.selectionStart = newSelectionStart;
+  textarea.selectionEnd = newSelectionStart;
+  textarea.scrollTop = scrollTop;
+  textarea.dispatchEvent(new Event('keydown'));
+}
+
+function insertLink(textarea, options) {
+  let hyperlink = window.prompt(options.image ? 'Image link:' : 'Link:');
+  if (!hyperlink || hyperlink === '') return;
+
+  // Change on-site link to use relative url
+  if (!options.image && hyperlink.startsWith(window.location.origin)) {
+    hyperlink = hyperlink.substring(window.location.origin.length);
+  }
+
+  const prefix = options.image ? '![' : '[',
+        suffix = '](' + escapeHyperlink(hyperlink) + ')';
+
+  wrapSelection(textarea, { prefix, suffix });
+}
+
+function wrapSelection(textarea, options) {
+  transformSelection(textarea, selectedText => {
+    const { text = selectedText, prefix = '', suffix = options.prefix } = options,
+          emptyText = text === '';
+    let newText = text;
+
+    if (!emptyText) {
+      newText = text.replace(/(\n{2,})/g, match => {
+        return suffix + match + prefix;
+      });
+    }
+
+    return {
+      newText: prefix + newText + suffix,
+      caretOffset: emptyText ? prefix.length : -suffix.length,
+    };
+  })
+}
+
+function wrapLines(textarea, options) {
+  transformSelection(textarea, (selectedText, before, after) => {
+    const { text = selectedText, prefix = '', suffix = '' } = options,
+          { twoLinesBefore, twoLinesAfter } = getSurroundingTwoLines(before, after),
+          emptyText = text === '';
+    let newText = prefix;
+
+    if (!emptyText) {
+      newText = text.split(/\n/g).map(line => prefix + (line.trim()) + suffix).join('\n');
+    } else {
+      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 };
+  })
+}
+
+function escapeSelection(textarea, options) {
+  transformSelection(textarea, selectedText => {
+    const { text = selectedText } = options,
+          emptyText = text === '';
+
+    if (emptyText) return;
+
+    let newText = text.replace(/([\[\]()*_`\\~<>^])/g, '\\$1').replace(/\|\|/g, '\\|\\|');
+
+    return {
+      newText: newText,
+      caretOffset: newText.length,
+    };
+  })
+}
+
+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
+        textarea = $('.js-toolbar-input', toolbar.parentNode),
+        id       = button.dataset.syntaxId;
+
+  markdownSyntax[id].action(textarea, markdownSyntax[id].options);
+  textarea.focus();
+}
+
+function shortcutHandler(event) {
+  if (!event.ctrlKey || (window.navigator.platform === 'MacIntel' && !event.metaKey) || event.shiftKey || event.altKey) return;
+  const textarea = event.target,
+        key      = event.key.toLowerCase();
+
+  for (const id in markdownSyntax) {
+    if (key === markdownSyntax[id].options.shortcutKey) {
+      markdownSyntax[id].action(textarea, markdownSyntax[id].options);
+      event.preventDefault();
+    }
+  }
+}
+
+function setupToolbar() {
+  $$('.communication__toolbar').forEach(toolbar => {
+    toolbar.addEventListener('click', clickHandler);
+  });
+  $$('.js-toolbar-input').forEach(textarea => {
+    textarea.addEventListener('keydown', shortcutHandler);
+  });
+
+  // Transform non-JS basic editor to two-column layout with preview
+  $$('.js-preview-input-wrapper').forEach(wrapper => {
+    wrapper.classList.remove('block__column--full');
+    wrapper.classList.add('block__column--half');
+  });
+  $$('.js-preview-output-wrapper').forEach(wrapper => {
+    showEl(wrapper)
+  });
+}
+
+export { setupToolbar };
diff --git a/assets/js/preview.js b/assets/js/preview.js
index 068120ba..78035698 100644
--- a/assets/js/preview.js
+++ b/assets/js/preview.js
@@ -1,14 +1,16 @@
 /**
- * Textile previews (posts, comments, messages)
+ * Markdown previews (posts, comments, messages)
  */
 
 import { fetchJson } from './utils/requests';
 import { filterNode } from './imagesclientside';
+import { debounce } from './utils/events.js';
+import { hideEl, showEl } from './utils/dom.js';
 
 function handleError(response) {
   const errorMessage = '<div>Preview failed to load!</div>';
 
-  if (!response.ok) {
+  if (!response.ok){
     return errorMessage;
   }
 
@@ -22,7 +24,7 @@ function commentReply(user, url, textarea, quote) {
   if (newval && /\n$/.test(newval)) newval += '\n';
   newval += `${text}\n`;
 
-  if (quote) {
+  if (quote){
     newval += `[bq="${user.replace('"', '\'')}"] ${quote} [/bq]\n`;
   }
 
@@ -35,47 +37,99 @@ function commentReply(user, url, textarea, quote) {
   textarea.focus();
 }
 
-function getPreview(body, anonymous, previewTab, isImage = false) {
+/**
+ * Stores the abort controller for the current preview request
+ * @type {null|AbortController}
+ */
+let previewAbortController = null;
+
+function getPreview(body, anonymous, previewLoading, previewContent) {
   let path = '/posts/preview';
 
-  fetchJson('POST', path, { body, anonymous })
+  if (typeof body !== 'string') return;
+
+  const trimmedBody = body.trim();
+  if (trimmedBody.length < 1){
+    previewContent.innerHTML = '';
+    return;
+  }
+
+  showEl(previewLoading);
+
+  // Abort previous requests if it exists
+  if (previewAbortController) previewAbortController.abort();
+  previewAbortController = new AbortController();
+
+  fetchJson('POST', path, { body, anonymous }, previewAbortController.signal)
     .then(handleError)
     .then(data => {
-      previewTab.innerHTML = data;
-      filterNode(previewTab);
+      previewContent.innerHTML = data;
+      filterNode(previewContent);
+      showEl(previewContent);
+      hideEl(previewLoading);
+    })
+    .finally(() => {
+      previewAbortController = null;
     });
 }
 
+/**
+ * Resizes the event target <textarea> to match the size of its contained text, between set
+ * minimum and maximum height values. Former comes from CSS, latter is hard coded below.
+ * @template {{ target: HTMLTextAreaElement }} E
+ * @param {E} e
+ */
+function resizeTextarea(e) {
+  // Reset inline height for fresh calculations
+  e.target.style.height = '';
+  const { borderTopWidth, borderBottomWidth, height } = window.getComputedStyle(e.target);
+  // Add scrollHeight and borders (because border-box) to get the target size that avoids scrollbars
+  const contentHeight = e.target.scrollHeight + parseFloat(borderTopWidth) + parseFloat(borderBottomWidth);
+  // Get the original default height provided by page styles
+  const regularHeight = parseFloat(height);
+  // Limit textarea's size to between the original height and 1000px
+  const newHeight = Math.max(regularHeight, Math.min(1000, contentHeight));
+  e.target.style.height = `${newHeight}px`;
+}
+
 function setupPreviews() {
   let textarea = document.querySelector('.js-preview-input');
-  let imageDesc = false;
 
-  if (!textarea) {
+  if (!textarea){
     textarea = document.querySelector('.js-preview-description');
-    imageDesc = true;
   }
 
-  const previewButton = document.querySelector('a[data-click-tab="preview"]');
-  const previewTab = document.querySelector('.block__tab[data-tab="preview"]');
-  const previewAnon = document.querySelector('.preview-anonymous') || false;
+  const previewLoading = document.querySelector('.communication-preview__loading');
+  const previewContent = document.querySelector('.communication-preview__content');
+  const previewAnon = document.querySelector('.js-preview-anonymous') || false;
 
-  if (!textarea || !previewButton) {
+  if (!textarea || !previewContent){
     return;
   }
 
-  previewButton.addEventListener('click', () => {
-    if (previewTab.previewedText === textarea.value) return;
-    previewTab.previewedText = textarea.value;
+  const updatePreview = () => {
+    getPreview(textarea.value, previewAnon && previewAnon.checked, previewLoading, previewContent);
+  };
 
-    getPreview(textarea.value, Boolean(previewAnon.checked), previewTab, imageDesc);
+  const debouncedUpdater = debounce(500, () => {
+    if (previewContent.previewedText === textarea.value) return;
+    previewContent.previewedText = textarea.value;
+
+    updatePreview();
   });
 
-  previewAnon && previewAnon.addEventListener('click', () => {
-    getPreview(textarea.value, Boolean(previewAnon.checked), previewTab, imageDesc);
-  });
+  textarea.addEventListener('keydown', debouncedUpdater);
+  textarea.addEventListener('focus', debouncedUpdater);
+  textarea.addEventListener('change', resizeTextarea);
+  textarea.addEventListener('keyup', resizeTextarea);
+
+  // Fire handler if textarea contains text on page load (e.g. editing)
+  if (textarea.value) textarea.dispatchEvent(new Event('keydown'));
+
+  previewAnon && previewAnon.addEventListener('click', updatePreview);
 
   document.addEventListener('click', event => {
-    if (event.target && event.target.closest('.post-reply')) {
+    if (event.target && event.target.closest('.post-reply')){
       const link = event.target.closest('.post-reply');
       commentReply(link.dataset.author, link.getAttribute('href'), textarea, link.dataset.post);
       event.preventDefault();
@@ -83,4 +137,4 @@ function setupPreviews() {
   });
 }
 
-export { setupPreviews };
\ No newline at end of file
+export { setupPreviews };
diff --git a/assets/js/textiletoolbar.js b/assets/js/textiletoolbar.js
deleted file mode 100644
index 51edde85..00000000
--- a/assets/js/textiletoolbar.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Textile toolbar
- *
- */
-
-import { $, $$ } from './utils/dom';
-
-const textileSyntax = {
-  bold: {
-    action: wrapSelection,
-    options: { prefix: '*', suffix: '*', shortcutKey: 'b', type: 'inline' }
-  },
-  italics: {
-    action: wrapSelection,
-    options: { prefix: '_', suffix: '_', shortcutKey: 'i', type: 'inline' }
-  },
-  under: {
-    action: wrapSelection,
-    options: { prefix: '+', suffix: '+', shortcutKey: 'u', type: 'inline' }
-  },
-  spoiler: {
-    action: wrapSelection,
-    options: { prefix: '[spoiler]', suffix: '[/spoiler]', shortcutKey: 's' }
-  },
-  code: {
-    action: wrapSelection,
-    options: { prefix: '@', suffix: '@', shortcutKey: 'e', type: 'inline' }
-  },
-  strike: {
-    action: wrapSelection,
-    options: { prefix: '-', suffix: '-', type: 'inline' }
-  },
-  superscript: {
-    action: wrapSelection,
-    options: { prefix: '^', suffix: '^', type: 'inline' }
-  },
-  subscript: {
-    action: wrapSelection,
-    options: { prefix: '~', suffix: '~', type: 'inline' }
-  },
-  quote: {
-    action: wrapSelection,
-    options: { prefix: '[bq]', suffix: '[/bq]' }
-  },
-  link: {
-    action: insertLink,
-    options: { prefix: '"', suffix: '":', shortcutKey: 'l' }
-  },
-  image: {
-    action: insertImage,
-    options: { prefix: '!', suffix: '!', shortcutKey: 'k' }
-  },
-  noParse: {
-    action: wrapSelection,
-    options: { prefix: '[==', suffix: '==]' }
-  },
-};
-
-function getSelections(textarea) {
-  let selection = textarea.value.substring(textarea.selectionStart, textarea.selectionEnd),
-      leadingSpace = '',
-      trailingSpace = '',
-      caret;
-
-  // Deselect trailing space and line break
-  for (caret = selection.length - 1; caret > 0; caret--) {
-    if (selection[caret] !== ' ' && selection[caret] !== '\n') break;
-    trailingSpace = selection[caret] + trailingSpace;
-  }
-  selection = selection.substring(0, caret + 1);
-
-  // Deselect leading space and line break
-  for (caret = 0; caret < selection.length; caret++) {
-    if (selection[caret] !== ' ' && selection[caret] !== '\n') break;
-    leadingSpace += selection[caret];
-  }
-  selection = selection.substring(caret);
-
-  return {
-    selectedText: selection,
-    beforeSelection: textarea.value.substring(0, textarea.selectionStart) + leadingSpace,
-    afterSelection: trailingSpace + textarea.value.substring(textarea.selectionEnd),
-  };
-}
-
-function wrapSelection(textarea, options) {
-  const { selectedText, beforeSelection, afterSelection } = getSelections(textarea),
-        { text = selectedText, prefix = '', suffix = '', type } = options,
-        // For long comments, record scrollbar position to restore it later
-        scrollTop = textarea.scrollTop,
-        emptyText = text === '';
-
-  const newText = text;
-
-  if (type === 'inline' && newText.includes('\n')) {
-    textarea.value = `${beforeSelection}[${prefix}${newText}${suffix}]${afterSelection}`;
-  }
-  else {
-    textarea.value = `${beforeSelection}${prefix}${newText}${suffix}${afterSelection}`;
-  }
-
-  // If no text were highlighted, place the caret inside
-  // the formatted section, otherwise place it at the end
-  if (emptyText) {
-    textarea.selectionEnd = textarea.value.length - afterSelection.length - suffix.length;
-  }
-  else {
-    textarea.selectionEnd = textarea.value.length - afterSelection.length;
-  }
-  textarea.selectionStart = textarea.selectionEnd;
-  textarea.scrollTop = scrollTop;
-}
-
-function insertLink(textarea, options) {
-  let hyperlink = window.prompt('Link:');
-  if (!hyperlink || hyperlink === '') return;
-
-  // Change on-site link to use relative url
-  if (hyperlink.startsWith(window.location.origin)) hyperlink = hyperlink.substring(window.location.origin.length);
-
-  const prefix = options.prefix,
-        suffix = options.suffix + hyperlink;
-
-  wrapSelection(textarea, { prefix, suffix });
-}
-
-function insertImage(textarea, options) {
-  const hyperlink          = window.prompt('Image link:');
-  const { prefix, suffix } = options;
-
-  if (!hyperlink || hyperlink === '') return;
-
-  wrapSelection(textarea, { text: hyperlink, prefix, suffix });
-}
-
-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
-        textarea = $('.js-toolbar-input', toolbar.parentNode),
-        id       = button.dataset.syntaxId;
-
-  textileSyntax[id].action(textarea, textileSyntax[id].options);
-  textarea.focus();
-}
-
-function shortcutHandler(event) {
-  if (!event.ctrlKey || (window.navigator.platform === 'MacIntel' && !event.metaKey) || event.shiftKey || event.altKey) return;
-  const textarea = event.target,
-        key      = event.key.toLowerCase();
-
-  for (const id in textileSyntax) {
-    if (key === textileSyntax[id].options.shortcutKey) {
-      textileSyntax[id].action(textarea, textileSyntax[id].options);
-      event.preventDefault();
-    }
-  }
-}
-
-function setupToolbar() {
-  $$('.communication__toolbar').forEach(toolbar => {
-    toolbar.addEventListener('click', clickHandler);
-  });
-  $$('.js-toolbar-input').forEach(textarea => {
-    textarea.addEventListener('keydown', shortcutHandler);
-  });
-}
-
-export { setupToolbar };
diff --git a/assets/js/utils/events.js b/assets/js/utils/events.js
index 51c46a13..606702c3 100644
--- a/assets/js/utils/events.js
+++ b/assets/js/utils/events.js
@@ -22,3 +22,22 @@ export function delegate(node, event, selectors) {
     }
   });
 }
+
+/**
+ * Runs the provided `func` if it hasn't been called for at least `time` ms
+ * @template {(...any[]) => any} T
+ * @param {number} time
+ * @param {T} func
+ * @return {T}
+ */
+export function debounce(time, func) {
+  let timerId = null;
+
+  return function(...args) {
+    // Cancels the setTimeout method execution
+    timerId && clearTimeout(timerId);
+
+    // Executes the func after delay time.
+    timerId = setTimeout(() => func(...args), time);
+  };
+}
diff --git a/assets/js/utils/requests.js b/assets/js/utils/requests.js
index da0a1524..ec232903 100644
--- a/assets/js/utils/requests.js
+++ b/assets/js/utils/requests.js
@@ -2,7 +2,7 @@
  * Request Utils
  */
 
-function fetchJson(verb, endpoint, body) {
+function fetchJson(verb, endpoint, body, signal) {
   const data = {
     method: verb,
     credentials: 'same-origin',
@@ -11,6 +11,7 @@ function fetchJson(verb, endpoint, body) {
       'x-csrf-token': window.booru.csrfToken,
       'x-requested-with': 'xmlhttprequest'
     },
+    signal,
   };
 
   if (body) {
diff --git a/assets/js/when-ready.js b/assets/js/when-ready.js
index 4f52a875..eb37c92d 100644
--- a/assets/js/when-ready.js
+++ b/assets/js/when-ready.js
@@ -31,7 +31,7 @@ import { setupTagEvents }       from './tagsmisc';
 import { setupTimestamps }      from './timeago';
 import { setupImageUpload }     from './upload';
 import { setupSearch }          from './search';
-import { setupToolbar }         from './textiletoolbar';
+import { setupToolbar }         from './markdowntoolbar.js';
 import { hideStaffTools }       from './staffhider';
 import { pollOptionCreator }    from './poll';
 
diff --git a/lib/philomena_web/templates/comment/_comment_with_image.html.slime b/lib/philomena_web/templates/comment/_comment_with_image.html.slime
index f5576129..ed7da1fe 100644
--- a/lib/philomena_web/templates/comment/_comment_with_image.html.slime
+++ b/lib/philomena_web/templates/comment/_comment_with_image.html.slime
@@ -3,7 +3,7 @@ article.block.communication id="comment_#{@comment.id}"
     .flex__fixed.spacing-right
       .post-image-container
         = render PhilomenaWeb.ImageView, "_image_container.html", image: @comment.image, size: :thumb_tiny, conn: @conn
-        
+
     .flex__grow.communication__body
       span.communication__body__sender-name = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @comment, awards: true, conn: @conn
       br
diff --git a/lib/philomena_web/templates/conversation/message/_form.html.slime b/lib/philomena_web/templates/conversation/message/_form.html.slime
index 979070d7..7234a3e7 100644
--- a/lib/philomena_web/templates/conversation/message/_form.html.slime
+++ b/lib/philomena_web/templates/conversation/message/_form.html.slime
@@ -1,24 +1,7 @@
 = form_for @changeset, Routes.conversation_message_path(@conn, :create, @conversation), fn f ->
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fa.fa-pencil-alt>
-        | Reply
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        | Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Your message", required: true
-        = error_tag f, :body
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      | [Loading preview...]
+    .communication-edit__wrap
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Reply"
 
     .block__content.communication-edit__actions
-      = submit "Send", class: "button", autocomplete: "off", data: [disable_with: "Sending..."]
+      = submit "Send", class: "button", autocomplete: "off", data: [disable_with: raw("Sending&hellip;")]
diff --git a/lib/philomena_web/templates/conversation/new.html.slime b/lib/philomena_web/templates/conversation/new.html.slime
index 50511782..040bb99b 100644
--- a/lib/philomena_web/templates/conversation/new.html.slime
+++ b/lib/philomena_web/templates/conversation/new.html.slime
@@ -20,25 +20,8 @@ h1 New Conversation
     = error_tag f, :title
 
   = inputs_for f, :messages, fn fm ->
-    .block
-      .block__header.block__header--js-tabbed
-        a.selected href="#" data-click-tab="write"
-          i.fa.fa-pencil-alt>
-          | Reply
-
-        a href="#" data-click-tab="preview"
-          i.fa.fa-eye>
-          | Preview
-
-      .block__tab.communication-edit__tab.selected data-tab="write"
-        = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-        = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-        = textarea fm, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Your message", required: true
-        = error_tag fm, :body
-
-      .block__tab.communication-edit__tab.hidden data-tab="preview"
-        | [Loading preview...]
+    div
+      = render PhilomenaWeb.MarkdownView, "_input.html", changeset: @changeset, conn: @conn, f: fm, action_icon: "pencil-alt", action_text: "Compose"
 
   .block__content.communication-edit__actions
     = submit "Send", class: "button", autocomplete: "off", data: [disable_with: "Sending..."]
diff --git a/lib/philomena_web/templates/image/comment/_form.html.slime b/lib/philomena_web/templates/image/comment/_form.html.slime
index 5cb6b9e4..39b8a519 100644
--- a/lib/philomena_web/templates/image/comment/_form.html.slime
+++ b/lib/philomena_web/templates/image/comment/_form.html.slime
@@ -6,29 +6,10 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' Edit
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for above-rating stuff.", required: true
-        = error_tag f, :body
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
+    div
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
     .block__content.communication-edit__actions
       => submit "Post", class: "button", data: [disable_with: raw("Posting&hellip;")]
 
-      = if @conn.assigns.current_user do
-        = checkbox f, :anonymous, value: anonymous_by_default?(@conn)
-        = label f, :anonymous, "Anonymous"
+      = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f
diff --git a/lib/philomena_web/templates/image/comment/edit.html.slime b/lib/philomena_web/templates/image/comment/edit.html.slime
index 7808236d..d7183a60 100644
--- a/lib/philomena_web/templates/image/comment/edit.html.slime
+++ b/lib/philomena_web/templates/image/comment/edit.html.slime
@@ -4,29 +4,12 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' Edit
+    .communication-edit__wrap
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for above-rating stuff."
 
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for above-rating stuff.", required: true
-        = error_tag f, :body
-
-      .field
-        = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
-        = error_tag f, :edit_reason
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
+    .block__content.field
+      = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
+      = error_tag f, :edit_reason
 
     .block__content.communication-edit__actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/templates/image/comment/history/index.html.slime b/lib/philomena_web/templates/image/comment/history/index.html.slime
index c44add69..3dd6e642 100644
--- a/lib/philomena_web/templates/image/comment/history/index.html.slime
+++ b/lib/philomena_web/templates/image/comment/history/index.html.slime
@@ -43,4 +43,4 @@ h1
           ' Edited
           => pretty_time(version.created_at)
           ' by
-          => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: version, conn: @conn
\ No newline at end of file
+          => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: version, conn: @conn
diff --git a/lib/philomena_web/templates/image/description/_form.html.slime b/lib/philomena_web/templates/image/description/_form.html.slime
index 04be5fc0..68bf5212 100644
--- a/lib/philomena_web/templates/image/description/_form.html.slime
+++ b/lib/philomena_web/templates/image/description/_form.html.slime
@@ -3,8 +3,8 @@
     .alert.alert-danger
       p Oops, something went wrong! Please check the errors below.
 
-  = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-  = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
+  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
+  = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
   .field
     = textarea f, :description, id: "description", class: "input input--wide js-toolbar-input", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source."
diff --git a/lib/philomena_web/templates/image/new.html.slime b/lib/philomena_web/templates/image/new.html.slime
index 2349c093..dcb0d3de 100644
--- a/lib/philomena_web/templates/image/new.html.slime
+++ b/lib/philomena_web/templates/image/new.html.slime
@@ -41,7 +41,7 @@
   .field
     = label f, :source_url, "The page you found this image on"
     = url_input f, :source_url, class: "input input--wide js-image-input", placeholder: "Source URL"
-  
+
   .field
     label for="image[tag_input]"
       ' Describe with
@@ -64,24 +64,12 @@
 
   .field
     .block
-      .block__header.block__header--js-tabbed
-        = link "Description", to: "#", class: "selected", data: [click_tab: "write"]
-        = link "Preview", to: "#", data: [click_tab: "preview"]
+      .communication-edit__wrap
+        = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_icon: "pencil-alt", action_text: "Description", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source."
 
-      .block__tab.selected data-tab="write"
-        = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-        = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-        = textarea f, :description, class: "input input--wide input--text js-preview-description js-image-input js-toolbar-input", placeholder: "Describe this image in plain words - this should generally be info about the image that doesn't belong in the tags or source."
-      .block__tab.hidden data-tab="preview"
-        | Loading preview...
-
-  = if @conn.assigns.current_user do
-    .field
-      = label f, :anonymous, "Post anonymously"
-      = checkbox f, :anonymous, class: "checkbox", value: anonymous_by_default?(@conn)
+  = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"
 
   = render PhilomenaWeb.CaptchaView, "_captcha.html", name: "image", conn: @conn
 
   .actions
-    = submit "Upload", class: "button", autocomplete: "off", data: [disable_with: "Please wait..."]
+    = submit "Upload", class: "button input--separate-top", autocomplete: "off", data: [disable_with: "Please wait..."]
diff --git a/lib/philomena_web/templates/markdown/_anon_checkbox.html.slime b/lib/philomena_web/templates/markdown/_anon_checkbox.html.slime
new file mode 100644
index 00000000..bd5a6fe9
--- /dev/null
+++ b/lib/philomena_web/templates/markdown/_anon_checkbox.html.slime
@@ -0,0 +1,5 @@
+- f = assigns[:f]
+- label_lext = assigns[:label] || "Anonymous"
+= if @conn.assigns.current_user do
+  => checkbox f, :anonymous, value: anonymous_by_default?(@conn), class: "js-preview-anonymous"
+  = label f, :anonymous, label_lext
diff --git a/lib/philomena_web/templates/textile/_help.html.slime b/lib/philomena_web/templates/markdown/_help.html.slime
similarity index 54%
rename from lib/philomena_web/templates/textile/_help.html.slime
rename to lib/philomena_web/templates/markdown/_help.html.slime
index 83fb4c74..a69338a4 100644
--- a/lib/philomena_web/templates/textile/_help.html.slime
+++ b/lib/philomena_web/templates/markdown/_help.html.slime
@@ -1,15 +1,13 @@
-.textile-syntax-reference
+.editor-syntax-reference
   strong<> Syntax quick reference:
 
   span
-    strong>
-      ' *bold*
-    em> _italic_
-    span.spoiler>
-      | [spoiler]hide text[/spoiler]
-    code> @code@
-    ins> +underline+
-    del> -strike-
+    strong> **bold**
+    em> *italic*
+    span.spoiler> ||hide text||
+    code> `code`
+    ins> __underline__
+    del> ~~strike~~
     sup> ^sup^
     sub ~sub~
 
@@ -17,11 +15,11 @@
     ' &hellip;
 
   p.hidden.textile_help
-    ' [==stuff you don't want textile to parse==]
+    ' Escape formatting using \ e.g. \* for a literal star character
     br
 
     ins> Links:
-    ' "On-site link":/some-link, "External link":http://some-link
+    ' [On-site link](/some-link), [External link](http://some-link)
     br
 
     ins> Images:
@@ -29,7 +27,7 @@
     br
 
     ins> External images:
-    ' !http://some-image!, !http://some-clickable-image!:http://some-link
+    ' ![alt text](http://some-image), [![alt text](http://some-clickable-image)](http://some-link)
     br
 
-    strong> Remember to use embeds (&gt;&gt;) for booru images as these let users filter content they don't want to see
\ No newline at end of file
+    strong> Remember to use embeds (&gt;&gt;) for booru images as these let users filter content they don't want to see
diff --git a/lib/philomena_web/templates/markdown/_input.html.slime b/lib/philomena_web/templates/markdown/_input.html.slime
new file mode 100644
index 00000000..ad806cdb
--- /dev/null
+++ b/lib/philomena_web/templates/markdown/_input.html.slime
@@ -0,0 +1,27 @@
+- form = assigns[:f]
+- action_text = assigns[:action_text] || 'Edit'
+- action_icon = assigns[:action_icon] || 'edit'
+- field_name = assigns[:name] || :body
+- field_placeholder = assigns[:placeholder] || "Your message"
+.block__content.block--split
+  .block__column--full.js-preview-input-wrapper
+    .block__column__header
+      i.fa> class="fa-#{action_icon}"
+      = action_text
+
+    = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
+    = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
+
+    .field
+      = textarea form, field_name, class: "input input--wide input--text input--resize-vertical js-toolbar-input js-preview-input", placeholder: field_placeholder, required: true
+      = error_tag form, field_name
+
+  .block__column--half.hidden.communication-preview.js-preview-output-wrapper
+    .block__column__header.flex.flex--spaced-out
+      span
+        i.fa.fa-eye>
+        ' Preview
+      span.communication-preview__loading.hidden
+        i.fa.fa-spin.fa-fw.fa-cog> title=raw('Loading preview&hellip;')
+
+    .communication-preview__content
diff --git a/lib/philomena_web/templates/textile/_toolbar.html.slime b/lib/philomena_web/templates/markdown/_toolbar.html.slime
similarity index 99%
rename from lib/philomena_web/templates/textile/_toolbar.html.slime
rename to lib/philomena_web/templates/markdown/_toolbar.html.slime
index 7f3c4782..1b8b7a5f 100644
--- a/lib/philomena_web/templates/textile/_toolbar.html.slime
+++ b/lib/philomena_web/templates/markdown/_toolbar.html.slime
@@ -31,4 +31,4 @@
     i.fa.fa-image
   button.communication__toolbar__button tabindex="-1" type="button" title="Text you want the parser to ignore" data-syntax-id="noParse"
     span
-      | no parse
+      | escape
diff --git a/lib/philomena_web/templates/post/preview/create.html.slime b/lib/philomena_web/templates/post/preview/create.html.slime
index 62f2d4e0..8b5febb8 100644
--- a/lib/philomena_web/templates/post/preview/create.html.slime
+++ b/lib/philomena_web/templates/post/preview/create.html.slime
@@ -2,9 +2,9 @@
   .flex__fixed.spacing-right
     = render PhilomenaWeb.UserAttributionView, "_anon_user_avatar.html", object: @post, conn: @conn
 
-  .flex__grow.communication_body
+  .flex__grow.communication__body
     span.communication__body__sender-name
       = render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: @post, conn: @conn, awards: true
 
     .communication__body__text
-      == @body
\ No newline at end of file
+      == @body
diff --git a/lib/philomena_web/templates/profile/description/edit.html.slime b/lib/philomena_web/templates/profile/description/edit.html.slime
index 7bea4a15..6820bd0a 100644
--- a/lib/philomena_web/templates/profile/description/edit.html.slime
+++ b/lib/philomena_web/templates/profile/description/edit.html.slime
@@ -14,25 +14,8 @@ h1 Updating Profile Description
         = error_tag f, :personal_title
 
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' About Me
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :description, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Description (up to 10000 characters)"
-        = error_tag f, :description
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
+    div
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "About Me", placeholder: "Description (up to 10000 characters)", name: :description
 
     .block__content.communication-edit__actions
       => submit "Update", class: "button"
diff --git a/lib/philomena_web/templates/profile/scratchpad/edit.html.slime b/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
index 3bfbd7f6..e458fa25 100644
--- a/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
+++ b/lib/philomena_web/templates/profile/scratchpad/edit.html.slime
@@ -5,25 +5,8 @@ h1 Updating Moderation Scratchpad
     .alert.alert-danger
       p Oops, something went wrong! Please check the errors below.
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' Scratchpad
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :scratchpad, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Scratchpad Contents"
-        = error_tag f, :scratchpad
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
+    div
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, action_text: "Scratchpad", placeholder: "Scratchpad Contents", name: :scratchpad
 
     .block__content.communication-edit__actions
       => submit "Update", class: "button"
diff --git a/lib/philomena_web/templates/report/new.html.slime b/lib/philomena_web/templates/report/new.html.slime
index d6b5603f..eb90739d 100644
--- a/lib/philomena_web/templates/report/new.html.slime
+++ b/lib/philomena_web/templates/report/new.html.slime
@@ -45,24 +45,7 @@ p
     .field
       = select f, :category, report_categories(), class: "input"
     .block
-      .block__header.block__header--js-tabbed
-        a.selected href="#" data-click-tab="write"
-          i.fas.fa-edit>
-          ' Edit
-
-        a href="#" data-click-tab="preview"
-          i.fa.fa-eye>
-          ' Preview
-
-      .block__tab.communication-edit__tab.selected data-tab="write"
-        = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-        = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-        .field
-          = textarea f, :reason, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Provide anything else we should know here."
-
-      .block__tab.communication-edit__tab.hidden data-tab="preview"
-        ' [Loading preview...]
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Provide anything else we should know here.", name: :reason
 
     = render PhilomenaWeb.CaptchaView, "_captcha.html", name: "report", conn: @conn
 
diff --git a/lib/philomena_web/templates/topic/new.html.slime b/lib/philomena_web/templates/topic/new.html.slime
index 0e8c6ef5..5d42d130 100644
--- a/lib/philomena_web/templates/topic/new.html.slime
+++ b/lib/philomena_web/templates/topic/new.html.slime
@@ -3,43 +3,26 @@
     .alert.alert-danger
       p Oops, something went wrong! Please check the errors below.
 
+  h1 Create a Topic
+
+  .field
+    = text_input f, :title, class: "input input--wide", placeholder: "Title"
+    = error_tag f, :title
+    = error_tag f, :slug
+
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-pencil-alt>
-        ' Create a Topic
+    = inputs_for f, :posts, fn fp ->
+        = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: fp, action_icon: "pencil-alt", action_text: "First Post", placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      .field
-        = text_input f, :title, class: "input input--wide", placeholder: "Title"
-        = error_tag f, :title
-        = error_tag f, :slug
-
-      = inputs_for f, :posts, fn fp ->
-        .field
-          = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-          = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-          = textarea fp, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for NSFW stuff in SFW forums.", required: true
-          = error_tag fp, :body
-
-      = if @conn.assigns.current_user do
-        .field
-          => checkbox f, :anonymous, value: anonymous_by_default?(@conn)
-          = label f, :anonymous, "Post anonymously"
+    .block__content.communication-edit__wrap
+      = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f, label: "Post anonymously"
 
       = inputs_for f, :poll, fn fp ->
-        #add-poll
+        #add-poll.field
           input.toggle-box id="add_poll" name="add_poll" type="checkbox"
           label for="add_poll" Add a poll
           .toggle-box-container
             = render PhilomenaWeb.Topic.PollView, "_form.html", Map.put(assigns, :f, fp)
 
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
-
     .block__content.communication-edit__actions
       = submit "Post", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/templates/topic/post/_form.html.slime b/lib/philomena_web/templates/topic/post/_form.html.slime
index bfc7b191..aa69b979 100644
--- a/lib/philomena_web/templates/topic/post/_form.html.slime
+++ b/lib/philomena_web/templates/topic/post/_form.html.slime
@@ -4,29 +4,10 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' Edit
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
-      .field
-        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for NSFW stuff in SFW forums.", required: true
-        = error_tag f, :body
-
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
+    div
+      = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
     .block__content.communication-edit__actions
       => submit "Post", class: "button", data: [disable_with: raw("Posting&hellip;")]
 
-      = if @conn.assigns.current_user do
-        = checkbox f, :anonymous, value: anonymous_by_default?(@conn)
-        = label f, :anonymous, "Anonymous"
+      = render PhilomenaWeb.MarkdownView, "_anon_checkbox.html", conn: @conn, f: f
diff --git a/lib/philomena_web/templates/topic/post/edit.html.slime b/lib/philomena_web/templates/topic/post/edit.html.slime
index b72a9ba5..5f815ff2 100644
--- a/lib/philomena_web/templates/topic/post/edit.html.slime
+++ b/lib/philomena_web/templates/topic/post/edit.html.slime
@@ -4,29 +4,13 @@
       p Oops, something went wrong! Please check the errors below.
 
   .block
-    .block__header.block__header--js-tabbed
-      a.selected href="#" data-click-tab="write"
-        i.fas.fa-edit>
-        ' Edit
-
-      a href="#" data-click-tab="preview"
-        i.fa.fa-eye>
-        ' Preview
-
-    .block__tab.communication-edit__tab.selected data-tab="write"
-      = render PhilomenaWeb.TextileView, "_help.html", conn: @conn
-      = render PhilomenaWeb.TextileView, "_toolbar.html", conn: @conn
-
+    .communication-edit__wrap
       .field
-        = textarea f, :body, class: "input input--wide input--text js-preview-input js-toolbar-input", placeholder: "Please read the site rules before posting and use [spoiler][/spoiler] for above-rating stuff.", required: true
-        = error_tag f, :body
+        = render PhilomenaWeb.MarkdownView, "_input.html", conn: @conn, f: f, placeholder: "Please read the site rules before posting and use ||spoilers|| for NSFW stuff in SFW forums."
 
-      .field
+      .block__content.field
         = text_input f, :edit_reason, class: "input input--wide", placeholder: "Reason for edit"
         = error_tag f, :edit_reason
 
-    .block__tab.communication-edit__tab.hidden data-tab="preview"
-      ' [Loading preview...]
-
     .block__content.communication-edit__actions
       => submit "Edit", class: "button", data: [disable_with: raw("Posting&hellip;")]
diff --git a/lib/philomena_web/templates/topic/post/history/index.html.slime b/lib/philomena_web/templates/topic/post/history/index.html.slime
index 87c13ae4..c2423ed6 100644
--- a/lib/philomena_web/templates/topic/post/history/index.html.slime
+++ b/lib/philomena_web/templates/topic/post/history/index.html.slime
@@ -42,4 +42,4 @@ h1
           ' Edited
           => pretty_time(version.created_at)
           ' by
-          => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: version, conn: @conn
\ No newline at end of file
+          => render PhilomenaWeb.UserAttributionView, "_anon_user.html", object: version, conn: @conn
diff --git a/lib/philomena_web/templates/topic/show.html.slime b/lib/philomena_web/templates/topic/show.html.slime
index 6fd87d54..058a6592 100644
--- a/lib/philomena_web/templates/topic/show.html.slime
+++ b/lib/philomena_web/templates/topic/show.html.slime
@@ -108,7 +108,7 @@ h1 = @topic.title
     - true ->
 
   = if can?(@conn, :hide, @topic) do
-    .block__content
+    .block__content.block__content--top-border
       input.toggle-box id="administrator_tools" type="checkbox" checked=false
       label for="administrator_tools" Manage Topic
       .toggle-box-container
diff --git a/lib/philomena_web/views/image/comment_view.ex b/lib/philomena_web/views/image/comment_view.ex
index a5a31446..78c838ca 100644
--- a/lib/philomena_web/views/image/comment_view.ex
+++ b/lib/philomena_web/views/image/comment_view.ex
@@ -1,7 +1,3 @@
 defmodule PhilomenaWeb.Image.CommentView do
   use PhilomenaWeb, :view
-
-  def anonymous_by_default?(conn) do
-    conn.assigns.current_user.anonymous_by_default
-  end
 end
diff --git a/lib/philomena_web/views/image_view.ex b/lib/philomena_web/views/image_view.ex
index b0e48666..071e3b8b 100644
--- a/lib/philomena_web/views/image_view.ex
+++ b/lib/philomena_web/views/image_view.ex
@@ -175,10 +175,6 @@ defmodule PhilomenaWeb.ImageView do
 
   def scope(conn), do: PhilomenaWeb.ImageScope.scope(conn)
 
-  def anonymous_by_default?(conn) do
-    conn.assigns.current_user.anonymous_by_default
-  end
-
   def info_row(_conn, []), do: []
 
   def info_row(conn, [{tag, description, dnp_entries}]) do
diff --git a/lib/philomena_web/views/markdown_view.ex b/lib/philomena_web/views/markdown_view.ex
new file mode 100644
index 00000000..f3d15437
--- /dev/null
+++ b/lib/philomena_web/views/markdown_view.ex
@@ -0,0 +1,7 @@
+defmodule PhilomenaWeb.MarkdownView do
+  use PhilomenaWeb, :view
+
+  def anonymous_by_default?(conn) do
+    conn.assigns.current_user.anonymous_by_default
+  end
+end
diff --git a/lib/philomena_web/views/textile_view.ex b/lib/philomena_web/views/textile_view.ex
deleted file mode 100644
index 0ebbdea0..00000000
--- a/lib/philomena_web/views/textile_view.ex
+++ /dev/null
@@ -1,3 +0,0 @@
-defmodule PhilomenaWeb.TextileView do
-  use PhilomenaWeb, :view
-end
diff --git a/lib/philomena_web/views/topic/post_view.ex b/lib/philomena_web/views/topic/post_view.ex
index 197fe196..e24f727d 100644
--- a/lib/philomena_web/views/topic/post_view.ex
+++ b/lib/philomena_web/views/topic/post_view.ex
@@ -1,7 +1,3 @@
 defmodule PhilomenaWeb.Topic.PostView do
   use PhilomenaWeb, :view
-
-  def anonymous_by_default?(conn) do
-    conn.assigns.current_user.anonymous_by_default
-  end
 end
diff --git a/lib/philomena_web/views/topic_view.ex b/lib/philomena_web/views/topic_view.ex
index 6f6be665..ee4e0ae0 100644
--- a/lib/philomena_web/views/topic_view.ex
+++ b/lib/philomena_web/views/topic_view.ex
@@ -1,7 +1,3 @@
 defmodule PhilomenaWeb.TopicView do
   use PhilomenaWeb, :view
-
-  def anonymous_by_default?(conn) do
-    conn.assigns.current_user.anonymous_by_default
-  end
 end

From 9ac7abdf541f413c68835ca4fffbf847923efe74 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Mon, 13 Sep 2021 22:26:01 +0200
Subject: [PATCH 2/7] fix code formatting

---
 assets/js/markdowntoolbar.js | 51 +++++++++++++++++++-----------------
 assets/js/preview.js         | 14 +++++-----
 2 files changed, 34 insertions(+), 31 deletions(-)

diff --git a/assets/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js
index 7511fd50..b1159b19 100644
--- a/assets/js/markdowntoolbar.js
+++ b/assets/js/markdowntoolbar.js
@@ -52,25 +52,26 @@ const markdownSyntax = {
   noParse: {
     action: escapeSelection,
     options: { escapeChar: '\\' }
-  },
+  }
 };
 
 function getSelections(textarea, linesOnly = false) {
   let { selectionStart, selectionEnd } = textarea,
       selection = textarea.value.substring(selectionStart, selectionEnd),
       leadingSpace = '',
-      trailingSpace = '',
+      trailingSpace =  '',
       caret;
 
   if (linesOnly) {
     let startNewlineIndex = 0,
-        endNewlineIndex = textarea.value.length,
-        explorer = /\n/g;
+        endNewlineIndex = textarea.value.length;
+    const explorer = /\n/g;
     while (explorer.exec(textarea.value)) {
       const { lastIndex } = explorer;
       if (lastIndex < selectionStart) {
         startNewlineIndex = lastIndex + 1;
-      } else if (lastIndex > selectionEnd) {
+      }
+      else if (lastIndex > selectionEnd) {
         endNewlineIndex = lastIndex;
         break;
       }
@@ -79,7 +80,8 @@ function getSelections(textarea, linesOnly = false) {
     selectionStart = startNewlineIndex;
     selectionEnd = endNewlineIndex;
     selection = textarea.value.substring(selectionStart, selectionEnd);
-  } else {
+  }
+  else {
     // Deselect trailing space and line break
     for (caret = selection.length - 1; caret > 0; caret--) {
       if (selection[caret] !== ' ' && selection[caret] !== '\n') break;
@@ -98,7 +100,7 @@ function getSelections(textarea, linesOnly = false) {
   return {
     selectedText: selection,
     beforeSelection: textarea.value.substring(0, selectionStart) + leadingSpace,
-    afterSelection: trailingSpace + textarea.value.substring(selectionEnd),
+    afterSelection: trailingSpace + textarea.value.substring(selectionEnd)
   };
 }
 
@@ -107,8 +109,8 @@ function getSurroundingTwoLines(beforeText, afterText) {
   // 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'),
-  }
+    twoLinesAfter: afterText.split('\n').slice(0, 2).join('\n')
+  };
 }
 
 function transformSelection(textarea, transformer, eachLine) {
@@ -140,7 +142,7 @@ function insertLink(textarea, options) {
   }
 
   const prefix = options.image ? '![' : '[',
-        suffix = '](' + escapeHyperlink(hyperlink) + ')';
+        suffix = `](${escapeHyperlink(hyperlink)})`;
 
   wrapSelection(textarea, { prefix, suffix });
 }
@@ -159,9 +161,9 @@ function wrapSelection(textarea, options) {
 
     return {
       newText: prefix + newText + suffix,
-      caretOffset: emptyText ? prefix.length : -suffix.length,
+      caretOffset: emptyText ? prefix.length : -suffix.length
     };
-  })
+  });
 }
 
 function wrapLines(textarea, options) {
@@ -172,17 +174,18 @@ function wrapLines(textarea, options) {
     let newText = prefix;
 
     if (!emptyText) {
-      newText = text.split(/\n/g).map(line => prefix + (line.trim()) + suffix).join('\n');
-    } else {
+      newText = text.split(/\n/g).map(line => prefix + line.trim() + suffix).join('\n');
+    }
+    else {
       newText += suffix;
     }
 
     // Add blank lines before/after if surrounding line are not empty
-    if (isNotBlank(twoLinesBefore)) newText = '\n' + newText;
+    if (isNotBlank(twoLinesBefore)) newText = `\n${newText}`;
     if (isNotBlank(twoLinesAfter)) newText += '\n';
 
     return { newText, caretOffset: newText.length - suffix.length };
-  })
+  });
 }
 
 function escapeSelection(textarea, options) {
@@ -192,13 +195,13 @@ function escapeSelection(textarea, options) {
 
     if (emptyText) return;
 
-    let newText = text.replace(/([\[\]()*_`\\~<>^])/g, '\\$1').replace(/\|\|/g, '\\|\\|');
+    const newText = text.replace(/([[\]()*_`\\~<>^])/g, '\\$1').replace(/\|\|/g, '\\|\\|');
 
     return {
-      newText: newText,
-      caretOffset: newText.length,
+      newText,
+      caretOffset: newText.length
     };
-  })
+  });
 }
 
 function escapeHyperlink(url) {
@@ -212,12 +215,12 @@ function isNotBlank(string) {
 function clickHandler(event) {
   const button = event.target.closest('.communication__toolbar__button');
   if (!button) return;
-  const toolbar  = button.closest('.communication__toolbar'),
+  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
         textarea = $('.js-toolbar-input', toolbar.parentNode),
-        id       = button.dataset.syntaxId;
+        id = button.dataset.syntaxId;
 
   markdownSyntax[id].action(textarea, markdownSyntax[id].options);
   textarea.focus();
@@ -226,7 +229,7 @@ function clickHandler(event) {
 function shortcutHandler(event) {
   if (!event.ctrlKey || (window.navigator.platform === 'MacIntel' && !event.metaKey) || event.shiftKey || event.altKey) return;
   const textarea = event.target,
-        key      = event.key.toLowerCase();
+        key = event.key.toLowerCase();
 
   for (const id in markdownSyntax) {
     if (key === markdownSyntax[id].options.shortcutKey) {
@@ -250,7 +253,7 @@ function setupToolbar() {
     wrapper.classList.add('block__column--half');
   });
   $$('.js-preview-output-wrapper').forEach(wrapper => {
-    showEl(wrapper)
+    showEl(wrapper);
   });
 }
 
diff --git a/assets/js/preview.js b/assets/js/preview.js
index 78035698..93104b5a 100644
--- a/assets/js/preview.js
+++ b/assets/js/preview.js
@@ -10,7 +10,7 @@ import { hideEl, showEl } from './utils/dom.js';
 function handleError(response) {
   const errorMessage = '<div>Preview failed to load!</div>';
 
-  if (!response.ok){
+  if (!response.ok) {
     return errorMessage;
   }
 
@@ -24,7 +24,7 @@ function commentReply(user, url, textarea, quote) {
   if (newval && /\n$/.test(newval)) newval += '\n';
   newval += `${text}\n`;
 
-  if (quote){
+  if (quote) {
     newval += `[bq="${user.replace('"', '\'')}"] ${quote} [/bq]\n`;
   }
 
@@ -44,12 +44,12 @@ function commentReply(user, url, textarea, quote) {
 let previewAbortController = null;
 
 function getPreview(body, anonymous, previewLoading, previewContent) {
-  let path = '/posts/preview';
+  const path = '/posts/preview';
 
   if (typeof body !== 'string') return;
 
   const trimmedBody = body.trim();
-  if (trimmedBody.length < 1){
+  if (trimmedBody.length < 1) {
     previewContent.innerHTML = '';
     return;
   }
@@ -95,7 +95,7 @@ function resizeTextarea(e) {
 function setupPreviews() {
   let textarea = document.querySelector('.js-preview-input');
 
-  if (!textarea){
+  if (!textarea) {
     textarea = document.querySelector('.js-preview-description');
   }
 
@@ -103,7 +103,7 @@ function setupPreviews() {
   const previewContent = document.querySelector('.communication-preview__content');
   const previewAnon = document.querySelector('.js-preview-anonymous') || false;
 
-  if (!textarea || !previewContent){
+  if (!textarea || !previewContent) {
     return;
   }
 
@@ -129,7 +129,7 @@ function setupPreviews() {
   previewAnon && previewAnon.addEventListener('click', updatePreview);
 
   document.addEventListener('click', event => {
-    if (event.target && event.target.closest('.post-reply')){
+    if (event.target && event.target.closest('.post-reply')) {
       const link = event.target.closest('.post-reply');
       commentReply(link.dataset.author, link.getAttribute('href'), textarea, link.dataset.post);
       event.preventDefault();

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 3/7] 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

From f61cc6d0bee0c2392a0ffa4381cdbb70f0a0ed63 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Wed, 29 Sep 2021 20:00:46 +0200
Subject: [PATCH 4/7] revert split editor styling, update markdown toolbar
 buttons' behavior

---
 assets/css/common/_blocks.scss                | 43 ----------
 assets/css/views/_communications.scss         |  4 +-
 assets/js/markdowntoolbar.js                  | 80 +++++++++++--------
 assets/js/preview.js                          | 64 ++++++---------
 assets/js/utils/events.js                     | 19 -----
 assets/js/utils/requests.js                   |  3 +-
 .../templates/markdown/_input.html.slime      | 33 ++++----
 7 files changed, 90 insertions(+), 156 deletions(-)

diff --git a/assets/css/common/_blocks.scss b/assets/css/common/_blocks.scss
index d00ccd92..774ae23e 100644
--- a/assets/css/common/_blocks.scss
+++ b/assets/css/common/_blocks.scss
@@ -226,46 +226,3 @@ a.block__header--single-item, .block__header a {
 .block__content--top-border {
   border-top: $border;
 }
-
-.block__column__header {
-  font-size: 14px;
-  line-height: $block_header_sub_height;
-  margin-bottom: $header_field_spacing;
-  border-bottom: 1px solid;
-  font-weight: bold;
-}
-
-@media (min-width: $min_px_width_for_desktop_layout) {
-  .block--split {
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: space-between;
-  }
-
-  .block__column--full, .block__column--half {
-    flex-grow: 0;
-    flex-shrink: 0;
-    box-sizing: border-box;
-  }
-
-  .block__column--full {
-    flex-basis: 100%;
-  }
-
-  .block__column--half {
-    flex-basis: 50%;
-    max-width: 50%;
-
-    &:first-child {
-      padding-right: $block-spacing;
-    }
-    &:last-child {
-      padding-left: $block-spacing;
-    }
-
-    .flex__grow {
-      flex: 1;
-      min-width: 0;
-    }
-  }
-}
diff --git a/assets/css/views/_communications.scss b/assets/css/views/_communications.scss
index 7e410306..5809534f 100644
--- a/assets/css/views/_communications.scss
+++ b/assets/css/views/_communications.scss
@@ -51,7 +51,7 @@ span.communication__sender__stats,
   margin-left: 6px;
 }
 
-.communication-edit__wrap {
+.communication-edit__tab {
   padding-bottom: 12px;
 }
 
@@ -89,7 +89,7 @@ span.communication__sender__stats,
   }
 }
 
-.hyphenate-breaks {
+.hyphenate-breaks{
   hyphens: auto;
 }
 
diff --git a/assets/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js
index 3992bdfa..0056f807 100644
--- a/assets/js/markdowntoolbar.js
+++ b/assets/js/markdowntoolbar.js
@@ -2,7 +2,7 @@
  * Markdown toolbar
  */
 
-import { $, $$, showEl } from './utils/dom';
+import { $, $$ } from './utils/dom';
 
 const markdownSyntax = {
   bold: {
@@ -22,8 +22,15 @@ const markdownSyntax = {
     options: { prefix: '||', shortcutKey: 's' }
   },
   code: {
-    action: wrapSelection,
-    options: { prefix: '`', shortcutKey: 'e' }
+    action: wrapSelectionOrLines,
+    options: {
+      prefix: '`',
+      suffix: '`',
+      prefixMultiline: '```\n',
+      suffixMultiline: '\n```',
+      singleWrap: true,
+      shortcutKey: 'e'
+    }
   },
   strike: {
     action: wrapSelection,
@@ -62,22 +69,31 @@ function getSelections(textarea, linesOnly = false) {
       trailingSpace =  '',
       caret;
 
-  if (linesOnly) {
+  const processLinesOnly = linesOnly instanceof RegExp ? linesOnly.test(selection) : linesOnly;
+  if (processLinesOnly) {
+    const explorer = /\n/g;
     let startNewlineIndex = 0,
         endNewlineIndex = textarea.value.length;
-    const explorer = /\n/g;
     while (explorer.exec(textarea.value)) {
       const { lastIndex } = explorer;
-      if (lastIndex < selectionStart) {
-        startNewlineIndex = lastIndex + 1;
+      if (lastIndex <= selectionStart) {
+        startNewlineIndex = lastIndex;
       }
       else if (lastIndex > selectionEnd) {
-        endNewlineIndex = lastIndex;
+        endNewlineIndex = lastIndex - 1;
         break;
       }
     }
 
     selectionStart = startNewlineIndex;
+    const startRemovedValue = textarea.value.substring(selectionStart);
+    const startsWithBlankString = startRemovedValue.match(/^[\s\n]+/);
+    if (startsWithBlankString) {
+      // Offset the selection start to the first non-blank line's first non-blank character, since
+      // Some browsers treat selection up to the start of the line as including the end of the
+      // previous line
+      selectionStart += startsWithBlankString[0].length;
+    }
     selectionEnd = endNewlineIndex;
     selection = textarea.value.substring(selectionStart, selectionEnd);
   }
@@ -98,6 +114,7 @@ function getSelections(textarea, linesOnly = false) {
   }
 
   return {
+    processLinesOnly,
     selectedText: selection,
     beforeSelection: textarea.value.substring(0, selectionStart) + leadingSpace,
     afterSelection: trailingSpace + textarea.value.substring(selectionEnd)
@@ -105,11 +122,11 @@ function getSelections(textarea, linesOnly = false) {
 }
 
 function transformSelection(textarea, transformer, eachLine) {
-  const { selectedText, beforeSelection, afterSelection } = getSelections(textarea, eachLine),
+  const { selectedText, beforeSelection, afterSelection, processLinesOnly } = getSelections(textarea, eachLine),
         // For long comments, record scrollbar position to restore it later
         { scrollTop } = textarea;
 
-  const { newText, caretOffset } = transformer(selectedText);
+  const { newText, caretOffset } = transformer(selectedText, processLinesOnly);
 
   textarea.value = beforeSelection + newText + afterSelection;
 
@@ -120,7 +137,8 @@ function transformSelection(textarea, transformer, eachLine) {
   textarea.selectionStart = newSelectionStart;
   textarea.selectionEnd = newSelectionStart;
   textarea.scrollTop = scrollTop;
-  textarea.dispatchEvent(new Event('keydown'));
+  // Needed for automatic textarea resizing
+  textarea.dispatchEvent(new Event('change'));
 }
 
 function insertLink(textarea, options) {
@@ -150,28 +168,31 @@ function wrapSelection(textarea, options) {
       });
     }
 
+    newText = prefix + newText + suffix
+
     return {
-      newText: prefix + newText + suffix,
-      caretOffset: emptyText ? prefix.length : 0
+      newText,
+      caretOffset: emptyText ? prefix.length : newText.length
     };
   });
 }
 
-function wrapLines(textarea, options) {
-  transformSelection(textarea, (selectedText) => {
-    const { text = selectedText, prefix = '', suffix = '' } = options,
+function wrapLines(textarea, options, eachLine = true) {
+  transformSelection(textarea, (selectedText, processLinesOnly) => {
+    const { text = selectedText, singleWrap = false } = options,
+          prefix = (processLinesOnly && options.prefixMultiline) || options.prefix || '',
+          suffix = (processLinesOnly && options.suffixMultiline) || options.suffix || '',
           emptyText = text === '';
-    let newText = prefix;
+    let newText = singleWrap
+      ? prefix + text.trim() + suffix
+      : text.split(/\n/g).map(line => prefix + line.trim() + suffix).join('\n');
 
-    if (!emptyText) {
-      newText = text.split(/\n/g).map(line => prefix + line.trim() + suffix).join('\n');
-    }
-    else {
-      newText += suffix;
-    }
+    return { newText, caretOffset: emptyText ? prefix.length : newText.length };
+  }, eachLine);
+}
 
-    return { newText, caretOffset: newText.length };
-  });
+function wrapSelectionOrLines(textarea, options) {
+  wrapLines(textarea, options, /\n/);
 }
 
 function escapeSelection(textarea, options) {
@@ -224,15 +245,6 @@ function setupToolbar() {
   $$('.js-toolbar-input').forEach(textarea => {
     textarea.addEventListener('keydown', shortcutHandler);
   });
-
-  // Transform non-JS basic editor to two-column layout with preview
-  $$('.js-preview-input-wrapper').forEach(wrapper => {
-    wrapper.classList.remove('block__column--full');
-    wrapper.classList.add('block__column--half');
-  });
-  $$('.js-preview-output-wrapper').forEach(wrapper => {
-    showEl(wrapper);
-  });
 }
 
 export { setupToolbar };
diff --git a/assets/js/preview.js b/assets/js/preview.js
index 93104b5a..757ef52b 100644
--- a/assets/js/preview.js
+++ b/assets/js/preview.js
@@ -4,7 +4,6 @@
 
 import { fetchJson } from './utils/requests';
 import { filterNode } from './imagesclientside';
-import { debounce } from './utils/events.js';
 import { hideEl, showEl } from './utils/dom.js';
 
 function handleError(response) {
@@ -37,39 +36,21 @@ function commentReply(user, url, textarea, quote) {
   textarea.focus();
 }
 
-/**
- * Stores the abort controller for the current preview request
- * @type {null|AbortController}
- */
-let previewAbortController = null;
-
-function getPreview(body, anonymous, previewLoading, previewContent) {
+function getPreview(body, anonymous, previewLoading, previewIdle, previewContent) {
   const path = '/posts/preview';
 
   if (typeof body !== 'string') return;
 
-  const trimmedBody = body.trim();
-  if (trimmedBody.length < 1) {
-    previewContent.innerHTML = '';
-    return;
-  }
-
   showEl(previewLoading);
+  hideEl(previewIdle);
 
-  // Abort previous requests if it exists
-  if (previewAbortController) previewAbortController.abort();
-  previewAbortController = new AbortController();
-
-  fetchJson('POST', path, { body, anonymous }, previewAbortController.signal)
+  fetchJson('POST', path, { body, anonymous })
     .then(handleError)
     .then(data => {
       previewContent.innerHTML = data;
       filterNode(previewContent);
-      showEl(previewContent);
+      showEl(previewIdle);
       hideEl(previewLoading);
-    })
-    .finally(() => {
-      previewAbortController = null;
     });
 }
 
@@ -99,34 +80,41 @@ function setupPreviews() {
     textarea = document.querySelector('.js-preview-description');
   }
 
-  const previewLoading = document.querySelector('.communication-preview__loading');
-  const previewContent = document.querySelector('.communication-preview__content');
+  const previewButton = document.querySelector('a[data-click-tab="preview"]');
+  const previewLoading = document.querySelector('.js-preview-loading');
+  const previewIdle = document.querySelector('.js-preview-idle');
+  const previewContent = document.querySelector('.js-preview-content');
   const previewAnon = document.querySelector('.js-preview-anonymous') || false;
 
   if (!textarea || !previewContent) {
     return;
   }
 
+  const getCacheKey = () => {
+    return (previewAnon && previewAnon.checked ? 'anon;' : '') + textarea.value;
+  }
+
+  const previewedTextAttribute = 'data-previewed-text';
   const updatePreview = () => {
-    getPreview(textarea.value, previewAnon && previewAnon.checked, previewLoading, previewContent);
+    const cachedValue = getCacheKey()
+    if (previewContent.getAttribute(previewedTextAttribute) === cachedValue) return;
+    previewContent.setAttribute(previewedTextAttribute, cachedValue);
+
+    getPreview(textarea.value, previewAnon && previewAnon.checked, previewLoading, previewIdle, previewContent);
   };
 
-  const debouncedUpdater = debounce(500, () => {
-    if (previewContent.previewedText === textarea.value) return;
-    previewContent.previewedText = textarea.value;
-
-    updatePreview();
-  });
-
-  textarea.addEventListener('keydown', debouncedUpdater);
-  textarea.addEventListener('focus', debouncedUpdater);
+  previewButton.addEventListener('click', updatePreview);
   textarea.addEventListener('change', resizeTextarea);
   textarea.addEventListener('keyup', resizeTextarea);
 
-  // Fire handler if textarea contains text on page load (e.g. editing)
-  if (textarea.value) textarea.dispatchEvent(new Event('keydown'));
+  // Fire handler for automatic resizing if textarea contains text on page load (e.g. editing)
+  if (textarea.value) textarea.dispatchEvent(new Event('change'));
 
-  previewAnon && previewAnon.addEventListener('click', updatePreview);
+  previewAnon && previewAnon.addEventListener('click', () => {
+    if (previewContent.classList.contains('hidden')) return;
+
+    updatePreview();
+  });
 
   document.addEventListener('click', event => {
     if (event.target && event.target.closest('.post-reply')) {
diff --git a/assets/js/utils/events.js b/assets/js/utils/events.js
index 606702c3..51c46a13 100644
--- a/assets/js/utils/events.js
+++ b/assets/js/utils/events.js
@@ -22,22 +22,3 @@ export function delegate(node, event, selectors) {
     }
   });
 }
-
-/**
- * Runs the provided `func` if it hasn't been called for at least `time` ms
- * @template {(...any[]) => any} T
- * @param {number} time
- * @param {T} func
- * @return {T}
- */
-export function debounce(time, func) {
-  let timerId = null;
-
-  return function(...args) {
-    // Cancels the setTimeout method execution
-    timerId && clearTimeout(timerId);
-
-    // Executes the func after delay time.
-    timerId = setTimeout(() => func(...args), time);
-  };
-}
diff --git a/assets/js/utils/requests.js b/assets/js/utils/requests.js
index ec232903..da0a1524 100644
--- a/assets/js/utils/requests.js
+++ b/assets/js/utils/requests.js
@@ -2,7 +2,7 @@
  * Request Utils
  */
 
-function fetchJson(verb, endpoint, body, signal) {
+function fetchJson(verb, endpoint, body) {
   const data = {
     method: verb,
     credentials: 'same-origin',
@@ -11,7 +11,6 @@ function fetchJson(verb, endpoint, body, signal) {
       'x-csrf-token': window.booru.csrfToken,
       'x-requested-with': 'xmlhttprequest'
     },
-    signal,
   };
 
   if (body) {
diff --git a/lib/philomena_web/templates/markdown/_input.html.slime b/lib/philomena_web/templates/markdown/_input.html.slime
index ad806cdb..96f10bb7 100644
--- a/lib/philomena_web/templates/markdown/_input.html.slime
+++ b/lib/philomena_web/templates/markdown/_input.html.slime
@@ -3,25 +3,22 @@
 - action_icon = assigns[:action_icon] || 'edit'
 - field_name = assigns[:name] || :body
 - field_placeholder = assigns[:placeholder] || "Your message"
-.block__content.block--split
-  .block__column--full.js-preview-input-wrapper
-    .block__column__header
-      i.fa> class="fa-#{action_icon}"
-      = action_text
+.block__header.block__header--js-tabbed
+  a.selected href="#" data-click-tab="write"
+    i.fa> class="fa-#{action_icon}"
+    = action_text
 
-    = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
-    = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
+  a href="#" data-click-tab="preview"
+    i.fa.fa-cog.fa-fw.fa-spin.js-preview-loading.hidden> title=raw('Loading preview&hellip;')
+    i.fa.fa-eye.fa-fw.js-preview-idle>
+    | Preview
 
-    .field
-      = textarea form, field_name, class: "input input--wide input--text input--resize-vertical js-toolbar-input js-preview-input", placeholder: field_placeholder, required: true
-      = error_tag form, field_name
+.block__tab.communication-edit__tab.selected.js-preview-input-wrapper data-tab="write"
+  = render PhilomenaWeb.MarkdownView, "_help.html", conn: @conn
+  = render PhilomenaWeb.MarkdownView, "_toolbar.html", conn: @conn
 
-  .block__column--half.hidden.communication-preview.js-preview-output-wrapper
-    .block__column__header.flex.flex--spaced-out
-      span
-        i.fa.fa-eye>
-        ' Preview
-      span.communication-preview__loading.hidden
-        i.fa.fa-spin.fa-fw.fa-cog> title=raw('Loading preview&hellip;')
+  .field
+    = textarea form, field_name, class: "input input--wide input--text input--resize-vertical js-toolbar-input js-preview-input", placeholder: field_placeholder, required: true
+    = error_tag form, field_name
 
-    .communication-preview__content
+.block__tab.communication-edit__tab.hidden.js-preview-content data-tab="preview"

From 27efab9f8f5273349695d3845f6920ca0947204f Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Wed, 29 Sep 2021 20:07:36 +0200
Subject: [PATCH 5/7] update syntax quick reference for subscript

---
 lib/philomena_web/templates/markdown/_help.html.slime | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/philomena_web/templates/markdown/_help.html.slime b/lib/philomena_web/templates/markdown/_help.html.slime
index a69338a4..824ae220 100644
--- a/lib/philomena_web/templates/markdown/_help.html.slime
+++ b/lib/philomena_web/templates/markdown/_help.html.slime
@@ -9,7 +9,7 @@
     ins> __underline__
     del> ~~strike~~
     sup> ^sup^
-    sub ~sub~
+    sub %sub%
 
   button< class="button" type="button" data-click-toggle="button:hover + .textile_help, button:focus + .textile_help"
     ' &hellip;

From 78c3db8f651d4581b72cf07c89f76d624af18744 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Wed, 29 Sep 2021 20:16:10 +0200
Subject: [PATCH 6/7] replace syntax quick reference expansion with markdown
 page link

---
 .../templates/markdown/_help.html.slime       | 23 +++----------------
 1 file changed, 3 insertions(+), 20 deletions(-)

diff --git a/lib/philomena_web/templates/markdown/_help.html.slime b/lib/philomena_web/templates/markdown/_help.html.slime
index 824ae220..111a5aa3 100644
--- a/lib/philomena_web/templates/markdown/_help.html.slime
+++ b/lib/philomena_web/templates/markdown/_help.html.slime
@@ -11,23 +11,6 @@
     sup> ^sup^
     sub %sub%
 
-  button< class="button" type="button" data-click-toggle="button:hover + .textile_help, button:focus + .textile_help"
-    ' &hellip;
-
-  p.hidden.textile_help
-    ' Escape formatting using \ e.g. \* for a literal star character
-    br
-
-    ins> Links:
-    ' [On-site link](/some-link), [External link](http://some-link)
-    br
-
-    ins> Images:
-    ' &gt;&gt;1 — link to image, &gt;&gt;1t — embed image thumbnail (&gt;&gt;1p — large preview, &gt;&gt;1s &mdash; small thumbnail)
-    br
-
-    ins> External images:
-    ' ![alt text](http://some-image), [![alt text](http://some-clickable-image)](http://some-link)
-    br
-
-    strong> Remember to use embeds (&gt;&gt;) for booru images as these let users filter content they don't want to see
+  p
+    a href="/pages/markdown"
+      ' Detailed syntax guide

From 53b087b5760bc24559d496449392b00ec7158ff7 Mon Sep 17 00:00:00 2001
From: SeinopSys <seinopsys@protonmail.com>
Date: Wed, 29 Sep 2021 20:38:27 +0200
Subject: [PATCH 7/7] add icon in front of markdown page link and make it bold

---
 lib/philomena_web/templates/markdown/_help.html.slime | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/philomena_web/templates/markdown/_help.html.slime b/lib/philomena_web/templates/markdown/_help.html.slime
index 111a5aa3..e2838ea3 100644
--- a/lib/philomena_web/templates/markdown/_help.html.slime
+++ b/lib/philomena_web/templates/markdown/_help.html.slime
@@ -13,4 +13,5 @@
 
   p
     a href="/pages/markdown"
-      ' Detailed syntax guide
+      i.fa.fa-question-circle>
+      strong Detailed syntax guide