@atlaskit/editor-core 187.8.11 → 187.9.0

package/dist/esm/ui/ElementBrowser/components/ElementSearch.js

@@ -19,6 +19,7 @@ function ElementSearch(_ref) {
     formatMessage = _ref.intl.formatMessage,
     focus = _ref.focus,
     onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown,
     searchTerm = _ref.searchTerm;
   var ref = useFocus(focus);
   var onChange = function onChange(_ref2) {
@@ -34,6 +35,7 @@ function ElementSearch(_ref) {
     onChange: onChange,
     onClick: onClick,
     onFocus: onFocus,
+    onKeyDown: onKeyDown,
     onBlur: onBlur,
     elemBeforeInput: jsx("div", {
       css: elementBeforeInput,
@@ -65,10 +67,10 @@ var placeHolderMessage = {
   description: 'Search field placeholder'
 };
 var styledShortcut = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  padding: ", "px ", "px;\n  width: ", "px;\n"])), shortcutStyle, GRID_SIZE / 2, GRID_SIZE, GRID_SIZE * 6);
-var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px 6px ", "px 0;\n    }\n  }\n"])), GRID_SIZE * 6, GRID_SIZE, relativeFontSizeToBase16(14), GRID_SIZE, GRID_SIZE);
+var wrapper = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    border-radius: ", "px;\n    flex: 1 1 100%;\n    overflow: visible;\n    & > [data-ds--text-field--input] {\n      margin-bottom: 3px;\n      font-size: ", ";\n      padding: ", "px ", " ", "px 0;\n    }\n  }\n"])), GRID_SIZE * 6, GRID_SIZE, relativeFontSizeToBase16(14), GRID_SIZE, "var(--ds-space-075, 6px)", GRID_SIZE);
 var wrapperInline = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  & > [data-ds--text-field--container] {\n    height: ", "px;\n    flex: none;\n    overflow: revert;\n  }\n"])), GRID_SIZE * 5);
-var elementBeforeInput = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 1px 6px 0 8px;\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-icon, ".concat(N200, ")"));
-var elementAfterInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 8px;\n  height: ", ";\n  text-align: center;\n"])), SEARCH_ITEM_HEIGHT_WIDTH);
+var elementBeforeInput = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  margin: 1px ", " 0 ", ";\n  color: ", ";\n\n  // Custom SearchIcon style\n  span,\n  svg {\n    height: 20px;\n    width: 20px;\n  }\n"])), "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-icon, ".concat(N200, ")"));
+var elementAfterInput = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin: 0 ", ";\n  height: ", ";\n  text-align: center;\n"])), "var(--ds-space-100, 8px)", SEARCH_ITEM_HEIGHT_WIDTH);
 var MemoizedElementSearchWithAnalytics = /*#__PURE__*/memo(withAnalyticsContext({
   component: 'Searchbar'
 })(injectIntl(ElementSearch)));

package/dist/esm/ui/ElementBrowser/components/StatelessElementBrowser.js

@@ -20,7 +20,7 @@ var baseBrowserContainerStyles = css(_templateObject2 || (_templateObject2 = _ta
 var mobileElementBrowserContainer = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: column;\n"])), baseBrowserContainerStyles);
 var elementBrowserContainer = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", ";\n  flex-direction: row;\n"])), baseBrowserContainerStyles);
 var baseSidebarStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  overflow-x: auto;\n  overflow-y: hidden;\n"])));
-var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: 12px 12px 0 12px;\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT);
+var mobileSideBar = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n  padding: ", " ", " 0\n    ", ";\n"])), baseSidebarStyles, INLINE_SIDEBAR_HEIGHT, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
 var mobileSideBarShowCategories = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  flex: 0 0 auto;\n"])));
 var sideBar = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 'auto';\n"])), baseSidebarStyles);
 var sideBarShowCategories = css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  ", ";\n  flex: 0 0 ", ";\n"])), baseSidebarStyles, SIDEBAR_WIDTH);
@@ -33,6 +33,7 @@ var categoryListWrapper = css(_templateObject15 || (_templateObject15 = _taggedT
 function StatelessElementBrowser(props) {
   var items = props.items,
     onSelectItem = props.onSelectItem,
+    onInsertItem = props.onInsertItem,
     viewMoreItem = props.viewMoreItem;
   var _useContainerWidth = useContainerWidth(),
     containerWidth = _useContainerWidth.containerWidth,
@@ -82,10 +83,11 @@ function StatelessElementBrowser(props) {
     if (e.key !== 'Enter') {
       return;
     }
-    if (onSelectItem && selectedItem != null) {
-      onSelectItem(selectedItem);
+    if (onInsertItem && selectedItem != null) {
+      onInsertItem(selectedItem);
     }
-  }, [onSelectItem, selectedItem]);
+    e.preventDefault();
+  }, [onInsertItem, selectedItem]);
 
   /**
    * On arrow key selection and clicks the selectedItemIndex will change.
@@ -146,13 +148,13 @@ function MobileBrowser(_ref) {
     viewMoreItem = _ref.viewMoreItem;
   return jsx("div", {
     css: mobileElementBrowserContainer,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "mobile__element-browser"
   }, jsx("div", {
     css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
   }, showSearch && jsx(ElementSearch, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,
@@ -225,13 +227,13 @@ function DesktopBrowser(_ref2) {
     createAnalyticsEvent: createAnalyticsEvent
   }))), jsx("div", {
     css: mainContent,
-    onKeyPress: onKeyPress,
     onKeyDown: onKeyDown,
     "data-testid": "main-content"
   }, showSearch && jsx("div", {
     css: searchContainer
   }, jsx(ElementSearch, {
     onSearch: onSearch,
+    onKeyDown: onKeyPress,
     mode: mode,
     focus: focusOnSearch,
     onClick: setFocusOnSearch,

package/dist/esm/ui/Resizer/ResizeLabel/index.js

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { wrapper, text, smallText } from './styles';
+var ResizeLabelBreakoutWidth = 110;
+var ResizeLabel = function ResizeLabel(props) {
+  return jsx("div", {
+    css: wrapper
+  }, jsx("span", {
+    css: [text, props.containerWidth < ResizeLabelBreakoutWidth && smallText]
+  }, props.label));
+};
+export default ResizeLabel;

package/dist/esm/ui/Resizer/ResizeLabel/styles.js

@@ -0,0 +1,7 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { css } from '@emotion/react';
+import { B300 } from '@atlaskit/theme/colors';
+export var wrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: ", ";\n  width: 100%;\n  text-align: center;\n  position: absolute;\n  transform: translateY(-125%);\n  top: 0;\n"])), "var(--ds-font-size-100, 14px)");
+export var text = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-block;\n  border-radius: 6px;\n  min-width: 75px;\n  background-color: ", ";\n  color: ", ";\n  padding: ", " ", ";\n  letter-spacing: 0.5px;\n"])), "var(--ds-text-accent-blue, ".concat(B300, ")"), "var(--ds-text-inverse, white)", "var(--ds-space-050, 4px)", "var(--ds-space-200, 16px)");
+export var smallText = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  letter-spacing: -0.5px;\n  font-size: ", ";\n  min-width: 27px;\n  padding: ", " ", ";\n"])), "var(--ds-font-size-050, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-025, 2px)");

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.8.11";
+export var version = "187.9.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.8.11",
+	"version": "187.9.0",
 	"sideEffects": false
 }

package/dist/types/labs/next/presets/universal.d.ts

@@ -2,9 +2,8 @@ import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { DefaultPresetPluginOptions } from './default';
 import type { EditorPresetProps } from './types';
-import type { EditorSharedPropsWithPlugins } from '../../../types/editor-props';
+import type { EditorSharedPropsWithPlugins, EditorPluginFeatureProps, EditorProviderProps } from '../../../types/editor-props';
 import type { FeatureFlags } from '../../../types/feature-flags';
-import type { EditorPluginFeatureProps, EditorProviderProps } from '../../../types/editor-props';
 import type { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 type UniversalPresetProps = EditorPresetProps & DefaultPresetPluginOptions & EditorSharedPropsWithPlugins & EditorPluginFeatureProps & EditorProviderProps;
 /**

package/dist/types/plugins/floating-toolbar/index.d.ts

@@ -3,7 +3,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { FloatingToolbarConfig } from './types';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
-export type FloatingToolbarPluginState = Record<'getConfigWithNodeInfo', (state: EditorState) => ConfigWithNodeInfo | null | undefined>;
+export type FloatingToolbarPluginState = {
+    getConfigWithNodeInfo: (state: EditorState) => ConfigWithNodeInfo | null | undefined;
+};
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;

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

@@ -5,6 +5,7 @@ import type { MediaState } from './pm-plugins/main';
 import type { CustomMediaPicker, MediaOptions } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -18,6 +19,7 @@ declare const mediaPlugin: NextEditorPlugin<'media', {
     dependencies: [
         typeof featureFlagsPlugin,
         OptionalPlugin<typeof analyticsPlugin>,
+        typeof guidelinePlugin,
         typeof gridPlugin,
         typeof widthPlugin,
         typeof decorationsPlugin,

package/dist/types/plugins/media/nodeviews/styles.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { NumericalCardDimensions } from '@atlaskit/media-card';
+import type { NumericalCardDimensions } from '@atlaskit/media-card';
 export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
 export declare const figureWrapper: import("@emotion/react").SerializedStyles;

package/dist/types/plugins/media/pm-plugins/main.d.ts

@@ -5,7 +5,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { Dispatch } from '../../../event-dispatcher';
 import type { ProsemirrorGetPosHandler } from '../../../nodeviews';
@@ -15,6 +14,7 @@ import type { MediaStateEventSubscriber } from '../picker-facade';
 import PickerFacade from '../picker-facade';
 import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
 import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type mediaPlugin from '../index';
 export type { MediaState, MediaProvider, MediaStateStatus };
 export { stateKey } from './plugin-key';

package/dist/types/plugins/media/toolbar/utils.d.ts

@@ -6,3 +6,4 @@ import type { MediaPluginState } from '../pm-plugins/types';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
+export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils").ContentNodeWithPos | undefined;

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

@@ -10,6 +10,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PlaceholderTextOptions } from '../../plugins/placeholder-text/types';
 export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
     allowMediaSingle?: boolean | MediaSingleOptions;

package/dist/types/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -0,0 +1,61 @@
+/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { Props } from './types';
+import type { Dimensions } from '@atlaskit/editor-common/resizer';
+import type { WrappedComponentProps } from 'react-intl-next';
+type State = {
+    offsetLeft: number;
+    isVideoFile: boolean;
+    resizedPctWidth?: number;
+    isResizing: boolean;
+    size: Dimensions;
+};
+export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
+export declare function calcOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
+type ResizableMediaSingleNextProps = Props & WrappedComponentProps;
+declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+    constructor(props: ResizableMediaSingleNextProps);
+    /**
+     * Calculate media single node initial width if props.mediaSingleWidth is undefined
+     * (Mainly when switching from lagacy experience to new experience).
+     *
+     * @returns initial width in pixel
+     */
+    calcInitialWidth(): number;
+    componentDidUpdate(prevProps: Props, prevState: State): boolean;
+    isNestedNode(): boolean;
+    private getDefaultGuidelines;
+    private getSnaps;
+    get wrappedLayout(): boolean;
+    componentDidMount(): Promise<void>;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
+    calcNewSize: (newWidth: number, stop: boolean) => {
+        width: number | null;
+        layout: MediaSingleLayout;
+    };
+    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number) => 'center' | 'wide' | 'full-width';
+    get $pos(): import("prosemirror-model").ResolvedPos | null;
+    /**
+     * The maxmimum number of grid columns this node can resize to.
+     */
+    get gridWidth(): number;
+    calcColumnLeftOffset: () => number;
+    wrapper?: HTMLElement;
+    calcPxHeight: (newWidth: number) => number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    private saveWrapper;
+    private displayGuideline;
+    private setIsResizing;
+    render(): jsx.JSX.Element;
+}
+export { ResizableMediaSingleNext as UnwrappedResizableMediaSingleNext };
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<ResizableMediaSingleNextProps>> & {
+    WrappedComponent: React.ComponentType<ResizableMediaSingleNextProps>;
+};
+export default _default;

package/dist/types/plugins/media/ui/ResizableMediaSingle/guidelines.d.ts

@@ -0,0 +1,4 @@
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { EditorView } from 'prosemirror-view';
+export declare const generateDefaultGuidelines: (editorWidth: number, containerWidth: number, isFullWidthMode?: boolean | undefined) => GuidelineConfig[];
+export declare const generateDynamicGuidelines: (view: EditorView) => GuidelineConfig[];

package/dist/types/plugins/media/ui/ResizableMediaSingle/resizable-media-single-messages.d.ts

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

package/dist/types/plugins/media/ui/ResizableMediaSingle/types.d.ts

@@ -22,5 +22,6 @@ export type Props = MediaSingleProps & {
     viewMediaClientConfig?: MediaClientConfig;
     fullWidthMode?: boolean;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    mediaSingleWidth?: number;
     pluginInjectionApi: ExtractInjectionAPI<typeof mediaPlugin> | undefined;
 };

package/dist/types/ui/ElementBrowser/components/ElementSearch.d.ts

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import { Modes } from '../types';
 interface Props {
     onSearch: (value: string) => void;
     mode: keyof typeof Modes;
     focus: boolean;
     onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
     searchTerm?: string;
 }
 declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {

package/dist/types/ui/ElementBrowser/components/StatelessElementBrowser.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
-import { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { Category, Modes } from '../types';
-import { EmptyStateHandler } from '../../../types/empty-state-handler';
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { Category, Modes } from '../types';
+import type { EmptyStateHandler } from '../../../types/empty-state-handler';
 export type StatelessElementBrowserProps = {
     categories?: Category[];
     items: QuickInsertItem[];

package/dist/types/ui/Resizer/ResizeLabel/index.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+interface Props {
+    label: string;
+    containerWidth: number;
+}
+declare const ResizeLabel: (props: Props) => jsx.JSX.Element;
+export default ResizeLabel;

package/dist/types/ui/Resizer/ResizeLabel/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapper: import("@emotion/react").SerializedStyles;
+export declare const text: import("@emotion/react").SerializedStyles;
+export declare const smallText: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/labs/next/presets/universal.d.ts

@@ -2,9 +2,8 @@ import type { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { EditorAppearance } from '@atlaskit/editor-common/types';
 import type { DefaultPresetPluginOptions } from './default';
 import type { EditorPresetProps } from './types';
-import type { EditorSharedPropsWithPlugins } from '../../../types/editor-props';
+import type { EditorSharedPropsWithPlugins, EditorPluginFeatureProps, EditorProviderProps } from '../../../types/editor-props';
 import type { FeatureFlags } from '../../../types/feature-flags';
-import type { EditorPluginFeatureProps, EditorProviderProps } from '../../../types/editor-props';
 import type { EditorPresetBuilder } from '@atlaskit/editor-common/preset';
 type UniversalPresetProps = EditorPresetProps & DefaultPresetPluginOptions & EditorSharedPropsWithPlugins & EditorPluginFeatureProps & EditorProviderProps;
 /**

package/dist/types-ts4.5/plugins/floating-toolbar/index.d.ts

@@ -3,7 +3,9 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { FloatingToolbarConfig } from './types';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
-export type FloatingToolbarPluginState = Record<'getConfigWithNodeInfo', (state: EditorState) => ConfigWithNodeInfo | null | undefined>;
+export type FloatingToolbarPluginState = {
+    getConfigWithNodeInfo: (state: EditorState) => ConfigWithNodeInfo | null | undefined;
+};
 export type ConfigWithNodeInfo = {
     config: FloatingToolbarConfig | undefined;
     pos: number;

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

@@ -5,6 +5,7 @@ import type { MediaState } from './pm-plugins/main';
 import type { CustomMediaPicker, MediaOptions } from './types';
 import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
 import type { widthPlugin } from '@atlaskit/editor-plugin-width';
 import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
@@ -18,6 +19,7 @@ declare const mediaPlugin: NextEditorPlugin<'media', {
     dependencies: [
         typeof featureFlagsPlugin,
         OptionalPlugin<typeof analyticsPlugin>,
+        typeof guidelinePlugin,
         typeof gridPlugin,
         typeof widthPlugin,
         typeof decorationsPlugin,

package/dist/types-ts4.5/plugins/media/nodeviews/styles.d.ts

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
-import { NumericalCardDimensions } from '@atlaskit/media-card';
+import type { NumericalCardDimensions } from '@atlaskit/media-card';
 export declare const MediaInlineNodeSelector = "media-inline-node";
 export declare const MediaSingleNodeSelector = "media-single-node";
 export declare const figureWrapper: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/plugins/media/pm-plugins/main.d.ts

@@ -5,7 +5,6 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { MediaClientConfig } from '@atlaskit/media-core';
 import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
 import type { ContextIdentifierProvider, MediaProvider } from '@atlaskit/editor-common/provider-factory';
-import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { WidthPluginState } from '@atlaskit/editor-plugin-width';
 import type { Dispatch } from '../../../event-dispatcher';
 import type { ProsemirrorGetPosHandler } from '../../../nodeviews';
@@ -15,6 +14,7 @@ import type { MediaStateEventSubscriber } from '../picker-facade';
 import PickerFacade from '../picker-facade';
 import type { MediaNodeWithPosHandler, MediaPluginState } from './types';
 import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type mediaPlugin from '../index';
 export type { MediaState, MediaProvider, MediaStateStatus };
 export { stateKey } from './plugin-key';

package/dist/types-ts4.5/plugins/media/toolbar/utils.d.ts

@@ -6,3 +6,4 @@ import type { MediaPluginState } from '../pm-plugins/types';
 export declare const getSelectedMediaContainerNodeAttrs: (mediaPluginState: MediaPluginState) => MediaBaseAttributes | null;
 export declare const downloadMedia: (mediaPluginState: MediaPluginState) => Promise<boolean>;
 export declare const removeMediaGroupNode: (state: EditorState) => import("prosemirror-state").Transaction;
+export declare const getSelectedMediaSingle: (state: EditorState) => import("prosemirror-utils").ContentNodeWithPos | undefined;

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

@@ -10,6 +10,7 @@ import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { PlaceholderTextOptions } from '../../plugins/placeholder-text/types';
 export type MediaStateStatus = 'unknown' | 'ready' | 'cancelled' | 'preview' | 'error' | 'mobile-upload-end';
+export type MediaSingleWithType = 'pixel' | 'percentage';
 export interface MediaOptions {
     provider?: Providers['mediaProvider'];
     allowMediaSingle?: boolean | MediaSingleOptions;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.d.ts

@@ -0,0 +1,61 @@
+/// <reference path="../../../../../../../../../typings/prosemirror.d.ts" />
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { RichMediaLayout as MediaSingleLayout } from '@atlaskit/adf-schema';
+import type { MediaClientConfig } from '@atlaskit/media-core';
+import type { Props } from './types';
+import type { Dimensions } from '@atlaskit/editor-common/resizer';
+import type { WrappedComponentProps } from 'react-intl-next';
+type State = {
+    offsetLeft: number;
+    isVideoFile: boolean;
+    resizedPctWidth?: number;
+    isResizing: boolean;
+    size: Dimensions;
+};
+export declare const resizerNextTestId = "mediaSingle.resizerNext.testid";
+export declare function calcOffsetLeft(insideInlineLike: boolean, insideLayout: boolean, pmViewDom: Element, wrapper?: HTMLElement): number;
+type ResizableMediaSingleNextProps = Props & WrappedComponentProps;
+declare class ResizableMediaSingleNext extends React.Component<ResizableMediaSingleNextProps, State> {
+    constructor(props: ResizableMediaSingleNextProps);
+    /**
+     * Calculate media single node initial width if props.mediaSingleWidth is undefined
+     * (Mainly when switching from lagacy experience to new experience).
+     *
+     * @returns initial width in pixel
+     */
+    calcInitialWidth(): number;
+    componentDidUpdate(prevProps: Props, prevState: State): boolean;
+    isNestedNode(): boolean;
+    private getDefaultGuidelines;
+    private getSnaps;
+    get wrappedLayout(): boolean;
+    componentDidMount(): Promise<void>;
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    checkVideoFile(viewMediaClientConfig?: MediaClientConfig): Promise<void>;
+    calcNewSize: (newWidth: number, stop: boolean) => {
+        width: number | null;
+        layout: MediaSingleLayout;
+    };
+    calcUnwrappedLayout: (width: number, containerWidth: number, contentWidth: number) => 'center' | 'wide' | 'full-width';
+    get $pos(): import("prosemirror-model").ResolvedPos | null;
+    /**
+     * The maxmimum number of grid columns this node can resize to.
+     */
+    get gridWidth(): number;
+    calcColumnLeftOffset: () => number;
+    wrapper?: HTMLElement;
+    calcPxHeight: (newWidth: number) => number;
+    get insideInlineLike(): boolean;
+    get insideLayout(): boolean;
+    private saveWrapper;
+    private displayGuideline;
+    private setIsResizing;
+    render(): jsx.JSX.Element;
+}
+export { ResizableMediaSingleNext as UnwrappedResizableMediaSingleNext };
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<ResizableMediaSingleNextProps>> & {
+    WrappedComponent: React.ComponentType<ResizableMediaSingleNextProps>;
+};
+export default _default;

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/guidelines.d.ts

@@ -0,0 +1,4 @@
+import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
+import type { EditorView } from 'prosemirror-view';
+export declare const generateDefaultGuidelines: (editorWidth: number, containerWidth: number, isFullWidthMode?: boolean | undefined) => GuidelineConfig[];
+export declare const generateDynamicGuidelines: (view: EditorView) => GuidelineConfig[];

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/resizable-media-single-messages.d.ts

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

package/dist/types-ts4.5/plugins/media/ui/ResizableMediaSingle/types.d.ts

@@ -22,5 +22,6 @@ export type Props = MediaSingleProps & {
     viewMediaClientConfig?: MediaClientConfig;
     fullWidthMode?: boolean;
     dispatchAnalyticsEvent: DispatchAnalyticsEvent;
+    mediaSingleWidth?: number;
     pluginInjectionApi: ExtractInjectionAPI<typeof mediaPlugin> | undefined;
 };

package/dist/types-ts4.5/ui/ElementBrowser/components/ElementSearch.d.ts

@@ -1,12 +1,13 @@
 /** @jsx jsx */
 import React from 'react';
-import { WrappedComponentProps } from 'react-intl-next';
+import type { WrappedComponentProps } from 'react-intl-next';
 import { Modes } from '../types';
 interface Props {
     onSearch: (value: string) => void;
     mode: keyof typeof Modes;
     focus: boolean;
     onClick: (e: React.MouseEvent) => void;
+    onKeyDown: (e: React.KeyboardEvent) => void;
     searchTerm?: string;
 }
 declare const MemoizedElementSearchWithAnalytics: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<Props & WrappedComponentProps<"intl">, "intl"> & {

package/dist/types-ts4.5/ui/ElementBrowser/components/StatelessElementBrowser.d.ts

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
-import { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { Category, Modes } from '../types';
-import { EmptyStateHandler } from '../../../types/empty-state-handler';
+import type { QuickInsertItem } from '@atlaskit/editor-common/provider-factory';
+import type { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import type { Category, Modes } from '../types';
+import type { EmptyStateHandler } from '../../../types/empty-state-handler';
 export type StatelessElementBrowserProps = {
     categories?: Category[];
     items: QuickInsertItem[];

package/dist/types-ts4.5/ui/Resizer/ResizeLabel/index.d.ts

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+interface Props {
+    label: string;
+    containerWidth: number;
+}
+declare const ResizeLabel: (props: Props) => jsx.JSX.Element;
+export default ResizeLabel;

package/dist/types-ts4.5/ui/Resizer/ResizeLabel/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const wrapper: import("@emotion/react").SerializedStyles;
+export declare const text: import("@emotion/react").SerializedStyles;
+export declare const smallText: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-core",
-  "version": "187.8.11",
+  "version": "187.9.0",
   "description": "A package contains Atlassian editor core functionality",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/code": "^14.6.0",
     "@atlaskit/date": "^0.10.0",
     "@atlaskit/datetime-picker": "^12.7.0",
-    "@atlaskit/editor-common": "^74.32.0",
+    "@atlaskit/editor-common": "^74.33.0",
     "@atlaskit/editor-json-transformer": "^8.10.0",
     "@atlaskit/editor-markdown-transformer": "^5.2.5",
     "@atlaskit/editor-palette": "1.5.1",

package/report.api.md

@@ -88,6 +88,7 @@ import { GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { Side as GapCursorSide } from '@atlaskit/editor-common/selection';
 import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
+import type { guidelinePlugin } from '@atlaskit/editor-plugin-guideline';
 import type { HeadingLevelsAndNormalText } from '@atlaskit/editor-common/types';
 import type { HyperlinkPluginOptions } from '@atlaskit/editor-common/types';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -1103,10 +1104,11 @@ export { FloatingToolbarListPicker };
 export const floatingToolbarPluginKey: PluginKey<FloatingToolbarPluginState>;
 
 // @public (undocumented)
-export type FloatingToolbarPluginState = Record<
-  'getConfigWithNodeInfo',
-  (state: EditorState) => ConfigWithNodeInfo | null | undefined
->;
+export type FloatingToolbarPluginState = {
+  getConfigWithNodeInfo: (
+    state: EditorState,
+  ) => ConfigWithNodeInfo | null | undefined;
+};
 
 export { FloatingToolbarSelect };
 
@@ -1418,6 +1420,7 @@ export const mediaPlugin: NextEditorPlugin<
     dependencies: [
       typeof featureFlagsPlugin,
       OptionalPlugin<typeof analyticsPlugin>,
+      typeof guidelinePlugin,
       typeof gridPlugin,
       typeof widthPlugin,
       typeof decorationsPlugin,