@atlaskit/editor-plugin-help-dialog
Version:
Help Dialog plugin for @atlaskit/editor-core
742 lines (741 loc) • 23.9 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, askAIQuickInsert, clearFormatting, decreaseMediaSize, dragToMoveDown, dragToMoveLeft, dragToMoveRight, dragToMoveUp, focusTableResizer, showElementDragHandle, focusToContextMenuTrigger, increaseMediaSize, insertRule, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redoAlt, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleSmallText, toggleHighlightPalette, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, tableMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Box, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { shortcutsArray } from './styles';
var codeSm = xcss({
backgroundColor: 'color.background.neutral',
borderRadius: 'radius.small',
width: "var(--ds-space-300, 24px)",
display: 'inline-block',
height: "var(--ds-space-300, 24px)",
lineHeight: "var(--ds-space-300, 24px)",
textAlign: 'center'
});
var codeMd = xcss({
backgroundColor: 'color.background.neutral',
borderRadius: 'radius.small',
display: 'inline-block',
height: "var(--ds-space-300, 24px)",
lineHeight: "var(--ds-space-300, 24px)",
width: '50px',
textAlign: 'center'
});
var codeLg = xcss({
borderRadius: 'radius.small',
display: 'inline-block',
height: "var(--ds-space-300, 24px)",
lineHeight: "var(--ds-space-300, 24px)",
textAlign: 'center',
paddingInline: 'space.150',
backgroundColor: 'color.background.neutral'
});
var navigationKeymaps = function navigationKeymaps(_ref) {
var formatMessage = _ref.formatMessage;
return [{
name: formatMessage(toolbarMessages.navigateToEditorToolbar),
type: 'navigation',
keymap: function keymap() {
return navToEditorToolbar;
}
}, {
name: formatMessage(toolbarMessages.navigateToFloatingToolbar),
type: 'navigation',
keymap: function keymap() {
return navToFloatingToolbar;
}
}];
};
export var formatting = function formatting(_ref2) {
var formatMessage = _ref2.formatMessage;
return [{
name: formatMessage(toolbarMessages.bold),
type: 'strong',
keymap: function keymap() {
return toggleBold;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "**", jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, toolbarMessages.bold), "**"));
}
}, {
name: formatMessage(toolbarMessages.italic),
type: 'em',
keymap: function keymap() {
return toggleItalic;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "*", jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, toolbarMessages.italic), "*"));
}
}, {
name: formatMessage(toolbarMessages.underline),
type: 'underline',
keymap: function keymap() {
return toggleUnderline;
}
}, {
name: formatMessage(toolbarMessages.strike),
type: 'strike',
keymap: function keymap() {
return toggleStrikethrough;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "~~", jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, toolbarMessages.strike), "~~"));
}
}, {
name: formatMessage(toolbarMessages.subscript),
type: 'subsup',
keymap: function keymap() {
return toggleSubscript;
}
}, {
name: formatMessage(toolbarMessages.superscript),
type: 'subsup',
keymap: function keymap() {
return toggleSuperscript;
}
}, {
name: formatMessage(blockTypeMessages.heading1),
type: 'heading',
keymap: function keymap() {
return toggleHeading1;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeSm
}, "#"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.heading2),
type: 'heading',
keymap: function keymap() {
return toggleHeading2;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "##"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.heading3),
type: 'heading',
keymap: function keymap() {
return toggleHeading3;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "###"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.heading4),
type: 'heading',
keymap: function keymap() {
return toggleHeading4;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "####"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.heading5),
type: 'heading',
keymap: function keymap() {
return toggleHeading5;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "#####"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.heading6),
type: 'heading',
keymap: function keymap() {
return toggleHeading6;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "######"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.normal),
type: 'paragraph',
keymap: function keymap() {
return setNormalText;
}
}].concat(_toConsumableArray(expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? [{
name: formatMessage(blockTypeMessages.smallText),
type: 'fontSize',
keymap: function keymap() {
return toggleSmallText;
}
}] : []), [{
name: formatMessage(listMessages.orderedList),
type: 'orderedList',
keymap: function keymap() {
return toggleOrderedList;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeSm
}, "1."), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(listMessages.unorderedList),
type: 'bulletList',
keymap: function keymap() {
return toggleBulletList;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeSm
}, "*"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.blockquote),
type: 'blockquote',
keymap: function keymap() {
return toggleBlockQuote;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, '>'), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(blockTypeMessages.codeblock),
type: 'codeBlock',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "```"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
type: 'rule',
keymap: function keymap() {
return insertRule;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "---"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.link),
type: 'link',
keymap: function keymap() {
return addLink;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "[", jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, toolbarInsertBlockMessages.link), "](http://a.com)"));
}
}, {
name: formatMessage(toolbarMessages.code),
type: 'code',
keymap: function keymap() {
return toggleCode;
},
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "`", jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, toolbarMessages.code), "`"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.action),
type: 'taskItem',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeSm
}, "[]"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.decision),
type: 'decisionItem',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeSm
}, "<>"), ' ', jsx(Box, {
as: "span",
xcss: codeLg
}, "Space"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.emoji),
type: 'emoji',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, ":"));
}
}, {
name: formatMessage(toolbarInsertBlockMessages.mention),
type: 'mention',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "@"));
}
}, {
name: formatMessage(alignmentMessages.alignLeft),
type: 'alignment',
keymap: function keymap() {
return alignLeft;
}
}, {
name: formatMessage(alignmentMessages.alignCenter),
type: 'alignment',
keymap: function keymap() {
return alignCenter;
}
}, {
name: formatMessage(alignmentMessages.alignRight),
type: 'alignment',
keymap: function keymap() {
return alignRight;
}
}]);
};
var quickInsertAskAI = function quickInsertAskAI(_ref3) {
var formatMessage = _ref3.formatMessage;
return {
name: formatMessage(toolbarMessages.askAI),
type: 'AI',
keymap: function keymap() {
return askAIQuickInsert;
}
};
};
var otherFormatting = function otherFormatting(_ref4) {
var formatMessage = _ref4.formatMessage;
var browser = getBrowserInfo();
return [{
name: formatMessage(toolbarMessages.clearFormatting),
type: 'clearFormatting',
keymap: function keymap() {
return clearFormatting;
}
}, {
name: formatMessage(undoRedoMessages.undo),
type: 'undo',
keymap: function keymap() {
return undo;
}
}, {
name: formatMessage(undoRedoMessages.redo),
type: 'redo',
keymap: function keymap() {
return redoAlt;
}
}, {
name: formatMessage(messages.pastePlainText),
type: 'paste',
keymap: function keymap() {
return pastePlainText;
}
}, {
name: formatMessage(annotationMessages.createComment),
type: 'annotation',
keymap: function keymap() {
return addInlineComment;
}
}, {
name: formatMessage(messages.CheckUncheckActionItem),
type: 'checkbox',
keymap: function keymap() {
return toggleTaskItemCheckbox;
}
}, {
name: formatMessage(messages.selectTableRow),
type: 'table',
autoFormatting: function autoFormatting() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("span", {
css: shortcutsArray
}, jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, "Shift"), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "\u2190")), jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, "Shift"), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "\u2192")))
);
}
}, {
name: formatMessage(messages.selectTableColumn),
type: 'table',
autoFormatting: function autoFormatting() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("span", {
css: shortcutsArray
}, jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, "Shift"), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "\u2191")), jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, "Shift"), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "\u2193")))
);
}
}].concat([{
name: formatMessage(messages.InsertTableColumn),
type: 'table',
autoFormatting: function autoFormatting() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("span", {
css: shortcutsArray
}, jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "=")), jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "-")))
);
}
}, {
name: formatMessage(messages.InsertTableRow),
type: 'table',
autoFormatting: function autoFormatting() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("span", {
css: shortcutsArray
}, jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "]")), jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "[")))
);
}
}], [{
name: formatMessage(messages.selectColumnResize),
type: 'table',
autoFormatting: function autoFormatting() {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
jsx("span", {
css: shortcutsArray
}, jsx("span", null, jsx(Box, {
as: "span",
xcss: browser.mac ? codeSm : codeMd
}, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx(Box, {
as: "span",
xcss: codeMd
}, "Shift"), ' + ', jsx(Box, {
as: "span",
xcss: codeSm
}, "C")))
);
}
}], [{
name: formatMessage(messages.highlightColor),
type: 'highlight',
keymap: function keymap() {
return toggleHighlightPalette;
}
}]);
};
var resizeInformationFormatting = function resizeInformationFormatting(_ref5) {
var formatMessage = _ref5.formatMessage;
return [{
name: formatMessage(messages.increaseSize),
type: 'media',
keymap: function keymap() {
return increaseMediaSize;
}
}, {
name: formatMessage(messages.decreaseSize),
type: 'media',
keymap: function keymap() {
return decreaseMediaSize;
}
}];
};
var newResizeInformationFormatting = function newResizeInformationFormatting(_ref6) {
var formatMessage = _ref6.formatMessage;
return [{
name: formatMessage(messages.increaseElementSize),
type: 'media',
keymap: function keymap() {
return increaseMediaSize;
}
}, {
name: formatMessage(messages.decreaseElementSize),
type: 'media',
keymap: function keymap() {
return decreaseMediaSize;
}
}];
};
var focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref7) {
var formatMessage = _ref7.formatMessage;
return [{
name: formatMessage(messages.focusTableResizeHandle),
type: 'navigation',
keymap: function keymap() {
return focusTableResizer;
}
}];
};
// 'navigation' is used as the type for these entries because Format.type is designed to match ADF
// schema node/mark names — these shortcuts have no corresponding ADF type, so 'navigation' acts as
// a catch-all that passes the schema filter and routes entries to the keyboard shortcuts column in the UI.
var blockControlsShortcutsFormatting = function blockControlsShortcutsFormatting(_ref8) {
var formatMessage = _ref8.formatMessage;
return [{
name: formatMessage(messages.selectDragHandle),
type: 'navigation',
keymap: function keymap() {
return showElementDragHandle;
}
}, {
name: formatMessage(messages.moveSelectionUp),
type: 'navigation',
keymap: function keymap() {
return dragToMoveUp;
}
}, {
name: formatMessage(messages.moveSelectionDown),
type: 'navigation',
keymap: function keymap() {
return dragToMoveDown;
}
}, {
name: formatMessage(messages.moveSelectionLeft),
type: 'navigation',
keymap: function keymap() {
return dragToMoveLeft;
}
}, {
name: formatMessage(messages.moveSelectionRight),
type: 'navigation',
keymap: function keymap() {
return dragToMoveRight;
}
}];
};
var moveTableRowColumnFormatting = function moveTableRowColumnFormatting(_ref9) {
var formatMessage = _ref9.formatMessage;
return [{
name: formatMessage(tableMessages.moveColumnLeftHelpDialogLabel),
type: 'table',
keymap: function keymap() {
return moveColumnLeft;
}
}, {
name: formatMessage(tableMessages.moveColumnRightHelpDialogLabel),
type: 'table',
keymap: function keymap() {
return moveColumnRight;
}
}, {
name: formatMessage(tableMessages.moveRowUpHelpDialogLabel),
type: 'table',
keymap: function keymap() {
return moveRowUp;
}
}, {
name: formatMessage(tableMessages.moveRowDownHelpDialogLabel),
type: 'table',
keymap: function keymap() {
return moveRowDown;
}
}];
};
var openCellOptionsFormattingtoFormat = function openCellOptionsFormattingtoFormat(_ref0) {
var formatMessage = _ref0.formatMessage;
return [{
name: formatMessage(messages.openCellOptions),
type: 'image',
keymap: function keymap() {
return focusToContextMenuTrigger;
}
}];
};
var imageAutoFormat = {
name: 'Image',
type: 'image',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, ""));
}
};
var quickInsertAutoFormat = function quickInsertAutoFormat(_ref1) {
var formatMessage = _ref1.formatMessage;
return {
name: formatMessage(messages.quickInsert),
type: 'quickInsert',
autoFormatting: function autoFormatting() {
return jsx("span", null, jsx(Box, {
as: "span",
xcss: codeLg
}, "/"));
}
};
};
export var getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled, aiEnabled) {
var supportedBySchema = formatting(intl).filter(function (format) {
return schema.nodes[format.type] || schema.marks[format.type];
});
return [].concat(_toConsumableArray(aiEnabled ? [quickInsertAskAI(intl)] : []), _toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(expValEquals('platform_editor_drag_handle_keyboard_a11y', 'isEnabled', true) ? blockControlsShortcutsFormatting(intl) : []), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(focusTableResizeHandleFormatting(intl)), _toConsumableArray(editorExperiment('platform_editor_breakout_resizing', true) ? newResizeInformationFormatting(intl) : resizeInformationFormatting(intl)), _toConsumableArray(openCellOptionsFormattingtoFormat(intl)), _toConsumableArray(expValEquals('editor-a11y-fy26-keyboard-move-row-column', 'isEnabled', true) ? moveTableRowColumnFormatting(intl) : []));
};