@atlaskit/renderer 107.2.0 → 107.3.1

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

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/react';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { mediaLinkStyle } from '@atlaskit/editor-common/ui';
 import { MediaCard } from '../../ui/MediaCard';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
 import { getEventHandler } from '../../utils';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { MODE, PLATFORM } from '../../analytics/events';
@@ -14,6 +15,7 @@ export default class Media extends PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "renderCard", (providers = {}) => {
+      var _borderMark$attrs$col, _borderMark$attrs$siz;
       const {
         mediaProvider,
         contextIdentifierProvider
@@ -26,6 +28,9 @@ export default class Media extends PureComponent {
         enableDownloadButton,
         ssr
       } = this.props;
+      const borderMark = this.props.marks.find(this.props.isBorderMark);
+      const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+      const borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
@@ -41,13 +46,25 @@ export default class Media extends PureComponent {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
+      const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+      const mediaComponentWithBorder = borderMark ? jsx("div", {
+        "data-mark-type": "border",
+        "data-color": borderColor,
+        "data-size": borderWidth,
+        style: {
+          borderColor: paletteColorValue,
+          borderWidth: `${borderWidth}px`,
+          borderStyle: 'solid',
+          borderRadius: `${borderWidth * 2}px`
+        }
+      }, mediaComponent) : mediaComponent;
       return linkHref ? jsx("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: this.handleMediaLinkClick,
         "data-block-link": linkHref,
         css: mediaLinkStyle
-      }, mediaComponent) : mediaComponent;
+      }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     _defineProperty(this, "handleMediaLinkClick", event => {
       const {

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

@@ -7,7 +7,8 @@ import { getClipboardAttrs } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 export const RenderMediaInline = props => {
   const {
-    mediaProvider
+    mediaProvider,
+    rendererAppearance
   } = props;
   const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   useEffect(() => {
@@ -30,9 +31,20 @@ export const RenderMediaInline = props => {
       isSelected: false
     });
   }
+  const handleMediaInlineClick = result => {
+    var _props$eventHandlers, _props$eventHandlers$;
+    if ((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && (_props$eventHandlers$ = _props$eventHandlers.media) !== null && _props$eventHandlers$ !== void 0 && _props$eventHandlers$.onClick) {
+      var _props$eventHandlers2, _props$eventHandlers3;
+      (_props$eventHandlers2 = props.eventHandlers) === null || _props$eventHandlers2 === void 0 ? void 0 : (_props$eventHandlers3 = _props$eventHandlers2.media) === null || _props$eventHandlers3 === void 0 ? void 0 : _props$eventHandlers3.onClick(result);
+    }
+  };
+  const shouldOpenMediaViewer = rendererAppearance !== 'mobile';
+  const shouldDisplayToolTip = rendererAppearance !== 'mobile';
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: props.identifier,
-    shouldOpenMediaViewer: true,
+    onClick: handleMediaInlineClick,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
   });
 };
@@ -41,7 +53,8 @@ const MediaInline = props => {
     collection,
     id,
     providers,
-    intl
+    intl,
+    rendererAppearance
   } = props;
   const identifier = {
     id,
@@ -70,7 +83,9 @@ const MediaInline = props => {
       }
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider
+        mediaProvider: mediaProvider,
+        eventHandlers: props.eventHandlers,
+        rendererAppearance: rendererAppearance
       });
     }
   }));

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "107.2.0";
+const packageVersion = "107.3.1";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then
@@ -245,6 +245,7 @@ export class Renderer extends PureComponent {
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
       allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,
       allowSelectAllTrap: props.allowSelectAllTrap,
@@ -269,8 +270,10 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
+      allowWrapCodeBlock,
       allowCustomPanels
     } = this.props;
+    const featureFlags = this.featureFlags(this.props.featureFlags);
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
     /**
      * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -318,7 +321,7 @@ export class Renderer extends PureComponent {
       }
     };
     try {
-      var _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
+      var _featureFlags$feature, _this$featureFlags, _this$featureFlags$fe, _this$featureFlags$fe2;
       const schema = this.getSchema(this.props.schema, this.props.adfStage);
       const {
         result,
@@ -341,8 +344,10 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
+        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature !== void 0 ? _featureFlags$feature : true,
         innerRef: this.editorRef,
         onClick: handleWrapperOnClick,
         onMouseDown: this.onMouseDownEditView
@@ -365,15 +370,18 @@ export class Renderer extends PureComponent {
       });
       return jsx(Fragment, null, reRenderTracking, rendererResult);
     } catch (e) {
+      var _featureFlags$feature2;
       if (onError) {
         onError(e);
       }
       return jsx(RendererWrapper, {
         appearance: appearance,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,
+        useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature2 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
         onClick: handleWrapperOnClick
       }, jsx(UnsupportedBlock, null));
     }
@@ -422,7 +430,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     appearance,
     children,
     onClick,
-    onMouseDown
+    onMouseDown,
+    useFragmentMarkBreakoutWidthStylingFix
   } = props;
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
@@ -435,7 +444,8 @@ const RendererWrapper = /*#__PURE__*/React.memo(props => {
     css: rendererStyles({
       appearance,
       allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting
+      allowColumnSorting: !!allowColumnSorting,
+      useFragmentMarkBreakoutWidthStylingFix
     })
   }, children)));
 });

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

@@ -273,6 +273,30 @@ const fullWidthStyles = ({
     }
   `;
 };
+const breakoutWidthStyle = useFragmentMarkBreakoutWidthStylingFix => {
+  if (useFragmentMarkBreakoutWidthStylingFix) {
+    return css`
+      *:not([data-mark-type='fragment'])
+        .${TableSharedCssClassName.TABLE_CONTAINER} {
+        width: 100% !important;
+        left: 0 !important;
+      }
+
+      [data-mark-type='fragment']
+        *
+        .${TableSharedCssClassName.TABLE_CONTAINER} {
+        width: 100% !important;
+        left: 0 !important;
+      }
+    `;
+  }
+  return css`
+    * .${TableSharedCssClassName.TABLE_CONTAINER} {
+      width: 100% !important;
+      left: 0 !important;
+    }
+  `;
+};
 export const rendererStyles = wrapperProps => theme => {
   // This is required to be compatible with styled-components prop structure.
   const themeProps = {
@@ -435,10 +459,7 @@ export const rendererStyles = wrapperProps => theme => {
 
       /* Breakout for tables and extensions */
       .${RendererCssClassName.DOCUMENT} > {
-        * .${TableSharedCssClassName.TABLE_CONTAINER} {
-          width: 100% !important;
-          left: 0 !important;
-        }
+        ${breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix)}
 
         * .${RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER} {
           overflow-x: auto;
@@ -640,17 +661,6 @@ export const rendererStyles = wrapperProps => theme => {
         &:first-child {
           margin-top: 0;
         }
-
-        &:hover button.copy-to-clipboard,
-        .copy-to-clipboard:focus {
-          opacity: 1;
-          position: absolute;
-          height: 32px;
-          width: 32px;
-          right: 6px;
-          top: 4px;
-          padding: 2px;
-        }
       }
 
       ${getLightWeightCodeBlockStylesForRootRendererStyleSheet()}
@@ -667,6 +677,15 @@ export const rendererStyles = wrapperProps => theme => {
             margin-left: 0;
           }
         }
+
+        & .MediaGroup,
+        & .code-block {
+          margin-top: ${blockNodesVerticalMargin};
+
+          &:first-child {
+            margin-top: 0;
+          }
+        }
       }
 
       & li {

package/dist/es2019/version.json

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

package/dist/esm/analytics/enums.js

@@ -1 +1,55 @@
-export {};
+export var EVENT_TYPE;
+(function (EVENT_TYPE) {
+  EVENT_TYPE["OPERATIONAL"] = "operational";
+  EVENT_TYPE["SCREEN"] = "screen";
+  EVENT_TYPE["TRACK"] = "track";
+  EVENT_TYPE["UI"] = "ui";
+})(EVENT_TYPE || (EVENT_TYPE = {}));
+export var ACTION;
+(function (ACTION) {
+  ACTION["STARTED"] = "started";
+  ACTION["RENDERED"] = "rendered";
+  ACTION["RE_RENDERED"] = "reRendered";
+  ACTION["RENDERER_TTI"] = "tti";
+  ACTION["CRASHED"] = "unhandledErrorCaught";
+  ACTION["INVALID_PROSEMIRROR_DOCUMENT"] = "invalidProsemirrorDocument";
+  ACTION["SELECT_ALL_CAUGHT"] = "selectAllCaught";
+  ACTION["SELECT_ALL_ESCAPED"] = "selectAllEscaped";
+  ACTION["CLICKED"] = "clicked";
+  ACTION["VIEWED"] = "viewed";
+  ACTION["VISITED"] = "visited";
+  ACTION["SORT_COLUMN"] = "sortedColumn";
+  ACTION["SORT_COLUMN_NOT_ALLOWED"] = "sortColumnNotAllowed";
+  ACTION["TOGGLE_EXPAND"] = "toggleExpand";
+  ACTION["INSERTED"] = "inserted";
+  ACTION["OPENED"] = "opened";
+  ACTION["CLOSED"] = "closed";
+  ACTION["DELETED"] = "deleted";
+  ACTION["EDITED"] = "edited";
+  ACTION["RESOLVED"] = "resolved";
+  ACTION["CREATE_NOT_ALLOWED"] = "createNotAllowed";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_SUCCEEDED"] = "unsupportedContentLevelsTrackingSucceeded";
+  ACTION["UNSUPPORTED_CONTENT_LEVELS_TRACKING_ERRORED"] = "unsupportedContentLevelsTrackingErrored";
+  ACTION["MEDIA_LINK_TRANSFORMED"] = "mediaLinkTransformed";
+})(ACTION || (ACTION = {}));
+export var ACTION_SUBJECT;
+(function (ACTION_SUBJECT) {
+  ACTION_SUBJECT["RENDERER"] = "renderer";
+  ACTION_SUBJECT["BUTTON"] = "button";
+  ACTION_SUBJECT["ANCHOR_LINK"] = "anchorLink";
+  ACTION_SUBJECT["TABLE"] = "table";
+  ACTION_SUBJECT["EXPAND"] = "expand";
+  ACTION_SUBJECT["NESTED_EXPAND"] = "nestedExpand";
+  ACTION_SUBJECT["MEDIA_SINGLE"] = "mediaSingle";
+  ACTION_SUBJECT["LINK"] = "link";
+  ACTION_SUBJECT["ANNOTATION"] = "annotation";
+  ACTION_SUBJECT["MEDIA"] = "media";
+})(ACTION_SUBJECT || (ACTION_SUBJECT = {}));
+export var ACTION_SUBJECT_ID;
+(function (ACTION_SUBJECT_ID) {
+  ACTION_SUBJECT_ID["HEADING_ANCHOR_LINK"] = "headingAnchorLink";
+  ACTION_SUBJECT_ID["LINK"] = "link";
+  ACTION_SUBJECT_ID["INLINE_COMMENT"] = "inlineComment";
+  ACTION_SUBJECT_ID["CODEBLOCK_COPY"] = "codeBlockCopy";
+  ACTION_SUBJECT_ID["CODEBLOCK_WRAP"] = "codeBlockWrap";
+})(ACTION_SUBJECT_ID || (ACTION_SUBJECT_ID = {}));

package/dist/esm/react/index.js

@@ -46,6 +46,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     _defineProperty(this, "headingIds", []);
     _defineProperty(this, "expandHeadingIds", []);
     _defineProperty(this, "allowCopyToClipboard", false);
+    _defineProperty(this, "allowWrapCodeBlock", false);
     _defineProperty(this, "allowPlaceholderText", true);
     _defineProperty(this, "allowCustomPanels", false);
     _defineProperty(this, "startPos", 1);
@@ -151,6 +152,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     this.disableActions = init.disableActions;
     this.allowHeadingAnchorLinks = init.allowHeadingAnchorLinks;
     this.allowCopyToClipboard = init.allowCopyToClipboard;
+    this.allowWrapCodeBlock = init.allowWrapCodeBlock;
     this.allowPlaceholderText = init.allowPlaceholderText;
     this.allowCustomPanels = init.allowCustomPanels;
     this.allowColumnSorting = init.allowColumnSorting;
@@ -379,15 +381,21 @@ var ReactSerializer = /*#__PURE__*/function () {
       var _this6 = this,
         _this$media;
       var path = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-      var link = node.type.schema.marks.link;
+      var _node$type$schema$mar = node.type.schema.marks,
+        link = _node$type$schema$mar.link,
+        border = _node$type$schema$mar.border;
       var isLinkMark = function isLinkMark(mark) {
         return mark.type === link;
       };
+      var isBorderMark = function isBorderMark(mark) {
+        return mark.type === border;
+      };
       return _objectSpread(_objectSpread({}, this.getProps(node)), {}, {
         marks: node.marks.filter(function (m) {
           return !isLinkMark(m) || _this6.allowMediaLinking === true;
         }),
         isLinkMark: isLinkMark,
+        isBorderMark: isBorderMark,
         allowAltTextOnImages: this.allowAltTextOnImages,
         featureFlags: this.media && this.media.featureFlags,
         shouldOpenMediaViewer: this.shouldOpenMediaViewer,
@@ -496,6 +504,7 @@ var ReactSerializer = /*#__PURE__*/function () {
         content: node.content ? node.content.toJSON() : undefined,
         allowHeadingAnchorLinks: this.allowHeadingAnchorLinks,
         allowCopyToClipboard: this.allowCopyToClipboard,
+        allowWrapCodeBlock: this.allowWrapCodeBlock,
         allowPlaceholderText: this.allowPlaceholderText,
         rendererAppearance: this.appearance,
         fireAnalyticsEvent: this.fireAnalyticsEvent,

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

@@ -1,4 +1,6 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
+import { useState } from 'react';
 import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
@@ -10,18 +12,28 @@ function CodeBlock(props) {
     language = props.language,
     _props$allowCopyToCli = props.allowCopyToClipboard,
     allowCopyToClipboard = _props$allowCopyToCli === void 0 ? false : _props$allowCopyToCli,
+    _props$allowWrapCodeB = props.allowWrapCodeBlock,
+    allowWrapCodeBlock = _props$allowWrapCodeB === void 0 ? false : _props$allowWrapCodeB,
     codeBidiWarningTooltipEnabled = props.codeBidiWarningTooltipEnabled;
   var codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   var className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    wrapLongLines = _useState2[0],
+    setWrapLongLines = _useState2[1];
   return jsx(CodeBlockContainer, {
-    text: text,
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
-    allowCopyToClipboard: allowCopyToClipboard
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
   }, jsx(AkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    shouldWrapLongLines: allowWrapCodeBlock && wrapLongLines
   }));
 }
 export default injectIntl(CodeBlock);

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

@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import { jsx, css } from '@emotion/react';
+import CopyButton from './codeBlockCopyButton';
+import CodeWrapButton from './codeBlockWrapButton';
+import { N0, N20, N30, N700 } from '@atlaskit/theme/colors';
+var codeBlockButtonsWrapper = css({
+  position: 'sticky',
+  top: '0px'
+});
+var codeBlockButtonsStyle = css({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  position: 'absolute',
+  height: '0',
+  width: '100%',
+  right: '6px',
+  top: '4px',
+  padding: '2px',
+  button: {
+    height: '32px',
+    width: '32px',
+    border: "2px solid ".concat("var(--ds-border-inverse, ".concat(N0, ")")),
+    borderRadius: '4px',
+    marginLeft: '4px',
+    padding: '2px',
+    background: "".concat("var(--ds-background-neutral-subtle, ".concat(N20, ")")),
+    color: "var(--ds-icon, rgb(66, 82, 110))",
+    '&:hover': {
+      borderWidth: '2px',
+      backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(N30, ")")),
+      height: '32px',
+      width: '32px'
+    },
+    '&.clicked': {
+      backgroundColor: "".concat("var(--ds-background-neutral-bold-pressed, ".concat(N700, ")")),
+      borderRadius: '4px',
+      color: "".concat("var(--ds-icon-inverse, ".concat(N0, ")"), " !important")
+    }
+  }
+});
+var CodeBlockButtonContainer = function CodeBlockButtonContainer(_ref) {
+  var allowCopyToClipboard = _ref.allowCopyToClipboard,
+    allowWrapCodeBlock = _ref.allowWrapCodeBlock,
+    setWrapLongLines = _ref.setWrapLongLines,
+    text = _ref.text,
+    wrapLongLines = _ref.wrapLongLines;
+  return jsx("div", {
+    css: codeBlockButtonsWrapper
+  }, jsx("div", {
+    css: codeBlockButtonsStyle
+  }, allowWrapCodeBlock && jsx(CodeWrapButton, {
+    setWrapLongLines: setWrapLongLines,
+    wrapLongLines: wrapLongLines
+  }), allowCopyToClipboard && jsx(CopyButton, {
+    content: text
+  })));
+};
+export default CodeBlockButtonContainer;

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

@@ -1,16 +1,15 @@
 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';
+import CodeBlockButtonContainer from './codeBlockButtonContainer';
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), themed({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    tab-size: 4;\n    background-color: ", ";\n\n    &:hover {\n      button {\n        opacity: 1;\n      }\n    }\n\n    button {\n      opacity: 0;\n      transition: opacity 0.2s ease 0s;\n    }\n\n    ", " {\n      font-size: ", ";\n      line-height: 1.5rem;\n      background-image: ", ";\n      background-attachment: local, local, local, local, scroll, scroll, scroll,\n        scroll;\n      background-position: 0 0, 0 0, 100% 0, 100% 0, 100% 0, 100% 0, 0 0, 0 0;\n    }\n  "])), themed({
     light: "var(--ds-surface-raised, ".concat(N20, ")"),
     dark: "var(--ds-surface-raised, ".concat(DN50, ")")
   })(props), CodeBlockSharedCssClassName.DS_CODEBLOCK, relativeFontSizeToBase16(fontSize()), overflowShadow({
@@ -22,15 +21,22 @@ var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
   }));
 };
 var CodeBlockContainer = function CodeBlockContainer(_ref) {
-  var text = _ref.text,
+  var allowCopyToClipboard = _ref.allowCopyToClipboard,
+    allowWrapCodeBlock = _ref.allowWrapCodeBlock,
+    children = _ref.children,
     className = _ref.className,
-    allowCopyToClipboard = _ref.allowCopyToClipboard,
-    children = _ref.children;
+    setWrapLongLines = _ref.setWrapLongLines,
+    text = _ref.text,
+    wrapLongLines = _ref.wrapLongLines;
   return jsx("div", {
     className: className,
     css: codeBlockStyleOverrides
-  }, allowCopyToClipboard ? jsx(CopyButton, {
-    content: text
-  }) : null, children);
+  }, jsx(CodeBlockButtonContainer, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
+  }), children);
 };
 export default CodeBlockContainer;

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

@@ -0,0 +1,59 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React, { useState } from 'react';
+import { injectIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+import CopyIcon from '@atlaskit/icon/glyph/copy';
+import { copyTextToClipboard } from '../../../utils/clipboard';
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../../analytics/enums';
+import AnalyticsContext from '../../../../analytics/analyticsContext';
+var CopyButton = function CopyButton(_ref) {
+  var content = _ref.content,
+    intl = _ref.intl;
+  var _useState = useState(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard)),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltip = _useState2[0],
+    setTooltip = _useState2[1];
+  var _useState3 = useState('copy-to-clipboard'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    className = _useState4[0],
+    setClassName = _useState4[1];
+  var onMouseLeave = function onMouseLeave() {
+    setTooltip(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard));
+    setClassName('copy-to-clipboard');
+  };
+  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
+    var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+    return jsx("span", null, jsx(Tooltip, {
+      content: tooltip,
+      hideTooltipOnClick: false,
+      position: "top"
+    }, jsx("div", {
+      onMouseLeave: onMouseLeave
+    }, jsx(Button, {
+      appearance: "subtle",
+      "aria-haspopup": true,
+      "aria-label": tooltip,
+      className: className,
+      iconBefore: jsx(CopyIcon, {
+        label: tooltip
+      }),
+      onClick: function onClick() {
+        fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.CODEBLOCK_COPY,
+          eventType: EVENT_TYPE.UI
+        });
+        copyTextToClipboard(content);
+        setTooltip(intl.formatMessage(codeBlockButtonMessages.copiedCodeToClipboard));
+        setClassName('copy-to-clipboard clicked');
+      },
+      spacing: "compact"
+    }))));
+  });
+};
+export default injectIntl(CopyButton);

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

@@ -0,0 +1,67 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import Tooltip from '@atlaskit/tooltip';
+import Button from '@atlaskit/button/custom-theme-button';
+import Icon from '@atlaskit/icon';
+import { codeBlockButtonMessages } from '@atlaskit/editor-common/messages';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../../../analytics/enums';
+import AnalyticsContext from '../../../../analytics/analyticsContext';
+var WrapIcon = function WrapIcon() {
+  return jsx("svg", {
+    width: "24",
+    height: "24",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, jsx("g", {
+    fill: "currentColor",
+    clipPath: "url(#clip0_654_431)"
+  }, jsx("rect", {
+    width: "24",
+    height: "24",
+    fillOpacity: "0.01"
+  }), jsx("path", {
+    d: "M20 4h-1v16h1V4ZM3 8a1 1 0 0 1 1-1h9.5a4.5 4.5 0 1 1 0 9h-2.086l.293.293a1 1 0 0 1-1.414 1.414l-2-2a1 1 0 0 1 0-1.414l2-2a1 1 0 0 1 1.414 1.414l-.293.293H13.5a2.5 2.5 0 0 0 0-5H4a1 1 0 0 1-1-1Z",
+    clipRule: "evenodd",
+    fillRule: "evenodd"
+  })));
+};
+var CodeBlockWrapButton = function CodeBlockWrapButton(_ref) {
+  var setWrapLongLines = _ref.setWrapLongLines,
+    wrapLongLines = _ref.wrapLongLines,
+    intl = _ref.intl;
+  var wrapMessage = intl.formatMessage(wrapLongLines ? codeBlockButtonMessages.unwrapCode : codeBlockButtonMessages.wrapCode);
+  return jsx(AnalyticsContext.Consumer, null, function (_ref2) {
+    var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+    return jsx("span", null, jsx(Tooltip, {
+      content: wrapMessage,
+      hideTooltipOnClick: false,
+      position: "top"
+    }, jsx(Button, {
+      appearance: "subtle",
+      "aria-haspopup": true,
+      "aria-label": wrapMessage,
+      className: "wrap-code ".concat(wrapLongLines ? 'clicked' : ''),
+      iconBefore: jsx(Icon, {
+        glyph: WrapIcon,
+        label: ""
+      }),
+      isSelected: wrapLongLines,
+      onClick: function onClick() {
+        fireAnalyticsEvent({
+          action: ACTION.CLICKED,
+          actionSubject: ACTION_SUBJECT.BUTTON,
+          actionSubjectId: ACTION_SUBJECT_ID.CODEBLOCK_WRAP,
+          attributes: {
+            wrapped: !wrapLongLines
+          },
+          eventType: EVENT_TYPE.UI
+        });
+        setWrapLongLines(!wrapLongLines);
+      },
+      spacing: "compact"
+    })));
+  });
+};
+export default injectIntl(CodeBlockWrapButton);