@atlaskit/editor-common 88.10.0 → 88.12.0

package/dist/cjs/utils/document.js

@@ -11,14 +11,7 @@ exports.hasVisibleContent = hasVisibleContent;
 exports.isEmptyDocument = isEmptyDocument;
 exports.isSelectionEndOfParagraph = void 0;
 exports.nodesBetweenChanged = nodesBetweenChanged;
-exports.processRawValue = processRawValue;
-var _transforms = require("@atlaskit/adf-utils/transforms");
-var _model = require("@atlaskit/editor-prosemirror/model");
-var _analytics = require("../analytics");
 var _editorCoreUtils = require("./editor-core-utils");
-var _privacyFilter = require("./filter/privacy-filter");
-var _trackUnsupportedContent = require("./track-unsupported-content");
-var _validateUsingSpec = require("./validate-using-spec");
 var getStepRange = exports.getStepRange = function getStepRange(transaction) {
   var from = -1;
   var to = -1;
@@ -79,179 +72,6 @@ function nodesBetweenChanged(tr, f, startPos) {
   }
   tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
 }
-function processRawValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
-  if (!value) {
-    return;
-  }
-  var node;
-  if (typeof value === 'string') {
-    try {
-      if (contentTransformer) {
-        var doc = contentTransformer.parse(value);
-        node = doc.toJSON();
-      } else {
-        node = JSON.parse(value);
-      }
-    } catch (e) {
-      // eslint-disable-next-line no-console
-      console.error("Error processing value: ".concat(value, " isn't a valid JSON"));
-      return;
-    }
-  } else {
-    node = value;
-  }
-  if (Array.isArray(node)) {
-    // eslint-disable-next-line no-console
-    console.error("Error processing value: ".concat(node, " is an array, but it must be an object."));
-    return;
-  }
-  try {
-    // ProseMirror always require a child under doc
-    if (node.type === 'doc') {
-      if (Array.isArray(node.content) && node.content.length === 0) {
-        node.content.push({
-          type: 'paragraph',
-          content: []
-        });
-      }
-      // Just making sure doc is always valid
-      if (!node.version) {
-        node.version = 1;
-      }
-    }
-    if (contentTransformer) {
-      return _model.Node.fromJSON(schema, node);
-    }
-
-    // link mark on mediaSingle is deprecated, need to move link mark to child media node
-    // https://product-fabric.atlassian.net/browse/ED-14043
-    var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(node),
-      transformedAdf = _transformMediaLinkMa.transformedAdf,
-      isTransformed = _transformMediaLinkMa.isTransformed;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.MEDIA_LINK_TRANSFORMED,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-
-    // See: HOT-97965 https://product-fabric.atlassian.net/browse/ED-14400
-    // We declared in code mark spec that links and marks should not co-exist on
-    // text nodes. This util strips code marks from bad text nodes and preserves links.
-    // Otherwise, prosemirror will try to repair the invalid document by stripping links
-    // and preserving code marks during content changes.
-    var _transformTextLinkCod = (0, _transforms.transformTextLinkCodeMarks)(transformedAdf);
-    transformedAdf = _transformTextLinkCod.transformedAdf;
-    isTransformed = _transformTextLinkCod.isTransformed;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.TEXT_LINK_MARK_TRANSFORMED,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-    var discardedMarks = [];
-    var _transformDedupeMarks = (0, _transforms.transformDedupeMarks)(transformedAdf);
-    transformedAdf = _transformDedupeMarks.transformedAdf;
-    isTransformed = _transformDedupeMarks.isTransformed;
-    discardedMarks = _transformDedupeMarks.discardedMarks;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.DEDUPE_MARKS_TRANSFORMED_V2,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
-        attributes: {
-          /** UGC WARNING
-           *
-           * DO NOT include the `mark` attributes inside, we map here to only
-           * extract the mark type as that is the only non-UGC safe information
-           * that we can add to event-attributes
-           *
-           */
-          discardedMarkTypes: discardedMarks.map(function (mark) {
-            return mark.type;
-          })
-        }
-      });
-    }
-    var _transformNodesMissin = (0, _transforms.transformNodesMissingContent)(transformedAdf);
-    transformedAdf = _transformNodesMissin.transformedAdf;
-    isTransformed = _transformNodesMissin.isTransformed;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.NODES_MISSING_CONTENT_TRANSFORMED,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-    var _transformIndentation = (0, _transforms.transformIndentationMarks)(transformedAdf);
-    transformedAdf = _transformIndentation.transformedAdf;
-    isTransformed = _transformIndentation.isTransformed;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.INDENTATION_MARKS_TRANSFORMED,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-    var _transformInvalidMedi = (0, _transforms.transformInvalidMediaContent)(transformedAdf);
-    transformedAdf = _transformInvalidMedi.transformedAdf;
-    isTransformed = _transformInvalidMedi.isTransformed;
-    if (isTransformed && dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.INVALID_MEDIA_CONTENT_TRANSFORMED,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-    var entity = (0, _validateUsingSpec.validateADFEntity)(schema, transformedAdf || node, dispatchAnalyticsEvent);
-    var newEntity = maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent);
-    var parsedDoc = _model.Node.fromJSON(schema, newEntity);
-
-    // throws an error if the document is invalid
-    try {
-      parsedDoc.check();
-    } catch (err) {
-      if (dispatchAnalyticsEvent) {
-        dispatchAnalyticsEvent({
-          action: _analytics.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
-          actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-          eventType: _analytics.EVENT_TYPE.OPERATIONAL
-        });
-      }
-      throw err;
-    }
-    if (dispatchAnalyticsEvent) {
-      (0, _trackUnsupportedContent.findAndTrackUnsupportedContentNodes)(parsedDoc, schema, dispatchAnalyticsEvent);
-    }
-    return parsedDoc;
-  } catch (e) {
-    if (dispatchAnalyticsEvent) {
-      dispatchAnalyticsEvent({
-        action: _analytics.ACTION.DOCUMENT_PROCESSING_ERROR,
-        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
-        eventType: _analytics.EVENT_TYPE.OPERATIONAL
-      });
-    }
-
-    // eslint-disable-next-line no-console
-    console.error("Error processing document:\n".concat(e instanceof Error ? e.message : String(e), "\n\n"), JSON.stringify(node));
-    if (isProseMirrorSchemaCheckError(e)) {
-      throw e;
-    }
-    return;
-  }
-}
-function isProseMirrorSchemaCheckError(error) {
-  return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
-}
-var maySanitizePrivateContent = function maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent) {
-  if (sanitizePrivateContent && providerFactory) {
-    return (0, _privacyFilter.sanitizeNodeForPrivacy)(entity, providerFactory);
-  }
-  return entity;
-};
 
 /**
  * Returns false if node contains only empty inline nodes and hardBreaks.

package/dist/cjs/utils/index.js

@@ -922,7 +922,7 @@ exports.pmHistoryPluginKey = void 0;
 Object.defineProperty(exports, "processRawValue", {
   enumerable: true,
   get: function get() {
-    return _document.processRawValue;
+    return _processRawValue.processRawValue;
   }
 });
 Object.defineProperty(exports, "removeBlockMarks", {
@@ -1186,6 +1186,7 @@ var _referentiality = require("./referentiality");
 var _list = require("./list");
 var _hyperlink = require("./hyperlink");
 var _grid = require("./grid");
+var _processRawValue = require("./processRawValue");
 var _richMediaUtils = require("./rich-media-utils");
 var _privacyFilter = require("./filter/privacy-filter");
 var _datasource = require("./datasource");
@@ -1208,6 +1209,21 @@ var _pageElementCounts = require("./page-element-counts");
  * Use entry-point `@atlaskit/editor-common/utils/analytics` instead
  */
 
+/**
+ * @private
+ * @deprecated
+ *
+ * Private API - should not be used. Use `@atlaskit/editor-common/is-performance-api-available` if required.
+ *
+ */
+
+/**
+ * @private
+ * @deprecated
+ *
+ * Private API - should not be used. Use `@atlaskit/editor-common/performance/navigation` if required.
+ */
+
 /**
  * @deprecated - [ED-23844] moving to own entry point @atlaskit/editor-common/whitespace
  */
@@ -1221,6 +1237,21 @@ var _pageElementCounts = require("./page-element-counts");
 
 // prosemirror-history does not export its plugin key
 var pmHistoryPluginKey = exports.pmHistoryPluginKey = 'history$';
+
+/**
+ * @private
+ * @deprecated
+ *
+ * Use `@atlaskit/editor-common/process-raw-value` entry-point instead.
+ */
+
+/**
+ * @private
+ * @deprecated
+ *
+ * Private API - do not use.
+ */
+
 function shallowEqual() {
   var obj1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var obj2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

package/dist/cjs/utils/processRawValue.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processRawValue = processRawValue;
+var _transforms = require("@atlaskit/adf-utils/transforms");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _analytics = require("../analytics");
+var _privacyFilter = require("./filter/privacy-filter");
+var _trackUnsupportedContent = require("./track-unsupported-content");
+var _validateUsingSpec = require("./validate-using-spec");
+function processRawValue(schema, value, providerFactory, sanitizePrivateContent, contentTransformer, dispatchAnalyticsEvent) {
+  if (!value) {
+    return;
+  }
+  var node;
+  if (typeof value === 'string') {
+    try {
+      if (contentTransformer) {
+        var doc = contentTransformer.parse(value);
+        node = doc.toJSON();
+      } else {
+        node = JSON.parse(value);
+      }
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error("Error processing value: ".concat(value, " isn't a valid JSON"));
+      return;
+    }
+  } else {
+    node = value;
+  }
+  if (Array.isArray(node)) {
+    // eslint-disable-next-line no-console
+    console.error("Error processing value: ".concat(node, " is an array, but it must be an object."));
+    return;
+  }
+  try {
+    // ProseMirror always require a child under doc
+    if (node.type === 'doc') {
+      if (Array.isArray(node.content) && node.content.length === 0) {
+        node.content.push({
+          type: 'paragraph',
+          content: []
+        });
+      }
+      // Just making sure doc is always valid
+      if (!node.version) {
+        node.version = 1;
+      }
+    }
+    if (contentTransformer) {
+      return _model.Node.fromJSON(schema, node);
+    }
+
+    // link mark on mediaSingle is deprecated, need to move link mark to child media node
+    // https://product-fabric.atlassian.net/browse/ED-14043
+    var _transformMediaLinkMa = (0, _transforms.transformMediaLinkMarks)(node),
+      transformedAdf = _transformMediaLinkMa.transformedAdf,
+      isTransformed = _transformMediaLinkMa.isTransformed;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.MEDIA_LINK_TRANSFORMED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    // See: HOT-97965 https://product-fabric.atlassian.net/browse/ED-14400
+    // We declared in code mark spec that links and marks should not co-exist on
+    // text nodes. This util strips code marks from bad text nodes and preserves links.
+    // Otherwise, prosemirror will try to repair the invalid document by stripping links
+    // and preserving code marks during content changes.
+    var _transformTextLinkCod = (0, _transforms.transformTextLinkCodeMarks)(transformedAdf);
+    transformedAdf = _transformTextLinkCod.transformedAdf;
+    isTransformed = _transformTextLinkCod.isTransformed;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.TEXT_LINK_MARK_TRANSFORMED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+    var discardedMarks = [];
+    var _transformDedupeMarks = (0, _transforms.transformDedupeMarks)(transformedAdf);
+    transformedAdf = _transformDedupeMarks.transformedAdf;
+    isTransformed = _transformDedupeMarks.isTransformed;
+    discardedMarks = _transformDedupeMarks.discardedMarks;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.DEDUPE_MARKS_TRANSFORMED_V2,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          /** UGC WARNING
+           *
+           * DO NOT include the `mark` attributes inside, we map here to only
+           * extract the mark type as that is the only non-UGC safe information
+           * that we can add to event-attributes
+           *
+           */
+          discardedMarkTypes: discardedMarks.map(function (mark) {
+            return mark.type;
+          })
+        }
+      });
+    }
+    var _transformNodesMissin = (0, _transforms.transformNodesMissingContent)(transformedAdf);
+    transformedAdf = _transformNodesMissin.transformedAdf;
+    isTransformed = _transformNodesMissin.isTransformed;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.NODES_MISSING_CONTENT_TRANSFORMED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+    var _transformIndentation = (0, _transforms.transformIndentationMarks)(transformedAdf);
+    transformedAdf = _transformIndentation.transformedAdf;
+    isTransformed = _transformIndentation.isTransformed;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.INDENTATION_MARKS_TRANSFORMED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+    var _transformInvalidMedi = (0, _transforms.transformInvalidMediaContent)(transformedAdf);
+    transformedAdf = _transformInvalidMedi.transformedAdf;
+    isTransformed = _transformInvalidMedi.isTransformed;
+    if (isTransformed && dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.INVALID_MEDIA_CONTENT_TRANSFORMED,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+    var entity = (0, _validateUsingSpec.validateADFEntity)(schema, transformedAdf || node, dispatchAnalyticsEvent);
+    var newEntity = maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent);
+    var parsedDoc = _model.Node.fromJSON(schema, newEntity);
+
+    // throws an error if the document is invalid
+    try {
+      parsedDoc.check();
+    } catch (err) {
+      if (dispatchAnalyticsEvent) {
+        dispatchAnalyticsEvent({
+          action: _analytics.ACTION.INVALID_PROSEMIRROR_DOCUMENT,
+          actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+          eventType: _analytics.EVENT_TYPE.OPERATIONAL
+        });
+      }
+      throw err;
+    }
+    if (dispatchAnalyticsEvent) {
+      (0, _trackUnsupportedContent.findAndTrackUnsupportedContentNodes)(parsedDoc, schema, dispatchAnalyticsEvent);
+    }
+    return parsedDoc;
+  } catch (e) {
+    if (dispatchAnalyticsEvent) {
+      dispatchAnalyticsEvent({
+        action: _analytics.ACTION.DOCUMENT_PROCESSING_ERROR,
+        actionSubject: _analytics.ACTION_SUBJECT.EDITOR,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL
+      });
+    }
+
+    // eslint-disable-next-line no-console
+    console.error("Error processing document:\n".concat(e instanceof Error ? e.message : String(e), "\n\n"), JSON.stringify(node));
+    if (isProseMirrorSchemaCheckError(e)) {
+      throw e;
+    }
+    return;
+  }
+}
+function isProseMirrorSchemaCheckError(error) {
+  return error instanceof RangeError && (!!error.message.match(/^Invalid collection of marks for node/) || !!error.message.match(/^Invalid content for node/));
+}
+var maySanitizePrivateContent = function maySanitizePrivateContent(entity, providerFactory, sanitizePrivateContent) {
+  if (sanitizePrivateContent && providerFactory) {
+    return (0, _privacyFilter.sanitizeNodeForPrivacy)(entity, providerFactory);
+  }
+  return entity;
+};

package/dist/es2019/analytics/types/enums.js

@@ -163,6 +163,7 @@ export let INPUT_METHOD = /*#__PURE__*/function (INPUT_METHOD) {
   INPUT_METHOD["FLOATING_TB"] = "floatingToolbar";
   INPUT_METHOD["FORMATTING"] = "autoformatting";
   INPUT_METHOD["INSERT_MENU"] = "insertMenu";
+  INPUT_METHOD["INSERT_MENU_RIGHT_RAIL"] = "insertMenuRightRail";
   INPUT_METHOD["KEYBOARD"] = "keyboard";
   INPUT_METHOD["MEDIA_PICKER"] = "mediaPicker";
   INPUT_METHOD["MACRO_BROWSER"] = "macroBrowser";

package/dist/es2019/insert/index.js

@@ -239,6 +239,20 @@ export const insertSelectedItem = (maybeNode, opts = {}) => (state, tr, start) =
      */
   } else if (node instanceof Node && node.isInline || isInputFragment) {
     const fragment = isInputFragment ? node : Fragment.fromArray([node, state.schema.text(' ')]);
+
+    // For platform_editor_element_level_templates experiment only
+    // clean up ticket ED-24873
+    // @ts-ignore
+    if (opts.isTemplate) {
+      return insertTemplateFragment({
+        fragment,
+        tr,
+        position: {
+          start,
+          end: start
+        }
+      });
+    }
     tr = tr.replaceWith(start, start, fragment);
     if (opts.selectInlineNode) {
       // Select inserted node
@@ -285,4 +299,19 @@ export function contentAllowedInCodeBlock(state) {
     return isAllowedChild = node.type === state.schema.nodes.listItem || node.type === state.schema.nodes.bulletList || node.type === state.schema.nodes.orderedList || node.type === state.schema.nodes.paragraph || node.isInline || node.type === state.schema.nodes.panel || node.isText;
   });
   return isAllowedChild;
-}
+}
+
+// For platform_editor_element_level_templates experiment only
+// clean up ticket ED-24873
+const insertTemplateFragment = ({
+  fragment,
+  tr,
+  position
+}) => {
+  const {
+    start
+  } = position;
+  const trWithInsert = pmSafeInsert(fragment, start)(tr);
+  tr.setSelection(trWithInsert.selection);
+  return tr;
+};

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

@@ -0,0 +1,51 @@
+import React, { useMemo } from 'react';
+import { useIntl } from 'react-intl-next';
+import CommentIcon from '@atlaskit/icon/glyph/comment';
+import { Pressable, xcss } from '@atlaskit/primitives';
+import Tooltip from '@atlaskit/tooltip';
+import { commentMessages as messages } from '../media';
+const baseStyles = xcss({
+  borderRadius: 'border.radius'
+});
+const smallBadgeStyles = xcss({
+  height: 'space.200',
+  width: 'space.200'
+});
+const mediumBadgeStyles = xcss({
+  height: 'space.300',
+  width: 'space.300'
+});
+export const CommentBadgeNext = ({
+  status = 'default',
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  badgeSize
+}) => {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.viewCommentsOnMedia);
+  const colourToken = useMemo(() => {
+    switch (status) {
+      case 'active':
+        return 'color.background.accent.yellow.subtlest.pressed';
+      case 'entered':
+        return 'color.background.accent.yellow.subtlest.hovered';
+      default:
+        return 'color.background.accent.yellow.subtlest';
+    }
+  }, [status]);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    position: "top",
+    content: title
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    xcss: [baseStyles, badgeSize === 'medium' ? mediumBadgeStyles : smallBadgeStyles],
+    padding: "space.0",
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    backgroundColor: colourToken
+  }, /*#__PURE__*/React.createElement(CommentIcon, {
+    label: title,
+    size: badgeSize
+  })));
+};

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

@@ -1,62 +1,27 @@
-import React, { useEffect, useState } from 'react';
-import debounce from 'lodash/debounce';
+import React from 'react';
 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
+  badgeSize
 }) => {
   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`
-    },
+  return /*#__PURE__*/React.createElement(Box, {
     padding: badgeSize === 'medium' ? 'space.050' : 'space.0',
-    "data-external-image-badge": "true",
     xcss: baseStyles,
     tabIndex: 0
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    content: message
+    content: message,
+    position: "top"
   }, /*#__PURE__*/React.createElement(InfoIcon, {
     size: "small",
     label: message

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

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Box, xcss } from '@atlaskit/primitives';
+const containerStyles = xcss({
+  display: 'flex',
+  position: 'absolute',
+  top: 'space.0',
+  right: 'space.0',
+  lineHeight: "var(--ds-space-200, 16px)",
+  gap: 'space.025',
+  zIndex: 'card',
+  height: 'fit-content',
+  width: 'fit-content',
+  margin: 'space.075'
+});
+const resizeOffsetStyles = xcss({
+  right: 'space.150'
+});
+const smallBadgeStyles = xcss({
+  margin: 'space.025'
+});
+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 MediaBadges = ({
+  children,
+  mediaElement,
+  mediaWidth,
+  mediaHeight,
+  extendedResizeOffset
+}) => {
+  const [badgeSize, setBadgeSize] = useState(getBadgeSize(mediaWidth, mediaHeight));
+  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]);
+  if (typeof children === 'function') {
+    children = children({
+      badgeSize
+    });
+  }
+  if (!mediaElement || React.Children.count(children) === 0) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: "media-badges",
+    "data-media-badges": "true",
+    xcss: [containerStyles, extendedResizeOffset && resizeOffsetStyles, badgeSize === 'small' && smallBadgeStyles]
+  }, children);
+};

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

@@ -1,4 +1,6 @@
 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 { CommentBadgeNext } from './CommentBadgeNext';
+export { ExternalImageBadge } from './ExternalImageBadge';
+export { MediaBadges } from './MediaBadges';