@atlaskit/renderer 98.0.0 → 98.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 98.1.0
+
+### Minor Changes
+
+- [`ab4f37635d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ab4f37635d9) - Modified the renderer package to include a prop 'nodeComponents' that will override the nodes the renderer provides and allow us to render our own custom nodes
+- [`2d979ce9877`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d979ce9877) - [ux] ED-14945: Add windowed codeblock support in renderer (This feature sits behind a flag in the featureFlags prop 'allow-windowed-code-block')
+
+### Patch Changes
+
+- [`153b80fdcda`](https://bitbucket.org/atlassian/atlassian-frontend/commits/153b80fdcda) - [ux] ED-15111: Fix aligned text and headings margin-top values in layouts in Renderer (by clearing them)
+- [`07e38f1e753`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07e38f1e753) - [ux] ED-14419: removed CopyTextProvider in favour of util function copyTextToClipboard()
+
+  This removes workarounds for unsupported browsers such as Internet Explorer and Safari releases before v12.
+
+- Updated dependencies
+
 ## 98.0.0
 
 ### Patch Changes

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBidiWarnings = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _bidiWarning = _interopRequireDefault(require("@atlaskit/code/bidi-warning"));
+
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _bidiWarningDecorator = _interopRequireDefault(require("@atlaskit/code/bidi-warning-decorator"));
+
+var useBidiWarnings = function useBidiWarnings(_ref) {
+  var _ref$enableWarningToo = _ref.enableWarningTooltip,
+      enableWarningTooltip = _ref$enableWarningToo === void 0 ? true : _ref$enableWarningToo;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var warningLabel = intl.formatMessage(_messages.codeBidiWarningMessages.label);
+
+  var renderBidiWarnings = function renderBidiWarnings(text) {
+    return (0, _bidiWarningDecorator.default)(text, function (_ref2) {
+      var bidiCharacter = _ref2.bidiCharacter,
+          index = _ref2.index;
+      return /*#__PURE__*/_react.default.createElement(_bidiWarning.default, {
+        bidiCharacter: bidiCharacter,
+        key: index,
+        label: warningLabel,
+        tooltipEnabled: enableWarningTooltip
+      });
+    });
+  };
+
+  return {
+    renderBidiWarnings: renderBidiWarnings,
+    warningLabel: warningLabel
+  };
+};
+
+exports.useBidiWarnings = useBidiWarnings;

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

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useInViewport = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+var useInViewport = function useInViewport() {
+  var trackingRef = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isInViewport = _useState2[0],
+      setIsInViewport = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    if (!trackingRef || !(trackingRef !== null && trackingRef !== void 0 && trackingRef.current)) {
+      return;
+    }
+
+    var target = trackingRef.current;
+    var observer = new IntersectionObserver(function (entries) {
+      var _iterator = _createForOfIteratorHelper(entries),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var entry = _step.value;
+
+          if (entry.isIntersecting) {
+            setIsInViewport(true);
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    });
+    observer.observe(target);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [trackingRef]);
+  return {
+    isInViewport: isInViewport,
+    trackingRef: trackingRef
+  };
+};
+
+exports.useInViewport = useInViewport;

package/dist/cjs/react/index.js

@@ -93,8 +93,9 @@ var ReactSerializer = /*#__PURE__*/function () {
       var nodeKey = "".concat(node.type.name, "__").concat(_this.startPos);
 
       var serializedContent = _this.serializeFragment(node.content, _this.getNodeProps(node, parentInfo), (0, _nodes.toReact)(node, {
-        allowSelectAllTrap: _this.allowSelectAllTrap
-      }), nodeKey, {
+        allowSelectAllTrap: _this.allowSelectAllTrap,
+        allowWindowedCodeBlock: _this.allowWindowedCodeBlock
+      }, _this.nodeComponents), nodeKey, {
         parentIsIncompleteTask: parentIsIncompleteTask,
         path: [].concat((0, _toConsumableArray2.default)(currentPath), [node]),
         pos: _this.startPos
@@ -205,6 +206,8 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.media = init.media;
     this.smartLinks = init.smartLinks;
     this.allowSelectAllTrap = init.allowSelectAllTrap;
+    this.nodeComponents = init.nodeComponents;
+    this.allowWindowedCodeBlock = init.allowWindowedCodeBlock;
   }
 
   (0, _createClass2.default)(ReactSerializer, [{

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@emotion/react");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _code = require("@atlaskit/code");
+
+var _messages = require("@atlaskit/editor-common/messages");
+
+var _useFeatureFlags = require("../../../use-feature-flags");
+
+var _codeBlockContainer = _interopRequireDefault(require("./components/codeBlockContainer"));
+
+/** @jsx jsx */
+function CodeBlock(props) {
+  var text = props.text,
+      language = props.language,
+      _props$allowCopyToCli = props.allowCopyToClipboard,
+      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+      codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
+  var codeBidiWarningLabel = props.intl.formatMessage(_messages.codeBidiWarningMessages.label);
+  var className = [_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
+  return (0, _react.jsx)(_codeBlockContainer.default, {
+    text: text,
+    className: className,
+    allowCopyToClipboard: allowCopyToClipboard
+  }, (0, _react.jsx)(_code.CodeBlock, {
+    language: language,
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: codeBidiWarningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  }));
+}
+
+var _default = (0, _reactIntlNext.injectIntl)(CodeBlock);
+
+exports.default = _default;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _components = require("@atlaskit/theme/components");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _codeBlockCopyButton = _interopRequireDefault(require("../../codeBlockCopyButton"));
+
+var _templateObject;
+
+// TODO: Quality ticket https://product-fabric.atlassian.net/browse/DSP-4118
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    tab-size: 4;\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, scroll, scroll;\n      background-position: 100% 0, 100% 0, 0 0;\n    }\n  "])), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
+    background: (0, _components.themed)({
+      light: _colors.N20,
+      dark: _colors.DN50
+    })(props),
+    width: "".concat((0, _constants.gridSize)(), "px")
+  }));
+};
+
+var CodeBlockContainer = function CodeBlockContainer(_ref) {
+  var text = _ref.text,
+      className = _ref.className,
+      allowCopyToClipboard = _ref.allowCopyToClipboard,
+      children = _ref.children;
+  return (0, _react.jsx)("div", {
+    className: className,
+    css: codeBlockStyleOverrides
+  }, allowCopyToClipboard ? (0, _react.jsx)(_codeBlockCopyButton.default, {
+    content: text
+  }) : null, children);
+};
+
+var _default = CodeBlockContainer;
+exports.default = _default;

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLightWeightCodeBlockStylesForRootRendererStyleSheet = exports.default = exports.LightWeightCodeBlockCssClassName = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _useBidiWarnings2 = require("../../../hooks/use-bidi-warnings");
+
+var _consts = require("../../../../consts");
+
+var _templateObject, _templateObject2;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var lightWeightCodeBlockStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    cursor: text;\n  }\n"])), _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+var LightWeightCodeBlockCssClassName = {
+  CONTAINER: 'light-weight-code-block'
+};
+exports.LightWeightCodeBlockCssClassName = LightWeightCodeBlockCssClassName;
+
+var getLightWeightCodeBlockStylesForRootRendererStyleSheet = function 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 (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n    .", "\n      > .", "\n      .", " {\n      margin-top: ", ";\n    }\n  "])), _consts.RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _editorSharedStyles.blockNodesVerticalMargin);
+};
+
+exports.getLightWeightCodeBlockStylesForRootRendererStyleSheet = getLightWeightCodeBlockStylesForRootRendererStyleSheet;
+var LightWeightCodeBlock = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var text = _ref.text,
+      _ref$codeBidiWarningT = _ref.codeBidiWarningTooltipEnabled,
+      codeBidiWarningTooltipEnabled = _ref$codeBidiWarningT === void 0 ? true : _ref$codeBidiWarningT,
+      className = _ref.className;
+  var theme = (0, _react2.useTheme)();
+  var textRows = (0, _react.useMemo)(function () {
+    return (text !== null && text !== void 0 ? text : '').split('\n');
+  }, [text]);
+
+  var _useBidiWarnings = (0, _useBidiWarnings2.useBidiWarnings)({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  }),
+      renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
+
+  var classNames = [LightWeightCodeBlockCssClassName.CONTAINER, className].join(' ');
+  return (0, _react2.jsx)("div", {
+    className: classNames,
+    ref: ref,
+    css: [(0, _styles.codeBlockSharedStyles)(theme), lightWeightCodeBlockStyles]
+  }, (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER
+  }, (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER
+  }, textRows.map(function (_, index) {
+    return (0, _react2.jsx)("span", {
+      key: index
+    });
+  })), (0, _react2.jsx)("div", {
+    className: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  }, (0, _react2.jsx)("code", null, renderBidiWarnings(text)))));
+});
+var _default = LightWeightCodeBlock;
+exports.default = _default;

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

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+var _useFeatureFlags = require("../../../use-feature-flags");
+
+var _useInViewport2 = require("../../hooks/use-in-viewport");
+
+var _useBidiWarnings2 = require("../../hooks/use-bidi-warnings");
+
+var _lightWeightCodeBlock = _interopRequireDefault(require("./components/lightWeightCodeBlock"));
+
+var _codeBlockContainer = _interopRequireDefault(require("./components/codeBlockContainer"));
+
+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 LazyAkCodeBlock = /*#__PURE__*/(0, _react.lazy)( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+  return _regenerator.default.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", Promise.resolve().then(function () {
+            return _interopRequireWildcard(require('@atlaskit/code/block'));
+          }));
+
+        case 1:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+
+var joinWithSpaces = function joinWithSpaces() {
+  for (var _len = arguments.length, strs = new Array(_len), _key = 0; _key < _len; _key++) {
+    strs[_key] = arguments[_key];
+  }
+
+  return strs.join(' ');
+};
+
+var MemoizedLightWeightCodeBlock = /*#__PURE__*/(0, _react.memo)(_lightWeightCodeBlock.default);
+
+var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
+  var text = _ref2.text,
+      language = _ref2.language,
+      allowCopyToClipboard = _ref2.allowCopyToClipboard,
+      codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled,
+      rootClassName = _ref2.className;
+  var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
+
+  var _useBidiWarnings = (0, _useBidiWarnings2.useBidiWarnings)({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  }),
+      warningLabel = _useBidiWarnings.warningLabel;
+
+  var _useInViewport = (0, _useInViewport2.useInViewport)(),
+      isInViewport = _useInViewport.isInViewport,
+      trackingRef = _useInViewport.trackingRef;
+
+  var className = joinWithSpaces(_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
+  var memoizedLightWeightCodeBlock = (0, _react2.jsx)(MemoizedLightWeightCodeBlock, {
+    ref: trackingRef,
+    text: text,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    className: rootClassName
+  });
+  return isInViewport ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_react.Suspense, {
+    fallback: memoizedLightWeightCodeBlock
+  }, (0, _react2.jsx)(_codeBlockContainer.default, {
+    className: className,
+    text: text,
+    allowCopyToClipboard: allowCopyToClipboard
+  }, (0, _react2.jsx)(LazyAkCodeBlock, {
+    language: language,
+    text: text,
+    codeBidiWarnings: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.codeBidiWarnings,
+    codeBidiWarningLabel: warningLabel,
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+  })))) : memoizedLightWeightCodeBlock;
+};
+
+var _default = WindowedCodeBlock;
+exports.default = _default;

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

@@ -27,7 +27,7 @@ var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _copyTextProvider = require("./copy-text-provider");
+var _clipboard = require("../utils/clipboard");
 
 var _messages = require("../../messages");
 
@@ -60,32 +60,29 @@ var CopyButton = function CopyButton(_ref) {
     setClassName('copy-to-clipboard');
   };
 
-  return (0, _react.jsx)(_copyTextProvider.CopyTextConsumer, null, function (_ref2) {
-    var copyTextToClipboard = _ref2.copyTextToClipboard;
-    return (0, _react.jsx)("span", {
-      css: copyButtonWrapperStyles
-    }, (0, _react.jsx)(_tooltip.default, {
-      content: tooltip,
-      hideTooltipOnClick: false,
-      position: "top"
-    }, (0, _react.jsx)("div", {
-      onMouseLeave: onMouseLeave
-    }, (0, _react.jsx)(_customThemeButton.default, {
-      className: className,
-      "aria-label": tooltip,
-      spacing: "compact",
-      appearance: "subtle",
-      "aria-haspopup": true,
-      iconBefore: (0, _react.jsx)(_copy.default, {
-        label: tooltip
-      }),
-      onClick: function onClick() {
-        copyTextToClipboard(content);
-        setTooltip(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copiedCodeToClipboard));
-        setClassName('copy-to-clipboard clicked');
-      }
-    }))));
-  });
+  return (0, _react.jsx)("span", {
+    css: copyButtonWrapperStyles
+  }, (0, _react.jsx)(_tooltip.default, {
+    content: tooltip,
+    hideTooltipOnClick: false,
+    position: "top"
+  }, (0, _react.jsx)("div", {
+    onMouseLeave: onMouseLeave
+  }, (0, _react.jsx)(_customThemeButton.default, {
+    className: className,
+    "aria-label": tooltip,
+    spacing: "compact",
+    appearance: "subtle",
+    "aria-haspopup": true,
+    iconBefore: (0, _react.jsx)(_copy.default, {
+      label: tooltip
+    }),
+    onClick: function onClick() {
+      (0, _clipboard.copyTextToClipboard)(content);
+      setTooltip(intl.formatMessage(_messages.codeBlockCopyButtonMessages.copiedCodeToClipboard));
+      setClassName('copy-to-clipboard clicked');
+    }
+  }))));
 };
 
 var _default = (0, _reactIntlNext.injectIntl)(CopyButton);

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

@@ -17,7 +17,7 @@ var _enums = require("../../analytics/enums");
 
 var _analyticsContext = _interopRequireDefault(require("../../analytics/analyticsContext"));
 
-var _copyTextProvider = require("./copy-text-provider");
+var _clipboard = require("../utils/clipboard");
 
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -57,23 +57,20 @@ function Heading(props) {
   var headingIdToUse = invisible ? undefined : headingId;
   return /*#__PURE__*/_react.default.createElement(HX, (0, _extends2.default)({
     id: headingIdToUse
-  }, dataAttributes), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && /*#__PURE__*/_react.default.createElement(_copyTextProvider.CopyTextConsumer, null, function (_ref) {
-    var copyTextToClipboard = _ref.copyTextToClipboard;
-    return headingId && /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref2) {
-      var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-      return /*#__PURE__*/_react.default.createElement(_headingAnchor.default, {
-        enableNestedHeaderLinks: enableNestedHeaderLinks,
-        level: props.level,
-        onCopyText: function onCopyText() {
-          fireAnalyticsEvent({
-            action: _enums.ACTION.CLICKED,
-            actionSubject: _enums.ACTION_SUBJECT.BUTTON,
-            actionSubjectId: _enums.ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
-            eventType: _enums.EVENT_TYPE.UI
-          });
-          return copyTextToClipboard(getCurrentUrlWithHash(headingId));
-        }
-      });
+  }, dataAttributes), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showAnchorLink && isRightAligned ? WrapChildTextInSpan(props.children) : props.children, showAnchorLink && headingId && /*#__PURE__*/_react.default.createElement(_analyticsContext.default.Consumer, null, function (_ref) {
+    var fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+    return /*#__PURE__*/_react.default.createElement(_headingAnchor.default, {
+      enableNestedHeaderLinks: enableNestedHeaderLinks,
+      level: props.level,
+      onCopyText: function onCopyText() {
+        fireAnalyticsEvent({
+          action: _enums.ACTION.CLICKED,
+          actionSubject: _enums.ACTION_SUBJECT.BUTTON,
+          actionSubjectId: _enums.ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
+          eventType: _enums.EVENT_TYPE.UI
+        });
+        return (0, _clipboard.copyTextToClipboard)(getCurrentUrlWithHash(headingId));
+      }
     });
   })));
 }

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

@@ -139,12 +139,14 @@ Object.defineProperty(exports, "UnknownBlock", {
     return _unknownBlock.default;
   }
 });
-exports.isText = exports.isEmojiDoc = void 0;
+exports.isText = exports.isEmojiDoc = exports.WindowedCodeBlock = void 0;
 exports.isTextNode = isTextNode;
 exports.toReact = exports.nodeToReact = exports.mergeTextNodes = exports.isTextWrapper = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _reactLoadable = _interopRequireDefault(require("react-loadable"));
 
 var _blockquote = _interopRequireDefault(require("./blockquote"));
@@ -189,14 +191,31 @@ var _unknownBlock = _interopRequireDefault(require("./unknownBlock"));
 
 var _ui = require("@atlaskit/editor-common/ui");
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 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 || (0, _typeof2.default)(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 WindowedCodeBlock = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require('./codeBlock/windowedCodeBlock'));
+    }).then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
+exports.WindowedCodeBlock = WindowedCodeBlock;
 var CodeBlock = (0, _reactLoadable.default)({
   loader: function loader() {
     return Promise.resolve().then(function () {
-      return _interopRequireWildcard(require('./codeBlock'));
+      return _interopRequireWildcard(require('./codeBlock/codeBlock'));
     }).then(function (mod) {
       return mod.default;
     });
@@ -432,7 +451,6 @@ var nodeToReact = {
   bulletList: _bulletList.default,
   blockCard: BlockCard,
   caption: _caption.default,
-  codeBlock: CodeBlock,
   date: Date,
   decisionItem: DecisionItem,
   decisionList: DecisionList,
@@ -473,12 +491,23 @@ var nodeToReact = {
 };
 exports.nodeToReact = nodeToReact;
 
-var toReact = function toReact(node, flags) {
+var toReact = function toReact(node, flags, nodeComponents) {
   if (node.type.name === 'doc' && (flags === null || flags === void 0 ? void 0 : flags.allowSelectAllTrap) === true) {
     return _doc.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
+
+
+  var nodes = _objectSpread(_objectSpread({}, nodeToReact), nodeComponents);
+
+  return nodes[node.type.name];
 };
 
 exports.toReact = toReact;