@atlaskit/renderer 91.0.0 → 93.0.0

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @atlaskit/renderer
 
+## 93.0.0
+
+### Major Changes
+
+- [`2ec99bf6f9f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ec99bf6f9f) - [ux] ED-14651: removed react-intl v2.
+
+### Minor Changes
+
+- [`e78e261ac6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e78e261ac6f) - [ux] ED-14487: Removed IE11/Edge18 support in @atlaskit/width-detector. No longer exporting IframeWidthObserverFallbackWrapper and IframeWrapperConsumer.
+
+  - Fixed example pages
+  - Updated docs/comments
+  - Removed tests
+
+- [`bceab5fa97d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bceab5fa97d) - ED-14632: Add render count tracking reRendered event in Renderer
+- [`033bcd50ab8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/033bcd50ab8) - ED-14266 Removed all the usages of styled-components from renderer.
+
+### Patch Changes
+
+- [`ced96eebe47`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ced96eebe47) - Minor changes in MarkWrapper and Expand styles.
+- [`44c6c36d8d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/44c6c36d8d9) - ED-14263 replaced styled usages
+- [`860c5f319c9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/860c5f319c9) - [ux] ED-14454: Add clearfix to renderer document container to prevent content outside renderer from sliding up alongside floated media images
+- [`08a5acc6d0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08a5acc6d0e) - ED-14338 Migrated renderer examples to emotion
+- [`5c6607ee0e7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5c6607ee0e7) - Migrated link, rule, panel and expand styles in editor-common to emotion.
+- [`7cc9d0d6927`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7cc9d0d6927) - ED-14671 Fixed table sticky header height issue.
+- Updated dependencies
+
+## 92.0.1
+
+### Patch Changes
+
+- [`9671dfa12b1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9671dfa12b1) - Revert [MEX-1276] fix vertical scroll for firefox when media link is wrapped
+
+## 92.0.0
+
+### Minor Changes
+
+- [`9712e78abb0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9712e78abb0) - ED-14255 moved some usages of editor-shared-styles to emotion
+
+### Patch Changes
+
+- [`3c717788e4d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c717788e4d) - ED-14569 Feature flag the renderer TTI analytic event
+- [`d0eed99c3e3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d0eed99c3e3) - ED-14264 Moved styles to emotion css
+- [`f9a144c5a71`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9a144c5a71) - ED-14255 migrated table styles to use emotion
+- [`3fcadf8ab52`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fcadf8ab52) - ED-14263 migrate editor common styled usagese to emotion
+- [`244512e8724`](https://bitbucket.org/atlassian/atlassian-frontend/commits/244512e8724) - ED-14301 Add tti metrics for renderer
+- [`47d10a85190`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47d10a85190) - [ED-10235] When a heading is used as a header in a sticky headers table, two headers are added into the document to enable sticky header behaviour. We need to ensure the heading ID is not duplicated so scroll behaviour remains intact when user uses the heading anchor link in renderer.
+- Updated dependencies
+
 ## 91.0.0
 
 ### Patch Changes

package/dist/cjs/analytics/enums.js

@@ -20,6 +20,8 @@ exports.ACTION = ACTION;
 (function (ACTION) {
   ACTION["STARTED"] = "started";
   ACTION["RENDERED"] = "rendered";
+  ACTION["RE_RENDERED"] = "reRendered";
+  ACTION["RENDERER_TTI"] = "tti";
   ACTION["CRASHED"] = "unhandledErrorCaught";
   ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
   ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";

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

@@ -2,33 +2,32 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Alignment;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _templateObject, _templateObject2;
-
-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); }
+var _templateObject;
 
-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 MarkWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n"])), function (props) {
-  return props['data-align'] && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      text-align: ", ";\n    "])), _adfSchema.alignmentPositionMap[props['data-align']]);
-});
+var MarkWrapper = function MarkWrapper(props) {
+  var styles = props['data-align'] ? (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        text-align: ", ";\n      "])), _adfSchema.alignmentPositionMap[props['data-align']]) : '';
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles
+  }, props), props.children);
+};
 
 function Alignment(props) {
-  return /*#__PURE__*/_react.default.createElement(MarkWrapper, {
+  return (0, _react2.jsx)(MarkWrapper, {
     className: "fabric-editor-block-mark",
     "data-align": props.align
   }, props.children);

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

@@ -5,14 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = void 0;
 exports.default = Breakout;
+exports.wrapperStyles = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react = require("@emotion/react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
@@ -22,14 +20,14 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
 var _templateObject;
 
-var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
-
-exports.Wrapper = Wrapper;
+var wrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " 0;\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])), _editorSharedStyles.blockNodesVerticalMargin);
+exports.wrapperStyles = wrapperStyles;
 
 function Breakout(props) {
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref) {
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref) {
     var width = _ref.width;
-    return /*#__PURE__*/_react.default.createElement(Wrapper, {
+    return (0, _react.jsx)("div", {
+      css: wrapperStyles,
       "data-mode": props.mode,
       style: {
         width: (0, _utils.calcBreakoutWidth)(props.mode, width)

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,11 +13,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
-var _colors = require("@atlaskit/theme/colors");
+var _react2 = require("@emotion/react");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _utils = require("../../utils");
 
@@ -25,7 +27,11 @@ var _enums = require("../../analytics/enums");
 
 var _templateObject;
 
-var StyledAnchor = _styledComponents.default.a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
+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 anchorStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n    text-decoration: underline;\n  }\n"])), _colors.B400, _colors.B300);
 
 function Link(props) {
   var href = props.href,
@@ -47,10 +53,11 @@ function Link(props) {
   var handler = (0, _utils.getEventHandler)(eventHandlers, 'link');
 
   if (isMediaLink) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
+    return (0, _react2.jsx)(_react.Fragment, null, props.children);
   }
 
-  return /*#__PURE__*/_react.default.createElement(StyledAnchor, (0, _extends2.default)({
+  return (0, _react2.jsx)("a", (0, _extends2.default)({
+    css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
         fireAnalyticsEvent({

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

@@ -9,12 +9,10 @@ exports.default = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = require("@emotion/react");
 
 var _reactIntlNext = require("react-intl-next");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _code = require("@atlaskit/code");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
@@ -33,6 +31,16 @@ var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton
 
 var _templateObject;
 
+var codeBlockStyle = function codeBlockStyle(props) {
+  return (0, _react.css)(_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
+    })(props),
+    width: "".concat((0, _constants.gridSize)(), "px")
+  }));
+};
+
 function CodeBlock(props) {
   var text = props.text,
       language = props.language,
@@ -42,11 +50,12 @@ function CodeBlock(props) {
   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
-  }, allowCopyToClipboard ? /*#__PURE__*/_react.default.createElement(_codeBlockCopyButton.default, {
+  return (0, _react.jsx)("div", {
+    className: className,
+    css: codeBlockStyle
+  }, allowCopyToClipboard ? (0, _react.jsx)(_codeBlockCopyButton.default, {
     content: text
-  }) : null, /*#__PURE__*/_react.default.createElement(_code.CodeBlock, {
+  }) : null, (0, _react.jsx)(_code.CodeBlock, {
     language: language,
     text: text,
     codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
@@ -55,14 +64,6 @@ function CodeBlock(props) {
   }));
 }
 
-var IntlCodeBlock = (0, _reactIntlNext.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
-  }),
-  width: "".concat((0, _constants.gridSize)(), "px")
-}));
+var _default = (0, _reactIntlNext.injectIntl)(CodeBlock);
 
 exports.default = _default;

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

@@ -13,11 +13,11 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
 
-var _reactIntlNext = require("react-intl-next");
+var _react2 = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _reactIntlNext = require("react-intl-next");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -37,18 +37,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 CopyButtonWrapper = _styledComponents.default.span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #ffffff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #ffffff !important;\n  }\n"])), _colors.N20, _colors.N30, _colors.N700);
+var copyButtonWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid #fff;\n    border-radius: 4px;\n    background-color: ", ";\n    color: rgb(66, 82, 110);\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: #fff !important;\n  }\n"])), _colors.N20, _colors.N30, _colors.N700);
 
 var CopyButton = function CopyButton(_ref) {
   var content = _ref.content,
       intl = _ref.intl;
 
-  var _useState = (0, _react.useState)(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard)),
+  var _useState = (0, _react2.useState)(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copyCodeToClipboard)),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       tooltip = _useState2[0],
       setTooltip = _useState2[1];
 
-  var _useState3 = (0, _react.useState)('copy-to-clipboard'),
+  var _useState3 = (0, _react2.useState)('copy-to-clipboard'),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       className = _useState4[0],
       setClassName = _useState4[1];
@@ -58,21 +58,23 @@ var CopyButton = function CopyButton(_ref) {
     setClassName('copy-to-clipboard');
   };
 
-  return /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref2) {
+  return (0, _react.jsx)(_copyTextProvider.CopyTextConsumer, null, function (_ref2) {
     var copyTextToClipboard = _ref2.copyTextToClipboard;
-    return /*#__PURE__*/_react.default.createElement(CopyButtonWrapper, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    return (0, _react.jsx)("span", {
+      css: copyButtonWrapperStyles
+    }, (0, _react.jsx)(_tooltip.default, {
       content: tooltip,
       hideTooltipOnClick: false,
       position: "top"
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react.jsx)("div", {
       onMouseLeave: onMouseLeave
-    }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
+    }, (0, _react.jsx)(_customThemeButton.default, {
       className: className,
       "aria-label": tooltip,
       spacing: "compact",
       appearance: "subtle",
       "aria-haspopup": true,
-      iconBefore: /*#__PURE__*/_react.default.createElement(_copy.default, {
+      iconBefore: (0, _react.jsx)(_copy.default, {
         label: tooltip
       }),
       onClick: function onClick() {

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,7 +13,9 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("@emotion/react");
+
+var _react2 = require("react");
 
 var _smartCard = require("@atlaskit/smart-card");
 
@@ -27,26 +27,14 @@ var _utils = require("../../utils");
 
 var _fallback = require("./fallback");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _style = require("../../ui/Renderer/style");
 
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 
 var _templateObject, _templateObject2;
 
-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 EmbedCardWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
-
-EmbedCardWrapper.displayName = 'EmbedCardWrapper';
-var ExtendedEmbedCard = (0, _styledComponents.default)(_ui.MediaSingle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n"])), function (_ref) {
-  var layout = _ref.layout;
-  return layout === 'full-width' || layout === 'wide' ? "\n  margin-left: 50%;\n  transform: translateX(-50%);\n  " : "";
-});
-ExtendedEmbedCard.displayName = 'ExtendedEmbedCard';
+var embedCardWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  height: 100%;\n\n  > div {\n    height: 100%;\n  }\n\n  .loader-wrapper {\n    height: 100%;\n  }\n\n  margin: 0 auto;\n"])));
+var uIMediaSingleLayoutStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 50%;\n  transform: translateX(-50%);\n"])));
 
 function EmbedCard(props) {
   var url = props.url,
@@ -58,9 +46,9 @@ function EmbedCard(props) {
       isInsideOfBlockNode = props.isInsideOfBlockNode,
       allowDynamicTextSizing = props.allowDynamicTextSizing,
       rendererAppearance = props.rendererAppearance;
-  var embedIframeRef = (0, _react.useRef)(null);
+  var embedIframeRef = (0, _react2.useRef)(null);
   var onClick = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
-  var platform = (0, _react.useMemo)(function () {
+  var platform = (0, _react2.useMemo)(function () {
     return (0, _utils.getPlatform)(rendererAppearance);
   }, [rendererAppearance]);
   var cardProps = {
@@ -72,12 +60,12 @@ function EmbedCard(props) {
     showActions: platform === 'web'
   };
 
-  var _useState = (0, _react.useState)(null),
+  var _useState = (0, _react2.useState)(null),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       liveHeight = _useState2[0],
       setLiveHeight = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(),
+  var _useState3 = (0, _react2.useState)(),
       _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
       aspectRatio = _useState4[0],
       setAspectRatio = _useState4[1];
@@ -108,15 +96,15 @@ function EmbedCard(props) {
 
   var padding = rendererAppearance === 'full-page' ? _style.FullPagePadding * 2 : 0;
 
-  var _useState5 = (0, _react.useState)(true),
+  var _useState5 = (0, _react2.useState)(true),
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       hasPreview = _useState6[0],
       setPreviewAvailableState = _useState6[1];
 
-  var cardContext = (0, _react.useContext)(_smartCard.Context);
+  var cardContext = (0, _react2.useContext)(_smartCard.Context);
 
-  var onResolve = function onResolve(_ref2) {
-    var resolvedAspectRatio = _ref2.aspectRatio;
+  var onResolve = function onResolve(_ref) {
+    var resolvedAspectRatio = _ref.aspectRatio;
     var hasPreviewOnResolve = !!(cardContext && url && cardContext.extractors.getPreview(url, platform));
 
     if (!hasPreviewOnResolve) {
@@ -126,9 +114,9 @@ function EmbedCard(props) {
     setAspectRatio(resolvedAspectRatio);
   };
 
-  return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
-    var containerWidth = _ref3.width,
-        breakpoint = _ref3.breakpoint;
+  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
+    var containerWidth = _ref2.width,
+        breakpoint = _ref2.breakpoint;
     var nonFullWidthSize = containerWidth;
     var isFullWidth = rendererAppearance === 'full-width';
 
@@ -145,12 +133,14 @@ function EmbedCard(props) {
     }
 
     var lineLength = isFullWidth ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, containerWidth - padding) : nonFullWidthSize;
-    return /*#__PURE__*/_react.default.createElement(_fallback.CardErrorBoundary, (0, _extends2.default)({
+    var uiMediaSingleStyles = layout === 'full-width' || layout === 'wide' ? uIMediaSingleLayoutStyles : '';
+    return (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
       unsupportedComponent: _ui.UnsupportedBlock
-    }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
+    }, cardProps), (0, _react.jsx)(_smartCard.EmbedResizeMessageListener, {
       embedIframeRef: embedIframeRef,
       onHeightUpdate: setLiveHeight
-    }, /*#__PURE__*/_react.default.createElement(ExtendedEmbedCard, {
+    }, (0, _react.jsx)(_ui.MediaSingle, {
+      css: uiMediaSingleStyles,
       layout: layout,
       width: originalWidth,
       containerWidth: containerWidth,
@@ -160,7 +150,9 @@ function EmbedCard(props) {
       nodeType: "embedCard",
       lineLength: isInsideOfBlockNode ? containerWidth : lineLength,
       hasFallbackContainer: hasPreview
-    }, /*#__PURE__*/_react.default.createElement(EmbedCardWrapper, null, /*#__PURE__*/_react.default.createElement("div", {
+    }, (0, _react.jsx)("div", {
+      css: embedCardWrapperStyles
+    }, (0, _react.jsx)("div", {
       className: "embedCardView-content-wrap",
       "data-embed-card": true,
       "data-layout": layout,
@@ -168,7 +160,7 @@ function EmbedCard(props) {
       "data-card-data": data ? JSON.stringify(data) : undefined,
       "data-card-url": url,
       "data-card-original-height": originalHeight
-    }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
+    }, (0, _react.jsx)(_smartCard.Card, (0, _extends2.default)({
       appearance: "embed"
     }, cardProps, {
       onResolve: onResolve,

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

@@ -33,7 +33,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -59,13 +59,13 @@ exports.HeadingAnchorWrapperClassName = HeadingAnchorWrapperClassName;
 var CopyAnchorWrapperWithRef = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var children = props.children,
       rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+  return (0, _react2.jsx)("span", (0, _extends2.default)({}, rest, {
     className: HeadingAnchorWrapperClassName,
     ref: ref
   }), children);
 });
 
-var CopyAnchorButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
+var copyAnchorButtonStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline;\n  outline: none;\n  background-color: transparent;\n  border: none;\n  color: ", ";\n  cursor: pointer;\n  right: 0;\n"])), _colors.N500);
 
 var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(HeadingAnchor, _React$PureComponent);
@@ -140,11 +140,12 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
       _this.setTooltipState(_messages.headingAnchorLinkMessages.copyHeadingLinkToClipboard);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderAnchorButton", function () {
-      return /*#__PURE__*/_react.default.createElement(CopyAnchorButton, {
+      return (0, _react2.jsx)("button", {
+        css: copyAnchorButtonStyles,
         onMouseLeave: _this.resetMessage,
         onClick: _this.copyToClipboard,
         "aria-label": _this.state.tooltipMessage
-      }, /*#__PURE__*/_react.default.createElement(_link.default, {
+      }, (0, _react2.jsx)(_link.default, {
         label: _this.getCopyAriaLabel(),
         size: _this.props.level > 3 ? 'small' : 'medium',
         primaryColor: _this.state.isClicked ? _colors.B400 : _colors.N200
@@ -167,7 +168,7 @@ var HeadingAnchor = /*#__PURE__*/function (_React$PureComponent) {
         // We set the key to the message to ensure it remounts when the message
         // changes, so that it correctly repositions.
         // @see https://ecosystem.atlassian.net/projects/AK/queues/issue/AK-6548
-        return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+        return (0, _react2.jsx)(_tooltip.default, {
           tag: CopyAnchorWrapperWithRef,
           content: tooltipMessage,
           position: "top",

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

@@ -48,13 +48,15 @@ function Heading(props) {
   var headingId = props.headingId,
       dataAttributes = props.dataAttributes,
       allowHeadingAnchorLinks = props.allowHeadingAnchorLinks,
-      marks = props.marks;
+      marks = props.marks,
+      invisible = props.invisible;
   var HX = "h".concat(props.level);
   var showAnchorLink = !!props.showAnchorLink;
   var isRightAligned = hasRightAlignmentMark(marks);
   var enableNestedHeaderLinks = allowHeadingAnchorLinks && allowHeadingAnchorLinks.allowNestedHeaderLinks;
+  var headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/_react.default.createElement(HX, (0, _extends2.default)({
-    id: headingId
+    id: headingIdToUse
   }, 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) {

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

@@ -9,14 +9,19 @@ exports.default = LayoutSection;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _ui = require("@atlaskit/editor-common/ui");
 
+/** @jsx jsx */
 function LayoutSection(props) {
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return (0, _react2.jsx)("div", {
     "data-layout-column": true,
     "data-column-width": props.width,
     style: {
       flexBasis: "".concat(props.width, "%")
     }
-  }, /*#__PURE__*/_react.default.createElement(_ui.WidthProvider, null, /*#__PURE__*/_react.default.createElement(_ui.ClearNextSiblingMarginTop, null), props.children));
+  }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
+    css: _ui.clearNextSiblingMarginTopStyle
+  }), props.children));
 }

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

@@ -27,6 +27,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 
 var _ui = require("@atlaskit/editor-common/ui");
@@ -79,8 +81,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
       var shouldOpenMediaViewer = !linkHref && allowMediaViewer;
-
-      var mediaComponent = /*#__PURE__*/_react.default.createElement(_MediaCard.MediaCard, (0, _extends2.default)({
+      var mediaComponent = (0, _react2.jsx)(_MediaCard.MediaCard, (0, _extends2.default)({
         mediaProvider: mediaProvider,
         contextIdentifierProvider: contextIdentifierProvider
       }, _this.props, {
@@ -91,12 +92,12 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
-
-      return linkHref ? /*#__PURE__*/_react.default.createElement(_ui.MediaLink, {
+      return linkHref ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
-        "data-block-link": linkHref
+        "data-block-link": linkHref,
+        css: _ui.mediaLinkStyle
       }, mediaComponent) : mediaComponent;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {
@@ -141,7 +142,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         return this.renderCard();
       }
 
-      return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
+      return (0, _react2.jsx)(_providerFactory.WithProviders, {
         providers: ['mediaProvider', 'contextIdentifierProvider'],
         providerFactory: providers,
         renderNode: this.renderCard