UNPKG

@atlaskit/editor-common

Version:

A package that contains common classes and components for editor and renderer

369 lines (365 loc) • 19.2 kB
"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; }