@atlaskit/renderer 107.2.0 → 107.3.1

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.1";
 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,7 +285,9 @@ 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 featureFlags = this.featureFlags(this.props.featureFlags);
       var allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
       /**
        * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
@@ -332,7 +335,7 @@ export 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 = renderDocument(adfDocument, this.serializer, schema, adfStage, this.props.useSpecBasedValidator, this.id, this.fireAnalyticsEvent, this.props.unsupportedContentLevelsTracking, this.props.appearance),
           result = _renderDocument.result,
@@ -356,8 +359,10 @@ export 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
@@ -380,15 +385,18 @@ export var Renderer = /*#__PURE__*/function (_PureComponent) {
         });
         return jsx(Fragment, null, reRenderTracking, rendererResult);
       } catch (e) {
+        var _featureFlags$feature2;
         if (onError) {
           onError(e);
         }
         return jsx(RendererWrapper, {
           appearance: appearance,
           allowCopyToClipboard: allowCopyToClipboard,
+          allowWrapCodeBlock: allowWrapCodeBlock,
           allowPlaceholderText: allowPlaceholderText,
           allowColumnSorting: allowColumnSorting,
           allowNestedHeaderLinks: allowNestedHeaderLinks,
+          useFragmentMarkBreakoutWidthStylingFix: (_featureFlags$feature2 = featureFlags.featureFlags.useFragmentMarkBreakoutWidthStylingFix) !== null && _featureFlags$feature2 !== void 0 ? _featureFlags$feature2 : true,
           onClick: handleWrapperOnClick
         }, jsx(UnsupportedBlock, null));
       }
@@ -440,7 +448,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     appearance = props.appearance,
     children = props.children,
     onClick = props.onClick,
-    onMouseDown = props.onMouseDown;
+    onMouseDown = props.onMouseDown,
+    useFragmentMarkBreakoutWidthStylingFix = props.useFragmentMarkBreakoutWidthStylingFix;
   return jsx(WidthProvider, {
     className: "ak-renderer-wrapper"
   }, jsx(BaseTheme, {
@@ -452,7 +461,8 @@ var RendererWrapper = /*#__PURE__*/React.memo(function (props) {
     css: rendererStyles({
       appearance: appearance,
       allowNestedHeaderLinks: allowNestedHeaderLinks,
-      allowColumnSorting: !!allowColumnSorting
+      allowColumnSorting: !!allowColumnSorting,
+      useFragmentMarkBreakoutWidthStylingFix: useFragmentMarkBreakoutWidthStylingFix
     })
   }, children)));
 });

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

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 import { css } from '@emotion/react';
 import { themed } from '@atlaskit/theme/components';
 import { gridSize, fontFamily, fontSize, borderRadius } from '@atlaskit/theme/constants';
@@ -74,13 +74,19 @@ var fullWidthStyles = function fullWidthStyles(_ref5) {
   }
   return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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  "])), akEditorFullWidthLayoutWidth);
 };
+var breakoutWidthStyle = function breakoutWidthStyle(useFragmentMarkBreakoutWidthStylingFix) {
+  if (useFragmentMarkBreakoutWidthStylingFix) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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    "])), TableSharedCssClassName.TABLE_CONTAINER, TableSharedCssClassName.TABLE_CONTAINER);
+  }
+  return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    * .", " {\n      width: 100% !important;\n      left: 0 !important;\n    }\n  "])), TableSharedCssClassName.TABLE_CONTAINER);
+};
 export var rendererStyles = function rendererStyles(wrapperProps) {
   return function (theme) {
     // This is required to be compatible with styled-components prop structure.
     var themeProps = {
       theme: theme
     };
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\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    "])), editorFontSize(themeProps), themed({
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\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    "])), editorFontSize(themeProps), themed({
       light: "var(--ds-text, ".concat(colors.N800, ")"),
       dark: "var(--ds-text, #B8C7E0)"
     })(themeProps), 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), whitespaceSharedStyles, blockquoteSharedStyles, headingsSharedStyles(themeProps), ruleSharedStyles(themeProps), paragraphSharedStyles, listsSharedStyles, indentationSharedStyles, blockMarksSharedStyles, codeMarkSharedStyles(themeProps), shadowSharedStyle, dateSharedStyle, textColorStyles, tasksAndDecisionsStyles, smartCardSharedStyles, fontFamily(), relativeFontSizeToBase16(fontSize()), themed({
@@ -89,7 +95,7 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), borderRadius(), 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, ")"), gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
+    })(themeProps), "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-text-danger, ".concat(colors.R500, ")"), gridSize() * 3, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, richMediaClassName, alignedHeadingAnchorStyle(wrapperProps), mediaSingleSharedStyle, RendererCssClassName.DOCUMENT, breakoutWidthStyle(wrapperProps.useFragmentMarkBreakoutWidthStylingFix), RendererCssClassName.EXTENSION_OVERFLOW_CONTAINER, RendererCssClassName.EXTENSION, RendererCssClassName.DOCUMENT, RendererCssClassName.EXTENSION, blockNodesVerticalMargin, RendererCssClassName.EXTENSION_CENTER_ALIGN, TableSharedCssClassName.TABLE_NODE_WRAPPER, shadowObserverClassNames.SHADOW_CONTAINER, TableSharedCssClassName.TABLE_NODE_WRAPPER, tableSharedStyle(themeProps), RendererCssClassName.DOCUMENT, TableSharedCssClassName.TABLE_CONTAINER, shadowClassNames.RIGHT_SHADOW, shadowClassNames.LEFT_SHADOW, tableMarginTop - 1, tableMarginTop, akEditorStickyHeaderZIndex, shadowObserverClassNames.SENTINEL_LEFT, shadowObserverClassNames.SENTINEL_RIGHT, tableMarginTop, tableSortableColumnStyle(wrapperProps), RendererCssClassName.NUMBER_COLUMN, themed({
       light: "var(--ds-background-neutral, ".concat(akEditorTableToolbar, ")"),
       dark: "var(--ds-background-neutral, ".concat(akEditorTableToolbarDark, ")")
     })(themeProps), themed({
@@ -116,6 +122,6 @@ export var rendererStyles = function rendererStyles(wrapperProps) {
     })(themeProps), themed({
       light: "var(--ds-border, ".concat(akEditorTableToolbar, ")"),
       dark: "var(--ds-border, ".concat(akEditorTableToolbarDark, ")")
-    })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
+    })(themeProps), borderRadius(), blockNodesVerticalMargin, getLightWeightCodeBlockStylesForRootRendererStyleSheet(), columnLayoutSharedStyle, gridSize() * 2.5, gridSize() * 4, gridMediumMaxWidth, blockNodesVerticalMargin, blockNodesVerticalMargin, blockNodesVerticalMargin, browser.safari ? codeBlockInListSafariFix : '');
   };
 };

package/dist/esm/version.json

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

package/dist/types/analytics/enums.d.ts

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

package/dist/types/analytics/events.d.ts

@@ -65,6 +65,10 @@ declare type AnchorLinkAEP = UIAEP<ACTION.VIEWED, ACTION_SUBJECT.ANCHOR_LINK, un
     platform: PLATFORM.WEB;
     mode: MODE.RENDERER;
 }>;
+declare type CodeBlockCopyAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_COPY, undefined>;
+declare type CodeBlockWrapAEP = ButtonAEP<ACTION_SUBJECT_ID.CODEBLOCK_WRAP, {
+    wrapped: boolean;
+}>;
 declare type HeadingAnchorLinkButtonAEP = ButtonAEP<ACTION_SUBJECT_ID.HEADING_ANCHOR_LINK, undefined>;
 declare type TableSortColumnNotAllowedAEP = AEP<ACTION.SORT_COLUMN_NOT_ALLOWED, ACTION_SUBJECT.TABLE, undefined, {
     platform: PLATFORM.WEB;
@@ -110,5 +114,5 @@ declare type RendererTTIAEP = AEP<ACTION.RENDERER_TTI, ACTION_SUBJECT.RENDERER,
     ttiFromInvocation: number;
     canceled: boolean;
 }, EVENT_TYPE.OPERATIONAL>;
-export declare type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | RendererReRenderedAEP<T> | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | RendererTTIAEP;
+export declare type AnalyticsEventPayload<T = void> = RendererStartAEP | RendererRenderedAEP | RendererReRenderedAEP<T> | ComponentCrashErrorAEP | RendererUnsupportedContentLevelsTrackingSucceeded | RendererUnsupportedContentLevelsTrackingErrored | RendererSelectAllCaughtAEP | RendererSelectAllEscapedAEP | CodeBlockCopyAEP | CodeBlockWrapAEP | HeadingAnchorLinkButtonAEP | AnchorLinkAEP | TableSortColumnNotAllowedAEP | TableSortColumnAEP | VisitLinkAEP | VisitMediaLinkAEP | ExpandAEP | UnsupportedContentPayload | UnsupportedContentTooltipPayload | AnnotationAEP | AnnotationDeleteAEP | MediaLnkTransformedAEP | InvalidProsemirrorDocumentErrorAEP | RendererTTIAEP;
 export {};

package/dist/types/react/index.d.ts

@@ -32,6 +32,7 @@ export interface ReactSerializerInit {
     emojiResourceConfig?: EmojiResourceConfig;
     smartLinks?: SmartLinksOptions;
     allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
     allowPlaceholderText?: boolean;
     allowCustomPanels?: boolean;
     allowAnnotations?: boolean;
@@ -66,6 +67,7 @@ export default class ReactSerializer implements Serializer<JSX.Element> {
     private allowHeadingAnchorLinks?;
     private allowColumnSorting?;
     private allowCopyToClipboard?;
+    private allowWrapCodeBlock?;
     private allowPlaceholderText?;
     private allowCustomPanels?;
     private fireAnalyticsEvent?;

package/dist/types/react/nodes/codeBlock/codeBlock.d.ts

@@ -5,6 +5,7 @@ export interface Props {
     text: string;
     language: SupportedLanguages;
     allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
     codeBidiWarningTooltipEnabled: boolean;
     className?: string;
 }

package/dist/types/react/nodes/codeBlock/components/codeBlockButtonContainer.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { Dispatch, SetStateAction } from 'react';
+export interface CodeBlockButtonContainerProps {
+    allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
+    setWrapLongLines: Dispatch<SetStateAction<boolean>>;
+    text: string;
+    wrapLongLines: boolean;
+}
+declare const CodeBlockButtonContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, setWrapLongLines, text, wrapLongLines, }: CodeBlockButtonContainerProps) => jsx.JSX.Element;
+export default CodeBlockButtonContainer;

package/dist/types/react/nodes/codeBlock/components/codeBlockContainer.d.ts

@@ -1,12 +1,10 @@
 /** @jsx jsx */
-import type { ReactNode } from 'react';
 import { jsx } from '@emotion/react';
-import { Props as CodeBlockProps } from '../codeBlock';
-interface ContainerProps {
-    className?: string;
-    text: CodeBlockProps['text'];
+import type { ReactNode } from 'react';
+import type { CodeBlockButtonContainerProps } from './codeBlockButtonContainer';
+interface ContainerProps extends CodeBlockButtonContainerProps {
     children: ReactNode;
-    allowCopyToClipboard?: boolean;
+    className?: string;
 }
-declare const CodeBlockContainer: ({ text, className, allowCopyToClipboard, children, }: ContainerProps) => jsx.JSX.Element;
+declare const CodeBlockContainer: ({ allowCopyToClipboard, allowWrapCodeBlock, children, className, setWrapLongLines, text, wrapLongLines, }: ContainerProps) => jsx.JSX.Element;
 export default CodeBlockContainer;

package/dist/types/react/nodes/codeBlock/components/codeBlockWrapButton.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { Dispatch, SetStateAction } from 'react';
+import { WrappedComponentProps } from 'react-intl-next';
+declare type Props = {
+    setWrapLongLines: Dispatch<SetStateAction<boolean>>;
+    wrapLongLines?: boolean;
+};
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types/react/nodes/codeBlock/windowedCodeBlock.d.ts

@@ -1,4 +1,4 @@
 import { jsx } from '@emotion/react';
 import type { Props as CodeBlockProps } from './codeBlock';
-declare const WindowedCodeBlock: ({ text, language, allowCopyToClipboard, codeBidiWarningTooltipEnabled, className: rootClassName, }: CodeBlockProps) => jsx.JSX.Element;
+declare const WindowedCodeBlock: ({ text, language, allowCopyToClipboard, allowWrapCodeBlock, codeBidiWarningTooltipEnabled, className: rootClassName, }: CodeBlockProps) => jsx.JSX.Element;
 export default WindowedCodeBlock;

package/dist/types/react/nodes/media.d.ts

@@ -5,7 +5,7 @@ import { jsx } from '@emotion/react';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
 import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { MediaCardProps } from '../../ui/MediaCard';
-import { LinkDefinition } from '@atlaskit/adf-schema';
+import { LinkDefinition, BorderMarkDefinition } from '@atlaskit/adf-schema';
 import type { MediaFeatureFlags } from '@atlaskit/media-common';
 import { AnalyticsEventPayload } from '../../analytics/events';
 export declare type MediaProps = MediaCardProps & {
@@ -13,7 +13,8 @@ export declare type MediaProps = MediaCardProps & {
     allowAltTextOnImages?: boolean;
     children?: React.ReactNode;
     isInsideOfBlockNode?: boolean;
-    marks: Array<LinkDefinition>;
+    marks: Array<LinkDefinition | BorderMarkDefinition>;
+    isBorderMark: () => boolean;
     isLinkMark: () => boolean;
     fireAnalyticsEvent?: (event: AnalyticsEventPayload) => void;
     featureFlags?: MediaFeatureFlags;

package/dist/types/react/nodes/mediaInline.d.ts

@@ -3,15 +3,21 @@ import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
 import { FileIdentifier } from '@atlaskit/media-client';
 import { MediaProvider } from '../../ui/MediaCard';
 import { WrappedComponentProps } from 'react-intl-next';
+import type { EventHandlers } from '@atlaskit/editor-common/ui';
+import { RendererAppearance } from '../../ui/Renderer/types';
 export declare type RenderMediaInlineProps = {
     identifier: FileIdentifier;
     mediaProvider: Promise<MediaProvider>;
     children?: React.ReactNode;
+    eventHandlers?: EventHandlers;
+    rendererAppearance?: RendererAppearance;
 };
 export declare type MediaInlineProps = {
     id: string;
     collection?: string;
     providers: ProviderFactory;
+    eventHandlers?: EventHandlers;
+    rendererAppearance?: RendererAppearance;
 };
 export declare const RenderMediaInline: React.FC<RenderMediaInlineProps>;
 declare const _default: React.FC<import("react-intl-next").WithIntlProps<MediaInlineProps & WrappedComponentProps<"intl">>> & {

package/dist/types/react/types.d.ts

@@ -26,6 +26,7 @@ export interface NodeMeta {
     } | null;
     allowHeadingAnchorLinks?: HeadingAnchorLinksProps;
     allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
     allowPlaceholderText?: boolean;
     allowCustomPanels?: boolean;
     rendererAppearance?: RendererAppearance;

package/dist/types/ui/Renderer/style.d.ts

@@ -5,6 +5,7 @@ export declare type RendererWrapperProps = {
     appearance?: RendererAppearance;
     allowNestedHeaderLinks: boolean;
     allowColumnSorting: boolean;
+    useFragmentMarkBreakoutWidthStylingFix: boolean;
 };
 export declare const headingSizes: {
     [key: string]: {

package/dist/types/ui/renderer-props.d.ts

@@ -59,6 +59,7 @@ export interface RendererProps {
     innerRef?: React.RefObject<HTMLDivElement>;
     useSpecBasedValidator?: boolean;
     allowCopyToClipboard?: boolean;
+    allowWrapCodeBlock?: boolean;
     allowCustomPanels?: boolean;
     analyticsEventSeverityTracking?: {
         enabled: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "107.2.0",
+  "version": "107.3.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,18 +24,18 @@
     }
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^25.3.0",
-    "@atlaskit/adf-utils": "^18.0.0",
+    "@atlaskit/adf-schema": "^25.4.0",
+    "@atlaskit/adf-utils": "^18.1.0",
     "@atlaskit/analytics-listeners": "^8.5.0",
     "@atlaskit/analytics-namespaced-context": "^6.6.0",
     "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/button": "^16.6.0",
-    "@atlaskit/code": "^14.5.0",
-    "@atlaskit/editor-common": "^72.6.0",
+    "@atlaskit/code": "^14.5.3",
+    "@atlaskit/editor-common": "^72.7.0",
     "@atlaskit/editor-json-transformer": "^8.8.0",
-    "@atlaskit/editor-palette": "1.1.0",
+    "@atlaskit/editor-palette": "1.2.0",
     "@atlaskit/editor-shared-styles": "^2.3.0",
-    "@atlaskit/emoji": "^67.2.0",
+    "@atlaskit/emoji": "^67.3.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/media-card": "^74.7.0",
     "@atlaskit/media-client": "^20.2.0",
@@ -43,7 +43,7 @@
     "@atlaskit/media-filmstrip": "^46.1.0",
     "@atlaskit/media-ui": "^22.3.0",
     "@atlaskit/media-viewer": "^47.5.0",
-    "@atlaskit/smart-card": "^25.1.0",
+    "@atlaskit/smart-card": "^25.3.0",
     "@atlaskit/status": "^1.2.0",
     "@atlaskit/task-decision": "^17.5.0",
     "@atlaskit/theme": "^12.3.0",
@@ -71,8 +71,8 @@
     "@atlaskit/avatar": "^21.2.0",
     "@atlaskit/css-reset": "^6.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/editor-core": "^181.0.0",
-    "@atlaskit/editor-test-helpers": "^18.1.0",
+    "@atlaskit/editor-core": "^182.0.0",
+    "@atlaskit/editor-test-helpers": "^18.2.0",
     "@atlaskit/link-provider": "^1.5.0",
     "@atlaskit/logo": "^13.11.0",
     "@atlaskit/media-core": "^34.0.0",
@@ -119,4 +119,4 @@
       ]
     }
   }
-}
+}