@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
369 lines (365 loc) • 19.2 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof3 = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "DOWN", {
enumerable: true,
get: function get() {
return _consts.DOWN;
}
});
Object.defineProperty(exports, "HEADING_KEYS", {
enumerable: true,
get: function get() {
return _consts.HEADING_KEYS;
}
});
Object.defineProperty(exports, "KEY_0", {
enumerable: true,
get: function get() {
return _consts.KEY_0;
}
});
Object.defineProperty(exports, "KEY_1", {
enumerable: true,
get: function get() {
return _consts.KEY_1;
}
});
Object.defineProperty(exports, "KEY_2", {
enumerable: true,
get: function get() {
return _consts.KEY_2;
}
});
Object.defineProperty(exports, "KEY_3", {
enumerable: true,
get: function get() {
return _consts.KEY_3;
}
});
Object.defineProperty(exports, "KEY_4", {
enumerable: true,
get: function get() {
return _consts.KEY_4;
}
});
Object.defineProperty(exports, "KEY_5", {
enumerable: true,
get: function get() {
return _consts.KEY_5;
}
});
Object.defineProperty(exports, "KEY_6", {
enumerable: true,
get: function get() {
return _consts.KEY_6;
}
});
Object.defineProperty(exports, "LEFT", {
enumerable: true,
get: function get() {
return _consts.LEFT;
}
});
Object.defineProperty(exports, "RIGHT", {
enumerable: true,
get: function get() {
return _consts.RIGHT;
}
});
exports.ToolTipContent = void 0;
Object.defineProperty(exports, "UP", {
enumerable: true,
get: function get() {
return _consts.UP;
}
});
exports.backspace = exports.altPaste = exports.alignRight = exports.alignLeft = exports.alignCenter = exports.addRowBefore = exports.addRowAfter = exports.addLink = exports.addInlineComment = exports.addColumnBefore = exports.addColumnAfter = exports.addAltText = void 0;
exports.bindKeymapArrayWithCommand = bindKeymapArrayWithCommand;
exports.bindKeymapWithCommand = bindKeymapWithCommand;
exports.bindKeymapWithEditorCommand = bindKeymapWithEditorCommand;
exports.find = exports.escape = exports.enter = exports.deleteRow = exports.deleteKey = exports.deleteColumn = exports.decreaseMediaSize = exports.cut = exports.ctrlBackSpace = exports.copy = exports.clearFormatting = void 0;
exports.findKeyMapForBrowser = findKeyMapForBrowser;
exports.findKeymapByDescription = findKeymapByDescription;
exports.findShortcutByDescription = findShortcutByDescription;
exports.findShortcutByKeymap = findShortcutByKeymap;
exports.forwardDelete = exports.focusTableResizer = void 0;
exports.getAriaKeyshortcuts = getAriaKeyshortcuts;
exports.insertRule = exports.insertNewLine = exports.indentList = exports.indent = exports.increaseMediaSize = void 0;
exports.isCapsLockOnAndModifyKeyboardEvent = isCapsLockOnAndModifyKeyboardEvent;
Object.defineProperty(exports, "keymap", {
enumerable: true,
get: function get() {
return _keymap.keymap;
}
});
exports.makeKeyMapArrayWithCommon = makeKeyMapArrayWithCommon;
exports.makeKeyMapWithCommon = makeKeyMapWithCommon;
exports.makeKeymap = makeKeymap;
exports.toggleOrderedList = exports.toggleItalic = exports.toggleHeading6 = exports.toggleHeading5 = exports.toggleHeading4 = exports.toggleHeading3 = exports.toggleHeading2 = exports.toggleHeading1 = exports.toggleCode = exports.toggleBulletList = exports.toggleBold = exports.toggleBlockQuote = exports.tab = exports.submit = exports.startColumnResizing = exports.splitListItem = exports.splitCodeBlock = exports.space = exports.shiftTab = exports.shiftEnter = exports.shiftBackspace = exports.shiftArrowUp = exports.setNormalText = exports.selectTable = exports.selectRow = exports.selectColumn = exports.redo = exports.previousCell = exports.pastePlainText = exports.paste = exports.outdentList = exports.outdent = exports.openHelp = exports.nextCell = exports.navToFloatingToolbar = exports.navToEditorToolbar = exports.moveUp = exports.moveRowUp = exports.moveRowDown = exports.moveRight = exports.moveLeft = exports.moveDown = exports.moveColumnRight = exports.moveColumnLeft = void 0;
exports.toggleUnderline = exports.toggleTaskItemCheckbox = exports.toggleTable = exports.toggleSuperscript = exports.toggleSubscript = exports.toggleStrikethrough = void 0;
exports.tooltip = tooltip;
exports.undo = void 0;
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _w3cKeyname = require("w3c-keyname");
var _colors = require("@atlaskit/theme/colors");
var _editorCommands = require("../preset/editor-commands");
var _utils = require("../utils");
var _consts = require("./consts");
var _keymap = require("./keymap");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/** @jsx jsx */
var addAltText = exports.addAltText = makeKeyMapWithCommon('Add Alt Text', 'Mod-Alt-y');
var navToEditorToolbar = exports.navToEditorToolbar = makeKeyMapWithCommon('Navigate to editor toolbar', 'Alt-F9');
var navToFloatingToolbar = exports.navToFloatingToolbar = makeKeyMapWithCommon('Navigate to floating toolbar', 'Alt-F10');
var toggleBold = exports.toggleBold = makeKeyMapWithCommon('Bold', 'Mod-b');
var toggleItalic = exports.toggleItalic = makeKeyMapWithCommon('Italic', 'Mod-i');
var toggleUnderline = exports.toggleUnderline = makeKeyMapWithCommon('Underline', 'Mod-u');
var toggleStrikethrough = exports.toggleStrikethrough = makeKeyMapWithCommon('Strikethrough', 'Mod-Shift-s');
var toggleSubscript = exports.toggleSubscript = makeKeyMapWithCommon('Subscript', 'Mod-Shift-,');
var toggleSuperscript = exports.toggleSuperscript = makeKeyMapWithCommon('Superscript', 'Mod-Shift-.');
var toggleCode = exports.toggleCode = makeKeyMapWithCommon('Code', 'Mod-Shift-m');
var pastePlainText = exports.pastePlainText = makeKeyMapWithCommon('Paste Plain Text', 'Mod-Shift-v');
var clearFormatting = exports.clearFormatting = makeKeyMapWithCommon('Clear formatting', 'Mod-\\');
var setNormalText = exports.setNormalText = makeKeyMapWithCommon('Normal text', 'Mod-Alt-0');
var toggleHeading1 = exports.toggleHeading1 = makeKeyMapWithCommon('Heading 1', 'Mod-Alt-1');
var toggleHeading2 = exports.toggleHeading2 = makeKeyMapWithCommon('Heading 2', 'Mod-Alt-2');
var toggleHeading3 = exports.toggleHeading3 = makeKeyMapWithCommon('Heading 3', 'Mod-Alt-3');
var toggleHeading4 = exports.toggleHeading4 = makeKeyMapWithCommon('Heading 4', 'Mod-Alt-4');
var toggleHeading5 = exports.toggleHeading5 = makeKeyMapWithCommon('Heading 5', 'Mod-Alt-5');
var toggleHeading6 = exports.toggleHeading6 = makeKeyMapWithCommon('Heading 6', 'Mod-Alt-6');
var toggleOrderedList = exports.toggleOrderedList = makeKeyMapWithCommon('Numbered list', 'Mod-Shift-7');
var ctrlBackSpace = exports.ctrlBackSpace = makeKeyMapWithCommon('Cmd + Backspace', 'Mod-Backspace');
var toggleBulletList = exports.toggleBulletList = makeKeyMapWithCommon('Bullet list', 'Mod-Shift-8');
var toggleBlockQuote = exports.toggleBlockQuote = makeKeyMapWithCommon('Quote', 'Mod-Shift-9');
var insertNewLine = exports.insertNewLine = makeKeyMapWithCommon('Insert new line', 'Shift-Enter');
var shiftBackspace = exports.shiftBackspace = makeKeyMapWithCommon('Shift Backspace', 'Shift-Backspace');
var splitCodeBlock = exports.splitCodeBlock = makeKeyMapWithCommon('Split code block', 'Enter');
var splitListItem = exports.splitListItem = makeKeyMapWithCommon('Split list item', 'Enter');
var insertRule = exports.insertRule = makeKeyMapWithCommon('Insert horizontal rule', 'Mod-Shift--');
var undo = exports.undo = makeKeyMapWithCommon('Undo', 'Mod-z');
var moveUp = exports.moveUp = makeKeyMapWithCommon('Move up', 'ArrowUp');
var moveDown = exports.moveDown = makeKeyMapWithCommon('Move down', 'ArrowDown');
var moveLeft = exports.moveLeft = makeKeyMapWithCommon('Move left', 'ArrowLeft');
var moveRight = exports.moveRight = makeKeyMapWithCommon('Move right', 'ArrowRight');
var indentList = exports.indentList = makeKeyMapWithCommon('Indent List', 'Tab');
var outdentList = exports.outdentList = makeKeyMapWithCommon('Outdent List', 'Shift-Tab');
var redo = exports.redo = makeKeymap('Redo', 'Ctrl-y', 'Mod-Shift-z');
var openHelp = exports.openHelp = makeKeyMapWithCommon('Open Help', 'Mod-/');
var addLink = exports.addLink = makeKeyMapWithCommon('Link', 'Mod-k');
var addInlineComment = exports.addInlineComment = makeKeyMapWithCommon('Annotate', 'Mod-Alt-c');
var submit = exports.submit = makeKeyMapWithCommon('Submit Content', 'Mod-Enter');
var enter = exports.enter = makeKeyMapWithCommon('Enter', 'Enter');
var shiftEnter = exports.shiftEnter = makeKeyMapWithCommon('Shift Enter', 'Shift-Enter');
var tab = exports.tab = makeKeyMapWithCommon('Tab', 'Tab');
var indent = exports.indent = makeKeyMapWithCommon('Indent', 'Tab');
var outdent = exports.outdent = makeKeyMapWithCommon('Outdent', 'Shift-Tab');
var backspace = exports.backspace = makeKeyMapWithCommon('Backspace', 'Backspace');
var deleteKey = exports.deleteKey = makeKeyMapWithCommon('Delete', 'Delete');
var forwardDelete = exports.forwardDelete = makeKeymap('Forward Delete', '', 'Ctrl-d');
var space = exports.space = makeKeyMapWithCommon('Space', 'Space');
var escape = exports.escape = makeKeyMapWithCommon('Escape', 'Escape');
var nextCell = exports.nextCell = makeKeyMapWithCommon('Next cell', 'Tab');
var previousCell = exports.previousCell = makeKeyMapWithCommon('Previous cell', 'Shift-Tab');
var shiftArrowUp = exports.shiftArrowUp = makeKeyMapWithCommon('Shift ArrowUp', 'Shift-ArrowUp');
var shiftTab = exports.shiftTab = makeKeyMapWithCommon('Shift Tab', 'Shift-Tab');
var toggleTable = exports.toggleTable = makeKeyMapWithCommon('Table', 'Shift-Alt-t');
var focusTableResizer = exports.focusTableResizer = makeKeyMapWithCommon('Focus Table Resizer', 'Mod-Alt-Shift-r');
var addRowBefore = exports.addRowBefore = makeKeyMapWithCommon('Add Row Above', 'Ctrl-Alt-ArrowUp');
var addRowAfter = exports.addRowAfter = makeKeyMapWithCommon('Add Row Below', 'Ctrl-Alt-ArrowDown');
var addColumnAfter = exports.addColumnAfter = makeKeyMapWithCommon('Add Column After', 'Ctrl-Alt-ArrowRight');
var addColumnBefore = exports.addColumnBefore = makeKeyMapWithCommon('Add Column Before', 'Ctrl-Alt-ArrowLeft');
var moveColumnLeft = exports.moveColumnLeft = makeKeyMapWithCommon('Move Column Left', 'Ctrl-Alt-Shift-ArrowLeft');
var moveColumnRight = exports.moveColumnRight = makeKeyMapWithCommon('Move Column Right', 'Ctrl-Alt-Shift-ArrowRight');
var moveRowDown = exports.moveRowDown = makeKeyMapWithCommon('Move Row Down', 'Ctrl-Alt-Shift-ArrowDown');
var moveRowUp = exports.moveRowUp = makeKeyMapWithCommon('Move Row Up', 'Ctrl-Alt-Shift-ArrowUp');
var deleteColumn = exports.deleteColumn = makeKeyMapWithCommon('Delete Column', 'Ctrl-Backspace');
var deleteRow = exports.deleteRow = makeKeyMapWithCommon('Delete Row', 'Ctrl-Backspace');
var startColumnResizing = exports.startColumnResizing = makeKeyMapWithCommon('Activate Column Resize', 'Mod-Alt-Shift-C');
var cut = exports.cut = makeKeyMapWithCommon('Cut', 'Mod-x');
var copy = exports.copy = makeKeyMapWithCommon('Copy', 'Mod-c');
var paste = exports.paste = makeKeyMapWithCommon('Paste', 'Mod-v');
var altPaste = exports.altPaste = makeKeyMapWithCommon('Paste', 'Mod-Shift-v');
var find = exports.find = makeKeyMapWithCommon('Find', 'Mod-f');
var alignLeft = exports.alignLeft = makeKeyMapWithCommon('Align Left', 'Mod-Shift-l');
var alignCenter = exports.alignCenter = makeKeyMapWithCommon('Align Center', 'Mod-Alt-e');
var alignRight = exports.alignRight = makeKeyMapWithCommon('Align Right', 'Mod-Alt-t');
var toggleTaskItemCheckbox = exports.toggleTaskItemCheckbox = makeKeyMapWithCommon('Toggles task item', 'Mod-Alt-Enter');
var selectRow = exports.selectRow = makeKeyMapArrayWithCommon('Select row', ['Mod-Alt-Shift-ArrowLeft', 'Mod-Alt-Shift-ArrowRight']);
var selectColumn = exports.selectColumn = makeKeyMapArrayWithCommon('Select column', ['Mod-Alt-Shift-ArrowDown', 'Mod-Alt-Shift-ArrowUp']);
var selectTable = exports.selectTable = makeKeyMapWithCommon('Select table', 'Mod-a');
var increaseMediaSize = exports.increaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-Alt-]');
var decreaseMediaSize = exports.decreaseMediaSize = makeKeyMapWithCommon('increase image size', 'Mod-Alt-[');
var arrowKeysMap = {
// for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
ARROWLEFT: "\u2190",
ARROWRIGHT: "\u2192",
ARROWUP: "\u2191",
ARROWDOWN: "\u2193"
};
var tooltipShortcutStyle = (0, _react2.css)({
borderRadius: '2px',
backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
padding: "0 ".concat("var(--ds-space-025, 2px)"),
// NOTE: This might not actually do anything: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E
label: 'tooltip-shortcut'
});
function formatShortcut(keymap) {
var shortcut;
if (_utils.browser.mac) {
// for reference: https://wincent.com/wiki/Unicode_representations_of_modifier_keys
shortcut = keymap.mac.replace(/Cmd/i, "\u2318").replace(/Shift/i, "\u21E7").replace(/Ctrl/i, "\u2303").replace(/Alt/i, "\u2325").replace(/Backspace/i, "\u232B").replace(/Enter/i, "\u23CE");
} else {
shortcut = keymap.windows.replace(/Backspace/i, "\u232B");
}
var keys = shortcut.split('-');
var lastKey = keys[keys.length - 1];
if (lastKey.length === 1) {
// capitalise single letters
lastKey = lastKey.toUpperCase();
}
keys[keys.length - 1] = arrowKeysMap[lastKey.toUpperCase()] || lastKey;
return keys.join(_utils.browser.mac ? '' : '+');
}
function tooltip(keymap, description) {
if (keymap) {
var shortcut = formatShortcut(keymap);
return description ? "".concat(description, " ").concat(shortcut) : shortcut;
}
return;
}
var ToolTipContent = exports.ToolTipContent = /*#__PURE__*/_react.default.memo(function (_ref) {
var description = _ref.description,
shortcutOverride = _ref.shortcutOverride,
keymap = _ref.keymap;
var shortcut = shortcutOverride || keymap && formatShortcut(keymap);
return shortcut || description ? (0, _react2.jsx)(_react.Fragment, null, description, shortcut && description && "\xA0", shortcut && (0, _react2.jsx)("span", {
css: tooltipShortcutStyle
}, shortcut)) : null;
});
function findKeymapByDescription(description) {
var matches = ALL.filter(function (keymap) {
return keymap.description.toUpperCase() === description.toUpperCase();
});
return matches[0];
}
function findShortcutByDescription(description) {
var keymap = findKeymapByDescription(description);
if (keymap) {
return findShortcutByKeymap(keymap);
}
return;
}
function findShortcutByKeymap(keymap) {
if (_utils.browser.mac) {
return keymap.mac;
}
return keymap.windows;
}
function getAriaKeyshortcuts(keymap) {
var keyShortcuts;
if (typeof keymap === 'string') {
keyShortcuts = keymap;
} else if ((0, _typeof2.default)(keymap) === 'object') {
keyShortcuts = keymap[_utils.browser.mac ? 'mac' : 'windows'];
}
if (keyShortcuts) {
return keyShortcuts.toLowerCase().split('-').map(function (modifier) {
switch (modifier) {
case 'cmd':
return 'Meta';
case 'ctrl':
return 'Control';
case 'alt':
return 'Alt';
case 'shift':
return 'Shift';
case 'enter':
return 'Enter';
case 'esc':
return 'Esc';
case 'tab':
return 'Tab';
case 'space':
return 'Space';
case 'backspace':
return 'Backspace';
default:
return modifier.split('').join(' ');
}
}).join('+');
} else {
return undefined;
}
}
var ALL = [toggleOrderedList, toggleBulletList, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleCode, setNormalText, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleBlockQuote, insertNewLine, insertRule, splitCodeBlock, splitListItem, redo, undo, find, escape, enter, shiftEnter];
function makeKeymap(description, windows, mac, common) {
return {
description: description,
windows: windows.replace(/Mod/i, 'Ctrl'),
mac: mac.replace(/Mod/i, 'Cmd'),
common: common
};
}
function makeKeyMapWithCommon(description, common) {
var windows = common.replace(/Mod/i, 'Ctrl');
var mac = common.replace(/Mod/i, 'Cmd');
return makeKeymap(description, windows, mac, common);
}
function makeKeyMapArrayWithCommon(description, shortcuts) {
var keymapArray = [];
shortcuts.forEach(function (shortcut) {
keymapArray.push(makeKeyMapWithCommon(description, shortcut));
});
return keymapArray;
}
function combineWithOldCommand(cmd, oldCmd) {
return function (state, dispatch, editorView) {
return oldCmd(state, dispatch) || cmd(state, dispatch, editorView);
};
}
function bindKeymapWithCommand(shortcut, cmd, keymap) {
var oldCmd = keymap[shortcut];
keymap[shortcut] = oldCmd ? combineWithOldCommand(cmd, oldCmd) : cmd;
}
// If there is a need to use the same command with several shortcuts
function bindKeymapArrayWithCommand(shortcutsArray, cmd, keymap) {
shortcutsArray.forEach(function (shortcut) {
return bindKeymapWithCommand(shortcut.common, cmd, keymap);
});
}
function bindKeymapWithEditorCommand(shortcut, cmd, keymap) {
bindKeymapWithCommand(shortcut, (0, _editorCommands.editorCommandToPMCommand)(cmd), keymap);
}
function findKeyMapForBrowser(keyMap) {
if (keyMap) {
if (_utils.browser.mac) {
return keyMap.mac;
}
return keyMap.windows;
}
return;
}
/**
* ED-20175: on windows OS if the capsLock is ON then it registers the key with capital case
* which creates a command (Ctrl-B) and all the keymap bindings are in lower case (Ctrl-b).
*
*/
function isCapsLockOnAndModifyKeyboardEvent(event) {
var keyboardEvent = event;
var name = (0, _w3cKeyname.keyName)(event);
if (event.ctrlKey && event.getModifierState('CapsLock') && !event.getModifierState('Shift') && name.length === 1 && /^[A-Z]/.test(name)) {
keyboardEvent = new KeyboardEvent('keydown', {
key: _w3cKeyname.base[event.keyCode].toLowerCase(),
code: event.code,
ctrlKey: true
});
}
return keyboardEvent;
}