Ghost/ghost/admin/lib/koenig-editor/addon/options/text-expansions.js

582 lines
19 KiB
JavaScript
Raw Normal View History

import {run} from '@ember/runloop';
// Text expansions watch text entry events and will look for matches, replacing
// the matches with additional markup, atoms, or cards
// https://github.com/bustlelabs/mobiledoc-kit#responding-to-text-input
export function replaceWithListSection(editor, matches, listTagName) {
let {range, range: {head, head: {section}}} = editor;
let text = section.textUntil(head);
// we don't want to convert to a heading if the user has not just
// finished typing the markdown (eg, they've made a previous
// heading expansion then Cmd-Z'ed it to get the text back then
// starts typing at the end of the heading)
if (text !== matches[0]) {
return;
}
if (section.isListItem) {
if (section.parent.tagName === listTagName) {
return;
}
// toggle all list items to the new list type
editor.run((postEditor) => {
let listRange = section.parent.toRange();
let {post} = editor;
range = range.extend(-(matches[0].length));
postEditor.deleteRange(range);
let cursorListItem;
post.walkMarkerableSections(listRange, (listItem) => {
let isCursorListItem = listItem === section;
let changedListItem = postEditor.changeSectionTagName(listItem, listTagName);
if (isCursorListItem) {
cursorListItem = changedListItem;
}
});
postEditor.setRange(cursorListItem.headPosition().toRange());
});
return;
}
editor.run((postEditor) => {
range = range.extend(-(matches[0].length));
let position = postEditor.deleteRange(range);
postEditor.setRange(position);
postEditor.toggleSection(listTagName);
});
}
function _addMarkdownMarkup(_this, editor, matches, markupStr) {
let {range} = editor;
let match = matches[0].trim();
let mdChars = (match.length - matches[1].length) / 2;
range = range.extend(-(match.length));
editor.run((postEditor) => {
let startPos = postEditor.deleteRange(range.head.toRange().extend(mdChars));
let textRange = startPos.toRange().extend(matches[1].length);
let markup = editor.builder.createMarkup(markupStr);
postEditor.addMarkupToRange(textRange, markup);
let endPos = postEditor.deleteRange(textRange.tail.toRange().extend(mdChars));
postEditor.setRange(endPos.toRange());
});
// must be scheduled so that the toggle isn't reset automatically
// by mobiledoc-kit re-setting state after the range is updated
run.later(_this, function () {
editor.toggleMarkup(markupStr);
}, 10);
}
function _addNonReplacedMarkdownMarkup(_this, editor, matches, markupStr) {
let {range} = editor;
let match = matches[0].trim();
range = range.extend(-(match.length));
editor.run((postEditor) => {
let markup = editor.builder.createMarkup(markupStr);
postEditor.addMarkupToRange(range, markup);
postEditor.setRange(range.tail.toRange());
});
// must be scheduled so that the toggle isn't reset automatically
// by mobiledoc-kit re-setting state after the range is updated
run.later(_this, function () {
editor.toggleMarkup(markupStr);
}, 10);
}
function _matchStrongStar(editor, text) {
let matches = text.match(/(?:^|\s)\*\*([^\s*]+|[^\s*][^*]*[^\s])\*\*$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'strong');
}
}
function _matchStrongUnderscore(editor, text) {
let matches = text.match(/(?:^|\s)__([^\s_]+|[^\s_][^_]*[^\s])__$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'strong');
}
}
function _matchEmStar(editor, text) {
// (?:^|\s) - match beginning of input or a starting space (don't capture)
// \* - match leading *
// ( - start capturing group
// [^\s*]+ - match a stretch with no spaces or * chars
// | - OR
// [^\s*] - match a single non-space or * char | this group will only match at
// [^*]* - match zero or more non * chars | least two chars so we need the
// [^\s] - match a single non-space char | [^\s*]+ to match single chars
// ) - end capturing group
// \* - match trailing *
//
// input = " *foo*"
// matches[0] = " *foo*"
// matches[1] = "foo"
let matches = text.match(/(?:^|\s)\*([^\s*]+|[^\s*][^*]*[^\s])\*$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'em');
}
}
function _matchEmUnderscore(editor, text) {
let matches = text.match(/(?:^|\s)_([^\s_]+|[^\s_][^_]*[^\s])_$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'em');
}
}
function _matchSub(editor, text) {
let matches = text.match(/(^|[^~])~([^\s~]+|[^\s~][^~]*[^\s~])~$/);
if (matches) {
// re-adjust the matches to remove the first matched char if it
// exists, otherwise our length calculations are off. This is
// different to other matchers because we match any char at the
// beginning rather than a blank space and need to allow ~~ for
// the strikethrough expansion
let newMatches = [
matches[1] ? matches[0].replace(matches[1], '').trim() : matches[0],
matches[2]
];
_addMarkdownMarkup(this, editor, newMatches, 'sub');
}
}
function _matchStrikethrough(editor, text) {
let matches = text.match(/(?:^|\s)~~([^\s~]+|[^\s~][^~]*[^\s])~~$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 's');
}
}
function _matchCode(editor, text) {
let matches = text.match(/(?:^|\s)`([^\s`]+|[^\s`][^`]*[^\s`])`$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'code');
}
}
function _matchSup(editor, text) {
let matches = text.match(/\^([^\s^]+|[^\s^][^^]*[^\s^])\^$/);
if (matches) {
_addMarkdownMarkup(this, editor, matches, 'sup');
}
}
function _matchLink(editor, text) {
let {range} = editor;
let matches = text.match(/(?:^|\s)\[([^\s\]]*|[^\s\]][^\]]*[^\s\]])\]\(([^\s)]+|[^\s)][^)]*[^\s)])\)/);
if (matches) {
let url = matches[2];
let linkText = matches[1] || url;
let hasLinkText = !!matches[1];
let match = matches[0].trim();
range = range.extend(-match.length);
editor.run((postEditor) => {
let startPos = postEditor.deleteRange(range.head.toRange().extend(hasLinkText ? 1 : 3));
let textRange = startPos.toRange().extend(linkText.length);
let a = postEditor.builder.createMarkup('a', {href: url});
postEditor.addMarkupToRange(textRange, a);
let remainingRange = textRange.tail.toRange().extend(hasLinkText ? (matches[2] || url).length + 3 : 1);
let endPos = postEditor.deleteRange(remainingRange);
postEditor.setRange(endPos.toRange());
});
// must be scheduled so that the toggle isn't reset automatically
run.schedule('actions', this, function () {
editor.toggleMarkup('a');
});
}
}
function _matchImage(editor, text) {
let matches = text.match(/^!\[(.*?)\]\((.*?)\)$/);
if (matches) {
let {range: {head, head: {section}}} = editor;
let src = matches[2].trim();
let alt = matches[1].trim();
// skip if cursor is not at end of section
if (!head.isTail()) {
return;
}
// mobiledoc lists don't support cards
if (section.isListItem) {
return;
}
editor.run((postEditor) => {
let card = postEditor.builder.createCardSection('image', {src, alt});
// need to check the section before replacing else it will always
// add a trailing paragraph
let needsTrailingParagraph = !section.next;
editor.range.extend(-(matches[0].length));
postEditor.replaceSection(editor.range.headSection, card);
if (needsTrailingParagraph) {
let newSection = editor.builder.createMarkupSection('p');
postEditor.insertSectionAtEnd(newSection);
postEditor.setRange(newSection.tailPosition());
}
});
}
}
function registerDashTextExpansions(mobiledocEditor) {
// --\s = en dash
// ---. = em dash —
// separate to the grouped replacement functions because we're matching on
// the trailing character which can be anything
mobiledocEditor.onTextInput({
name: 'hyphens',
match: /---?.$/,
run(editor) {
let {range} = editor;
let text = editor.range.head.section.textUntil(editor.range.head);
// do not match if we're in code formatting
if (editor.hasActiveMarkup('code') || text.match(/[^\s]?`[^\s]/)) {
return;
}
let ndashMatch = text.match(/[^-]--(\s)$/);
if (ndashMatch) {
let match = ndashMatch[0];
range = range.extend(-(match.length - 1));
if (editor.detectMarkupInRange(range, 'code')) {
return;
}
return editor.run((postEditor) => {
let position = postEditor.deleteRange(range);
postEditor.insertText(position, `${ndashMatch[1]}`);
});
}
let mdashMatch = text.match(/---([^-])$/);
if (mdashMatch) {
let match = mdashMatch[0];
range = range.extend(-(match.length));
if (editor.detectMarkupInRange(range, 'code')) {
return;
}
return editor.run((postEditor) => {
let position = postEditor.deleteRange(range);
postEditor.insertText(position, `${mdashMatch[1]}`);
});
}
}
});
}
function registerInlineMarkdownTextExpansions(mobiledocEditor) {
// We don't want to run all our content rules on every text entry event,
// instead we check to see if this text entry event could match a content
// rule, and only then run the rules. Right now we only want to match
// content ending with *, _, ), ~, and `. This could increase as we support
// more markdown.
mobiledocEditor.onTextInput({
name: 'inline_markdown',
match: /[*_)~`^]$/,
run(editor, matches) {
let text = editor.range.head.section.textUntil(editor.range.head);
switch (matches[0]) {
case '*':
_matchStrongStar(editor, text);
_matchEmStar(editor, text);
break;
case '_':
_matchStrongUnderscore(editor, text);
_matchEmUnderscore(editor, text);
break;
case ')':
_matchLink(editor, text);
_matchImage(editor, text);
break;
case '~':
_matchSub(editor, text);
_matchStrikethrough(editor, text);
break;
case '`':
_matchCode(editor, text);
break;
case '^':
_matchSup(editor, text);
break;
}
}
});
}
export default function (mobiledocEditor, koenig) {
/* block level markdown ------------------------------------------------- */
mobiledocEditor.unregisterTextInputHandler('heading');
mobiledocEditor.onTextInput({
name: 'md_heading',
match: /^(#{1,6}) /,
run(editor, matches) {
let hashes = matches[1];
let headingTag = `h${hashes.length}`;
let {range} = editor;
let text = range.head.section.textUntil(range.head);
// we don't want to convert to a heading if the user has not just
// finished typing the markdown (eg, they've made a previous
// heading expansion then Cmd-Z'ed it to get the text back then
// starts typing at the end of the heading)
if (text !== matches[0]) {
return;
}
editor.run((postEditor) => {
range = range.extend(-(matches[0].length));
let position = postEditor.deleteRange(range);
postEditor.setRange(position);
// toggleHeaderSection will remove all formatting except links
koenig.send('toggleHeaderSection', headingTag, postEditor);
});
}
});
mobiledocEditor.unregisterTextInputHandler('ul');
mobiledocEditor.onTextInput({
name: 'md_ul',
match: /^\* |^- /,
run(editor, matches) {
replaceWithListSection(editor, matches, 'ul');
}
});
mobiledocEditor.unregisterTextInputHandler('ol');
mobiledocEditor.onTextInput({
name: 'md_ol',
match: /^1\.? /,
run(editor, matches) {
replaceWithListSection(editor, matches, 'ol');
}
});
mobiledocEditor.onTextInput({
name: 'md_blockquote',
match: /^> /,
run(editor, matches) {
let {range} = editor;
let {head, head: {section}} = range;
let text = section.textUntil(head);
// ensure cursor is at the end of the matched text so we don't
// convert text the users wants to start with `> ` and that we're
// not already on a blockquote section
if (text === matches[0] && section.tagName !== 'blockquote') {
editor.run((postEditor) => {
range = range.extend(-(matches[0].length));
let position = postEditor.deleteRange(range);
postEditor.setRange(position);
koenig.send('toggleSection', 'blockquote', postEditor);
});
}
}
});
mobiledocEditor.onTextInput({
name: 'md_hr',
match: /^---$/,
run(editor) {
let {range: {head, head: {section}}} = editor;
// Skip if cursor is not at end of section
if (!head.isTail()) {
return;
}
// Skip if section is a list item
if (section.isListItem) {
return;
}
koenig.send('replaceWithCardSection', 'hr', section.toRange());
}
});
mobiledocEditor.onTextInput({
name: 'md_code',
match: /^```([a-zA-Z0-9]*)(\s)$/,
run(editor, matches) {
let {range: {head, head: {section}}} = editor;
let payload = {};
// Skip if cursor is not at end of section
if (!head.isTail()) {
return;
}
// Skip if section is a list item
if (section.isListItem) {
return;
}
if (matches[1]) {
payload.language = matches[1];
}
if (matches[2] === '\n') {
koenig.skipNewline();
}
koenig.send('replaceWithCardSection', 'code', section.toRange(), payload);
}
});
/* non-markdown expansions -----------------------------------------------*/
mobiledocEditor.onTextInput({
name: 'paywall',
match: /^===$/,
run(editor) {
let {range: {head, head: {section}}} = editor;
// Skip if cursor is not at end of section
if (!head.isTail()) {
return;
}
// Skip if section is a list item
if (section.isListItem) {
return;
}
koenig.send('replaceWithCardSection', 'paywall', section.toRange());
}
});
/* inline markdown -------------------------------------------------------*/
// must come after block expansions so that the smart hyphens expansion
// doesn't break the divider card expansion
registerDashTextExpansions(mobiledocEditor);
registerInlineMarkdownTextExpansions(mobiledocEditor);
}
// TODO: reduce duplication
export function registerBasicTextExpansions(mobiledocEditor) {
// unregister mobiledoc-kit's block-level text handlers
mobiledocEditor.unregisterTextInputHandler('heading');
mobiledocEditor.unregisterTextInputHandler('ul');
mobiledocEditor.unregisterTextInputHandler('ol');
registerDashTextExpansions(mobiledocEditor);
registerInlineMarkdownTextExpansions(mobiledocEditor);
}
// TODO: reduce duplication
export function registerTextReplacementTextExpansions(mobiledocEditor, koenig) {
// unregister mobiledoc-kit's block-level text handlers
mobiledocEditor.unregisterTextInputHandler('heading');
mobiledocEditor.unregisterTextInputHandler('ul');
mobiledocEditor.onTextInput({
name: 'md_ul',
match: /^\* |^- /,
run(editor, matches) {
replaceWithListSection(editor, matches, 'ul');
}
});
mobiledocEditor.unregisterTextInputHandler('ol');
mobiledocEditor.onTextInput({
name: 'md_ol',
match: /^1\.? /,
run(editor, matches) {
replaceWithListSection(editor, matches, 'ol');
}
});
mobiledocEditor.onTextInput({
name: 'md_blockquote',
match: /^> /,
run(editor, matches) {
let {range} = editor;
let {head, head: {section}} = range;
let text = section.textUntil(head);
// ensure cursor is at the end of the matched text so we don't
// convert text the users wants to start with `> ` and that we're
// not already on a blockquote section
if (text === matches[0] && section.tagName !== 'blockquote') {
editor.run((postEditor) => {
range = range.extend(-(matches[0].length));
let position = postEditor.deleteRange(range);
postEditor.setRange(position);
koenig.send('toggleSection', 'blockquote', postEditor);
});
}
}
});
// as per registerInlineMarkdownTextExpansions but without ` for code and image matches
mobiledocEditor.onTextInput({
name: 'inline_markdown',
match: /[*_)~^]$/,
run(editor, matches) {
let text = editor.range.head.section.textUntil(editor.range.head);
switch (matches[0]) {
case '*':
_matchStrongStar(editor, text);
_matchEmStar(editor, text);
break;
case '_':
_matchStrongUnderscore(editor, text);
_matchEmUnderscore(editor, text);
break;
case ')':
_matchLink(editor, text);
break;
case '~':
_matchSub(editor, text);
_matchStrikethrough(editor, text);
break;
case '^':
_matchSup(editor, text);
break;
}
}
});
mobiledocEditor.onTextInput({
name: 'text_replacement',
match: /\}$/,
run(editor) {
let text = editor.range.head.section.textUntil(editor.range.head);
let match = text.match(/(?:^|\s)\{([^\s{}]+|[^\s{}][^{}]*[^\s{}])\}$/);
if (match) {
_addNonReplacedMarkdownMarkup(this, editor, match, 'code');
}
}
});
}