@atlaskit/editor-core 153.1.1 → 153.1.5

package/dist/cjs/plugins/media/utils/media-single.js

@@ -14,7 +14,7 @@ var _prosemirrorModel = require("prosemirror-model");
 
 var _prosemirrorUtils = require("prosemirror-utils");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _ui = require("@atlaskit/editor-common/ui");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -34,9 +34,9 @@ var _isImage = require("./is-image");
 
 var _position = require("../../../utils/prosemirror/position");
 
-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 getInsertMediaAnalytics = function getInsertMediaAnalytics(inputMethod, fileExtension) {
   return {
@@ -253,7 +253,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
   } else if (layout === 'full-width') {
     return width - _editorSharedStyles.akEditorBreakoutPadding;
   } else if (calculatedPctWidth) {
-    if (_editorCommon.wrappedLayouts.indexOf(layout) > -1) {
+    if (_ui.wrappedLayouts.indexOf(layout) > -1) {
       if (calculatedResizedPctWidth) {
         if (resizedPctWidth < 50) {
           return calculatedResizedPctWidth;
@@ -276,7 +276,7 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
     }
 
     return Math.min(origWidth, lineLength || width);
-  } else if (layout && _editorCommon.wrappedLayouts.indexOf(layout) !== -1) {
+  } else if (layout && _ui.wrappedLayouts.indexOf(layout) !== -1) {
     var halfLineLength = Math.ceil((lineLength || width) / 2);
     return origWidth <= halfLineLength ? origWidth : halfLineLength;
   }
@@ -287,5 +287,5 @@ var calcMediaPxWidth = function calcMediaPxWidth(opts) {
 exports.calcMediaPxWidth = calcMediaPxWidth;
 
 var calcPctWidth = function calcPctWidth(containerWidth, pctWidth, origWidth, origHeight) {
-  return pctWidth && origWidth && origHeight && Math.ceil((0, _editorCommon.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
+  return pctWidth && origWidth && origHeight && Math.ceil((0, _ui.calcPxFromPct)(pctWidth / 100, containerWidth.lineLength || containerWidth.width));
 };

package/dist/cjs/plugins/mentions/analytics.js

@@ -17,9 +17,9 @@ var _version = require("../../version.json");
 
 var _utils = require("./utils");
 
-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 componentName = 'mention';
 

package/dist/cjs/plugins/mentions/nodeviews/mention.js

@@ -24,7 +24,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireDefault(require("react"));
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _utils = require("@atlaskit/editor-common/utils");
 
 var _Mention = _interopRequireDefault(require("../ui/Mention"));
 
@@ -75,7 +75,7 @@ var MentionNodeView = /*#__PURE__*/function (_ReactNodeView) {
         text: text,
         accessLevel: accessLevel,
         providers: providerFactory
-      }), options && options.allowZeroWidthSpaceAfter && _editorCommon.ZERO_WIDTH_SPACE);
+      }), options && options.allowZeroWidthSpaceAfter && _utils.ZERO_WIDTH_SPACE);
     }
   }]);
   return MentionNodeView;

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

@@ -18,9 +18,9 @@ var _mention = _interopRequireDefault(require("../nodeviews/mention"));
 
 var _key = require("./key");
 
-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 ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',

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

@@ -11,7 +11,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _styledComponents = require("styled-components");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _mention = require("@atlaskit/editor-common/mention");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
@@ -19,5 +19,5 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _templateObject;
 
-var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _editorCommon.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
+var mentionsStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    &.", " [data-mention-id] > span {\n      ", "\n\n      /* need to specify dark text colour because personal mentions\n         (in dark blue) have white text by default */\n      color: ", ";\n    }\n  }\n\n  .danger {\n    .", ".", "\n      > span\n      > span {\n      box-shadow: 0 0 0 ", "px ", ";\n      background-color: ", ";\n    }\n    .", " > span > span {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), _colors.N500, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, _editorSharedStyles.akEditorDeleteBackgroundWithOpacity, _mention.MentionSharedCssClassName.MENTION_CONTAINER, _colors.N30A, _colors.N500);
 exports.mentionsStyles = mentionsStyles;

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/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/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

@@ -19,7 +19,8 @@ var getInitialState = function getInitialState() {
   return {
     keyboardHeight: -1,
     mobilePaddingTop: 0,
-    windowHeight: window.innerHeight
+    windowHeight: window.innerHeight,
+    isExpanded: false
   };
 };
 /**
@@ -34,6 +35,10 @@ var createPlugin = function createPlugin(dispatch) {
     key: _pluginFactory.mobileDimensionsPluginKey,
     view: function view(editorView) {
       var handleResize = function handleResize() {
+        if (rafId) {
+          window.cancelAnimationFrame(rafId);
+        }
+
         var windowInnerHeight = window.innerHeight;
         var count = 0;
 
@@ -49,7 +54,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/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

@@ -7,7 +7,7 @@ exports.createPlugin = void 0;
 
 var _prosemirrorState = require("prosemirror-state");
 
-var _editorCommon = require("@atlaskit/editor-common");
+var _styles = require("@atlaskit/editor-common/styles");
 
 var _panel = require("../nodeviews/panel");
 
@@ -25,7 +25,7 @@ var createPlugin = function createPlugin(dispatch, providerFactory, pluginOption
         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,11 +47,29 @@ 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) {
@@ -101,11 +119,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 +161,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 +175,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 +211,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 +247,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 = {

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

@@ -13,11 +13,11 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-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 findPanel = function findPanel(state, selection) {
   var panel = state.schema.nodes.panel;
@@ -29,27 +29,31 @@ exports.findPanel = findPanel;
 var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   var panelColor = attrs.panelColor,
       panelType = attrs.panelType,
-      panelIcon = attrs.panelIcon;
+      panelIcon = attrs.panelIcon,
+      panelIconId = attrs.panelIconId,
+      panelIconText = attrs.panelIconText;
   var isCustomPanel = panelType === _adfSchema.PanelType.CUSTOM && allowCustomPanel;
   var style = panelColor && isCustomPanel ? "background-color: ".concat(panelColor) : '';
-  var hasIcon = !isCustomPanel || !!panelIcon;
+  var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   var panelAttrs = {
-    class: _editorCommon.PanelSharedCssClassName.prefix,
+    class: _styles.PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || _adfSchema.PanelType.INFO,
     style: style
   };
 
   if (panelColor && isCustomPanel) {
     panelAttrs = _objectSpread(_objectSpread({}, panelAttrs), {}, {
-      'data-panel-color': panelColor
+      'data-panel-color': panelColor,
+      'data-panel-icon-id': panelIconId,
+      'data-panel-icon-text': panelIconText
     });
   }
 
   var iconDiv = ['div', {
-    class: _editorCommon.PanelSharedCssClassName.icon
+    class: _styles.PanelSharedCssClassName.icon
   }];
   var contentDiv = ['div', {
-    class: _editorCommon.PanelSharedCssClassName.content
+    class: _styles.PanelSharedCssClassName.content
   }, 0];
 
   if (hasIcon) {

package/dist/cjs/plugins/paste/handlers.js

@@ -69,9 +69,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; }
 
 // remove text attribute from mention for copy/paste (GDPR)
 function handleMention(slice, schema) {