@atlaskit/renderer 81.1.1 → 83.0.0

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @atlaskit/renderer
 
+## 83.0.0
+
+### Major Changes
+
+- [`0cf5fa82add`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0cf5fa82add) - CETI-20 Rename custom panel FF from `UNSAFE_allowCustomPanel` to `allowCustomPanel`
+
+### Minor Changes
+
+- [`c890a025f6c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c890a025f6c) - Fix annotations state from being set to null when adding a new inline comment
+- [`23514411f27`](https://bitbucket.org/atlassian/atlassian-frontend/commits/23514411f27) - CETI-134 added support to render dark colors for the custom panels in the dark mode
+- [`8bbb96540ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8bbb96540ea) - Add "fragment" mark to stage0 ADF schema
+- [`a3737a9b3aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3737a9b3aa) - CETI-64 Updating the dark mode colors for the standard panels
+- [`d4643be4f2d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4643be4f2d) - [ux] AK-551 Add focus outline on code block copy button
+
+### Patch Changes
+
+- [`c6feed82071`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6feed82071) - ED-11632: Bump prosemirror packages;
+
+  - prosmirror-commands 1.1.4 -> 1.1.11,
+  - prosemirror-model 1.11.0 -> 1.14.3,
+  - prosemirror-state 1.3.3 -> 1.3.4,
+  - prosemirror-transform 1.2.8 -> 1.3.2,
+  - prosemirror-view 1.15.4 + 1.18.8 -> 1.20.2.
+
+- [`fc70978492a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fc70978492a) - Using type for SSR prop to reduce dependency on media-common
+- [`e741804b52a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e741804b52a) - Fixed media nodes not being built synchronously on SSR
+- [`dd7db18ab6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dd7db18ab6a) - ED-13854 Replace url-parser library with native function
+- [`f461edcfd05`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f461edcfd05) - Update CardLoader to use react-loadable
+  Add SSR feature prop to be passed in renderer and media card
+- [`577302c5331`](https://bitbucket.org/atlassian/atlassian-frontend/commits/577302c5331) - Column sorting button meets the minimum contrast requirement
+- [`a82305310db`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a82305310db) - [ux] ED-7449: Sort cells in a given table column based on case sensitivity of same letter then on alphabet+ascii code values
+- [`9d43feb1f6a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d43feb1f6a) - CETI-167 Remove opacity for panels in dark mode.
+- Updated dependencies
+
+## 82.2.0
+
+### Minor Changes
+
+- [`db3477abb18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/db3477abb18) - [ux] ED-13938 disabled code-bidi warning tooltip for mobile, reworked TextWrapper to fix bidi mitigation, and fixed issue where bidi warnings were not presented when renderer used with an annotation provider with draftMode set to true
+
+### Patch Changes
+
+- Updated dependencies
+
+## 82.1.0
+
+### Minor Changes
+
+- [`c80c71b537d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c80c71b537d) - [ux] ED-13860 add bidi warning decorations to code components
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

@@ -39,6 +39,8 @@ var _prosemirrorUtils = require("prosemirror-utils");
 
 var _rendererNode = require("./renderer-node");
 
+var _code = require("./marks/code");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -153,13 +155,22 @@ var ReactSerializer = /*#__PURE__*/function () {
           otherAttrs = (0, _objectWithoutProperties2.default)(_mark$attrs, ["key"]);
       var extraProps = {
         isInline: node === null || node === void 0 ? void 0 : node.isInline
-      };
-
-      var props = _objectSpread(_objectSpread(_objectSpread({
+      }; // currently the only mark which has custom props is the code mark
+
+      var markSpecificProps = (0, _code.isCodeMark)(mark) ? {
+        // The appearance being mobile indicates we are in an renderer being
+        // rendered by mobile bridge in a web view.
+        // The tooltip is likely to have unexpected behaviour there, with being cut
+        // off, so we disable it. This is also to keep the behaviour consistent with
+        // the rendering in the mobile Native Renderer.
+        codeBidiWarningTooltipEnabled: _this.appearance !== 'mobile'
+      } : {};
+
+      var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
         eventHandlers: _this.eventHandlers,
         fireAnalyticsEvent: _this.fireAnalyticsEvent,
         markKey: key
-      }, otherAttrs), extraProps), {}, {
+      }, otherAttrs), extraProps), markSpecificProps), {}, {
         dataAttributes: {
           'data-renderer-mark': true
         }
@@ -220,6 +231,9 @@ var ReactSerializer = /*#__PURE__*/function () {
         case 'mediaGroup':
           return this.getMediaGroupProps(node);
 
+        case 'mediaInline':
+          return this.getMediaInlineProps(node);
+
         case 'mediaSingle':
           return this.getMediaSingleProps(node, path);
 
@@ -339,9 +353,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         return /*#__PURE__*/_react.default.createElement(_textWrapper.default, {
           key: textKey,
           startPos: startPos + parentDepth,
-          endPos: endPos + parentDepth,
-          text: mark.text
-        });
+          endPos: endPos + parentDepth
+        }, mark.text);
       }
 
       return mark.text || '';
@@ -426,7 +439,8 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaProps",
     value: function getMediaProps(node) {
-      var _this6 = this;
+      var _this6 = this,
+          _this$media;
 
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
       var link = node.type.schema.marks.link;
@@ -442,7 +456,8 @@ var ReactSerializer = /*#__PURE__*/function () {
         isLinkMark: isLinkMark,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        shouldOpenMediaViewer: this.shouldOpenMediaViewer
+        shouldOpenMediaViewer: this.shouldOpenMediaViewer,
+        ssr: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.ssr
       });
     }
   }, {
@@ -469,15 +484,21 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getMediaGroupProps",
     value: function getMediaGroupProps(node) {
-      var _this$media;
+      var _this$media2, _this$media3;
 
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
-        enableDownloadButton: (_this$media = this.media) === null || _this$media === void 0 ? void 0 : _this$media.enableDownloadButton
+        enableDownloadButton: (_this$media2 = this.media) === null || _this$media2 === void 0 ? void 0 : _this$media2.enableDownloadButton,
+        ssr: (_this$media3 = this.media) === null || _this$media3 === void 0 ? void 0 : _this$media3.ssr
       });
     }
+  }, {
+    key: "getMediaInlineProps",
+    value: function getMediaInlineProps(node) {
+      return _objectSpread({}, this.getProps(node));
+    }
   }, {
     key: "getTaskItemProps",
     value: function getTaskItemProps(node) {
@@ -504,8 +525,15 @@ var ReactSerializer = /*#__PURE__*/function () {
   }, {
     key: "getCodeBlockProps",
     value: function getCodeBlockProps(node) {
+      // The appearance being mobile indicates we are in an renderer being
+      // rendered by mobile bridge in a web view.
+      // The tooltip is likely to have unexpected behaviour there, with being cut
+      // off, so we disable it. This is also to keep the behaviour consistent with
+      // the rendering in the mobile Native Renderer.
+      var codeBidiWarningTooltipEnabled = this.appearance !== 'mobile';
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
-        text: node.textContent
+        text: node.textContent,
+        codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
       });
     }
   }, {

package/dist/cjs/react/marks/code.js

@@ -5,16 +5,38 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = Code;
+exports.CodeWithIntl = CodeWithIntl;
+exports.default = exports.isCodeMark = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _inline = _interopRequireDefault(require("@atlaskit/code/inline"));
 
-function Code(props) {
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _useFeatureFlags = require("../../use-feature-flags");
+
+var isCodeMark = function isCodeMark(mark) {
+  return mark && mark.type && mark.type.name === 'code';
+};
+
+exports.isCodeMark = isCodeMark;
+
+function CodeWithIntl(props) {
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
+  var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   return /*#__PURE__*/_react.default.createElement(_inline.default, (0, _extends2.default)({
-    className: "code"
+    className: "code",
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: props.codeBidiWarningTooltipEnabled
   }, props.dataAttributes), props.children);
-}
+}
+
+var _default = (0, _reactIntl.injectIntl)(CodeWithIntl);
+
+exports.default = _default;

package/dist/cjs/react/marks/fragment.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = FragmentMark;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+function FragmentMark(props) {
+  var WrapperElement = props.isInline ? 'span' : 'div';
+  return /*#__PURE__*/_react.default.createElement(WrapperElement, (0, _extends2.default)({
+    "data-localId": props.localId,
+    "data-name": props.name,
+    "data-mark-type": "fragment"
+  }, props.dataAttributes), props.children);
+}

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

@@ -79,6 +79,12 @@ Object.defineProperty(exports, "DataConsumer", {
     return _dataConsumer.default;
   }
 });
+Object.defineProperty(exports, "FragmentMark", {
+  enumerable: true,
+  get: function get() {
+    return _fragment.default;
+  }
+});
 Object.defineProperty(exports, "Annotation", {
   enumerable: true,
   get: function get() {
@@ -121,6 +127,8 @@ var _unsupportedNodeAttribute = _interopRequireDefault(require("./unsupportedNod
 
 var _dataConsumer = _interopRequireDefault(require("./data-consumer"));
 
+var _fragment = _interopRequireDefault(require("./fragment"));
+
 var _annotation = _interopRequireWildcard(require("./annotation"));
 
 var _confluenceInlineComment = _interopRequireDefault(require("./confluence-inline-comment"));
@@ -147,7 +155,8 @@ var markToReact = {
   indentation: _indentation.default,
   unsupportedMark: _unsupportedMark.default,
   unsupportedNodeAttribute: _unsupportedNodeAttribute.default,
-  dataConsumer: _dataConsumer.default
+  dataConsumer: _dataConsumer.default,
+  fragment: _fragment.default
 };
 exports.markToReact = markToReact;
 

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

@@ -11,6 +11,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _code = require("@atlaskit/code");
@@ -23,6 +25,10 @@ var _components = require("@atlaskit/theme/components");
 
 var _constants = require("@atlaskit/theme/constants");
 
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _useFeatureFlags = require("../../use-feature-flags");
+
 var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton"));
 
 var _templateObject;
@@ -31,7 +37,10 @@ function CodeBlock(props) {
   var text = props.text,
       language = props.language,
       _props$allowCopyToCli = props.allowCopyToClipboard,
-      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli;
+      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+      codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
+  var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
   var className = ['code-block', props.className].join(' ');
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className
@@ -39,11 +48,16 @@ function CodeBlock(props) {
     content: text
   }) : null, /*#__PURE__*/_react.default.createElement(_code.CodeBlock, {
     language: language,
-    text: text
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
   }));
 }
 
-var _default = (0, _styledComponents.default)(CodeBlock)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+var IntlCodeBlock = (0, _reactIntl.injectIntl)(CodeBlock);
+
+var _default = (0, _styledComponents.default)(IntlCodeBlock)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  tab-size: 4;\n  [data-ds--code--code-block] {\n    font-size: ", ";\n    line-height: 1.5rem;\n    background-image: ", ";\n    background-attachment: local, scroll, scroll;\n    background-position: 100% 0, 100% 0, 0 0;\n  }\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
   background: (0, _components.themed)({
     light: _colors.N20,
     dark: _colors.DN50

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

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _headingAnchor = _interopRequireDefault(require("./heading-anchor"));
 
-var _urlParse = _interopRequireDefault(require("url-parse"));
-
 var _enums = require("../../analytics/enums");
 
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
@@ -23,8 +21,8 @@ var _copyTextProvider = require("./copy-text-provider");
 
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
-  var url = new _urlParse.default(window.location.href);
-  url.set('hash', encodeURIComponent(hash));
+  var url = new URL(window.location.href);
+  url.hash = encodeURIComponent(hash);
   return url.href;
 };
 
@@ -55,11 +53,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 +73,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/media.js

@@ -69,7 +69,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
           alt = _this$props.alt,
           featureFlags = _this$props.featureFlags,
           allowMediaViewer = _this$props.shouldOpenMediaViewer,
-          enableDownloadButton = _this$props.enableDownloadButton;
+          enableDownloadButton = _this$props.enableDownloadButton,
+          ssr = _this$props.ssr;
 
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
 
@@ -85,7 +86,8 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         eventHandlers: eventHandlers,
         alt: allowAltTextOnImages ? alt : undefined,
         featureFlags: featureFlags,
-        shouldEnableDownloadButton: enableDownloadButton
+        shouldEnableDownloadButton: enableDownloadButton,
+        ssr: ssr
       }));
 
       return linkHref ? /*#__PURE__*/_react.default.createElement(_editorCommon.MediaLink, {

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

@@ -40,14 +40,12 @@ var _templateObject;
 var PanelStyled = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (props) {
   if (props['data-panel-type'] !== _adfSchema.PanelType.CUSTOM || !props.backgroundColor) {
     return '';
-  }
+  } // Similar to mainDynamicStyles()
 
-  var border = (0, _theme.themed)({
-    light: 'none',
-    dark: "1px solid rgba(255, 255, 255, 0.4)"
-  })(props); // Similar to mainDynamicStyles()
 
-  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        border: ").concat(border, ";\n      }\n    ");
+  return "\n      &[data-panel-type=".concat(_adfSchema.PanelType.CUSTOM, "] {\n        background-color: ").concat(props.backgroundColor, ";\n        ").concat((0, _theme.themed)({
+    dark: _editorCommon.getPanelBackgroundDarkModeColors
+  }), ";\n      }\n    ");
 });
 
 var panelIcons = {
@@ -93,7 +91,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/react/nodes/text-wrapper.js

@@ -11,21 +11,20 @@ var _react = _interopRequireDefault(require("react"));
 
 var _annotations = require("../../ui/annotations");
 
-var TextWrapper = /*#__PURE__*/_react.default.memo(function (props) {
+var TextWrapper = function TextWrapper(props) {
   var startPos = props.startPos,
       endPos = props.endPos;
-  var text = props.text;
+  var children = props.children;
 
-  if (!text) {
+  if (!children) {
     return null;
   }
 
   return /*#__PURE__*/_react.default.createElement(_annotations.TextWithAnnotationDraft, {
-    text: text,
     startPos: startPos,
     endPos: endPos
-  });
-});
+  }, children);
+};
 
 var _default = TextWrapper;
 exports.default = _default;