@atlaskit/editor-core 197.2.6 → 197.3.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @atlaskit/editor-core
 
+## 197.3.0
+
+### Minor Changes
+
+- [#136891](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136891)
+  [`388780c6348e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/388780c6348e9) -
+  Pass emoji provider via preset
+- [#137755](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137755)
+  [`f3d004d4e3a3e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f3d004d4e3a3e) -
+  ED-24650 fix nested node jittering issue
+
+### Patch Changes
+
+- [#137404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137404)
+  [`ca03548656c8e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca03548656c8e) -
+  ED-24744 Align padding of layout and expand when nested dnd is enabled
+- [#137736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137736)
+  [`2a88fdd213838`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2a88fdd213838) -
+  Introducing new smaller refined entry-points for editor-common to reduce bundle size.
+- [#137404](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137404)
+  [`adae1f3dc8fca`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/adae1f3dc8fca) -
+  Switches Support Table in Comment features to use Statsig experiment instead of a Feature Gate.
+- [#137800](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137800)
+  [`62a2ca89af70c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62a2ca89af70c) -
+  Fix toolbar not showing up in SSR env
+- Updated dependencies
+
+## 197.2.7
+
+### Patch Changes
+
+- [#136485](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/136485)
+  [`96d4b8a73c2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/96d4b8a73c2ea) -
+  Refactored table styles so that it is inside the tables plugin and not in the editors critical
+  path.
+
 ## 197.2.6
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -10,6 +10,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _utils = require("@atlaskit/editor-common/utils");
 var _analytics = require("@atlaskit/editor-common/utils/analytics");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -18,8 +19,8 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _eventDispatcher = require("../event-dispatcher");
 var _action = require("../utils/action");
 var _deprecationWarnings = _interopRequireDefault(require("../utils/deprecation-warnings"));
-var _document = require("../utils/document");
 var _nodesByLocalIds = require("../utils/nodes-by-localIds");
+var _processRawFragmentValue = require("../utils/processRawFragmentValue");
 // TODO: ED-21786
 // Please, do not copy or use this kind of code below
 // @ts-ignore
@@ -367,7 +368,7 @@ var EditorActions = exports.default = /*#__PURE__*/function () {
         return true;
       }
       var schema = state.schema;
-      var content = Array.isArray(rawValue) ? (0, _document.processRawFragmentValue)(schema, rawValue) : (0, _utils.processRawValue)(schema, rawValue);
+      var content = Array.isArray(rawValue) ? (0, _processRawFragmentValue.processRawFragmentValue)(schema, rawValue) : (0, _processRawValue.processRawValue)(schema, rawValue);
       if (!content) {
         return false;
       }

package/dist/cjs/composable-editor/editor-internal.js

@@ -177,7 +177,8 @@ function ReactEditorViewContextWrapper(props) {
   (0, _useProviders.useProviders)({
     contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
     mediaProvider: (_props$editorProps$me = props.editorProps.media) === null || _props$editorProps$me === void 0 ? void 0 : _props$editorProps$me.provider,
-    cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 || (_props$editorProps$li = _props$editorProps$li.smartLinks) === null || _props$editorProps$li === void 0 ? void 0 : _props$editorProps$li.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider
+    cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 || (_props$editorProps$li = _props$editorProps$li.smartLinks) === null || _props$editorProps$li === void 0 ? void 0 : _props$editorProps$li.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
+    emojiProvider: props.editorProps.emojiProvider
   });
   return (0, _react2.jsx)(_ReactEditorView.default, (0, _extends2.default)({}, props, {
     setEditorApi: setEditorAPI

package/dist/cjs/composable-editor/hooks/useProviders.js

@@ -8,6 +8,7 @@ exports.useProviders = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _context2 = require("../../presets/context");
 /**
  * This hook is used to replace the old approach of using the `providerFactory`.
@@ -20,7 +21,8 @@ var _context2 = require("../../presets/context");
 var useProviders = exports.useProviders = function useProviders(_ref) {
   var contextIdentifierProvider = _ref.contextIdentifierProvider,
     mediaProvider = _ref.mediaProvider,
-    cardProvider = _ref.cardProvider;
+    cardProvider = _ref.cardProvider,
+    emojiProvider = _ref.emojiProvider;
   var editorApi = (0, _context2.usePresetContext)();
   (0, _react.useEffect)(function () {
     function setProvider() {
@@ -68,4 +70,12 @@ var useProviders = exports.useProviders = function useProviders(_ref) {
       editorApi === null || editorApi === void 0 || (_editorApi$card = editorApi.card) === null || _editorApi$card === void 0 || _editorApi$card.actions.setProvider(cardProvider);
     }
   }, [cardProvider, editorApi]);
+  (0, _react.useEffect)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_get_emoji_provider_from_config')) {
+      if (emojiProvider) {
+        var _editorApi$emoji;
+        editorApi === null || editorApi === void 0 || (_editorApi$emoji = editorApi.emoji) === null || _editorApi$emoji === void 0 || _editorApi$emoji.actions.setProvider(emojiProvider);
+      }
+    }
+  }, [emojiProvider, editorApi]);
 };

package/dist/cjs/composable-editor/utils/handleProviders.js

@@ -28,7 +28,9 @@ function handleProviders(providerFactory, _ref, extensionProvider, quickInsertPr
     autoformattingProvider = _ref.autoformattingProvider,
     searchProvider = _ref.searchProvider,
     cardProvider = _ref.cardProvider;
-  providerFactory.setProvider('emojiProvider', emojiProvider);
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_get_emoji_provider_from_config')) {
+    providerFactory.setProvider('emojiProvider', emojiProvider);
+  }
   providerFactory.setProvider('mentionProvider', mentionProvider);
   providerFactory.setProvider('taskDecisionProvider', taskDecisionProvider);
   providerFactory.setProvider('contextIdentifierProvider', contextIdentifierProvider);

package/dist/cjs/create-editor/ReactEditorView.js

@@ -19,18 +19,21 @@ var _reactIntlNext = require("react-intl-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _browser = require("@atlaskit/editor-common/browser");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _countNodes2 = require("@atlaskit/editor-common/count-nodes");
 var _normalizeFeatureFlags = require("@atlaskit/editor-common/normalize-feature-flags");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
+var _measureRender = require("@atlaskit/editor-common/performance/measure-render");
+var _navigation = require("@atlaskit/editor-common/performance/navigation");
 var _preset = require("@atlaskit/editor-common/preset");
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _ufo = require("@atlaskit/editor-common/ufo");
-var _utils = require("@atlaskit/editor-common/utils");
 var _analytics2 = require("@atlaskit/editor-common/utils/analytics");
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _eventDispatcher = require("../event-dispatcher");
 var _context = require("../presets/context");
-var _document = require("../utils/document");
 var _findChangedNodesFromTransaction = require("../utils/findChangedNodesFromTransaction");
+var _getNodesCount = require("../utils/getNodesCount");
 var _isFullPage = require("../utils/is-full-page");
 var _RenderTracking = require("../utils/performance/components/RenderTracking");
 var _measureEnum = _interopRequireDefault(require("../utils/performance/measure-enum"));
@@ -215,7 +218,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       _this.contentTransformer = contentTransformerProvider ? contentTransformerProvider(schema) : undefined;
       var doc;
       if (options.doc) {
-        doc = (0, _utils.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
+        doc = (0, _processRawValue.processRawValue)(schema, options.doc, options.props.providerFactory, options.props.editorProps.sanitizePrivateContent, _this.contentTransformer, _this.dispatchAnalyticsEvent);
       }
       var api = _this.pluginInjectionAPI.api();
       var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState().mode) === 'view';
@@ -406,18 +409,18 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
       };
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createEditorView", function (node) {
-      (0, _utils.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
+      (0, _measureRender.measureRender)(_measureEnum.default.PROSEMIRROR_RENDERED, function (_ref3) {
         var _this$props$editorPro4, _proseMirrorRenderedT, _proseMirrorRenderedT2;
         var duration = _ref3.duration,
           startTime = _ref3.startTime,
           distortedDuration = _ref3.distortedDuration;
         var proseMirrorRenderedTracking = (_this$props$editorPro4 = _this.props.editorProps) === null || _this$props$editorPro4 === void 0 || (_this$props$editorPro4 = _this$props$editorPro4.performanceTracking) === null || _this$props$editorPro4 === void 0 ? void 0 : _this$props$editorPro4.proseMirrorRenderedTracking;
-        var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && (0, _utils.shouldForceTracking)();
+        var forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined';
         _this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? (0, _analytics2.getAnalyticsEventSeverity)(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : _consts.PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : _consts.PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
         if (_this.view) {
           var _this$pluginInjection2, _this$experienceStore10;
-          var nodes = (0, _document.getNodesCount)(_this.view.state.doc);
-          var ttfb = (0, _utils.getResponseEndTime)();
+          var nodes = (0, _getNodesCount.getNodesCount)(_this.view.state.doc);
+          var ttfb = (0, _navigation.getResponseEndTime)();
           var contextIdentifier = (_this$pluginInjection2 = _this.pluginInjectionAPI.api().base) === null || _this$pluginInjection2 === void 0 ? void 0 : _this$pluginInjection2.sharedState.currentState();
           _this.dispatchAnalyticsEvent({
             action: _analytics.ACTION.PROSEMIRROR_RENDERED,
@@ -624,7 +627,7 @@ var ReactEditorView = exports.ReactEditorView = /*#__PURE__*/function (_React$Co
   }, {
     key: "countNodes",
     value: function countNodes() {
-      return (0, _utils.countNodes)(this.editorState);
+      return (0, _countNodes2.countNodes)(this.editorState);
     }
   }, {
     key: "isTransactionTrackingExplicitlyDisabled",

package/dist/cjs/presets/universal.js

@@ -56,6 +56,7 @@ var _tasksAndDecisions = require("@atlaskit/editor-plugins/tasks-and-decisions")
 var _textColor = require("@atlaskit/editor-plugins/text-color");
 var _toolbarListsIndentation = require("@atlaskit/editor-plugins/toolbar-lists-indentation");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _isFullPage = require("../utils/is-full-page");
 var _versionWrapper = require("../version-wrapper");
 var _default = require("./default");
@@ -143,11 +144,16 @@ function createUniversalPresetInternal(_ref) {
     HighlightComponent: (_props$mention2 = props.mention) === null || _props$mention2 === void 0 ? void 0 : _props$mention2.HighlightComponent,
     profilecardProvider: (_props$mention3 = props.mention) === null || _props$mention3 === void 0 ? void 0 : _props$mention3.profilecardProvider
   }, initialPluginConfiguration === null || initialPluginConfiguration === void 0 ? void 0 : initialPluginConfiguration.mentionsPlugin)], Boolean(props.mentionProvider)).maybeAdd([_emoji.emojiPlugin, {
+    emojiProvider: props.emojiProvider,
     emojiNodeDataProvider: initialPluginConfiguration === null || initialPluginConfiguration === void 0 || (_initialPluginConfigu = initialPluginConfiguration.emoji) === null || _initialPluginConfigu === void 0 ? void 0 : _initialPluginConfigu.emojiNodeDataProvider
   }], Boolean(props.emojiProvider)).maybeAdd([_table.tablesPlugin, _objectSpread({
     tableOptions: !props.allowTables || typeof props.allowTables === 'boolean' ? {} : props.allowTables,
-    dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
-    isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && (0, _platformFeatureFlags.fg)('platform_editor_table_support_in_comment')),
+    dragAndDropEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tableDragAndDrop) && (isFullPage || (isComment || isChromeless) && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+      exposure: true
+    })),
+    isTableScalingEnabled: (featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.tablePreserveWidth) && (isFullPage || isComment && (0, _experiments.editorExperiment)('support_table_in_comment', true, {
+      exposure: true
+    })),
     allowContextualMenu: !isMobile,
     fullWidthEnabled: appearance === 'full-width',
     wasFullWidthEnabled: prevAppearance && prevAppearance === 'full-width',

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

@@ -11,7 +11,8 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
-var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _templateObject, _templateObject2; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var EXPAND_SELECTED_BACKGROUND = "var(--ds-background-neutral-subtle, rgba(255, 255, 255, 0.6))";
 var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
   return (0, _react.css)({
@@ -20,15 +21,19 @@ var EXPAND_ICON_COLOR = function EXPAND_ICON_COLOR() {
 };
 var DANGER_STATE_BACKGROUND_COLOR = "var(--ds-background-danger, ".concat(_colors.R50, ")");
 var DANGER_STATE_BORDER_COLOR = "var(--ds-border-danger, ".concat(_colors.R300, ")");
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> div.ak-editor-expand[data-node-type='nestedExpand'] {\n\t\t\t\t\tmargin-top: ", ";\n\t\t\t\t}\n\t\t\t"])), "var(--ds-space-050, 0.25rem)") : '';
+};
 
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var expandStyles = exports.expandStyles = function expandStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " > div {\n\t\tdisplay: flex;\n\t}\n\n\t.", " {\n\t\t", "\n\n\t\tcursor: pointer;\n\t\tbox-sizing: border-box;\n\n\t\ttd > & {\n\t\t\tmargin-top: 0;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(90deg);\n\t\t}\n\n\t\t&.", ":not(.danger) {\n\t\t\t", "\n\t\t}\n\n\t\t&.danger {\n\t\t\tbackground: ", ";\n\t\t\tborder-color: ", ";\n\t\t}\n\t}\n\n\t.ProseMirror\n\t\t> .", ",\n\t\t.", "\n\t\t> .", " {\n\t\tmargin-left: -", "px;\n\t\tmargin-right: -", "px;\n\t}\n\n\t.", " {\n\t\t", "\n\t\tcursor: text;\n\t\tpadding-top: 0px;\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", "\n\t}\n\n\t.", " {\n\t\t", ";\n\t\talign-items: center;\n\t\toverflow: visible;\n\t}\n\n\t.", " {\n\t\tbackground: ", ";\n\t\tborder-color: ", ";\n\n\t\t.", " {\n\t\t\tpadding-top: ", ";\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t.", " {\n\t\twidth: 100%;\n\t}\n\n\t/* stylelint-disable property-no-unknown, value-keyword-case */\n\t.", ":(.", ") {\n\t\t.expand-content-wrapper {\n\t\t\theight: auto;\n\t\t}\n\t}\n\t/* stylelint-enable property-no-unknown, value-keyword-case */\n\n\t.", ":not(.", ") {\n\t\t.ak-editor-expand__content {\n\t\t\tposition: absolute;\n\t\t\theight: 1px;\n\t\t\twidth: 1px;\n\t\t\toverflow: hidden;\n\t\t\tclip: rect(1px, 1px, 1px, 1px);\n\t\t\twhite-space: nowrap;\n\t\t}\n\n\t\t.", " svg {\n\t\t\t", ";\n\t\t\ttransform: rotate(0deg);\n\t\t}\n\n\t\t&:not(.", "):not(.danger) {\n\t\t\tbackground: transparent;\n\t\t\tborder-color: transparent;\n\n\t\t\t&:hover {\n\t\t\t\tborder-color: ", ";\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.expandClassNames.icon, _styles.expandClassNames.prefix, _styles.sharedExpandStyles.containerStyles({
     expanded: false,
     focused: false
-  })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset, _editorSharedStyles.akLayoutGutterOffset, _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
+  })(), _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.Border]), DANGER_STATE_BACKGROUND_COLOR, DANGER_STATE_BORDER_COLOR, _styles.expandClassNames.type('expand'), _styles.BreakoutCssClassName.BREAKOUT_MARK_DOM, _styles.expandClassNames.type('expand'), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _styles.expandClassNames.content, _styles.sharedExpandStyles.contentStyles({
     expanded: false,
     focused: false
-  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.expandClassNames.content, "var(--ds-space-100, 8px)", _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
+  })(), (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_expand_style_fix') && "overflow-x: clip;", _styles.expandClassNames.titleInput, _styles.sharedExpandStyles.titleInputStyles(), _styles.expandClassNames.titleContainer, _styles.sharedExpandStyles.titleContainerStyles(), _styles.expandClassNames.expanded, EXPAND_SELECTED_BACKGROUND, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.expandClassNames.content, "var(--ds-space-100, 8px)", firstNodeWithNotMarginTop(), _styles.expandClassNames.inputContainer, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.prefix, _styles.expandClassNames.expanded, _styles.expandClassNames.iconContainer, EXPAND_ICON_COLOR(), _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border, ".concat(_colors.N50A, ")"), EXPAND_SELECTED_BACKGROUND);
 };

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

@@ -22,6 +22,7 @@ var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
 var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
 var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
@@ -75,9 +76,9 @@ var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
   }
 });
 var contentStyles = function contentStyles(props) {
-  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\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\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In 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/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
+  return (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\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[contenteditable='false'] .taskItemView-content-wrap {\n\t\tpointer-events: none;\n\t\topacity: 0.7;\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.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t", "\n\t", "\n  ", "\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", ";\n\t", "\n\t", "\n\t", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  .panelView-content-wrap {\n\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\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In 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/* Link icon in the Atlaskit package\n     is bigger than the others\n  */\n\t.hyperlink-open-link {\n\t\tsvg {\n\t\t\tmax-width: 18px;\n\t\t}\n\t\t&[href] {\n\t\t\tpadding: 0 4px;\n\t\t}\n\t}\n"])), (0, _editorSharedStyles.editorFontSize)({
     theme: props.theme
-  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
+  }), _styles.whitespaceSharedStyles, _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), _media.mediaStyles, (0, _layout.layoutStyles)(props.viewMode), _collab.telepointerStyle, _selection.gapCursorStyles, (0, _platformFeatureFlags.fg)('platform_editor_move_table_styles_to_plugin') ? undefined : (0, _commonStyles.tableStyles)(props), (0, _panel.panelStyles)(), mentionsStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _status.statusStyles, (0, _styles.annotationSharedStyles)(), (0, _styles.smartCardStyles)(), _styles.smartCardSharedStyles, _date.dateStyles, _styles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _aiPanels.aiPanelStyles)(props.colorMode), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT);
 };
 var createEditorContentStyle = exports.createEditorContentStyle = function createEditorContentStyle(styles) {
   return /*#__PURE__*/_react.default.forwardRef(function (props, ref) {

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

@@ -25,8 +25,14 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var _templateObject, _templateObject2, _templateObject3; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
+  return (0, _experiments.editorExperiment)('nested-dnd', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
+  (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
+};
+
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px ", "px ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t> :not(style):first-child,\n\t\t\t\t\t> style:first-child + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child + span + *,\n\t\t\t\t\t> style:first-child + .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", " [data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tmin-width: 0;\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n             and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n           handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\tmargin-left: ", "px;\n\t\t\t}\n\n\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\t\t\t// This is because the default state already uses the same token and, as such, the hover style won't change anything.\n\t\t\t// https://product-fabric.atlassian.net/browse/DSP-4441\n\t\t\t/* Shows the border when cursor is inside a layout */\n\t\t\t&.selected [data-layout-column],\n\t\t\t&:hover [data-layout-column] {\n\t\t\t\tborder: ", "px solid\n\t\t\t\t\t", ";\n\t\t\t}\n\n\t\t\t&.selected.danger > [data-layout-column] {\n\t\t\t\tbackground-color: ", ";\n\t\t\t\tborder-color: ", ";\n\t\t\t}\n\n\t\t\t&.", ":not(.danger) {\n\t\t\t\t[data-layout-column] {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n"])), _styles.columnLayoutSharedStyle, "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N40A, ")"), _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth, viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, ".concat(_colors.N50A, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode);
 };

package/dist/cjs/ui/Toolbar/ToolbarWithSizeDetector.js

@@ -11,6 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _coreUtils = require("@atlaskit/editor-common/core-utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _widthDetector = require("@atlaskit/width-detector");
 var _isFullPage = require("../../utils/is-full-page");
@@ -45,7 +46,8 @@ var ToolbarWithSizeDetector = exports.ToolbarWithSizeDetector = function Toolbar
   var elementWidth = (0, _hooks.useElementWidth)(ref, {
     skip: typeof width !== 'undefined'
   });
-  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? undefined : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
+  var defaultToolbarSize = (0, _coreUtils.isSSR)() && (0, _isFullPage.isFullPage)(props.appearance) ? _types.ToolbarSize.XXL : undefined;
+  var toolbarSize = typeof width === 'undefined' && typeof elementWidth === 'undefined' ? defaultToolbarSize : (0, _toolbarSize.widthToToolbarSize)(width || elementWidth, props.appearance);
   var toolbarStyle = (0, _react.useMemo)(function () {
     var toolbarWidth = (0, _isFullPage.isFullPage)(props.appearance) && props.twoLineEditorToolbar ? _types.ToolbarSize.S : _types.ToolbarSize.M;
     var toolbarMinWidth = (0, _toolbarSize.toolbarSizeToWidth)(toolbarWidth, props.appearance);

package/dist/cjs/utils/getNodesCount.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodesCount = getNodesCount;
+function getNodesCount(node) {
+  var count = {};
+  node.nodesBetween(0, node.nodeSize - 2, function (node) {
+    count[node.type.name] = (count[node.type.name] || 0) + 1;
+  });
+  return count;
+}

package/dist/cjs/utils/index.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "getNodesCount", {
   enumerable: true,
   get: function get() {
-    return _document.getNodesCount;
+    return _getNodesCount.getNodesCount;
   }
 });
 Object.defineProperty(exports, "measurements", {
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "measurements", {
   }
 });
 exports.whichTransitionEvent = whichTransitionEvent;
-var _document = require("./document");
+var _getNodesCount = require("./getNodesCount");
 var _measureEnum = _interopRequireDefault(require("./performance/measure-enum"));
 /*
  * From Modernizr

package/dist/cjs/utils/performance/getTimeSince.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTimeSince = void 0;
+/**
+ * Calculate the difference between performance.now() and the given startTime.
+ * This allows for the timing to be overridable during tests.
+ *
+ * @param startTime DOMHighResTimeStamp
+ * @returns DOMHighResTimeStamp
+ */
+var getTimeSince = exports.getTimeSince = function getTimeSince(startTime) {
+  return performance.now() - startTime;
+};

package/dist/cjs/utils/performance/track-transactions.js

@@ -8,8 +8,9 @@ exports.TransactionTracker = exports.EVENT_NAME_VIEW_STATE_UPDATED = exports.EVE
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _isPerformanceApiAvailable = require("@atlaskit/editor-common/is-performance-api-available");
 var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
-var _utils = require("@atlaskit/editor-common/utils");
+var _getTimeSince = require("./getTimeSince");
 var EVENT_NAME_STATE_APPLY = exports.EVENT_NAME_STATE_APPLY = "\uD83E\uDD89 EditorView::state::apply";
 var EVENT_NAME_UPDATE_STATE = exports.EVENT_NAME_UPDATE_STATE = "\uD83E\uDD89 EditorView::updateState";
 var EVENT_NAME_VIEW_STATE_UPDATED = exports.EVENT_NAME_VIEW_STATE_UPDATED = "\uD83E\uDD89 EditorView::onEditorViewStateUpdated";
@@ -54,18 +55,18 @@ var TransactionTracker = exports.TransactionTracker = /*#__PURE__*/function () {
       };
     });
     (0, _defineProperty2.default)(this, "startMeasureSimple", function (measureName) {
-      if (!(0, _utils.isPerformanceAPIAvailable)()) {
+      if (!(0, _isPerformanceApiAvailable.isPerformanceAPIAvailable)()) {
         return;
       }
       _this.measureMap.set(measureName, performance.now());
     });
     (0, _defineProperty2.default)(this, "stopMeasureSimple", function (measureName, onMeasureComplete) {
-      if (!(0, _utils.isPerformanceAPIAvailable)()) {
+      if (!(0, _isPerformanceApiAvailable.isPerformanceAPIAvailable)()) {
         return;
       }
       var startTime = _this.measureMap.get(measureName);
       if (startTime) {
-        var _duration = (0, _utils.getTimeSince)(startTime);
+        var _duration = (0, _getTimeSince.getTimeSince)(startTime);
         _this.measureMap.delete(measureName);
         if (onMeasureComplete) {
           onMeasureComplete(_duration, startTime);

package/dist/cjs/utils/{document.js → processRawFragmentValue.js}

@@ -3,16 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getNodesCount = getNodesCount;
 exports.processRawFragmentValue = processRawFragmentValue;
-var _utils = require("@atlaskit/editor-common/utils");
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _model = require("@atlaskit/editor-prosemirror/model");
 function processRawFragmentValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
   if (!value) {
     return;
   }
   var adfEntities = value.map(function (item) {
-    return (0, _utils.processRawValue)(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
+    return (0, _processRawValue.processRawValue)(schema, item, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent);
   }).filter(function (item) {
     return Boolean(item);
   });
@@ -20,11 +19,4 @@ function processRawFragmentValue(schema, value, providerFactory, sanitizePrivate
     return;
   }
   return _model.Fragment.from(adfEntities);
-}
-function getNodesCount(node) {
-  var count = {};
-  node.nodesBetween(0, node.nodeSize - 2, function (node) {
-    count[node.type.name] = (count[node.type.name] || 0) + 1;
-  });
-  return count;
 }

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 = "197.2.6";
+var version = exports.version = "197.3.0";

package/dist/es2019/actions/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { findNodePosByLocalIds, isEmptyDocument, processRawValue, toJSON } from '@atlaskit/editor-common/utils';
+import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { findNodePosByLocalIds, isEmptyDocument, toJSON } from '@atlaskit/editor-common/utils';
 import { analyticsEventKey } from '@atlaskit/editor-common/utils/analytics';
 import { Node } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -7,8 +8,8 @@ import { findParentNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { createDispatch } from '../event-dispatcher';
 import { __temporaryFixForConfigPanel, getEditorValueWithMedia } from '../utils/action';
 import deprecationWarnings from '../utils/deprecation-warnings';
-import { processRawFragmentValue } from '../utils/document';
 import { findNodePosByFragmentLocalIds } from '../utils/nodes-by-localIds';
+import { processRawFragmentValue } from '../utils/processRawFragmentValue';
 
 // TODO: ED-21786
 // Please, do not copy or use this kind of code below

package/dist/es2019/composable-editor/editor-internal.js

@@ -171,7 +171,8 @@ function ReactEditorViewContextWrapper(props) {
   useProviders({
     contextIdentifierProvider: props.editorProps.contextIdentifierProvider,
     mediaProvider: (_props$editorProps$me = props.editorProps.media) === null || _props$editorProps$me === void 0 ? void 0 : _props$editorProps$me.provider,
-    cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 ? void 0 : (_props$editorProps$li2 = _props$editorProps$li.smartLinks) === null || _props$editorProps$li2 === void 0 ? void 0 : _props$editorProps$li2.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider
+    cardProvider: ((_props$editorProps$li = props.editorProps.linking) === null || _props$editorProps$li === void 0 ? void 0 : (_props$editorProps$li2 = _props$editorProps$li.smartLinks) === null || _props$editorProps$li2 === void 0 ? void 0 : _props$editorProps$li2.provider) || smartLinks && smartLinks.provider || UNSAFE_cards && UNSAFE_cards.provider,
+    emojiProvider: props.editorProps.emojiProvider
   });
   return jsx(ReactEditorView, _extends({}, props, {
     setEditorApi: setEditorAPI

package/dist/es2019/composable-editor/hooks/useProviders.js

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { usePresetContext } from '../../presets/context';
 /**
  * This hook is used to replace the old approach of using the `providerFactory`.
@@ -11,7 +12,8 @@ import { usePresetContext } from '../../presets/context';
 export const useProviders = ({
   contextIdentifierProvider,
   mediaProvider,
-  cardProvider
+  cardProvider,
+  emojiProvider
 }) => {
   const editorApi = usePresetContext();
   useEffect(() => {
@@ -39,4 +41,12 @@ export const useProviders = ({
       editorApi === null || editorApi === void 0 ? void 0 : (_editorApi$card = editorApi.card) === null || _editorApi$card === void 0 ? void 0 : _editorApi$card.actions.setProvider(cardProvider);
     }
   }, [cardProvider, editorApi]);
+  useEffect(() => {
+    if (fg('platform_editor_get_emoji_provider_from_config')) {
+      if (emojiProvider) {
+        var _editorApi$emoji;
+        editorApi === null || editorApi === void 0 ? void 0 : (_editorApi$emoji = editorApi.emoji) === null || _editorApi$emoji === void 0 ? void 0 : _editorApi$emoji.actions.setProvider(emojiProvider);
+      }
+    }
+  }, [emojiProvider, editorApi]);
 };

package/dist/es2019/composable-editor/utils/handleProviders.js

@@ -24,7 +24,9 @@ export default function handleProviders(providerFactory, {
   searchProvider,
   cardProvider
 }, extensionProvider, quickInsertProvider) {
-  providerFactory.setProvider('emojiProvider', emojiProvider);
+  if (!fg('platform_editor_get_emoji_provider_from_config')) {
+    providerFactory.setProvider('emojiProvider', emojiProvider);
+  }
   providerFactory.setProvider('mentionProvider', mentionProvider);
   providerFactory.setProvider('taskDecisionProvider', taskDecisionProvider);
   providerFactory.setProvider('contextIdentifierProvider', contextIdentifierProvider);

package/dist/es2019/create-editor/ReactEditorView.js

@@ -5,18 +5,21 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent, FULL_WIDTH_MODE, getAnalyticsEventsFromTransaction, PLATFORMS } from '@atlaskit/editor-common/analytics';
 import { browser } from '@atlaskit/editor-common/browser';
 import { getDocStructure } from '@atlaskit/editor-common/core-utils';
+import { countNodes } from '@atlaskit/editor-common/count-nodes';
 import { getEnabledFeatureFlagKeys } from '@atlaskit/editor-common/normalize-feature-flags';
 import { startMeasure, stopMeasure } from '@atlaskit/editor-common/performance-measures';
+import { measureRender } from '@atlaskit/editor-common/performance/measure-render';
+import { getResponseEndTime } from '@atlaskit/editor-common/performance/navigation';
 import { EditorPluginInjectionAPI } from '@atlaskit/editor-common/preset';
+import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
 import { EditorExperience, ExperienceStore, RELIABILITY_INTERVAL } from '@atlaskit/editor-common/ufo';
-import { countNodes, getResponseEndTime, measureRender, processRawValue, shouldForceTracking } from '@atlaskit/editor-common/utils';
 import { analyticsEventKey, getAnalyticsEventSeverity } from '@atlaskit/editor-common/utils/analytics';
 import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { createDispatch, EventDispatcher } from '../event-dispatcher';
 import { EditorAPIContext } from '../presets/context';
-import { getNodesCount } from '../utils/document';
 import { findChangedNodesFromTransaction } from '../utils/findChangedNodesFromTransaction';
+import { getNodesCount } from '../utils/getNodesCount';
 import { isFullPage } from '../utils/is-full-page';
 import { RenderTracking } from '../utils/performance/components/RenderTracking';
 import measurements from '../utils/performance/measure-enum';
@@ -411,7 +414,7 @@ export class ReactEditorView extends React.Component {
       }) => {
         var _this$props$editorPro10, _this$props$editorPro11, _proseMirrorRenderedT, _proseMirrorRenderedT2;
         const proseMirrorRenderedTracking = (_this$props$editorPro10 = this.props.editorProps) === null || _this$props$editorPro10 === void 0 ? void 0 : (_this$props$editorPro11 = _this$props$editorPro10.performanceTracking) === null || _this$props$editorPro11 === void 0 ? void 0 : _this$props$editorPro11.proseMirrorRenderedTracking;
-        const forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined' && shouldForceTracking();
+        const forceSeverityTracking = typeof proseMirrorRenderedTracking === 'undefined';
         this.proseMirrorRenderedSeverity = !!forceSeverityTracking || proseMirrorRenderedTracking !== null && proseMirrorRenderedTracking !== void 0 && proseMirrorRenderedTracking.trackSeverity ? getAnalyticsEventSeverity(duration, (_proseMirrorRenderedT = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityNormalThreshold) !== null && _proseMirrorRenderedT !== void 0 ? _proseMirrorRenderedT : PROSEMIRROR_RENDERED_NORMAL_SEVERITY_THRESHOLD, (_proseMirrorRenderedT2 = proseMirrorRenderedTracking === null || proseMirrorRenderedTracking === void 0 ? void 0 : proseMirrorRenderedTracking.severityDegradedThreshold) !== null && _proseMirrorRenderedT2 !== void 0 ? _proseMirrorRenderedT2 : PROSEMIRROR_RENDERED_DEGRADED_SEVERITY_THRESHOLD) : undefined;
         if (this.view) {
           var _this$pluginInjection4, _this$experienceStore10;