@atlaskit/editor-core 153.1.3 → 155.0.0

package/dist/cjs/plugins/mentions/type-ahead/index.js

@@ -47,9 +47,9 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var createInviteItem = function createInviteItem(_ref) {
   var mentionProvider = _ref.mentionProvider,

package/dist/cjs/plugins/mentions/ui/InviteItem/index.js

@@ -44,7 +44,8 @@ var InviteItem = function InviteItem(_ref) {
       onMouseEnter = _ref.onMouseEnter,
       onSelection = _ref.onSelection,
       selected = _ref.selected,
-      userRole = _ref.userRole;
+      userRole = _ref.userRole,
+      intl = _ref.intl;
   var onSelected = (0, _react.useCallback)(function (event) {
     if (leftClick(event) && onSelection) {
       event.preventDefault();
@@ -67,7 +68,7 @@ var InviteItem = function InviteItem(_ref) {
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
   }, /*#__PURE__*/_react.default.createElement(_styles.RowStyle, null, /*#__PURE__*/_react.default.createElement(_styles.AvatarStyle, null, /*#__PURE__*/_react.default.createElement(_add.default, {
-    label: "add-icon",
+    label: intl.formatMessage(_messages.messages.mentionsAddLabel),
     primaryColor: _colors.N300
   })), /*#__PURE__*/_react.default.createElement(_styles.NameSectionStyle, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.messages.inviteItemTitle, {
     values: {
@@ -77,5 +78,6 @@ var InviteItem = function InviteItem(_ref) {
   })))));
 };
 
-var _default = InviteItem;
+var _default = (0, _reactIntlNext.injectIntl)(InviteItem);
+
 exports.default = _default;

package/dist/cjs/plugins/mentions/ui/Mention/index.js

@@ -29,7 +29,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _element = require("@atlaskit/mention/element");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -68,7 +68,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
         mentionProvider: mentionProvider
       }, actionHandlers));
     });
-    _this.providerFactory = props.providers || new _editorCommon.ProviderFactory();
+    _this.providerFactory = props.providers || new _providerFactory.ProviderFactory();
     return _this;
   }
 
@@ -84,7 +84,7 @@ var Mention = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['mentionProvider', 'profilecardProvider'],
         providerFactory: this.providerFactory,
         renderNode: this.renderWithProvider

package/dist/cjs/plugins/mentions/ui/ToolbarMention/index.js

@@ -33,6 +33,10 @@ var _analytics = require("../../../analytics");
 
 var _api = require("../../../type-ahead/api");
 
+var _reactIntlNext = require("react-intl-next");
+
+var _messages = require("../../messages");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -70,15 +74,16 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(ToolbarMention, [{
     key: "render",
     value: function render() {
+      var mentionStringTranslated = this.props.intl.formatMessage(_messages.messages.mentionsIconLabel);
       return /*#__PURE__*/_react.default.createElement(_ToolbarButton.default, {
         testId: this.props.testId,
         buttonId: _ToolbarButton.TOOLBAR_BUTTON.MENTION,
         spacing: "none",
         onClick: this.handleInsertMention,
         disabled: this.props.isDisabled,
-        title: "Mention @",
+        title: mentionStringTranslated + '@',
         iconBefore: /*#__PURE__*/_react.default.createElement(_mention.default, {
-          label: "Mention"
+          label: mentionStringTranslated
         })
       });
     }
@@ -86,4 +91,6 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   return ToolbarMention;
 }(_react.PureComponent);
 
-exports.default = ToolbarMention;
+var _default = (0, _reactIntlNext.injectIntl)(ToolbarMention);
+
+exports.default = _default;

package/dist/cjs/plugins/mobile-dimensions/actions.js

@@ -11,4 +11,5 @@ exports.MobileDimensionsActionTypes = MobileDimensionsActionTypes;
   MobileDimensionsActionTypes["SET_KEYBOARD_HEIGHT"] = "SET_KEYBOARD_HEIGHT";
   MobileDimensionsActionTypes["SET_WINDOW_HEIGHT"] = "SET_WINDOW_HEIGHT";
   MobileDimensionsActionTypes["SET_MOBILE_PADDING_TOP"] = "SET_MOBILE_PADDING_TOP";
+  MobileDimensionsActionTypes["SET_IS_EXPANDED"] = "SET_IS_EXPANDED";
 })(MobileDimensionsActionTypes || (exports.MobileDimensionsActionTypes = MobileDimensionsActionTypes = {}));

package/dist/cjs/plugins/mobile-dimensions/commands.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setWindowHeight = exports.setMobilePaddingTop = exports.setKeyboardHeight = void 0;
+exports.setWindowHeight = exports.setMobilePaddingTop = exports.setKeyboardHeight = exports.setIsExpanded = void 0;
 
 var _actions = require("./actions");
 
@@ -34,4 +34,13 @@ var setMobilePaddingTop = function setMobilePaddingTop(paddingTop) {
   });
 };
 
-exports.setMobilePaddingTop = setMobilePaddingTop;
+exports.setMobilePaddingTop = setMobilePaddingTop;
+
+var setIsExpanded = function setIsExpanded(isExpanded) {
+  return (0, _pluginFactory.createCommand)({
+    type: _actions.MobileDimensionsActionTypes.SET_IS_EXPANDED,
+    isExpanded: isExpanded
+  });
+};
+
+exports.setIsExpanded = setIsExpanded;

package/dist/cjs/plugins/mobile-dimensions/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.MIN_TAP_SIZE_PX = void 0;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
 var _commands = require("./commands");
 
@@ -19,7 +19,8 @@ var getInitialState = function getInitialState() {
   return {
     keyboardHeight: -1,
     mobilePaddingTop: 0,
-    windowHeight: window.innerHeight
+    windowHeight: window.innerHeight,
+    isExpanded: false
   };
 };
 /**
@@ -29,11 +30,29 @@ var getInitialState = function getInitialState() {
 
 var createPlugin = function createPlugin(dispatch) {
   var rafId;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     state: (0, _pluginFactory.createPluginState)(dispatch, getInitialState),
     key: _pluginFactory.mobileDimensionsPluginKey,
+    props: {
+      scrollThreshold: {
+        top: 12,
+        left: 0,
+        right: 0,
+        bottom: 12
+      },
+      scrollMargin: {
+        top: 12,
+        bottom: 12,
+        left: 0,
+        right: 0
+      }
+    },
     view: function view(editorView) {
       var handleResize = function handleResize() {
+        if (rafId) {
+          window.cancelAnimationFrame(rafId);
+        }
+
         var windowInnerHeight = window.innerHeight;
         var count = 0;
 
@@ -49,7 +68,11 @@ var createPlugin = function createPlugin(dispatch) {
             } else {
               rafId = requestAnimationFrame(checkWindowHeight);
             }
+          } else {
+            rafId = requestAnimationFrame(checkWindowHeight);
           }
+
+          windowInnerHeight = window.innerHeight;
         };
 
         rafId = requestAnimationFrame(checkWindowHeight);

package/dist/cjs/plugins/mobile-dimensions/reducer.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _actions = require("./actions");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _default(state, action) {
   switch (action.type) {
@@ -31,6 +31,11 @@ function _default(state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         mobilePaddingTop: action.paddingTop
       });
+
+    case _actions.MobileDimensionsActionTypes.SET_IS_EXPANDED:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isExpanded: action.isExpanded
+      });
   }
 
   return state;

package/dist/cjs/plugins/mobile-selection/content-in-selection.js

@@ -9,12 +9,12 @@ exports.contentInSelection = void 0;
 var contentInSelection = function contentInSelection(_ref) {
   var selection = _ref.selection,
       doc = _ref.doc;
-  var nodes = new Set();
-  var marks = new Set();
+  var nodes = new Array();
+  var marks = new Array();
   doc.nodesBetween(selection.from, selection.to, function (node) {
-    nodes.add(node.type.name);
+    nodes.push(node.type.name);
     node.marks.forEach(function (mark) {
-      return marks.add(mark.type.name);
+      return marks.push(mark.type.name);
     });
     return true;
   });

package/dist/cjs/plugins/mobile-selection/mobile-selection-plugin.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.selectionPluginKey = exports.mobileSelectionPlugin = exports.createProseMirrorPlugin = void 0;
 
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+
 var _prosemirrorState = require("prosemirror-state");
 
 var _prosemirrorUtils = require("prosemirror-utils");
@@ -15,7 +17,7 @@ var selectionPluginKey = new _prosemirrorState.PluginKey('mobile-selection');
 exports.selectionPluginKey = selectionPluginKey;
 
 var createProseMirrorPlugin = function createProseMirrorPlugin(dispatch) {
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       return {

package/dist/cjs/plugins/panel/actions.js

@@ -17,11 +17,11 @@ var _analytics = require("../analytics");
 
 var _utils = require("./utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var removePanel = function removePanel() {
   return function (state, dispatch) {
@@ -74,16 +74,22 @@ var changePanelType = function changePanelType(panelType) {
     var newTr;
 
     if (allowCustomPanel) {
-      var previousColor = panelNode.node.attrs.panelColor || (0, _editorCommon.getPanelTypeBackground)(previousType);
+      var previousColor = panelNode.node.attrs.panelColor || (0, _styles.getPanelTypeBackground)(previousType);
       var previousIcon = panelNode.node.attrs.panelIcon;
+      var previousIconId = panelNode.node.attrs.panelIconId;
+      var previousIconText = panelNode.node.attrs.panelIconText;
 
       var newPanelOptions = _objectSpread({
         color: previousColor,
-        emoji: previousIcon
+        emoji: previousIcon,
+        emojiId: previousIconId,
+        emojiText: previousIconText
       }, panelOptions);
 
       newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
         panelIcon: newPanelOptions.emoji,
+        panelIconId: newPanelOptions.emojiId,
+        panelIconText: newPanelOptions.emojiText,
         panelColor: newPanelOptions.color,
         panelType: panelType
       });

package/dist/cjs/plugins/panel/index.js

@@ -161,6 +161,8 @@ var panelPlugin = function panelPlugin() {
               return insertPanelTypeWithAnalytics({
                 panelType: _adfSchema.PanelType.CUSTOM,
                 panelIcon: ':rainbow:',
+                panelIconId: '1f308',
+                panelIconText: '🌈',
                 panelColor: _colors.T50
               }, state, insert);
             }

package/dist/cjs/plugins/panel/nodeviews/panel.js

@@ -17,34 +17,28 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _prosemirrorModel = require("prosemirror-model");
 
-var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/info"));
-
-var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
-
-var _note = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/note"));
-
-var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warning"));
-
-var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/error"));
-
 var _hint = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/hint"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _emoji = require("@atlaskit/editor-common/emoji");
 
 var _utils = require("../utils");
 
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 
+var _icons = require("@atlaskit/editor-common/icons");
+
 var panelIcons = {
-  info: _info.default,
-  success: _success.default,
-  note: _note.default,
+  info: _icons.PanelInfoIcon,
+  success: _icons.PanelSuccessIcon,
+  note: _icons.PanelNoteIcon,
   tip: _hint.default,
-  warning: _warning.default,
-  error: _error.default,
-  custom: _info.default
+  warning: _icons.PanelWarningIcon,
+  error: _icons.PanelErrorIcon,
+  custom: _icons.PanelInfoIcon
 };
 exports.panelIcons = panelIcons;
 
@@ -53,12 +47,16 @@ var PanelIcon = function PanelIcon(props) {
       providerFactory = props.providerFactory,
       _props$panelAttribute = props.panelAttributes,
       panelType = _props$panelAttribute.panelType,
-      panelIcon = _props$panelAttribute.panelIcon;
+      panelIcon = _props$panelAttribute.panelIcon,
+      panelIconId = _props$panelAttribute.panelIconId,
+      panelIconText = _props$panelAttribute.panelIconText;
 
   if (allowCustomPanel && panelIcon && panelType === _adfSchema.PanelType.CUSTOM) {
-    return /*#__PURE__*/_react.default.createElement(_editorCommon.Emoji, {
+    return /*#__PURE__*/_react.default.createElement(_emoji.Emoji, {
       providers: providerFactory,
       shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
       showTooltip: false,
       allowTextFallback: false,
       fitToHeight: _consts.akEditorCustomIconSize
@@ -88,7 +86,7 @@ var PanelNodeView = /*#__PURE__*/function () {
     this.getPos = getPos;
     this.dom = dom;
     this.contentDOM = contentDOM;
-    this.icon = this.dom.querySelector(".".concat(_editorCommon.PanelSharedCssClassName.icon));
+    this.icon = this.dom.querySelector(".".concat(_styles.PanelSharedCssClassName.icon));
 
     if (!this.icon) {
       return;
@@ -108,7 +106,7 @@ var PanelNodeView = /*#__PURE__*/function () {
     key: "ignoreMutation",
     value: function ignoreMutation(mutation) {
       // ignore mutation if it caused by the icon.
-      return mutation.target === this.icon;
+      return mutation.target === this.icon || mutation.target.parentNode === this.icon;
     }
   }]);
   return PanelNodeView;

package/dist/cjs/plugins/panel/pm-plugins/main.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createPlugin = void 0;
 
-var _prosemirrorState = require("prosemirror-state");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _panel = require("../nodeviews/panel");
 
@@ -18,14 +18,14 @@ var _utils = require("../../selection/utils");
 var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
       useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
-  return new _prosemirrorState.Plugin({
+  return new _safePlugin.SafePlugin({
     key: _types.pluginKey,
     props: {
       nodeViews: {
         panel: (0, _panel.getPanelNodeView)(pluginOptions, providerFactory)
       },
       handleClickOn: (0, _utils.createSelectionClickHandler)(['panel'], function (target) {
-        return !!target.closest(".".concat(_editorCommon.PanelSharedCssClassName.prefix));
+        return !!target.closest(".".concat(_styles.PanelSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection
       })

package/dist/cjs/plugins/panel/styles.js

@@ -11,11 +11,11 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var panelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _editorCommon.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _editorCommon.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.PanelSharedCssClassName.content, _editorCommon.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _editorCommon.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _editorCommon.panelSharedStyles, _editorCommon.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
+var panelStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .", " {\n      cursor: pointer;\n\n      /* Danger when top level node */\n      &.danger {\n        box-shadow: 0 0 0 ", "px\n          ", ";\n        background-color: ", " !important;\n\n        .", " {\n          color: ", " !important;\n        }\n      }\n    }\n\n    .", " {\n      cursor: text;\n    }\n\n    /* Danger when nested node */\n    .danger .", " {\n      &[data-panel-type] {\n        background-color: ", ";\n\n        .", " {\n          color: ", ";\n        }\n      }\n    }\n\n    ", ";\n  }\n\n  .", ".", ":not(.danger) {\n    ", "\n  }\n"])), _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackground, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.PanelSharedCssClassName.content, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _styles.PanelSharedCssClassName.icon, _editorSharedStyles.akEditorDeleteIconColor, _styles.panelSharedStyles, _styles.PanelSharedCssClassName.prefix, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Blanket]));
 exports.panelStyles = panelStyles;

package/dist/cjs/plugins/panel/toolbar.js

@@ -31,7 +31,7 @@ var _decoration = require("../base/pm-plugins/decoration");
 
 var _panelBackgroundPalette = require("../../ui/ColorPalette/Palettes/panelBackgroundPalette");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _utils = require("./utils");
 
@@ -47,49 +47,73 @@ var _message = require("./message");
 
 var _panelIconMap;
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-var panelIconMap = (_panelIconMap = {}, (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.INFO, ':info:'), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.NOTE, ':note:'), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.WARNING, ':warning:'), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.ERROR, ':cross_mark:'), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.SUCCESS, ':check_mark:'), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.TIP, ':tip:'), _panelIconMap);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var panelIconMap = (_panelIconMap = {}, (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.INFO, {
+  shortName: ':info:',
+  id: 'atlassian-info'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.NOTE, {
+  shortName: ':note:',
+  id: 'atlassian-note'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.WARNING, {
+  shortName: ':warning:',
+  id: 'atlassian-warning'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.ERROR, {
+  shortName: ':cross_mark:',
+  id: 'atlassian-cross_mark'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.SUCCESS, {
+  shortName: ':check_mark:',
+  id: 'atlassian-check_mark'
+}), (0, _defineProperty2.default)(_panelIconMap, _adfSchema.PanelType.TIP, {
+  shortName: ':tip:',
+  id: 'atlassian-tip'
+}), _panelIconMap);
 exports.panelIconMap = panelIconMap;
 
 var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, activePanelType, activePanelColor, activePanelIcon) {
+  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   var items = [{
     id: 'editor.panel.info',
     type: 'button',
     icon: _info.default,
     onClick: (0, _actions.changePanelType)(_adfSchema.PanelType.INFO),
     selected: activePanelType === _adfSchema.PanelType.INFO,
-    title: formatMessage(_message.messages.info)
+    title: formatMessage(_message.messages.info),
+    tabIndex: null
   }, {
     id: 'editor.panel.note',
     type: 'button',
     icon: _note.default,
     onClick: (0, _actions.changePanelType)(_adfSchema.PanelType.NOTE),
     selected: activePanelType === _adfSchema.PanelType.NOTE,
-    title: formatMessage(_message.messages.note)
+    title: formatMessage(_message.messages.note),
+    tabIndex: null
   }, {
     id: 'editor.panel.success',
     type: 'button',
     icon: _success.default,
     onClick: (0, _actions.changePanelType)(_adfSchema.PanelType.SUCCESS),
     selected: activePanelType === _adfSchema.PanelType.SUCCESS,
-    title: formatMessage(_message.messages.success)
+    title: formatMessage(_message.messages.success),
+    tabIndex: null
   }, {
     id: 'editor.panel.warning',
     type: 'button',
     icon: _warning.default,
     onClick: (0, _actions.changePanelType)(_adfSchema.PanelType.WARNING),
     selected: activePanelType === _adfSchema.PanelType.WARNING,
-    title: formatMessage(_message.messages.warning)
+    title: formatMessage(_message.messages.warning),
+    tabIndex: null
   }, {
     id: 'editor.panel.error',
     type: 'button',
     icon: _error.default,
     onClick: (0, _actions.changePanelType)(_adfSchema.PanelType.ERROR),
     selected: activePanelType === _adfSchema.PanelType.ERROR,
-    title: formatMessage(_message.messages.error)
+    title: formatMessage(_message.messages.error),
+    tabIndex: null
   }];
 
   if (isCustomPanelEnabled) {
@@ -101,11 +125,12 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
           return false;
         }
 
-        var previousColor = panelNode.node.attrs.panelColor || (0, _editorCommon.getPanelTypeBackground)(panelNode.node.attrs.panelType);
+        var previousColor = panelNode.node.attrs.panelColor || (0, _styles.getPanelTypeBackground)(panelNode.node.attrs.panelType);
         var emojiInfo = panelNode.node.attrs.panelType;
-        var panelInfo = panelIconMap[emojiInfo];
-        var previousEmoji = panelInfo ? {
-          emoji: panelInfo
+        var panelEmoji = panelIconMap[emojiInfo];
+        var previousEmoji = panelEmoji ? {
+          emoji: panelEmoji.shortName,
+          emojiId: panelEmoji.id
         } : {};
 
         if (previousColor === color) {
@@ -142,9 +167,11 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
 
         var previousIcon = panelNode.node.attrs.panelIcon || '';
 
-        if (previousIcon === emoji) {
+        if (previousIcon === emoji.shortName) {
           (0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
-            emoji: emoji
+            emoji: emoji.shortName,
+            emojiId: emoji.id,
+            emojiText: emoji.fallback
           }, true)(state, dispatch);
           return false;
         }
@@ -154,13 +181,15 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
           actionSubject: _analytics.ACTION_SUBJECT.PANEL,
           actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
           attributes: {
-            newIcon: emoji,
+            newIcon: emoji.shortName,
             previousIcon: previousIcon
           },
           eventType: _analytics.EVENT_TYPE.TRACK
         };
         (0, _analytics.withAnalytics)(payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
-          emoji: emoji
+          emoji: emoji.shortName,
+          emojiId: emoji.id,
+          emojiText: emoji.fallback
         }, true))(state, dispatch);
         return false;
       };
@@ -188,13 +217,15 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
           eventType: _analytics.EVENT_TYPE.TRACK
         };
         (0, _analytics.withAnalytics)(payload)((0, _actions.changePanelType)(_adfSchema.PanelType.CUSTOM, {
-          emoji: undefined
+          emoji: undefined,
+          emojiId: undefined,
+          emojiText: undefined
         }, isCustomPanelEnabled))(state, dispatch);
         return false;
       };
     };
 
-    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _editorCommon.getPanelTypeBackground)(_adfSchema.PanelType.INFO) : (0, _editorCommon.getPanelTypeBackground)(activePanelType);
+    var panelColor = activePanelType === _adfSchema.PanelType.CUSTOM ? activePanelColor || (0, _styles.getPanelTypeBackground)(_adfSchema.PanelType.INFO) : (0, _styles.getPanelTypeBackground)(activePanelType);
     var defaultPalette = _panelBackgroundPalette.panelBackgroundPalette.find(function (item) {
       return item.value === panelColor;
     }) || {
@@ -222,8 +253,8 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
         selectType: 'emoji',
         options: [],
         selected: activePanelType === _adfSchema.PanelType.CUSTOM && !!activePanelIcon,
-        onChange: function onChange(emojiShortName) {
-          return changeEmoji(emojiShortName);
+        onChange: function onChange(emoji) {
+          return changeEmoji(emoji);
         }
       };
       var removeEmojiButton = {
@@ -252,7 +283,8 @@ var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isC
     onMouseLeave: (0, _decoration.hoverDecoration)(panelNodeType, false),
     onFocus: (0, _decoration.hoverDecoration)(panelNodeType, true),
     onBlur: (0, _decoration.hoverDecoration)(panelNodeType, false),
-    title: formatMessage(_messages.default.remove)
+    title: formatMessage(_messages.default.remove),
+    tabIndex: null
   });
   return items;
 };