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..774ae23e 100644 --- a/assets/css/common/_blocks.scss +++ b/assets/css/common/_blocks.scss @@ -222,3 +222,7 @@ a.block__header--single-item, .block__header a { display: none; } } + +.block__content--top-border { + border-top: $border; +} 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/js/markdowntoolbar.js b/assets/js/markdowntoolbar.js new file mode 100644 index 00000000..0056f807 --- /dev/null +++ b/assets/js/markdowntoolbar.js @@ -0,0 +1,250 @@ +/** + * 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'); + + 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 }; diff --git a/assets/js/preview.js b/assets/js/preview.js index 068120ba..757ef52b 100644 --- a/assets/js/preview.js +++ b/assets/js/preview.js @@ -1,9 +1,10 @@ /** - * Textile previews (posts, comments, messages) + * Markdown previews (posts, comments, messages) */ import { fetchJson } from './utils/requests'; import { filterNode } from './imagesclientside'; +import { hideEl, showEl } from './utils/dom.js'; function handleError(response) { const errorMessage = '
Preview failed to load!
'; @@ -35,43 +36,84 @@ function commentReply(user, url, textarea, quote) { textarea.focus(); } -function getPreview(body, anonymous, previewTab, isImage = false) { - let path = '/posts/preview'; +function getPreview(body, anonymous, previewLoading, previewIdle, previewContent) { + const path = '/posts/preview'; + + if (typeof body !== 'string') return; + + showEl(previewLoading); + hideEl(previewIdle); fetchJson('POST', path, { body, anonymous }) .then(handleError) .then(data => { - previewTab.innerHTML = data; - filterNode(previewTab); + previewContent.innerHTML = data; + filterNode(previewContent); + showEl(previewIdle); + hideEl(previewLoading); }); } +/** + * Resizes the event target