@atlaskit/editor-core 176.0.2 → 177.0.0

package/dist/es2019/plugins/help-dialog/index.js

@@ -41,7 +41,7 @@ export function createPlugin(dispatch, imageEnabled) {
   });
 }
 
-const helpDialog = legacyImageUploadProvider => ({
+const helpDialog = (imageUploadProviderExists = false) => ({
   name: 'helpDialog',
 
   pmPlugins() {
@@ -49,7 +49,7 @@ const helpDialog = legacyImageUploadProvider => ({
       name: 'helpDialog',
       plugin: ({
         dispatch
-      }) => createPlugin(dispatch, !!legacyImageUploadProvider)
+      }) => createPlugin(dispatch, imageUploadProviderExists)
     }, {
       name: 'helpDialogKeymap',
       plugin: () => keymapPlugin()

package/dist/es2019/plugins/hyperlink/Toolbar.js

@@ -8,7 +8,7 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { normalizeUrl } from './utils';
 import { linkToolbarMessages as linkToolbarCommonMessages, linkMessages } from '../../messages';
 import { isSafeUrl } from '@atlaskit/adf-schema';
-import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/LinkSearch/ToolbarComponents';
+import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '../../ui/LinkSearch/ToolbarComponents';
 import { HyperlinkToolbarAppearance } from './HyperlinkToolbarAppearance';
 import { addAnalytics, ACTION_SUBJECT_ID } from '../analytics';
 import { buildVisitedLinkPayload, buildOpenedSettingsPayload } from '../../utils/linking-utils';
@@ -73,6 +73,16 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
     formatMessage
   } = intl;
   const linkState = stateKey.getState(state);
+  /**
+   * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+   */
+
+  const {
+    lpLinkPicker,
+    lpLinkPickerFocusTrap,
+    preventPopupOverflow
+  } = getFeatureFlags(state);
+  const shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
 
   if (linkState && linkState.activeLinkMark) {
     const {
@@ -177,6 +187,8 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
       case 'EDIT_INSERTED':
       case 'INSERT':
         {
+          var _options$linkPicker, _options$linkPicker$p;
+
           let link;
 
           if (isEditLink(activeLinkMark) && activeLinkMark.node) {
@@ -185,9 +197,12 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
           }
 
           const displayText = isEditLink(activeLinkMark) ? getLinkText(activeLinkMark, state) : linkState.activeText;
+          const popupHeight = lpLinkPicker && Boolean(options === null || options === void 0 ? void 0 : (_options$linkPicker = options.linkPicker) === null || _options$linkPicker === void 0 ? void 0 : (_options$linkPicker$p = _options$linkPicker.plugins) === null || _options$linkPicker$p === void 0 ? void 0 : _options$linkPicker$p.length) ? LINKPICKER_HEIGHT_IN_PX : RECENT_SEARCH_HEIGHT_IN_PX;
           return { ...hyperLinkToolbar,
-            height: RECENT_SEARCH_HEIGHT_IN_PX,
+            preventPopupOverflow,
+            height: popupHeight,
             width: RECENT_SEARCH_WIDTH_IN_PX,
+            focusTrap: shouldEnableFocusTrap,
             items: [{
               type: 'custom',
               fallback: [],
@@ -204,6 +219,7 @@ export const getToolbarConfig = options => (state, intl, providerFactory) => {
                   displayUrl: link,
                   displayText: displayText || '',
                   providerFactory: providerFactory,
+                  onCancel: () => view.focus(),
                   onSubmit: (href, title = '', displayText, inputMethod) => {
                     var _options$cardOptions;
 

package/dist/es2019/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -4,17 +4,24 @@ import { LinkPicker } from '@atlaskit/link-picker';
 import { hideLinkToolbar as cardHideLinkToolbar } from '../../../card/pm-plugins/actions';
 import { hideLinkToolbar } from '../../commands';
 import { useEscapeClickaway } from './useEscapeClickaway';
+/**
+ * Returns a type that matches T but where keys (K) are now optional
+ */
+
 export const EditorLinkPicker = ({
   view,
+  onCancel,
   ...restProps
 }) => {
   const onEscape = useCallback(() => {
     hideLinkToolbar()(view.state, view.dispatch);
     view.dispatch(cardHideLinkToolbar(view.state.tr));
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   const onClickAway = useCallback(() => {
     hideLinkToolbar()(view.state, view.dispatch);
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   const ref = useEscapeClickaway(onEscape, onClickAway);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref

package/dist/es2019/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -29,7 +29,8 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
       displayText,
       displayUrl,
       providerFactory,
-      view
+      view,
+      onCancel
     } = this.props;
     return /*#__PURE__*/React.createElement(WithProviders, {
       providers: ['activityProvider', 'searchProvider'],
@@ -45,23 +46,18 @@ export default class HyperlinkAddToolbar extends React.PureComponent {
         render: ({
           hyperlinkPluginState
         }) => {
-          var _linkPickerOptions$pl;
-
           const {
             lpLinkPicker
           } = getFeatureFlags(view.state);
-          /**
-           * If activityProvider or searchProvider are present then only enable if there are plugins supplied to
-           * faciliate providing link search capabilities
-           */
 
-          if (lpLinkPicker && (!activityProvider && !searchProvider || Boolean(linkPickerOptions === null || linkPickerOptions === void 0 ? void 0 : (_linkPickerOptions$pl = linkPickerOptions.plugins) === null || _linkPickerOptions$pl === void 0 ? void 0 : _linkPickerOptions$pl.length))) {
+          if (lpLinkPicker) {
             return /*#__PURE__*/React.createElement(EditorLinkPicker, _extends({
               view: view
             }, linkPickerOptions, {
               url: displayUrl,
               displayText: displayText,
-              onSubmit: onSubmitInterface(onSubmit)
+              onSubmit: onSubmitInterface(onSubmit),
+              onCancel: onCancel
             }));
           }
 

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

@@ -24,6 +24,7 @@ export const BlockInsertElementBrowser = props => {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };

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

@@ -28,6 +28,7 @@ export const BlockInsertMenuLegacy = props => {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };

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

@@ -16,7 +16,8 @@ export const BlockInsertMenu = props => {
       disabled: props.disabled,
       onClick: props.onClick,
       spacing: props.spacing,
-      label: props.label
+      label: props.label,
+      "aria-keyshortcuts": "/"
     }));
   }
 

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

@@ -24,7 +24,8 @@ export const DropDownButton = /*#__PURE__*/React.memo(props => jsx(ToolbarButton
   spacing: props.spacing,
   "aria-expanded": props['aria-expanded'],
   "aria-haspopup": props['aria-haspopup'],
-  "aria-label": props.label,
+  "aria-keyshortcuts": props['aria-keyshortcuts'],
+  "aria-label": `${props.label} /`,
   iconBefore: jsx(DropDownButtonIcon, {
     label: ""
   }),

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

@@ -547,6 +547,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       css: buttonGroupStyle
     }, buttons.map(btn => jsx(ToolbarButton, {
       item: btn,
+      testId: String(btn.content),
       ref: btn.value.name === 'emoji' ? this.handleEmojiButtonRef : noop,
       key: btn.value.name,
       spacing: isReducedSpacing ? 'none' : 'default',
@@ -556,6 +557,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       title: btn.title,
       "aria-label": btn['aria-label'],
       "aria-haspopup": btn['aria-haspopup'],
+      "aria-keyshortcuts": btn['aria-keyshortcuts'],
       onItemClick: this.insertToolbarMenuItem
     })), jsx("span", {
       css: wrapperStyle

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/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) {