@atlaskit/editor-plugin-help-dialog 1.1.0 → 1.1.2

package/dist/esm/ui/formatting.js

@@ -0,0 +1,484 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { FormattedMessage } from 'react-intl-next';
+import { addInlineComment, addLink, alignCenter, alignLeft, alignRight, clearFormatting, decreaseMediaSize, focusTableResizer, increaseMediaSize, insertRule, navToEditorToolbar, navToFloatingToolbar, pastePlainText, redo, setNormalText, toggleBlockQuote, toggleBold, toggleBulletList, toggleCode, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleItalic, toggleOrderedList, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleTaskItemCheckbox, toggleUnderline, undo } from '@atlaskit/editor-common/keymaps';
+import { alignmentMessages, annotationMessages, blockTypeMessages, listMessages, helpDialogMessages as messages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages } from '@atlaskit/editor-common/messages';
+import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { codeLg, codeMd, codeSm, shortcutsArray } from './styles';
+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("span", {
+        css: codeLg
+      }, "**", jsx(FormattedMessage, toolbarMessages.bold), "**"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.italic),
+    type: 'em',
+    keymap: function keymap() {
+      return toggleItalic;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "*", jsx(FormattedMessage, 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("span", {
+        css: codeLg
+      }, "~~", jsx(FormattedMessage, 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("span", {
+        css: codeSm
+      }, "#"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading2),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading2;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "##"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading3),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading3;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "###"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading4),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading4;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading5),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading5;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "#####"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.heading6),
+    type: 'heading',
+    keymap: function keymap() {
+      return toggleHeading6;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "######"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.normal),
+    type: 'paragraph',
+    keymap: function keymap() {
+      return setNormalText;
+    }
+  }, {
+    name: formatMessage(listMessages.orderedList),
+    type: 'orderedList',
+    keymap: function keymap() {
+      return toggleOrderedList;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "1."), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(listMessages.unorderedList),
+    type: 'bulletList',
+    keymap: function keymap() {
+      return toggleBulletList;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "*"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.blockquote),
+    type: 'blockquote',
+    keymap: function keymap() {
+      return toggleBlockQuote;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, '>'), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(blockTypeMessages.codeblock),
+    type: 'codeBlock',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "```"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
+    type: 'rule',
+    keymap: function keymap() {
+      return insertRule;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "---"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.link),
+    type: 'link',
+    keymap: function keymap() {
+      return addLink;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"));
+    }
+  }, {
+    name: formatMessage(toolbarMessages.code),
+    type: 'code',
+    keymap: function keymap() {
+      return toggleCode;
+    },
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.action),
+    type: 'taskItem',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "[]"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.decision),
+    type: 'decisionItem',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeSm
+      }, "<>"), " ", jsx("span", {
+        css: codeLg
+      }, "Space"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.emoji),
+    type: 'emoji',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, ":"));
+    }
+  }, {
+    name: formatMessage(toolbarInsertBlockMessages.mention),
+    type: 'mention',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "@"));
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignLeft),
+    type: 'alignment',
+    keymap: function keymap() {
+      return alignLeft;
+    }
+  }].concat(_toConsumableArray(getBooleanFF('platform.editor.text-alignment-keyboard-shortcuts') ? [{
+    name: formatMessage(alignmentMessages.alignCenter),
+    type: 'alignment',
+    keymap: function keymap() {
+      return alignCenter;
+    }
+  }, {
+    name: formatMessage(alignmentMessages.alignRight),
+    type: 'alignment',
+    keymap: function keymap() {
+      return alignRight;
+    }
+  }] : []));
+};
+var otherFormatting = function otherFormatting(_ref3) {
+  var formatMessage = _ref3.formatMessage;
+  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 redo;
+    }
+  }, {
+    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 jsx("span", {
+        css: shortcutsArray
+      }, jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "Shift"), ' + ', jsx("span", {
+        css: codeSm
+      }, "\u2190")), jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "Shift"), ' + ', jsx("span", {
+        css: codeSm
+      }, "\u2192")));
+    }
+  }, {
+    name: formatMessage(messages.selectTableColumn),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", {
+        css: shortcutsArray
+      }, jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "Shift"), ' + ', jsx("span", {
+        css: codeSm
+      }, "\u2191")), jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "Shift"), ' + ', jsx("span", {
+        css: codeSm
+      }, "\u2193")));
+    }
+  }].concat(_toConsumableArray(getBooleanFF('platform.editor.a11y-column-resizing_emcvz') ? [{
+    name: formatMessage(messages.selectColumnResize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", {
+        css: shortcutsArray
+      }, jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "Shift"), ' + ', jsx("span", {
+        css: codeSm
+      }, "C")));
+    }
+  }, {
+    name: formatMessage(messages.increaseColumnSize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", {
+        css: shortcutsArray
+      }, jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "[")));
+    }
+  }, {
+    name: formatMessage(messages.decreaseColumnSize),
+    type: 'table',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", {
+        css: shortcutsArray
+      }, jsx("span", null, jsx("span", {
+        css: browser.mac ? codeSm : codeMd
+      }, browser.mac ? '⌘' : 'Ctrl'), ' + ', jsx("span", {
+        css: codeMd
+      }, browser.mac ? 'Opt' : 'Alt'), ' + ', jsx("span", {
+        css: codeMd
+      }, "]")));
+    }
+  }] : []));
+};
+var resizeInformationFormatting = function resizeInformationFormatting(_ref4) {
+  var formatMessage = _ref4.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 focusTableResizeHandleFormatting = function focusTableResizeHandleFormatting(_ref5) {
+  var formatMessage = _ref5.formatMessage;
+  return [{
+    name: formatMessage(messages.focusTableResizeHandle),
+    type: 'navigation',
+    keymap: function keymap() {
+      return focusTableResizer;
+    }
+  }];
+};
+var imageAutoFormat = {
+  name: 'Image',
+  type: 'image',
+  autoFormatting: function autoFormatting() {
+    return jsx("span", null, jsx("span", {
+      css: codeLg
+    }, "![", jsx(FormattedMessage, messages.altText), "](http://www.image.com)"));
+  }
+};
+var quickInsertAutoFormat = function quickInsertAutoFormat(_ref6) {
+  var formatMessage = _ref6.formatMessage;
+  return {
+    name: formatMessage(messages.quickInsert),
+    type: 'quickInsert',
+    autoFormatting: function autoFormatting() {
+      return jsx("span", null, jsx("span", {
+        css: codeLg
+      }, "/"));
+    }
+  };
+};
+var isAnyA11yResizeFeatureFlagEnabled = getBooleanFF('platform.editor.a11y-media-resizing_b5v0o') || getBooleanFF('platform.editor.a11y-table-resizing_uapcv');
+export var getSupportedFormatting = function getSupportedFormatting(schema, intl, imageEnabled, quickInsertEnabled) {
+  var supportedBySchema = formatting(intl).filter(function (format) {
+    return schema.nodes[format.type] || schema.marks[format.type];
+  });
+  return [].concat(_toConsumableArray(navigationKeymaps(intl)), _toConsumableArray(supportedBySchema), _toConsumableArray(imageEnabled ? [imageAutoFormat] : []), _toConsumableArray(quickInsertEnabled ? [quickInsertAutoFormat(intl)] : []), _toConsumableArray(otherFormatting(intl)), _toConsumableArray(isAnyA11yResizeFeatureFlagEnabled ? resizeInformationFormatting(intl) : []), _toConsumableArray(getBooleanFF('platform.editor.a11y-table-resizing_uapcv') ? focusTableResizeHandleFormatting(intl) : []));
+};