@atlaskit/renderer 149.0.4 → 149.0.6

package/dist/cjs/react/nodes/extension.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.renderExtension = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _ui = require("@atlaskit/editor-common/ui");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _OverflowShadow = _interopRequireDefault(require("@atlaskit/editor-common/OverflowShadow"));
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _consts = require("../../consts");
@@ -21,12 +22,15 @@ var _AnnotationRangeContext = require("../../ui/annotations/contexts/AnnotationR
 var _ExtensionRenderer = _interopRequireDefault(require("../../ui/ExtensionRenderer"));
 var _breakout = require("../utils/breakout");
 var _extensionComments = require("./extension-comments");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-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; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+var _excluded = ["commentProps", "commentTargetOptions"];
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FORGE_EXTENSION_TYPE = 'com.atlassian.ecosystem';
 /**
  * Mirrors `FORGE_INLINE_BODIED_PARAM` in `@atlassian/xen-editor-provider`. Duplicated rather than
@@ -68,14 +72,14 @@ var FireExtensionAsInlineAnalytics = function FireExtensionAsInlineAnalytics(_re
   var nodeRef = (0, _react.useRef)(node);
   (0, _react.useEffect)(function () {
     fireAnalyticsEvent({
-      action: _analytics.ACTION.RENDERED,
-      actionSubject: _analytics.ACTION_SUBJECT.EXTENSION_AS_INLINE,
-      actionSubjectId: _analytics.ACTION_SUBJECT_ID.EXTENSION_BODIED,
+      action: _enums.ACTION.RENDERED,
+      actionSubject: _enums.ACTION_SUBJECT.EXTENSION_AS_INLINE,
+      actionSubjectId: _enums.ACTION_SUBJECT_ID.EXTENSION_BODIED,
       attributes: {
         extensionKey: nodeRef.current.extensionKey,
         extensionType: nodeRef.current.extensionType
       },
-      eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      eventType: _enums.EVENT_TYPE.OPERATIONAL
     });
   }, [fireAnalyticsEvent]);
   return null;
@@ -194,20 +198,8 @@ var renderExtension = exports.renderExtension = function renderExtension(content
     className: _consts.RendererCssClassName.STICKY_SAFE_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER
   }, extensionDiv) : extensionDiv;
 };
-var Extension = function Extension(props) {
-  var _providers$inlineComm, _props$dataAttributes;
-  var text = props.text,
-    _props$layout = props.layout,
-    layout = _props$layout === void 0 ? 'default' : _props$layout,
-    handleRef = props.handleRef,
-    shadowClassNames = props.shadowClassNames,
-    _props$path = props.path,
-    path = _props$path === void 0 ? [] : _props$path,
-    extensionViewportSizes = props.extensionViewportSizes,
-    parameters = props.parameters,
-    nodeHeight = props.nodeHeight,
-    localId = props.localId,
-    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
+var ExtensionWithAnnotations = function ExtensionWithAnnotations(props) {
+  var _providers$inlineComm, _providers$inlineComm2, _props$dataAttributes;
   var providers = (0, _react.useContext)(_context.ProvidersContext);
   var _useAnnotationRangeDi = (0, _AnnotationRangeContext.useAnnotationRangeDispatch)(),
     setHoverTarget = _useAnnotationRangeDi.setHoverTarget;
@@ -216,9 +208,13 @@ var Extension = function Extension(props) {
     initiateTimeout = _useAnnotationHoverDi.initiateTimeout,
     setIsWithinRange = _useAnnotationHoverDi.setIsWithinRange;
   var isBlockNodeSupported = providers === null || providers === void 0 || (_providers$inlineComm = providers.inlineComment) === null || _providers$inlineComm === void 0 ? void 0 : _providers$inlineComm.isBlockNodeSupported;
-  var isCommentTarget = (0, _react.useMemo)(function () {
-    return Boolean((0, _fg.fg)('cc_maui_annotations_on_extensions') && props.extensionNode && (isBlockNodeSupported === null || isBlockNodeSupported === void 0 ? void 0 : isBlockNodeSupported(props.extensionNode)) === true);
+  var supportsComments = (0, _react.useMemo)(function () {
+    return Boolean(props.extensionNode && (isBlockNodeSupported === null || isBlockNodeSupported === void 0 ? void 0 : isBlockNodeSupported(props.extensionNode)) === true);
   }, [props.extensionNode, isBlockNodeSupported]);
+  var canCreateCommentOnBlockNode = providers === null || providers === void 0 || (_providers$inlineComm2 = providers.inlineComment) === null || _providers$inlineComm2 === void 0 ? void 0 : _providers$inlineComm2.canCreateCommentOnBlockNode;
+  var isCommentTarget = (0, _react.useMemo)(function () {
+    return Boolean(supportsComments && props.extensionNode && (!canCreateCommentOnBlockNode || canCreateCommentOnBlockNode(props.extensionNode)));
+  }, [supportsComments, props.extensionNode, canCreateCommentOnBlockNode]);
   var isFullPageRenderer = props.rendererAppearance === 'full-page' || props.rendererAppearance === 'full-width';
   var onMouseEnter = (0, _react.useCallback)(function (event) {
     cancelTimeout();
@@ -253,21 +249,45 @@ var Extension = function Extension(props) {
     isCommentTarget: isCommentTarget
   };
   var commentProps = {
-    enabled: isCommentTarget,
-    allowAnnotations: props.allowAnnotations && (0, _fg.fg)('cc_maui_annotations_on_extensions'),
-    allowAnnotationsDraftMode: props.allowAnnotationsDraftMode,
+    enabled: supportsComments,
+    allowAnnotations: props.allowAnnotations,
+    allowAnnotationsDraftMode: props.allowAnnotationsDraftMode && isCommentTarget,
     startPos: (_props$dataAttributes = props.dataAttributes) === null || _props$dataAttributes === void 0 ? void 0 : _props$dataAttributes['data-renderer-start-pos'],
     marks: props.marks
   };
+  return (0, _react2.jsx)(ExtensionContent
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  , (0, _extends2.default)({}, props, {
+    commentProps: commentProps,
+    commentTargetOptions: commentTargetOptions
+  }));
+};
+var ExtensionContent = function ExtensionContent(_ref3) {
+  var _ref3$commentProps = _ref3.commentProps,
+    commentProps = _ref3$commentProps === void 0 ? {} : _ref3$commentProps,
+    commentTargetOptions = _ref3.commentTargetOptions,
+    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
+  var text = props.text,
+    _props$layout = props.layout,
+    layout = _props$layout === void 0 ? 'default' : _props$layout,
+    handleRef = props.handleRef,
+    shadowClassNames = props.shadowClassNames,
+    _props$path = props.path,
+    path = _props$path === void 0 ? [] : _props$path,
+    extensionViewportSizes = props.extensionViewportSizes,
+    parameters = props.parameters,
+    nodeHeight = props.nodeHeight,
+    localId = props.localId,
+    isInsideOfInlineExtension = props.isInsideOfInlineExtension;
   return (0, _react2.jsx)(_ExtensionRenderer.default
   // Ignored via go/ees005
   // eslint-disable-next-line react/jsx-props-no-spreading
   , (0, _extends2.default)({}, props, {
     type: "extension"
-  }), function (_ref3) {
+  }), function (_ref4) {
     var _props$hideExtensionK;
-    var isExtensionProviderPending = _ref3.isExtensionProviderPending,
-      result = _ref3.result;
+    var isExtensionProviderPending = _ref4.isExtensionProviderPending,
+      result = _ref4.result;
     try {
       // Return the result directly if it's a valid JSX.Element
       if (result && /*#__PURE__*/_react.default.isValidElement(result)) {
@@ -312,7 +332,16 @@ var Extension = function Extension(props) {
     }, commentTargetOptions), undefined, parameters === null || parameters === void 0 ? void 0 : parameters.extensionId, extensionViewportSizes, nodeHeight, localId, undefined, undefined, isInsideOfInlineExtension);
   });
 };
-var _default_1 = (0, _ui.overflowShadow)(Extension, {
+var Extension = function Extension(props) {
+  // Keep annotation context subscriptions out of the gate-off render path.
+  if ((0, _fg.fg)('cc_maui_annotations_on_extensions')) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return (0, _react2.jsx)(ExtensionWithAnnotations, props);
+  }
+  // eslint-disable-next-line react/jsx-props-no-spreading
+  return (0, _react2.jsx)(ExtensionContent, props);
+};
+var _default_1 = (0, _OverflowShadow.default)(Extension, {
   overflowSelector: ".".concat(_consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER)
 });
 var _default = exports.default = _default_1;

package/dist/cjs/react/nodes/heading.js

@@ -13,7 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntl = require("react-intl");
 var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
-var _analytics = require("@atlaskit/editor-common/analytics");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
 var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
 var _interactionMetrics = require("@atlaskit/react-ufo/interaction-metrics");
@@ -78,10 +78,10 @@ function WrappedHeadingAnchor(_ref) {
       onCopyText: function onCopyText() {
         var _getHeadingLink;
         fireAnalyticsEvent({
-          action: _analytics.ACTION.CLICKED,
-          actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
-          eventType: _analytics.EVENT_TYPE.UI
+          action: _enums.ACTION.CLICKED,
+          actionSubject: _enums.ACTION_SUBJECT.BUTTON,
+          actionSubjectId: _enums.ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
+          eventType: _enums.EVENT_TYPE.UI
         });
         return (0, _clipboard.copyTextToClipboard)((_getHeadingLink = getHeadingLink === null || getHeadingLink === void 0 ? void 0 : getHeadingLink(headingId)) !== null && _getHeadingLink !== void 0 ? _getHeadingLink : getCurrentUrlWithHash(headingId));
       },
@@ -107,13 +107,13 @@ function CollapsibleHeadingButton(_ref3) {
   var handleClick = _react.default.useCallback(function (event) {
     event.stopPropagation();
     fireAnalyticsEvent({
-      action: _analytics.ACTION.TOGGLED,
-      actionSubject: _analytics.ACTION_SUBJECT.HEADING,
+      action: _enums.ACTION.TOGGLED,
+      actionSubject: _enums.ACTION_SUBJECT.HEADING,
       attributes: {
         expanded: isCollapsed,
         headingLevel: headingLevel
       },
-      eventType: _analytics.EVENT_TYPE.TRACK
+      eventType: _enums.EVENT_TYPE.TRACK
     });
     toggle();
   }, [fireAnalyticsEvent, headingLevel, isCollapsed, toggle]);

package/dist/cjs/react/nodes/index.js

@@ -156,7 +156,9 @@ exports.toReact = exports.nodeToReact = exports.mergeTextNodes = exports.isTextW
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
-var _ui = require("@atlaskit/editor-common/ui");
+var _UnsupportedBlock = _interopRequireDefault(require("@atlaskit/editor-common/UnsupportedBlock"));
+var _UnsupportedInline = _interopRequireDefault(require("@atlaskit/editor-common/UnsupportedInline"));
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
 var _blockquote = _interopRequireDefault(require("./blockquote"));
 var _bodiedExtension = _interopRequireDefault(require("./bodiedExtension"));
 var _bulletList = _interopRequireDefault(require("./bulletList"));
@@ -496,8 +498,8 @@ var nodeToReact = exports.nodeToReact = {
   tableHeader: _tableCell.TableHeader,
   tableRow: _tableRow.default,
   unknownBlock: _unknownBlock.default,
-  unsupportedBlock: _ui.UnsupportedBlock,
-  unsupportedInline: _ui.UnsupportedInline,
+  unsupportedBlock: _UnsupportedBlock.default,
+  unsupportedInline: _UnsupportedInline.default,
   expand: Expand,
   syncBlock: SyncBlockLoader,
   bodiedSyncBlock: BodiedSyncBlock,
@@ -513,8 +515,8 @@ var toReact = exports.toReact = function toReact(node, flags, nodeComponents
     return _doc.DocWithSelectAllTrap;
   }
 
-  // Allowing custom components to override those provided in nodeToReact
-  var nodes = _objectSpread(_objectSpread({}, nodeToReact), nodeComponents);
+  // Custom components provide the node implementations used by the renderer.
+  var nodes = _objectSpread(_objectSpread({}, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_remove_default_renderer_nodes') ? {} : nodeToReact), nodeComponents);
   if (node.type.name === 'codeBlock') {
     var _nodes$codeBlock;
     if ((flags === null || flags === void 0 ? void 0 : flags.allowWindowedCodeBlock) === true) {

package/dist/cjs/react/nodes/inlineCard.js

@@ -10,16 +10,18 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _AnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/AnalyticsContext"));
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _ui = require("@atlaskit/editor-common/ui");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _HoverLinkOverlay = _interopRequireDefault(require("@atlaskit/editor-common/HoverLinkOverlay"));
+var _context = require("@atlaskit/editor-common/provider-factory/context");
+var _UnsupportedInline = _interopRequireDefault(require("@atlaskit/editor-common/UnsupportedInline"));
 var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
 var _extractSmartLinkEmbed = require("@atlaskit/link-extractors/extract-smart-link-embed");
 var _useSmartCardContext = require("@atlaskit/link-provider/use-smart-card-context");
 var _isWithinPreviewPanelIframe = require("@atlaskit/linking-common/utils/is-within-preview-panel-iframe");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _smartCard = require("@atlaskit/smart-card");
-var _hooks = require("@atlaskit/smart-card/hooks");
+var _lazy = require("@atlaskit/smart-card/card/lazy");
+var _useSmartLinkActions = require("@atlaskit/smart-card/hook/use-smart-link-actions");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _useInlineAnnotationProps = require("../../ui/annotations/element/useInlineAnnotationProps");
@@ -49,7 +51,7 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   var cardContext = (0, _useSmartCardContext.useSmartCardContext)();
   // Note: useSmartLinkActions throws without smart card context. Using it here is safe
   // because we checked cardContext availability in the parent component
-  var actions = (0, _hooks.useSmartLinkActions)({
+  var actions = (0, _useSmartLinkActions.useSmartLinkActions)({
     url: url,
     appearance: 'inline'
   });
@@ -64,10 +66,10 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
       var store = cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store;
       var urlState = store === null || store === void 0 ? void 0 : store.getState()[url || ''];
       fireAnalyticsEvent({
-        action: _analytics.ACTION.CLICKED,
-        actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
-        actionSubjectId: _analytics.ACTION_SUBJECT_ID.HOVER_LABEL,
-        eventType: _analytics.EVENT_TYPE.UI,
+        action: _enums.ACTION.CLICKED,
+        actionSubject: _enums.ACTION_SUBJECT.SMART_LINK,
+        actionSubjectId: _enums.ACTION_SUBJECT_ID.HOVER_LABEL,
+        eventType: _enums.EVENT_TYPE.UI,
         attributes: {
           previewType: previewType,
           destinationProduct: (_urlState$details$met = urlState === null || urlState === void 0 || (_urlState$details = urlState.details) === null || _urlState$details === void 0 || (_urlState$details = _urlState$details.meta) === null || _urlState$details === void 0 ? void 0 : _urlState$details.product) !== null && _urlState$details$met !== void 0 ? _urlState$details$met : null,
@@ -99,7 +101,7 @@ var OverlayWithCardContext = function OverlayWithCardContext(_ref) {
   // When inside preview panel iframe, hide the overlay button
   var isInPreviewPanel = (0, _isWithinPreviewPanelIframe.isWithinPreviewPanelIFrame)();
   var showPanelButton = isInPreviewPanel ? isPreviewPanelAvailable : isPreviewAvailable;
-  var Overlay = isPreviewAvailable ? _ui.HoverLinkOverlay : HoverLinkOverlayNoop;
+  var Overlay = isPreviewAvailable ? _HoverLinkOverlay.default : HoverLinkOverlayNoop;
   return (0, _react2.jsx)(Overlay, {
     isVisible: isResolvedViewRendered,
     url: url,
@@ -145,7 +147,7 @@ var InlineCard = function InlineCard(props) {
     onSetLinkTarget = props.onSetLinkTarget;
   var portal = (0, _PortalContext.usePortal)(props);
   var cardContext = (0, _useSmartCardContext.useSmartCardContext)();
-  var provider = (0, _providerFactory.useProvider)('cardProvider');
+  var provider = (0, _context.useProvider)('cardProvider');
   var SuspenseWrapperForUrl = smartLinks === null || smartLinks === void 0 ? void 0 : smartLinks.SuspenseWrapperForUrl;
 
   // Helper fn to conditionally wrap cards when suspense boundary is passed in via product
@@ -313,7 +315,7 @@ var InlineCard = function InlineCard(props) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, inlineAnnotationProps), (0, _react2.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
-    unsupportedComponent: _ui.UnsupportedInline
+    unsupportedComponent: _UnsupportedInline.default
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, cardProps, {
@@ -324,7 +326,7 @@ var InlineCard = function InlineCard(props) {
     rendererAppearance: rendererAppearance,
     isResolvedViewRendered: isResolvedViewRendered,
     fireAnalyticsEvent: fireAnalyticsEvent
-  }, wrapWithSuspense((0, _react2.jsx)(_smartCard.Card, (0, _extends2.default)({
+  }, wrapWithSuspense((0, _react2.jsx)(_lazy.Card, (0, _extends2.default)({
     appearance: "inline",
     showHoverPreview: !hideHoverPreview,
     actionOptions: actionOptions,

package/dist/cjs/react/nodes/layoutColumn-compiled.js

@@ -15,7 +15,7 @@ exports.LayoutSectionCompiled = void 0;
 require("./layoutColumn-compiled.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _ui = require("@atlaskit/editor-common/ui");
+var _WidthProvider = require("@atlaskit/editor-common/WidthProvider");
 // localized styles, was from clearNextSiblingMarginTopStyle in @atlaskit/editor-common/ui
 var clearNextSiblingMarginTopStyle = null;
 var verticalAlignMiddleStyles = null;
@@ -35,7 +35,7 @@ var LayoutSectionCompiled = exports.LayoutSectionCompiled = function LayoutSecti
       flexBasis: "".concat(props.width, "%")
     },
     className: (0, _runtime.ax)([props.valign === 'middle' && "_1e0c1txw _2lx21bp4 _1bah1h6o", props.valign === 'bottom' && "_1e0c1txw _2lx21bp4 _1bahesu3", "_1tihidpf _12kpidpf"])
-  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_WidthProvider.WidthProvider, null, /*#__PURE__*/_react.default.createElement("div", {
     "data-layout-column-start": "true",
     className: (0, _runtime.ax)(["_1skbgrf3", "_19segrf3 _1ki1grf3 _bmdegrf3 _166hgrf3 _7g1ogrf3 _sk2jgrf3 _hgeogrf3"])
   }), props.children));

package/dist/cjs/react/nodes/layoutColumn-emotion.js

@@ -8,7 +8,7 @@ exports.LayoutSectionEmotion = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
-var _ui = require("@atlaskit/editor-common/ui");
+var _WidthProvider = require("@atlaskit/editor-common/WidthProvider");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -67,7 +67,7 @@ var LayoutSectionEmotion = exports.LayoutSectionEmotion = function LayoutSection
     css: [
     // Keep separate: Compiled crashes on ternary/object lookup here.
     props.valign === 'middle' && verticalAlignMiddleStyles, props.valign === 'bottom' && verticalAlignBottomStyles, multipleWrappedImagesStyle]
-  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)(_WidthProvider.WidthProvider, null, (0, _react2.jsx)("div", {
     "data-layout-column-start": "true",
     css: [clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle]
   }), props.children));

package/dist/cjs/react/nodes/media/index.js

@@ -20,12 +20,15 @@ var _react2 = require("@emotion/react");
 var _annotation = require("@atlaskit/adf-schema/annotation");
 var _MediaAnalyticsContext = require("@atlaskit/analytics-namespaced-context/MediaAnalyticsContext");
 var _AnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/AnalyticsContext"));
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _mediaSingle = require("@atlaskit/editor-common/media-single");
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
-var _types = require("@atlaskit/editor-common/types");
-var _ui = require("@atlaskit/editor-common/ui");
-var _editorPalette = require("@atlaskit/editor-palette");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _inlineCommentEvents = require("@atlaskit/editor-common/analytics/types/inline-comment-events");
+var _CommentBadgeNext = require("@atlaskit/editor-common/media-single/CommentBadgeNext");
+var _ExternalImageBadge = require("@atlaskit/editor-common/media-single/ExternalImageBadge");
+var _MediaBadges = require("@atlaskit/editor-common/media-single/MediaBadges");
+var _styled = require("@atlaskit/editor-common/MediaSingle/styled");
+var _withProviders = require("@atlaskit/editor-common/provider-factory/with-providers");
+var _emitter = require("@atlaskit/editor-common/types/emitter");
+var _border = require("@atlaskit/editor-palette/border");
 var _events = require("../../../analytics/events");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
 var _useInlineCommentSubscriber = require("../../../ui/annotations/hooks/use-inline-comment-subscriber");
@@ -79,7 +82,7 @@ var MediaBorder = function MediaBorder(_ref) {
   }
   var borderColor = (_mark$attrs$color = mark === null || mark === void 0 ? void 0 : mark.attrs.color) !== null && _mark$attrs$color !== void 0 ? _mark$attrs$color : '';
   var borderWidth = (_mark$attrs$size = mark === null || mark === void 0 ? void 0 : mark.attrs.size) !== null && _mark$attrs$size !== void 0 ? _mark$attrs$size : 0;
-  var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+  var paletteColorValue = (0, _border.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
   var borderRadius = "var(--ds-radius-large, 8px)";
   return (0, _react2.jsx)("div", {
     "data-mark-type": "border",
@@ -91,7 +94,7 @@ var MediaBorder = function MediaBorder(_ref) {
       borderRadius: borderRadius,
       boxShadow: "0 0 0 ".concat(borderWidth, "px ").concat(paletteColorValue)
     }
-  }, (0, _react2.jsx)(_ui.MediaBorderGapFiller, {
+  }, (0, _react2.jsx)(_styled.MediaBorderGapFiller, {
     borderColor: borderColor
   }), children);
 };
@@ -208,18 +211,18 @@ var CommentBadgeWrapper = function CommentBadgeWrapper(_ref5) {
   var onClick = function onClick(e) {
     e.preventDefault();
     if (updateSubscriber) {
-      updateSubscriber.emit(_types.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
+      updateSubscriber.emit(_emitter.AnnotationUpdateEvent.ON_ANNOTATION_CLICK, {
         annotationIds: activeParentIds,
         // Ignored via go/ees005
         // eslint-disable-next-line @atlaskit/editor/no-as-casting
         eventTarget: e.target,
         // use mediaSingle here to align with annotation viewed event dispatched in editor
         eventTargetType: 'mediaSingle',
-        viewMethod: _analytics.VIEW_METHOD.BADGE
+        viewMethod: _inlineCommentEvents.VIEW_METHOD.BADGE
       });
     }
   };
-  return (0, _react2.jsx)(_mediaSingle.CommentBadgeNext
+  return (0, _react2.jsx)(_CommentBadgeNext.CommentBadgeNext
   // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
   , (0, _extends2.default)({
     onMouseEnter: function onMouseEnter() {
@@ -322,14 +325,14 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           // Format: "remix:{type}:{subtype}" e.g. "remix:infographic:corporate-doodle"
           remixSource: dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att === void 0 ? void 0 : _dataConsumerMark$att[0]
         })
-      }, (0, _react2.jsx)(_mediaSingle.MediaBadges, {
+      }, (0, _react2.jsx)(_MediaBadges.MediaBadges, {
         mediaElement: mediaSingleElement,
         mediaWidth: width,
         mediaHeight: height,
         useMinimumZIndex: true
       }, function (_ref7) {
         var visible = _ref7.visible;
-        return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
+        return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_ExternalImageBadge.ExternalImageBadge, {
           type: _this.props.type,
           url: _this.props.type === 'external' ? _this.props.url : undefined
         }), showCommentBadge && (0, _react2.jsx)(CommentBadgeWrapper, {
@@ -360,10 +363,10 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         marks = _this$props4.marks;
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({
-          action: _analytics.ACTION.VISITED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
-          actionSubjectId: _analytics.ACTION_SUBJECT_ID.LINK,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          action: _enums.ACTION.VISITED,
+          actionSubject: _enums.ACTION_SUBJECT.MEDIA,
+          actionSubjectId: _enums.ACTION_SUBJECT_ID.LINK,
+          eventType: _enums.EVENT_TYPE.TRACK,
           attributes: {
             platform: _events.PLATFORM.WEB,
             mode: _events.MODE.RENDERER
@@ -393,10 +396,10 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var infographicType = dataConsumerMark === null || dataConsumerMark === void 0 || (_dataConsumerMark$att2 = dataConsumerMark.attrs.sources) === null || _dataConsumerMark$att2 === void 0 ? void 0 : _dataConsumerMark$att2[0];
       if (infographicType && this.props.fireAnalyticsEvent) {
         this.props.fireAnalyticsEvent({
-          action: _analytics.ACTION.RENDERED,
-          actionSubject: _analytics.ACTION_SUBJECT.MEDIA,
+          action: _enums.ACTION.RENDERED,
+          actionSubject: _enums.ACTION_SUBJECT.MEDIA,
           actionSubjectId: this.props.id,
-          eventType: _analytics.EVENT_TYPE.TRACK,
+          eventType: _enums.EVENT_TYPE.TRACK,
           attributes: {
             infographicType: infographicType,
             pageMode: 'view',
@@ -431,7 +434,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       if (!providers) {
         return this.renderCard();
       }
-      return (0, _react2.jsx)(_providerFactory.WithProviders
+      return (0, _react2.jsx)(_withProviders.WithProviders
       // eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
       , {
         providers: ['mediaProvider', 'contextIdentifierProvider'],

package/dist/cjs/react/nodes/mediaGroup.js

@@ -15,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _cardDimensions = require("@atlaskit/media-card/cardDimensions");
-var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
+var _filmstripView = require("@atlaskit/media-filmstrip/filmstrip-view");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _vcMedia = require("@atlaskit/react-ufo/vc-media");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -148,7 +148,7 @@ var MediaGroup = exports.default = /*#__PURE__*/function (_PureComponent) {
       var surroundingItems = (childIdentifiers || []).filter(function (identifier) {
         return !!identifier;
       });
-      return /*#__PURE__*/_react.default.createElement(_mediaFilmstrip.FilmstripView, {
+      return /*#__PURE__*/_react.default.createElement(_filmstripView.FilmstripView, {
         animate: animate,
         offset: offset,
         onSize: this.handleSize,

package/dist/cjs/react/nodes/mediaInline.js

@@ -14,14 +14,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _useAnalyticsEvents2 = require("@atlaskit/analytics-next/useAnalyticsEvents");
-var _analytics = require("@atlaskit/editor-common/analytics");
-var _mediaInline = require("@atlaskit/editor-common/media-inline");
-var _providerFactory = require("@atlaskit/editor-common/provider-factory");
+var _enums = require("@atlaskit/editor-common/analytics/types/enums");
+var _mediaInlineImageCard = require("@atlaskit/editor-common/media-inline-image-card");
+var _context2 = require("@atlaskit/editor-common/provider-factory/context");
 var _loader = _interopRequireDefault(require("@atlaskit/media-card/loader"));
 var _getMediaClient = require("@atlaskit/media-client-react/get-media-client");
 var _mediaClientProvider = require("@atlaskit/media-client-react/media-client-provider");
 var _LoadingView = require("@atlaskit/media-ui/LoadingView");
-var _enums = require("../../analytics/enums");
+var _enums2 = require("../../analytics/enums");
 var _MediaCard = require("../../ui/MediaCard");
 var _ErrorBoundary = require("../../ui/Renderer/ErrorBoundary");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
@@ -44,7 +44,7 @@ var RenderMediaInline = function RenderMediaInline(_ref) {
     fileState = _useState4[0],
     setFileState = _useState4[1];
   var mediaClient = (0, _react.useContext)(_mediaClientProvider.MediaClientContext);
-  var contextIdentifierProvider = (0, _providerFactory.useProvider)('contextIdentifierProvider');
+  var contextIdentifierProvider = (0, _context2.useProvider)('contextIdentifierProvider');
   var ssrMediaItem = (0, _react.useMemo)(function () {
     var _ssr$ssrMediaItems;
     return ssr === null || ssr === void 0 || (_ssr$ssrMediaItems = ssr.ssrMediaItems) === null || _ssr$ssrMediaItems === void 0 ? void 0 : _ssr$ssrMediaItems.find(function (item) {
@@ -194,10 +194,10 @@ var MediaInline = function MediaInline(props) {
     var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
     var borderSize = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
     return /*#__PURE__*/_react.default.createElement(_ErrorBoundary.ErrorBoundary, {
-      component: _enums.ACTION_SUBJECT.RENDERER,
-      componentId: _analytics.ACTION_SUBJECT_ID.MEDIA_INLINE_IMAGE,
+      component: _enums2.ACTION_SUBJECT.RENDERER,
+      componentId: _enums.ACTION_SUBJECT_ID.MEDIA_INLINE_IMAGE,
       createAnalyticsEvent: createAnalyticsEvent
-    }, /*#__PURE__*/_react.default.createElement(_mediaInline.MediaInlineImageCard, {
+    }, /*#__PURE__*/_react.default.createElement(_mediaInlineImageCard.MediaInlineImageCard, {
       mediaClient: ssr !== null && ssr !== void 0 && ssr.config ? (0, _getMediaClient.getMediaClient)(ssr.config) : mediaClient,
       identifier: identifier,
       alt: alt,

package/dist/cjs/react/nodes/mediaSingle/index.js

@@ -11,9 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntl = require("react-intl");
-var _coreUtils = require("@atlaskit/editor-common/core-utils");
-var _ui = require("@atlaskit/editor-common/ui");
-var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _isSsr = require("@atlaskit/editor-common/is-ssr");
+var _MediaSingle = _interopRequireDefault(require("@atlaskit/editor-common/MediaSingle"));
+var _WidthProvider = require("@atlaskit/editor-common/WidthProvider");
+var _constants = require("@atlaskit/editor-shared-styles/constants");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _AnnotationHoverContext = require("../../../ui/annotations/contexts/AnnotationHoverContext");
 var _AnnotationRangeContext = require("../../../ui/annotations/contexts/AnnotationRangeContext");
@@ -72,11 +73,11 @@ var getMediaContainerWidth = exports.getMediaContainerWidth = function getMediaC
     // SSR mode fallback to default layout width
     switch (layout) {
       case 'full-width':
-        return _editorSharedStyles.akEditorFullWidthLayoutWidth;
+        return _constants.akEditorFullWidthLayoutWidth;
       case 'wide':
-        return _editorSharedStyles.akEditorWideLayoutWidth;
+        return _constants.akEditorWideLayoutWidth;
       default:
-        return _editorSharedStyles.akEditorDefaultLayoutWidth;
+        return _constants.akEditorDefaultLayoutWidth;
     }
   }
   return currentContainerWidth;
@@ -148,7 +149,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
         height: "100%"
       };
     } else {
-      var _maxWidth = (0, _coreUtils.isSSR)() && widthAttr && typeof widthAttr === 'number' ? Math.max(widthAttr, containerWidth) : containerWidth;
+      var _maxWidth = (0, _isSsr.isSSR)() && widthAttr && typeof widthAttr === 'number' ? Math.max(widthAttr, containerWidth) : containerWidth;
       var maxHeight = height / width * _maxWidth;
       cardDimensions = {
         width: "".concat(_maxWidth, "px"),
@@ -157,14 +158,14 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
     }
     var nonFullWidthSize = containerWidth;
     if (!isInsideOfBlockNode && rendererAppearance !== 'comment') {
-      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _editorSharedStyles.akEditorDefaultLayoutWidth;
+      var isContainerSizeGreaterThanMaxFullPageWidth = containerWidth - padding >= _constants.akEditorDefaultLayoutWidth;
       if (isContainerSizeGreaterThanMaxFullPageWidth) {
-        nonFullWidthSize = _editorSharedStyles.akEditorDefaultLayoutWidth;
+        nonFullWidthSize = _constants.akEditorDefaultLayoutWidth;
       } else {
         nonFullWidthSize = containerWidth - padding;
       }
     }
-    var minWidth = Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding);
+    var minWidth = Math.min(_constants.akEditorFullWidthLayoutWidth, containerWidth - padding);
     var lineLength = isFullWidth ? minWidth : nonFullWidthSize;
     return {
       cardDimensions: cardDimensions,
@@ -221,7 +222,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
   // Note: in SSR mode the `window` object is not defined,
   // therefore width here is 0, see:
   // packages/editor/editor-common/src/ui/WidthProvider/index.tsx
-  var _useContext = (0, _react.useContext)(_ui.WidthContext),
+  var _useContext = (0, _react.useContext)(_WidthProvider.WidthContext),
     renderWidth = _useContext.width;
   var containerWidth = getMediaContainerWidth(renderWidth, layout);
   var _useMemo = (0, _react.useMemo)(function () {
@@ -240,7 +241,7 @@ var MediaSingleWithChildren = function MediaSingleWithChildren(props) {
       mediaSingleElement: ref.current
     });
     var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? [uiMediaSingleBaseStyles, uiMediaSingleLayoutStyles] : [uiMediaSingleBaseStyles];
-    return (0, _react2.jsx)(_ui.MediaSingle, {
+    return (0, _react2.jsx)(_MediaSingle.default, {
       css: uiMediaSingleStyles,
       handleMediaSingleRef: ref,
       layout: layout,