@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/es2019/plugins/insert-block/ui/ToolbarInsertBlock/item.js

@@ -22,6 +22,7 @@ import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import { shortcutStyle } from '../../../../ui/styles';
 import { tooltip, addLink, toggleTable } from '../../../../keymaps';
 import { shallowEquals } from './shallow-equals';
+import { getAriaKeyshortcuts } from '@atlaskit/editor-common/keymaps';
 
 const from = init => ({
   content: init.content,
@@ -35,8 +36,9 @@ const from = init => ({
   elemAfter: init.shortcut ? jsx("div", {
     css: shortcutStyle
   }, init.shortcut) : undefined,
-  'aria-label': init.content,
+  'aria-label': init.shortcut ? init.content + ' ' + init.shortcut : init.content,
   'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': init['aria-keyshortcuts'],
   shortcut: init.shortcut,
   isDisabled: init.disabled
 });
@@ -50,7 +52,8 @@ export const action = mem(init => {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon
+    Icon: TaskIcon,
+    'aria-keyshortcuts': '[ ] Space'
   });
 });
 export const link = mem(init => from({
@@ -60,7 +63,8 @@ export const link = mem(init => from({
   name: 'link',
   shortcut: tooltip(addLink),
   Icon: LinkIcon,
-  'aria-haspopup': init['aria-haspopup']
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
 }));
 export const media = mem(init => from({
   content: init.content,
@@ -83,7 +87,8 @@ export const mention = mem(init => from({
   name: 'mention',
   Icon: MentionIcon,
   shortcut: '@',
-  'aria-haspopup': init['aria-haspopup']
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': 'Shift+2 Space'
 }));
 export const emoji = mem(init => from({
   content: init.content,
@@ -92,7 +97,8 @@ export const emoji = mem(init => from({
   name: 'emoji',
   Icon: EmojiIcon,
   shortcut: ':',
-  'aria-haspopup': init['aria-haspopup']
+  'aria-haspopup': init['aria-haspopup'],
+  'aria-keyshortcuts': 'Shift+;'
 }));
 export const table = mem(init => from({
   content: init.content,
@@ -100,7 +106,8 @@ export const table = mem(init => from({
   disabled: init.disabled,
   name: 'table',
   Icon: TableIcon,
-  shortcut: tooltip(toggleTable)
+  shortcut: tooltip(toggleTable),
+  'aria-keyshortcuts': getAriaKeyshortcuts(toggleTable)
 }));
 export const layout = mem(init => from({
   content: init.content,
@@ -115,7 +122,8 @@ export const codeblock = mem(init => from({
   disabled: init.disabled,
   name: 'codeblock',
   Icon: CodeIcon,
-  shortcut: init.shortcut
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
 export const panel = mem(init => from({
   content: init.content,
@@ -123,7 +131,8 @@ export const panel = mem(init => from({
   disabled: init.disabled,
   name: 'panel',
   Icon: InfoIcon,
-  shortcut: init.shortcut
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
 export const blockquote = mem(init => from({
   content: init.content,
@@ -131,7 +140,8 @@ export const blockquote = mem(init => from({
   disabled: init.disabled,
   name: 'blockquote',
   Icon: QuoteIcon,
-  shortcut: init.shortcut
+  shortcut: init.shortcut,
+  'aria-keyshortcuts': 'Shift+. Space'
 }));
 export const decision = mem(init => from({
   content: init.content,
@@ -139,7 +149,8 @@ export const decision = mem(init => from({
   disabled: init.disabled,
   name: 'decision',
   Icon: DecisionIcon,
-  shortcut: '<>'
+  shortcut: '<>',
+  'aria-keyshortcuts': 'Shift+, Shift+. Space'
 }));
 export const horizontalrule = mem(init => from({
   content: init.content,
@@ -147,7 +158,8 @@ export const horizontalrule = mem(init => from({
   disabled: init.disabled,
   name: 'horizontalrule',
   Icon: HorizontalRuleIcon,
-  shortcut: '---'
+  shortcut: '---',
+  'aria-keyshortcuts': '- - -'
 }));
 export const expand = mem(init => from({
   content: init.content,
@@ -162,7 +174,8 @@ export const date = mem(init => from({
   disabled: init.disabled,
   name: 'date',
   Icon: DateIcon,
-  shortcut: '//'
+  shortcut: '//',
+  'aria-keyshortcuts': '/ / Enter'
 }));
 export const placeholder = mem(init => from({
   content: init.content,

package/dist/es2019/plugins/jira-issue/nodeviews/jira-issue.js

@@ -4,11 +4,10 @@ import { JiraIcon } from '@atlaskit/logo/jira-icon';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30, N50 } from '@atlaskit/theme/colors';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 const wrapperNode = css`
   align-items: center;
-  background: ${token('color.background.neutral', N30)};
-  border: 1px solid ${token('color.border', N50)};
+  background: ${`var(--ds-background-neutral, ${N30})`};
+  border: 1px solid ${`var(--ds-border, ${N50})`};
   border-radius: ${borderRadius()}px;
   box-sizing: border-box;
   cursor: default;
@@ -22,18 +21,18 @@ const wrapperNode = css`
   white-space: nowrap;
 
   .ProseMirror-selectednode & {
-    background: ${token('color.background.selected', N50)};
+    background: ${`var(--ds-background-selected, ${N50})`};
     outline: none;
   }
 `;
 const jiraChildNode = css`
   display: inline-block;
-  color: ${token('color.text.subtlest', '#707070')};
+  color: ${"var(--ds-text-subtlest, #707070)"};
   line-height: 24px;
   vertical-align: top;
 
   &::before {
-    color: ${token('color.text', 'black')};
+    color: ${"var(--ds-text, black)"};
     content: 'JIRA | ';
   }
 `;

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

@@ -3,7 +3,6 @@ import { gridSize } from '@atlaskit/theme/constants';
 import { N40A, N50A } from '@atlaskit/theme/colors';
 import { columnLayoutSharedStyle, LAYOUT_SECTION_MARGIN, LAYOUT_COLUMN_PADDING } from '@atlaskit/editor-common/styles';
 import { gridMediumMaxWidth, akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akLayoutGutterOffset, akEditorSwoopCubicBezier, SelectionStyle, getSelectionStyles, akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
 import { TableCssClassName } from '@atlaskit/editor-plugin-table/types';
 import { tableMarginFullWidthMode } from '@atlaskit/editor-plugin-table/ui/consts';
 export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
@@ -19,7 +18,7 @@ export const layoutStyles = css`
         flex: 1;
         min-width: 0;
         border: ${akEditorSelectedBorderSize}px solid
-          ${token('color.border', N40A)};
+          ${`var(--ds-border, ${N40A})`};
         border-radius: 4px;
         padding: ${LAYOUT_COLUMN_PADDING}px;
         box-sizing: border-box;
@@ -106,12 +105,12 @@ export const layoutStyles = css`
       /* Shows the border when cursor is inside a layout */
       &.selected [data-layout-column],
       &:hover [data-layout-column] {
-        border-color: ${token('color.border', N50A)};
+        border-color: ${`var(--ds-border, ${N50A})`};
       }
 
       &.selected.danger > [data-layout-column] {
-        background-color: ${token('color.background.danger', akEditorDeleteBackground)};
-        border-color: ${token('color.border.danger', akEditorDeleteBorder)};
+        background-color: ${`var(--ds-background-danger, ${akEditorDeleteBackground})`};
+        border-color: ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
       }
 
       &.${akEditorSelectedNodeClassName}:not(.danger) {

package/dist/es2019/plugins/layout/toolbar.js

@@ -69,6 +69,7 @@ export const buildToolbar = (state, intl, pos, _allowBreakout, addSidebarLayouts
       id: 'editor.layout.delete',
       type: 'button',
       appearance: 'danger',
+      focusEditoronEnter: true,
       icon: RemoveIcon,
       testId: commonMessages.remove.id,
       title: intl.formatMessage(commonMessages.remove),

package/dist/es2019/plugins/list/actions/outdent-list-items-selected.js

@@ -1,11 +1,13 @@
 import { Selection, TextSelection, NodeSelection } from 'prosemirror-state';
 import { NodeRange, Slice, Fragment } from 'prosemirror-model';
 import { liftTarget, ReplaceAroundStep, ReplaceStep } from 'prosemirror-transform';
+import { getOrderFromOrderedListNode } from '@atlaskit/editor-common/utils';
 import { isListNode, isListItemNode, joinSiblingLists, JoinDirection } from '../utils/node';
 import { findFirstParentListItemNode, findRootParentListNode } from '../utils/find';
 import { normalizeListItemsSelection, createListNodeRange } from '../utils/selection';
 import { GapCursorSelection } from '../../selection/gap-cursor-selection';
-export const outdentListItemsSelected = tr => {
+import { getFeatureFlags } from '../../feature-flags-context';
+export const outdentListItemsSelected = (tr, state) => {
   const originalSelection = tr.selection;
   const normalizedSelection = normalizeListItemsSelection({
     selection: tr.selection,
@@ -47,7 +49,8 @@ export const outdentListItemsSelected = tr => {
     } else {
       extractListItemsRangeFromList({
         tr,
-        range: mappedRange
+        range: mappedRange,
+        state
       });
       hasNormalizedToPositionLiftedOut = hasNormalizedToPositionLiftedOut || oldTo >= range.from && oldTo < range.to;
       hasNormalizedFromPositionLiftedOut = hasNormalizedFromPositionLiftedOut || oldFrom >= range.from && oldFrom < range.to;
@@ -202,7 +205,8 @@ const outdentRangeToParentList = ({
 
 const extractListItemsRangeFromList = ({
   tr,
-  range
+  range,
+  state
 }) => {
   const list = range.parent;
   const $start = tr.doc.resolve(range.start);
@@ -228,7 +232,23 @@ const extractListItemsRangeFromList = ({
     }
   }
 
-  const nextListFragment = listItemContent.append(Fragment.from(list.copy(Fragment.empty)));
+  let nextList = list.copy(Fragment.empty);
+  const featureFlags = getFeatureFlags(state);
+
+  if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+    // if splitting a numbered list, keep the splitted item
+    // counter as the start of the next (second half) list (instead
+    // of reverting back to 1 as a starting number)
+    const order = getOrderFromOrderedListNode(list);
+
+    if (list.type.name === 'orderedList') {
+      nextList.attrs = { ...nextList.attrs,
+        order: range.endIndex - 1 + order
+      };
+    }
+  }
+
+  const nextListFragment = listItemContent.append(Fragment.from(nextList));
 
   if (isTheEntireList) {
     const slice = new Slice(listItemContent, 0, 0);

package/dist/es2019/plugins/list/commands/outdent-list.js

@@ -25,7 +25,7 @@ export function outdentList(inputMethod = INPUT_METHOD.KEYBOARD) {
     closeHistory(state.tr);
     const actionSubjectId = isBulletList(parentListNode.node) ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
     let customTr = state.tr;
-    outdentListAction(customTr);
+    outdentListAction(customTr, state);
 
     if (!customTr || !customTr.docChanged) {
       // Even though this is a non-operation, we don't want to send this event to the browser. Because if we return false, the browser will move the focus to another place

package/dist/es2019/plugins/list/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { orderedList, bulletList, listItem } from '@atlaskit/adf-schema';
+import { orderedList, orderedListWithOrder, bulletList, listItem } from '@atlaskit/adf-schema';
 import { createPlugin } from './pm-plugins/main';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymapPlugin from './pm-plugins/keymap';
@@ -8,7 +8,11 @@ import { addAnalytics, ACTION, EVENT_TYPE, INPUT_METHOD, ACTION_SUBJECT, ACTION_
 import { tooltip, toggleBulletList, toggleOrderedList } from '../../keymaps';
 import { IconList, IconListNumber } from '../quick-insert/assets';
 
-const listPlugin = () => ({
+/*
+  Toolbar buttons to bullet and ordered list can be found in
+  packages/editor/editor-core/src/plugins/toolbar-lists-indentation/ui/Toolbar.tsx
+ */
+const listPlugin = options => ({
   name: 'list',
 
   nodes() {
@@ -17,7 +21,7 @@ const listPlugin = () => ({
       node: bulletList
     }, {
       name: 'orderedList',
-      node: orderedList
+      node: options !== null && options !== void 0 && options.restartNumberedLists ? orderedListWithOrder : orderedList
     }, {
       name: 'listItem',
       node: listItem

package/dist/es2019/plugins/list/pm-plugins/input-rules/create-list-input-rule.js

@@ -2,7 +2,8 @@ import { ruleWithAnalytics, createWrappingJoinRule } from '../../../../utils/inp
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
 export function createRuleForListType({
   listType,
-  expression
+  expression,
+  featureFlags
 }) {
   const isBulletList = listType.name === 'bulletList';
   const actionSubjectId = isBulletList ? ACTION_SUBJECT_ID.FORMAT_LIST_BULLET : ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER;
@@ -18,10 +19,20 @@ export function createRuleForListType({
 
   const shouldJoinNextNodeWhen = (_, node) => node.type === listType;
 
+  let getAttrs = {};
+
+  if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+    getAttrs = matchResult => {
+      return {
+        order: Number(matchResult[1])
+      };
+    };
+  }
+
   const inputRule = createWrappingJoinRule({
     match: expression,
     nodeType: listType,
-    getAttrs: {},
+    getAttrs,
     joinPredicate: shouldJoinNextNodeWhen
   });
   return ruleWithAnalytics(analyticsPayload)(inputRule);

package/dist/es2019/plugins/list/pm-plugins/input-rules/index.js

@@ -19,10 +19,13 @@ export default function inputRulePlugin(schema, featureFlags) {
     }));
   }
 
+  const expression = featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists ? /((^[1-9]{1}[0-9]{0,2})|^(0))[\.\)] $/ : /^(1)[\.\)] $/;
+
   if (orderedList) {
     rules.push(createRuleForListType({
-      expression: /^(1)[\.\)] $/,
-      listType: orderedList
+      expression,
+      listType: orderedList,
+      featureFlags
     }));
   }
 

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

@@ -7,7 +7,9 @@ import { isListNode } from '../utils/node';
 import { pluginFactory } from '../../../utils/plugin-state-factory';
 import { setGapCursorSelection } from '../../../utils';
 import { Side } from '../../selection/gap-cursor-selection';
-import { listPaddingLeftMarkerSpace, CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { listItemCounterPadding, CodeBlockSharedCssClassName, getOrderedListInlineStyles } from '@atlaskit/editor-common/styles';
+import { getItemCounterDigitsSize } from '@atlaskit/editor-common/utils';
+import { getFeatureFlags } from '../../feature-flags-context';
 const listPluginKey = new PluginKey('listPlugin');
 export const pluginKey = listPluginKey;
 const initialState = {
@@ -17,8 +19,9 @@ const initialState = {
   orderedListDisabled: false,
   decorationSet: DecorationSet.empty
 };
-export const getDecorations = doc => {
-  const decorations = []; // this stack keeps track of each (nested) list to calculate the indentation level
+export const getDecorations = (doc, state) => {
+  const decorations = [];
+  const featureFlags = getFeatureFlags(state); // this stack keeps track of each (nested) list to calculate the indentation level
 
   const processedListsStack = [];
   doc.nodesBetween(0, doc.content.size, (node, currentNodeStartPos) => {
@@ -49,19 +52,36 @@ export const getDecorations = doc => {
         'data-indent-level': `${depth}`
       }));
 
-      if (node.childCount >= 100) {
-        decorations.push(Decoration.node(from, to, {
-          'data-child-count': '100+'
-        }));
+      if (featureFlags !== null && featureFlags !== void 0 && featureFlags.restartNumberedLists) {
+        var _node$attrs;
+
+        // If a numbered list has item counters numbering >= 100, we'll need to add special
+        // spacing to account for the extra digit chars
+        const digitsSize = getItemCounterDigitsSize({
+          itemsCount: node === null || node === void 0 ? void 0 : node.childCount,
+          order: node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.order
+        });
+
+        if (digitsSize) {
+          decorations.push(Decoration.node(from, to, {
+            style: getOrderedListInlineStyles(digitsSize, 'string')
+          }));
+        }
+      } else {
+        if (node.childCount >= 100) {
+          decorations.push(Decoration.node(from, to, {
+            'data-child-count': '100+'
+          }));
+        }
       }
     }
   });
   return DecorationSet.empty.add(doc, decorations);
 };
 
-const handleDocChanged = (tr, pluginState) => {
+const handleDocChanged = (tr, pluginState, editorState) => {
   const nextPluginState = handleSelectionChanged(tr, pluginState);
-  const decorationSet = getDecorations(tr.doc);
+  const decorationSet = getDecorations(tr.doc, editorState);
   return { ...nextPluginState,
     decorationSet
   };
@@ -105,7 +125,7 @@ const {
 
 const createInitialState = state => {
   return { ...initialState,
-    decorationSet: getDecorations(state.doc)
+    decorationSet: getDecorations(state.doc, state)
   };
 };
 
@@ -138,7 +158,7 @@ export const createPlugin = eventDispatch => new SafePlugin({
           var _document, _document$elementFrom;
 
           const bufferPx = 50;
-          const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listPaddingLeftMarkerSpace + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
+          const isCodeBlockNextToListMarker = Boolean((_document = document) === null || _document === void 0 ? void 0 : (_document$elementFrom = _document.elementFromPoint(event.clientX + (listItemCounterPadding + bufferPx), event.clientY)) === null || _document$elementFrom === void 0 ? void 0 : _document$elementFrom.closest(`.${CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER}`));
 
           if (isCodeBlockNextToListMarker) {
             // +1 needed to put cursor inside li

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { PluginKey, NodeSelection } from 'prosemirror-state';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { media, mediaGroup, mediaSingle, mediaSingleWithCaption, mediaInline } from '@atlaskit/adf-schema';
 import { stateKey as pluginKey, createPlugin } from './pm-plugins/main';
 import { getMediaFeatureFlag } from '@atlaskit/media-common';
@@ -134,6 +136,42 @@ const mediaPlugin = options => ({
       });
     }
 
+    pmPlugins.push({
+      name: 'mediaSelectionHandler',
+      plugin: () => {
+        const mediaSelectionHandlerPlugin = new SafePlugin({
+          key: new PluginKey('mediaSelectionHandlerPlugin'),
+          props: {
+            handleScrollToSelection: view => {
+              const {
+                state: {
+                  selection
+                }
+              } = view;
+
+              if (!(selection instanceof NodeSelection) || selection.node.type.name !== 'media') {
+                return false;
+              }
+
+              const {
+                node,
+                offset
+              } = view.domAtPos(selection.from);
+
+              if ( // Is the media element mounted already?
+              offset === node.childNodes.length) {
+                // Media is not ready, so stop the scroll request
+                return true;
+              } // Media is ready, keep the scrolling request
+
+
+              return false;
+            }
+          }
+        });
+        return mediaSelectionHandlerPlugin;
+      }
+    });
     return pmPlugins;
   },
 

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

@@ -64,10 +64,9 @@ class MediaGroup extends React.Component {
       const oldMediaNodes = this.mediaNodes;
       this.mediaNodes = [];
       node.forEach((item, childOffset) => {
-        this.mediaPluginState.mediaGroupNodes[item.attrs.id] = {
-          node: item,
-          getPos: () => props.getPos() + childOffset + 1
-        };
+        const getPos = () => props.getPos() + childOffset + 1;
+
+        this.mediaPluginState.setMediaGroupNode(item, getPos);
         this.mediaNodes.push(item);
       });
       this.mediaPluginState.handleMediaGroupUpdate(oldMediaNodes, this.mediaNodes);
@@ -186,7 +185,9 @@ class MediaGroup extends React.Component {
       const hasDifferentContextId = await mediaNodeUpdater.hasDifferentContextId();
 
       if (hasDifferentContextId) {
-        await mediaNodeUpdater.copyNode();
+        await mediaNodeUpdater.copyNode({
+          traceId: node.attrs.__mediaTraceId
+        });
       }
     });
   }

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

@@ -44,7 +44,9 @@ export const updateMediaNodeAttributes = async props => {
 
   if (hasDifferentContextId) {
     try {
-      const copyNode = mediaNodeUpdater.copyNode();
+      const copyNode = mediaNodeUpdater.copyNode({
+        traceId: node.attrs.__mediaTraceId
+      });
       addPendingTask(copyNode);
       await copyNode;
     } catch (e) {

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

@@ -249,7 +249,7 @@ export class MediaNodeUpdater {
       })(this.props.view.state, this.props.view.dispatch);
     });
 
-    _defineProperty(this, "copyNode", async () => {
+    _defineProperty(this, "copyNode", async traceContext => {
       const mediaProvider = await this.props.mediaProvider;
       const {
         isMediaSingle,
@@ -283,7 +283,7 @@ export class MediaNodeUpdater {
           authProvider: uploadMediaClientConfig.authProvider,
           occurrenceKey: uuidV4()
         };
-        const mediaFile = await mediaClient.file.copyFile(source, destination);
+        const mediaFile = await mediaClient.file.copyFile(source, destination, undefined, traceContext);
         updateMediaNodeAttrs(source.id, {
           id: mediaFile.id,
           collection: currentCollectionName,

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

@@ -100,7 +100,9 @@ export default class MediaSingleNode extends Component {
         });
 
         try {
-          const copyNode = mediaNodeUpdater.copyNode();
+          const copyNode = mediaNodeUpdater.copyNode({
+            traceId: node.attrs.__mediaTraceId
+          });
           addPendingTask(copyNode);
           await copyNode;
         } catch (e) {

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

@@ -18,16 +18,15 @@ import { ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, ACTI
 import { RECENT_SEARCH_WIDTH_IN_PX } from '../../../../../ui/LinkSearch/ToolbarComponents';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { ErrorMessage } from '@atlaskit/editor-common/ui';
-import { token } from '@atlaskit/tokens';
 export const CONTAINER_WIDTH_IN_PX = RECENT_SEARCH_WIDTH_IN_PX;
 export const MAX_ALT_TEXT_LENGTH = 510; // double tweet length
 
 const supportText = css`
-  color: ${token('color.text.subtlest', N100)};
+  color: ${`var(--ds-text-subtlest, ${N100})`};
   font-size: ${relativeFontSizeToBase16(12)};
   padding: 12px 40px;
   line-height: 20px;
-  border-top: 1px solid ${token('color.border', N30)};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
   margin: 0;
 `;
 const container = css`
@@ -48,7 +47,7 @@ const validationWrapper = css`
   line-height: 0;
   padding: 12px 24px 12px 0;
   margin: 0 12px 0 40px;
-  border-top: 1px solid ${token('color.border.danger', R400)};
+  border-top: 1px solid ${`var(--ds-border-danger, ${R400})`};
   align-items: start;
   flex-direction: column;
 `;
@@ -57,7 +56,7 @@ const buttonWrapper = css`
   padding: 4px 8px;
 `;
 const clearText = css`
-  color: ${token('color.icon.subtle', N80)};
+  color: ${`var(--ds-icon-subtle, ${N80})`};
 `;
 export class AltTextEditComponent extends React.Component {
   constructor(props) {

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

@@ -407,6 +407,13 @@ export class MediaPluginStateImplementation {
       }
     });
 
+    _defineProperty(this, "setMediaGroupNode", (node, getPos) => {
+      this.mediaGroupNodes[node.attrs.id] = {
+        node,
+        getPos
+      };
+    });
+
     _defineProperty(this, "removeNodeById", state => {
       const {
         id