@atlaskit/renderer 107.2.0 → 107.3.0

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

@@ -91,7 +91,7 @@ var rendererStyles = function rendererStyles(wrapperProps) {
     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)(_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\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)({
@@ -127,7 +127,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.0",
 	"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;

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

@@ -7,6 +7,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';
@@ -14,6 +15,7 @@ export default class Media extends PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "renderCard", (providers = {}) => {
+      var _borderMark$attrs$col, _borderMark$attrs$siz;
       const {
         mediaProvider,
         contextIdentifierProvider
@@ -26,6 +28,9 @@ export default class Media extends PureComponent {
         enableDownloadButton,
         ssr
       } = this.props;
+      const borderMark = this.props.marks.find(this.props.isBorderMark);
+      const borderColor = (_borderMark$attrs$col = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.color) !== null && _borderMark$attrs$col !== void 0 ? _borderMark$attrs$col : '';
+      const borderWidth = (_borderMark$attrs$siz = borderMark === null || borderMark === void 0 ? void 0 : borderMark.attrs.size) !== null && _borderMark$attrs$siz !== void 0 ? _borderMark$attrs$siz : 0;
       const linkMark = this.props.marks.find(this.props.isLinkMark);
       const linkHref = linkMark === null || linkMark === void 0 ? void 0 : linkMark.attrs.href;
       const eventHandlers = linkHref ? undefined : this.props.eventHandlers;
@@ -41,13 +46,25 @@ export default class Media extends PureComponent {
         shouldEnableDownloadButton: enableDownloadButton,
         ssr: ssr
       }));
+      const paletteColorValue = hexToEditorBorderPaletteColor(borderColor) || borderColor;
+      const mediaComponentWithBorder = borderMark ? jsx("div", {
+        "data-mark-type": "border",
+        "data-color": borderColor,
+        "data-size": borderWidth,
+        style: {
+          borderColor: paletteColorValue,
+          borderWidth: `${borderWidth}px`,
+          borderStyle: 'solid',
+          borderRadius: `${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(this, "handleMediaLinkClick", event => {
       const {

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

@@ -7,7 +7,8 @@ import { getClipboardAttrs } from '../../ui/MediaCard';
 import { createIntl, injectIntl } from 'react-intl-next';
 export const RenderMediaInline = props => {
   const {
-    mediaProvider
+    mediaProvider,
+    rendererAppearance
   } = props;
   const [viewMediaClientConfigState, setViewMediaClientConfigState] = useState();
   useEffect(() => {
@@ -30,9 +31,20 @@ export const RenderMediaInline = props => {
       isSelected: false
     });
   }
+  const handleMediaInlineClick = result => {
+    var _props$eventHandlers, _props$eventHandlers$;
+    if ((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && (_props$eventHandlers$ = _props$eventHandlers.media) !== null && _props$eventHandlers$ !== void 0 && _props$eventHandlers$.onClick) {
+      var _props$eventHandlers2, _props$eventHandlers3;
+      (_props$eventHandlers2 = props.eventHandlers) === null || _props$eventHandlers2 === void 0 ? void 0 : (_props$eventHandlers3 = _props$eventHandlers2.media) === null || _props$eventHandlers3 === void 0 ? void 0 : _props$eventHandlers3.onClick(result);
+    }
+  };
+  const shouldOpenMediaViewer = rendererAppearance !== 'mobile';
+  const shouldDisplayToolTip = rendererAppearance !== 'mobile';
   return /*#__PURE__*/React.createElement(MediaInlineCard, {
     identifier: props.identifier,
-    shouldOpenMediaViewer: true,
+    onClick: handleMediaInlineClick,
+    shouldOpenMediaViewer: shouldOpenMediaViewer,
+    shouldDisplayToolTip: shouldDisplayToolTip,
     mediaClientConfig: viewMediaClientConfigState
   });
 };
@@ -41,7 +53,8 @@ const MediaInline = props => {
     collection,
     id,
     providers,
-    intl
+    intl,
+    rendererAppearance
   } = props;
   const identifier = {
     id,
@@ -70,7 +83,9 @@ const MediaInline = props => {
       }
       return /*#__PURE__*/React.createElement(RenderMediaInline, {
         identifier: identifier,
-        mediaProvider: mediaProvider
+        mediaProvider: mediaProvider,
+        eventHandlers: props.eventHandlers,
+        rendererAppearance: rendererAppearance
       });
     }
   }));

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

@@ -35,7 +35,7 @@ import { RenderTracking } from '../../react/utils/performance/RenderTracking';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "107.2.0";
+const packageVersion = "107.3.0";
 export class Renderer extends PureComponent {
   /**
    * This is used in measuring the Renderer Mount time and is then
@@ -245,6 +245,7 @@ export class Renderer extends PureComponent {
       emojiResourceConfig: props.emojiResourceConfig,
       smartLinks: props.smartLinks,
       allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
       allowCustomPanels: props.allowCustomPanels,
       allowAnnotations: props.allowAnnotations,
       allowSelectAllTrap: props.allowSelectAllTrap,
@@ -269,6 +270,7 @@ export class Renderer extends PureComponent {
       allowPlaceholderText,
       allowColumnSorting,
       allowCopyToClipboard,
+      allowWrapCodeBlock,
       allowCustomPanels
     } = this.props;
     const allowNestedHeaderLinks = isNestedHeaderLinksEnabled(allowHeadingAnchorLinks);
@@ -341,6 +343,7 @@ export class Renderer extends PureComponent {
         allowNestedHeaderLinks: allowNestedHeaderLinks,
         allowColumnSorting: allowColumnSorting,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowCustomPanels: allowCustomPanels,
         allowPlaceholderText: allowPlaceholderText,
         innerRef: this.editorRef,
@@ -371,6 +374,7 @@ export class Renderer extends PureComponent {
       return jsx(RendererWrapper, {
         appearance: appearance,
         allowCopyToClipboard: allowCopyToClipboard,
+        allowWrapCodeBlock: allowWrapCodeBlock,
         allowPlaceholderText: allowPlaceholderText,
         allowColumnSorting: allowColumnSorting,
         allowNestedHeaderLinks: allowNestedHeaderLinks,