@atlaskit/renderer 108.0.1 → 108.1.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/renderer
 
+## 108.1.0
+
+### Minor Changes
+
+- [`6bc52e5a406`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6bc52e5a406) - [ED-17687] Capture errors caught in error boundaries in Sentry
+- [`7faffcf8450`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7faffcf8450) - Add location attribute to smard link related componentes in renderer (link, inlinecard, embedcard, blockcard)
+
+### Patch Changes
+
+- [`dc1ca0331ae`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dc1ca0331ae) - [ux] Changed code-block to display: block to fix issue with list alignment
+- [`9220da2225b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9220da2225b) - ED-16320: Add checks to certain SLO related events to see if they are explicitly disabled, in preparation for disabling them for synthetic tenants in prod
+- [`a142ba1aa28`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a142ba1aa28) - [ED17172] Bump prosemirror-model to 1.16.0 and prosemirror-view to 1.23.7 and removed work-arounds for fixed issues
+- [`9369cc38a68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9369cc38a68) - Migrated use of `gridSize` to space tokens where possible. There is no expected visual or behaviour change.
+- Updated dependencies
+
 ## 108.0.1
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ var _utils = require("../../utils");
 var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _templateObject;
 /** @jsx jsx */
 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); }
@@ -39,7 +40,16 @@ function Link(props) {
   if (isMediaLink) {
     return (0, _react2.jsx)(_react.Fragment, null, props.children);
   }
-  return (0, _react2.jsx)(_linkUrl.default, (0, _extends2.default)({
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+    data: analyticsData
+  }, (0, _react2.jsx)(_linkUrl.default, (0, _extends2.default)({
     css: anchorStyles,
     onClick: function onClick(e) {
       if (fireAnalyticsEvent) {
@@ -57,5 +67,5 @@ function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children);
+  }, anchorProps, dataAttributes), props.children));
 }

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

@@ -13,6 +13,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("../../utils");
 var _fallback = require("./fallback");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
+var _analyticsNext = require("@atlaskit/analytics-next");
 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; }
 function BlockCard(props) {
@@ -34,7 +35,16 @@ function BlockCard(props) {
     onClick: onClick,
     container: portal
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
@@ -46,5 +56,5 @@ function BlockCard(props) {
     showActions: rendererAppearance !== 'mobile',
     platform: platform,
     showServerActions: showServerActions
-  }, cardProps))));
+  }, cardProps)))));
 }

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

@@ -24,7 +24,7 @@ var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
       light: "var(--ds-background-neutral, ".concat(_colors.N20, ")"),
       dark: "var(--ds-background-neutral, ".concat(_colors.DN50, ")")
     })(props),
-    leftCoverWidth: "".concat((0, _constants.gridSize)() * 3, "px")
+    leftCoverWidth: "var(--ds-space-300, 24px)"
   }));
 };
 var CodeBlockContainer = function CodeBlockContainer(_ref) {

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

@@ -18,6 +18,7 @@ var _utils = require("../../utils");
 var _fallback = require("./fallback");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 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"])));
@@ -90,7 +91,16 @@ function EmbedCard(props) {
     }
     setAspectRatio(resolvedAspectRatio);
   };
-  return (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
+    data: analyticsData
+  }, (0, _react.jsx)(_ui.WidthConsumer, null, function (_ref2) {
     var containerWidth = _ref2.width,
       breakpoint = _ref2.breakpoint;
     var nonFullWidthSize = containerWidth;
@@ -138,5 +148,5 @@ function EmbedCard(props) {
       inheritDimensions: true,
       embedIframeRef: embedIframeRef
     })))))));
-  });
+  }));
 }

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

@@ -14,6 +14,7 @@ var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _useFeatureFlags = require("../../use-feature-flags");
+var _analyticsNext = require("@atlaskit/analytics-next");
 var InlineCard = function InlineCard(props) {
   var url = props.url,
     data = props.data,
@@ -32,15 +33,26 @@ var InlineCard = function InlineCard(props) {
     showAuthTooltip = _ref.showAuthTooltip,
     showServerActions = _ref.showServerActions,
     ssr = _ref.ssr;
+  var analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
   if (ssr && url) {
-    return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
+    return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+      data: analyticsData
+    }, /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
       showAuthTooltip: showAuthTooltip,
       showServerActions: showServerActions
-    });
+    }));
   }
-  return /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/_react.default.createElement("span", {
     "data-inline-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
     "data-card-url": url
@@ -58,7 +70,7 @@ var InlineCard = function InlineCard(props) {
       }
       props.smartCardStorage.set(data.url, data.title);
     }
-  }))));
+  })))));
 };
 var _default = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
 exports.default = _default;

package/dist/cjs/ui/Expand.js

@@ -24,11 +24,12 @@ var _uniqueId2 = _interopRequireDefault(require("lodash/uniqueId"));
 var _utils = require("../utils");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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 titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", "px;\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, (0, _constants.gridSize)() / 2);
+var titleStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  outline: none;\n  border: none;\n  font-size: ", ";\n  line-height: ", ";\n  font-weight: normal;\n  display: flex;\n  flex: 1;\n  margin: 0;\n  padding: 0 0 0 ", ";\n  text-align: left;\n"])), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _editorSharedStyles.akEditorLineHeight, "var(--ds-space-050, 4px)");
 var Container = function Container(props) {
-  var paddingBottom = "".concat(props.expanded ? (0, _constants.gridSize)() : 0, "px");
+  var paddingBottom = props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var sharedContainerStyles = _ui.sharedExpandStyles.containerStyles(props);
   var styles = function styles(themeProps) {
     return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: 0;\n    padding-bottom: ", ";\n  "])), sharedContainerStyles({
@@ -40,11 +41,11 @@ var Container = function Container(props) {
   }, props), props.children);
 };
 var TitleContainer = function TitleContainer(props) {
-  var paddingBottom = "".concat(!props.expanded ? (0, _constants.gridSize)() : 0, "px");
+  var paddingBottom = !props.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)";
   var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", "px;\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles({
+    return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n    padding: ", ";\n    padding-bottom: ", ";\n  "])), _ui.sharedExpandStyles.titleContainerStyles({
       theme: themeProps
-    }), (0, _constants.gridSize)(), paddingBottom);
+    }), "var(--ds-space-100, 8px)", paddingBottom);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     css: styles
@@ -55,9 +56,9 @@ var ContentContainer = function ContentContainer(props) {
   var sharedContentStyles = _ui.sharedExpandStyles.contentStyles(props);
   var visibility = props.expanded ? 'visible' : 'hidden';
   var styles = function styles(themeProps) {
-    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", "px;\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
+    return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    ", ";\n    padding-right: ", ";\n    // TODO: Migrate away from gridSize\n    // Recommendation: Replace gridSize with 8, or directly replace with 36px\n    padding-left: ", "px;\n    visibility: ", ";\n  "])), sharedContentStyles({
       theme: themeProps
-    }), (0, _constants.gridSize)() * 2, (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
+    }), "var(--ds-space-200, 16px)", (0, _constants.gridSize)() * 5 - (0, _constants.gridSize)() / 2, visibility);
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles

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

@@ -13,9 +13,11 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
-var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _analyticsListeners = require("@atlaskit/analytics-listeners");
+var _monitoring = require("@atlaskit/editor-common/monitoring");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _events = require("../../analytics/events");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
@@ -71,6 +73,11 @@ var ErrorBoundary = /*#__PURE__*/function (_React$Component) {
           errorStack: error === null || error === void 0 ? void 0 : error.stack
         }
       });
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.sentry-error-monitoring_6bksu')) {
+        (0, _monitoring.logException)(error, {
+          location: 'renderer'
+        });
+      }
       if (this.hasFallback()) {
         this.setState({
           errorCaptured: true

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "108.0.1";
+var packageVersion = "108.1.0";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -198,26 +198,33 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       });
       this.rafID = requestAnimationFrame(function () {
         (0, _utils.stopMeasure)("Renderer Render Time: ".concat(_this2.id), function (duration) {
-          var _analyticsEventSeveri, _analyticsEventSeveri2;
+          var _analyticsEventSeveri, _analyticsEventSeveri2, _this2$props, _this2$props$analytic;
           var analyticsEventSeverityTracking = _this2.props.analyticsEventSeverityTracking;
           var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
           var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri !== void 0 ? _analyticsEventSeveri : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri2 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri2 !== void 0 ? _analyticsEventSeveri2 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
-          _this2.fireAnalyticsEvent({
-            action: _analytics.ACTION.RENDERED,
-            actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
-            attributes: {
-              platform: _events.PLATFORM.WEB,
-              duration: duration,
-              distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
-              ttfb: (0, _utils.getResponseEndTime)(),
-              nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
-                acc[node.type] = (acc[node.type] || 0) + 1;
-                return acc;
-              }, {}),
-              severity: severity
-            },
-            eventType: _analytics.EVENT_TYPE.OPERATIONAL
-          });
+
+          // ED-16320: Check for explicit disable so that by default
+          // it will still be enabled as it currently is. Then we can
+          // progressively opt out synthetic tenants.
+          var isTTRTrackingExplicitlyDisabled = ((_this2$props = _this2.props) === null || _this2$props === void 0 ? void 0 : (_this2$props$analytic = _this2$props.analyticsEventSeverityTracking) === null || _this2$props$analytic === void 0 ? void 0 : _this2$props$analytic.enabled) === false;
+          if (!isTTRTrackingExplicitlyDisabled) {
+            _this2.fireAnalyticsEvent({
+              action: _analytics.ACTION.RENDERED,
+              actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
+              attributes: {
+                platform: _events.PLATFORM.WEB,
+                duration: duration,
+                distortedDuration: _this2.renderedMeasurementDistortedDurationMonitor.distortedDuration,
+                ttfb: (0, _utils.getResponseEndTime)(),
+                nodes: (0, _traverse.reduce)(_this2.props.document, function (acc, node) {
+                  acc[node.type] = (acc[node.type] || 0) + 1;
+                  return acc;
+                }, {}),
+                severity: severity
+              },
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            });
+          }
           _this2.renderedMeasurementDistortedDurationMonitor.cleanup();
           delete _this2.renderedMeasurementDistortedDurationMonitor;
         });
@@ -344,7 +351,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _featureFlags$feature, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
+        var _featureFlags$feature, _featureFlags$feature2, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -372,6 +379,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature2 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           innerRef: this.editorRef,
           onClick: handleWrapperOnClick,
           onMouseDown: this.onMouseDownEditView
@@ -394,7 +402,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
-        var _featureFlags$feature2;
+        var _featureFlags$feature3, _featureFlags$feature4;
         if (onError) {
           onError(e);
         }
@@ -405,7 +413,8 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
-          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature2 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
+          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature3 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature3 !== void 0 ? _featureFlags$feature3 : true,
+          useBlockRenderForCodeBlock: (_featureFlags$feature4 = featureFlags.featureFlags.useBlockRenderForCodeBlock) !== null && _featureFlags$feature4 !== void 0 ? _featureFlags$feature4 : true,
           onClick: handleWrapperOnClick
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
@@ -459,7 +468,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     children = props.children,
     onClick = props.onClick,
     onMouseDown = props.onMouseDown,
-    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix;
+    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix,
+    useBlockRenderForCodeBlock = props.useBlockRenderForCodeBlock;
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
@@ -472,7 +482,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
       allowColumnSorting: !!allowColumnSorting,
-      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix
+      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix,
+      useBlockRenderForCodeBlock: useBlockRenderForCodeBlock
     })
   }, children)));
 });

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

@@ -97,7 +97,8 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\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        &:active {\n          color: ", ";\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: ", ";\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\n        + .", ":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\n        + .rich-media-wrapped\n        + *: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      /* plugin styles */\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\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\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          display: flex;\n        }\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,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\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-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\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          ", ";\n        border-bottom: 1px solid\n          ", ";\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,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          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: ", ";\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\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        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    var useBlockRenderForCodeBlock = wrapperProps.useBlockRenderForCodeBlock;
+    return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\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        &:active {\n          color: ", ";\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: ", ";\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: ", " 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":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\n        + .rich-media-wrapped\n        + *: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      /* plugin styles */\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\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\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          display: flex;\n        }\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,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\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-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\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          ", ";\n        border-bottom: 1px solid\n          ", ";\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,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          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: block;\n        /* stylelint-enable */\n\n        position: relative;\n        border-radius: ", ";\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\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", ";\n        & > div + div {\n          margin-left: ", ";\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), (0, _components.themed)({
@@ -109,7 +110,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), "var(--ds-radius-100, 3px)", (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), "var(--ds-space-300, 24px)", _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
@@ -136,7 +137,13 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _components.themed)({
       light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), "var(--ds-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    })(themeProps), "var(--ds-radius-100, 3px)", _editorSharedStyles.blockNodesVerticalMargin, useGridRenderForCodeBlock(useBlockRenderForCodeBlock), (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, "var(--ds-space-250, 20px)", "var(--ds-space-400, 32px)", _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
-exports.rendererStyles = rendererStyles;
+exports.rendererStyles = rendererStyles;
+var useGridRenderForCodeBlock = function useGridRenderForCodeBlock(codeBlockRenderAsBlock) {
+  if (codeBlockRenderAsBlock) {
+    return '';
+  }
+  return "& .code-block {\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\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     }";
+};

package/dist/cjs/ui/SortingIcon.js

@@ -8,7 +8,6 @@ exports.default = exports.StatusClassNames = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _constants = require("@atlaskit/theme/constants");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("@atlaskit/editor-common/types");
 var _messages = require("../messages");
@@ -24,7 +23,7 @@ var StatusClassNames = /*#__PURE__*/function (StatusClassNames) {
   return StatusClassNames;
 }({});
 exports.StatusClassNames = StatusClassNames;
-var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", "px;\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", (0, _constants.gridSize)() / 2, "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
+var buttonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  display: flex;\n  height: 28px;\n  width: 28px;\n  margin: 6px;\n  right: 0;\n  top: 0;\n  border: 2px solid ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  &:active {\n    background-color: ", ";\n  }\n\n  &.", "__not-allowed {\n    cursor: not-allowed;\n  }\n"])), "var(--ds-border, #fff)", "var(--ds-radius-100, 4px)", "var(--ds-surface-overlay, ".concat(_colors.N20, ")"), "var(--ds-surface-overlay-hovered, ".concat(_colors.N30, ")"), "var(--ds-surface-overlay-pressed, rgba(179, 212, 255, 0.6))", _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 var iconWrapperStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 8px;\n  height: 12px;\n  transition: transform 0.3s cubic-bezier(0.15, 1, 0.3, 1);\n  transform-origin: 50% 50%;\n  display: flex;\n  justify-content: center;\n\n  &.", " {\n    transform: rotate(-180deg);\n  }\n\n  &.", "-inactive {\n    opacity: 0.7;\n  }\n"])), StatusClassNames.DESC, _consts.RendererCssClassName.SORTABLE_COLUMN_ICON);
 
 // The icon is created with CSS due to the following Firefox issue: https://product-fabric.atlassian.net/browse/ED-8001

package/dist/cjs/version.json

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

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

@@ -7,6 +7,7 @@ import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import LinkUrl from '@atlaskit/smart-card/link-url';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 const anchorStyles = css`
   color: ${`var(--ds-link, ${B400})`};
 
@@ -40,7 +41,16 @@ export default function Link(props) {
   if (isMediaLink) {
     return jsx(Fragment, null, props.children);
   }
-  return jsx(LinkUrl, _extends({
+  const analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return jsx(AnalyticsContext, {
+    data: analyticsData
+  }, jsx(LinkUrl, _extends({
     css: anchorStyles,
     onClick: e => {
       if (fireAnalyticsEvent) {
@@ -58,5 +68,5 @@ export default function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children);
+  }, anchorProps, dataAttributes), props.children));
 }

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

@@ -5,6 +5,7 @@ import { UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 export default function BlockCard(props) {
   const {
     url,
@@ -25,7 +26,16 @@ export default function BlockCard(props) {
     onClick,
     container: portal
   };
-  return /*#__PURE__*/React.createElement("div", {
+  const analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return /*#__PURE__*/React.createElement(AnalyticsContext, {
+    data: analyticsData
+  }, /*#__PURE__*/React.createElement("div", {
     className: "blockCardView-content-wrap",
     "data-block-card": true,
     "data-card-data": data ? JSON.stringify(data) : undefined,
@@ -37,5 +47,5 @@ export default function BlockCard(props) {
     showActions: rendererAppearance !== 'mobile',
     platform: platform,
     showServerActions: showServerActions
-  }, cardProps))));
+  }, cardProps)))));
 }

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

@@ -3,7 +3,7 @@ import { jsx, css } from '@emotion/react';
 import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { N20, DN50 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
-import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { fontSize } from '@atlaskit/theme/constants';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import CodeBlockButtonContainer from './codeBlockButtonContainer';
 const codeBlockStyleOverrides = props => css`
@@ -32,7 +32,7 @@ const codeBlockStyleOverrides = props => css`
     light: `var(--ds-background-neutral, ${N20})`,
     dark: `var(--ds-background-neutral, ${DN50})`
   })(props),
-  leftCoverWidth: `${gridSize() * 3}px`
+  leftCoverWidth: "var(--ds-space-300, 24px)"
 })};
       background-attachment: local, local, local, local, scroll, scroll, scroll,
         scroll;

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

@@ -10,6 +10,7 @@ import { getPlatform } from '../../utils';
 import { CardErrorBoundary } from './fallback';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
 const embedCardWrapperStyles = css`
   width: 100%;
   height: 100%;
@@ -88,7 +89,16 @@ export default function EmbedCard(props) {
     }
     setAspectRatio(resolvedAspectRatio);
   };
-  return jsx(WidthConsumer, null, ({
+  const analyticsData = {
+    attributes: {
+      location: 'renderer'
+    },
+    // Below is added for the future implementation of Linking Platform namespaced analytic context
+    location: 'renderer'
+  };
+  return jsx(AnalyticsContext, {
+    data: analyticsData
+  }, jsx(WidthConsumer, null, ({
     width: containerWidth,
     breakpoint
   }) => {
@@ -137,5 +147,5 @@ export default function EmbedCard(props) {
       inheritDimensions: true,
       embedIframeRef: embedIframeRef
     })))))));
-  });
+  }));
 }