@atlaskit/renderer 98.0.0 → 100.0.0

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

@@ -1,7 +1,11 @@
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
-import { WidthProvider, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { jsx, css } from '@emotion/react';
+import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
+const layoutColumnClearMarginTopStyles = css`
+  ${clearNextSiblingMarginTopStyle}
+  ${clearNextSiblingBlockMarkMarginTopStyle}
+`;
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,
@@ -10,6 +14,6 @@ export default function LayoutSection(props) {
       flexBasis: `${props.width}%`
     }
   }, jsx(WidthProvider, null, jsx("div", {
-    css: clearNextSiblingMarginTopStyle
+    css: layoutColumnClearMarginTopStyles
   }), props.children));
 }

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

@@ -0,0 +1,9 @@
+export const copyTextToClipboard = text => new Promise((resolve, reject) => {
+  const isApiSupported = !!navigator.clipboard && typeof navigator.clipboard.writeText === 'function';
+
+  if (isApiSupported) {
+    navigator.clipboard.writeText(text).then(() => resolve(), e => reject(e));
+  } else {
+    reject('Clipboard API is not supported');
+  }
+});

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

@@ -21,7 +21,6 @@ import { TruncatedWrapper } from './truncated-wrapper';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '../../analytics/enums';
 import { PLATFORM, MODE } from '../../analytics/events';
 import AnalyticsContext from '../../analytics/analyticsContext';
-import { CopyTextProvider } from '../../react/nodes/copy-text-provider';
 import { Provider as SmartCardStorageProvider } from '../SmartCardStorage';
 import { name, version } from '../../version.json';
 import { BreakoutSSRInlineScript } from './breakout-ssr';
@@ -179,6 +178,9 @@ export class Renderer extends PureComponent {
       annotationProvider
     } = props;
     const allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+    const {
+      featureFlags
+    } = this.featureFlags(props.featureFlags);
     return {
       providers: this.providerFactory,
       eventHandlers: props.eventHandlers,
@@ -206,7 +208,10 @@ export class Renderer extends 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
     };
   }
 
@@ -289,7 +294,7 @@ export class Renderer extends PureComponent {
 
       const rendererOutput = jsx(RendererContextProvider, {
         value: this.featureFlags(this.props.featureFlags)
-      }, jsx(CopyTextProvider, null, jsx(ActiveHeaderIdProvider, {
+      }, jsx(ActiveHeaderIdProvider, {
         value: getActiveHeadingId(allowHeadingAnchorLinks)
       }, jsx(AnalyticsContext.Provider, {
         value: {
@@ -309,7 +314,7 @@ export class Renderer extends PureComponent {
         doc: pmDoc,
         schema: schema,
         onAnalyticsEvent: this.fireAnalyticsEvent
-      }, result)))))));
+      }, result))))));
       let rendererResult = truncated ? jsx(TruncatedWrapper, {
         height: maxHeight,
         fadeHeight: fadeOutHeight

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

@@ -10,6 +10,7 @@ import { editorFontSize, blockNodesVerticalMargin, akEditorTableToolbar, akEdito
 import { RendererCssClassName } from '../../consts';
 import { HeadingAnchorWrapperClassName } from '../../react/nodes/heading-anchor';
 import { shadowObserverClassNames } from '@atlaskit/editor-common/ui';
+import { getLightWeightCodeBlockStylesForRootRendererStyleSheet } from '../../react/nodes/codeBlock/components/lightWeightCodeBlock';
 export const FullPagePadding = 32;
 
 const getLineHeight = fontCode => headingSizesImport[fontCode].lineHeight / headingSizesImport[fontCode].size;
@@ -661,6 +662,8 @@ export const rendererStyles = wrapperProps => theme => {
       }
     }
 
+    ${getLightWeightCodeBlockStylesForRootRendererStyleSheet()}
+
     ${columnLayoutSharedStyle};
     & [data-layout-section] {
       margin-top: ${gridSize() * 2.5}px;

package/dist/es2019/version.json

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

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

@@ -0,0 +1,29 @@
+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 var useBidiWarnings = function useBidiWarnings(_ref) {
+  var _ref$enableWarningToo = _ref.enableWarningTooltip,
+      enableWarningTooltip = _ref$enableWarningToo === void 0 ? true : _ref$enableWarningToo;
+  var intl = useIntl();
+  var warningLabel = intl.formatMessage(codeBidiWarningMessages.label);
+
+  var renderBidiWarnings = function renderBidiWarnings(text) {
+    return codeBidiWarningDecorator(text, function (_ref2) {
+      var bidiCharacter = _ref2.bidiCharacter,
+          index = _ref2.index;
+      return /*#__PURE__*/React.createElement(CodeBidiWarning, {
+        bidiCharacter: bidiCharacter,
+        key: index,
+        label: warningLabel,
+        tooltipEnabled: enableWarningTooltip
+      });
+    });
+  };
+
+  return {
+    renderBidiWarnings: renderBidiWarnings,
+    warningLabel: warningLabel
+  };
+};

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

@@ -0,0 +1,51 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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; }
+
+import { useEffect, useRef, useState } from 'react';
+export var useInViewport = function useInViewport() {
+  var trackingRef = useRef(null);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInViewport = _useState2[0],
+      setIsInViewport = _useState2[1];
+
+  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
+  };
+};

package/dist/esm/react/index.js

@@ -76,8 +76,9 @@ var ReactSerializer = /*#__PURE__*/function () {
       var nodeKey = "".concat(node.type.name, "__").concat(_this.startPos);
 
       var 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: parentIsIncompleteTask,
         path: [].concat(_toConsumableArray(currentPath), [node]),
         pos: _this.startPos
@@ -194,6 +195,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;
   }
 
   _createClass(ReactSerializer, [{

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

@@ -0,0 +1,32 @@
+/** @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) {
+  var text = props.text,
+      language = props.language,
+      _props$allowCopyToCli = props.allowCopyToClipboard,
+      allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+      codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
+  var featureFlags = useFeatureFlags();
+  var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
+  var 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/esm/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -0,0 +1,40 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @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 */
+var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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  "])), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
+    background: themed({
+      light: N20,
+      dark: DN50
+    })(props),
+    width: "".concat(gridSize(), "px")
+  }));
+};
+
+var CodeBlockContainer = function CodeBlockContainer(_ref) {
+  var text = _ref.text,
+      className = _ref.className,
+      allowCopyToClipboard = _ref.allowCopyToClipboard,
+      children = _ref.children;
+  return jsx("div", {
+    className: className,
+    css: codeBlockStyleOverrides
+  }, allowCopyToClipboard ? jsx(CopyButton, {
+    content: text
+  }) : null, children);
+};
+
+export default CodeBlockContainer;

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

@@ -0,0 +1,57 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2;
+
+/** @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';
+var lightWeightCodeBlockStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .", " {\n    cursor: text;\n  }\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER);
+export var LightWeightCodeBlockCssClassName = {
+  CONTAINER: 'light-weight-code-block'
+};
+export 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 css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    .", "\n      > .", "\n      .", " {\n      margin-top: ", ";\n    }\n  "])), RendererCssClassName.DOCUMENT, LightWeightCodeBlockCssClassName.CONTAINER, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, blockNodesVerticalMargin);
+};
+var LightWeightCodeBlock = /*#__PURE__*/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 = useTheme();
+  var textRows = useMemo(function () {
+    return (text !== null && text !== void 0 ? text : '').split('\n');
+  }, [text]);
+
+  var _useBidiWarnings = useBidiWarnings({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  }),
+      renderBidiWarnings = _useBidiWarnings.renderBidiWarnings;
+
+  var 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(function (_, index) {
+    return jsx("span", {
+      key: index
+    });
+  })), jsx("div", {
+    className: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
+  }, jsx("code", null, renderBidiWarnings(text)))));
+});
+export default LightWeightCodeBlock;

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

@@ -0,0 +1,80 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/** @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';
+var LazyAkCodeBlock = /*#__PURE__*/lazy( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          return _context.abrupt("return", import(
+          /* webpackChunkName: "@atlaskit-internal_renderer-codeBlock" */
+          '@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__*/memo(LightWeightCodeBlock);
+
+var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
+  var text = _ref2.text,
+      language = _ref2.language,
+      allowCopyToClipboard = _ref2.allowCopyToClipboard,
+      codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled,
+      rootClassName = _ref2.className;
+  var featureFlags = useFeatureFlags();
+
+  var _useBidiWarnings = useBidiWarnings({
+    enableWarningTooltip: codeBidiWarningTooltipEnabled
+  }),
+      warningLabel = _useBidiWarnings.warningLabel;
+
+  var _useInViewport = useInViewport(),
+      isInViewport = _useInViewport.isInViewport,
+      trackingRef = _useInViewport.trackingRef;
+
+  var className = joinWithSpaces(CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, rootClassName);
+  var 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/esm/react/nodes/codeBlockCopyButton.js

@@ -11,7 +11,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';
 var copyButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: sticky;\n  justify-content: flex-end;\n  top: 0;\n\n  button {\n    position: absolute;\n    display: flex;\n    justify-content: center;\n    height: 32px;\n    width: 32px;\n    right: 6px;\n    top: 4px;\n    padding: 2px;\n    opacity: 0;\n    transition: opacity 0.2s ease 0s;\n    border: 2px solid ", ";\n    border-radius: 4px;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  button:hover {\n    background-color: ", ";\n  }\n\n  button.clicked {\n    background-color: ", ";\n    color: ", " !important;\n  }\n"])), token('color.border.inverse', '#fff'), token('color.background.neutral.subtle', N20), token('color.icon', 'rgb(66, 82, 110)'), token('color.background.neutral.hovered', N30), token('color.background.neutral.bold.pressed', N700), token('color.icon.inverse', '#fff'));
@@ -35,32 +35,29 @@ var CopyButton = function CopyButton(_ref) {
     setClassName('copy-to-clipboard');
   };
 
-  return jsx(CopyTextConsumer, null, function (_ref2) {
-    var copyTextToClipboard = _ref2.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: function 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: function onClick() {
+      copyTextToClipboard(content);
+      setTooltip(intl.formatMessage(codeBlockCopyButtonMessages.copiedCodeToClipboard));
+      setClassName('copy-to-clipboard clicked');
+    }
+  }))));
 };
 
 export default injectIntl(CopyButton);

package/dist/esm/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';
 
 var getCurrentUrlWithHash = function getCurrentUrlWithHash() {
   var hash = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
@@ -43,23 +43,20 @@ function Heading(props) {
   var 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, function (_ref) {
-    var copyTextToClipboard = _ref.copyTextToClipboard;
-    return headingId && /*#__PURE__*/React.createElement(AnalyticsContext.Consumer, null, function (_ref2) {
-      var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
-      return /*#__PURE__*/React.createElement(HeadingAnchor, {
-        enableNestedHeaderLinks: enableNestedHeaderLinks,
-        level: props.level,
-        onCopyText: function 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, function (_ref) {
+    var fireAnalyticsEvent = _ref.fireAnalyticsEvent;
+    return /*#__PURE__*/React.createElement(HeadingAnchor, {
+      enableNestedHeaderLinks: enableNestedHeaderLinks,
+      level: props.level,
+      onCopyText: function onCopyText() {
+        fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK,
+          eventType: EVENT_TYPE.UI
+        });
+        return copyTextToClipboard(getCurrentUrlWithHash(headingId));
+      }
     });
   })));
 }

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

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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) { _defineProperty(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; }
+
 import Loadable from 'react-loadable';
 import Blockquote from './blockquote';
 import BodiedExtension from './bodiedExtension';
@@ -20,11 +26,23 @@ import { TableCell, TableHeader } from './tableCell';
 import TableRow from './tableRow';
 import UnknownBlock from './unknownBlock';
 import { UnsupportedBlock, UnsupportedInline } from '@atlaskit/editor-common/ui';
+var WindowedCodeBlock = Loadable({
+  loader: function loader() {
+    return import(
+    /* webpackChunkName: "@atlaskit-internal_renderer-node_WindowedCodeBlock" */
+    './codeBlock/windowedCodeBlock').then(function (mod) {
+      return mod.default;
+    });
+  },
+  loading: function loading() {
+    return null;
+  }
+});
 var CodeBlock = Loadable({
   loader: function loader() {
     return import(
     /* webpackChunkName: "@atlaskit-internal_renderer-node_CodeBlock" */
-    './codeBlock').then(function (mod) {
+    './codeBlock/codeBlock').then(function (mod) {
       return mod.default;
     });
   },
@@ -241,7 +259,6 @@ export var nodeToReact = {
   bulletList: BulletList,
   blockCard: BlockCard,
   caption: Caption,
-  codeBlock: CodeBlock,
   date: Date,
   decisionItem: DecisionItem,
   decisionList: DecisionList,
@@ -280,12 +297,23 @@ export var nodeToReact = {
   nestedExpand: Expand,
   embedCard: EmbedCard
 };
-export var toReact = function toReact(node, flags) {
+export var toReact = function 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
+
+
+  var nodes = _objectSpread(_objectSpread({}, nodeToReact), nodeComponents);
+
+  return nodes[node.type.name];
 };
 
 /*
@@ -422,4 +450,4 @@ var isEmojiBlock = function 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 };

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

@@ -1,7 +1,12 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
 /** @jsx jsx */
 import React from 'react';
-import { jsx } from '@emotion/react';
-import { WidthProvider, clearNextSiblingMarginTopStyle } from '@atlaskit/editor-common/ui';
+import { jsx, css } from '@emotion/react';
+import { WidthProvider, clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle } from '@atlaskit/editor-common/ui';
+var layoutColumnClearMarginTopStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n"])), clearNextSiblingMarginTopStyle, clearNextSiblingBlockMarkMarginTopStyle);
 export default function LayoutSection(props) {
   return jsx("div", {
     "data-layout-column": true,
@@ -10,6 +15,6 @@ export default function LayoutSection(props) {
       flexBasis: "".concat(props.width, "%")
     }
   }, jsx(WidthProvider, null, jsx("div", {
-    css: clearNextSiblingMarginTopStyle
+    css: layoutColumnClearMarginTopStyles
   }), props.children));
 }

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

@@ -0,0 +1,15 @@
+export 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');
+    }
+  });
+};