@atlaskit/editor-core 209.2.0 → 209.2.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 209.2.2
+
+### Patch Changes
+
+- [#189737](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189737)
+  [`db61cedd893b2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/db61cedd893b2) -
+  Fix migrator hook order in editor-core
+- Updated dependencies
+
+## 209.2.1
+
+### Patch Changes
+
+- [#189696](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189696)
+  [`a28dd0703ccac`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a28dd0703ccac) -
+  [ux] Adjust emoji CSS selectors to be more specific/accurate and not target content byline
+- Updated dependencies
+
 ## 209.2.0
 
 ### Minor Changes

package/dist/cjs/ui/Appearance/Chromeless.js

@@ -15,7 +15,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _hooks = require("@atlaskit/editor-common/hooks");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
@@ -113,11 +112,14 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
   });
 }, _EditorContentContainer.default, ContentArea);
 var useEditorViewModePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, function (pluginInjectionApi) {
-  return (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -205,18 +207,21 @@ var Editor = exports.default = /*#__PURE__*/function (_React$Component) {
 }(_react.default.Component);
 (0, _defineProperty2.default)(Editor, "displayName", 'ChromelessEditorAppearance');
 var useMaxContentSizePluginState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
-  return {
-    maxContentSizeState: maxContentSizeState
-  };
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  var maxContentSizeReached = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['maxContentSize'], function (states) {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
     }
   };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  return {
+    maxContentSizeState: maxContentSizeState
+  };
 });
 function RenderWithPluginState(_ref2) {
   var renderChrome = _ref2.renderChrome,

package/dist/cjs/ui/Appearance/Comment/Comment.js

@@ -20,7 +20,6 @@ var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -120,11 +119,17 @@ var EditorContainer = (0, _platformFeatureFlagsReact.componentWithCondition)(fun
   });
 }, _EditorContentContainer.default, ContentArea);
 var useCommentEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  return (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
+      var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+      return {
+        maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    maxContentSizeReached = _useSharedPluginState.maxContentSizeReached,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
@@ -136,6 +141,8 @@ var useCommentEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFact
       mode: editorViewMode
     }
   };
+}, function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
@@ -144,8 +151,8 @@ var CommentEditorWithIntl = exports.CommentEditorWithIntl = function CommentEdit
     primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
   var primaryToolbarState = (0, _getPrimaryToolbarComponents.getPrimaryToolbarComponents)(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginState)(editorAPI, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
   var intl = (0, _reactIntlNext.useIntl)();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,

package/dist/cjs/ui/Appearance/FullPage/FullPage.js

@@ -68,17 +68,17 @@ var hasCustomComponents = function hasCustomComponents(components) {
   return true;
 };
 var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
-  var _sharedState$interact;
-  var sharedState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, function (pluginInjectionApi) {
-  var primaryToolbarComponents = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'editorViewMode.mode');
-  var interactionState = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'interaction.interactionState');
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
+      var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+      return {
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    interactionState = _useSharedPluginState.interactionState,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -88,6 +88,14 @@ var useFullPageEditorPluginsStates = (0, _hooks.sharedPluginStateHookMigratorFac
     },
     interactionState: interactionState
   };
+}, function (pluginInjectionApi) {
+  var _sharedState$interact;
+  var sharedState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 var FullPageEditor = exports.FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -37,7 +37,7 @@ var _media = require("./media");
 var _panel2 = require("./panel");
 var _status = require("./status");
 var _tasksAndDecisions = require("./tasks-and-decisions");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -116,6 +116,7 @@ var mentionsSelectionStylesWithSearchMatch = (0, _react2.css)(_templateObject4 |
 var mentionsStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t\t(in dark blue) have white text by default */\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
 var emojiStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
+var emojiStylesWithSelectorFixes = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror .", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ProseMirror\n\t\t:is(.", ", .", ") {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.ProseMirror .", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
@@ -150,7 +151,7 @@ var placeholderWrapStyles = (0, _react2.css)({
     whiteSpace: 'nowrap'
   }
 });
-var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
+var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
 
 // Make sure the first floating toolbar button has focus ring when focused via .focus()
 var firstFloatingToolbarButtonStyles = (0, _react2.css)({
@@ -168,9 +169,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), _editorSharedStyles.akEditorFullPageNarrowBreakout, _editorSharedStyles.akEditorGutterPaddingReduced) : null, (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? (0, _platformFeatureFlags.fg)('platform_editor_find_and_replace_improvements_1') ? _styles3.findReplaceStylesNewNoImportant : _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.taskItemStyles, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithVisualRefresh, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.taskDecisionIconWithoutVisualRefresh, (0, _status.statusStyles)(), (0, _status.statusNodeStyles)(), (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), (0, _styles.getSmartCardSharedStyles)(), _date.dateStyles, _date.dateNodeStyles, (0, _styles.embedCardStyles)(), _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), (0, _styles.pragmaticStylesLayoutFirstNodeResizeHandleFix)(), (0, _styles.pragmaticResizerStylesForTooltip)(), (0, _styles.pragmaticResizerStylesWithReducedEditorGutter)(), (0, _aiPanels.aiPanelStyles)(props.colorMode), firstBlockNodeStylesNew, (0, _platformFeatureFlags.fg)('platform_editor_vanilla_codebidi_warning') && _codeBidiWarning.codeBidiWarningStyles, _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -20,7 +20,6 @@ var _Transition = _interopRequireDefault(require("react-transition-group/Transit
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
-var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -180,11 +179,14 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 }(_react.default.PureComponent);
 var useContextPanelSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (pluginInjectionApi) {
+  return (0, _hooks.useSharedPluginStateWithSelector)(pluginInjectionApi, ['contextPanel'], function (states) {
+    var _states$contextPanelS;
+    return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['contextPanel']),
     contextPanelState = _useSharedPluginState.contextPanelState;
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, function (pluginInjectionApi) {
-  return (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'contextPanel.contents');
 });
 var SwappableContentArea = exports.SwappableContentArea = (0, _reactIntlNext.injectIntl)(SwappableContentAreaInner);
 function ContextPanel(props) {

package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js

@@ -345,7 +345,9 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _mentions.mentionsSelectionStyles, (0, _platformFeatureFlags.fg)('platform_editor_centre_mention_padding') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    _mentions.mentionsStylesMixin_platform_editor_centre_mention_padding,
+    _mentions.mentionsStylesMixin_platform_editor_centre_mention_padding, (0, _platformFeatureFlags.fg)('platform_editor_fix_emoji_style_selectors') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    _emoji.emojiStylesWithSelectorFixes :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     _emoji.emojiStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/cjs/ui/EditorContentContainer/styles/emoji.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.emojiStyles = void 0;
+exports.emojiStylesWithSelectorFixes = exports.emojiStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _emoji = require("@atlaskit/editor-common/emoji");
@@ -36,4 +36,25 @@ _selectionStyles.blanketSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 _selectionStyles.boxShadowSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.hideNativeBrowserTextSelectionStyles])));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+var emojiStylesWithSelectorFixes = exports.emojiStylesWithSelectorFixes = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_emoji.EmojiSharedCssClassName.EMOJI_CONTAINER), {
+  display: 'inline-block'
+}), ".ProseMirror :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
+  background: 'no-repeat transparent',
+  display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  height: "".concat(_emoji.defaultEmojiHeight, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
+  cursor: 'pointer',
+  verticalAlign: 'middle',
+  userSelect: 'all'
+}), ".ProseMirror .".concat(_editorSharedStyles.akEditorSelectedNodeClassName), (0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.blanketSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+_selectionStyles.boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 _selectionStyles.hideNativeBrowserTextSelectionStyles])));

package/dist/cjs/version-wrapper.js

@@ -5,4 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.version = exports.name = void 0;
 var name = exports.name = "@atlaskit/editor-core";
-var version = exports.version = "209.1.11";
+var version = exports.version = "209.2.1";

package/dist/es2019/ui/Appearance/Chromeless.js

@@ -7,8 +7,7 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -98,12 +97,15 @@ const EditorContainer = componentWithCondition(() => editorExperiment('platform_
   exposure: true
 }), EditorContentContainer, ContentArea);
 const useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], states => {
+    var _states$editorViewMod;
+    return states === null || states === void 0 ? void 0 : (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, pluginInjectionApi => {
   const {
     editorViewModeState
   } = useSharedPluginState(pluginInjectionApi, ['editorViewMode']);
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, pluginInjectionApi => {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -180,19 +182,22 @@ export default class Editor extends React.Component {
 }
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 const useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  const maxContentSizeReached = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize'], states => {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 ? void 0 : (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
+  return {
+    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
+      maxContentSizeReached
+    }
+  };
+}, pluginInjectionApi => {
   const {
     maxContentSizeState
   } = useSharedPluginState(pluginInjectionApi, ['maxContentSize']);
   return {
     maxContentSizeState
   };
-}, pluginInjectionApi => {
-  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  return {
-    maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
-      maxContentSizeReached
-    }
-  };
 });
 function RenderWithPluginState({
   renderChrome,

package/dist/es2019/ui/Appearance/Comment/Comment.js

@@ -10,12 +10,11 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -123,11 +122,18 @@ const EditorContainer = componentWithCondition(() => editorExperiment('platform_
   exposure: true
 }), EditorContentContainer, ContentArea);
 const useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, pluginInjectionApi => {
-  const maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  const {
+    maxContentSizeReached,
+    primaryToolbarComponents,
+    editorViewMode
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], states => {
+    var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+    return {
+      maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+      primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached
@@ -139,6 +145,8 @@ const useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(plugi
       mode: editorViewMode
     }
   };
+}, pluginInjectionApi => {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 export const CommentEditorWithIntl = props => {
   const {

package/dist/es2019/ui/Appearance/FullPage/FullPage.js

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -52,17 +52,18 @@ const hasCustomComponents = components => {
   return true;
 };
 const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
-  var _sharedState$interact;
-  const sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, pluginInjectionApi => {
-  const primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  const editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  const interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  const {
+    interactionState,
+    primaryToolbarComponents,
+    editorViewMode
+  } = useSharedPluginStateWithSelector(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], states => {
+    var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+    return {
+      primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+      interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+      editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+    };
+  });
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -72,6 +73,14 @@ const useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(plug
     },
     interactionState
   };
+}, pluginInjectionApi => {
+  var _sharedState$interact;
+  const sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 export const FullPageEditor = props => {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -238,6 +238,29 @@ const emojiStyles = css`
 		}
 	}
 `;
+const emojiStylesWithSelectorFixes = css`
+	.ProseMirror .${EmojiSharedCssClassName.EMOJI_CONTAINER} {
+		display: inline-block;
+	}
+
+	.ProseMirror
+		:is(.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}) {
+		background: no-repeat transparent;
+		display: inline-block;
+		height: ${defaultEmojiHeight}px;
+		max-height: ${defaultEmojiHeight}px;
+		cursor: pointer;
+		vertical-align: middle;
+		user-select: all;
+	}
+
+	.ProseMirror .${akEditorSelectedNodeClassName} {
+		.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE} {
+			border-radius: 2px;
+			${getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow])}
+		}
+	}
+`;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const placeholderStyles = css({
@@ -440,7 +463,7 @@ const legacyContentStyles = props => css`
 	${mentionNodeStyles}
 	${fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding}
 	${expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles}
-  ${emojiStyles}
+  ${fg('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles}
   ${tasksAndDecisionsStyles}
   ${gridStyles}
   ${linkStyles}

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

@@ -10,10 +10,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 const ANIM_SPEED_MS = 500;
@@ -157,12 +156,15 @@ class SwappableContentAreaInner extends React.PureComponent {
   }
 }
 const useContextPanelSharedState = sharedPluginStateHookMigratorFactory(pluginInjectionApi => {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['contextPanel'], states => {
+    var _states$contextPanelS;
+    return states === null || states === void 0 ? void 0 : (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, pluginInjectionApi => {
   const {
     contextPanelState
   } = useSharedPluginState(pluginInjectionApi, ['contextPanel']);
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, pluginInjectionApi => {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
 });
 export const SwappableContentArea = injectIntl(SwappableContentAreaInner);
 export function ContextPanel(props) {

package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js

@@ -29,7 +29,7 @@ import { cursorStyles } from './styles/cursorStyles';
 import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
-import { emojiStyles } from './styles/emoji';
+import { emojiStyles, emojiStylesWithSelectorFixes } from './styles/emoji';
 import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
 import { extensionStyles } from './styles/extensionStyles';
 import { findReplaceStyles, findReplaceStylesNew, findReplaceStylesNewNoImportant } from './styles/findReplaceStyles';
@@ -340,7 +340,9 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    mentionsStylesMixin_platform_editor_centre_mention_padding,
+    mentionsStylesMixin_platform_editor_centre_mention_padding, fg('platform_editor_fix_emoji_style_selectors') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    emojiStylesWithSelectorFixes :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     emojiStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/es2019/ui/EditorContentContainer/styles/emoji.js

@@ -37,4 +37,35 @@ export const emojiStyles = css({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     hideNativeBrowserTextSelectionStyles]
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export const emojiStylesWithSelectorFixes = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.ProseMirror .${EmojiSharedCssClassName.EMOJI_CONTAINER}`]: {
+    display: 'inline-block'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.ProseMirror :is(.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE})`]: {
+    background: 'no-repeat transparent',
+    display: 'inline-block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    height: `${defaultEmojiHeight}px`,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    maxHeight: `${defaultEmojiHeight}px`,
+    cursor: 'pointer',
+    verticalAlign: 'middle',
+    userSelect: 'all'
+  },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+  [`.ProseMirror .${akEditorSelectedNodeClassName}`]: {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+    [`.${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_IMAGE}`]: [emojiSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    blanketSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    boxShadowSelectionStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    hideNativeBrowserTextSelectionStyles]
+  }
 });

package/dist/es2019/version-wrapper.js

@@ -1,2 +1,2 @@
 export const name = "@atlaskit/editor-core";
-export const version = "209.1.11";
+export const version = "209.2.1";

package/dist/esm/ui/Appearance/Chromeless.js

@@ -14,8 +14,7 @@ import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
@@ -107,11 +106,14 @@ var EditorContainer = componentWithCondition(function () {
   });
 }, EditorContentContainer, ContentArea);
 var useEditorViewModePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['editorViewMode'], function (states) {
+    var _states$editorViewMod;
+    return states === null || states === void 0 || (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['editorViewMode']),
     editorViewModeState = _useSharedPluginState.editorViewModeState;
   return editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
-}, function (pluginInjectionApi) {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
 });
 
 /**
@@ -200,18 +202,21 @@ var Editor = /*#__PURE__*/function (_React$Component) {
 _defineProperty(Editor, "displayName", 'ChromelessEditorAppearance');
 export { Editor as default };
 var useMaxContentSizePluginState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
-    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
-  return {
-    maxContentSizeState: maxContentSizeState
-  };
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
+  var maxContentSizeReached = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize'], function (states) {
+    var _states$maxContentSiz;
+    return states === null || states === void 0 || (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached;
+  });
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
     }
   };
+}, function (pluginInjectionApi) {
+  var _useSharedPluginState2 = useSharedPluginState(pluginInjectionApi, ['maxContentSize']),
+    maxContentSizeState = _useSharedPluginState2.maxContentSizeState;
+  return {
+    maxContentSizeState: maxContentSizeState
+  };
 });
 function RenderWithPluginState(_ref2) {
   var renderChrome = _ref2.renderChrome,

package/dist/esm/ui/Appearance/Comment/Comment.js

@@ -14,12 +14,11 @@ import classnames from 'classnames';
 import { useIntl } from 'react-intl-next';
 import ButtonGroup from '@atlaskit/button/button-group';
 import Button from '@atlaskit/button/new';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import messages from '@atlaskit/editor-common/messages';
 import { GRID_GUTTER } from '@atlaskit/editor-common/styles';
 import { WidthConsumer, WidthProvider } from '@atlaskit/editor-common/ui';
 import { ToolbarArrowKeyNavigationProvider } from '@atlaskit/editor-common/ui-menu';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { tableCommentEditorStyles } from '@atlaskit/editor-plugins/table/ui/common-styles';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -112,11 +111,17 @@ var EditorContainer = componentWithCondition(function () {
   });
 }, EditorContentContainer, ContentArea);
 var useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
-}, function (pluginInjectionApi) {
-  var maxContentSizeReached = useSharedPluginStateSelector(pluginInjectionApi, 'maxContentSize.maxContentSizeReached');
-  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode'], function (states) {
+      var _states$maxContentSiz, _states$primaryToolba, _states$editorViewMod;
+      return {
+        maxContentSizeReached: (_states$maxContentSiz = states.maxContentSizeState) === null || _states$maxContentSiz === void 0 ? void 0 : _states$maxContentSiz.maxContentSizeReached,
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    maxContentSizeReached = _useSharedPluginState.maxContentSizeReached,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     maxContentSizeState: maxContentSizeReached === undefined ? undefined : {
       maxContentSizeReached: maxContentSizeReached
@@ -128,6 +133,8 @@ var useCommentEditorPluginsStates = sharedPluginStateHookMigratorFactory(functio
       mode: editorViewMode
     }
   };
+}, function (pluginInjectionApi) {
+  return useSharedPluginState(pluginInjectionApi, ['maxContentSize', 'primaryToolbar', 'editorViewMode']);
 });
 export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
   var editorAPI = props.editorAPI;
@@ -136,8 +143,8 @@ export var CommentEditorWithIntl = function CommentEditorWithIntl(props) {
     primaryToolbarHookState = _useCommentEditorPlug.primaryToolbarState,
     editorViewModeState = _useCommentEditorPlug.editorViewModeState;
   var primaryToolbarState = getPrimaryToolbarComponents(editorAPI, primaryToolbarHookState === null || primaryToolbarHookState === void 0 ? void 0 : primaryToolbarHookState.components);
-  var _useSharedPluginState = useSharedPluginState(editorAPI, ['media']),
-    mediaState = _useSharedPluginState.mediaState;
+  var _useSharedPluginState2 = useSharedPluginState(editorAPI, ['media']),
+    mediaState = _useSharedPluginState2.mediaState;
   var intl = useIntl();
   var editorDOMElement = props.editorDOMElement,
     editorView = props.editorView,

package/dist/esm/ui/Appearance/FullPage/FullPage.js

@@ -8,7 +8,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { browser } from '@atlaskit/editor-common/browser';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { ContextPanelWidthProvider } from '@atlaskit/editor-common/ui';
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { FULL_PAGE_EDITOR_TOOLBAR_HEIGHT } from '@atlaskit/editor-shared-styles';
@@ -58,17 +58,17 @@ var hasCustomComponents = function hasCustomComponents(components) {
   return true;
 };
 var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
-  var _sharedState$interact;
-  var sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
-  return {
-    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
-    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
-    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
-  };
-}, function (pluginInjectionApi) {
-  var primaryToolbarComponents = useSharedPluginStateSelector(pluginInjectionApi, 'primaryToolbar.components');
-  var editorViewMode = useSharedPluginStateSelector(pluginInjectionApi, 'editorViewMode.mode');
-  var interactionState = useSharedPluginStateSelector(pluginInjectionApi, 'interaction.interactionState');
+  var _useSharedPluginState = useSharedPluginStateWithSelector(pluginInjectionApi, ['primaryToolbar', 'interaction', 'editorViewMode'], function (states) {
+      var _states$primaryToolba, _states$interactionSt, _states$editorViewMod;
+      return {
+        primaryToolbarComponents: (_states$primaryToolba = states.primaryToolbarState) === null || _states$primaryToolba === void 0 ? void 0 : _states$primaryToolba.components,
+        interactionState: (_states$interactionSt = states.interactionState) === null || _states$interactionSt === void 0 ? void 0 : _states$interactionSt.interactionState,
+        editorViewMode: (_states$editorViewMod = states.editorViewModeState) === null || _states$editorViewMod === void 0 ? void 0 : _states$editorViewMod.mode
+      };
+    }),
+    interactionState = _useSharedPluginState.interactionState,
+    primaryToolbarComponents = _useSharedPluginState.primaryToolbarComponents,
+    editorViewMode = _useSharedPluginState.editorViewMode;
   return {
     primaryToolbarState: !primaryToolbarComponents ? undefined : {
       components: primaryToolbarComponents
@@ -78,6 +78,14 @@ var useFullPageEditorPluginsStates = sharedPluginStateHookMigratorFactory(functi
     },
     interactionState: interactionState
   };
+}, function (pluginInjectionApi) {
+  var _sharedState$interact;
+  var sharedState = useSharedPluginState(pluginInjectionApi, ['editorViewMode', 'primaryToolbar', 'interaction']);
+  return {
+    primaryToolbarState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.primaryToolbarState,
+    editorViewModeState: sharedState === null || sharedState === void 0 ? void 0 : sharedState.editorViewModeState,
+    interactionState: sharedState === null || sharedState === void 0 || (_sharedState$interact = sharedState.interactionState) === null || _sharedState$interact === void 0 ? void 0 : _sharedState$interact.interactionState
+  };
 });
 export var FullPageEditor = function FullPageEditor(props) {
   var _scrollContentContain, _scrollContentContain2, _scrollContentContain3, _wrapperElementRef$cu;

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0, _templateObject1, _templateObject10, _templateObject11, _templateObject12;
 /* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
 /* eslint-disable react-hooks/rules-of-hooks */
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
@@ -110,6 +110,7 @@ var mentionsSelectionStylesWithSearchMatch = css(_templateObject4 || (_templateO
 var mentionsStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t\t(in dark blue) have white text by default */\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, getSelectionStyles([SelectionStyle.BoxShadow, SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", MentionSharedCssClassName.MENTION_CONTAINER, akEditorSelectedNodeClassName, akEditorSelectedBorderSize, akEditorDeleteBorder, "var(--ds-background-danger, ".concat(akEditorDeleteBackgroundWithOpacity, ")"), MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
 var listsStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t/* In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\tThe following rule resets the first p tag back to its original margin\n\t\t\tdefined in packages/editor/editor-common/src/styles/shared/paragraph.ts */\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n    /* This prevents https://product-fabric.atlassian.net/browse/ED-20924 */\n    &:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", blockNodesVerticalMargin, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, browser.safari ? codeBlockInListSafariFix : '');
 var emojiStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n\t.", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.", ", .", " {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
+var emojiStylesWithSelectorFixes = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror .", " {\n\t\tdisplay: inline-block;\n\t}\n\n\t.ProseMirror\n\t\t:is(.", ", .", ") {\n\t\tbackground: no-repeat transparent;\n\t\tdisplay: inline-block;\n\t\theight: ", "px;\n\t\tmax-height: ", "px;\n\t\tcursor: pointer;\n\t\tvertical-align: middle;\n\t\tuser-select: all;\n\t}\n\n\t.ProseMirror .", " {\n\t\t.", ", .", " {\n\t\t\tborder-radius: 2px;\n\t\t\t", "\n\t\t}\n\t}\n"])), EmojiSharedCssClassName.EMOJI_CONTAINER, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, defaultEmojiHeight, defaultEmojiHeight, akEditorSelectedNodeClassName, EmojiSharedCssClassName.EMOJI_SPRITE, EmojiSharedCssClassName.EMOJI_IMAGE, getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.BoxShadow]));
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var placeholderStyles = css({
@@ -144,7 +145,7 @@ var placeholderWrapStyles = css({
     whiteSpace: 'nowrap'
   }
 });
-var firstBlockNodeStylesNew = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
+var firstBlockNodeStylesNew = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), PanelSharedCssClassName.prefix, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, expandClassNames.prefix);
 
 // Make sure the first floating toolbar button has focus ring when focused via .focus()
 var firstFloatingToolbarButtonStyles = css({
@@ -162,9 +163,9 @@ var akEditorBreakpointForSmallDevice = "1266px";
 // Under editor experiment platform_editor_core_static_emotion
 // If you are making changes to this file, please make sure to update in EditorContentContainer.tsx as well
 var legacyContentStyles = function legacyContentStyles(props) {
-  return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced) : null, editorFontSize({
+  return css(_templateObject0 || (_templateObject0 = _taggedTemplateLiteral(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t", "\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t *    https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  /* Switch between the two icons based on the visual refresh feature gate */\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\t", "\n\n  .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n     is bigger than the others, new ADS icon does not have this issue\n  */\n\t", "\n"])), akEditorGutterPadding, akEditorGutterPaddingDynamic(), akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, akEditorCalculatedWideLayoutWidth, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t\t\t\t@container editor-area (max-width: ", "px) {\n\t\t\t\t\t--ak-editor--large-gutter-padding: ", "px;\n\t\t\t\t}\n\t\t\t"])), akEditorFullPageNarrowBreakout, akEditorGutterPaddingReduced) : null, editorFontSize({
     theme: props.theme
-  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject1 || (_templateObject1 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? fg('platform_editor_find_and_replace_improvements_1') ? findReplaceStylesNewNoImportant : findReplaceStylesNew : findReplaceStyles, textHighlightStyle, taskDecisionStyles, taskItemStyles, fg('platform-visual-refresh-icons') && decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') && decisionIconWithoutVisualRefresh, statusStyles(), statusNodeStyles(), annotationSharedStyles(), smartCardStyles(), getSmartCardSharedStyles(), dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), pragmaticResizerStylesWithReducedEditorGutter(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
+  }), whitespaceSharedStyles, paragraphSharedStyles(props.typographyTheme), listsSharedStyles, indentationSharedStyles, shadowSharedStyle, InlineNodeViewSharedStyles, fg('platform_editor_hide_cursor_when_pm_hideselection') ? css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, editorExperiment('platform_editor_advanced_code_blocks', true) ? css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, placeholderTextStyles, fg('platform_editor_system_fake_text_highlight_colour') && placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, editorExperiment('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, codeBlockStyles(), blocktypeStyles(props.typographyTheme), codeMarkSharedStyles(), textColorStyles, backgroundColorStyles(), listsStyles, ruleStyles(), mediaStyles(), layoutStyles(props.viewMode), fg('confluence_team_presence_scroll_to_pointer') ? telepointerStyle : telepointerStyleWithInitialOnly, gapCursorStyles, panelStyles(), mentionsStyles, mentionNodeStyles, fg('platform_editor_centre_mention_padding') && mentionNodeStylesMixin_fg_platform_editor_centre_mention_padding, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) && fg('platform_editor_find_and_replace_improvements_1') ? mentionsSelectionStylesWithSearchMatch : mentionSelectionStyles, fg('platform_editor_fix_emoji_style_selectors') ? emojiStylesWithSelectorFixes : emojiStyles, tasksAndDecisionsStyles, gridStyles, linkStyles, blockMarksSharedStyles, dateSharedStyle, extensionStyles, expandStyles(), expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? fg('platform_editor_find_and_replace_improvements_1') ? findReplaceStylesNewNoImportant : findReplaceStylesNew : findReplaceStyles, textHighlightStyle, taskDecisionStyles, taskItemStyles, fg('platform-visual-refresh-icons') && decisionIconWithVisualRefresh, !fg('platform-visual-refresh-icons') && decisionIconWithoutVisualRefresh, statusStyles(), statusNodeStyles(), annotationSharedStyles(), smartCardStyles(), getSmartCardSharedStyles(), dateStyles, dateNodeStyles, embedCardStyles(), unsupportedStyles, resizerStyles, pragmaticResizerStyles(), pragmaticStylesLayoutFirstNodeResizeHandleFix(), pragmaticResizerStylesForTooltip(), pragmaticResizerStylesWithReducedEditorGutter(), aiPanelStyles(props.colorMode), firstBlockNodeStylesNew, fg('platform_editor_vanilla_codebidi_warning') && codeBidiWarningStyles, MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !fg('platform-visual-refresh-icons') ? css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
 };
 export var createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/React.forwardRef(function (props, ref) {

package/dist/esm/ui/ContextPanel/index.js

@@ -19,10 +19,9 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import Transition from 'react-transition-group/Transition';
-import { sharedPluginStateHookMigratorFactory, useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { sharedPluginStateHookMigratorFactory, useSharedPluginState, useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { contextPanelMessages } from '@atlaskit/editor-common/messages';
 import { ContextPanelConsumer } from '@atlaskit/editor-common/ui';
-import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { akEditorContextPanelWidth, akEditorSwoopCubicBezier } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 var ANIM_SPEED_MS = 500;
@@ -175,11 +174,14 @@ var SwappableContentAreaInner = /*#__PURE__*/function (_React$PureComponent) {
   }]);
 }(React.PureComponent);
 var useContextPanelSharedState = sharedPluginStateHookMigratorFactory(function (pluginInjectionApi) {
+  return useSharedPluginStateWithSelector(pluginInjectionApi, ['contextPanel'], function (states) {
+    var _states$contextPanelS;
+    return states === null || states === void 0 || (_states$contextPanelS = states.contextPanelState) === null || _states$contextPanelS === void 0 ? void 0 : _states$contextPanelS.contents;
+  });
+}, function (pluginInjectionApi) {
   var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['contextPanel']),
     contextPanelState = _useSharedPluginState.contextPanelState;
   return contextPanelState === null || contextPanelState === void 0 ? void 0 : contextPanelState.contents;
-}, function (pluginInjectionApi) {
-  return useSharedPluginStateSelector(pluginInjectionApi, 'contextPanel.contents');
 });
 export var SwappableContentArea = injectIntl(SwappableContentAreaInner);
 export function ContextPanel(props) {

package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js

@@ -29,7 +29,7 @@ import { cursorStyles } from './styles/cursorStyles';
 import { dateStyles, dateVanillaStyles } from './styles/dateStyles';
 import { editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
 import { embedCardStyles } from './styles/embedCardStyles';
-import { emojiStyles } from './styles/emoji';
+import { emojiStyles, emojiStylesWithSelectorFixes } from './styles/emoji';
 import { expandStyles, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes } from './styles/expandStyles';
 import { extensionStyles } from './styles/extensionStyles';
 import { findReplaceStyles, findReplaceStylesNew, findReplaceStylesNewNoImportant } from './styles/findReplaceStyles';
@@ -337,7 +337,9 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     mentionsSelectionStyles, fg('platform_editor_centre_mention_padding') &&
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
-    mentionsStylesMixin_platform_editor_centre_mention_padding,
+    mentionsStylesMixin_platform_editor_centre_mention_padding, fg('platform_editor_fix_emoji_style_selectors') ?
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+    emojiStylesWithSelectorFixes :
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
     emojiStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values

package/dist/esm/ui/EditorContentContainer/styles/emoji.js

@@ -28,4 +28,25 @@ blanketSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 boxShadowSelectionStyles,
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+hideNativeBrowserTextSelectionStyles])));
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
+export var emojiStylesWithSelectorFixes = css(_defineProperty(_defineProperty(_defineProperty({}, ".ProseMirror .".concat(EmojiSharedCssClassName.EMOJI_CONTAINER), {
+  display: 'inline-block'
+}), ".ProseMirror :is(.".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE, ")"), {
+  background: 'no-repeat transparent',
+  display: 'inline-block',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  height: "".concat(defaultEmojiHeight, "px"),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+  maxHeight: "".concat(defaultEmojiHeight, "px"),
+  cursor: 'pointer',
+  verticalAlign: 'middle',
+  userSelect: 'all'
+}), ".ProseMirror .".concat(akEditorSelectedNodeClassName), _defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_IMAGE), [emojiSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+blanketSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
+boxShadowSelectionStyles,
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
 hideNativeBrowserTextSelectionStyles])));

package/dist/esm/version-wrapper.js

@@ -1,2 +1,2 @@
 export var name = "@atlaskit/editor-core";
-export var version = "209.1.11";
+export var version = "209.2.1";

package/dist/types/ui/EditorContentContainer/styles/emoji.d.ts

@@ -1 +1,2 @@
 export declare const emojiStyles: import("@emotion/react").SerializedStyles;
+export declare const emojiStylesWithSelectorFixes: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/EditorContentContainer/styles/emoji.d.ts

@@ -1 +1,2 @@
 export declare const emojiStyles: import("@emotion/react").SerializedStyles;
+export declare const emojiStylesWithSelectorFixes: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "209.2.0",
+	"version": "209.2.2",
 	"description": "A package contains Atlassian editor core functionality",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/emoji": "^69.3.0",
-		"@atlaskit/icon": "^27.5.0",
+		"@atlaskit/icon": "^27.6.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/media-card": "^79.4.0",
 		"@atlaskit/mention": "^24.2.0",
@@ -103,8 +103,8 @@
 		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/renderer": "^120.1.0",
-		"@atlaskit/section-message": "^8.2.0",
-		"@atlaskit/smart-card": "^40.4.0",
+		"@atlaskit/section-message": "^8.3.0",
+		"@atlaskit/smart-card": "^40.5.0",
 		"@atlaskit/synchrony-test-helpers": "workspace:^",
 		"@atlaskit/toggle": "^15.0.0",
 		"@atlaskit/util-data-test": "^18.0.0",
@@ -576,6 +576,9 @@
 		"platform_editor_task_check_status_fix": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform_editor_fix_emoji_style_selectors": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {