@atlaskit/renderer 107.2.0 → 107.3.0

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.2.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/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/media.js

@@ -15,6 +15,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';
@@ -29,6 +30,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "renderCard", function () {
+      var _borderMark$attrs$col, _borderMark$attrs$siz;
       var providers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var mediaProvider = providers.mediaProvider,
         contextIdentifierProvider = providers.contextIdentifierProvider;
@@ -39,6 +41,9 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         allowMediaViewer = _this$props.shouldOpenMediaViewer,
         enableDownloadButton = _this$props.enableDownloadButton,
         ssr = _this$props.ssr;
+      var borderMark = _this.props.marks.find(_this.props.isBorderMark);
+      var borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+      var borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       var linkMark = _this.props.marks.find(_this.props.isLinkMark);
       var linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       var eventHandlers = linkHref ? undefined : _this.props.eventHandlers;
@@ -54,13 +59,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
+      var paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+      var mediaComponentWithBorder = borderMark ? jsx("div", {
+        "data-mark-type": "border",
+        "data-color": borderColor,
+        "data-size": borderWidth,
+        style: {
+          borderColor: paletteColorValue,
+          borderWidth: "".concat(borderWidth, "px"),
+          borderStyle: 'solid',
+          borderRadius: "".concat(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(_assertThisInitialized(_this), "handleMediaLinkClick", function (event) {
       var _this$props2 = _this.props,

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

@@ -9,7 +9,8 @@ import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { getClipboardAttrs } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 export var RenderMediaInline = function RenderMediaInline(props) {
-  var mediaProvider = props.mediaProvider;
+  var mediaProvider = props.mediaProvider,
+    rendererAppearance = props.rendererAppearance;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     viewMediaClientConfigState = _useState2[0],
@@ -55,9 +56,20 @@ export var RenderMediaInline = function RenderMediaInline(props) {
       isSelected: false
     });
   }
+  var handleMediaInlineClick = function 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);
+    }
+  };
+  var shouldOpenMediaViewer = rendererAppearance !== 'mobile';
+  var shouldDisplayToolTip = rendererAppearance !== 'mobile';
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: props.identifier,
-    shouldOpenMediaViewer: true,
+    onClick: handleMediaInlineClick,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
   });
 };
@@ -65,7 +77,8 @@ var MediaInline = function MediaInline(props) {
   var collection = props.collection,
     id = props.id,
     providers = props.providers,
-    intl = props.intl;
+    intl = props.intl,
+    rendererAppearance = props.rendererAppearance;
   var identifier = {
     id: id,
     mediaItemType: 'file',
@@ -91,7 +104,9 @@ var MediaInline = function MediaInline(props) {
       }
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider
+        mediaProvider: mediaProvider,
+        eventHandlers: props.eventHandlers,
+        rendererAppearance: rendererAppearance
       });
     }
   }));

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

@@ -45,7 +45,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "107.2.0";
+var packageVersion = "107.3.0";
 export var Renderer = /*#__PURE__*/function (_PureComponent) {
   _inherits(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -257,6 +257,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         emojiResourceConfig: props.emojiResourceConfig,
         smartLinks: props.smartLinks,
         allowCopyToClipboard: props.allowCopyToClipboard,
+        allowWrapCodeBlock: props.allowWrapCodeBlock,
         allowCustomPanels: props.allowCustomPanels,
         allowAnnotations: props.allowAnnotations,
         allowSelectAllTrap: props.allowSelectAllTrap,
@@ -284,6 +285,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         allowPlaceholderText = _this$props.allowPlaceholderText,
         allowColumnSorting = _this$props.allowColumnSorting,
         allowCopyToClipboard = _this$props.allowCopyToClipboard,
+        allowWrapCodeBlock = _this$props.allowWrapCodeBlock,
         allowCustomPanels = _this$props.allowCustomPanels;
       var allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
       /**
@@ -356,6 +358,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
           allowNestedHeaderLinks: allowNestedHeaderLinks,
           allowColumnSorting: allowColumnSorting,
           allowCopyToClipboard: allowCopyToClipboard,
+          allowWrapCodeBlock: allowWrapCodeBlock,
           allowCustomPanels: allowCustomPanels,
           allowPlaceholderText: allowPlaceholderText,
           innerRef: this.editorRef,
@@ -386,6 +389,7 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         return jsx(RendererWrapper, {
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
+          allowWrapCodeBlock: allowWrapCodeBlock,
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,