@atlaskit/renderer 107.2.0 → 107.3.1

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

@@ -55,7 +55,7 @@ exports.NORMAL_SEVERITY_THRESHOLD = NORMAL_SEVERITY_THRESHOLD;
 var DEGRADED_SEVERITY_THRESHOLD = 3000;
 exports.DEGRADED_SEVERITY_THRESHOLD = DEGRADED_SEVERITY_THRESHOLD;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "107.2.0";
+var packageVersion = "107.3.1";
 var Renderer = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(Renderer, _PureComponent);
   var _super = _createSuper(Renderer);
@@ -267,6 +267,7 @@ 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,
@@ -294,7 +295,9 @@ 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 featureFlags = this.featureFlags(this.props.featureFlags);
       var allowNestedHeaderLinks = (0, _links.isNestedHeaderLinksEnabled)(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -342,7 +345,7 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         }
       };
       try {
-        var _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
+        var _featureFlags$feature, _this$featureFlags2, _this$featureFlags2$f, _this$featureFlags2$f2;
         var schema = this.getSchema(this.props.schema, this.props.adfStage);
         var _renderDocument = (0, _.renderDocument)(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -366,8 +369,10 @@ var Renderer = /*#__PURE__*/function (_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
@@ -390,15 +395,18 @@ var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return (0, _react2.jsx)(_react.Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
+        var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
         return (0, _react2.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
         }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
       }
@@ -451,7 +459,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     appearance = props.appearance,
     children = props.children,
     onClick = props.onClick,
-    onMouseDown = props.onMouseDown;
+    onMouseDown = props.onMouseDown,
+    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix;
   return (0, _react2.jsx)(_ui.WidthProvider, {
     className: "ak-renderer-wrapper"
   }, (0, _react2.jsx)(_ui.BaseTheme, {
@@ -463,7 +472,8 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     css: (0, _style.rendererStyles)({
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting
+      allowColumnSorting: !!allowColumnSorting,
+      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix
     })
   }, children)));
 });

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

@@ -19,7 +19,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _consts = require("../../consts");
 var _headingAnchor = require("../../react/nodes/heading-anchor");
 var _lightWeightCodeBlock = require("../../react/nodes/codeBlock/components/lightWeightCodeBlock");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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 FullPagePadding = 32;
@@ -85,13 +85,19 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   }
   return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    max-width: ", "px;\n    margin: 0 auto;\n\n    .fabric-editor-breakout-mark,\n    .pm-table-container,\n    .ak-renderer-extension {\n      width: 100% !important;\n    }\n  "])), _editorSharedStyles.akEditorFullWidthLayoutWidth);
 };
+var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
+  if (useFragmentMarkBreakoutWidthStylingFix) {
+    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      *:not([data-mark-type='fragment'])\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n\n      [data-mark-type='fragment']\n        *\n        .", " {\n        width: 100% !important;\n        left: 0 !important;\n      }\n    "])), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  }
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), _styles.TableSharedCssClassName.TABLE_CONTAINER);
+};
 var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     // This is required to be compatible with styled-components prop structure.
     var themeProps = {
       theme: theme
     };
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        * .", " {\n          width: 100% !important;\n          left: 0 !important;\n        }\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n\n        &:hover button.copy-to-clipboard,\n        .copy-to-clipboard:focus {\n          opacity: 1;\n          position: absolute;\n          height: 32px;\n          width: 32px;\n          right: 6px;\n          top: 4px;\n          padding: 2px;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
+    return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n      font-size: ", "px;\n      line-height: 1.5rem;\n      color: ", ";\n\n      .", "::after {\n        // we add a clearfix after ak-renderer-document in order to\n        // contain internal floats (such as media images that are \"wrap-left\")\n        // to just the renderer (and not spill outside of it)\n        content: '';\n        visibility: hidden;\n        display: block;\n        height: 0;\n        clear: both;\n      }\n\n      ", "\n      ", "\n\n    & h1 {\n        ", "\n      }\n\n      & h2 {\n        ", "\n      }\n\n      & h3 {\n        ", "\n      }\n\n      & h4 {\n        ", "\n      }\n\n      & h5 {\n        ", "\n      }\n\n      & h6 {\n        ", "\n      }\n\n      & span.akActionMark {\n        color: ", ";\n        text-decoration: none;\n\n        &:hover {\n          color: ", ";\n          text-decoration: underline;\n        }\n\n        &:active {\n          color: ", ";\n        }\n      }\n\n      & span.akActionMark {\n        cursor: pointer;\n      }\n\n      & span[data-placeholder] {\n        color: ", ";\n      }\n\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", ";\n      ", "\n\n      & .UnknownBlock {\n        font-family: ", ";\n        font-size: ", ";\n        font-weight: 400;\n        white-space: pre-wrap;\n        word-wrap: break-word;\n      }\n\n      & span.date-node {\n        background: ", ";\n        border-radius: ", "px;\n        color: ", ";\n        padding: 2px 4px;\n        margin: 0 1px;\n        transition: background 0.3s;\n      }\n\n      & span.date-node-highlighted {\n        background: ", ";\n        color: ", ";\n      }\n\n      & .renderer-image {\n        max-width: 100%;\n        display: block;\n        margin: ", "px 0;\n      }\n\n      .", ".rich-media-wrapped\n        + .", ":not(.rich-media-wrapped) {\n        clear: both;\n      }\n\n      & .code-block,\n      & blockquote,\n      & hr,\n      & > div > div:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped\n        + .rich-media-wrapped\n        + *:not(.rich-media-wrapped),\n      .", ".rich-media-wrapped + div:not(.rich-media-wrapped),\n      .", ".image-align-start,\n        .", ".image-center,\n        .", ".image-align-end {\n        clear: both;\n      }\n\n      & .rich-media-wrapped {\n        & + h1,\n        & + h2,\n        & + h3,\n        & + h4,\n        & + h5,\n        & + h6 {\n          margin-top: 8px;\n        }\n      }\n\n      ", "\n      /* plugin styles */\n    ", " &\n    div[class^='image-wrap-'] + div[class^='image-wrap-'] {\n        margin-left: 0;\n        margin-right: 0;\n      }\n\n      /* Breakout for tables and extensions */\n      .", " > {\n        ", "\n\n        * .", " {\n          overflow-x: auto;\n        }\n\n        & .", ":first-child {\n          margin-top: 0;\n        }\n      }\n\n      .", " {\n        .", " {\n          margin-top: ", ";\n        }\n\n        .", " {\n          margin-left: 50%;\n          transform: translateX(-50%);\n        }\n\n        .", " {\n          overflow-x: auto;\n        }\n\n        .", "\n          .", " {\n          display: flex;\n        }\n      }\n\n      ", "\n\n      .", " .", " {\n        z-index: 0;\n        transition: all 0.1s linear;\n        display: flex; /* needed to avoid position: fixed jumpiness in Chrome */\n\n        /** Shadow overrides */\n        &.", "::after,\n          &.", "::before {\n          top: ", "px;\n          height: calc(100% - ", "px);\n          z-index: ", ";\n        }\n\n        &\n          .", ",\n          &\n          .", " {\n          height: calc(100% - ", "px);\n        }\n\n        /**\n     * A hack for making all the <th /> heights equal in case some have shorter\n     * content than others.\n     *\n     * This is done to make sort buttons fill entire <th />.\n     */\n        table {\n          height: 1px; /* will be ignored */\n          ", ";\n          margin-left: 0;\n          margin-right: 0;\n        }\n\n        table tr:first-of-type {\n          height: 100%;\n\n          td,\n          th {\n            position: relative;\n          }\n        }\n\n        table[data-number-column='true'] {\n          .", " {\n            background-color: ", ";\n            border-right: 1px solid\n              ", ";\n            width: ", "px;\n            text-align: center;\n            color: ", ";\n            font-size: ", ";\n          }\n\n          .fixed .", " {\n            border-right: 0px none;\n          }\n        }\n      }\n\n      tr[data-header-row].fixed {\n        position: fixed !important;\n        display: flex;\n        overflow: hidden;\n        z-index: ", ";\n\n        border-right: 1px solid\n          ", ";\n        border-bottom: 1px solid\n          ", ";\n\n        /* this is to compensate for the table border */\n        transform: translateX(-1px);\n      }\n\n      .sticky > th {\n        z-index: ", ";\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* Make the number column header sticky */\n      .sticky > td {\n        position: sticky !important;\n        top: 0;\n      }\n\n      /* add border for position: sticky\n     and work around background-clip: padding-box\n     bug for FF causing box-shadow bug in Chrome */\n      .sticky th,\n      .sticky td {\n        box-shadow: 0px 1px\n            ", ",\n          0px -0.5px ", ",\n          inset -1px 0px ", ",\n          0px -1px ", ";\n      }\n\n      /* this will remove jumpiness caused in Chrome for sticky headers */\n      .fixed + tr {\n        min-height: 0px;\n      }\n\n      /*\n   * We wrap CodeBlock in a grid to prevent it from overflowing the container of the renderer.\n   * See ED-4159.\n   */\n      & .code-block {\n        max-width: 100%;\n        /* -ms- properties are necessary until MS supports the latest version of the grid spec */\n        /* stylelint-disable value-no-vendor-prefix, declaration-block-no-duplicate-properties */\n        display: -ms-grid;\n        display: grid;\n        -ms-grid-columns: auto 1fr;\n        /* stylelint-enable */\n\n        grid-template-columns: minmax(0, 1fr);\n        position: relative;\n        border-radius: ", "px;\n\n        /*\n     * The overall renderer has word-wrap: break; which causes issues with\n     * code block line numbers in Safari / iOS.\n     */\n        word-wrap: normal;\n\n        & > span {\n          /* stylelint-disable value-no-vendor-prefix */\n          -ms-grid-row: 1;\n          -ms-grid-column: 2;\n          /* stylelint-enable */\n          grid-column: 1;\n        }\n      }\n\n      & .MediaGroup,\n      & .code-block {\n        margin-top: ", ";\n\n        &:first-child {\n          margin-top: 0;\n        }\n      }\n\n      ", "\n\n      ", ";\n      & [data-layout-section] {\n        margin-top: ", "px;\n        & > div + div {\n          margin-left: ", "px;\n        }\n\n        @media screen and (max-width: ", "px) {\n          & > div + div {\n            margin-left: 0;\n          }\n        }\n\n        & .MediaGroup,\n        & .code-block {\n          margin-top: ", ";\n\n          &:first-child {\n            margin-top: 0;\n          }\n        }\n      }\n\n      & li {\n        > .code-block {\n          margin: ", " 0 0 0;\n        }\n        > .code-block:first-child {\n          margin-top: 0;\n        }\n\n        > div:last-of-type.code-block {\n          margin-bottom: ", ";\n        }\n      }\n\n      & :not([data-node-type='decisionList']) > li {\n        ", "\n      }\n    "])), (0, _editorSharedStyles.editorFontSize)(themeProps), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), _consts.RendererCssClassName.DOCUMENT, fullPageStyles(wrapperProps, themeProps), fullWidthStyles(wrapperProps), headingAnchorStyle('h1'), headingAnchorStyle('h2'), headingAnchorStyle('h3'), headingAnchorStyle('h4'), headingAnchorStyle('h5'), headingAnchorStyle('h6'), "var(--ds-link, ".concat(colors.B400, ")"), "var(--ds-link, ".concat(colors.B300, ")"), "var(--ds-link-pressed, ".concat(colors.B500, ")"), colors.placeholderText(themeProps), _styles.whitespaceSharedStyles, _styles.blockquoteSharedStyles, (0, _styles.headingsSharedStyles)(themeProps), (0, _styles.ruleSharedStyles)(themeProps), _styles.paragraphSharedStyles, _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.blockMarksSharedStyles, (0, _styles.codeMarkSharedStyles)(themeProps), _styles.shadowSharedStyle, _styles.dateSharedStyle, _styles.textColorStyles, _styles.tasksAndDecisionsStyles, _styles.smartCardSharedStyles, (0, _constants.fontFamily)(), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), (0, _components.themed)({
@@ -100,7 +106,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _constants.borderRadius)(), (0, _components.themed)({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, ".concat(colors.DN600, ")")
-    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), (0, _constants.gridSize)() * 3, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, _styles.richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), _styles.mediaSingleSharedStyle, _consts.RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), _consts.RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, _consts.RendererCssClassName.EXTENSION, _consts.RendererCssClassName.DOCUMENT, _consts.RendererCssClassName.EXTENSION, _editorSharedStyles.blockNodesVerticalMargin, _consts.RendererCssClassName.EXTENSION_CENTER_ALIGN, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, _ui.shadowObserverClassNames.SHADOW_CONTAINER, _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER, (0, _styles.tableSharedStyle)(themeProps), _consts.RendererCssClassName.DOCUMENT, _styles.TableSharedCssClassName.TABLE_CONTAINER, _ui.shadowClassNames.RIGHT_SHADOW, _ui.shadowClassNames.LEFT_SHADOW, _styles.tableMarginTop - 1, _styles.tableMarginTop, _editorSharedStyles.akEditorStickyHeaderZIndex, _ui.shadowObserverClassNames.SENTINEL_LEFT, _ui.shadowObserverClassNames.SENTINEL_RIGHT, _styles.tableMarginTop, tableSortableColumnStyle(wrapperProps), _consts.RendererCssClassName.NUMBER_COLUMN, (0, _components.themed)({
       light: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
     })(themeProps), (0, _components.themed)({
@@ -127,7 +133,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), (0, _components.themed)({
       light: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbar, ")"),
       dark: "var(--ds-border, ".concat(_editorSharedStyles.akEditorTableToolbarDark, ")")
-    })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
+    })(themeProps), (0, _constants.borderRadius)(), _editorSharedStyles.blockNodesVerticalMargin, (0, _lightWeightCodeBlock.getLightWeightCodeBlockStylesForRootRendererStyleSheet)(), _styles.columnLayoutSharedStyle, (0, _constants.gridSize)() * 2.5, (0, _constants.gridSize)() * 4, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.blockNodesVerticalMargin, _utils.browser.safari ? _styles.codeBlockInListSafariFix : '');
   };
 };
 exports.rendererStyles = rendererStyles;

package/dist/cjs/version.json

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

package/dist/es2019/analytics/enums.js

@@ -1 +1,55 @@
-export {};
+export let 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 let 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 let 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 let 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/es2019/react/index.js

@@ -37,6 +37,7 @@ export default class ReactSerializer {
     _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);
@@ -145,6 +146,7 @@ export default class ReactSerializer {
     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;
@@ -336,14 +338,17 @@ export default class ReactSerializer {
     var _this$media;
     const {
       marks: {
-        link
+        link,
+        border
       }
     } = node.type.schema;
     const isLinkMark = mark => mark.type === link;
+    const isBorderMark = mark => mark.type === border;
     return {
       ...this.getProps(node),
       marks: node.marks.filter(m => !isLinkMark(m) || this.allowMediaLinking === true),
       isLinkMark,
+      isBorderMark,
       allowAltTextOnImages: this.allowAltTextOnImages,
       featureFlags: this.media && this.media.featureFlags,
       shouldOpenMediaViewer: this.shouldOpenMediaViewer,
@@ -436,6 +441,7 @@ export default class ReactSerializer {
       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/es2019/react/nodes/codeBlock/codeBlock.js

@@ -1,4 +1,5 @@
 /** @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,19 +11,25 @@ function CodeBlock(props) {
     text,
     language,
     allowCopyToClipboard = false,
+    allowWrapCodeBlock = false,
     codeBidiWarningTooltipEnabled
   } = props;
   const codeBidiWarningLabel = props.intl.formatMessage(codeBidiWarningMessages.label);
   const className = [CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, props.className].join(' ');
+  const [wrapLongLines, setWrapLongLines] = useState(false);
   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/es2019/react/nodes/codeBlock/components/codeBlockButtonContainer.js

@@ -0,0 +1,59 @@
+/** @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';
+const codeBlockButtonsWrapper = css({
+  position: 'sticky',
+  top: '0px'
+});
+const 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 ${`var(--ds-border-inverse, ${N0})`}`,
+    borderRadius: '4px',
+    marginLeft: '4px',
+    padding: '2px',
+    background: `${`var(--ds-background-neutral-subtle, ${N20})`}`,
+    color: `${"var(--ds-icon, rgb(66, 82, 110))"}`,
+    '&:hover': {
+      borderWidth: '2px',
+      backgroundColor: `${`var(--ds-background-neutral-hovered, ${N30})`}`,
+      height: '32px',
+      width: '32px'
+    },
+    '&.clicked': {
+      backgroundColor: `${`var(--ds-background-neutral-bold-pressed, ${N700})`}`,
+      borderRadius: '4px',
+      color: `${`var(--ds-icon-inverse, ${N0})`} !important`
+    }
+  }
+});
+const CodeBlockButtonContainer = ({
+  allowCopyToClipboard,
+  allowWrapCodeBlock,
+  setWrapLongLines,
+  text,
+  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/es2019/react/nodes/codeBlock/components/codeBlockContainer.js

@@ -1,12 +1,11 @@
 /** @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';
 const codeBlockStyleOverrides = props => css`
     tab-size: 4;
     background-color: ${themed({
@@ -14,6 +13,17 @@ const codeBlockStyleOverrides = props => css`
   dark: `var(--ds-surface-raised, ${DN50})`
 })(props)};
 
+    &:hover {
+      button {
+        opacity: 1;
+      }
+    }
+
+    button {
+      opacity: 0;
+      transition: opacity 0.2s ease 0s;
+    }
+
     ${CodeBlockSharedCssClassName.DS_CODEBLOCK} {
       font-size: ${relativeFontSizeToBase16(fontSize())};
       line-height: 1.5rem;
@@ -30,16 +40,23 @@ const codeBlockStyleOverrides = props => css`
     }
   `;
 const CodeBlockContainer = ({
-  text,
-  className,
   allowCopyToClipboard,
-  children
+  allowWrapCodeBlock,
+  children,
+  className,
+  setWrapLongLines,
+  text,
+  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/es2019/react/nodes/codeBlock/components/codeBlockCopyButton.js

@@ -0,0 +1,52 @@
+/** @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';
+const CopyButton = ({
+  content,
+  intl
+}) => {
+  const [tooltip, setTooltip] = useState(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard));
+  const [className, setClassName] = useState('copy-to-clipboard');
+  const onMouseLeave = () => {
+    setTooltip(intl.formatMessage(codeBlockButtonMessages.copyCodeToClipboard));
+    setClassName('copy-to-clipboard');
+  };
+  return jsx(AnalyticsContext.Consumer, null, ({
+    fireAnalyticsEvent
+  }) => 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: () => {
+      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/es2019/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';
+const 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"
+  })));
+};
+const CodeBlockWrapButton = ({
+  setWrapLongLines,
+  wrapLongLines,
+  intl
+}) => {
+  const wrapMessage = intl.formatMessage(wrapLongLines ? codeBlockButtonMessages.unwrapCode : codeBlockButtonMessages.wrapCode);
+  return jsx(AnalyticsContext.Consumer, null, ({
+    fireAnalyticsEvent
+  }) => jsx("span", null, jsx(Tooltip, {
+    content: wrapMessage,
+    hideTooltipOnClick: false,
+    position: "top"
+  }, jsx(Button, {
+    appearance: "subtle",
+    "aria-haspopup": true,
+    "aria-label": wrapMessage,
+    className: `wrap-code ${wrapLongLines ? 'clicked' : ''}`,
+    iconBefore: jsx(Icon, {
+      glyph: WrapIcon,
+      label: ""
+    }),
+    isSelected: wrapLongLines,
+    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/es2019/react/nodes/codeBlock/windowedCodeBlock.js

@@ -1,6 +1,5 @@
 /** @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';
@@ -15,6 +14,7 @@ const WindowedCodeBlock = ({
   text,
   language,
   allowCopyToClipboard,
+  allowWrapCodeBlock = false,
   codeBidiWarningTooltipEnabled,
   className: rootClassName
 }) => {
@@ -34,17 +34,22 @@ const WindowedCodeBlock = ({
     codeBidiWarningTooltipEnabled: codeBidiWarningTooltipEnabled,
     className: rootClassName
   });
+  const [wrapLongLines, setWrapLongLines] = useState(false);
   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;