@atlaskit/editor-core 187.32.1 → 187.32.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-core
 
+## 187.32.3
+
+### Patch Changes
+
+- [`113fcc02759`](https://bitbucket.org/atlassian/atlassian-frontend/commits/113fcc02759) - ED-19433 Extract Emoji Plugin to its own package
+- Updated dependencies
+
+## 187.32.2
+
+### Patch Changes
+
+- [`eab48233583`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eab48233583) - Calculate parent content width properly when inserting a nested media single node
+
 ## 187.32.1
 
 ### Patch Changes

package/dist/cjs/labs/next/presets/universal.js

@@ -9,6 +9,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _api = require("../../../selection-api/api");
 var _plugins = require("../../../plugins");
+var _editorPluginEmoji = require("@atlaskit/editor-plugin-emoji");
 var _editorPluginList = require("@atlaskit/editor-plugin-list");
 var _editorPluginImageUpload = require("@atlaskit/editor-plugin-image-upload");
 var _editorPluginGuideline = require("@atlaskit/editor-plugin-guideline");
@@ -139,7 +140,7 @@ function createUniversalPreset(appearance, props, featureFlags, prevAppearance,
       }]);
     }
     return builder;
-  }).maybeAdd(_plugins.emojiPlugin, function (plugin, builder) {
+  }).maybeAdd(_editorPluginEmoji.emojiPlugin, function (plugin, builder) {
     if (props.emojiProvider) {
       return builder.add(plugin);
     }

package/dist/cjs/plugins/index.js

@@ -131,12 +131,6 @@ Object.defineProperty(exports, "datePlugin", {
     return _date.default;
   }
 });
-Object.defineProperty(exports, "emojiPlugin", {
-  enumerable: true,
-  get: function get() {
-    return _emoji.emojiPlugin;
-  }
-});
 Object.defineProperty(exports, "expandPlugin", {
   enumerable: true,
   get: function get() {
@@ -366,7 +360,6 @@ var _clearMarksOnChangeToEmptyDocument = _interopRequireDefault(require("./clear
 var _codeBlock = _interopRequireDefault(require("./code-block"));
 var _collabEdit = _interopRequireDefault(require("./collab-edit"));
 var _date = _interopRequireDefault(require("./date"));
-var _emoji = require("./emoji");
 var _extension = _interopRequireDefault(require("./extension"));
 var _fakeTextCursor = _interopRequireDefault(require("./fake-text-cursor"));
 var _helpDialog = _interopRequireDefault(require("./help-dialog"));

package/dist/cjs/plugins/media/toolbar/index.js

@@ -304,19 +304,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaHeight: mediaHeight || _mediaSingle2.DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: function validate(value) {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: function onChange(valid) {
+              if (valid) {
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
               } else {
-                // remove decoration when:
-                // input is within min-max range or
-                // input is empty
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
               }
-              if (value === '') {
-                return false;
-              }
-              return true;
             },
             onSubmit: function onSubmit(_ref2) {
               var width = _ref2.width;

package/dist/cjs/plugins/media/ui/PixelEntry/index.js

@@ -26,9 +26,9 @@ var PixelEntry = function PixelEntry(_ref) {
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
-    validate = _ref.validate,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
+    onChange = _ref.onChange,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -55,6 +55,9 @@ var PixelEntry = function PixelEntry(_ref) {
 
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
       var isInvalidInput = false;
@@ -80,46 +83,33 @@ var PixelEntry = function PixelEntry(_ref) {
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  var handleValidateWidth = (0, _react2.useCallback)(function (value) {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(_messages.messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   var handleOnChange = (0, _react2.useCallback)(function (type) {
     return function (event) {
       var value = parseInt(event.currentTarget.value);
-      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : value;
+      var newWidth = '';
       switch (type) {
         case 'inputWidth':
           {
+            newWidth = newInputValue;
             setComputedWidth(newInputValue);
-            if (newInputValue) {
-              setComputedHeight(Math.round(ratioWidth * value));
-            } else {
-              setComputedHeight('');
-            }
+            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+            setComputedHeight(newHeight);
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (newInputValue) {
-              setComputedWidth(Math.round(ratioHeight * value));
-            } else {
-              setComputedWidth('');
-            }
+            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+            setComputedWidth(newWidth);
             break;
           }
       }
+      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+      onChange && onChange(isInvalidInputValid);
     };
-  }, [ratioHeight, ratioWidth]);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return (0, _react.jsx)(_tooltip.default, {
       content: formatMessage(_messages.messages.migrationButtonTooltip)
@@ -141,7 +131,6 @@ var PixelEntry = function PixelEntry(_ref) {
     }, (0, _react.jsx)(_form.Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;

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

@@ -103,7 +103,7 @@ var insertMediaSingleNode = function insertMediaSingleNode(view, mediaState, inp
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  var contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  var contentWidth = (0, _mediaSingle.getMaxWidthForNestedNodeNext)(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
   var node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   var fileExtension;
   if (mediaState.fileName) {

package/dist/cjs/ui/ContentStyles/index.js

@@ -23,28 +23,29 @@ var _styles9 = require("../../plugins/layout/styles");
 var _styles10 = require("../../plugins/panel/styles");
 var _styles11 = require("../../plugins/fake-text-cursor/styles");
 var _styles12 = require("../../plugins/mentions/styles");
-var _styles13 = require("../../plugins/emoji/styles");
-var _styles14 = require("../../plugins/placeholder-text/styles");
-var _styles15 = require("../../plugins/extension/ui/styles");
-var _styles16 = require("../../plugins/expand/ui/styles");
+var _styles13 = require("../../plugins/placeholder-text/styles");
+var _styles14 = require("../../plugins/extension/ui/styles");
+var _styles15 = require("../../plugins/expand/ui/styles");
 var _style = require("../../plugins/media/pm-plugins/alt-text/style");
-var _styles17 = require("../../plugins/find-replace/styles");
-var _styles18 = require("../../plugins/tasks-and-decisions/styles");
-var _styles19 = require("../../plugins/status/styles");
-var _styles20 = require("../../plugins/date/styles");
+var _styles16 = require("../../plugins/find-replace/styles");
+var _styles17 = require("../../plugins/tasks-and-decisions/styles");
+var _styles18 = require("../../plugins/status/styles");
+var _styles19 = require("../../plugins/date/styles");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
 var _utils = require("@atlaskit/editor-common/utils");
-var _templateObject, _templateObject2, _templateObject3;
+var _emoji = require("@atlaskit/editor-common/emoji");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
 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; }
 var linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n"])), _styles.linkSharedStyle);
 exports.linkStyles = linkStyles;
-var listsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    li {\n      position: relative;\n\n      > p:not(:first-child) {\n        margin: 4px 0 0 0;\n      }\n\n      // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n      // The following rule resets the first p tag back to its original margin\n      // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n      > style:first-child + p {\n        margin-top: ", ";\n      }\n    }\n\n    & :not([data-node-type='decisionList']) > li {\n      ", "\n    }\n  }\n"])), _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+var listsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    li {\n      position: relative;\n\n      > p:not(:first-child) {\n        margin: ", " 0 0 0;\n      }\n\n      // In SSR the above rule will apply to all p tags because first-child would be a style tag.\n      // The following rule resets the first p tag back to its original margin\n      // defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n      > style:first-child + p {\n        margin-top: ", ";\n      }\n    }\n\n    & :not([data-node-type='decisionList']) > li {\n      ", "\n    }\n  }\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+var emojiStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    display: inline-block;\n\n    .", " {\n      cursor: pointer;\n\n      &.", " > span {\n        /** needed for selection style to cover custom emoji image properly */\n        display: flex;\n      }\n    }\n\n    &.", " {\n      .", ",\n        .", " {\n        border-radius: 2px;\n        ", "\n      }\n    }\n  }\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    outline: none;\n    font-size: ", "px;\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  .ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n    pointer-events: none;\n    opacity: 0.7;\n  }\n\n  .ProseMirror-hideselection *::selection {\n    background: transparent;\n  }\n\n  .ProseMirror-hideselection *::-moz-selection {\n    background: transparent;\n  }\n\n  .ProseMirror-selectednode {\n    outline: none;\n  }\n\n  .ProseMirror-selectednode:empty {\n    outline: 2px solid ", ";\n  }\n\n  ", "\n  ", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n    box-sizing: border-box;\n  }\n\n  .mediaGroupView-content-wrap ul {\n    padding: 0;\n  }\n\n  /** Needed to override any cleared floats, e.g. image wrapping */\n\n  div.fabric-editor-block-mark[class^='fabric-editor-align'] {\n    clear: none !important;\n  }\n\n  .fabric-editor-align-end {\n    text-align: right;\n  }\n\n  .fabric-editor-align-start {\n    text-align: left;\n  }\n\n  .fabric-editor-align-center {\n    text-align: center;\n  }\n\n  .pm-table-header-content-wrap :not(.fabric-editor-alignment),\n  .pm-table-header-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark,\n  .pm-table-cell-content-wrap\n    :not(p, .fabric-editor-block-mark)\n    + div.fabric-editor-block-mark {\n    p:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  .hyperlink-floating-toolbar,\n  .", " {\n    padding: 0;\n  }\n\n  /* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n  .hyperlink-open-link {\n    svg {\n      max-width: 18px;\n    }\n    &[href] {\n      padding: 0 4px;\n    }\n  }\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles14.placeholderTextStyles, _styles4.placeholderStyles, (0, _styles6.codeBlockStyles)(props), (0, _styles5.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles7.ruleStyles)(props), _styles8.mediaStyles, (0, _styles9.layoutStyles)(props), _styles2.telepointerStyle, _styles3.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles10.panelStyles)(props), _styles11.fakeCursorStyles, _styles12.mentionsStyles, _styles13.emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles15.extensionStyles, (0, _styles16.expandStyles)(props), _styles17.findReplaceStyles, _styles18.taskDecisionStyles, _styles19.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles20.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles13.placeholderTextStyles, _styles4.placeholderStyles, (0, _styles6.codeBlockStyles)(props), (0, _styles5.blocktypeStyles)(props), (0, _styles.codeMarkSharedStyles)(props), _styles.textColorStyles, listsStyles, (0, _styles7.ruleStyles)(props), _styles8.mediaStyles, (0, _styles9.layoutStyles)(props), _styles2.telepointerStyle, _styles3.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _styles10.panelStyles)(props), _styles11.fakeCursorStyles, _styles12.mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _styles14.extensionStyles, (0, _styles15.expandStyles)(props), _styles16.findReplaceStyles, _styles17.taskDecisionStyles, _styles18.statusStyles, (0, _styles.annotationSharedStyles)(props), _styles.smartCardStyles, _styles.smartCardSharedStyles, _styles19.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, _style.ClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

package/dist/cjs/ui/styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.expandIconWrapperStyle = exports.clickSelectWrapperStyle = void 0;
+exports.expandIconWrapperStyle = void 0;
 Object.defineProperty(exports, "scrollbarStyles", {
   enumerable: true,
   get: function get() {
@@ -21,8 +21,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
-var _templateObject, _templateObject2;
+var _templateObject;
 var expandIconWrapperStyle = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: -8px;\n"])));
-exports.expandIconWrapperStyle = expandIconWrapperStyle;
-var clickSelectWrapperStyle = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  user-select: all;\n"])));
-exports.clickSelectWrapperStyle = clickSelectWrapperStyle;
+exports.expandIconWrapperStyle = expandIconWrapperStyle;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.32.1";
+var version = "187.32.3";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/es2019/labs/next/presets/universal.js

@@ -1,5 +1,6 @@
 import { createEditorSelectionAPI } from '../../../selection-api/api';
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { emojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import { listPlugin } from '@atlaskit/editor-plugin-list';
 import { imageUploadPlugin } from '@atlaskit/editor-plugin-image-upload';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';

package/dist/es2019/plugins/index.js

@@ -6,7 +6,6 @@ export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-mark
 export { default as codeBlockPlugin } from './code-block';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as datePlugin } from './date';
-export { emojiPlugin } from './emoji';
 export { default as extensionPlugin } from './extension';
 export { default as fakeTextCursorPlugin } from './fake-text-cursor';
 export { default as helpDialogPlugin } from './help-dialog';

package/dist/es2019/plugins/media/toolbar/index.js

@@ -310,19 +310,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: value => {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: valid => {
+              if (valid) {
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
               } else {
-                // remove decoration when:
-                // input is within min-max range or
-                // input is empty
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
               }
-              if (value === '') {
-                return false;
-              }
-              return true;
             },
             onSubmit: ({
               width

package/dist/es2019/plugins/media/ui/PixelEntry/index.js

@@ -14,9 +14,9 @@ export const PixelEntry = ({
   mediaWidth,
   mediaHeight,
   onSubmit,
-  validate,
   minWidth,
   maxWidth,
+  onChange,
   intl: {
     formatMessage
   },
@@ -40,6 +40,9 @@ export const PixelEntry = ({
 
   // Handle submit when user presses enter in form
   const handleOnSubmit = data => {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       let widthToBeSumitted = data.inputWidth;
       let isInvalidInput = false;
@@ -65,44 +68,31 @@ export const PixelEntry = ({
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  const handleValidateWidth = useCallback(value => {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   const handleOnChange = useCallback(type => event => {
     const value = parseInt(event.currentTarget.value);
-    const newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+    const newInputValue = isNaN(value) ? '' : value;
+    let newWidth = '';
     switch (type) {
       case 'inputWidth':
         {
+          newWidth = newInputValue;
           setComputedWidth(newInputValue);
-          if (newInputValue) {
-            setComputedHeight(Math.round(ratioWidth * value));
-          } else {
-            setComputedHeight('');
-          }
+          const newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+          setComputedHeight(newHeight);
           break;
         }
       case 'inputHeight':
         {
           setComputedHeight(newInputValue);
-          if (newInputValue) {
-            setComputedWidth(Math.round(ratioHeight * value));
-          } else {
-            setComputedWidth('');
-          }
+          newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+          setComputedWidth(newWidth);
           break;
         }
     }
-  }, [ratioHeight, ratioWidth]);
+    const isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+    onChange && onChange(isInvalidInputValid);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return jsx(Tooltip, {
       content: formatMessage(messages.migrationButtonTooltip)
@@ -125,7 +115,6 @@ export const PixelEntry = ({
     }, jsx(Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, ({
       fieldProps

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

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -93,7 +93,7 @@ export const insertMediaSingleNode = (view, mediaState, inputMethod, collection,
 
   // add undefined as fallback as we don't want media single width to have upper limit as 0
   // if widthPluginState.width is 0, default 760 will be used
-  const contentWidth = (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
+  const contentWidth = getMaxWidthForNestedNodeNext(view, state.selection.$from.pos, true) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.lineLength) || (widthPluginState === null || widthPluginState === void 0 ? void 0 : widthPluginState.width) || undefined;
   const node = createMediaSingleNode(state.schema, collection, contentWidth, mediaState.status !== 'error' && isVideo(mediaState.fileMimeType) ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, alignLeftOnInsert)(mediaState);
   let fileExtension;
   if (mediaState.fileName) {

package/dist/es2019/ui/ContentStyles/index.js

@@ -2,7 +2,7 @@
 import React, { useMemo } from 'react';
 import { jsx, css, useTheme } from '@emotion/react';
 import { whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, annotationSharedStyles, smartCardSharedStyles, textColorStyles, resizerStyles, gridStyles, smartCardStyles, embedCardStyles, codeBlockInListSafariFix, unsupportedStyles } from '@atlaskit/editor-common/styles';
-import { blockNodesVerticalMargin, editorFontSize } from '@atlaskit/editor-shared-styles';
+import { akEditorSelectedNodeClassName, blockNodesVerticalMargin, editorFontSize, getSelectionStyles, SelectionStyle } from '@atlaskit/editor-shared-styles';
 import { telepointerStyle } from '../../plugins/collab-edit/styles';
 import { gapCursorStyles } from '../../plugins/selection/gap-cursor/styles';
 import { tableStyles } from '@atlaskit/editor-plugin-table/ui/common-styles';
@@ -15,7 +15,6 @@ import { layoutStyles } from '../../plugins/layout/styles';
 import { panelStyles } from '../../plugins/panel/styles';
 import { fakeCursorStyles } from '../../plugins/fake-text-cursor/styles';
 import { mentionsStyles } from '../../plugins/mentions/styles';
-import { emojiStyles } from '../../plugins/emoji/styles';
 import { placeholderTextStyles } from '../../plugins/placeholder-text/styles';
 import { extensionStyles } from '../../plugins/extension/ui/styles';
 import { expandStyles } from '../../plugins/expand/ui/styles';
@@ -27,6 +26,7 @@ import { dateStyles } from '../../plugins/date/styles';
 import { InlineNodeViewSharedStyles } from '../../nodeviews/getInlineNodeViewProducer.styles';
 import { linkSharedStyle, codeMarkSharedStyles } from '@atlaskit/editor-common/styles';
 import { browser } from '@atlaskit/editor-common/utils';
+import { EmojiSharedCssClassName } from '@atlaskit/editor-common/emoji';
 export const linkStyles = css`
   .ProseMirror {
     ${linkSharedStyle}
@@ -38,7 +38,7 @@ const listsStyles = css`
       position: relative;
 
       > p:not(:first-child) {
-        margin: 4px 0 0 0;
+        margin: ${"var(--ds-space-050, 4px)"} 0 0 0;
       }
 
       // In SSR the above rule will apply to all p tags because first-child would be a style tag.
@@ -54,6 +54,28 @@ const listsStyles = css`
     }
   }
 `;
+const emojiStyles = css`
+  .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
+    display: inline-block;
+
+    .${EmojiSharedCssClassName.EMOJI_NODE} {
+      cursor: pointer;
+
+      &.${EmojiSharedCssClassName.EMOJI_IMAGE} > span {
+        /** needed for selection style to cover custom emoji image properly */
+        display: flex;
+      }
+    }
+
+    &.${akEditorSelectedNodeClassName} {
+      .${EmojiSharedCssClassName.EMOJI_SPRITE},
+        .${EmojiSharedCssClassName.EMOJI_IMAGE} {
+        border-radius: 2px;
+        ${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
+      }
+    }
+  }
+`;
 const contentStyles = props => css`
   .ProseMirror {
     outline: none;

package/dist/es2019/ui/styles.js

@@ -3,7 +3,4 @@ export { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 export { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 export const expandIconWrapperStyle = css`
   margin-left: -8px;
-`;
-export const clickSelectWrapperStyle = css`
-  user-select: all;
 `;

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.32.1";
+export const version = "187.32.3";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/labs/next/presets/universal.js

@@ -3,7 +3,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
 import { createEditorSelectionAPI } from '../../../selection-api/api';
-import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, emojiPlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { breakoutPlugin, collabEditPlugin, dataConsumerMarkPlugin, datePlugin, extensionPlugin, fragmentMarkPlugin, helpDialogPlugin, insertBlockPlugin, jiraIssuePlugin, layoutPlugin, toolbarListsIndentationPlugin, macroPlugin, maxContentSizePlugin, mediaPlugin, mentionsPlugin, panelPlugin, placeholderTextPlugin, rulePlugin, saveOnEnterPlugin, tasksAndDecisionsPlugin, textColorPlugin, statusPlugin, alignmentPlugin, indentationPlugin, customAutoformatPlugin, feedbackDialogPlugin, historyPlugin, expandPlugin, isExpandInsertionEnabled, scrollIntoViewPlugin, mobileDimensionsPlugin, findReplacePlugin, mobileSelectionPlugin, annotationPlugin, captionPlugin, avatarGroupPlugin, viewUpdateSubscriptionPlugin, beforePrimaryToolbarPlugin, codeBidiWarningPlugin, copyButtonPlugin, borderPlugin } from '../../../plugins';
+import { emojiPlugin } from '@atlaskit/editor-plugin-emoji';
 import { listPlugin } from '@atlaskit/editor-plugin-list';
 import { imageUploadPlugin } from '@atlaskit/editor-plugin-image-upload';
 import { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';

package/dist/esm/plugins/index.js

@@ -6,7 +6,6 @@ export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-mark
 export { default as codeBlockPlugin } from './code-block';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as datePlugin } from './date';
-export { emojiPlugin } from './emoji';
 export { default as extensionPlugin } from './extension';
 export { default as fakeTextCursorPlugin } from './fake-text-cursor';
 export { default as helpDialogPlugin } from './help-dialog';

package/dist/esm/plugins/media/toolbar/index.js

@@ -297,19 +297,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             minWidth: minWidth,
             maxWidth: maxWidth,
-            validate: function validate(value) {
-              if (value && (value < minWidth || value > maxWidth)) {
+            onChange: function onChange(valid) {
+              if (valid) {
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, true, 'warning')(editorView.state, dispatch, editorView);
               } else {
-                // remove decoration when:
-                // input is within min-max range or
-                // input is empty
                 hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaSingle, false)(editorView.state, dispatch, editorView);
               }
-              if (value === '') {
-                return false;
-              }
-              return true;
             },
             onSubmit: function onSubmit(_ref2) {
               var width = _ref2.width;

package/dist/esm/plugins/media/ui/PixelEntry/index.js

@@ -15,9 +15,9 @@ export var PixelEntry = function PixelEntry(_ref) {
     mediaWidth = _ref.mediaWidth,
     mediaHeight = _ref.mediaHeight,
     onSubmit = _ref.onSubmit,
-    validate = _ref.validate,
     minWidth = _ref.minWidth,
     maxWidth = _ref.maxWidth,
+    onChange = _ref.onChange,
     formatMessage = _ref.intl.formatMessage,
     showMigration = _ref.showMigration,
     onMigrate = _ref.onMigrate;
@@ -44,6 +44,9 @@ export var PixelEntry = function PixelEntry(_ref) {
 
   // Handle submit when user presses enter in form
   var handleOnSubmit = function handleOnSubmit(data) {
+    if (data.inputWidth === '' || data.inputHeight === '') {
+      return;
+    }
     if (onSubmit) {
       var widthToBeSumitted = data.inputWidth;
       var isInvalidInput = false;
@@ -69,46 +72,33 @@ export var PixelEntry = function PixelEntry(_ref) {
     }
   };
 
-  // Syncronous validation returning undefined for valid and string for invalid
-  var handleValidateWidth = useCallback(function (value) {
-    if (!validate || value === undefined) {
-      return;
-    }
-    if (validate) {
-      return validate(value) === true ? undefined : formatMessage(messages.validationFailedMessage);
-    }
-    return;
-  }, [validate, formatMessage]);
-
   // Handle updating computed fields based on
   var handleOnChange = useCallback(function (type) {
     return function (event) {
       var value = parseInt(event.currentTarget.value);
-      var newInputValue = isNaN(value) ? '' : parseInt(event.currentTarget.value);
+      var newInputValue = isNaN(value) ? '' : value;
+      var newWidth = '';
       switch (type) {
         case 'inputWidth':
           {
+            newWidth = newInputValue;
             setComputedWidth(newInputValue);
-            if (newInputValue) {
-              setComputedHeight(Math.round(ratioWidth * value));
-            } else {
-              setComputedHeight('');
-            }
+            var newHeight = newInputValue !== '' ? Math.round(ratioWidth * newInputValue) : '';
+            setComputedHeight(newHeight);
             break;
           }
         case 'inputHeight':
           {
             setComputedHeight(newInputValue);
-            if (newInputValue) {
-              setComputedWidth(Math.round(ratioHeight * value));
-            } else {
-              setComputedWidth('');
-            }
+            newWidth = newInputValue !== '' ? Math.round(ratioHeight * newInputValue) : '';
+            setComputedWidth(newWidth);
             break;
           }
       }
+      var isInvalidInputValid = newWidth !== '' && (newWidth < minWidth || newWidth > maxWidth);
+      onChange && onChange(isInvalidInputValid);
     };
-  }, [ratioHeight, ratioWidth]);
+  }, [minWidth, maxWidth, onChange, ratioWidth, ratioHeight]);
   if (showMigration) {
     return jsx(Tooltip, {
       content: formatMessage(messages.migrationButtonTooltip)
@@ -130,7 +120,6 @@ export var PixelEntry = function PixelEntry(_ref) {
     }, jsx(Field, {
       key: "inputWidth",
       name: "inputWidth",
-      validate: handleValidateWidth,
       defaultValue: computedWidth
     }, function (_ref3) {
       var fieldProps = _ref3.fieldProps;