@atlaskit/renderer 98.0.0 → 98.1.0

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

@@ -7,13 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = LayoutSection;
 
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
 var _ui = require("@atlaskit/editor-common/ui");
 
-/** @jsx jsx */
+var _templateObject;
+
+var layoutColumnClearMarginTopStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n"])), _ui.clearNextSiblingMarginTopStyle, _ui.clearNextSiblingBlockMarkMarginTopStyle);
+
 function LayoutSection(props) {
   return (0, _react2.jsx)("div", {
     "data-layout-column": true,
@@ -22,6 +27,6 @@ function LayoutSection(props) {
       flexBasis: "".concat(props.width, "%")
     }
   }, (0, _react2.jsx)(_ui.WidthProvider, null, (0, _react2.jsx)("div", {
-    css: _ui.clearNextSiblingMarginTopStyle
+    css: layoutColumnClearMarginTopStyles
   }), props.children));
 }

package/dist/cjs/react/utils/clipboard.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.copyTextToClipboard = void 0;
+
+var copyTextToClipboard = function copyTextToClipboard(text) {
+  return new Promise(function (resolve, reject) {
+    var isApiSupported = !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+
+    if (isApiSupported) {
+      navigator.clipboard.writeText(text).then(function () {
+        return resolve();
+      }, function (e) {
+        return reject(e);
+      });
+    } else {
+      reject('Clipboard API is not supported');
+    }
+  });
+};
+
+exports.copyTextToClipboard = copyTextToClipboard;

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

@@ -61,8 +61,6 @@ var _events = require("../../analytics/events");
 
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 
-var _copyTextProvider = require("../../react/nodes/copy-text-provider");
-
 var _SmartCardStorage = require("../SmartCardStorage");
 
 var _version = require("../../version.json");
@@ -254,6 +252,10 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
       var annotationProvider = props.annotationProvider;
       var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+
+      var _this$featureFlags = this.featureFlags(props.featureFlags),
+          featureFlags = _this$featureFlags.featureFlags;
+
       return {
         providers: this.providerFactory,
         eventHandlers: props.eventHandlers,
@@ -280,7 +282,10 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
-        allowPlaceholderText: props.allowPlaceholderText
+        allowPlaceholderText: props.allowPlaceholderText,
+        nodeComponents: props.nodeComponents,
+        // does not currently support SSR, should not be enabled in environments where Renderer is SSR-ed
+        allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock
       };
     }
   }, {
@@ -350,7 +355,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
       };
 
       try {
-        var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+        var _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
 
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
 
@@ -365,7 +370,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
 
         var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
           value: this.featureFlags(this.props.featureFlags)
-        }, (0, _react2.jsx)(_copyTextProvider.CopyTextProvider, null, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
+        }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
           value: (0, _links.getActiveHeadingId)(allowHeadingAnchorLinks)
         }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
           value: {
@@ -387,12 +392,12 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
           doc: pmDoc,
           schema: schema,
           onAnalyticsEvent: this.fireAnalyticsEvent
-        }, result)))))));
+        }, result))))));
         var rendererResult = truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
           height: maxHeight,
           fadeHeight: fadeOutHeight
         }, rendererOutput) : rendererOutput;
-        var rendererRenderTracking = (_this$featureFlags = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags === void 0 ? void 0 : (_this$featureFlags$fe = _this$featureFlags.featureFlags) === null || _this$featureFlags$fe === void 0 ? void 0 : (_this$featureFlags$fe2 = _this$featureFlags$fe.rendererRenderTracking) === null || _this$featureFlags$fe2 === void 0 ? void 0 : _this$featureFlags$fe2[_enums.ACTION_SUBJECT.RENDERER];
+        var rendererRenderTracking = (_this$featureFlags2 = this.featureFlags(this.props.featureFlags)) === null || _this$featureFlags2 === void 0 ? void 0 : (_this$featureFlags2$f = _this$featureFlags2.featureFlags) === null || _this$featureFlags2$f === void 0 ? void 0 : (_this$featureFlags2$f2 = _this$featureFlags2$f.rendererRenderTracking) === null || _this$featureFlags2$f2 === void 0 ? void 0 : _this$featureFlags2$f2[_enums.ACTION_SUBJECT.RENDERER];
         var reRenderTracking = (rendererRenderTracking === null || rendererRenderTracking === void 0 ? void 0 : rendererRenderTracking.enabled) && (0, _react2.jsx)(_RenderTracking.RenderTracking, {
           componentProps: this.props,
           action: _enums.ACTION.RE_RENDERED,

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

@@ -33,6 +33,8 @@ var _consts = require("../../consts");
 
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 
+var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 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); }
@@ -126,7 +128,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (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: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\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        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\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: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", ";\n    & [data-layout-section] {\n      margin-top: ", "px;\n      & > div + div {\n        margin-left: ", "px;\n      }\n\n      @media screen and (max-width: ", "px) {\n        & > div + div {\n          margin-left: 0;\n        }\n      }\n    }\n  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (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: ", "px;\n      color: ", ";\n      padding: 2px 4px;\n      margin: 0 1px;\n      transition: background 0.3s;\n    }\n\n    & span.date-node-highlighted {\n      background: ", ";\n      color: ", ";\n    }\n\n    & .renderer-image {\n      max-width: 100%;\n      display: block;\n      margin: ", "px 0;\n    }\n\n    .", ".rich-media-wrapped\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        width: 100% !important;\n        left: 0 !important;\n      }\n\n      * .", " {\n        overflow-x: auto;\n      }\n\n      & .", ":first-child {\n        margin-top: 0;\n      }\n    }\n\n    .", " {\n      .", " {\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: ", "px;\n\n      /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n      word-wrap: normal;\n\n      & > span {\n        /* stylelint-disable value-no-vendor-prefix */\n        -ms-grid-row: 1;\n        -ms-grid-column: 2;\n        /* stylelint-enable */\n        grid-column: 1;\n      }\n    }\n\n    & .MediaGroup,\n    & .code-block {\n      margin-top: ", ";\n\n      &:first-child {\n        margin-top: 0;\n      }\n\n      &:hover button.copy-to-clipboard,\n      .copy-to-clipboard:focus {\n        opacity: 1;\n        position: absolute;\n        height: 32px;\n        width: 32px;\n        right: 6px;\n        top: 4px;\n        padding: 2px;\n      }\n    }\n\n    ", "\n\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  "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: (0, _tokens.token)('color.text', colors.N800),
       dark: (0, _tokens.token)('color.text', '#B8C7E0')
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), (0, _tokens.token)('color.link', colors.B400), (0, _tokens.token)('color.link', colors.B300), (0, _tokens.token)('color.link.pressed', colors.B500), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
@@ -162,7 +164,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _components.themed)({
       light: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbar),
       dark: (0, _tokens.token)('color.border', _editorSharedStyles.akEditorTableToolbarDark)
-    })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
+    })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth);
   };
 };
 

package/dist/cjs/version.json

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

package/dist/es2019/react/hooks/use-bidi-warnings.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import CodeBidiWarning from '@atlaskit/code/bidi-warning';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import codeBidiWarningDecorator from '@atlaskit/code/bidi-warning-decorator';
+export const useBidiWarnings = ({
+  enableWarningTooltip = true
+}) => {
+  const intl = useIntl();
+  const warningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+
+  const renderBidiWarnings = text => {
+    return codeBidiWarningDecorator(text, ({
+      bidiCharacter,
+      index
+    }) => /*#__PURE__*/React.createElement(CodeBidiWarning, {
+      bidiCharacter: bidiCharacter,
+      key: index,
+      label: warningLabel,
+      tooltipEnabled: enableWarningTooltip
+    }));
+  };
+
+  return {
+    renderBidiWarnings,
+    warningLabel
+  };
+};

package/dist/es2019/react/hooks/use-in-viewport.js

@@ -0,0 +1,25 @@
+import { useEffect, useRef, useState } from 'react';
+export const useInViewport = () => {
+  const trackingRef = useRef(null);
+  const [isInViewport, setIsInViewport] = useState(false);
+  useEffect(() => {
+    if (!trackingRef || !(trackingRef !== null && trackingRef !== void 0 && trackingRef.current)) {
+      return;
+    }
+
+    const target = trackingRef.current;
+    const observer = new IntersectionObserver(entries => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setIsInViewport(true);
+        }
+      }
+    });
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [trackingRef]);
+  return {
+    isInViewport,
+    trackingRef
+  };
+};

package/dist/es2019/react/index.js

@@ -62,8 +62,9 @@ export default class ReactSerializer {
       const parentIsIncompleteTask = node.type.name === 'taskItem' && node.attrs.state !== 'DONE';
       const nodeKey = `${node.type.name}__${this.startPos}`;
       const serializedContent = this.serializeFragment(node.content, this.getNodeProps(node, parentInfo), toReact(node, {
-        allowSelectAllTrap: this.allowSelectAllTrap
-      }), nodeKey, {
+        allowSelectAllTrap: this.allowSelectAllTrap,
+        allowWindowedCodeBlock: this.allowWindowedCodeBlock
+      }, this.nodeComponents), nodeKey, {
         parentIsIncompleteTask,
         path: [...currentPath, node],
         pos: this.startPos
@@ -177,6 +178,8 @@ export default class ReactSerializer {
     this.media = init.media;
     this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
+    this.nodeComponents = init.nodeComponents;
+    this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
   }
 
   resetState() {

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

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { CodeBlock as AkCodeBlock } from '@atlaskit/code';
+import { codeBidiWarningMessages } from '@atlaskit/editor-common/messages';
+import { useFeatureFlags } from '../../../use-feature-flags';
+import CodeBlockContainer from './components/codeBlockContainer';
+
+function CodeBlock(props) {
+  const {
+    text,
+    language,
+    allowCopyToClipboard = false,
+    codeBidiWarningTooltipEnabled
+  } = props;
+  const featureFlags = useFeatureFlags();
+  const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
+  const className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
+  return jsx(CodeBlockContainer, {
+    text: text,
+    className: className,
+    allowCopyToClipboard: allowCopyToClipboard
+  }, jsx(AkCodeBlock, {
+    language: language,
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  }));
+}
+
+export default injectIntl(CodeBlock);

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

@@ -0,0 +1,44 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import { overflowShadow, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { N20, DN50 } from '@atlaskit/theme/colors';
+import { themed } from '@atlaskit/theme/components';
+import { fontSize, gridSize } from '@atlaskit/theme/constants';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import CopyButton from '../../codeBlockCopyButton';
+
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+const codeBlockStyleOverrides = props => css`
+    tab-size: 4;
+    ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
+      font-size: ${relativeFontSizeToBase16(fontSize())};
+      line-height: 1.5rem;
+      background-image: ${overflowShadow({
+  background: themed({
+    light: N20,
+    dark: DN50
+  })(props),
+  width: `${gridSize()}px`
+})};
+      background-attachment: local, scroll, scroll;
+      background-position: 100% 0, 100% 0, 0 0;
+    }
+  `;
+
+const CodeBlockContainer = ({
+  text,
+  className,
+  allowCopyToClipboard,
+  children
+}) => {
+  return jsx("div", {
+    className: className,
+    css: codeBlockStyleOverrides
+  }, allowCopyToClipboard ? jsx(CopyButton, {
+    content: text
+  }) : null, children);
+};
+
+export default CodeBlockContainer;

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

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import React, { forwardRef, useMemo } from 'react';
+import { css, jsx, useTheme } from '@emotion/react';
+import { blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
+import { codeBlockSharedStyles, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { useBidiWarnings } from '../../../hooks/use-bidi-warnings';
+import { RendererCssClassName } from '../../../../consts';
+const lightWeightCodeBlockStyles = css`
+  .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
+    cursor: text;
+  }
+`;
+export const LightWeightCodeBlockCssClassName = {
+  CONTAINER: 'light-weight-code-block'
+};
+export const getLightWeightCodeBlockStylesForRootRendererStyleSheet = () => {
+  // We overwrite the rule that clears margin-top for first nested codeblocks, as
+  // our lightweight codeblock dom structure will always nest the codeblock inside
+  // an extra container div which would constantly be targeted. Now, top-level
+  // lightweight codeblock containers will not be targeted.
+  // NOTE: This must be added after other .code-block styles in the root
+  // Renderer stylesheet.
+  return css`
+    .${RendererCssClassName.DOCUMENT}
+      > .${LightWeightCodeBlockCssClassName.CONTAINER}
+      .${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER} {
+      margin-top: ${blockNodesVerticalMargin};
+    }
+  `;
+};
+const LightWeightCodeBlock = /*#__PURE__*/forwardRef(({
+  text,
+  codeBidiWarningTooltipEnabled = true,
+  className
+}, ref) => {
+  const theme = useTheme();
+  const textRows = useMemo(() => (text !== null && text !== void 0 ? text : '').split('\n'), [text]);
+  const {
+    renderBidiWarnings
+  } = useBidiWarnings({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  });
+  const classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
+  return jsx("div", {
+    className: classNames,
+    ref: ref,
+    css: [codeBlockSharedStyles(theme), lightWeightCodeBlockStyles]
+  }, jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
+  }, textRows.map((_, index) => jsx("span", {
+    key: index
+  }))), jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  }, jsx("code", null, renderBidiWarnings(text)))));
+});
+export default LightWeightCodeBlock;

package/dist/es2019/react/nodes/codeBlock/windowedCodeBlock.js

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import { Fragment, memo } from 'react';
+import { lazy, Suspense } from 'react';
+import { jsx } from '@emotion/react';
+import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { useFeatureFlags } from '../../../use-feature-flags';
+import { useInViewport } from '../../hooks/use-in-viewport';
+import { useBidiWarnings } from '../../hooks/use-bidi-warnings';
+import LightWeightCodeBlock from './components/lightWeightCodeBlock';
+import CodeBlockContainer from './components/codeBlockContainer';
+const LazyAkCodeBlock = /*#__PURE__*/lazy(async () => import(
+/* webpackChunkName: "@atlaskit-internal_renderer-codeBlock" */
+'@atlaskit/code/block'));
+
+const joinWithSpaces = (...strs) => strs.join(' ');
+
+const MemoizedLightWeightCodeBlock = /*#__PURE__*/memo(LightWeightCodeBlock);
+
+const WindowedCodeBlock = ({
+  text,
+  language,
+  allowCopyToClipboard,
+  codeBidiWarningTooltipEnabled,
+  className: rootClassName
+}) => {
+  const featureFlags = useFeatureFlags();
+  const {
+    warningLabel
+  } = useBidiWarnings({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  });
+  const {
+    isInViewport,
+    trackingRef
+  } = useInViewport();
+  const className = joinWithSpaces(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
+  const memoizedLightWeightCodeBlock = jsx(MemoizedLightWeightCodeBlock, {
+    ref: trackingRef,
+    text: text,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    className: rootClassName
+  });
+  return isInViewport ? jsx(Fragment, null, jsx(Suspense, {
+    fallback: memoizedLightWeightCodeBlock
+  }, jsx(CodeBlockContainer, {
+    className: className,
+    text: text,
+    allowCopyToClipboard: allowCopyToClipboard
+  }, jsx(LazyAkCodeBlock, {
+    language: language,
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: warningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  })))) : memoizedLightWeightCodeBlock;
+};
+
+export default WindowedCodeBlock;

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

@@ -6,7 +6,7 @@ import Tooltip from '@atlaskit/tooltip';
 import Button from '@atlaskit/button/custom-theme-button';
 import CopyIcon from '@atlaskit/icon/glyph/copy';
 import { N20, N30, N700 } from '@atlaskit/theme/colors';
-import { CopyTextConsumer } from './copy-text-provider';
+import { copyTextToClipboard } from '../utils/clipboard';
 import { codeBlockCopyButtonMessages } from '../../messages';
 import { token } from '@atlaskit/tokens';
 const copyButtonWrapperStyles = css`
@@ -54,33 +54,29 @@ const CopyButton = ({
     setClassName('copy-to-clipboard');
   };
 
-  return jsx(CopyTextConsumer, null, ({
-    copyTextToClipboard
-  }) => {
-    return jsx("span", {
-      css: copyButtonWrapperStyles
-    }, jsx(Tooltip, {
-      content: tooltip,
-      hideTooltipOnClick: false,
-      position: "top"
-    }, jsx("div", {
-      onMouseLeave: onMouseLeave
-    }, jsx(Button, {
-      className: className,
-      "aria-label": tooltip,
-      spacing: "compact",
-      appearance: "subtle",
-      "aria-haspopup": true,
-      iconBefore: jsx(CopyIcon, {
-        label: tooltip
-      }),
-      onClick: () => {
-        copyTextToClipboard(content);
-        setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copiedCodeToClipboard));
-        setClassName('copy-to-clipboard clicked');
-      }
-    }))));
-  });
+  return jsx("span", {
+    css: copyButtonWrapperStyles
+  }, jsx(Tooltip, {
+    content: tooltip,
+    hideTooltipOnClick: false,
+    position: "top"
+  }, jsx("div", {
+    onMouseLeave: onMouseLeave
+  }, jsx(Button, {
+    className: className,
+    "aria-label": tooltip,
+    spacing: "compact",
+    appearance: "subtle",
+    "aria-haspopup": true,
+    iconBefore: jsx(CopyIcon, {
+      label: tooltip
+    }),
+    onClick: () => {
+      copyTextToClipboard(content);
+      setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copiedCodeToClipboard));
+      setClassName('copy-to-clipboard clicked');
+    }
+  }))));
 };
 
 export default injectIntl(CopyButton);

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

@@ -3,7 +3,7 @@ import React from 'react';
 import HeadingAnchor from './heading-anchor';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics/enums';
 import AnalyticsContext from '../../analytics/analyticsContext';
-import { CopyTextConsumer } from './copy-text-provider';
+import { copyTextToClipboard } from '../utils/clipboard';
 
 const getCurrentUrlWithHash = (hash = '') => {
   const url = new URL(window.location.href);
@@ -42,25 +42,21 @@ function Heading(props) {
   const headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/React.createElement(HX, _extends({
     id: headingIdToUse
-  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/React.createElement(CopyTextConsumer, null, ({
-    copyTextToClipboard
-  }) => {
-    return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
-      fireAnalyticsEvent
-    }) => /*#__PURE__*/React.createElement(HeadingAnchor, {
-      enableNestedHeaderLinks: enableNestedHeaderLinks,
-      level: props.level,
-      onCopyText: () => {
-        fireAnalyticsEvent({
-          action: ACTION.CLICKED,
-          actionSubject: ACTION_SUBJECT.BUTTON,
-          actionSubjectId: ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
-          eventType: EVENT_TYPE.UI
-        });
-        return copyTextToClipboard(getCurrentUrlWithHash(headingId));
-      }
-    }));
-  })));
+  }, dataAttributes), /*#__PURE__*/React.createElement(React.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, ({
+    fireAnalyticsEvent
+  }) => /*#__PURE__*/React.createElement(HeadingAnchor, {
+    enableNestedHeaderLinks: enableNestedHeaderLinks,
+    level: props.level,
+    onCopyText: () => {
+      fireAnalyticsEvent({
+        action: ACTION.CLICKED,
+        actionSubject: ACTION_SUBJECT.BUTTON,
+        actionSubjectId: ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
+        eventType: EVENT_TYPE.UI
+      });
+      return copyTextToClipboard(getCurrentUrlWithHash(headingId));
+    }
+  }))));
 }
 
 export default Heading;

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

@@ -20,10 +20,16 @@ import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
 import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
+const WindowedCodeBlock = Loadable({
+  loader: () => import(
+  /* webpackChunkName: "@atlaskit-internal_renderer-node_WindowedCodeBlock" */
+  './codeBlock/windowedCodeBlock').then(mod => mod.default),
+  loading: () => null
+});
 const CodeBlock = Loadable({
   loader: () => import(
   /* webpackChunkName: "@atlaskit-internal_renderer-node_CodeBlock" */
-  './codeBlock').then(mod => mod.default),
+  './codeBlock/codeBlock').then(mod => mod.default),
   loading: () => null
 });
 const TaskList = Loadable({
@@ -133,7 +139,6 @@ export const nodeToReact = {
   bulletList: BulletList,
   blockCard: BlockCard,
   caption: Caption,
-  codeBlock: CodeBlock,
   date: Date,
   decisionItem: DecisionItem,
   decisionList: DecisionList,
@@ -172,12 +177,24 @@ export const nodeToReact = {
   nestedExpand: Expand,
   embedCard: EmbedCard
 };
-export const toReact = (node, flags) => {
+export const toReact = (node, flags, nodeComponents) => {
   if (node.type.name === 'doc' && (flags === null || flags === void 0 ? void 0 : flags.allowSelectAllTrap) === true) {
     return DocWithSelectAllTrap;
   }
 
-  return nodeToReact[node.type.name];
+  if (node.type.name === 'codeBlock') {
+    if ((flags === null || flags === void 0 ? void 0 : flags.allowWindowedCodeBlock) === true) {
+      return WindowedCodeBlock;
+    }
+
+    return CodeBlock;
+  } // Allowing custom components to override those provided in nodeToReact
+
+
+  const nodes = { ...nodeToReact,
+    ...nodeComponents
+  };
+  return nodes[node.type.name];
 };
 
 /*
@@ -310,4 +327,4 @@ const isEmojiBlock = pnode => {
   return emojiCount > 0;
 };
 
-export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };
+export { Blockquote, BodiedExtension, BulletList, BlockCard, Caption, CodeBlock, WindowedCodeBlock, Date, DecisionItem, DecisionList, Doc, DocWithSelectAllTrap, Emoji, Extension, Expand, HardBreak, Heading, ListItem, InlineCard, InlineExtension, LayoutSection, LayoutColumn, Media, MediaGroup, MediaInline, MediaSingle, Mention, OrderedList, Panel, Paragraph, Placeholder, Rule, Status, TaskItem, TaskList, Table, TableCell, TableRow, UnknownBlock, EmbedCard };