@atlaskit/editor-common 87.10.2 → 87.12.0

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

@@ -100,7 +100,7 @@ const getNestedParentNode = (tablePos, state) => {
 const calcBreakoutNodeWidth = (layout, containerWidth, isFullWidthModeEnabled) => {
   return isFullWidthModeEnabled ? Math.min(containerWidth.lineLength, akEditorFullWidthLayoutWidth) : absoluteBreakoutWidth(layout, containerWidth.width);
 };
-export const getTableContainerWidth = (node, isCommentEditor) => {
+export const getTableContainerWidth = node => {
   if (node !== null && node !== void 0 && node.attrs.width) {
     return node.attrs.width;
   }

package/dist/es2019/styles/index.js

@@ -4,7 +4,7 @@ export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides,
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
-export { blockquoteSharedStyles } from './shared/blockquote';
+export { blockquoteSharedStyles, blockquoteSharedStylesNew } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';

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

@@ -37,4 +37,42 @@ export const blockquoteSharedStyles = css({
       display: 'inline-table'
     }
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const blockquoteSharedStylesNew = 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 ${`var(--ds-border, ${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: `${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/es2019/styles/shared/code-block.js

@@ -142,8 +142,10 @@ export const codeBlockSharedStyles = () => css`
 		.${CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG} {
 			background-color: ${`var(--ds-background-neutral, ${N30})`};
 			position: relative;
-			width: 2rem;
+			width: var(--lineNumberGutterWidth, 2rem);
+			padding: 0px ${"var(--ds-space-100, 8px)"};
 			flex-shrink: 0;
+			font-size: ${relativeFontSizeToBase16(fontSize())};
 		}
 
 		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTENT} {
@@ -178,12 +180,13 @@ export const codeBlockSharedStyles = () => css`
 		.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET} {
 			pointer-events: none;
 			user-select: none;
-			width: 2rem;
+			width: var(--lineNumberGutterWidth, 2rem);
 			left: 0;
 			position: absolute;
 			font-size: ${relativeFontSizeToBase16(fontSize())};
+			padding: 0px ${"var(--ds-space-100, 8px)"};
 			line-height: 1.5rem;
-			text-align: center;
+			text-align: right;
 			color: ${"var(--ds-text-subtlest, #505F79)"};
 		}
 	}

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

@@ -6,6 +6,7 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
 const lightPanelColors = {
   info: B50,
@@ -172,7 +173,7 @@ export const panelSharedStylesWithoutPrefix = () => css`
 		height: ${"var(--ds-space-300, 24px)"};
 		width: ${"var(--ds-space-300, 24px)"};
 		box-sizing: content-box;
-		padding-right: ${"var(--ds-space-100, 8px)"};
+		padding-right: ${fg('platform_editor_element_padding_changes_gate') ? "var(--ds-space-150, 12px)" : "var(--ds-space-100, 8px)"};
 		text-align: center;
 		user-select: none;
 		-moz-user-select: none;

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

@@ -12,7 +12,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "87.10.2";
+const packageVersion = "87.12.0";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -221,7 +221,7 @@ export const mediaWrapperStyle = props => css`
 
 	// Comments on media project adds comment badge as child of the media wrapper,
 	// thus we need to exclude it so that style is applied to intended div
-	& > div:not([data-comment-badge='true']) {
+	& > div:not([data-comment-badge='true'], [data-external-image-badge='true']) {
 		position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
 		height: 100%;
 		width: 100%;

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

@@ -1,6 +1,12 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
+import memoize from 'lodash/memoize';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+var getEditorLineWidth = memoize(function (view) {
+  var _view$dom;
+  return (_view$dom = view.dom) === null || _view$dom === void 0 ? void 0 : _view$dom.clientWidth;
+});
+
 /**
  * 🧱 Internal: Editor FE Platform
  *
@@ -15,7 +21,13 @@ export var LazyNodeView = /*#__PURE__*/function () {
       this.dom = document.createElement('div');
       return;
     }
-    var fallback = DOMSerializer.renderSpec(document, node.type.spec.toDOM(node));
+    var toDOMConfiguration = {
+      editorLineWidth: getEditorLineWidth(view)
+    };
+    var 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/esm/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/esm/media/messages/externalMedia.js

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

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * @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';
@@ -30,11 +30,11 @@ var commentBadgeEditorOverrides = function commentBadgeEditorOverrides(commentsO
     zIndex: layers.card()
   });
 };
-var getBadgeSize = function getBadgeSize(width, height) {
+export var 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';
 };
-export var CommentBadge = function CommentBadge(_ref) {
+export var CommentBadge = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var intl = _ref.intl,
     width = _ref.width,
     height = _ref.height,
@@ -79,6 +79,7 @@ export var CommentBadge = function CommentBadge(_ref) {
     }
   }, [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
@@ -111,4 +112,4 @@ export var CommentBadge = function CommentBadge(_ref) {
       size: badgeSize
     })
   })));
-};
+});

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

@@ -0,0 +1,68 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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';
+var 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 var 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 = useIntl();
+  var message = intl.formatMessage(externalMediaMessages.externalMediaFile);
+  var _useState = useState(getBadgeSize(mediaWidth, mediaHeight)),
+    _useState2 = _slicedToArray(_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
+  useEffect(function () {
+    var observer = new ResizeObserver(debounce(function (entries) {
+      var _entries = _slicedToArray(entries, 1),
+        entry = _entries[0];
+      var _entry$contentRect = entry.contentRect,
+        width = _entry$contentRect.width,
+        height = _entry$contentRect.height;
+      setBadgeSize(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.createElement(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.createElement(Tooltip, {
+    content: message
+  }, /*#__PURE__*/React.createElement(InfoIcon, {
+    size: "small",
+    label: message
+  })));
+};

package/dist/esm/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/esm/messages/media-insert.js

@@ -34,5 +34,15 @@ export var 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/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 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/esm/node-width/index.js

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

package/dist/esm/styles/index.js

@@ -4,7 +4,7 @@ export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides,
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
-export { blockquoteSharedStyles } from './shared/blockquote';
+export { blockquoteSharedStyles, blockquoteSharedStylesNew } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';

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

@@ -37,4 +37,42 @@ export var blockquoteSharedStyles = css({
       display: 'inline-table'
     }
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var blockquoteSharedStylesNew = 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(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(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/esm/styles/shared/code-block.js

@@ -22,9 +22,9 @@ export var CodeBlockSharedCssClassName = {
   CODEBLOCK_LINE_NUMBER_GUTTER_FG: 'line-number-gutter--fg'
 };
 export var codeBlockSharedStyles = function codeBlockSharedStyles() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", overflowShadow({
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, akEditorCodeFontFamily, akEditorTableCellMinWidth, CodeBlockSharedCssClassName.CODEBLOCK_START, CodeBlockSharedCssClassName.CODEBLOCK_END, CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER, "var(--ds-background-neutral, ".concat(N20, ")"), "var(--ds-border-radius, 3px)", 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(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(N30, ")"), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, relativeFontSizeToBase16(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(N30, ")"), "var(--ds-space-100, 8px)", "var(--ds-text-subtlest, ".concat(N400, ")"), relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_LINE_NUMBER_GUTTER_FG, "var(--ds-background-neutral, ".concat(N30, ")"), "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_FG, "var(--ds-text, ".concat(N800, ")"), "var(--ds-border-radius, 3px)", "var(--ds-space-100, 8px)", relativeFontSizeToBase16(fontSize()), CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER_LINE_NUMBER_WIDGET, relativeFontSizeToBase16(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/esm/styles/shared/panel.js

@@ -10,6 +10,7 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { akEditorTableCellMinWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
 import { akEditorCustomIconSize } from '@atlaskit/editor-shared-styles/consts';
 import { emojiImage, emojiSprite } from '@atlaskit/emoji';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B100, B400, B50, B75, G200, G400, G50, G75, N0, N20, N60, P100, P400, P50, P75, R100, R400, R50, R75, T100, T50, T75, Y200, Y400, Y50, Y75 } from '@atlaskit/theme/colors';
 var lightPanelColors = {
   info: B50,
@@ -162,7 +163,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…
 export var panelSharedStylesWithoutPrefix = function panelSharedStylesWithoutPrefix() {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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)", blockNodesVerticalMargin, "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", akEditorTableCellMinWidth, mainDynamicStyles(PanelType.INFO), PanelSharedCssClassName.icon, "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)", fg('platform_editor_element_padding_changes_gate') ? "var(--ds-space-150, 12px)" : "var(--ds-space-100, 8px)", iconDynamicStyles(PanelType.INFO), emojiSprite, panelEmojiSpriteVerticalAlignment, emojiImage, panelEmojiImageVerticalAlignment, "var(--ds-space-025, 2px)", "var(--ds-space-025, 2px)", PanelType.NOTE, mainDynamicStyles(PanelType.NOTE), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.NOTE), PanelType.TIP, mainDynamicStyles(PanelType.TIP), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.TIP), PanelType.WARNING, mainDynamicStyles(PanelType.WARNING), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.WARNING), PanelType.ERROR, mainDynamicStyles(PanelType.ERROR), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.ERROR), PanelType.SUCCESS, mainDynamicStyles(PanelType.SUCCESS), PanelSharedCssClassName.icon, iconDynamicStyles(PanelType.SUCCESS));
 };
 export var panelSharedStyles = function panelSharedStyles() {
   return css(_defineProperty({}, ".".concat(PanelSharedCssClassName.prefix), panelSharedStylesWithoutPrefix()));

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

@@ -20,7 +20,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 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/esm/ui/MediaSingle/styled.js

@@ -175,7 +175,7 @@ var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
 export var mediaWrapperStyle = function mediaWrapperStyle(props) {
-  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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 css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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');
 };
 export var MediaWrapper = function MediaWrapper(_ref3) {
   var children = _ref3.children,

package/dist/types/lazy-node-view/index.d.ts

@@ -1,9 +1,9 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { DispatchAnalyticsEvent } from '../analytics';
-import type { NodeViewConstructor } from './types';
+import type { LazyNodeViewToDOMConfiguration, NodeViewConstructor } from './types';
 export { convertToInlineCss } from './css-helper';
-export type { NodeViewConstructor };
+export type { NodeViewConstructor, LazyNodeViewToDOMConfiguration };
 /**
  * 📢 Public Type
  *

package/dist/types/lazy-node-view/types.d.ts

@@ -12,3 +12,6 @@ export type LoadedReactNodeViews = Record<string, NodeViewConstructor>;
  * 🧱 Internal: Editor FE Platform
  */
 export type CacheLoadedReactNodeViews = WeakMap<EditorView, LoadedReactNodeViews>;
+export type LazyNodeViewToDOMConfiguration = {
+    editorLineWidth: number;
+};

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

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

package/dist/types/media/messages/externalMedia.d.ts

@@ -0,0 +1,7 @@
+export declare const externalMediaMessages: {
+    externalMediaFile: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

package/dist/types/media-single/CommentBadge.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { jsx } from '@emotion/react';
 import type { IntlShape } from 'react-intl-next';
+export declare const getBadgeSize: (width?: number, height?: number) => "medium" | "small";
 export type CommentBadgeProps = {
     intl: IntlShape;
     width?: number;
@@ -15,4 +15,4 @@ export type CommentBadgeProps = {
     badgeOffsetRight?: string;
     commentsOnMediaBugFixEnabled?: boolean;
 };
-export declare const CommentBadge: ({ intl, width, height, status, mediaSingleElement, onClick, onMouseEnter, onMouseLeave, badgeOffsetRight, commentsOnMediaBugFixEnabled, }: CommentBadgeProps) => jsx.JSX.Element;
+export declare const CommentBadge: import("react").ForwardRefExoticComponent<CommentBadgeProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/media-single/ExternalImageBadge.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+type ExternalImageBadgeProps = {
+    mediaElement?: HTMLElement | null;
+    commentBadgeRightOffset?: number;
+    mediaHeight?: number;
+    mediaWidth?: number;
+};
+export declare const ExternalImageBadge: ({ mediaWidth, mediaHeight, commentBadgeRightOffset, mediaElement, }: ExternalImageBadgeProps) => JSX.Element;
+export {};

package/dist/types/media-single/index.d.ts

@@ -1,4 +1,5 @@
 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 { ExternalImageBadge } from './ExternalImageBadge';
 export type { CommentBadgeProps } from './CommentBadge';

package/dist/types/messages/media-insert.d.ts

@@ -34,4 +34,14 @@ export declare const mediaInsertMessages: {
         defaultMessage: string;
         description: string;
     };
+    linkTabTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    mediaPickerPopupAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };

package/dist/types/node-width/index.d.ts

@@ -11,5 +11,5 @@ export declare const layoutToWidth: {
  * If current node selection is not nested will return undefined
  */
 export declare const getParentNodeWidth: (pos: number | undefined, state: EditorState, containerWidth: EditorContainerWidth, isFullWidthModeEnabled?: boolean) => any;
-export declare const getTableContainerWidth: (node?: PMNode, isCommentEditor?: boolean) => number;
+export declare const getTableContainerWidth: (node?: PMNode) => number;
 export declare const getTableWidthWithNumberColumn: (node: PMNode, offset: number) => number;

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

@@ -4,7 +4,7 @@ export { tableSharedStyle, tableMarginTop, tableMarginBottom, tableMarginSides,
 export { AnnotationSharedClassNames, BlockAnnotationSharedClassNames, AnnotationSharedCSSByState, annotationSharedStyles, } from './shared/annotation';
 export { columnLayoutSharedStyle } from './shared/column-layout';
 export { mediaSingleSharedStyle, richMediaClassName } from './shared/media-single';
-export { blockquoteSharedStyles } from './shared/blockquote';
+export { blockquoteSharedStyles, blockquoteSharedStylesNew } from './shared/blockquote';
 export { headingsSharedStyles } from './shared/headings';
 export { ruleSharedStyles } from './shared/rule';
 export { whitespaceSharedStyles } from './shared/whitespace';

package/dist/types/styles/shared/blockquote.d.ts

@@ -1 +1,2 @@
 export declare const blockquoteSharedStyles: import("@emotion/react").SerializedStyles;
+export declare const blockquoteSharedStylesNew: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/lazy-node-view/index.d.ts

@@ -1,9 +1,9 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import type { DispatchAnalyticsEvent } from '../analytics';
-import type { NodeViewConstructor } from './types';
+import type { LazyNodeViewToDOMConfiguration, NodeViewConstructor } from './types';
 export { convertToInlineCss } from './css-helper';
-export type { NodeViewConstructor };
+export type { NodeViewConstructor, LazyNodeViewToDOMConfiguration };
 /**
  * 📢 Public Type
  *

package/dist/types-ts4.5/lazy-node-view/types.d.ts

@@ -12,3 +12,6 @@ export type LoadedReactNodeViews = Record<string, NodeViewConstructor>;
  * 🧱 Internal: Editor FE Platform
  */
 export type CacheLoadedReactNodeViews = WeakMap<EditorView, LoadedReactNodeViews>;
+export type LazyNodeViewToDOMConfiguration = {
+    editorLineWidth: number;
+};

package/dist/types-ts4.5/media/index.d.ts

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

package/dist/types-ts4.5/media/messages/externalMedia.d.ts

@@ -0,0 +1,7 @@
+export declare const externalMediaMessages: {
+    externalMediaFile: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};