philomena/assets/js/markdowntoolbar.js

/**
 * Markdown toolbar
 */

import { $, $$ } 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: wrapSelectionOrLines,
    options: {
      prefix: '`',
      suffix: '`',
      prefixMultiline: '```\n',
      suffixMultiline: '\n```',
      singleWrap: true,
      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' }
  },
  escape: {
    action: escapeSelection,
    options: { escapeChar: '\\' }
  }
};

function getSelections(textarea, linesOnly = false) {
  let { selectionStart, selectionEnd } = textarea,
      selection = textarea.value.substring(selectionStart, selectionEnd),
      leadingSpace = '',
      trailingSpace =  '',
      caret;

  const processLinesOnly = linesOnly instanceof RegExp ? linesOnly.test(selection) : linesOnly;
  if (processLinesOnly) {
    const explorer = /\n/g;
    let startNewlineIndex = 0,
        endNewlineIndex = textarea.value.length;
    while (explorer.exec(textarea.value)) {
      const { lastIndex } = explorer;
      if (lastIndex <= selectionStart) {
        startNewlineIndex = lastIndex;
      }
      else if (lastIndex > selectionEnd) {
        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);
  }
  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 {
    processLinesOnly,
    selectedText: selection,
    beforeSelection: textarea.value.substring(0, selectionStart) + leadingSpace,
    afterSelection: trailingSpace + textarea.value.substring(selectionEnd)
  };
}

function transformSelection(textarea, transformer, 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, processLinesOnly);

  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;
  // Needed for automatic textarea resizing
  textarea.dispatchEvent(new Event('change'));
}

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 = `](${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;
      });
    }

    newText = prefix + newText + suffix;

    return {
      newText,
      caretOffset: emptyText ? prefix.length : newText.length
    };
  });
}

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 = singleWrap
      ? prefix + text.trim() + suffix
      : text.split(/\n/g).map(line => prefix + line.trim() + suffix).join('\n');

    // Force a space at the end of lines with only blockquote markers
    newText = newText.replace(/^((?:>\s+)*)>$/gm, '$1> ');

    return { newText, caretOffset: emptyText ? prefix.length : newText.length };
  }, eachLine);
}

function wrapSelectionOrLines(textarea, options) {
  wrapLines(textarea, options, /\n/);
}

function escapeSelection(textarea, options) {
  transformSelection(textarea, selectedText => {
    const { text = selectedText } = options,
          emptyText = text === '';

    if (emptyText) return;

    const newText = text.replace(/([*_[\]()^`%\\~<>#|])/g, '\\$1');

    return {
      newText,
      caretOffset: newText.length
    };
  });
}

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 toolbar
        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);
  });
}

export { setupToolbar };