@atlaskit/editor-core 188.2.0 → 188.2.1

package/dist/es2019/plugins/media/nodeviews/mediaInline.js

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { MediaInlineCard } from '@atlaskit/media-card';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { MediaInlineNodeSelector } from './styles';
-import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
+import { MediaInlineCard } from '@atlaskit/media-card';
 import { MediaInlineCardLoadingView } from '@atlaskit/media-ui';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { MediaInlineNodeSelector } from './styles';
 export const createMediaNodeUpdater = props => {
   const node = props.node;
   return new MediaNodeUpdater({

package/dist/es2019/plugins/media/nodeviews/mediaNodeUpdater.js

@@ -1,8 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import uuidV4 from 'uuid/v4';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
-import { getMediaClient, isMediaBlobUrl, getAttrsFromUrl, isImageRepresentationReady } from '@atlaskit/media-client';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { getAttrsFromUrl, getMediaClient, isImageRepresentationReady, isMediaBlobUrl } from '@atlaskit/media-client';
 import { replaceExternalMedia, updateAllMediaSingleNodesAttrs, updateCurrentMediaNodeAttrs, updateMediaSingleNodeAttrs } from '../commands/helpers';
 export class MediaNodeUpdater {
   constructor(props) {

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/index.js

@@ -1,12 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { WithProviders } from '@atlaskit/editor-common/provider-factory';
-import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
 import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import { WithProviders } from '@atlaskit/editor-common/provider-factory';
 import { SelectionBasedNodeView } from '@atlaskit/editor-common/selection-based-node-view';
-import MediaNode from './media';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
 import { isMediaBlobUrlFromAttrs } from '../../utils/media-common';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import MediaNode from './media';
 const MediaNodeWithProviders = ({
   pluginInjectionApi,
   innerComponent

package/dist/es2019/plugins/media/nodeviews/mediaNodeView/media.js

@@ -1,11 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { withImageLoader } from '@atlaskit/editor-common/utils';
-import { AnalyticsContext } from '@atlaskit/analytics-next';
-import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
-import { Card, CardLoading } from '@atlaskit/media-card';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import React, { Component } from 'react';
+import { MEDIA_CONTEXT } from '@atlaskit/analytics-namespaced-context';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { withImageLoader } from '@atlaskit/editor-common/utils';
 import { setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { Card, CardLoading } from '@atlaskit/media-card';
 import { stateKey as mediaStateKey } from '../../pm-plugins/plugin-key';
 import { MediaCardWrapper } from '../styles';
 

package/dist/es2019/plugins/media/nodeviews/mediaSingle.js

@@ -1,28 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+
 import React, { Component } from 'react';
+import { jsx } from '@emotion/react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE } from '@atlaskit/editor-common/media-single';
 import { WithProviders } from '@atlaskit/editor-common/provider-factory';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, isNodeSelectedOrInRange, setNodeSelection, setTextSelection } from '@atlaskit/editor-common/utils';
-import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
-import ResizableMediaSingle from '../ui/ResizableMediaSingle';
-import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
-import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { figureWrapper, MediaSingleNodeSelector } from './styles';
 import { getAttrsFromUrl } from '@atlaskit/media-client';
-import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import CaptionPlaceholder from '../ui/CaptionPlaceholder';
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
-import { calcMediaSinglePixelWidth, MEDIA_SINGLE_GUTTER_SIZE, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNode } from '@atlaskit/editor-common/media-single';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { insertAndSelectCaptionFromMediaSinglePos } from '../commands/captions';
+import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
+import CaptionPlaceholder from '../ui/CaptionPlaceholder';
+import ResizableMediaSingle from '../ui/ResizableMediaSingle';
+import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
+import { isMediaBlobUrlFromAttrs } from '../utils/media-common';
+import { MediaNodeUpdater } from './mediaNodeUpdater';
+import { figureWrapper, MediaSingleNodeSelector } from './styles';
 export default class MediaSingleNode extends Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/plugins/media/pm-plugins/alt-text/commands.js

@@ -1,7 +1,7 @@
-import { createCommand } from '.';
-import { isSelectionMediaSingleNode, getMediaNodeFromSelection } from '../../utils/media-common';
-import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
+import { getMediaNodeFromSelection, isSelectionMediaSingleNode } from '../../utils/media-common';
+import { createCommand } from './index';
 const createCommandWithAnalytics = (actionType, action, transform) => {
   return editorAnalyticsAPI => withAnalytics(editorAnalyticsAPI, {
     action: actionType,

package/dist/es2019/plugins/media/pm-plugins/alt-text/index.js

@@ -1,8 +1,8 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { pluginFactory } from '@atlaskit/editor-common/utils';
-import reducer from './reducer';
 import { pmHistoryPluginKey } from '@atlaskit/editor-common/utils';
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import reducer from './reducer';
 export const pluginKey = new PluginKey('mediaAltTextPlugin');
 const {
   createPluginState,

package/dist/es2019/plugins/media/pm-plugins/alt-text/keymap.js

@@ -1,6 +1,6 @@
+import { addAltText, bindKeymapWithCommand, escape } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { bindKeymapWithCommand, addAltText, escape } from '@atlaskit/editor-common/keymaps';
-import { openMediaAltTextMenu, closeMediaAltTextMenu } from './commands';
+import { closeMediaAltTextMenu, openMediaAltTextMenu } from './commands';
 export default function keymapPlugin(schema, editorAnalyticsAPI) {
   const list = {};
   bindKeymapWithCommand(addAltText.common, openMediaAltTextMenu(editorAnalyticsAPI), list);

package/dist/es2019/plugins/media/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -3,20 +3,20 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 import React from 'react';
 import { css, jsx } from '@emotion/react';
-import { N100, N30, R400, N80 } from '@atlaskit/theme/colors';
-import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import { messages } from '../messages';
 import { injectIntl } from 'react-intl-next';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import { PanelTextInput } from '@atlaskit/editor-common/ui';
-import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { closeMediaAltTextMenu, updateAltText } from '../commands';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
-import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTION } from '@atlaskit/editor-common/analytics';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { PanelTextInput } from '@atlaskit/editor-common/ui';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
-import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
+import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import { N100, N30, N80, R400 } from '@atlaskit/theme/colors';
+import { closeMediaAltTextMenu, updateAltText } from '../commands';
+import { messages } from '../messages';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 

package/dist/es2019/plugins/media/pm-plugins/keymap-media-single.js

@@ -1,9 +1,9 @@
-import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { bindKeymapWithCommand, backspace } from '@atlaskit/editor-common/keymaps';
+import { backspace, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
+import { atTheEndOfDoc } from '@atlaskit/editor-common/selection';
 import { isEmptyNode, isSelectionInsideLastNodeInDocument } from '@atlaskit/editor-common/utils';
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { selectNodeBackward } from '@atlaskit/editor-prosemirror/commands';
-import { atTheEndOfDoc } from '@atlaskit/editor-common/selection';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 
 /**
  * Check if is an empty selection at the start of the node

package/dist/es2019/plugins/media/pm-plugins/keymap.js

@@ -1,10 +1,10 @@
+import { bindKeymapWithCommand, enter, insertNewLine, moveDown, moveLeft, moveRight, tab, undo } from '@atlaskit/editor-common/keymaps';
+import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { bindKeymapWithCommand, undo, enter, tab, moveLeft, moveRight, moveDown, insertNewLine } from '@atlaskit/editor-common/keymaps';
-import { stateKey } from '../pm-plugins/plugin-key';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { insertAndSelectCaptionFromMediaSinglePos, selectCaptionFromMediaSinglePos } from '../commands/captions';
+import { stateKey } from '../pm-plugins/plugin-key';
 export function keymapPlugin(options, editorAnalyticsAPI) {
   const list = {};
   const {

package/dist/es2019/plugins/media/pm-plugins/linking/index.js

@@ -1,6 +1,6 @@
-import { pluginFactory } from '@atlaskit/editor-common/utils';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { PluginKey, NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { NodeSelection, PluginKey } from '@atlaskit/editor-prosemirror/state';
 import reducer from './reducer';
 export const mediaLinkingPluginKey = new PluginKey('mediaLinking');
 const initialState = {

package/dist/es2019/plugins/media/pm-plugins/linking/keymap.js

@@ -1,5 +1,5 @@
+import { addLink, bindKeymapWithCommand } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { bindKeymapWithCommand, addLink } from '@atlaskit/editor-common/keymaps';
 import { showLinkingToolbarWithMediaTypeCheck } from '../../commands/linking';
 export default function keymapPlugin(schema) {
   const list = {};

package/dist/es2019/plugins/media/pm-plugins/main.js

@@ -1,27 +1,27 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import assert from 'assert';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { RawIntlProvider } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { CAPTION_PLACEHOLDER_ID, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { NodeSelection, TextSelection, AllSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { browser, ErrorReporter, isInEmptyLine, isInListItem } from '@atlaskit/editor-common/utils';
+import { AllSelection, NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { insertPoint } from '@atlaskit/editor-prosemirror/transform';
+import { findDomRefAtPos, findParentNodeOfType, findSelectedNodeOfType, isNodeSelection } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
-import { isInEmptyLine, isInListItem, ErrorReporter, browser } from '@atlaskit/editor-common/utils';
-import assert from 'assert';
-import { findDomRefAtPos, isNodeSelection, findSelectedNodeOfType, findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
-import DropPlaceholder from '../ui/Media/DropPlaceholder';
-import { insertMediaGroupNode, insertMediaInlineNode, canInsertMediaInline } from '../utils/media-files';
-import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+import { getMediaFeatureFlag } from '@atlaskit/media-common';
 import * as helpers from '../commands/helpers';
 import { updateMediaSingleNodeAttrs } from '../commands/helpers';
-import { stateKey } from './plugin-key';
 import PickerFacade from '../picker-facade';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { getMediaFeatureFlag } from '@atlaskit/media-common';
-import { RawIntlProvider } from 'react-intl-next';
+import DropPlaceholder from '../ui/Media/DropPlaceholder';
+import { isInsidePotentialEmptyParagraph, removeMediaNode, splitMediaGroup } from '../utils/media-common';
+import { canInsertMediaInline, insertMediaGroupNode, insertMediaInlineNode } from '../utils/media-files';
+import { insertMediaSingleNode, isMediaSingle } from '../utils/media-single';
 import { MediaTaskManager } from './mediaTaskManager';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-import { getMaxWidthForNestedNodeNext, CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
+import { stateKey } from './plugin-key';
 export { stateKey } from './plugin-key';
 export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export const MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';

package/dist/es2019/plugins/media/styles.js

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 import { mediaSingleSharedStyle, richMediaClassName } from '@atlaskit/editor-common/styles';
-import { akEditorDeleteBorder, akEditorDeleteBackground, akEditorSelectedBorderBoldSize, akEditorMediaResizeHandlerPaddingWide, akEditorMediaResizeHandlerPadding, akEditorSelectedNodeClassName, akEditorDeleteIconColor } from '@atlaskit/editor-shared-styles';
-import { N60, B200, Y500 } from '@atlaskit/theme/colors';
+import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorDeleteIconColor, akEditorMediaResizeHandlerPadding, akEditorMediaResizeHandlerPaddingWide, akEditorSelectedBorderBoldSize, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
 import { fileCardImageViewSelector, inlinePlayerClassName, newFileExperienceClassName } from '@atlaskit/media-card';
+import { B200, N60, Y500 } from '@atlaskit/theme/colors';
 export const mediaStyles = css`
   .ProseMirror {
     ${mediaSingleSharedStyle} & [layout='full-width'] .${richMediaClassName},

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -1,10 +1,10 @@
 import React from 'react';
+import { addAltText, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
-import { ToolTipContent, addAltText } from '@atlaskit/editor-common/keymaps';
 import { messages } from '../pm-plugins/alt-text/messages';
+import { ClassNames } from '../pm-plugins/alt-text/style';
 import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaNodeFromSelection } from '../utils/media-common';
-import { ClassNames } from '../pm-plugins/alt-text/style';
 const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state, editorAnalyticsAPI) => {
   const mediaNode = getMediaNodeFromSelection(state);

package/dist/es2019/plugins/media/toolbar/commands.js

@@ -1,10 +1,10 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { isNodeSelection, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { getMediaInputResizeAnalyticsEvent } from '../utils/analytics';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
-import { removeMediaGroupNode, getSelectedMediaSingle } from './utils';
 import { currentMediaNodeWithPos } from '../utils/current-media-node';
+import { getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 export const DEFAULT_BORDER_COLOR = '#091e4224';
 export const DEFAULT_BORDER_SIZE = 2;
 export const changeInlineToMediaCard = editorAnalyticsAPI => (state, dispatch) => {

package/dist/es2019/plugins/media/toolbar/filePreviewItem.js

@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
-import { MediaViewer } from '@atlaskit/media-viewer';
-import { messages } from '@atlaskit/media-ui';
-import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
+import { messages } from '@atlaskit/media-ui';
+import { MediaViewer } from '@atlaskit/media-viewer';
 import { getSelectedMediaContainerNodeAttrs } from './utils';
 export const FilePreviewItem = ({
   mediaPluginState,

package/dist/es2019/plugins/media/toolbar/index.js

@@ -1,33 +1,33 @@
 import React from 'react';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { buildLayoutButtons } from '@atlaskit/editor-common/card';
+import { calcMinWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+import commonMessages from '@atlaskit/editor-common/messages';
+import { cardMessages } from '@atlaskit/editor-common/messages';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import DownloadIcon from '@atlaskit/icon/glyph/download';
+import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
-import commonMessages from '@atlaskit/editor-common/messages';
-import { stateKey } from '../pm-plugins/plugin-key';
-import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
-import { buildLayoutButtons } from '@atlaskit/editor-common/card';
-import { getMediaLinkingState } from '../pm-plugins/linking';
-import { getPluginState as getMediaAltTextPluginState } from '../pm-plugins/alt-text';
-import { altTextButton, getAltTextToolbar } from './alt-text';
-import { showLinkingToolbar } from '../commands/linking';
-import { LinkToolbarAppearance } from './linking-toolbar-appearance';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { messages } from '@atlaskit/media-ui';
-import { cardMessages } from '@atlaskit/editor-common/messages';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { FilePreviewItem } from './filePreviewItem';
-import { downloadMedia, getSelectedMediaSingle, removeMediaGroupNode, getPixelWidthOfElement, calcNewLayout, getMaxToolbarWidth } from './utils';
-import { isVideo } from '../utils/media-single';
-import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { showLinkingToolbar } from '../commands/linking';
 import { MediaInlineNodeSelector, MediaSingleNodeSelector } from '../nodeviews/styles';
+import { getPluginState as getMediaAltTextPluginState } from '../pm-plugins/alt-text';
+import { getMediaLinkingState } from '../pm-plugins/linking';
+import { stateKey } from '../pm-plugins/plugin-key';
 import ImageBorderItem from '../ui/ImageBorder';
+import { FullWidthDisplay, PixelEntry } from '../ui/PixelEntry';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
+import { isVideo } from '../utils/media-single';
+import { altTextButton, getAltTextToolbar } from './alt-text';
+import { changeInlineToMediaCard, changeMediaCardToInline, removeInlineCard, setBorderMark, toggleBorderMark, updateMediaSingleWidth } from './commands';
+import { FilePreviewItem } from './filePreviewItem';
 import { shouldShowImageBorder } from './imageBorder';
-import { PixelEntry, FullWidthDisplay } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, calcMinWidth } from '@atlaskit/editor-common/media-single';
-import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getLinkingToolbar, shouldShowMediaLinkToolbar } from './linking';
+import { LinkToolbarAppearance } from './linking-toolbar-appearance';
+import { calcNewLayout, downloadMedia, getMaxToolbarWidth, getPixelWidthOfElement, getSelectedMediaSingle, removeMediaGroupNode } from './utils';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));

package/dist/es2019/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -1,16 +1,15 @@
 /** @jsx jsx */
-
-import React, { useState, useEffect, Fragment } from 'react';
+import React, { Fragment, useEffect, useState } from 'react';
 import { css, jsx } from '@emotion/react';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { checkMediaType } from '../utils/check-media-type';
+import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
 import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
-import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
-import { ToolTipContent, addLink } from '@atlaskit/editor-common/keymaps';
+import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
+import { checkMediaType } from '../utils/check-media-type';
 import { currentMediaNode } from '../utils/current-media-node';
 // need this wrapper, need to have 4px between items.
 const wrapper = css`

package/dist/es2019/plugins/media/toolbar/linking.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import { hideLinkingToolbar, setUrlToMedia, unlink } from '../commands/linking';
 import { getMediaLinkingState } from '../pm-plugins/linking';
 import MediaLinkingToolbar from '../ui/MediaLinkingToolbar';
-import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 const FORCE_FOCUS_SELECTOR = '[data-testid="add-link-button"],[data-testid="edit-link-button"]';
 export function shouldShowMediaLinkToolbar(editorState) {
   const mediaLinkingState = getMediaLinkingState(editorState);

package/dist/es2019/plugins/media/toolbar/utils.js

@@ -1,7 +1,7 @@
-import { getMediaClient } from '@atlaskit/media-client';
-import { findParentNodeOfType, removeParentNodeOfType, removeSelectedNode, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 import { wrappedLayouts } from '@atlaskit/editor-common/media-single';
+import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { getMediaClient } from '@atlaskit/media-client';
 export const getSelectedMediaContainerNodeAttrs = mediaPluginState => {
   const selectedNode = mediaPluginState.selectedMediaContainerNode();
   if (selectedNode && selectedNode.attrs) {

package/dist/es2019/plugins/media/ui/CaptionPlaceholder/index.js

@@ -2,9 +2,9 @@
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 import { N200 } from '@atlaskit/theme/colors';
 import { messages } from './messages';
-import { CAPTION_PLACEHOLDER_ID } from '@atlaskit/editor-common/media-single';
 const placeholder = css`
   color: ${`var(--ds-text-subtlest, ${N200})`};
   width: 100%;

package/dist/es2019/plugins/media/ui/ImageBorder/index.js

@@ -1,18 +1,18 @@
 /** @jsx jsx */
+import { useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { BorderIcon } from '@atlaskit/editor-common/icons';
-import { useRef, useState } from 'react';
-import { ColorPalette, borderPaletteTooltipMessages } from '@atlaskit/editor-common/ui-color';
-import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { borderColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationType, DropdownMenu } from '@atlaskit/editor-common/ui-menu';
-import Tooltip from '@atlaskit/tooltip';
-import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
+import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import Tooltip from '@atlaskit/tooltip';
 import { messages } from './messages';
+import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
 const ImageBorder = ({
   intl: {
     formatMessage

package/dist/es2019/plugins/media/ui/ImageBorder/styles.js

@@ -1,13 +1,11 @@
 import { css } from '@emotion/react';
-import * as colors from '@atlaskit/theme/colors';
 import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
-import { N20A, N50, N60A, N90, N800, N0 } from '@atlaskit/theme/colors';
+import * as colors from '@atlaskit/theme/colors';
+import { N0, N20A, N50, N60A, N800, N90 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize } from '@atlaskit/theme/constants';
-
 // menuItemDimensions and itemSpacing are copied from
 // packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
-
 export const menuItemDimensions = {
   width: 175,
   height: 32
@@ -20,7 +18,7 @@ export const contextualMenuArrow = css`
   display: flex;
   &::after {
     content: '›';
-    margin-left: 4px;
+    margin-left: ${"var(--ds-space-050, 4px)"};
     line-height: 20px;
     color: ${`var(--ds-icon, ${N90})`};
   }
@@ -45,7 +43,7 @@ export const contextualSubMenu = index => css`
   position: absolute;
   top: ${index * (menuItemDimensions.height + itemSpacing * 2)}px;
   left: ${menuItemDimensions.width}px;
-  padding: 8px;
+  padding: ${"var(--ds-space-100, 8px)"};
 
   > div {
     padding: 0;

package/dist/es2019/plugins/media/ui/Media/DropPlaceholder.js

@@ -1,12 +1,12 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
-import { borderRadius } from '@atlaskit/theme/constants';
-import { B400, B300, B200 } from '@atlaskit/theme/colors';
-import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
-import { hexToRgba } from '@atlaskit/adf-schema';
 import { injectIntl } from 'react-intl-next';
+import { hexToRgba } from '@atlaskit/adf-schema';
+import DocumentFilledIcon from '@atlaskit/icon/glyph/document-filled';
+import { B200, B300, B400 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
+import { FILE_WIDTH, MEDIA_HEIGHT } from '../../nodeviews/mediaNodeView/media';
 import { dropPlaceholderMessages } from './drop-placeholder-messages';
-import { MEDIA_HEIGHT, FILE_WIDTH } from '../../nodeviews/mediaNodeView/media';
 const iconWrapper = css`
   color: ${`var(--ds-icon-accent-blue, ${hexToRgba(B400, 0.4) || B400})`};
   background: ${`var(--ds-background-accent-blue-subtle, ${hexToRgba(B300, 0.6) || B300})`};
@@ -21,7 +21,7 @@ const iconWrapper = css`
 const dropLine = css`
   background: ${`var(--ds-border-focused, ${B200})`};
   border-radius: ${borderRadius()}px;
-  margin: 2px 0;
+  margin: ${"var(--ds-space-025, 2px)"} 0;
   width: 100%;
   height: 2px;
 `;

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -2,18 +2,17 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React, { Fragment } from 'react';
 import { css, jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
+import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
-import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
-import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 // Common Translations will live here
-
 import { PanelTextInput } from '@atlaskit/editor-common/ui';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
-import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
-import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';
+import ChevronLeftLargeIcon from '@atlaskit/icon/glyph/chevron-left-large';
+import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 import { R400 } from '@atlaskit/theme/colors';
-import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { mediaLinkToolbarMessages } from './media-linking-toolbar-messages';
 const validationWrapper = css`
   line-height: 0;

package/dist/es2019/plugins/media/ui/MediaPicker/BrowserWrapper.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import PickerFacadeProvider from './PickerFacadeProvider';
 import { Browser } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
 export const BrowserWrapper = ({
   mediaState,
   isOpen,

package/dist/es2019/plugins/media/ui/MediaPicker/ClipboardWrapper.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import PickerFacadeProvider from './PickerFacadeProvider';
 import { Clipboard } from '@atlaskit/media-picker';
+import PickerFacadeProvider from './PickerFacadeProvider';
 export const ClipboardWrapper = ({
   mediaState,
   featureFlags,

package/dist/es2019/plugins/media/ui/MediaPicker/DropzoneWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { Dropzone } from '@atlaskit/media-picker';
 import PickerFacadeProvider from './PickerFacadeProvider';
-import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 export const DropzoneWrapper = ({
   mediaState,
   isActive,

package/dist/es2019/plugins/media/ui/MediaPicker/index.js

@@ -1,9 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { BrowserWrapper } from './BrowserWrapper';
 import { ClipboardWrapper } from './ClipboardWrapper';
 import { DropzoneWrapper } from './DropzoneWrapper';
-import { BrowserWrapper } from './BrowserWrapper';
-import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const MediaPicker = ({
   api,
   isPopupOpened,