@atlaskit/editor-plugin-text-formatting
Version:
Text-formatting plugin for @atlaskit/editor-core
210 lines (200 loc) • 7.85 kB
JavaScript
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, PUNC, SYMBOL } from '@atlaskit/editor-common/analytics';
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import { createRule, inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
import { Selection } from '@atlaskit/editor-prosemirror/state';
import { createPlugin } from '@atlaskit/prosemirror-input-rules';
// We don't agressively upgrade single quotes to smart quotes because
// they may clash with an emoji. Only do that when we have a matching
// single quote, or a contraction.
// wrapped text
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const WRAPPED_SINGLE_QUOTE_REGEX = /(\s|^)'(\S+.*\S+)'$/;
// apostrophe
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const APOSTROPHE_REGEX = /(\w+)(')(\w+)$/;
// Product rules
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const ATLASSIAN_REGEX = /(\s+|^)(atlassian)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const JIRA_REGEX = /(\s+|^)(jira|JIRA)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const BITBUCKET_REGEX = /(\s+|^)(bitbucket|BitBucket)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const HIPCHAT_REGEX = /(\s+|^)(hipchat|HipChat)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const TRELLO_REGEX = /(\s+|^)(trello)(\s)$/;
// Symbol rules
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const ARROW_RIGHT_REGEX = /(\s+|^)(--?>)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const ARROW_LEFT_REGEX = /(\s+|^)(<--?)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const ARROW_DOUBLE_REGEX = /(\s+|^)(<->?)(\s)$/;
// Punctuation rules
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const DASH_REGEX = /(\s+|^)(--)(\s)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const ELLIPSIS_REGEX = /()(\.\.\.)$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const OPEN_DOUBLE_QUOTE_REGEX = /((?:^|[\s\{\[\(\<'"\u2018\u201C]))(")$/;
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const CLOSE_DOUBLE_QUOTE_REGEX = /"$/;
/**
* Creates an InputRuleHandler that will match on a regular expression of the
* form `(prefix, content, suffix?)`, and replace it with some given text,
* maintaining prefix and suffix around the replacement.
*
* @param text text to replace with
*/
function replaceTextUsingCaptureGroup(text) {
return (state, match, start, end) => {
const [, prefix,, suffix] = match;
const replacement = text + (suffix || '');
const {
tr,
selection: {
$to
}
} = state;
const startPos = start + (prefix || '').length;
const safePos = Math.min(
// I know it is almost impossible to have a negative value at this point.
// But, this is JS #trustnoone
Math.max(startPos, 0), end);
tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
tr.setSelection(Selection.near(tr.doc.resolve(tr.selection.to)));
return tr;
};
}
function createReplacementRule(to, from) {
return createRule(from, replaceTextUsingCaptureGroup(to));
}
/**
* Create replacement rules fiven a replacement map
* @param replMap - Replacement map
* @param trackingEventName - Analytics V2 tracking event name
* @param replacementRuleWithAnalytics - Analytics GAS V3 middleware for replacement and rules.
*/
function createReplacementRules(replMap, replacementRuleWithAnalytics) {
return Object.keys(replMap).map(replacement => {
const regex = replMap[replacement];
const rule = createReplacementRule(replacement, regex);
if (replacementRuleWithAnalytics) {
return replacementRuleWithAnalytics(replacement)(rule);
}
return rule;
});
}
// We don't agressively upgrade single quotes to smart quotes because
// they may clash with an emoji. Only do that when we have a matching
// single quote, or a contraction.
function createSingleQuotesRules() {
return [
// wrapped text
createRule(WRAPPED_SINGLE_QUOTE_REGEX, (state, match, start, end) => {
const OPEN_SMART_QUOTE_CHAR = '‘';
const CLOSED_SMART_QUOTE_CHAR = '’';
const [, spacing, innerContent] = match;
// Edge case where match begins with some spacing. We need to add
// it back to the document
const openQuoteReplacement = spacing + OPEN_SMART_QUOTE_CHAR;
// End is not always where the closed quote is, edge case exists
// when there is spacing after the closed quote. We need to
// determine position of closed quote from the start position.
const positionOfClosedQuote = start + openQuoteReplacement.length + innerContent.length;
return state.tr.insertText(CLOSED_SMART_QUOTE_CHAR, positionOfClosedQuote, end).insertText(openQuoteReplacement, start, start + openQuoteReplacement.length);
}),
// apostrophe
createReplacementRule('’', APOSTROPHE_REGEX)];
}
/**
* Get replacement rules related to product
*/
function getProductRules(editorAnalyticsAPI) {
const productRuleWithAnalytics = product => inputRuleWithAnalytics((_, match) => ({
action: ACTION.SUBSTITUTED,
actionSubject: ACTION_SUBJECT.TEXT,
actionSubjectId: ACTION_SUBJECT_ID.PRODUCT_NAME,
eventType: EVENT_TYPE.TRACK,
attributes: {
product,
originalSpelling: match[2]
}
}), editorAnalyticsAPI);
return createReplacementRules({
Atlassian: ATLASSIAN_REGEX,
Jira: JIRA_REGEX,
Bitbucket: BITBUCKET_REGEX,
Hipchat: HIPCHAT_REGEX,
Trello: TRELLO_REGEX
}, productRuleWithAnalytics);
}
/**
* Get replacement rules related to symbol
*/
function getSymbolRules(editorAnalyticsAPI) {
const symbolToString = {
'→': SYMBOL.ARROW_RIGHT,
'←': SYMBOL.ARROW_LEFT,
'↔︎': SYMBOL.ARROW_DOUBLE
};
const symbolRuleWithAnalytics = symbol => inputRuleWithAnalytics({
action: ACTION.SUBSTITUTED,
actionSubject: ACTION_SUBJECT.TEXT,
actionSubjectId: ACTION_SUBJECT_ID.SYMBOL,
eventType: EVENT_TYPE.TRACK,
attributes: {
symbol: symbolToString[symbol]
}
}, editorAnalyticsAPI);
return createReplacementRules({
'→': ARROW_RIGHT_REGEX,
'←': ARROW_LEFT_REGEX,
'↔︎': ARROW_DOUBLE_REGEX
}, symbolRuleWithAnalytics);
}
/**
* Get replacement rules related to punctuation
*/
function getPunctuationRules(editorAnalyticsAPI) {
const punctuationToString = {
'–': PUNC.DASH,
'…': PUNC.ELLIPSIS,
'”': PUNC.QUOTE_DOUBLE,
[PUNC.QUOTE_SINGLE]: PUNC.QUOTE_SINGLE
};
const punctuationRuleWithAnalytics = punctuation => inputRuleWithAnalytics({
action: ACTION.SUBSTITUTED,
actionSubject: ACTION_SUBJECT.TEXT,
actionSubjectId: ACTION_SUBJECT_ID.PUNC,
eventType: EVENT_TYPE.TRACK,
attributes: {
punctuation: punctuationToString[punctuation]
}
}, editorAnalyticsAPI);
const dashEllipsisRules = createReplacementRules({
'–': DASH_REGEX,
'…': ELLIPSIS_REGEX
}, punctuationRuleWithAnalytics);
const doubleQuoteRules = createReplacementRules({
'“': OPEN_DOUBLE_QUOTE_REGEX,
'”': CLOSE_DOUBLE_QUOTE_REGEX
}, punctuationRuleWithAnalytics);
const singleQuoteRules = createSingleQuotesRules();
return [...dashEllipsisRules, ...doubleQuoteRules, ...singleQuoteRules.map(rule => punctuationRuleWithAnalytics(PUNC.QUOTE_SINGLE)(rule))];
}
export default (editorAnalyticsAPI => new SafePlugin(createPlugin('text-formatting:smart-input', [...getProductRules(editorAnalyticsAPI), ...getSymbolRules(editorAnalyticsAPI), ...getPunctuationRules(editorAnalyticsAPI)])));