@atlaskit/editor-common 88.11.0 → 88.12.1

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

@@ -10,6 +10,11 @@ export const toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Create and assign action items',
     description: ''
   },
+  closeInsertRightRail: {
+    id: 'fabric.editor.insertRightRail.close',
+    defaultMessage: 'Close',
+    description: 'Close button label'
+  },
   link: {
     id: 'fabric.editor.link',
     defaultMessage: 'Link',
@@ -30,6 +35,11 @@ export const toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Add image, video, or file',
     description: 'Insert one or more files, videos or images'
   },
+  insertRightRailTitle: {
+    id: 'fabric.editor.insertRightRail.title',
+    defaultMessage: 'Insert',
+    description: 'Insert a node into the document'
+  },
   insertMediaFromUrl: {
     id: 'fabric.editor.insertMediaFromUrl',
     defaultMessage: 'Image from link',

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 = "88.11.0";
+const packageVersion = "88.12.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -14,7 +14,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "88.11.0";
+const packageVersion = "88.12.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

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

@@ -249,7 +249,8 @@ 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'], [data-external-image-badge='true']) {
+	// remove [data-comment-badge='true'] when ff platform_editor_insert_media_plugin_phase_one is cleaned up
+	& > div:not([data-comment-badge='true'], [data-media-badges='true']) {
 		position: ${props.hasFallbackContainer ? 'absolute' : 'relative'};
 		height: 100%;
 		width: 100%;

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

@@ -163,6 +163,7 @@ export var 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/esm/insert/index.js

@@ -237,6 +237,20 @@ export var insertSelectedItem = function insertSelectedItem(maybeNode) {
        */
     } else if (node instanceof Node && node.isInline || isInputFragment) {
       var 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: fragment,
+          tr: tr,
+          position: {
+            start: start,
+            end: start
+          }
+        });
+      }
       tr = tr.replaceWith(start, start, fragment);
       if (opts.selectInlineNode) {
         // Select inserted node
@@ -282,4 +296,16 @@ 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
+var insertTemplateFragment = function insertTemplateFragment(_ref3) {
+  var fragment = _ref3.fragment,
+    tr = _ref3.tr,
+    position = _ref3.position;
+  var start = position.start;
+  var trWithInsert = pmSafeInsert(fragment, start)(tr);
+  tr.setSelection(trWithInsert.selection);
+  return tr;
+};

package/dist/esm/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';
+var baseStyles = xcss({
+  borderRadius: 'border.radius'
+});
+var smallBadgeStyles = xcss({
+  height: 'space.200',
+  width: 'space.200'
+});
+var mediumBadgeStyles = xcss({
+  height: 'space.300',
+  width: 'space.300'
+});
+export var CommentBadgeNext = function CommentBadgeNext(_ref) {
+  var _ref$status = _ref.status,
+    status = _ref$status === void 0 ? 'default' : _ref$status,
+    onClick = _ref.onClick,
+    onMouseEnter = _ref.onMouseEnter,
+    onMouseLeave = _ref.onMouseLeave,
+    badgeSize = _ref.badgeSize;
+  var intl = useIntl();
+  var title = intl.formatMessage(messages.viewCommentsOnMedia);
+  var colourToken = useMemo(function () {
+    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/esm/media-single/ExternalImageBadge.js

@@ -1,66 +1,26 @@
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-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';
 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 badgeSize = _ref.badgeSize;
   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")
-    },
+  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/esm/media-single/MediaBadges.js

@@ -0,0 +1,66 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useEffect, useState } from 'react';
+import debounce from 'lodash/debounce';
+import { Box, xcss } from '@atlaskit/primitives';
+var 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'
+});
+var resizeOffsetStyles = xcss({
+  right: 'space.150'
+});
+var smallBadgeStyles = xcss({
+  margin: 'space.025'
+});
+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 MediaBadges = function MediaBadges(_ref) {
+  var children = _ref.children,
+    mediaElement = _ref.mediaElement,
+    mediaWidth = _ref.mediaWidth,
+    mediaHeight = _ref.mediaHeight,
+    extendedResizeOffset = _ref.extendedResizeOffset;
+  var _useState = useState(getBadgeSize(mediaWidth, mediaHeight)),
+    _useState2 = _slicedToArray(_useState, 2),
+    badgeSize = _useState2[0],
+    setBadgeSize = _useState2[1];
+  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]);
+  if (typeof children === 'function') {
+    children = children({
+      badgeSize: 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/esm/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';

package/dist/esm/messages/insert-block.js

@@ -10,6 +10,11 @@ export var toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Create and assign action items',
     description: ''
   },
+  closeInsertRightRail: {
+    id: 'fabric.editor.insertRightRail.close',
+    defaultMessage: 'Close',
+    description: 'Close button label'
+  },
   link: {
     id: 'fabric.editor.link',
     defaultMessage: 'Link',
@@ -30,6 +35,11 @@ export var toolbarInsertBlockMessages = defineMessages({
     defaultMessage: 'Add image, video, or file',
     description: 'Insert one or more files, videos or images'
   },
+  insertRightRailTitle: {
+    id: 'fabric.editor.insertRightRail.title',
+    defaultMessage: 'Insert',
+    description: 'Insert a node into the document'
+  },
   insertMediaFromUrl: {
     id: 'fabric.editor.insertMediaFromUrl',
     defaultMessage: 'Image from link',

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 = "88.11.0";
+var packageVersion = "88.12.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -22,7 +22,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import { N0, N50A, N60A, N900 } from '@atlaskit/theme/colors';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "88.11.0";
+var packageVersion = "88.12.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

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

@@ -201,7 +201,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'], [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');
+  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// remove [data-comment-badge='true'] when ff platform_editor_insert_media_plugin_phase_one is cleaned up\n\t& > div:not([data-comment-badge='true'], [data-media-badges='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/analytics/types/enums.d.ts

@@ -169,6 +169,7 @@ export declare enum INPUT_METHOD {
     FLOATING_TB = "floatingToolbar",
     FORMATTING = "autoformatting",
     INSERT_MENU = "insertMenu",
+    INSERT_MENU_RIGHT_RAIL = "insertMenuRightRail",
     KEYBOARD = "keyboard",
     MEDIA_PICKER = "mediaPicker",
     MACRO_BROWSER = "macroBrowser",

package/dist/types/card/types.d.ts

@@ -3,7 +3,7 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ACTION, EditorAnalyticsAPI, INPUT_METHOD } from '../analytics';
-import { type CardAppearance, type CardProvider, type ProviderFactory } from '../provider-factory';
+import { type CardAppearance, type CardProvider } from '../provider-factory';
 import type { Command, FloatingToolbarItem } from '../types';
 export interface OptionConfig {
     appearance?: CardAppearance;
@@ -20,7 +20,7 @@ export type QueueCardsFromTransactionAction = (state: EditorState, tr: Transacti
 export type HideLinkToolbarAction = (tr: Transaction) => Transaction;
 export type ChangeSelectedCardToLink = (text?: string, href?: string, sendAnalytics?: boolean, node?: Node, pos?: number, editorAnalyticsApi?: EditorAnalyticsAPI) => Command;
 export type SetSelectedCardAppearance = (appearance: CardAppearance, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
-export type GetStartingToolbarItems = (intl: IntlShape, link: string, providerFactory: ProviderFactory, onEditLink: Command, metadata: {
+export type GetStartingToolbarItems = (intl: IntlShape, link: string, onEditLink: Command, metadata: {
     url: string;
     title: string;
 }) => FloatingToolbarItem<Command>[];

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type CommentBadgeProps = {
+    status?: 'default' | 'entered' | 'active';
+    mediaSingleElement?: HTMLElement | null;
+    onClick: (e: React.MouseEvent) => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    badgeSize: 'small' | 'medium';
+};
+export declare const CommentBadgeNext: ({ status, onClick, onMouseEnter, onMouseLeave, badgeSize, }: CommentBadgeProps) => JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+type ExternalImageBadgeProps = {
+    mediaElement?: HTMLElement | null;
+    mediaHeight?: number;
+    mediaWidth?: number;
+    extendedResizeOffset?: boolean;
+    children: ReactNode | ((props: {
+        badgeSize: 'medium' | 'small';
+    }) => ReactNode);
+};
+export declare const MediaBadges: ({ children, mediaElement, mediaWidth, mediaHeight, extendedResizeOffset, }: ExternalImageBadgeProps) => JSX.Element | null;
+export {};

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

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

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

@@ -9,6 +9,11 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    closeInsertRightRail: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     link: {
         id: string;
         defaultMessage: string;
@@ -29,6 +34,11 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    insertRightRailTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     insertMediaFromUrl: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/analytics/types/enums.d.ts

@@ -169,6 +169,7 @@ export declare enum INPUT_METHOD {
     FLOATING_TB = "floatingToolbar",
     FORMATTING = "autoformatting",
     INSERT_MENU = "insertMenu",
+    INSERT_MENU_RIGHT_RAIL = "insertMenuRightRail",
     KEYBOARD = "keyboard",
     MEDIA_PICKER = "mediaPicker",
     MACRO_BROWSER = "macroBrowser",

package/dist/types-ts4.5/card/types.d.ts

@@ -3,7 +3,7 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { ACTION, EditorAnalyticsAPI, INPUT_METHOD } from '../analytics';
-import { type CardAppearance, type CardProvider, type ProviderFactory } from '../provider-factory';
+import { type CardAppearance, type CardProvider } from '../provider-factory';
 import type { Command, FloatingToolbarItem } from '../types';
 export interface OptionConfig {
     appearance?: CardAppearance;
@@ -20,7 +20,7 @@ export type QueueCardsFromTransactionAction = (state: EditorState, tr: Transacti
 export type HideLinkToolbarAction = (tr: Transaction) => Transaction;
 export type ChangeSelectedCardToLink = (text?: string, href?: string, sendAnalytics?: boolean, node?: Node, pos?: number, editorAnalyticsApi?: EditorAnalyticsAPI) => Command;
 export type SetSelectedCardAppearance = (appearance: CardAppearance, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
-export type GetStartingToolbarItems = (intl: IntlShape, link: string, providerFactory: ProviderFactory, onEditLink: Command, metadata: {
+export type GetStartingToolbarItems = (intl: IntlShape, link: string, onEditLink: Command, metadata: {
     url: string;
     title: string;
 }) => FloatingToolbarItem<Command>[];

package/dist/types-ts4.5/media-single/CommentBadgeNext.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type CommentBadgeProps = {
+    status?: 'default' | 'entered' | 'active';
+    mediaSingleElement?: HTMLElement | null;
+    onClick: (e: React.MouseEvent) => void;
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    onMouseLeave?: (e: React.MouseEvent) => void;
+    badgeSize: 'small' | 'medium';
+};
+export declare const CommentBadgeNext: ({ status, onClick, onMouseEnter, onMouseLeave, badgeSize, }: CommentBadgeProps) => JSX.Element;
+export {};

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

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

package/dist/types-ts4.5/media-single/MediaBadges.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+type ExternalImageBadgeProps = {
+    mediaElement?: HTMLElement | null;
+    mediaHeight?: number;
+    mediaWidth?: number;
+    extendedResizeOffset?: boolean;
+    children: ReactNode | ((props: {
+        badgeSize: 'medium' | 'small';
+    }) => ReactNode);
+};
+export declare const MediaBadges: ({ children, mediaElement, mediaWidth, mediaHeight, extendedResizeOffset, }: ExternalImageBadgeProps) => JSX.Element | null;
+export {};

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

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

package/dist/types-ts4.5/messages/insert-block.d.ts

@@ -9,6 +9,11 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    closeInsertRightRail: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     link: {
         id: string;
         defaultMessage: string;
@@ -29,6 +34,11 @@ export declare const toolbarInsertBlockMessages: {
         defaultMessage: string;
         description: string;
     };
+    insertRightRailTitle: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     insertMediaFromUrl: {
         id: string;
         defaultMessage: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-common",
-	"version": "88.11.0",
+	"version": "88.12.1",
 	"description": "A package that contains common classes and components for editor and renderer",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -140,7 +140,7 @@
 		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/profilecard": "^19.26.0",
 		"@atlaskit/section-message": "^6.6.0",
-		"@atlaskit/smart-card": "^27.20.0",
+		"@atlaskit/smart-card": "^28.0.0",
 		"@atlaskit/smart-user-picker": "^6.10.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/task-decision": "^17.10.0",