@atlaskit/renderer 109.1.5 → 109.2.0

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

@@ -35,7 +35,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "109.1.5";
+const packageVersion = "109.2.0";
 export class Renderer extends PureComponent {
   constructor(props) {
     super(props);

package/dist/es2019/ui/Renderer/style.js

@@ -1,14 +1,16 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import { css } from '@emotion/react';
-import { themed } from '@atlaskit/theme/components';
 import { fontFamily, fontSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
 import { headingSizes as headingSizesImport } from '@atlaskit/theme/typography';
+import { getGlobalTheme } from '@atlaskit/tokens';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { mediaInlineImageStyles } from '@atlaskit/editor-common/media-inline';
 import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, headingsSharedStyles, ruleSharedStyles, whitespaceSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, mediaSingleSharedStyle, TableSharedCssClassName, tableMarginTop, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, richMediaClassName, tasksAndDecisionsStyles, smartCardSharedStyles, tableCellPadding, textColorStyles, codeBlockInListSafariFix, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { shadowClassNames } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
-import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableBorder, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N40A } from '@atlaskit/theme/colors';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
@@ -18,7 +20,10 @@ import { isTableResizingEnabled } from '../../react/nodes/table';
 export const FullPagePadding = 32;
 const tableShadowWidth = 32;
 export const TELEPOINTER_ID = 'ai-streaming-telepointer';
-const telepointerStyles = themeProps => {
+const telepointerStyles = () => {
+  const {
+    colorMode
+  } = getGlobalTheme();
   return css`
     #${TELEPOINTER_ID} {
       display: inline-block;
@@ -27,20 +32,9 @@ const telepointerStyles = themeProps => {
       height: 25px;
       background: linear-gradient(
         45deg,
-        ${themed({
-    light: '#F8E6A0',
-    dark: '#F5CD47'
-  })(themeProps)} -12.02%,
-        ${themed({
-    light: '#8BDBE5',
-    dark: '#60C6D2'
-  })(themeProps)}
-          19.18%,
-        ${themed({
-    light: '#0C66E4',
-    dark: '#388BFF'
-  })(themeProps)}
-          71.87%
+        ${colorMode === 'dark' ? '#f5cd47' : '#f8e6a0'} -12.02%,
+        ${colorMode === 'dark' ? '#60c6d2' : '#8bdbe5'} 19.18%,
+        ${colorMode === 'dark' ? '#388bff' : '#0c66e4'} 71.87%
       );
       margin-left: ${"var(--ds-space-025, 2px)"};
 
@@ -61,15 +55,8 @@ const telepointerStyles = themeProps => {
         color: ${"var(--ds-text-inverse, white)"};
         background: linear-gradient(
           45deg,
-          ${themed({
-    light: '#8BDBE5',
-    dark: '#60C6D2'
-  })(themeProps)} -57%,
-          ${themed({
-    light: '#0C66E4',
-    dark: '#388BFF'
-  })(themeProps)}
-            71.87%
+          ${colorMode === 'dark' ? '#60c6d2' : '#8bdbe5'} -57%,
+          ${colorMode === 'dark' ? '#388bff' : '#0c66e4'} 71.87%
         );
       }
     }
@@ -414,10 +401,7 @@ export const rendererStyles = wrapperProps => theme => {
   return css`
       font-size: ${editorFontSize(themeProps)}px;
       line-height: 1.5rem;
-      color: ${themed({
-    light: `var(--ds-text, ${colors.N800})`,
-    dark: "var(--ds-text, #B8C7E0)"
-  })(themeProps)};
+      color: ${`var(--ds-text, ${colors.N800})`};
 
       .${RendererCssClassName.DOCUMENT}::after {
         // we add a clearfix after ak-renderer-document in order to
@@ -480,13 +464,10 @@ export const rendererStyles = wrapperProps => theme => {
       }
 
       & span[data-placeholder] {
-        color: ${themed({
-    light: `var(--ds-text-subtlest, ${colors.N200})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN200})`
-  })(themeProps)};
+        color: ${`var(--ds-text-subtlest, ${colors.N200})`};
       }
 
-      ${telepointerStyles(themeProps)}
+      ${telepointerStyles()}
       ${whitespaceSharedStyles};
       ${blockquoteSharedStyles};
       ${headingsSharedStyles()};
@@ -511,15 +492,9 @@ export const rendererStyles = wrapperProps => theme => {
       }
 
       & span.date-node {
-        background: ${themed({
-    light: `var(--ds-background-neutral, ${colors.N30A})`,
-    dark: `var(--ds-background-neutral, ${colors.DN70})`
-  })(themeProps)};
+        background: ${`var(--ds-background-neutral, ${colors.N30A})`};
         border-radius: ${"var(--ds-border-radius-100, 3px)"};
-        color: ${themed({
-    light: `var(--ds-text, ${colors.N800})`,
-    dark: `var(--ds-text, ${colors.DN600})`
-  })(themeProps)};
+        color: ${`var(--ds-text, ${colors.N800})`};
         padding: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"};
         margin: 0 1px;
         transition: background 0.3s;
@@ -655,21 +630,12 @@ export const rendererStyles = wrapperProps => theme => {
 
         table[data-number-column='true'] {
           .${RendererCssClassName.NUMBER_COLUMN} {
-            background-color: ${themed({
-    light: `var(--ds-background-neutral, ${akEditorTableToolbar})`,
-    dark: `var(--ds-background-neutral, ${akEditorTableToolbarDark})`
-  })(themeProps)};
+            background-color: ${`var(--ds-background-neutral, ${akEditorTableToolbar})`};
             border-right: 1px solid
-              ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-  })(themeProps)};
+              ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
             width: ${akEditorTableNumberColumnWidth}px;
             text-align: center;
-            color: ${themed({
-    light: `var(--ds-text-subtlest, ${colors.N200})`,
-    dark: `var(--ds-text-subtlest, ${colors.DN400})`
-  })(themeProps)};
+            color: ${`var(--ds-text-subtlest, ${colors.N200})`};
             font-size: ${relativeFontSizeToBase16(fontSize())};
           }
 
@@ -686,15 +652,9 @@ export const rendererStyles = wrapperProps => theme => {
         z-index: ${akEditorStickyHeaderZIndex};
 
         border-right: 1px solid
-          ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-  })(themeProps)};
+          ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
         border-bottom: 1px solid
-          ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-  })(themeProps)};
+          ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`};
 
         /* this is to compensate for the table border */
         transform: translateX(-1px);
@@ -718,22 +678,10 @@ export const rendererStyles = wrapperProps => theme => {
       .sticky th,
       .sticky td {
         box-shadow: 0px 1px
-            ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-  })(themeProps)},
-          0px -0.5px ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-  })(themeProps)},
-          inset -1px 0px ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableToolbarDark})`
-  })(themeProps)},
-          0px -1px ${themed({
-    light: `var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`,
-    dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableToolbarDark})`
-  })(themeProps)};
+            ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`},
+          0px -0.5px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`},
+          inset -1px 0px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`},
+          0px -1px ${`var(--ds-background-accent-gray-subtler, ${akEditorTableToolbar})`};
       }
 
       /* this will remove jumpiness caused in Chrome for sticky headers */

package/dist/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -3,23 +3,14 @@ var _templateObject;
 /** @jsx jsx */
 import { jsx, css } from '@emotion/react';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N20, DN50 } from '@atlaskit/theme/colors';
-import { themed } from '@atlaskit/theme/components';
+import { N20 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
-var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    &:hover {\n      button {\n        opacity: 1;\n      }\n    }\n\n    button {\n      opacity: 0;\n      transition: opacity 0.2s ease 0s;\n    }\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), themed({
-    light: "var(--ds-surface-raised, ".concat(N20, ")"),
-    dark: "var(--ds-surface-raised, ".concat(DN50, ")")
-  })(props), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
-    background: themed({
-      light: "var(--ds-background-neutral, ".concat(N20, ")"),
-      dark: "var(--ds-background-neutral, ".concat(DN50, ")")
-    })(props),
-    leftCoverWidth: "var(--ds-space-300, 24px)"
-  }));
-};
+var codeBlockStyleOverrides = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  tab-size: 4;\n  background-color: ", ";\n\n  &:hover {\n    button {\n      opacity: 1;\n    }\n  }\n\n  button {\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n  }\n\n  ", " {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, local, local, local, scroll, scroll, scroll,\n      scroll;\n    background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n  }\n"])), "var(--ds-surface-raised, ".concat(N20, ")"), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
+  background: "var(--ds-background-neutral, ".concat(N20, ")"),
+  leftCoverWidth: "var(--ds-space-300, 24px)"
+}));
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
   var allowCopyToClipboard = _ref.allowCopyToClipboard,
     allowWrapCodeBlock = _ref.allowWrapCodeBlock,

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

@@ -5,95 +5,72 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import { MediaInlineImageCard, shouldShowInlineImage } from '@atlaskit/editor-common/media-inline';
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import { MediaInlineImageCard } from '@atlaskit/editor-common/media-inline';
+import { useProvider } from '@atlaskit/editor-common/provider-factory';
 import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaClientContext } from '@atlaskit/media-client-react';
-import { MediaInlineCardErroredView, MediaInlineCardLoadingView, messages } from '@atlaskit/media-ui';
-import React, { useCallback, useEffect, useState } from 'react';
-import { createIntl, injectIntl } from 'react-intl-next';
+import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import React, { useCallback, useEffect, useState, useContext } from 'react';
+import { injectIntl } from 'react-intl-next';
 import { getClipboardAttrs, mediaIdentifierMap } from '../../ui/MediaCard';
 export var RenderMediaInline = function RenderMediaInline(_ref) {
   var rendererAppearance = _ref.rendererAppearance,
-    intl = _ref.intl,
     clipboardAttrs = _ref.clipboardAttrs,
-    mediaInlineProviders = _ref.mediaInlineProviders,
     collectionName = _ref.collection,
     eventHandlers = _ref.eventHandlers,
-    identifier = _ref.identifier,
-    alt = _ref.alt,
-    width = _ref.width,
-    height = _ref.height,
-    type = _ref.type,
-    borderSize = _ref.borderSize,
-    borderColor = _ref.borderColor;
+    identifier = _ref.identifier;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
-    contextIdentifierProvider = _useState2[0],
-    setContextIdentifierProvider = _useState2[1];
+    contextIdentifier = _useState2[0],
+    setContextIdentifier = _useState2[1];
   var _useState3 = useState(),
     _useState4 = _slicedToArray(_useState3, 2),
     fileState = _useState4[0],
     setFileState = _useState4[1];
-  var mediaClient = React.useContext(MediaClientContext);
-  var updateContext = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(contextIdentifierProvider) {
-      var resolvedContextID;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            if (!contextIdentifierProvider) {
-              _context.next = 5;
-              break;
-            }
-            _context.next = 3;
-            return contextIdentifierProvider;
-          case 3:
-            resolvedContextID = _context.sent;
-            setContextIdentifierProvider(resolvedContextID);
-          case 5:
-          case "end":
-            return _context.stop();
+  var mediaClient = useContext(MediaClientContext);
+  var contextIdentifierProvider = useProvider('contextIdentifierProvider');
+  useEffect(function () {
+    if (contextIdentifierProvider) {
+      contextIdentifierProvider.then(function (resolvedContextID) {
+        if (contextIdentifier !== resolvedContextID) {
+          setContextIdentifier(resolvedContextID);
         }
-      }, _callee);
-    }));
-    return function updateContext(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+      });
+    }
+  }, [contextIdentifier, contextIdentifierProvider]);
   var updateFileState = useCallback( /*#__PURE__*/function () {
-    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(id) {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(id) {
       var options, _fileState;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
           case 0:
             options = {
               collectionName: collectionName
             };
-            _context2.prev = 1;
+            _context.prev = 1;
             if (!mediaClient) {
-              _context2.next = 7;
+              _context.next = 7;
               break;
             }
-            _context2.next = 5;
+            _context.next = 5;
             return mediaClient.file.getCurrentState(id, options);
           case 5:
-            _fileState = _context2.sent;
+            _fileState = _context.sent;
             setFileState(_fileState);
           case 7:
-            _context2.next = 11;
+            _context.next = 11;
             break;
           case 9:
-            _context2.prev = 9;
-            _context2.t0 = _context2["catch"](1);
+            _context.prev = 9;
+            _context.t0 = _context["catch"](1);
           case 11:
           case "end":
-            return _context2.stop();
+            return _context.stop();
         }
-      }, _callee2, null, [[1, 9]]);
+      }, _callee, null, [[1, 9]]);
     }));
-    return function (_x2) {
-      return _ref3.apply(this, arguments);
+    return function (_x) {
+      return _ref2.apply(this, arguments);
     };
   }(), [collectionName, mediaClient]);
   useEffect(function () {
@@ -109,14 +86,12 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
     };
   }, [identifier, collectionName]);
   useEffect(function () {
-    var contextIdentifierProvider = mediaInlineProviders.contextIdentifierProvider;
     var id = clipboardAttrs.id;
-    updateContext(contextIdentifierProvider);
     id && updateFileState(id);
-  }, [mediaInlineProviders, contextIdentifierProvider, clipboardAttrs, updateFileState]);
+  }, [contextIdentifier, clipboardAttrs, updateFileState]);
 
   /*
-   * Only show the loading view if the media provider is not ready
+   * Only show the loading view if the media client is not ready
    * prevents calling the media API before the provider is ready
    */
   if (!mediaClient) {
@@ -125,19 +100,6 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
       isSelected: false
     });
   }
-  if (type && shouldShowInlineImage(type)) {
-    return /*#__PURE__*/React.createElement(MediaInlineImageCard, {
-      mediaClient: mediaClient,
-      identifier: identifier,
-      alt: alt,
-      width: width,
-      height: height,
-      border: {
-        borderSize: borderSize,
-        borderColor: borderColor
-      }
-    });
-  }
   var handleMediaInlineClick = function handleMediaInlineClick(result) {
     var _eventHandlers$media;
     if (eventHandlers !== null && eventHandlers !== void 0 && (_eventHandlers$media = eventHandlers.media) !== null && _eventHandlers$media !== void 0 && _eventHandlers$media.onClick) {
@@ -147,34 +109,31 @@ export var RenderMediaInline = function RenderMediaInline(_ref) {
   };
   var shouldOpenMediaViewer = rendererAppearance !== 'mobile';
   var shouldDisplayToolTip = rendererAppearance !== 'mobile';
-  var mediaProvider = mediaInlineProviders.mediaProvider;
   var id = clipboardAttrs.id,
     collection = clipboardAttrs.collection;
-  return /*#__PURE__*/React.createElement("span", _extends({}, getClipboardAttrs({
-    id: id,
-    collection: collection,
-    contextIdentifierProvider: contextIdentifierProvider,
-    fileState: fileState
-  }), {
-    "data-node-type": "mediaInline"
-  }), mediaProvider || mediaClient ? /*#__PURE__*/React.createElement(MediaInlineCard, {
-    identifier: identifier,
-    onClick: handleMediaInlineClick,
-    shouldOpenMediaViewer: shouldOpenMediaViewer,
-    shouldDisplayToolTip: shouldDisplayToolTip,
-    mediaClientConfig: mediaClient.mediaClientConfig,
-    mediaViewerItems: Array.from(mediaIdentifierMap.values())
-  }) : /*#__PURE__*/React.createElement(MediaInlineCardErroredView, {
-    message: (intl || createIntl({
-      locale: 'en'
-    })).formatMessage(messages.couldnt_load_file)
-  }));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/design-system/prefer-primitives
+    React.createElement("span", _extends({}, getClipboardAttrs({
+      id: id,
+      collection: collection,
+      contextIdentifierProvider: contextIdentifier,
+      fileState: fileState
+    }), {
+      "data-node-type": "mediaInline"
+    }), /*#__PURE__*/React.createElement(MediaInlineCard, {
+      identifier: identifier,
+      onClick: handleMediaInlineClick,
+      shouldOpenMediaViewer: shouldOpenMediaViewer,
+      shouldDisplayToolTip: shouldDisplayToolTip,
+      mediaClientConfig: mediaClient.mediaClientConfig,
+      mediaViewerItems: Array.from(mediaIdentifierMap.values())
+    }))
+  );
 };
 var MediaInline = function MediaInline(props) {
-  var _borderMark$attrs$col, _borderMark$attrs$siz;
   var collection = props.collection,
     id = props.id,
-    providerFactory = props.providers,
     intl = props.intl,
     rendererAppearance = props.rendererAppearance,
     featureFlags = props.featureFlags,
@@ -182,7 +141,8 @@ var MediaInline = function MediaInline(props) {
     alt = props.alt,
     width = props.width,
     height = props.height,
-    marks = props.marks;
+    marks = props.marks,
+    ssr = props.ssr;
   var clipboardAttrs = {
     id: id,
     collection: collection
@@ -192,32 +152,35 @@ var MediaInline = function MediaInline(props) {
     mediaItemType: 'file',
     collectionName: collection
   };
-  var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
-    return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
-  });
-  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.createElement(WithProviders, {
-    providers: ['mediaProvider', 'contextIdentifierProvider'],
-    providerFactory: providerFactory,
-    renderNode: function renderNode(mediaInlineProviders) {
-      return /*#__PURE__*/React.createElement(RenderMediaInline, {
-        identifier: identifier,
-        clipboardAttrs: clipboardAttrs,
-        eventHandlers: props.eventHandlers,
-        rendererAppearance: rendererAppearance,
-        intl: intl,
-        mediaInlineProviders: mediaInlineProviders,
-        collection: collection,
-        featureFlags: featureFlags,
-        type: fileType,
-        alt: alt,
-        width: width,
-        height: height,
+  var mediaClient = useContext(MediaClientContext);
+  if (fileType === 'image') {
+    var _borderMark$attrs$col, _borderMark$attrs$siz;
+    var borderMark = marks === null || marks === void 0 ? void 0 : marks.find(function (mark) {
+      return (mark === null || mark === void 0 ? void 0 : mark.type.name) === 'border';
+    });
+    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.createElement(MediaInlineImageCard, {
+      mediaClient: mediaClient,
+      identifier: identifier,
+      alt: alt,
+      width: width,
+      height: height,
+      ssr: ssr,
+      border: {
         borderSize: borderSize,
         borderColor: borderColor
-      });
-    }
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(RenderMediaInline, {
+    identifier: identifier,
+    clipboardAttrs: clipboardAttrs,
+    eventHandlers: props.eventHandlers,
+    rendererAppearance: rendererAppearance,
+    intl: intl,
+    collection: collection,
+    featureFlags: featureFlags
   });
 };
 export default injectIntl(MediaInline);

package/dist/esm/react/nodes/multiBodiedExtension.js

@@ -2,10 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2;
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 /** @jsx jsx */
 
-import { jsx, css } from '@emotion/react';
+import { jsx } from '@emotion/react';
+// eslint-disable-next-line @typescript-eslint/no-duplicate-imports
+import { css } from '@emotion/react';
 import { N40, N50 } from '@atlaskit/theme/colors';
 import React, { useState } from 'react';
 import { renderExtension } from './extension';
@@ -67,13 +70,7 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
   var containerCSS = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    min-height: 100px;\n\n    .multiBodiedExtension--frames > [data-extension-frame='true'] {\n      display: none;\n    }\n\n    .multiBodiedExtension--frames\n      > [data-extension-frame='true']:nth-of-type(", ") {\n      border: 1px solid ", ";\n      display: block;\n      min-height: 100px;\n    }\n  "])), activeChildIndex + 1, "var(--ds-border, ".concat(N50, ")"));
   var isTopLevel = path.length < 1;
   var centerAlignClass = isTopLevel && ['wide', 'full-width'].includes(layout) ? RendererCssClassName.EXTENSION_CENTER_ALIGN : '';
-  return jsx("section", {
-    className: "multiBodiedExtension--container",
-    css: containerCSS,
-    "data-testid": "multiBodiedExtension--container",
-    "data-active-child-index": activeChildIndex
-  }, jsx(WidthConsumer, null, function (_ref2) {
-    var width = _ref2.width;
+  function renderMbeContent(width) {
     return jsx("div", {
       className: "".concat(RendererCssClassName.EXTENSION, " ").concat(centerAlignClass),
       style: {
@@ -87,8 +84,8 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
     }, jsx(ExtensionRenderer, _extends({}, props, {
       actions: actions,
       type: "multiBodiedExtension"
-    }), function (_ref3) {
-      var result = _ref3.result;
+    }), function (_ref2) {
+      var result = _ref2.result;
       try {
         if (result && /*#__PURE__*/React.isValidElement(result)) {
           // Return the content directly if it's a valid JSX.Element
@@ -109,6 +106,15 @@ var MultiBodiedExtension = function MultiBodiedExtension(props) {
       className: "multiBodiedExtension--frames",
       "data-testid": "multiBodiedExtension--frames"
     }, children));
+  }
+  return jsx("section", {
+    className: "multiBodiedExtension--container",
+    css: containerCSS,
+    "data-testid": "multiBodiedExtension--container",
+    "data-active-child-index": activeChildIndex
+  }, jsx(WidthConsumer, null, function (_ref3) {
+    var width = _ref3.width;
+    return renderMbeContent(width);
   }));
 };
 export default MultiBodiedExtension;

package/dist/esm/react/nodes/panel.js

@@ -8,32 +8,18 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import TipIcon from '@atlaskit/icon/glyph/editor/hint';
 import { PanelType } from '@atlaskit/adf-schema';
-import { getPanelBackgroundDarkModeColors, panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
+import { panelSharedStylesWithoutPrefix, PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
 import EmojiItem from './emoji';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
-import { themed } from '@atlaskit/theme';
 import { PanelInfoIcon, PanelSuccessIcon, PanelNoteIcon, PanelWarningIcon, PanelErrorIcon } from '@atlaskit/editor-common/icons';
 var PanelStyled = function PanelStyled(_ref) {
   var backgroundColor = _ref.backgroundColor,
     hasIcon = _ref.hasIcon,
     props = _objectWithoutProperties(_ref, _excluded);
-  var styles = function styles(theme) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
-  };
+  var styles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &.", " {\n      ", "\n\n      &[data-panel-type=", "] {\n        ", "\n      }\n    }\n  "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hasIcon ? '' : 'padding-left: 12px;');
   if (props['data-panel-type'] === PanelType.CUSTOM && backgroundColor) {
-    styles = function styles(theme) {
-      var tokenColor = hexToEditorBackgroundPaletteColor(backgroundColor);
-      var customStyle = themed({
-        dark: getPanelBackgroundDarkModeColors,
-        light: "background-color: ".concat(tokenColor || backgroundColor, ";")
-      })({
-        theme: theme
-      });
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n          ", "\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, customStyle, hasIcon ? '' : 'padding-left: 12px;');
-    };
+    styles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", "\n      }\n    "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix(), PanelType.CUSTOM, hexToEditorBackgroundPaletteColor(backgroundColor) || backgroundColor, hasIcon ? '' : 'padding-left: 12px;');
   }
   return jsx("div", _extends({
     css: styles

package/dist/esm/react/nodes/table/colgroup.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import { akEditorTableNumberColumnWidth, akEditorWideLayoutWidth, akEditorFullWidthLayoutWidth, akEditorTableLegacyCellMinWidth, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { isTableResizingEnabled } from '../table';
 
 // we allow scaling down column widths by no more than 30%
@@ -68,17 +67,11 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
     tableContainerWidth = getTableLayoutWidth(layout);
   }
   if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !tableResized) {
-    if (getBooleanFF('platform.editor.custom-table-width-scale-down-undefined-column_nkyvx')) {
-      // for tables with no column widths defined, assume that the real table width
-      // is defined by node.attrs.width
-      var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
-      var defaultColumnWidth = _tableWidth2 / noOfColumns;
-      targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
-    } else {
-      return new Array(noOfColumns).fill({
-        minWidth: "".concat(tableCellMinWidth, "px")
-      });
-    }
+    // for tables with no column widths defined, assume that the real table width
+    // is defined by node.attrs.width
+    var _tableWidth2 = (isNumberColumnEnabled ? tableContainerWidth - akEditorTableNumberColumnWidth : tableContainerWidth) - 1;
+    var defaultColumnWidth = _tableWidth2 / noOfColumns;
+    targetWidths = new Array(noOfColumns).fill(defaultColumnWidth);
   } else if (!tableResized) {
     return null;
   }