@atlaskit/renderer 107.1.0 → 107.3.0

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/react/nodes/tableCell.js

@@ -4,6 +4,8 @@ import React from 'react';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import { compose } from '@atlaskit/editor-common/utils';
 import { SortOrder } from '@atlaskit/editor-common/types';
+import { hexToEditorBackgroundPaletteColorTokenName } from '@atlaskit/editor-palette';
+import { getTokenValue } from '@atlaskit/tokens';
 import SortingIcon from '../../ui/SortingIcon';
 import { MODE, PLATFORM } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
@@ -68,7 +70,10 @@ const getStyle = (background, colGroupWidth, offsetTop) => {
   if (background &&
   // ignore setting inline styles if ds neutral token is detected
   !background.includes('--ds-background-neutral')) {
-    style.backgroundColor = background;
+    const tokenName = hexToEditorBackgroundPaletteColorTokenName(background);
+    // eslint-disable-next-line @atlaskit/design-system/no-unsafe-design-token-usage
+    const tokenColor = tokenName ? getTokenValue(tokenName) : background;
+    style.backgroundColor = tokenColor;
   }
   if (colGroupWidth) {
     style.width = colGroupWidth;

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.1.0";
+const packageVersion = "107.3.0";
 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,6 +270,7 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
+      allowWrapCodeBlock,
       allowCustomPanels
     } = this.props;
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
@@ -341,6 +343,7 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         innerRef: this.editorRef,
@@ -371,6 +374,7 @@ export class Renderer extends PureComponent {
       return jsx(RendererWrapper, {
         appearance: appearance,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,

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

@@ -640,17 +640,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 +656,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.1.0",
+	"version": "107.3.0",
 	"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/blockCard.js

@@ -10,7 +10,10 @@ export default function BlockCard(props) {
     data = props.data,
     eventHandlers = props.eventHandlers,
     portal = props.portal,
-    rendererAppearance = props.rendererAppearance;
+    rendererAppearance = props.rendererAppearance,
+    smartLinks = props.smartLinks;
+  var _ref = smartLinks || {},
+    showServerActions = _ref.showServerActions;
   var onClick = getCardClickHandler(eventHandlers, url);
   var platform = useMemo(function () {
     return getPlatform(rendererAppearance);
@@ -31,6 +34,7 @@ export default function BlockCard(props) {
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
     appearance: "block",
     showActions: rendererAppearance !== 'mobile',
-    platform: platform
+    platform: platform,
+    showServerActions: showServerActions
   }, cardProps))));
 }

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);

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

@@ -1,8 +1,8 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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 { Fragment, lazy, memo, Suspense, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { useInViewport } from '../../hooks/use-in-viewport';
@@ -34,6 +34,8 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
   var text = _ref2.text,
     language = _ref2.language,
     allowCopyToClipboard = _ref2.allowCopyToClipboard,
+    _ref2$allowWrapCodeBl = _ref2.allowWrapCodeBlock,
+    allowWrapCodeBlock = _ref2$allowWrapCodeBl === void 0 ? false : _ref2$allowWrapCodeBl,
     codeBidiWarningTooltipEnabled = _ref2.codeBidiWarningTooltipEnabled,
     rootClassName = _ref2.className;
   var _useBidiWarnings = useBidiWarnings({
@@ -50,17 +52,25 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     className: rootClassName
   });
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    wrapLongLines = _useState2[0],
+    setWrapLongLines = _useState2[1];
   return isInViewport ? jsx(Fragment, null, jsx(Suspense, {
     fallback: memoizedLightWeightCodeBlock
   }, jsx(CodeBlockContainer, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
+    setWrapLongLines: setWrapLongLines,
     text: text,
-    allowCopyToClipboard: allowCopyToClipboard
+    wrapLongLines: wrapLongLines
   }, jsx(LazyAkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: warningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    shouldWrapLongLines: allowWrapCodeBlock && wrapLongLines
   })))) : memoizedLightWeightCodeBlock;
 };
 export default WindowedCodeBlock;

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

@@ -23,12 +23,14 @@ var InlineCard = function InlineCard(props) {
   var featureFlags = useFeatureFlags();
   var _ref = smartLinks || {},
     showAuthTooltip = _ref.showAuthTooltip,
+    showServerActions = _ref.showServerActions,
     ssr = _ref.ssr;
   if (ssr && url) {
     return /*#__PURE__*/React.createElement(CardSSR, {
       appearance: "inline",
       url: url,
-      showAuthTooltip: showAuthTooltip
+      showAuthTooltip: showAuthTooltip,
+      showServerActions: showServerActions
     });
   }
   return /*#__PURE__*/React.createElement("span", {
@@ -40,7 +42,8 @@ var InlineCard = function InlineCard(props) {
   }, cardProps), /*#__PURE__*/React.createElement(Card, _extends({
     appearance: "inline",
     showHoverPreview: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.showHoverPreview,
-    showAuthTooltip: showAuthTooltip
+    showAuthTooltip: showAuthTooltip,
+    showServerActions: showServerActions
   }, cardProps, {
     onResolve: function onResolve(data) {
       if (!data.url || !data.title) {