@atlaskit/renderer 81.1.1 → 82.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/renderer
 
+## 82.0.0
+
+### Major Changes
+
+- [`3c5548e50da`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c5548e50da) - [ux] Introducing new Media Inline component to renderer
+
+### Minor Changes
+
+- [`971845eac0d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/971845eac0d) - CETI-96 Added new rule to emoji to solve the duplicate icon issue when we copy from renderer
+
+### Patch Changes
+
+- [`f897443ad45`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f897443ad45) - Revert AK-279
+- [`87865d3284f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/87865d3284f) - CETI-122 Fix Rendering of hybrid renderer when the prop UNSAFE_allowCustomPanels changed.
+- [`a554946e674`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a554946e674) - Skipping flakey tests to unblock the weasal release
+- [`33bca2a18bb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/33bca2a18bb) - Skipping a flaky test to unblock the weasal release
+- Updated dependencies
+
 ## 81.1.1
 
 ### Patch Changes

package/dist/cjs/react/index.js

@@ -220,6 +220,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -478,6 +481,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {

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

@@ -135,8 +135,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAnchorButton", function () {
       return /*#__PURE__*/_react.default.createElement(CopyAnchorButton, {
         onMouseLeave: _this.resetMessage,
-        onClick: _this.copyToClipboard,
-        "aria-label": _this.state.tooltipMessage
+        onClick: _this.copyToClipboard
       }, /*#__PURE__*/_react.default.createElement(_link.default, {
         label: "copy",
         size: _this.props.level > 3 ? 'small' : 'medium',

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

@@ -55,11 +55,9 @@ function Heading(props) {
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "heading-wrapper ".concat(HX)
-  }, /*#__PURE__*/_react.default.createElement(HX, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(HX, (0, _extends2.default)({
     id: headingId
-  }, dataAttributes), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children)), showAnchorLink && /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref) {
+  }, dataAttributes), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref) {
     var copyTextToClipboard = _ref.copyTextToClipboard;
     return headingId && /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
       var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
@@ -77,7 +75,7 @@ function Heading(props) {
         }
       });
     });
-  }));
+  })));
 }
 
 var _default = Heading;

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

@@ -162,7 +162,7 @@ Object.defineProperty(exports, "EmbedCard", {
     return _embedCard.default;
   }
 });
-exports.TaskItem = exports.Status = exports.Mention = exports.MediaGroup = exports.Media = exports.InlineCard = exports.Expand = exports.Emoji = exports.DecisionItem = exports.Date = exports.CodeBlock = exports.BlockCard = exports.isEmojiDoc = exports.isTextWrapper = exports.isText = exports.mergeTextNodes = exports.toReact = exports.nodeToReact = void 0;
+exports.TaskItem = exports.Status = exports.Mention = exports.MediaInline = exports.MediaGroup = exports.Media = exports.InlineCard = exports.Expand = exports.Emoji = exports.DecisionItem = exports.Date = exports.CodeBlock = exports.BlockCard = exports.isEmojiDoc = exports.isTextWrapper = exports.isText = exports.mergeTextNodes = exports.toReact = exports.nodeToReact = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
@@ -354,6 +354,19 @@ var MediaGroup = (0, _reactLoadable.default)({
   }
 });
 exports.MediaGroup = MediaGroup;
+var MediaInline = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./mediaInline'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+exports.MediaInline = MediaInline;
 var Mention = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
@@ -402,6 +415,7 @@ var nodeToReact = {
   listItem: _listItem.default,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: _mediaSingle.default,
   mention: Mention,
   orderedList: _orderedList.default,

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

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RenderMediaInline = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mediaCard = require("@atlaskit/media-card");
+
+var _editorCommon = require("@atlaskit/editor-common");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RenderMediaInline = function RenderMediaInline(props) {
+  var mediaProvider = props.mediaProvider;
+
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      viewMediaClientConfigState = _useState2[0],
+      setViewMediaClientConfigState = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(mediaProvider) {
+      var mediaClientConfig;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!mediaProvider) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return mediaProvider;
+
+            case 3:
+              mediaClientConfig = _context.sent;
+              setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateViewMediaClientConfigState(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react.default.createElement(_mediaCard.MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+exports.RenderMediaInline = RenderMediaInline;
+
+var MediaInline = function MediaInline(props) {
+  var collection = props.collection,
+      id = props.id,
+      providers = props.providers;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_editorCommon.WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: function renderNode(providers) {
+      var mediaProvider = providers.mediaProvider;
+      return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+var _default = MediaInline;
+exports.default = _default;

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

@@ -93,7 +93,7 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: _editorCommon.PanelSharedCssClassName.icon
       }, icon);
     }

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

@@ -223,7 +223,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new _.ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }

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

@@ -65,7 +65,7 @@ var headingSizes = {
 exports.headingSizes = headingSizes;
 
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    display: inline-block;\n    & + .", " {\n      position: absolute;\n      margin-left: 6px;\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      & + .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n          &:focus {\n            opacity: 1;\n            transform: none !important;\n            outline: solid 2px ", ";\n          }\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName, colors.B200);
+  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), _headingAnchor.HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, _headingAnchor.HeadingAnchorWrapperClassName, _headingAnchor.HeadingAnchorWrapperClassName);
 };
 
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -75,7 +75,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
     return '';
   }
 
-  return "\n    .fabric-editor-block-mark[data-align] > {\n      h1, h2, h3, h4, h5, h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n        .heading-wrapper {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.".concat(_headingAnchor.HeadingAnchorWrapperClassName, "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button {\n          transform: translate(8px, 0);\n        }\n      }\n    }\n  ");
+  return "\n    .fabric-editor-block-mark[data-align] > {\n      h1, h2, h3, h4, h5, h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n        > {\n          h1, h2, h3, h4, h5, h6 {\n            // Using right to left text to achieve the inverse effect\n            // of where the copy link button icon sits for left/center\n            // alignment.\n            // Although this is unorthodox it's the only approach which\n            // allows the button to sit flush against the left edge of\n            // bottom line of text.\n            direction: rtl;\n\n            // By default RTL will negatively impact the layout of special\n            // characters within the heading text, and potentially other\n            // nested inline nodes. To prevent this we insert pseudo elements\n            // containing HTML entities to retain LTR for all heading content\n            // except for the copy link button.\n            > *:not(.".concat(_headingAnchor.HeadingAnchorWrapperClassName, "):not(br) {\n              ::before {\n                // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n                content: '\u202A';\n              }\n              ::after {\n                // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n                content: '\u202C';\n              }\n            }\n          }\n        }\n        .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n          margin: 0 6px 0 0;\n        }\n\n        @media (hover: hover) and (pointer: fine) {\n          .").concat(_headingAnchor.HeadingAnchorWrapperClassName, " > button {\n            transform: translate(8px, 0px);\n          }\n        }\n      }\n    }\n  ");
 };
 
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
@@ -89,7 +89,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var headingsCss = '';
 
   if (allowNestedHeaderLinks) {
-    headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      .heading-wrapper {\n        margin-right: 30px;\n      }\n    ");
+    headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(_headingAnchor.HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
   return "\n    .".concat(_consts.RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(_editorCommon.tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(_consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
@@ -117,10 +117,10 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  div.heading-wrapper{\n    position: relative;\n    h1, h2, h3, h4, h5, h6{\n      margin-top: 0;\n      font-size: inherit;\n    }\n    &.h1 {\n      ", ";\n      margin-top: 1.667em;\n    }\n    &.h2 {\n      ", ";\n      margin-top: 1.8em;\n    }\n    &.h3 {\n      ", ";\n      margin-top: 2em;\n    }\n    &.h4 {\n      ", ";\n      margin-top: 1.357em;\n    }\n    &.h5 {\n      ", ";\n      margin-top: 1.667em;\n    }\n    &.h6 {\n      ", ";\n      margin-top: 1.455em;\n    }\n    /* show copy button on heading wrapper hover */\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n          .", " > button{\n            opacity: 1;\n            transform: none !important;\n          }\n      }\n    }\n  }\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
+var Wrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), _editorSharedStyles.editorFontSize, (0, _components.themed)({
   light: colors.N800,
   dark: '#B8C7E0'
-}), fullPageStyles, fullWidthStyles, _typography.h700, _typography.h600, _typography.h500, _typography.h400, _typography.h300, _typography.h100, _headingAnchor.HeadingAnchorWrapperClassName, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _editorCommon.whitespaceSharedStyles, _editorCommon.blockquoteSharedStyles, _editorCommon.headingsSharedStyles, _editorCommon.panelSharedStyles, _editorCommon.ruleSharedStyles, _editorCommon.paragraphSharedStyles, _editorCommon.listsSharedStyles, _editorCommon.indentationSharedStyles, _editorCommon.blockMarksSharedStyles, _editorCommon.codeMarkSharedStyles, _editorCommon.shadowSharedStyle, _editorCommon.dateSharedStyle, _editorCommon.tasksAndDecisionsStyles, _editorCommon.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, _editorCommon.whitespaceSharedStyles, _editorCommon.blockquoteSharedStyles, _editorCommon.headingsSharedStyles, _editorCommon.panelSharedStyles, _editorCommon.ruleSharedStyles, _editorCommon.paragraphSharedStyles, _editorCommon.listsSharedStyles, _editorCommon.indentationSharedStyles, _editorCommon.blockMarksSharedStyles, _editorCommon.codeMarkSharedStyles, _editorCommon.shadowSharedStyle, _editorCommon.dateSharedStyle, _editorCommon.tasksAndDecisionsStyles, _editorCommon.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
   light: colors.N30A,
   dark: colors.DN70
 }), (0, _constants.borderRadius)(), (0, _components.themed)({

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "81.1.1",
+	"version": "82.0.0",
 	"sideEffects": false
 }

package/dist/es2019/react/index.js

@@ -192,6 +192,9 @@ export default class ReactSerializer {
       case 'mediaGroup':
         return this.getMediaGroupProps(node);
 
+      case 'mediaInline':
+        return this.getMediaInlineProps(node);
+
       case 'mediaSingle':
         return this.getMediaSingleProps(node, path);
 
@@ -410,6 +413,11 @@ export default class ReactSerializer {
     };
   }
 
+  getMediaInlineProps(node) {
+    return { ...this.getProps(node)
+    };
+  }
+
   getTaskItemProps(node, path = []) {
     return { ...this.getProps(node, path),
       disabled: this.disableActions

package/dist/es2019/react/nodes/heading-anchor.js

@@ -66,8 +66,7 @@ class HeadingAnchor extends React.PureComponent {
     _defineProperty(this, "renderAnchorButton", () => {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: this.resetMessage,
-        onClick: this.copyToClipboard,
-        "aria-label": this.state.tooltipMessage
+        onClick: this.copyToClipboard
       }, /*#__PURE__*/React.createElement(LinkIcon, {
         label: "copy",
         size: this.props.level > 3 ? 'small' : 'medium',

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

@@ -39,11 +39,9 @@ function Heading(props) {
   const showAnchorLink = !!props.showAnchorLink;
   const isRightAligned = hasRightAlignmentMark(marks);
   const enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
-  return /*#__PURE__*/React.createElement("div", {
-    className: `heading-wrapper ${HX}`
-  }, /*#__PURE__*/React.createElement(HX, _extends({
+  return /*#__PURE__*/React.createElement(HX, _extends({
     id: headingId
-  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children)), showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
+  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
     copyTextToClipboard
   }) => {
     return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
@@ -61,7 +59,7 @@ function Heading(props) {
         return copyTextToClipboard(getCurrentUrlWithHash(headingId));
       }
     }));
-  }));
+  })));
 }
 
 export default Heading;

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

@@ -85,6 +85,12 @@ const MediaGroup = Loadable({
   './mediaGroup').then(mod => mod.default),
   loading: () => null
 });
+const MediaInline = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaInline" */
+  './mediaInline').then(mod => mod.default),
+  loading: () => null
+});
 const Mention = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_Mention" */
@@ -119,6 +125,7 @@ export const nodeToReact = {
   listItem: ListItem,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: MediaSingle,
   mention: Mention,
   orderedList: OrderedList,
@@ -278,4 +285,4 @@ const isEmojiBlock = pnode => {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export const RenderMediaInline = props => {
+  const {
+    mediaProvider
+  } = props;
+  const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState({});
+  useEffect(() => {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  const updateViewMediaClientConfigState = async mediaProvider => {
+    if (mediaProvider) {
+      const mediaClientConfig = await mediaProvider;
+      setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+const MediaInline = props => {
+  const {
+    collection,
+    id,
+    providers
+  } = props;
+  const identifier = {
+    id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: providers => {
+      const {
+        mediaProvider
+      } = providers;
+      return /*#__PURE__*/React.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+export default MediaInline;

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

@@ -77,7 +77,7 @@ const Panel = props => {
     const icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }

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

@@ -147,7 +147,7 @@ export class Renderer extends PureComponent {
     const nextMedia = nextProps.media || {};
     const media = this.props.media || {};
 
-    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+    if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
       this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
     }
   }

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

@@ -7,7 +7,6 @@ import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, head
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
-import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -38,10 +37,12 @@ const headingAnchorStyle = headingTag => css`
      * The copy link button doesn't reserve space in the DOM so that
      * the text alignment isn't impacted by the button/icon's space.
      */
-    display: inline-block;
-    & + .${HeadingAnchorWrapperClassName} {
+    .${HeadingAnchorWrapperClassName} {
       position: absolute;
+      height: ${headingSizes[headingTag].lineHeight}em;
+
       margin-left: 6px;
+
       button {
         padding-left: 0;
         padding-right: 0;
@@ -58,16 +59,18 @@ const headingAnchorStyle = headingTag => css`
      * @see https://caniuse.com/mdn-css_at-rules_media_hover
      */
     @media (hover: hover) and (pointer: fine) {
-      & + .${HeadingAnchorWrapperClassName} {
+      .${HeadingAnchorWrapperClassName} {
         > button {
           opacity: 0;
           transform: translate(-8px, 0px);
           transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
-          &:focus {
-            opacity: 1;
-            transform: none !important;
-            outline: solid 2px ${colors.B200};
-          }
+        }
+      }
+
+      &:hover {
+        .${HeadingAnchorWrapperClassName} > button {
+          opacity: 1;
+          transform: none !important;
         }
       }
     }
@@ -93,39 +96,41 @@ const alignedHeadingAnchorStyle = ({
      * container edge.
      */
     .fabric-editor-block-mark:not([data-align='center'])[data-align] {
-        .heading-wrapper {
-          // Using right to left text to achieve the inverse effect
-          // of where the copy link button icon sits for left/center
-          // alignment.
-          // Although this is unorthodox it's the only approach which
-          // allows the button to sit flush against the left edge of
-          // bottom line of text.
-          direction: rtl;
-
-          // By default RTL will negatively impact the layout of special
-          // characters within the heading text, and potentially other
-          // nested inline nodes. To prevent this we insert pseudo elements
-          // containing HTML entities to retain LTR for all heading content
-          // except for the copy link button.
-          > *:not(.${HeadingAnchorWrapperClassName}):not(br) {
-            ::before {
-              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm
-              content: '\u202A';
-            }
-            ::after {
-              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm
-              content: '\u202C';
+        > {
+          h1, h2, h3, h4, h5, h6 {
+            // Using right to left text to achieve the inverse effect
+            // of where the copy link button icon sits for left/center
+            // alignment.
+            // Although this is unorthodox it's the only approach which
+            // allows the button to sit flush against the left edge of
+            // bottom line of text.
+            direction: rtl;
+
+            // By default RTL will negatively impact the layout of special
+            // characters within the heading text, and potentially other
+            // nested inline nodes. To prevent this we insert pseudo elements
+            // containing HTML entities to retain LTR for all heading content
+            // except for the copy link button.
+            > *:not(.${HeadingAnchorWrapperClassName}):not(br) {
+              ::before {
+                // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm
+                content: '\u202A';
+              }
+              ::after {
+                // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm
+                content: '\u202C';
+              }
             }
           }
         }
-      }
-      .${HeadingAnchorWrapperClassName} {
-        margin: 0 6px 0 0;
-      }
+        .${HeadingAnchorWrapperClassName} {
+          margin: 0 6px 0 0;
+        }
 
-      @media (hover: hover) and (pointer: fine) {
-        .${HeadingAnchorWrapperClassName} > button {
-          transform: translate(8px, 0);
+        @media (hover: hover) and (pointer: fine) {
+          .${HeadingAnchorWrapperClassName} > button {
+            transform: translate(8px, 0px);
+          }
         }
       }
     }
@@ -160,8 +165,10 @@ const tableSortableColumnStyle = ({
       .${HeadingAnchorWrapperClassName} {
         position: unset;
       }
-      .heading-wrapper {
-        margin-right: 30px;
+      > {
+        h1, h2, h3, h4, h5, h6 {
+          margin-right: 30px;
+        }
       }
     `;
   }
@@ -272,47 +279,6 @@ export const Wrapper = styled.div`
   ${fullPageStyles}
   ${fullWidthStyles}
 
-  div.heading-wrapper{
-    position: relative;
-    h1, h2, h3, h4, h5, h6{
-      margin-top: 0;
-      font-size: inherit;
-    }
-    &.h1 {
-      ${h700};
-      margin-top: 1.667em;
-    }
-    &.h2 {
-      ${h600};
-      margin-top: 1.8em;
-    }
-    &.h3 {
-      ${h500};
-      margin-top: 2em;
-    }
-    &.h4 {
-      ${h400};
-      margin-top: 1.357em;
-    }
-    &.h5 {
-      ${h300};
-      margin-top: 1.667em;
-    }
-    &.h6 {
-      ${h100};
-      margin-top: 1.455em;
-    }
-    /* show copy button on heading wrapper hover */
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-          .${HeadingAnchorWrapperClassName} > button{
-            opacity: 1;
-            transform: none !important;
-          }
-      }
-    }
-  }
-
   & h1 {
     ${headingAnchorStyle('h1')}
   }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "81.1.1",
+	"version": "82.0.0",
 	"sideEffects": false
 }

package/dist/esm/react/index.js

@@ -212,6 +212,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -470,6 +473,11 @@ var ReactSerializer = /*#__PURE__*/function () {
         enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {

package/dist/esm/react/nodes/heading-anchor.js

@@ -111,8 +111,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderAnchorButton", function () {
       return /*#__PURE__*/React.createElement(CopyAnchorButton, {
         onMouseLeave: _this.resetMessage,
-        onClick: _this.copyToClipboard,
-        "aria-label": _this.state.tooltipMessage
+        onClick: _this.copyToClipboard
       }, /*#__PURE__*/React.createElement(LinkIcon, {
         label: "copy",
         size: _this.props.level > 3 ? 'small' : 'medium',

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

@@ -40,11 +40,9 @@ function Heading(props) {
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "heading-wrapper ".concat(HX)
-  }, /*#__PURE__*/React.createElement(HX, _extends({
+  return /*#__PURE__*/React.createElement(HX, _extends({
     id: headingId
-  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children)), showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, function (_ref) {
+  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, function (_ref) {
     var copyTextToClipboard = _ref.copyTextToClipboard;
     return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
       var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
@@ -62,7 +60,7 @@ function Heading(props) {
         }
       });
     });
-  }));
+  })));
 }
 
 export default Heading;

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

@@ -145,6 +145,18 @@ var MediaGroup = Loadable({
     return null;
   }
 });
+var MediaInline = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_MediaInline" */
+    './mediaInline').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var Mention = Loadable({
   loader: function loader() {
     return import(
@@ -191,6 +203,7 @@ export var nodeToReact = {
   listItem: ListItem,
   media: Media,
   mediaGroup: MediaGroup,
+  mediaInline: MediaInline,
   mediaSingle: MediaSingle,
   mention: Mention,
   orderedList: OrderedList,
@@ -354,4 +367,4 @@ var isEmojiBlock = function isEmojiBlock(pnode) {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };

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

@@ -0,0 +1,80 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import { MediaInlineCard } from '@atlaskit/media-card';
+import { WithProviders } from '@atlaskit/editor-common';
+export var RenderMediaInline = function RenderMediaInline(props) {
+  var mediaProvider = props.mediaProvider;
+
+  var _useState = useState({}),
+      _useState2 = _slicedToArray(_useState, 2),
+      viewMediaClientConfigState = _useState2[0],
+      setViewMediaClientConfigState = _useState2[1];
+
+  useEffect(function () {
+    updateViewMediaClientConfigState(mediaProvider);
+  }, [mediaProvider]);
+
+  var updateViewMediaClientConfigState = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(mediaProvider) {
+      var mediaClientConfig;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!mediaProvider) {
+                _context.next = 5;
+                break;
+              }
+
+              _context.next = 3;
+              return mediaProvider;
+
+            case 3:
+              mediaClientConfig = _context.sent;
+              setViewMediaClientConfigState(mediaClientConfig.viewMediaClientConfig);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function updateViewMediaClientConfigState(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/React.createElement(MediaInlineCard, {
+    identifier: props.identifier,
+    shouldOpenMediaViewer: true,
+    mediaClientConfig: viewMediaClientConfigState
+  });
+};
+
+var MediaInline = function MediaInline(props) {
+  var collection = props.collection,
+      id = props.id,
+      providers = props.providers;
+  var identifier = {
+    id: id,
+    mediaItemType: 'file',
+    collectionName: collection
+  };
+  return /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(WithProviders, {
+    providers: ['mediaProvider'],
+    providerFactory: providers,
+    renderNode: function renderNode(providers) {
+      var mediaProvider = providers.mediaProvider;
+      return /*#__PURE__*/React.createElement(RenderMediaInline, {
+        identifier: identifier,
+        mediaProvider: mediaProvider
+      });
+    }
+  }));
+};
+
+export default MediaInline;

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

@@ -72,7 +72,7 @@ var Panel = function Panel(props) {
     var icon = getIcon();
 
     if (icon) {
-      return /*#__PURE__*/React.createElement("span", {
+      return /*#__PURE__*/React.createElement("div", {
         className: PanelSharedCssClassName.icon
       }, icon);
     }

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

@@ -174,7 +174,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
       var nextMedia = nextProps.media || {};
       var media = this.props.media || {};
 
-      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
+      if (nextProps.portal !== this.props.portal || nextProps.appearance !== this.props.appearance || nextProps.stickyHeaders !== this.props.stickyHeaders || nextProps.disableActions !== this.props.disableActions || nextProps.UNSAFE_allowCustomPanels !== this.props.UNSAFE_allowCustomPanels || nextProps.allowHeadingAnchorLinks !== this.props.allowHeadingAnchorLinks || nextMedia.allowLinking !== media.allowLinking) {
         this.serializer = new ReactSerializer(this.deriveSerializerProps(nextProps));
       }
     }

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

@@ -11,7 +11,6 @@ import { tableSharedStyle, columnLayoutSharedStyle, blockquoteSharedStyles, head
 import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableBorder, akEditorTableBorderDark, akEditorTableNumberColumnWidth, gridMediumMaxWidth, akEditorFullWidthLayoutWidth, akEditorStickyHeaderZIndex, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
-import { h100, h300, h400, h500, h600, h700 } from '@atlaskit/theme/typography';
 export var FullPagePadding = 32;
 
 var getLineHeight = function getLineHeight(fontCode) {
@@ -40,7 +39,7 @@ export var headingSizes = {
 };
 
 var headingAnchorStyle = function headingAnchorStyle(headingTag) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    display: inline-block;\n    & + .", " {\n      position: absolute;\n      margin-left: 6px;\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      & + .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n          &:focus {\n            opacity: 1;\n            transform: none !important;\n            outline: solid 2px ", ";\n          }\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName, colors.B200);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    /**\n     * The copy link button doesn't reserve space in the DOM so that\n     * the text alignment isn't impacted by the button/icon's space.\n     */\n    .", " {\n      position: absolute;\n      height: ", "em;\n\n      margin-left: 6px;\n\n      button {\n        padding-left: 0;\n        padding-right: 0;\n      }\n    }\n\n    /**\n     * Applies hover effects to the heading anchor link button\n     * to fade in when the user rolls over the heading.\n     *\n     * The link is persistent on mobile, so we use feature detection\n     * to enable hover effects for systems that support it (desktop).\n     *\n     * @see https://caniuse.com/mdn-css_at-rules_media_hover\n     */\n    @media (hover: hover) and (pointer: fine) {\n      .", " {\n        > button {\n          opacity: 0;\n          transform: translate(-8px, 0px);\n          transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;\n        }\n      }\n\n      &:hover {\n        .", " > button {\n          opacity: 1;\n          transform: none !important;\n        }\n      }\n    }\n  "])), HeadingAnchorWrapperClassName, headingSizes[headingTag].lineHeight, HeadingAnchorWrapperClassName, HeadingAnchorWrapperClassName);
 };
 
 var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
@@ -50,7 +49,7 @@ var alignedHeadingAnchorStyle = function alignedHeadingAnchorStyle(_ref) {
     return '';
   }
 
-  return "\n    .fabric-editor-block-mark[data-align] > {\n      h1, h2, h3, h4, h5, h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n        .heading-wrapper {\n          // Using right to left text to achieve the inverse effect\n          // of where the copy link button icon sits for left/center\n          // alignment.\n          // Although this is unorthodox it's the only approach which\n          // allows the button to sit flush against the left edge of\n          // bottom line of text.\n          direction: rtl;\n\n          // By default RTL will negatively impact the layout of special\n          // characters within the heading text, and potentially other\n          // nested inline nodes. To prevent this we insert pseudo elements\n          // containing HTML entities to retain LTR for all heading content\n          // except for the copy link button.\n          > *:not(.".concat(HeadingAnchorWrapperClassName, "):not(br) {\n            ::before {\n              // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n              content: '\u202A';\n            }\n            ::after {\n              // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n              content: '\u202C';\n            }\n          }\n        }\n      }\n      .").concat(HeadingAnchorWrapperClassName, " {\n        margin: 0 6px 0 0;\n      }\n\n      @media (hover: hover) and (pointer: fine) {\n        .").concat(HeadingAnchorWrapperClassName, " > button {\n          transform: translate(8px, 0);\n        }\n      }\n    }\n  ");
+  return "\n    .fabric-editor-block-mark[data-align] > {\n      h1, h2, h3, h4, h5, h6 {\n        position: relative;\n      }\n    }\n\n    /**\n     * For right-alignment we flip the link to be before the heading\n     * text so that the text is flush up against the edge of the editor's\n     * container edge.\n     */\n    .fabric-editor-block-mark:not([data-align='center'])[data-align] {\n        > {\n          h1, h2, h3, h4, h5, h6 {\n            // Using right to left text to achieve the inverse effect\n            // of where the copy link button icon sits for left/center\n            // alignment.\n            // Although this is unorthodox it's the only approach which\n            // allows the button to sit flush against the left edge of\n            // bottom line of text.\n            direction: rtl;\n\n            // By default RTL will negatively impact the layout of special\n            // characters within the heading text, and potentially other\n            // nested inline nodes. To prevent this we insert pseudo elements\n            // containing HTML entities to retain LTR for all heading content\n            // except for the copy link button.\n            > *:not(.".concat(HeadingAnchorWrapperClassName, "):not(br) {\n              ::before {\n                // Open LTR: https://www.fileformat.info/info/unicode/char/202a/index.htm\n                content: '\u202A';\n              }\n              ::after {\n                // Close LTR: https://www.fileformat.info/info/unicode/char/202c/index.htm\n                content: '\u202C';\n              }\n            }\n          }\n        }\n        .").concat(HeadingAnchorWrapperClassName, " {\n          margin: 0 6px 0 0;\n        }\n\n        @media (hover: hover) and (pointer: fine) {\n          .").concat(HeadingAnchorWrapperClassName, " > button {\n            transform: translate(8px, 0px);\n          }\n        }\n      }\n    }\n  ");
 };
 
 var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
@@ -64,7 +63,7 @@ var tableSortableColumnStyle = function tableSortableColumnStyle(_ref2) {
   var headingsCss = '';
 
   if (allowNestedHeaderLinks) {
-    headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      .heading-wrapper {\n        margin-right: 30px;\n      }\n    ");
+    headingsCss = "\n      /**\n       * When the sort button is enabled we want the heading's copy link button\n       * to reserve space so that it can prematurely wrap to avoid the button\n       * being displayed underneath the sort button (hidden or obscured).\n       *\n       * The two buttons fight each other since the sort button is displayed\n       * on hover of the <th /> and the copy link button is displayed on hover\n       * of the heading.\n       *\n       * Note that this can break the WYSIWYG experience in the case where\n       * a heading fills the width of the table cell and the only thing which\n       * wraps is the copy link button. This is hopefully a rare fringe case.\n       */\n      .".concat(HeadingAnchorWrapperClassName, " {\n        position: unset;\n      }\n      > {\n        h1, h2, h3, h4, h5, h6 {\n          margin-right: 30px;\n        }\n      }\n    ");
   }
 
   return "\n    .".concat(RendererCssClassName.SORTABLE_COLUMN, " {\n      padding: 0;\n\n      .").concat(RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        width: 100%;\n        height: 100%;\n        cursor: pointer;\n        padding: ").concat(tableCellPadding, "px;\n        border-width: 1.5px;\n        border-style: solid;\n        border-color: transparent;\n\n        > *:first-child {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor.-right:first-child + * {\n          margin-top: 0;\n        }\n\n        > .ProseMirror-gapcursor:first-child + span + * {\n          margin-top: 0;\n        }\n\n        @supports selector(:focus-visible) {\n          &:focus {\n            outline: unset;\n          }\n          &:focus-visible {\n            border-color: ").concat(colors.B300, ";\n          }\n        }\n\n        ").concat(headingsCss, "\n      }\n\n      &.").concat(RendererCssClassName.SORTABLE_COLUMN_NOT_ALLOWED, " .").concat(RendererCssClassName.SORTABLE_COLUMN_BUTTON, " {\n        cursor: default;\n      }\n\n      .").concat(RendererCssClassName.SORTABLE_COLUMN_ICON, " {\n        margin: 0;\n        opacity: 1;\n        transition: opacity 0.2s ease-in-out;\n      }\n\n      .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n        opacity: 0;\n      }\n\n      &:hover {\n        .").concat(RendererCssClassName.SORTABLE_COLUMN_NO_ORDER, " {\n          opacity: 1;\n        }\n      }\n    }\n  ");
@@ -92,10 +91,10 @@ var fullWidthStyles = function fullWidthStyles(_ref4) {
 }; // prettier-ignore
 
 
-export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  div.heading-wrapper{\n    position: relative;\n    h1, h2, h3, h4, h5, h6{\n      margin-top: 0;\n      font-size: inherit;\n    }\n    &.h1 {\n      ", ";\n      margin-top: 1.667em;\n    }\n    &.h2 {\n      ", ";\n      margin-top: 1.8em;\n    }\n    &.h3 {\n      ", ";\n      margin-top: 2em;\n    }\n    &.h4 {\n      ", ";\n      margin-top: 1.357em;\n    }\n    &.h5 {\n      ", ";\n      margin-top: 1.667em;\n    }\n    &.h6 {\n      ", ";\n      margin-top: 1.455em;\n    }\n    /* show copy button on heading wrapper hover */\n    @media (hover: hover) and (pointer: fine) {\n      &:hover {\n          .", " > button{\n            opacity: 1;\n            transform: none !important;\n          }\n      }\n    }\n  }\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), editorFontSize, themed({
+export var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  font-size: ", "px;\n  line-height: 1.5rem;\n  color: ", ";\n\n  ", "\n  ", "\n\n  & h1 {\n    ", "\n  }\n\n  & h2 {\n    ", "\n  }\n\n  & h3 {\n    ", "\n  }\n\n  & h4 {\n    ", "\n  }\n\n  & h5 {\n    ", "\n  }\n\n  & h6 {\n    ", "\n  }\n\n  & span.akActionMark {\n    color: ", ";\n    text-decoration: none;\n\n    &:hover {\n      color: ", ";\n      text-decoration: underline;\n    }\n  }\n\n  & span.akActionMark {\n    cursor: pointer;\n  }\n\n  & span[data-placeholder] {\n    color: ", ";\n  }\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", "\n\n  & .UnknownBlock {\n    font-family: ", ";\n    font-size: ", ";\n    font-weight: 400;\n    white-space: pre-wrap;\n    word-wrap: break-word;\n  }\n\n  & span.date-node {\n    background: ", ";\n    border-radius: ", "px;\n    color: ", ";\n    padding: 2px 4px;\n    margin: 0 1px;\n    transition: background 0.3s;\n  }\n\n  & span.date-node-highlighted {\n    background: ", ";\n    color: ", ";\n  }\n\n  & .renderer-image {\n    max-width: 100%;\n    display: block;\n    margin: ", "px 0;\n  }\n\n  .", ".rich-media-wrapped + .", ":not(.rich-media-wrapped) {\n    clear: both;\n  }\n\n  & .code-block,\n  & blockquote,\n  & hr,\n  & > div > div:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + .rich-media-wrapped + *:not(.rich-media-wrapped),\n  .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n  .", ".image-align-start,\n  .", ".image-center,\n  .", ".image-align-end {\n    clear: both;\n  }\n\n  & .rich-media-wrapped {\n    & + h1,\n    & + h2,\n    & + h3,\n    & + h4,\n    & + h5,\n    & + h6 {\n      margin-top: 8px;\n    }\n  }\n\n  ", "\n\n  ", " &\n  div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n    margin-left: 0;\n    margin-right: 0;\n  }\n\n  /* Breakout for tables and extensions */\n  .", " > {\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n\n    * .", " {\n      overflow-x: auto;\n    }\n\n    & .", ":first-child {\n      margin-top: 0;\n    }\n  }\n\n  .", " {\n    margin-top: ", ";\n  }\n\n  .", " {\n      margin-left: 50%;\n      transform: translateX(-50%);\n  }\n\n  .", " {\n    overflow-x: auto;\n  }\n\n  ", "\n\n  .", " {\n    z-index: 0;\n    transition: all 0.1s linear;\n    display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n    /** Shadow overrides */\n    &.", "::after, &.", "::before {\n      top: ", "px;\n      height: calc(100% - ", "px);\n      z-index: ", ";\n    }\n\n    /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n    table {\n      height: 1px; /* will be ignored */\n      ", ";\n      margin-left: 0;\n      margin-right: 0;\n    }\n\n    table tr:first-child {\n      height: 100%;\n\n      td, th {\n        position: relative;\n      }\n    }\n\n    table[data-number-column='true'] {\n      .", " {\n        background-color: ", ";\n        border-right: 1px solid ", ";\n        width: ", "px;\n        text-align: center;\n        color: ", ";\n        font-size: ", ";\n      }\n\n      .fixed .", " {\n        border-right: 0px none;\n      }\n    }\n  }\n\n  tr[data-header-row].fixed {\n    position: fixed !important;\n    display: flex;\n    overflow: hidden;\n    z-index: ", ";\n\n    border-right: 1px solid ", ";\n    border-bottom: 1px solid ", ";\n\n    /* this is to compensate for the table border */\n    transform: translateX(-1px);\n  }\n\n  .sticky > th {\n    z-index: ", ";\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* Make the number column header sticky */\n  .sticky > td {\n    position: sticky !important;\n    top: 0;\n  }\n\n  /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n  .sticky th, .sticky td {\n    box-shadow: 0px 1px ", ", 0px -0.5px ", ", inset -1px 0px ", ", 0px -1px ", ";\n  }\n\n   /* this will remove jumpiness caused in Chrome for sticky headers */\n  .fixed + tr {\n    min-height: 0px;\n  }\n\n  /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n  & .code-block {\n    max-width: 100%;\n    /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n    /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n    display: -ms-grid;\n    display: grid;\n    -ms-grid-columns: auto 1fr;\n    /* stylelint-enable */\n\n    grid-template-columns: minmax(0, 1fr);\n    position: relative;\n    border-radius: ", "px;\n\n    /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n    word-wrap: normal;\n\n    & > span {\n      /* stylelint-disable value-no-vendor-prefix */\n      -ms-grid-row: 1;\n      -ms-grid-column: 2;\n      /* stylelint-enable */\n      grid-column: 1;\n    }\n  }\n\n  & .MediaGroup,\n  & .code-block {\n    margin-top: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:hover button.copy-to-clipboard{\n      opacity: 1;\n      position: absolute;\n      height: 32px;\n      width: 32px;\n      right: 6px;\n      top: 4px;\n      padding: 2px;\n    }\n  }\n\n  ", ";\n  & [data-layout-section] {\n    margin-top: ", "px;\n    & > div + div {\n      margin-left: ", "px;\n    }\n\n    @media screen and (max-width: ", "px) {\n      & > div + div {\n        margin-left: 0;\n      }\n    }\n  }\n"])), editorFontSize, themed({
   light: colors.N800,
   dark: '#B8C7E0'
-}), fullPageStyles, fullWidthStyles, h700, h600, h500, h400, h300, h100, HeadingAnchorWrapperClassName, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, panelSharedStyles, ruleSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
+}), fullPageStyles, fullWidthStyles, headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), colors.B400, colors.B300, colors.placeholderText, whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles, panelSharedStyles, ruleSharedStyles, paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles, shadowSharedStyle, dateSharedStyle, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
   light: colors.N30A,
   dark: colors.DN70
 }), borderRadius(), themed({

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "81.1.1",
+	"version": "82.0.0",
 	"sideEffects": false
 }

package/dist/types/react/index.d.ts

@@ -88,6 +88,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private getMediaProps;
     private getEmbedCardProps;
     private getMediaGroupProps;
+    private getMediaInlineProps;
     private getTaskItemProps;
     private getHardBreakProps;
     private getCodeBlockProps;

package/dist/types/react/nodes/index.d.ts

@@ -60,6 +60,7 @@ declare const BlockCard: (React.ComponentClass<{
 }> & Loadable.LoadableComponent);
 declare const Media: (React.ComponentClass<import("./media").MediaProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./media").MediaProps> & Loadable.LoadableComponent);
 declare const MediaGroup: (React.ComponentClass<import("./mediaGroup").MediaGroupProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaGroup").MediaGroupProps> & Loadable.LoadableComponent);
+declare const MediaInline: (React.ComponentClass<import("./mediaInline").MediaInlineProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mediaInline").MediaInlineProps> & Loadable.LoadableComponent);
 declare const Mention: (React.ComponentClass<import("./mention").Props, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("./mention").Props> & Loadable.LoadableComponent);
 declare const Expand: (React.ComponentClass<import("../../ui/Expand").ExpandProps, any> & Loadable.LoadableComponent) | (React.FunctionComponent<import("../../ui/Expand").ExpandProps> & Loadable.LoadableComponent);
 export declare const nodeToReact: {
@@ -93,5 +94,5 @@ export declare function isTextNode(node: Node | Mark): node is Node;
  * whose content satisfies the condition for an emoji block
  */
 export declare const isEmojiDoc: (doc: Fragment) => boolean;
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard, };
 export type { BodiedExtensionProps, ExtensionProps, InlineExtensionProps };

package/dist/types/react/nodes/mediaInline.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ProviderFactory } from '@atlaskit/editor-common';
+import { FileIdentifier } from '@atlaskit/media-client';
+import { MediaProvider } from '../../ui/MediaCard';
+export declare type RenderMediaInlineProps = {
+    identifier: FileIdentifier;
+    mediaProvider?: Promise<MediaProvider>;
+    children?: React.ReactNode;
+};
+export declare type MediaInlineProps = {
+    id: string;
+    collection?: string;
+    providers: ProviderFactory;
+};
+export declare const RenderMediaInline: React.FC<RenderMediaInlineProps>;
+declare const MediaInline: React.FC<MediaInlineProps>;
+export default MediaInline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "81.1.1",
+  "version": "82.0.0",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,19 +24,19 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^19.2.0",
+    "@atlaskit/adf-schema": "^19.3.0",
     "@atlaskit/adf-utils": "^14.3.0",
     "@atlaskit/analytics-listeners": "^8.0.0",
     "@atlaskit/analytics-namespaced-context": "^6.3.0",
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/button": "^16.1.0",
     "@atlaskit/code": "^14.1.0",
-    "@atlaskit/editor-common": "^60.1.0",
+    "@atlaskit/editor-common": "^60.2.0",
     "@atlaskit/editor-json-transformer": "^8.6.0",
     "@atlaskit/editor-shared-styles": "^1.6.0",
     "@atlaskit/icon": "^21.9.0",
-    "@atlaskit/media-card": "^71.0.0",
-    "@atlaskit/media-client": "^14.2.0",
+    "@atlaskit/media-card": "^72.0.0",
+    "@atlaskit/media-client": "^14.3.0",
     "@atlaskit/media-common": "^2.9.0",
     "@atlaskit/media-filmstrip": "^42.1.0",
     "@atlaskit/media-viewer": "^45.8.0",
@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "@atlaskit/media-core": "^32.2.0",
-    "@atlaskit/smart-card": "^16.1.1",
+    "@atlaskit/smart-card": "^16.2.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
     "styled-components": "^3.2.6"
@@ -67,10 +67,10 @@
     "@atlaskit/analytics-gas-types": "^5.0.5",
     "@atlaskit/avatar": "^20.5.0",
     "@atlaskit/build-utils": "^2.6.2",
-    "@atlaskit/css-reset": "^6.1.0",
+    "@atlaskit/css-reset": "^6.2.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^150.0.0",
-    "@atlaskit/editor-test-helpers": "^15.4.0",
+    "@atlaskit/editor-core": "^151.0.0",
+    "@atlaskit/editor-test-helpers": "^15.5.0",
     "@atlaskit/field-range": "^9.0.0",
     "@atlaskit/logo": "^13.5.0",
     "@atlaskit/media-core": "^32.2.0",
@@ -78,9 +78,9 @@
     "@atlaskit/media-test-helpers": "^28.8.0",
     "@atlaskit/mention": "^19.7.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^15.0.0",
+    "@atlaskit/profilecard": "^15.8.0",
     "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/smart-card": "^16.1.0",
+    "@atlaskit/smart-card": "^16.2.0",
     "@atlaskit/ssr": "^0.2.0",
     "@atlaskit/util-data-test": "^16.0.0",
     "@atlaskit/visual-regression": "*",