@atlaskit/renderer 107.1.0 → 107.3.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/renderer
 
+## 107.3.0
+
+### Minor Changes
+
+- [`4f75910f899`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f75910f899) - [ux] Add code wrapping button to code block TSLA-266
+- [`bf04c417bfd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bf04c417bfd) - Add "border" mark to stage0 ADF schema
+
+### Patch Changes
+
+- [`31717a1fe63`](https://bitbucket.org/atlassian/atlassian-frontend/commits/31717a1fe63) - Fix the bug when clicking on media inline files in Hybrid Renderer, viewer is not opening.
+- Updated dependencies
+
+## 107.2.0
+
+### Minor Changes
+
+- [`0078ddc7e2e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0078ddc7e2e) - New smartLinks prop to allow renderer and editor to determine whether smart link should show actions that can change the link resource.
+
+### Patch Changes
+
+- [`2367ba14aa0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2367ba14aa0) - [ux] ED-16758 Added support for theme tokens in table cell background color.
+- Updated dependencies
+
 ## 107.1.0
 
 ### Minor Changes

package/dist/cjs/analytics/enums.js

@@ -2,4 +2,64 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.EVENT_TYPE = exports.ACTION_SUBJECT_ID = exports.ACTION_SUBJECT = exports.ACTION = void 0;
+var EVENT_TYPE;
+exports.EVENT_TYPE = EVENT_TYPE;
+(function (EVENT_TYPE) {
+  EVENT_TYPE["OPERATIONAL"] = "operational";
+  EVENT_TYPE["SCREEN"] = "screen";
+  EVENT_TYPE["TRACK"] = "track";
+  EVENT_TYPE["UI"] = "ui";
+})(EVENT_TYPE || (exports.EVENT_TYPE = EVENT_TYPE = {}));
+var ACTION;
+exports.ACTION = 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 || (exports.ACTION = ACTION = {}));
+var ACTION_SUBJECT;
+exports.ACTION_SUBJECT = 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 || (exports.ACTION_SUBJECT = ACTION_SUBJECT = {}));
+var ACTION_SUBJECT_ID;
+exports.ACTION_SUBJECT_ID = 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 || (exports.ACTION_SUBJECT_ID = ACTION_SUBJECT_ID = {}));

package/dist/cjs/react/index.js

@@ -53,6 +53,7 @@ var ReactSerializer = /*#__PURE__*/function () {
     (0, _defineProperty2.default)(this, "headingIds", []);
     (0, _defineProperty2.default)(this, "expandHeadingIds", []);
     (0, _defineProperty2.default)(this, "allowCopyToClipboard", false);
+    (0, _defineProperty2.default)(this, "allowWrapCodeBlock", false);
     (0, _defineProperty2.default)(this, "allowPlaceholderText", true);
     (0, _defineProperty2.default)(this, "allowCustomPanels", false);
     (0, _defineProperty2.default)(this, "startPos", 1);
@@ -158,6 +159,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;
@@ -386,15 +388,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,
@@ -503,6 +511,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/cjs/react/nodes/blockCard.js

@@ -20,7 +20,10 @@ 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 = (0, _getCardClickHandler.getCardClickHandler)(eventHandlers, url);
   var platform = (0, _react.useMemo)(function () {
     return (0, _utils.getPlatform)(rendererAppearance);
@@ -41,6 +44,7 @@ function BlockCard(props) {
   }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
     appearance: "block",
     showActions: rendererAppearance !== 'mobile',
-    platform: platform
+    platform: platform,
+    showServerActions: showServerActions
   }, cardProps))));
 }

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

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _styles = require("@atlaskit/editor-common/styles");
 var _code = require("@atlaskit/code");
@@ -18,18 +20,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(_messages.codeBidiWarningMessages.label);
   var className = [_styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
-  return (0, _react.jsx)(_codeBlockContainer.default, {
-    text: text,
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    wrapLongLines = _useState2[0],
+    setWrapLongLines = _useState2[1];
+  return (0, _react2.jsx)(_codeBlockContainer.default, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
-    allowCopyToClipboard: allowCopyToClipboard
-  }, (0, _react.jsx)(_code.CodeBlock, {
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
+  }, (0, _react2.jsx)(_code.CodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: codeBidiWarningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    shouldWrapLongLines: allowWrapCodeBlock && wrapLongLines
   }));
 }
 var _default = (0, _reactIntlNext.injectIntl)(CodeBlock);

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

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _codeBlockCopyButton = _interopRequireDefault(require("./codeBlockCopyButton"));
+var _codeBlockWrapButton = _interopRequireDefault(require("./codeBlockWrapButton"));
+var _colors = require("@atlaskit/theme/colors");
+/** @jsx jsx */
+
+var codeBlockButtonsWrapper = (0, _react.css)({
+  position: 'sticky',
+  top: '0px'
+});
+var codeBlockButtonsStyle = (0, _react.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(_colors.N0, ")")),
+    borderRadius: '4px',
+    marginLeft: '4px',
+    padding: '2px',
+    background: "".concat("var(--ds-background-neutral-subtle, ".concat(_colors.N20, ")")),
+    color: "var(--ds-icon, rgb(66, 82, 110))",
+    '&:hover': {
+      borderWidth: '2px',
+      backgroundColor: "".concat("var(--ds-background-neutral-hovered, ".concat(_colors.N30, ")")),
+      height: '32px',
+      width: '32px'
+    },
+    '&.clicked': {
+      backgroundColor: "".concat("var(--ds-background-neutral-bold-pressed, ".concat(_colors.N700, ")")),
+      borderRadius: '4px',
+      color: "".concat("var(--ds-icon-inverse, ".concat(_colors.N0, ")"), " !important")
+    }
+  }
+});
+var CodeBlockButtonContainer = function CodeBlockButtonContainer(_ref) {
+  var allowCopyToClipboard = _ref.allowCopyToClipboard,
+    allowWrapCodeBlock = _ref.allowWrapCodeBlock,
+    setWrapLongLines = _ref.setWrapLongLines,
+    text = _ref.text,
+    wrapLongLines = _ref.wrapLongLines;
+  return (0, _react.jsx)("div", {
+    css: codeBlockButtonsWrapper
+  }, (0, _react.jsx)("div", {
+    css: codeBlockButtonsStyle
+  }, allowWrapCodeBlock && (0, _react.jsx)(_codeBlockWrapButton.default, {
+    setWrapLongLines: setWrapLongLines,
+    wrapLongLines: wrapLongLines
+  }), allowCopyToClipboard && (0, _react.jsx)(_codeBlockCopyButton.default, {
+    content: text
+  })));
+};
+var _default = CodeBlockButtonContainer;
+exports.default = _default;

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

@@ -12,10 +12,10 @@ var _colors = require("@atlaskit/theme/colors");
 var _components = require("@atlaskit/theme/components");
 var _constants = require("@atlaskit/theme/constants");
 var _styles = require("@atlaskit/editor-common/styles");
-var _codeBlockCopyButton = _interopRequireDefault(require("../../codeBlockCopyButton"));
+var _codeBlockButtonContainer = _interopRequireDefault(require("./codeBlockButtonContainer"));
 var _templateObject;
 var codeBlockStyleOverrides = function codeBlockStyleOverrides(props) {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _components.themed)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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  "])), (0, _components.themed)({
     light: "var(--ds-surface-raised, ".concat(_colors.N20, ")"),
     dark: "var(--ds-surface-raised, ".concat(_colors.DN50, ")")
   })(props), _styles.CodeBlockSharedCssClassName.DS_CODEBLOCK, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _editorSharedStyles.overflowShadow)({
@@ -27,16 +27,23 @@ 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 (0, _react.jsx)("div", {
     className: className,
     css: codeBlockStyleOverrides
-  }, allowCopyToClipboard ? (0, _react.jsx)(_codeBlockCopyButton.default, {
-    content: text
-  }) : null, children);
+  }, (0, _react.jsx)(_codeBlockButtonContainer.default, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
+    setWrapLongLines: setWrapLongLines,
+    text: text,
+    wrapLongLines: wrapLongLines
+  }), children);
 };
 var _default = CodeBlockContainer;
 exports.default = _default;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _copy = _interopRequireDefault(require("@atlaskit/icon/glyph/copy"));
+var _clipboard = require("../../../utils/clipboard");
+var _messages = require("@atlaskit/editor-common/messages");
+var _enums = require("../../../../analytics/enums");
+var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+var CopyButton = function CopyButton(_ref) {
+  var content = _ref.content,
+    intl = _ref.intl;
+  var _useState = (0, _react2.useState)(intl.formatMessage(_messages.codeBlockButtonMessages.copyCodeToClipboard)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tooltip = _useState2[0],
+    setTooltip = _useState2[1];
+  var _useState3 = (0, _react2.useState)('copy-to-clipboard'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    className = _useState4[0],
+    setClassName = _useState4[1];
+  var onMouseLeave = function onMouseLeave() {
+    setTooltip(intl.formatMessage(_messages.codeBlockButtonMessages.copyCodeToClipboard));
+    setClassName('copy-to-clipboard');
+  };
+  return (0, _react.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
+    var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+    return (0, _react.jsx)("span", null, (0, _react.jsx)(_tooltip.default, {
+      content: tooltip,
+      hideTooltipOnClick: false,
+      position: "top"
+    }, (0, _react.jsx)("div", {
+      onMouseLeave: onMouseLeave
+    }, (0, _react.jsx)(_customThemeButton.default, {
+      appearance: "subtle",
+      "aria-haspopup": true,
+      "aria-label": tooltip,
+      className: className,
+      iconBefore: (0, _react.jsx)(_copy.default, {
+        label: tooltip
+      }),
+      onClick: function onClick() {
+        fireAnalyticsEvent({
+          action: _enums.ACTION.CLICKED,
+          actionSubject: _enums.ACTION_SUBJECT.BUTTON,
+          actionSubjectId: _enums.ACTION_SUBJECT_ID.CODEBLOCK_COPY,
+          eventType: _enums.EVENT_TYPE.UI
+        });
+        (0, _clipboard.copyTextToClipboard)(content);
+        setTooltip(intl.formatMessage(_messages.codeBlockButtonMessages.copiedCodeToClipboard));
+        setClassName('copy-to-clipboard clicked');
+      },
+      spacing: "compact"
+    }))));
+  });
+};
+var _default = (0, _reactIntlNext.injectIntl)(CopyButton);
+exports.default = _default;

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

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("@emotion/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _icon = _interopRequireDefault(require("@atlaskit/icon"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _enums = require("../../../../analytics/enums");
+var _analyticsContext = _interopRequireDefault(require("../../../../analytics/analyticsContext"));
+/** @jsx jsx */
+
+var WrapIcon = function WrapIcon() {
+  return (0, _react.jsx)("svg", {
+    width: "24",
+    height: "24",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, (0, _react.jsx)("g", {
+    fill: "currentColor",
+    clipPath: "url(#clip0_654_431)"
+  }, (0, _react.jsx)("rect", {
+    width: "24",
+    height: "24",
+    fillOpacity: "0.01"
+  }), (0, _react.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 ? _messages.codeBlockButtonMessages.unwrapCode : _messages.codeBlockButtonMessages.wrapCode);
+  return (0, _react.jsx)(_analyticsContext.default.Consumer, null, function (_ref2) {
+    var fireAnalyticsEvent = _ref2.fireAnalyticsEvent;
+    return (0, _react.jsx)("span", null, (0, _react.jsx)(_tooltip.default, {
+      content: wrapMessage,
+      hideTooltipOnClick: false,
+      position: "top"
+    }, (0, _react.jsx)(_customThemeButton.default, {
+      appearance: "subtle",
+      "aria-haspopup": true,
+      "aria-label": wrapMessage,
+      className: "wrap-code ".concat(wrapLongLines ? 'clicked' : ''),
+      iconBefore: (0, _react.jsx)(_icon.default, {
+        glyph: WrapIcon,
+        label: ""
+      }),
+      isSelected: wrapLongLines,
+      onClick: function onClick() {
+        fireAnalyticsEvent({
+          action: _enums.ACTION.CLICKED,
+          actionSubject: _enums.ACTION_SUBJECT.BUTTON,
+          actionSubjectId: _enums.ACTION_SUBJECT_ID.CODEBLOCK_WRAP,
+          attributes: {
+            wrapped: !wrapLongLines
+          },
+          eventType: _enums.EVENT_TYPE.UI
+        });
+        setWrapLongLines(!wrapLongLines);
+      },
+      spacing: "compact"
+    })));
+  });
+};
+var _default = (0, _reactIntlNext.injectIntl)(CodeBlockWrapButton);
+exports.default = _default;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -43,6 +44,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 = (0, _useBidiWarnings2.useBidiWarnings)({
@@ -59,17 +62,25 @@ var WindowedCodeBlock = function WindowedCodeBlock(_ref2) {
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     className: rootClassName
   });
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    wrapLongLines = _useState2[0],
+    setWrapLongLines = _useState2[1];
   return isInViewport ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_react.Suspense, {
     fallback: memoizedLightWeightCodeBlock
   }, (0, _react2.jsx)(_codeBlockContainer.default, {
+    allowCopyToClipboard: allowCopyToClipboard,
+    allowWrapCodeBlock: allowWrapCodeBlock,
     className: className,
+    setWrapLongLines: setWrapLongLines,
     text: text,
-    allowCopyToClipboard: allowCopyToClipboard
+    wrapLongLines: wrapLongLines
   }, (0, _react2.jsx)(LazyAkCodeBlock, {
     language: language,
     text: text,
     codeBidiWarningLabel: warningLabel,
-    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled
+    codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
+    shouldWrapLongLines: allowWrapCodeBlock && wrapLongLines
   })))) : memoizedLightWeightCodeBlock;
 };
 var _default = WindowedCodeBlock;

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

@@ -30,12 +30,14 @@ var InlineCard = function InlineCard(props) {
   var featureFlags = (0, _useFeatureFlags.useFeatureFlags)();
   var _ref = smartLinks || {},
     showAuthTooltip = _ref.showAuthTooltip,
+    showServerActions = _ref.showServerActions,
     ssr = _ref.ssr;
   if (ssr && url) {
     return /*#__PURE__*/_react.default.createElement(_ssr.CardSSR, {
       appearance: "inline",
       url: url,
-      showAuthTooltip: showAuthTooltip
+      showAuthTooltip: showAuthTooltip,
+      showServerActions: showServerActions
     });
   }
   return /*#__PURE__*/_react.default.createElement("span", {
@@ -47,7 +49,8 @@ var InlineCard = function InlineCard(props) {
   }, cardProps), /*#__PURE__*/_react.default.createElement(_smartCard.Card, (0, _extends2.default)({
     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) {

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

@@ -19,6 +19,7 @@ var _react2 = require("@emotion/react");
 var _providerFactory = require("@atlaskit/editor-common/provider-factory");
 var _ui = require("@atlaskit/editor-common/ui");
 var _MediaCard = require("../../ui/MediaCard");
+var _editorPalette = require("@atlaskit/editor-palette");
 var _utils = require("../../utils");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _events = require("../../analytics/events");
@@ -37,6 +38,7 @@ var Media = /*#__PURE__*/function (_PureComponent) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_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;
@@ -47,6 +49,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;
@@ -62,13 +67,25 @@ var Media = /*#__PURE__*/function (_PureComponent) {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
+      var paletteColorValue = (0, _editorPalette.hexToEditorBorderPaletteColor)(borderColor) || borderColor;
+      var mediaComponentWithBorder = borderMark ? (0, _react2.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 ? (0, _react2.jsx)("a", {
         href: linkHref,
         rel: "noreferrer noopener",
         onClick: _this.handleMediaLinkClick,
         "data-block-link": linkHref,
         css: _ui.mediaLinkStyle
-      }, mediaComponent) : mediaComponent;
+      }, mediaComponentWithBorder) : mediaComponentWithBorder;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMediaLinkClick", function (event) {
       var _this$props2 = _this.props,

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

@@ -19,7 +19,8 @@ var _reactIntlNext = require("react-intl-next");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var RenderMediaInline = function RenderMediaInline(props) {
-  var mediaProvider = props.mediaProvider;
+  var mediaProvider = props.mediaProvider,
+    rendererAppearance = props.rendererAppearance;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     viewMediaClientConfigState = _useState2[0],
@@ -65,9 +66,20 @@ 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.default.createElement(_mediaCard.MediaInlineCard, {
     identifier: props.identifier,
-    shouldOpenMediaViewer: true,
+    onClick: handleMediaInlineClick,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
   });
 };
@@ -76,7 +88,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',
@@ -102,7 +115,9 @@ var MediaInline = function MediaInline(props) {
       }
       return /*#__PURE__*/_react.default.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider
+        mediaProvider: mediaProvider,
+        eventHandlers: props.eventHandlers,
+        rendererAppearance: rendererAppearance
       });
     }
   }));