@atlaskit/editor-common 87.10.2 → 87.12.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @atlaskit/editor-common
 
+## 87.12.0
+
+### Minor Changes
+
+- [#129457](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129457)
+  [`171c73d4033f0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/171c73d4033f0) -
+  [ux] [ED-24566]
+
+  - Internationalisation strings in editor-common for editor-plugin-media-insert
+  - Removed default pre-filled URL for editor-plugin-media-insert popup
+  - Added background color for editor-plugin-media-insert popup
+
+- [#130065](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130065)
+  [`e71a357ea40dd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e71a357ea40dd) -
+  [ux] [ED-24323] Add external image badge for externally hosted images
+
+## 87.11.0
+
+### Minor Changes
+
+- [#130260](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130260)
+  [`d338ce6e4ff6e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d338ce6e4ff6e) -
+  [ux] Add padding to blockquote and panel nodes to allow space for element controls
+
+### Patch Changes
+
+- [#129804](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/129804)
+  [`790a6fe6bc9e8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/790a6fe6bc9e8) -
+  [ED-24516] Fix VR test helpers for fallback LazyNodeViews
+- Updated dependencies
+
 ## 87.10.2
 
 ### Patch Changes

package/dist/cjs/lazy-node-view/node-view.js

@@ -7,7 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.LazyNodeView = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _memoize = _interopRequireDefault(require("lodash/memoize"));
 var _model = require("@atlaskit/editor-prosemirror/model");
+var getEditorLineWidth = (0, _memoize.default)(function (view) {
+  var _view$dom;
+  return (_view$dom = view.dom) === null || _view$dom === void 0 ? void 0 : _view$dom.clientWidth;
+});
+
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -22,7 +28,13 @@ var LazyNodeView = exports.LazyNodeView = /*#__PURE__*/function () {
       this.dom = document.createElement('div');
       return;
     }
-    var fallback = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    var toDOMConfiguration = {
+      editorLineWidth: getEditorLineWidth(view)
+    };
+    var fallback = _model.DOMSerializer.renderSpec(document, node.type.spec.toDOM(node,
+    // We are injecting a second parameter to be used by the toDOM lazy node view implementations
+    // @ts-expect-error
+    toDOMConfiguration));
     this.dom = fallback.dom;
     this.contentDOM = fallback.contentDOM;
     if (this.dom instanceof HTMLElement) {

package/dist/cjs/media/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "dropPlaceholderMessages", {
     return _dropPlaceholder.dropPlaceholderMessages;
   }
 });
+Object.defineProperty(exports, "externalMediaMessages", {
+  enumerable: true,
+  get: function get() {
+    return _externalMedia.externalMediaMessages;
+  }
+});
 Object.defineProperty(exports, "imageBorderMessages", {
   enumerable: true,
   get: function get() {
@@ -72,4 +78,5 @@ var _caption = require("./messages/caption");
 var _dropPlaceholder = require("./messages/dropPlaceholder");
 var _altText = require("./messages/altText");
 var _mediaResizeAnnouncerMess = require("./messages/mediaResizeAnnouncerMess");
-var _comments = require("./messages/comments");
+var _comments = require("./messages/comments");
+var _externalMedia = require("./messages/externalMedia");

package/dist/cjs/media/messages/externalMedia.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.externalMediaMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var externalMediaMessages = exports.externalMediaMessages = (0, _reactIntlNext.defineMessages)({
+  externalMediaFile: {
+    id: 'fabric.editor.externalMediaFile',
+    defaultMessage: 'External media file',
+    description: 'External media file'
+  }
+});

package/dist/cjs/media-single/CommentBadge.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CommentBadge = void 0;
+exports.getBadgeSize = exports.CommentBadge = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -38,11 +38,11 @@ var commentBadgeEditorOverrides = function commentBadgeEditorOverrides(commentsO
     zIndex: _constants.layers.card()
   });
 };
-var getBadgeSize = function getBadgeSize(width, height) {
+var getBadgeSize = exports.getBadgeSize = function getBadgeSize(width, height) {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
   return width && width < 70 || height && height < 70 ? 'small' : 'medium';
 };
-var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
+var CommentBadge = exports.CommentBadge = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var intl = _ref.intl,
     width = _ref.width,
     height = _ref.height,
@@ -87,6 +87,7 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
     }
   }, [status]);
   return (0, _react2.jsx)("div", {
+    ref: ref,
     css: badgeOffsetRight ? [commentBadgeWrapper,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     commentBadgeEditorOverrides(commentsOnMediaBugFixEnabled, badgeOffsetRight)] : commentBadgeWrapper
@@ -119,4 +120,4 @@ var CommentBadge = exports.CommentBadge = function CommentBadge(_ref) {
       size: badgeSize
     })
   })));
-};
+});

package/dist/cjs/media-single/ExternalImageBadge.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExternalImageBadge = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+var _reactIntlNext = require("react-intl-next");
+var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
+var _primitives = require("@atlaskit/primitives");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _media = require("../media");
+var _CommentBadge = require("./CommentBadge");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var baseStyles = (0, _primitives.xcss)({
+  position: 'absolute',
+  top: 'space.025',
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface',
+  zIndex: 'tooltip',
+  lineHeight: "var(--ds-space-200, 16px)",
+  right: 'var(--right-offset)',
+  cursor: 'pointer'
+});
+var ExternalImageBadge = exports.ExternalImageBadge = function ExternalImageBadge(_ref) {
+  var mediaWidth = _ref.mediaWidth,
+    mediaHeight = _ref.mediaHeight,
+    _ref$commentBadgeRigh = _ref.commentBadgeRightOffset,
+    commentBadgeRightOffset = _ref$commentBadgeRigh === void 0 ? 0 : _ref$commentBadgeRigh,
+    mediaElement = _ref.mediaElement;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var message = intl.formatMessage(_media.externalMediaMessages.externalMediaFile);
+  var _useState = (0, _react.useState)((0, _CommentBadge.getBadgeSize)(mediaWidth, mediaHeight)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    badgeSize = _useState2[0],
+    setBadgeSize = _useState2[1];
+  // detect resize of media element to adjust badge size
+  // will combine with the comment badge resize observer when refactoring in the future to avoid multiple resize observers
+  (0, _react.useEffect)(function () {
+    var observer = new ResizeObserver((0, _debounce.default)(function (entries) {
+      var _entries = (0, _slicedToArray2.default)(entries, 1),
+        entry = _entries[0];
+      var _entry$contentRect = entry.contentRect,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height;
+      setBadgeSize((0, _CommentBadge.getBadgeSize)(width, height));
+    }));
+    if (mediaElement) {
+      observer.observe(mediaElement);
+    }
+    return function () {
+      observer.disconnect();
+    };
+  }, [mediaElement]);
+  var baseRightOffset = badgeSize === 'medium' ? 4 : 2;
+  var rightOffset = baseRightOffset + commentBadgeRightOffset;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  , {
+    style: {
+      '--right-offset': "".concat(rightOffset, "px")
+    },
+    padding: badgeSize === 'medium' ? 'space.050' : 'space.0',
+    "data-external-image-badge": "true",
+    xcss: baseStyles,
+    tabIndex: 0
+  }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+    content: message
+  }, /*#__PURE__*/_react.default.createElement(_info.default, {
+    size: "small",
+    label: message
+  })));
+};

package/dist/cjs/media-single/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "DEFAULT_IMAGE_WIDTH", {
     return _constants.DEFAULT_IMAGE_WIDTH;
   }
 });
+Object.defineProperty(exports, "ExternalImageBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ExternalImageBadge.ExternalImageBadge;
+  }
+});
 Object.defineProperty(exports, "MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH", {
   enumerable: true,
   get: function get() {
@@ -137,4 +143,5 @@ Object.defineProperty(exports, "wrappedLayouts", {
 });
 var _constants = require("./constants");
 var _utils = require("./utils");
-var _CommentBadge = require("./CommentBadge");
+var _CommentBadge = require("./CommentBadge");
+var _ExternalImageBadge = require("./ExternalImageBadge");

package/dist/cjs/messages/media-insert.js

@@ -40,5 +40,15 @@ var mediaInsertMessages = exports.mediaInsertMessages = (0, _reactIntlNext.defin
     id: 'fabric.editor.media.insert.mediaAlt',
     defaultMessage: 'Preview for uploaded image or video file',
     description: 'Alt text describing a preview of an image uploaded.'
+  },
+  linkTabTitle: {
+    id: 'fabric.editor.media.insert.linkTabTitle',
+    defaultMessage: 'Link',
+    description: 'Title of the navigation tab that allows users to insert media from a URL or link'
+  },
+  mediaPickerPopupAriaLabel: {
+    id: 'fabric.editor.media.insert.mediaPickerPopupAriaLabel',
+    defaultMessage: 'Media picker',
+    description: 'Accessibility label for the media picker popup'
   }
 });

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "87.10.2";
+var packageVersion = "87.12.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/node-width/index.js

@@ -105,7 +105,7 @@ var getNestedParentNode = function getNestedParentNode(tablePos, state) {
 var calcBreakoutNodeWidth = function calcBreakoutNodeWidth(layout, containerWidth, isFullWidthModeEnabled) {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, _editorSharedStyles.akEditorFullWidthLayoutWidth) : (0, _breakout.absoluteBreakoutWidth)(layout, containerWidth.width);
 };
-var getTableContainerWidth = exports.getTableContainerWidth = function getTableContainerWidth(node, isCommentEditor) {
+var getTableContainerWidth = exports.getTableContainerWidth = function getTableContainerWidth(node) {
   if (node !== null && node !== void 0 && node.attrs.width) {
     return node.attrs.width;
   }

package/dist/cjs/styles/index.js

@@ -153,6 +153,12 @@ Object.defineProperty(exports, "blockquoteSharedStyles", {
     return _blockquote.blockquoteSharedStyles;
   }
 });
+Object.defineProperty(exports, "blockquoteSharedStylesNew", {
+  enumerable: true,
+  get: function get() {
+    return _blockquote.blockquoteSharedStylesNew;
+  }
+});
 Object.defineProperty(exports, "buttonGroupStyle", {
   enumerable: true,
   get: function get() {

package/dist/cjs/styles/shared/blockquote.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.blockquoteSharedStyles = void 0;
+exports.blockquoteSharedStylesNew = exports.blockquoteSharedStyles = void 0;
 var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -44,4 +44,42 @@ var blockquoteSharedStyles = exports.blockquoteSharedStyles = (0, _react.css)({
       display: 'inline-table'
     }
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var blockquoteSharedStylesNew = exports.blockquoteSharedStylesNew = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  '& blockquote': {
+    boxSizing: 'border-box',
+    color: 'inherit',
+    paddingLeft: "var(--ds-space-250, 20px)",
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    borderLeft: "2px solid ".concat("var(--ds-border, ".concat(_editorSharedStyles.akEditorBlockquoteBorderColor, ")")),
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    margin: "".concat(_editorSharedStyles.blockNodesVerticalMargin, " 0 0 0"),
+    marginRight: 0,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    "[dir='rtl'] &": {
+      paddingLeft: 0,
+      paddingRight: "var(--ds-space-200, 16px)"
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '&:first-child': {
+      marginTop: 0
+    },
+    '&::before': {
+      content: "''"
+    },
+    '&::after': {
+      content: 'none'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '& p': {
+      display: 'block'
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+    '& table, & table:last-child': {
+      display: 'inline-table'
+    }
+  }
 });

package/dist/cjs/styles/shared/code-block.js

@@ -29,9 +29,9 @@ var CodeBlockSharedCssClassName = exports.CodeBlockSharedCssClassName = {
   CODEBLOCK_LINE_NUMBER_GUTTER_FG: 'line-number-gutter--fg'
 };
 var codeBlockSharedStyles = exports.codeBlockSharedStyles = function codeBlockSharedStyles() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", "\n\t\t> .", "\n\t\t> .", " {\n\t\tmargin-right: ", ";\n\n\t\tcode {\n\t\t\tdisplay: block;\n\t\t\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\t}\n\n\t.", "\n\t\t> .", " {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\n\t\tcode {\n\t\t\tflex-grow: 1;\n\n\t\t\twhite-space: pre;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\t// relative position set so number gutter remains absolute on horizontal scroll.\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: 2rem;\n\t\t\tflex-shrink: 0;\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t\twidth: 2rem;\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tfont-size: ", ";\n\t\t\tline-height: 1.5rem;\n\t\t\ttext-align: center;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", "\n\t\t> .", "\n\t\t> .", " {\n\t\tmargin-right: ", ";\n\n\t\tcode {\n\t\t\tdisplay: block;\n\t\t\tword-break: break-word;\n\t\t\twhite-space: pre-wrap;\n\t\t}\n\t}\n\n\t.", "\n\t\t> .", " {\n\t\tdisplay: flex;\n\t\tflex: 1;\n\n\t\tcode {\n\t\t\tflex-grow: 1;\n\n\t\t\twhite-space: pre;\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: relative;\n\t\tbackground-color: ", ";\n\t\tborder-radius: ", ";\n\t\tmargin: ", " 0 0 0;\n\t\tfont-family: ", ";\n\t\tmin-width: ", "px;\n\t\tcursor: pointer;\n\n\t\t--ds--code--bg-color: transparent;\n\n\t\t/* This is necessary to allow for arrow key navigation in/out of code blocks in Firefox. */\n\t\twhite-space: normal;\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\ttop: 0px;\n\t\t\tleft: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tposition: absolute;\n\t\t\tvisibility: hidden;\n\t\t\theight: 1.5rem;\n\t\t\tbottom: 0px;\n\t\t\tright: 0px;\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tdisplay: flex;\n\t\t\tborder-radius: ", ";\n\t\t\twidth: 100%;\n\t\t\tcounter-reset: line;\n\t\t\toverflow-x: auto;\n\n\t\t\tbackground-image: ", ";\n\n\t\t\tbackground-repeat: no-repeat;\n\t\t\tbackground-attachment: local, local, local, local, scroll, scroll, scroll, scroll;\n\t\t\tbackground-size:\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%,\n\t\t\t\t", " 100%,\n\t\t\t\t1px 100%;\n\t\t\tbackground-position:\n\t\t\t\t0 0,\n\t\t\t\t0 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t100% 0,\n\t\t\t\t0 0,\n\t\t\t\t0 0;\n\n\t\t\t/* Be careful if refactoring this; it is needed to keep arrow key navigation in Firefox consistent with other browsers. */\n\t\t\toverflow-y: hidden;\n\t\t}\n\n\t\t.", " {\n\t\t\t// relative position set so number gutter remains absolute on horizontal scroll.\n\t\t\tposition: relative;\n\t\t}\n\n\t\t.", " {\n\t\t\tflex-shrink: 0;\n\t\t\ttext-align: right;\n\t\t\tbackground-color: ", ";\n\t\t\tpadding: ", ";\n\t\t\tposition: relative;\n\n\t\t\tspan {\n\t\t\t\tdisplay: block;\n\t\t\t\tline-height: 0;\n\t\t\t\tfont-size: 0;\n\n\t\t\t\t::before {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t\tcontent: counter(line);\n\t\t\t\t\tcounter-increment: line;\n\t\t\t\t\tcolor: ", ";\n\t\t\t\t\tfont-size: ", ";\n\t\t\t\t\tline-height: 1.5rem;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tbackground-color: ", ";\n\t\t\tposition: relative;\n\t\t\twidth: var(--lineNumberGutterWidth, 2rem);\n\t\t\tpadding: 0px ", ";\n\t\t\tflex-shrink: 0;\n\t\t\tfont-size: ", ";\n\t\t}\n\n\t\t.", " {\n\t\t\tdisplay: flex;\n\t\t\tflex: 1;\n\n\t\t\tcode {\n\t\t\t\tflex-grow: 1;\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\twhite-space: pre;\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tcode {\n\t\t\t\ttab-size: 4;\n\t\t\t\tcursor: text;\n\t\t\t\tcolor: ", ";\n\t\t\t\tborder-radius: ", ";\n\t\t\t\tmargin: ", ";\n\t\t\t\tfont-size: ", ";\n\t\t\t\tline-height: 1.5rem;\n\t\t\t}\n\t\t}\n\n\t\t.", " {\n\t\t\tpointer-events: none;\n\t\t\tuser-select: none;\n\t\t\twidth: var(--lineNumberGutterWidth, 2rem);\n\t\t\tleft: 0;\n\t\t\tposition: absolute;\n\t\t\tfont-size: ", ";\n\t\t\tpadding: 0px ", ";\n\t\t\tline-height: 1.5rem;\n\t\t\ttext-align: right;\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG_WRAPPED, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, "var(--ds-surface-raised, transparent)", "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, _editorSharedStyles.akEditorCodeFontFamily, _editorSharedStyles.akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(_colors.N20, ")"), "var(--ds-border-radius, 3px)", (0, _editorSharedStyles.overflowShadow)({
     leftCoverWidth: "var(--ds-space-300, 24px)"
-  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-text-subtlest, #505F79)");
+  }), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER_FG, CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(_colors.N30, ")"), "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-text, ".concat(_colors.N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, #505F79)");
 };
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766

package/dist/cjs/styles/shared/panel.js

@@ -16,6 +16,7 @@ var _editorPalette = require("@atlaskit/editor-palette");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _emoji = require("@atlaskit/emoji");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject;
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
@@ -171,7 +172,7 @@ var mainDynamicStyles = function mainDynamicStyles(panelType) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Safe to autofix with a tiny tweak to `mainDynamicStyles` being an object, but holding off…
 var panelSharedStylesWithoutPrefix = exports.panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
-  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tmargin: ", " 0 0;\n\tpadding-top: ", ";\n\tpadding-right: ", ";\n\tpadding-bottom: ", ";\n\tpadding-left: ", ";\n\tmin-width: ", "px;\n\tdisplay: flex;\n\tposition: relative;\n\talign-items: normal;\n\tword-break: break-word;\n\n\t", "\n\n\t.", " {\n\t\tflex-shrink: 0;\n\t\theight: ", ";\n\t\twidth: ", ";\n\t\tbox-sizing: content-box;\n\t\tpadding-right: ", ";\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\t-moz-user-select: none;\n\t\t-webkit-user-select: none;\n\t\t-ms-user-select: none;\n\t\tmargin-top: 0.1em;\n\t\t", "\n\n\t\t> span {\n\t\t\tvertical-align: middle;\n\t\t\tdisplay: inline-flex;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\n\t\t\t// Vertical align only works for inline-block elements in Firefox\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\timg {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.ak-editor-panel__content {\n\t\tmargin: ", " 0 ", ";\n\t\tflex: 1 0 0;\n\t\t/*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n\t\tmin-width: 0;\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
+  return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\tborder-radius: ", ";\n\tmargin: ", " 0 0;\n\tpadding-top: ", ";\n\tpadding-right: ", ";\n\tpadding-bottom: ", ";\n\tpadding-left: ", ";\n\tmin-width: ", "px;\n\tdisplay: flex;\n\tposition: relative;\n\talign-items: normal;\n\tword-break: break-word;\n\n\t", "\n\n\t.", " {\n\t\tflex-shrink: 0;\n\t\theight: ", ";\n\t\twidth: ", ";\n\t\tbox-sizing: content-box;\n\t\tpadding-right: ", ";\n\t\ttext-align: center;\n\t\tuser-select: none;\n\t\t-moz-user-select: none;\n\t\t-webkit-user-select: none;\n\t\t-ms-user-select: none;\n\t\tmargin-top: 0.1em;\n\t\t", "\n\n\t\t> span {\n\t\t\tvertical-align: middle;\n\t\t\tdisplay: inline-flex;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\t\t}\n\n\t\t.", " {\n\t\t\tvertical-align: ", "px;\n\n\t\t\t// Vertical align only works for inline-block elements in Firefox\n\t\t\t@-moz-document url-prefix() {\n\t\t\t\timg {\n\t\t\t\t\tdisplay: inline-block;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t.ak-editor-panel__content {\n\t\tmargin: ", " 0 ", ";\n\t\tflex: 1 0 0;\n\t\t/*\n      https://ishadeed.com/article/min-max-css/#setting-min-width-to-zero-with-flexbox\n      The default value for min-width is auto, which is computed to zero. When an element is a flex item, the value of min-width doesn\u2019t compute to zero. The minimum size of a flex item is equal to the size of its contents.\n    */\n\t\tmin-width: 0;\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&[data-panel-type='", "'] {\n\t\t", "\n\n\t\t.", " {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-border-radius, 3px)", _editorSharedStyles.blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", _editorSharedStyles.akEditorTableCellMinWidth, mainDynamicStyles(_adfSchema.PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", (0, _platformFeatureFlags.fg)('platform_editor_element_padding_changes_gate') ? "var(--ds-space-150, 12px)" : "var(--ds-space-100, 8px)", iconDynamicStyles(_adfSchema.PanelType.INFO), _emoji.emojiSprite, panelEmojiSpriteVerticalAlignment, _emoji.emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", _adfSchema.PanelType.NOTE, mainDynamicStyles(_adfSchema.PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.NOTE), _adfSchema.PanelType.TIP, mainDynamicStyles(_adfSchema.PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.TIP), _adfSchema.PanelType.WARNING, mainDynamicStyles(_adfSchema.PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.WARNING), _adfSchema.PanelType.ERROR, mainDynamicStyles(_adfSchema.PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.ERROR), _adfSchema.PanelType.SUCCESS, mainDynamicStyles(_adfSchema.PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(_adfSchema.PanelType.SUCCESS));
 };
 var panelSharedStyles = exports.panelSharedStyles = function panelSharedStyles() {
   return (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "87.10.2";
+var packageVersion = "87.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/MediaSingle/styled.js

@@ -184,7 +184,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\n\t", "\n\n\t/* Editor */\n  & > figure {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t// Comments on media project adds comment badge as child of the media wrapper,\n\t// thus we need to exclude it so that style is applied to intended div\n\t& > div:not([data-comment-badge='true']) {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t& * [data-mark-annotation-type='inlineComment'] {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t&[data-node-type='embedCard'] > div {\n\t\twidth: 100%;\n\t}\n\n\t/* Renderer */\n\t[data-node-type='media'] {\n\t\tposition: static !important;\n\n\t\t> div {\n\t\t\tposition: absolute;\n\t\t\theight: 100%;\n\t\t}\n\t}\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
+  return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\n\t", "\n\n\t/* Editor */\n  & > figure {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t// Comments on media project adds comment badge as child of the media wrapper,\n\t// thus we need to exclude it so that style is applied to intended div\n\t& > div:not([data-comment-badge='true'], [data-external-image-badge='true']) {\n\t\tposition: ", ";\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\n\t& * [data-mark-annotation-type='inlineComment'] {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t}\n\n\t&[data-node-type='embedCard'] > div {\n\t\twidth: 100%;\n\t}\n\n\t/* Renderer */\n\t[data-node-type='media'] {\n\t\tposition: static !important;\n\n\t\t> div {\n\t\t\tposition: absolute;\n\t\t\theight: 100%;\n\t\t}\n\t}\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
 };
 var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/es2019/lazy-node-view/node-view.js

@@ -1,4 +1,10 @@
+import memoize from 'lodash/memoize';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+const getEditorLineWidth = memoize(view => {
+  var _view$dom;
+  return (_view$dom = view.dom) === null || _view$dom === void 0 ? void 0 : _view$dom.clientWidth;
+});
+
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -12,7 +18,13 @@ export class LazyNodeView {
       this.dom = document.createElement('div');
       return;
     }
-    const fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    const toDOMConfiguration = {
+      editorLineWidth: getEditorLineWidth(view)
+    };
+    const fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node,
+    // We are injecting a second parameter to be used by the toDOM lazy node view implementations
+    // @ts-expect-error
+    toDOMConfiguration));
     this.dom = fallback.dom;
     this.contentDOM = fallback.contentDOM;
     if (this.dom instanceof HTMLElement) {

package/dist/es2019/media/index.js

@@ -7,4 +7,5 @@ export { captionMessages } from './messages/caption';
 export { dropPlaceholderMessages } from './messages/dropPlaceholder';
 export { altTextMessages } from './messages/altText';
 export { mediaResizeAnnouncerMessMessages } from './messages/mediaResizeAnnouncerMess';
-export { commentMessages } from './messages/comments';
+export { commentMessages } from './messages/comments';
+export { externalMediaMessages } from './messages/externalMedia';

package/dist/es2019/media/messages/externalMedia.js

@@ -0,0 +1,8 @@
+import { defineMessages } from 'react-intl-next';
+export const externalMediaMessages = defineMessages({
+  externalMediaFile: {
+    id: 'fabric.editor.externalMediaFile',
+    defaultMessage: 'External media file',
+    description: 'External media file'
+  }
+});

package/dist/es2019/media-single/CommentBadge.js

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -27,11 +27,11 @@ const commentBadgeEditorOverrides = (commentsOnMediaBugFixEnabled, badgeOffsetRi
   right: commentsOnMediaBugFixEnabled ? badgeOffsetRight : '14px',
   zIndex: layers.card()
 });
-const getBadgeSize = (width, height) => {
+export const getBadgeSize = (width, height) => {
   // width is the original width of image, not resized or currently rendered to user. Defaulting to medium for now
   return width && width < 70 || height && height < 70 ? 'small' : 'medium';
 };
-export const CommentBadge = ({
+export const CommentBadge = /*#__PURE__*/forwardRef(({
   intl,
   width,
   height,
@@ -42,7 +42,7 @@ export const CommentBadge = ({
   onMouseLeave,
   badgeOffsetRight,
   commentsOnMediaBugFixEnabled
-}) => {
+}, ref) => {
   const [badgeSize, setBadgeSize] = useState(getBadgeSize(width, height));
   const title = intl.formatMessage(messages.viewCommentsOnMedia);
   useEffect(() => {
@@ -73,6 +73,7 @@ export const CommentBadge = ({
     }
   }, [status]);
   return jsx("div", {
+    ref: ref,
     css: badgeOffsetRight ? [commentBadgeWrapper,
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
     commentBadgeEditorOverrides(commentsOnMediaBugFixEnabled, badgeOffsetRight)] : commentBadgeWrapper
@@ -105,4 +106,4 @@ export const CommentBadge = ({
       size: badgeSize
     })
   })));
-};
+});

package/dist/es2019/media-single/ExternalImageBadge.js

@@ -0,0 +1,64 @@
+import React, { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { useIntl } from 'react-intl-next';
+import InfoIcon from '@atlaskit/icon/glyph/info';
+import { Box, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { externalMediaMessages } from '../media';
+import { getBadgeSize } from './CommentBadge';
+const baseStyles = xcss({
+  position: 'absolute',
+  top: 'space.025',
+  borderRadius: 'border.radius',
+  backgroundColor: 'elevation.surface',
+  zIndex: 'tooltip',
+  lineHeight: "var(--ds-space-200, 16px)",
+  right: 'var(--right-offset)',
+  cursor: 'pointer'
+});
+export const ExternalImageBadge = ({
+  mediaWidth,
+  mediaHeight,
+  commentBadgeRightOffset = 0,
+  mediaElement
+}) => {
+  const intl = useIntl();
+  const message = intl.formatMessage(externalMediaMessages.externalMediaFile);
+  const [badgeSize, setBadgeSize] = useState(getBadgeSize(mediaWidth, mediaHeight));
+  // detect resize of media element to adjust badge size
+  // will combine with the comment badge resize observer when refactoring in the future to avoid multiple resize observers
+  useEffect(() => {
+    const observer = new ResizeObserver(debounce(entries => {
+      const [entry] = entries;
+      const {
+        width,
+        height
+      } = entry.contentRect;
+      setBadgeSize(getBadgeSize(width, height));
+    }));
+    if (mediaElement) {
+      observer.observe(mediaElement);
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [mediaElement]);
+  const baseRightOffset = badgeSize === 'medium' ? 4 : 2;
+  const rightOffset = baseRightOffset + commentBadgeRightOffset;
+  return /*#__PURE__*/React.createElement(Box
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+  , {
+    style: {
+      '--right-offset': `${rightOffset}px`
+    },
+    padding: badgeSize === 'medium' ? 'space.050' : 'space.0',
+    "data-external-image-badge": "true",
+    xcss: baseStyles,
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    size: "small",
+    label: message
+  })));
+};

package/dist/es2019/media-single/index.js

@@ -1,3 +1,4 @@
 export { MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_HIGHLIGHT_GAP, MEDIA_SINGLE_GUTTER_SIZE, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, Layout as MediaSingleLayout, DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, wrappedLayouts, CAPTION_PLACEHOLDER_ID } from './constants';
 export { getMediaSinglePixelWidth, calcMediaSinglePixelWidth, calcMediaSingleMaxWidth, getMediaSingleInitialWidth, calculateOffsetLeft, roundToNearest, calcMinWidth, getMaxWidthForNestedNode, getMaxWidthForNestedNodeNext, currentMediaNodeWithPos } from './utils';
-export { CommentBadge } from './CommentBadge';
+export { CommentBadge } from './CommentBadge';
+export { ExternalImageBadge } from './ExternalImageBadge';

package/dist/es2019/messages/media-insert.js

@@ -34,5 +34,15 @@ export const mediaInsertMessages = defineMessages({
     id: 'fabric.editor.media.insert.mediaAlt',
     defaultMessage: 'Preview for uploaded image or video file',
     description: 'Alt text describing a preview of an image uploaded.'
+  },
+  linkTabTitle: {
+    id: 'fabric.editor.media.insert.linkTabTitle',
+    defaultMessage: 'Link',
+    description: 'Title of the navigation tab that allows users to insert media from a URL or link'
+  },
+  mediaPickerPopupAriaLabel: {
+    id: 'fabric.editor.media.insert.mediaPickerPopupAriaLabel',
+    defaultMessage: 'Media picker',
+    description: 'Accessibility label for the media picker popup'
   }
 });

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "87.10.2";
+const packageVersion = "87.12.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it