@atlaskit/editor-core 153.1.4 → 156.0.0

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import AddIcon from '@atlaskit/icon/glyph/add';
 import { N300 } from '@atlaskit/theme/colors';
 import React, { useCallback, useEffect } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { AvatarStyle, CapitalizedStyle, MentionItemStyle, NameSectionStyle, RowStyle, ROW_SIDE_PADDING, AVATAR_HEIGHT } from './styles';
 import { messages } from '../../messages';
 export var INVITE_ITEM_MIN_HEIGHT = AVATAR_HEIGHT + ROW_SIDE_PADDING * 2;
@@ -20,7 +20,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 = useCallback(function (event) {
     if (leftClick(event) && onSelection) {
       event.preventDefault();
@@ -43,7 +44,7 @@ var InviteItem = function InviteItem(_ref) {
     onMouseEnter: onItemMouseEnter,
     "data-id": INVITE_ITEM_DESCRIPTION.id
   }, /*#__PURE__*/React.createElement(RowStyle, null, /*#__PURE__*/React.createElement(AvatarStyle, null, /*#__PURE__*/React.createElement(AddIcon, {
-    label: "add-icon",
+    label: intl.formatMessage(messages.mentionsAddLabel),
     primaryColor: N300
   })), /*#__PURE__*/React.createElement(NameSectionStyle, null, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.inviteItemTitle, {
     values: {
@@ -53,4 +54,4 @@ var InviteItem = function InviteItem(_ref) {
   })))));
 };
 
-export default InviteItem;
+export default injectIntl(InviteItem);

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React from 'react';
 import { PureComponent } from 'react';
 import { ResourcedMention } from '@atlaskit/mention/element';
-import { ProviderFactory, WithProviders } from '@atlaskit/editor-common';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
 
 var Mention = /*#__PURE__*/function (_PureComponent) {
   _inherits(Mention, _PureComponent);

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

@@ -16,6 +16,8 @@ import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
 import ToolbarButton, { TOOLBAR_BUTTON } from '../../../../ui/ToolbarButton';
 import { INPUT_METHOD } from '../../../analytics';
 import { createTypeAheadTools } from '../../../type-ahead/api';
+import { injectIntl } from 'react-intl-next';
+import { messages } from '../../messages';
 
 var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   _inherits(ToolbarMention, _PureComponent);
@@ -48,15 +50,16 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   _createClass(ToolbarMention, [{
     key: "render",
     value: function render() {
+      var mentionStringTranslated = this.props.intl.formatMessage(messages.mentionsIconLabel);
       return /*#__PURE__*/React.createElement(ToolbarButton, {
         testId: this.props.testId,
         buttonId: TOOLBAR_BUTTON.MENTION,
         spacing: "none",
         onClick: this.handleInsertMention,
         disabled: this.props.isDisabled,
-        title: "Mention @",
+        title: mentionStringTranslated + '@',
         iconBefore: /*#__PURE__*/React.createElement(MentionIcon, {
-          label: "Mention"
+          label: mentionStringTranslated
         })
       });
     }
@@ -65,4 +68,4 @@ var ToolbarMention = /*#__PURE__*/function (_PureComponent) {
   return ToolbarMention;
 }(PureComponent);
 
-export { ToolbarMention as default };
+export default injectIntl(ToolbarMention);

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

@@ -4,4 +4,5 @@ export var 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 || (MobileDimensionsActionTypes = {}));

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

@@ -17,4 +17,10 @@ export var setMobilePaddingTop = function setMobilePaddingTop(paddingTop) {
     type: MobileDimensionsActionTypes.SET_MOBILE_PADDING_TOP,
     paddingTop: paddingTop
   });
+};
+export var setIsExpanded = function setIsExpanded(isExpanded) {
+  return createCommand({
+    type: MobileDimensionsActionTypes.SET_IS_EXPANDED,
+    isExpanded: isExpanded
+  });
 };

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

@@ -1,4 +1,4 @@
-import { Plugin } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { setWindowHeight } from './commands';
 import { createPluginState, mobileDimensionsPluginKey } from './plugin-factory'; // 44 pixels squared is the minimum size for a tap target as per Apple's UX design guidelines
 
@@ -8,7 +8,8 @@ var getInitialState = function getInitialState() {
   return {
     keyboardHeight: -1,
     mobilePaddingTop: 0,
-    windowHeight: window.innerHeight
+    windowHeight: window.innerHeight,
+    isExpanded: false
   };
 };
 /**
@@ -18,11 +19,29 @@ var getInitialState = function getInitialState() {
 
 var createPlugin = function createPlugin(dispatch) {
   var rafId;
-  return new Plugin({
+  return new SafePlugin({
     state: createPluginState(dispatch, getInitialState),
     key: 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;
 
@@ -38,7 +57,11 @@ var createPlugin = function createPlugin(dispatch) {
             } else {
               rafId = requestAnimationFrame(checkWindowHeight);
             }
+          } else {
+            rafId = requestAnimationFrame(checkWindowHeight);
           }
+
+          windowInnerHeight = window.innerHeight;
         };
 
         rafId = requestAnimationFrame(checkWindowHeight);

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

@@ -21,6 +21,11 @@ export default function (state, action) {
       return _objectSpread(_objectSpread({}, state), {}, {
         mobilePaddingTop: action.paddingTop
       });
+
+    case MobileDimensionsActionTypes.SET_IS_EXPANDED:
+      return _objectSpread(_objectSpread({}, state), {}, {
+        isExpanded: action.isExpanded
+      });
   }
 
   return state;

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

@@ -2,12 +2,12 @@
 export 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/esm/plugins/mobile-selection/mobile-selection-plugin.js

@@ -1,9 +1,10 @@
-import { Plugin, PluginKey } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PluginKey } from 'prosemirror-state';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { contentInSelection } from './content-in-selection';
 export var selectionPluginKey = new PluginKey('mobile-selection');
 export var createProseMirrorPlugin = function createProseMirrorPlugin(dispatch) {
-  return new Plugin({
+  return new SafePlugin({
     view: function view(editorView) {
       var domAtPos = editorView.domAtPos.bind(editorView);
       return {

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

@@ -8,7 +8,7 @@ import { removeParentNodeOfType, findSelectedNodeOfType, removeSelectedNode, fin
 import { NodeSelection } from 'prosemirror-state';
 import { ACTION, ACTION_SUBJECT, INPUT_METHOD, EVENT_TYPE, addAnalytics } from '../analytics';
 import { findPanel } from './utils';
-import { getPanelTypeBackground } from '@atlaskit/editor-common';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
 export var removePanel = function removePanel() {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
@@ -59,14 +59,20 @@ export var changePanelType = function changePanelType(panelType) {
     if (allowCustomPanel) {
       var previousColor = panelNode.node.attrs.panelColor || 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/esm/plugins/panel/index.js

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

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

@@ -3,37 +3,37 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { DOMSerializer } from 'prosemirror-model';
-import InfoIcon from '@atlaskit/icon/glyph/editor/info';
-import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
-import NoteIcon from '@atlaskit/icon/glyph/editor/note';
-import WarningIcon from '@atlaskit/icon/glyph/editor/warning';
-import ErrorIcon from '@atlaskit/icon/glyph/editor/error';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
-import { Emoji } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Emoji } from '@atlaskit/editor-common/emoji';
 import { panelAttrsToDom } from '../utils';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
+import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 export var panelIcons = {
-  info: InfoIcon,
-  success: SuccessIcon,
-  note: NoteIcon,
+  info: PanelInfoIcon,
+  success: PanelSuccessIcon,
+  note: PanelNoteIcon,
   tip: TipIcon,
-  warning: WarningIcon,
-  error: ErrorIcon,
-  custom: InfoIcon
+  warning: PanelWarningIcon,
+  error: PanelErrorIcon,
+  custom: PanelInfoIcon
 };
 export var PanelIcon = function PanelIcon(props) {
   var allowCustomPanel = props.allowCustomPanel,
       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 === PanelType.CUSTOM) {
     return /*#__PURE__*/React.createElement(Emoji, {
       providers: providerFactory,
       shortName: panelIcon,
+      id: panelIconId,
+      fallback: panelIconText,
       showTooltip: false,
       allowTextFallback: false,
       fitToHeight: akEditorCustomIconSize
@@ -81,7 +81,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;
     }
   }]);
 

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

@@ -1,12 +1,12 @@
-import { Plugin } from 'prosemirror-state';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../types';
 import { createSelectionClickHandler } from '../../selection/utils';
 export var createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
       useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
-  return new Plugin({
+  return new SafePlugin({
     key: pluginKey,
     props: {
       nodeViews: {

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

@@ -3,6 +3,6 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject;
 
 import { css } from 'styled-components';
-import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { panelSharedStyles, PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SelectionStyle, getSelectionStyles, akEditorDeleteBackground, akEditorDeleteBackgroundWithOpacity, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorDeleteIconColor, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 export var panelStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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"])), PanelSharedCssClassName.prefix, akEditorSelectedBorderSize, akEditorDeleteBorder, akEditorDeleteBackground, PanelSharedCssClassName.icon, akEditorDeleteIconColor, PanelSharedCssClassName.content, PanelSharedCssClassName.prefix, akEditorDeleteBackgroundWithOpacity, PanelSharedCssClassName.icon, akEditorDeleteIconColor, panelSharedStyles, PanelSharedCssClassName.prefix, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Blanket]));

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

@@ -17,50 +17,74 @@ import commonMessages from '../../messages';
 import { removePanel, changePanelType } from './actions';
 import { hoverDecoration } from '../base/pm-plugins/decoration';
 import { panelBackgroundPalette } from '../../ui/ColorPalette/Palettes/panelBackgroundPalette';
-import { getPanelTypeBackground } from '@atlaskit/editor-common';
+import { getPanelTypeBackground } from '@atlaskit/editor-common/styles';
 import { findPanel } from './utils';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { DEFAULT_BORDER_COLOR } from '../../ui/ColorPalette/Palettes';
 import { PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
 import { messages } from './message';
-export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, ':info:'), _defineProperty(_panelIconMap, PanelType.NOTE, ':note:'), _defineProperty(_panelIconMap, PanelType.WARNING, ':warning:'), _defineProperty(_panelIconMap, PanelType.ERROR, ':cross_mark:'), _defineProperty(_panelIconMap, PanelType.SUCCESS, ':check_mark:'), _defineProperty(_panelIconMap, PanelType.TIP, ':tip:'), _panelIconMap);
+export var panelIconMap = (_panelIconMap = {}, _defineProperty(_panelIconMap, PanelType.INFO, {
+  shortName: ':info:',
+  id: 'atlassian-info'
+}), _defineProperty(_panelIconMap, PanelType.NOTE, {
+  shortName: ':note:',
+  id: 'atlassian-note'
+}), _defineProperty(_panelIconMap, PanelType.WARNING, {
+  shortName: ':warning:',
+  id: 'atlassian-warning'
+}), _defineProperty(_panelIconMap, PanelType.ERROR, {
+  shortName: ':cross_mark:',
+  id: 'atlassian-cross_mark'
+}), _defineProperty(_panelIconMap, PanelType.SUCCESS, {
+  shortName: ':check_mark:',
+  id: 'atlassian-check_mark'
+}), _defineProperty(_panelIconMap, PanelType.TIP, {
+  shortName: ':tip:',
+  id: 'atlassian-tip'
+}), _panelIconMap);
 export 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: InfoIcon,
     onClick: changePanelType(PanelType.INFO),
     selected: activePanelType === PanelType.INFO,
-    title: formatMessage(messages.info)
+    title: formatMessage(messages.info),
+    tabIndex: null
   }, {
     id: 'editor.panel.note',
     type: 'button',
     icon: NoteIcon,
     onClick: changePanelType(PanelType.NOTE),
     selected: activePanelType === PanelType.NOTE,
-    title: formatMessage(messages.note)
+    title: formatMessage(messages.note),
+    tabIndex: null
   }, {
     id: 'editor.panel.success',
     type: 'button',
     icon: SuccessIcon,
     onClick: changePanelType(PanelType.SUCCESS),
     selected: activePanelType === PanelType.SUCCESS,
-    title: formatMessage(messages.success)
+    title: formatMessage(messages.success),
+    tabIndex: null
   }, {
     id: 'editor.panel.warning',
     type: 'button',
     icon: WarningIcon,
     onClick: changePanelType(PanelType.WARNING),
     selected: activePanelType === PanelType.WARNING,
-    title: formatMessage(messages.warning)
+    title: formatMessage(messages.warning),
+    tabIndex: null
   }, {
     id: 'editor.panel.error',
     type: 'button',
     icon: ErrorIcon,
     onClick: changePanelType(PanelType.ERROR),
     selected: activePanelType === PanelType.ERROR,
-    title: formatMessage(messages.error)
+    title: formatMessage(messages.error),
+    tabIndex: null
   }];
 
   if (isCustomPanelEnabled) {
@@ -74,9 +98,10 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
 
         var previousColor = panelNode.node.attrs.panelColor || 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) {
@@ -113,9 +138,11 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
 
         var previousIcon = panelNode.node.attrs.panelIcon || '';
 
-        if (previousIcon === emoji) {
+        if (previousIcon === emoji.shortName) {
           changePanelType(PanelType.CUSTOM, {
-            emoji: emoji
+            emoji: emoji.shortName,
+            emojiId: emoji.id,
+            emojiText: emoji.fallback
           }, true)(state, dispatch);
           return false;
         }
@@ -125,13 +152,15 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
           actionSubject: ACTION_SUBJECT.PANEL,
           actionSubjectId: ACTION_SUBJECT_ID.PANEL,
           attributes: {
-            newIcon: emoji,
+            newIcon: emoji.shortName,
             previousIcon: previousIcon
           },
           eventType: EVENT_TYPE.TRACK
         };
         withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
-          emoji: emoji
+          emoji: emoji.shortName,
+          emojiId: emoji.id,
+          emojiText: emoji.fallback
         }, true))(state, dispatch);
         return false;
       };
@@ -159,7 +188,9 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
           eventType: EVENT_TYPE.TRACK
         };
         withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
-          emoji: undefined
+          emoji: undefined,
+          emojiId: undefined,
+          emojiText: undefined
         }, isCustomPanelEnabled))(state, dispatch);
         return false;
       };
@@ -193,8 +224,8 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
         selectType: 'emoji',
         options: [],
         selected: activePanelType === PanelType.CUSTOM && !!activePanelIcon,
-        onChange: function onChange(emojiShortName) {
-          return changeEmoji(emojiShortName);
+        onChange: function onChange(emoji) {
+          return changeEmoji(emoji);
         }
       };
       var removeEmojiButton = {
@@ -223,7 +254,8 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     onMouseLeave: hoverDecoration(panelNodeType, false),
     onFocus: hoverDecoration(panelNodeType, true),
     onBlur: hoverDecoration(panelNodeType, false),
-    title: formatMessage(commonMessages.remove)
+    title: formatMessage(commonMessages.remove),
+    tabIndex: null
   });
   return items;
 };

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

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { findSelectedNodeOfType, findParentNodeOfType } from 'prosemirror-utils';
 import { PanelType } from '@atlaskit/adf-schema';
-import { PanelSharedCssClassName } from '@atlaskit/editor-common';
+import { PanelSharedCssClassName } from '@atlaskit/editor-common/styles';
 export var findPanel = function findPanel(state, selection) {
   var panel = state.schema.nodes.panel;
   return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
@@ -14,10 +14,12 @@ export var findPanel = function findPanel(state, selection) {
 export 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 === PanelType.CUSTOM && allowCustomPanel;
   var style = panelColor && isCustomPanel ? "background-color: ".concat(panelColor) : '';
-  var hasIcon = !isCustomPanel || !!panelIcon;
+  var hasIcon = !isCustomPanel || !!panelIcon || !!panelIconId;
   var panelAttrs = {
     class: PanelSharedCssClassName.prefix,
     'data-panel-type': panelType || PanelType.INFO,
@@ -26,7 +28,9 @@ export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
 
   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
     });
   }
 

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

@@ -101,9 +101,18 @@ export function handlePasteLinkOnSelectedText(slice) {
       var paragraph = slice.content.child(0);
 
       if (paragraph.content.childCount === 1 && isText(paragraph.content.child(0), schema)) {
-        var text = paragraph.content.child(0);
+        var text = paragraph.content.child(0); // If pasteType is plain text, then
+        //  @atlaskit/editor-markdown-transformer in getMarkdownSlice decode
+        //  url before setting text property of text node.
+        //  However href of marks will be without decoding.
+        //  So, if there is character (e.g space) in url eligible escaping then
+        //  mark.attrs.href will not be equal to text.text.
+        //  That's why decoding mark.attrs.href before comparing.
+        // However, if pasteType is richText, that means url in text.text
+        //  and href in marks, both won't be decoded.
+
         linkMark = text.marks.find(function (mark) {
-          return isLinkMark(mark, schema) && mark.attrs.href === text.text;
+          return isLinkMark(mark, schema) && (mark.attrs.href === text.text || decodeURI(mark.attrs.href) === text.text);
         });
       }
     } // if we have a link, apply it to the selected text if we have any and it's allowed
@@ -621,11 +630,14 @@ export function insertIntoPanel(tr, slice, panel) {
 }
 export function handleRichText(slice) {
   return function (state, dispatch) {
-    var _panelParentOverCurre;
+    var _slice$content;
 
     var _state$schema$nodes2 = state.schema.nodes,
         codeBlock = _state$schema$nodes2.codeBlock,
-        panel = _state$schema$nodes2.panel; // In case user is pasting inline code,
+        heading = _state$schema$nodes2.heading,
+        paragraph = _state$schema$nodes2.paragraph;
+    var selection = state.selection;
+    var firstChildOfSlice = (_slice$content = slice.content) === null || _slice$content === void 0 ? void 0 : _slice$content.firstChild; // In case user is pasting inline code,
     // any backtick ` immediately preceding it should be removed.
 
     var tr = state.tr;
@@ -639,20 +651,27 @@ export function handleRichText(slice) {
     }
 
     closeHistory(tr);
-    var panelParentOverCurrentSelection = findParentNodeOfType(panel)(tr.selection);
-    var isFirstChildListNode = isListNode(slice.content.firstChild);
-    var isLastChildListNode = isListNode(slice.content.lastChild);
-    var isSliceContentListNodes = isFirstChildListNode || isLastChildListNode;
-    var isTargetPanelEmpty = panelParentOverCurrentSelection && ((_panelParentOverCurre = panelParentOverCurrentSelection.node) === null || _panelParentOverCurre === void 0 ? void 0 : _panelParentOverCurre.content.size) === 2;
+    var isFirstChildListNode = isListNode(firstChildOfSlice);
+    var isLastChildListNode = isListNode(firstChildOfSlice);
+    var isSliceContentListNodes = isFirstChildListNode || isLastChildListNode; // We want to use safeInsert to insert invalid content, as it inserts at the closest non schema violating position
+    // rather than spliting the selection parent node in half (which is what replaceSelection does)
+    // Exception is paragraph and heading nodes, these should be split, provided their parent supports the pasted content
+
+    var textNodes = [heading, paragraph];
+    var selectionParent = selection.$to.node(selection.$to.depth - 1);
+    var noNeedForSafeInsert = selection.$to.node().type.validContent(slice.content) || textNodes.includes(selection.$to.node().type) && selectionParent.type.validContent(slice.content);
 
-    if (isSliceContentListNodes || isTargetPanelEmpty) {
+    if (isSliceContentListNodes) {
       insertSliceForLists({
         tr: tr,
         slice: slice
       });
+    } else if (noNeedForSafeInsert) {
+      tr.replaceSelection(slice);
     } else {
-      // if inside an empty panel, try and insert content inside it rather than replace it
-      insertIntoPanel(tr, slice, panel);
+      // need safeInsert rather than replaceSelection, so that nodes aren't split in half
+      // e.g. when pasting a layout into a table, replaceSelection splits the table in half and adds the layout in the middle
+      tr = safeInsert(slice.content, tr.selection.$to.pos)(tr);
     }
 
     tr.setStoredMarks([]);

package/dist/esm/plugins/paste/index.js

@@ -2,7 +2,8 @@ import { createPlugin } from './pm-plugins/main';
 
 var pastePlugin = function pastePlugin(_ref) {
   var cardOptions = _ref.cardOptions,
-      sanitizePrivateContent = _ref.sanitizePrivateContent;
+      sanitizePrivateContent = _ref.sanitizePrivateContent,
+      plainTextPasteLinkification = _ref.plainTextPasteLinkification;
   return {
     name: 'paste',
     pmPlugins: function pmPlugins() {
@@ -12,7 +13,7 @@ var pastePlugin = function pastePlugin(_ref) {
           var schema = _ref2.schema,
               providerFactory = _ref2.providerFactory,
               dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent;
-          return createPlugin(schema, dispatchAnalyticsEvent, cardOptions, sanitizePrivateContent, providerFactory);
+          return createPlugin(schema, dispatchAnalyticsEvent, plainTextPasteLinkification, cardOptions, sanitizePrivateContent, providerFactory);
         }
       }];
     }