@atlaskit/editor-core 188.12.0 → 188.12.2

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

@@ -1,166 +1,11 @@
 import React from 'react';
 import CommentIcon from '@atlaskit/icon/glyph/comment';
-// AFP-2532 TODO: Fix automatic suppressions below
-// eslint-disable-next-line @atlassian/tangerine/import/entry-points
 import { addInlineComment, ToolTipContent } from '../../keymaps';
 import { setInlineCommentDraftState } from './commands';
 import { AnnotationTestIds, AnnotationSelectionType } from './types';
 import { isSelectionValid } from './utils';
 import { annotationMessages } from '@atlaskit/editor-common/messages';
-
-/**
- * Returns the coordintes at the bottom the selection.
- */
-const getCoordsBelowSelection = (bottomCoords, toolbarRect) => {
-  return {
-    top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
-    left: bottomCoords.right - toolbarRect.width / 2
-  };
-};
-
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-
-  Things to consider:
-  - popup is always above the selection
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-const calculateToolbarPositionAboveSelection = toolbarTitle => (editorView, nextPos) => {
-  const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
-  if (!toolbar) {
-    return nextPos;
-  }
-
-  // scroll wrapper for full page, fall back to document body
-  // TODO: look into using getScrollGutterOptions()
-  const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-  const wrapperBounds = scrollWrapper.getBoundingClientRect();
-  const selection = window && window.getSelection();
-  const range = selection && !selection.isCollapsed && selection.getRangeAt(0);
-  if (!range) {
-    return nextPos;
-  }
-  const toolbarRect = toolbar.getBoundingClientRect();
-  const {
-    head,
-    anchor
-  } = editorView.state.selection;
-  const topCoords = editorView.coordsAtPos(Math.min(head, anchor));
-  const bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
-  let top = (topCoords.top || 0) - toolbarRect.height * 1.5;
-  let left = 0;
-
-  // If not on the same line
-  if (topCoords.top !== bottomCoords.top) {
-    // selecting downwards
-    if (head > anchor) {
-      left = Math.max(topCoords.right, bottomCoords.right);
-    } else {
-      left = Math.min(topCoords.left, bottomCoords.left);
-    }
-
-    /*
-      short selection above a long paragraph
-       eg. short {<}heading
-      The purpose of this text is to show the selection range{>}.
-       The horizontal positioning should center around "heading",
-      not where it ends at "range".
-       Note: if it was "head<b>ing</b>" then it would only center
-      around "head". Undesireable but matches the current renderer.
-    */
-    const cliffPosition = range.getClientRects()[0];
-    if (cliffPosition.right < left) {
-      left = cliffPosition.left + cliffPosition.width / 2;
-    }
-  } else {
-    // Otherwise center on the single line selection
-    left = topCoords.left + (bottomCoords.right - topCoords.left) / 2;
-  }
-  left -= toolbarRect.width / 2;
-
-  // Place toolbar below selection if not sufficient space above
-  if (top < wrapperBounds.top) {
-    ({
-      top,
-      left
-    } = getCoordsBelowSelection(bottomCoords, toolbarRect));
-  }
-
-  // remap positions from browser document to wrapperBounds
-  return {
-    top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-    left: Math.max(0, left - wrapperBounds.left)
-  };
-};
-
-/*
-  Calculates the position of the floating toolbar relative to the selection.
-
-  This is a re-implementation which closely matches the behaviour on Confluence renderer.
-  The main difference is the popup is always above the selection.
-
-  Things to consider:
-  - stick as close to the head X release coordinates as possible
-  - coordinates of head X and getBoundingClientRect() are absolute in client viewport (not including scroll offsets)
-  - popup may appear in '.fabric-editor-popup-scroll-parent' (or body)
-  - we use the toolbarRect to center align toolbar
-  - use wrapperBounds to clamp values
-  - editorView.dom bounds differ to wrapperBounds, convert at the end
-*/
-const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, nextPos) => {
-  const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
-  if (!toolbar) {
-    return nextPos;
-  }
-
-  // scroll wrapper for full page, fall back to document body
-  // TODO: look into using getScrollGutterOptions()
-  const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
-  const wrapperBounds = scrollWrapper.getBoundingClientRect();
-  const selection = window && window.getSelection();
-  const range = selection && !selection.isCollapsed && selection.getRangeAt(0);
-  if (!range) {
-    return nextPos;
-  }
-  const toolbarRect = toolbar.getBoundingClientRect();
-  const {
-    head,
-    anchor
-  } = editorView.state.selection;
-  let topCoords = editorView.coordsAtPos(Math.min(head, anchor));
-  let bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
-  let top;
-  // If not the same line, display toolbar below.
-  if (head > anchor && topCoords.top !== bottomCoords.top) {
-    // We are taking the previous pos to the maxium, so avoid end of line positions
-    // returning the next line's rect.
-    top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
-  } else {
-    top = (topCoords.top || 0) - toolbarRect.height * 1.5;
-  }
-  let left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
-
-  // Place toolbar below selection if not sufficient space above
-  if (top < wrapperBounds.top) {
-    ({
-      top,
-      left
-    } = getCoordsBelowSelection(bottomCoords, toolbarRect));
-  }
-
-  // remap positions from browser document to wrapperBounds
-  return {
-    top: top - wrapperBounds.top + scrollWrapper.scrollTop,
-    left: Math.max(0, left - wrapperBounds.left)
-  };
-};
+import { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from '@atlaskit/editor-common/utils';
 export const buildToolbar = (state, intl, isToolbarAbove = false) => {
   const {
     schema

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

@@ -10,7 +10,6 @@ import ToolbarButton from '../../../../ui/ToolbarButton';
 import { separatorStyles, buttonGroupStyle, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
 import { showPlaceholderFloatingToolbar } from '../../../placeholder-text/actions';
-import { insertLayoutColumnsWithAnalytics } from '../../../layout/actions';
 import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands';
 import { insertExpand } from '../../../expand/commands';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
@@ -206,10 +205,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "insertLayoutColumns", inputMethod => {
+      var _pluginInjectionApi$l;
       const {
-        editorView
+        editorView,
+        pluginInjectionApi
       } = this.props;
-      insertLayoutColumnsWithAnalytics(inputMethod)(editorView.state, editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$l = pluginInjectionApi.layout) === null || _pluginInjectionApi$l === void 0 ? void 0 : _pluginInjectionApi$l.actions.insertLayoutColumns(inputMethod)(editorView.state, editorView.dispatch);
       return true;
     });
     _defineProperty(this, "createStatus", inputMethod => {

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

@@ -3,8 +3,9 @@ import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { flatmap, mapChildren } from '../../utils/slice';
 import { getStepRange, isEmptyDocument } from '@atlaskit/editor-common/utils';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../analytics/types/enums';
-import { addAnalytics, withAnalytics } from '../analytics/utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { addAnalytics } from '../analytics/utils';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { LAYOUT_TYPE } from '../analytics/types/node-events';
 import { pluginKey } from './pm-plugins/plugin-key';
 export const ONE_COL_LAYOUTS = ['single'];
@@ -75,7 +76,7 @@ export const insertLayoutColumns = (state, dispatch) => {
   }
   return true;
 };
-export const insertLayoutColumnsWithAnalytics = inputMethod => withAnalytics({
+export const insertLayoutColumnsWithAnalytics = editorAnalyticsAPI => inputMethod => withAnalytics(editorAnalyticsAPI, {
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
   actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { layoutColumn, layoutSection } from '@atlaskit/adf-schema';
 import { default as createLayoutPlugin } from './pm-plugins/main';
 import { buildToolbar } from './toolbar';
-import { createDefaultLayoutSection } from './actions';
+import { createDefaultLayoutSection, insertLayoutColumnsWithAnalytics } from './actions';
 import { IconLayout } from '@atlaskit/editor-common/quick-insert';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
@@ -11,61 +11,67 @@ export { pluginKey };
 const layoutPlugin = ({
   config: options = {},
   api
-}) => ({
-  name: 'layout',
-  nodes() {
-    return [{
-      name: 'layoutSection',
-      node: layoutSection
-    }, {
-      name: 'layoutColumn',
-      node: layoutColumn
-    }];
-  },
-  pmPlugins() {
-    return [{
-      name: 'layout',
-      plugin: () => createLayoutPlugin(options)
-    }];
-  },
-  pluginsOptions: {
-    floatingToolbar(state, intl) {
-      const {
-        pos,
-        allowBreakout,
-        addSidebarLayouts,
-        allowSingleColumnLayout
-      } = pluginKey.getState(state);
-      if (pos !== null) {
-        var _api$decorations$acti;
-        return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api === null || api === void 0 ? void 0 : (_api$decorations$acti = api.decorations.actions) === null || _api$decorations$acti === void 0 ? void 0 : _api$decorations$acti.hoverDecoration);
-      }
-      return undefined;
+}) => {
+  var _api$analytics;
+  return {
+    name: 'layout',
+    nodes() {
+      return [{
+        name: 'layoutSection',
+        node: layoutSection
+      }, {
+        name: 'layoutColumn',
+        node: layoutColumn
+      }];
     },
-    quickInsert: ({
-      formatMessage
-    }) => [{
-      id: 'layout',
-      title: formatMessage(messages.columns),
-      description: formatMessage(messages.columnsDescription),
-      keywords: ['column', 'section'],
-      priority: 1100,
-      icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
-      action(insert, state) {
-        var _api$analytics, _api$analytics$action;
-        const tr = insert(createDefaultLayoutSection(state));
-        api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.attachAnalyticsEvent({
-          action: ACTION.INSERTED,
-          actionSubject: ACTION_SUBJECT.DOCUMENT,
-          actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
-          attributes: {
-            inputMethod: INPUT_METHOD.QUICK_INSERT
-          },
-          eventType: EVENT_TYPE.TRACK
-        })(tr);
-        return tr;
-      }
-    }]
-  }
-});
+    pmPlugins() {
+      return [{
+        name: 'layout',
+        plugin: () => createLayoutPlugin(options)
+      }];
+    },
+    actions: {
+      insertLayoutColumns: insertLayoutColumnsWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)
+    },
+    pluginsOptions: {
+      floatingToolbar(state, intl) {
+        const {
+          pos,
+          allowBreakout,
+          addSidebarLayouts,
+          allowSingleColumnLayout
+        } = pluginKey.getState(state);
+        if (pos !== null) {
+          var _api$decorations$acti;
+          return buildToolbar(state, intl, pos, allowBreakout, addSidebarLayouts, allowSingleColumnLayout, api === null || api === void 0 ? void 0 : (_api$decorations$acti = api.decorations.actions) === null || _api$decorations$acti === void 0 ? void 0 : _api$decorations$acti.hoverDecoration);
+        }
+        return undefined;
+      },
+      quickInsert: ({
+        formatMessage
+      }) => [{
+        id: 'layout',
+        title: formatMessage(messages.columns),
+        description: formatMessage(messages.columnsDescription),
+        keywords: ['column', 'section'],
+        priority: 1100,
+        icon: () => /*#__PURE__*/React.createElement(IconLayout, null),
+        action(insert, state) {
+          var _api$analytics2, _api$analytics2$actio;
+          const tr = insert(createDefaultLayoutSection(state));
+          api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.attachAnalyticsEvent({
+            action: ACTION.INSERTED,
+            actionSubject: ACTION_SUBJECT.DOCUMENT,
+            actionSubjectId: ACTION_SUBJECT_ID.LAYOUT,
+            attributes: {
+              inputMethod: INPUT_METHOD.QUICK_INSERT
+            },
+            eventType: EVENT_TYPE.TRACK
+          })(tr);
+          return tr;
+        }
+      }]
+    }
+  };
+};
 export default layoutPlugin;

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

@@ -142,7 +142,7 @@ const panelPlugin = ({
       }
       return quickInsertOptions;
     },
-    floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration)
+    floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, options, providerFactory, api)
   }
 });
 

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

@@ -13,7 +13,8 @@ import { findPanel } from './utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { DEFAULT_BORDER_COLOR } from '@atlaskit/editor-common/ui-color';
 import { PanelType } from '@atlaskit/adf-schema';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID, withAnalytics } from '../analytics';
+import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { messages } from './message';
 export const panelIconMap = {
   [PanelType.INFO]: {
@@ -41,7 +42,7 @@ export const panelIconMap = {
     id: 'atlassian-tip'
   }
 };
-export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, activePanelType, activePanelColor, activePanelIcon, state) => {
+export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state) => {
   // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
   const items = [{
     id: 'editor.panel.info',
@@ -114,7 +115,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         },
         eventType: EVENT_TYPE.TRACK
       };
-      withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
+      withAnalytics(editorAnalyticsAPI, payload)(changePanelType(PanelType.CUSTOM, {
         color,
         ...previousEmoji
       }, isCustomPanelEnabled))(state, dispatch);
@@ -144,7 +145,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         },
         eventType: EVENT_TYPE.TRACK
       };
-      withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
+      withAnalytics(editorAnalyticsAPI, payload)(changePanelType(PanelType.CUSTOM, {
         emoji: emoji.shortName,
         emojiId: emoji.id,
         emojiText: emoji.fallback
@@ -168,7 +169,7 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
         },
         eventType: EVENT_TYPE.TRACK
       };
-      withAnalytics(payload)(changePanelType(PanelType.CUSTOM, {
+      withAnalytics(editorAnalyticsAPI, payload)(changePanelType(PanelType.CUSTOM, {
         emoji: undefined,
         emojiId: undefined,
         emojiText: undefined
@@ -243,12 +244,13 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
   });
   return items;
 };
-export const getToolbarConfig = (state, intl, options = {}, providerFactory, hoverDecoration) => {
+export const getToolbarConfig = (state, intl, options = {}, providerFactory, api) => {
   const {
     formatMessage
   } = intl;
   const panelObject = findPanel(state);
   if (panelObject) {
+    var _api$analytics;
     const nodeType = state.schema.nodes.panel;
     const {
       panelType,
@@ -260,7 +262,7 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory, hov
     };
 
     // force toolbar to be turned on
-    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, hoverDecoration, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
+    const items = getToolbarItems(formatMessage, nodeType, options.allowCustomPanel || false, options.allowCustomPanel && options.allowCustomPanelEdit || false, providerFactory, api === null || api === void 0 ? void 0 : api.decorations.actions.hoverDecoration, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions, panelType, options.allowCustomPanel ? panelColor : undefined, options.allowCustomPanel ? panelIcon || isStandardPanel(panelType) : undefined, state);
     const getDomRef = editorView => {
       const domAtPos = editorView.domAtPos.bind(editorView);
       const element = findDomRefAtPos(panelObject.pos, domAtPos);

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

@@ -2,6 +2,13 @@ import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { mapSlice, unwrap, removeNestedEmptyEls, walkUpTreeUntil } from '@atlaskit/editor-common/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { getRandomHex } from '@atlaskit/media-common';
+import { DEFAULT_IMAGE_WIDTH } from '@atlaskit/editor-common/media-single';
+
+/**
+ * Ensure correct layout in nested mode
+ *
+ * TODO: this func is only used in handlePaste, so layout update won't work for drop event
+ */
 export function transformSliceForMedia(slice, schema) {
   const {
     mediaSingle,
@@ -9,8 +16,6 @@ export function transformSliceForMedia(slice, schema) {
     table,
     bulletList,
     orderedList,
-    media,
-    mediaInline,
     expand,
     nestedExpand
   } = schema.nodes;
@@ -41,29 +46,6 @@ export function transformSliceForMedia(slice, schema) {
         return node.type.name === 'mediaSingle' ? mediaSingle.createChecked(attrs, node.content, node.marks) : node;
       });
     }
-    const __mediaTraceId = getRandomHex(8);
-    newSlice = mapSlice(newSlice, node => {
-      // This logic is duplicated in editor-plugin-ai where external images can be inserted
-      // from external sources through the use of AI.  The editor-plugin-ai package is avoiding
-      // sharing dependencies with editor-core to support products using it with various versions
-      // of editor packages.
-      // The duplication is in the following file:
-      // packages/editor/editor-plugin-ai/src/prebuilt/content-transformers/markdown-to-pm/markdown-transformer.ts
-      if (node.type.name === 'media') {
-        return media.createChecked({
-          ...node.attrs,
-          __external: node.attrs.type === 'external',
-          __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
-        }, node.content, node.marks);
-      }
-      if (node.type.name === 'mediaInline') {
-        return mediaInline.createChecked({
-          ...node.attrs,
-          __mediaTraceId
-        }, node.content, node.marks);
-      }
-      return node;
-    });
     return newSlice;
   };
 }
@@ -90,6 +72,52 @@ export const transformSliceToCorrectMediaWrapper = (slice, schema) => {
   });
 };
 
+/**
+ * This func will be called when copy & paste, drag & drop external html with media, media files, and slices from editor
+ * Because width may not be available when transform, DEFAULT_IMAGE_WIDTH is used as a fallback
+ *
+ */
+export const transformSliceToMediaSingleWithNewExperience = (slice, schema) => {
+  const {
+    mediaInline,
+    mediaSingle,
+    media
+  } = schema.nodes;
+  const newSlice = mapSlice(slice, node => {
+    // This logic is duplicated in editor-plugin-ai where external images can be inserted
+    // from external sources through the use of AI.  The editor-plugin-ai package is avoiding
+    // sharing dependencies with editor-core to support products using it with various versions
+    // of editor packages.
+    // The duplication is in the following file:
+    // packages/editor/editor-plugin-ai/src/prebuilt/content-transformers/markdown-to-pm/markdown-transformer.ts
+    if (node.type === mediaSingle) {
+      return getBooleanFF('platform.editor.media.extended-resize-experience') ? mediaSingle.createChecked({
+        width: node.attrs.width || DEFAULT_IMAGE_WIDTH,
+        widthType: node.attrs.widthType || 'pixel',
+        layout: node.attrs.layout
+      }, node.content, node.marks) : node;
+    }
+    return node;
+  });
+  return mapSlice(newSlice, node => {
+    const __mediaTraceId = getRandomHex(8);
+    if (node.type === media) {
+      return media.createChecked({
+        ...node.attrs,
+        __external: node.attrs.type === 'external',
+        __mediaTraceId: node.attrs.type === 'external' ? null : __mediaTraceId
+      }, node.content, node.marks);
+    }
+    if (node.type.name === 'mediaInline') {
+      return mediaInline.createChecked({
+        ...node.attrs,
+        __mediaTraceId
+      }, node.content, node.marks);
+    }
+    return node;
+  });
+};
+
 /**
  * Check base styles to see if an element will be invisible when rendered in a document.
  * @param element

package/dist/es2019/plugins/paste/pm-plugins/analytics.js

@@ -1,4 +1,4 @@
-import { ACTION, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, PasteTypes, PasteContents, withAnalytics } from '../../analytics';
+import { ACTION, INPUT_METHOD, EVENT_TYPE, ACTION_SUBJECT, ACTION_SUBJECT_ID, addAnalytics, PasteTypes, PasteContents } from '../../analytics';
 import { getPasteSource } from '../util';
 import { handlePasteAsPlainText, handlePasteIntoTaskOrDecisionOrPanel, handleCodeBlock, handleMediaSingle, handlePastePreservingMarks, handleMarkdown, handleRichText, handleExpandPasteInTable, handleSelectedTable, handlePasteLinkOnSelectedText, handlePasteIntoCaption, handlePastePanelOrDecisionContentIntoList, handlePasteNonNestableBlockNodesIntoList } from '../handlers';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
@@ -219,9 +219,6 @@ export function sendPasteAnalyticsEvent(view, event, slice, pasteContext) {
   const payload = createPasteAnalyticsPayload(view, event, slice, pasteContext);
   view.dispatch(addAnalytics(view.state, view.state.tr, payload));
 }
-export function pasteCommandWithAnalytics(view, event, slice, pasteContext) {
-  return withAnalytics(() => createPasteAnalyticsPayload(view, event, slice, pasteContext));
-}
 export const handlePasteAsPlainTextWithAnalytics = (view, event, slice) => injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {
   type: PasteTypes.plain,
   asPlain: true

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

@@ -5,19 +5,17 @@ import { MarkdownTransformer } from '@atlaskit/editor-markdown-transformer';
 import { addLinkMetadata } from '@atlaskit/editor-common/card';
 import { mapChildren } from '../../../utils/slice';
 import { getExtensionAutoConvertersFromProvider } from '@atlaskit/editor-common/extensions';
-import { isPastedFile as isPastedFileFromEvent } from '@atlaskit/editor-common/paste';
-import { transformSliceForMedia, transformSliceToCorrectMediaWrapper, unwrapNestedMediaElements } from '../plugins/media';
+import { isPastedFile as isPastedFileFromEvent, md } from '@atlaskit/editor-common/paste';
+import { transformSliceForMedia, transformSliceToCorrectMediaWrapper, transformSliceToMediaSingleWithNewExperience, unwrapNestedMediaElements } from '../plugins/media';
 import { escapeLinks, htmlContainsSingleFile, isPastedFromWord, isPastedFromExcel, htmlHasInvalidLinkTags, removeDuplicateInvalidLinks, transformUnsupportedBlockCardToInline } from '../util';
-import { linkifyContent } from '@atlaskit/editor-common/utils';
+import { linkifyContent, measureRender } from '@atlaskit/editor-common/utils';
 import { transformSliceNestedExpandToExpand } from '../../expand/utils';
 import { handleMacroAutoConvert, handleMention, handleParagraphBlockMarks } from '../handlers';
 import { transformSliceToJoinAdjacentCodeBlocks, transformSingleLineCodeBlockToCodeMark } from '../../code-block/utils';
 import { createPasteMeasurePayload, getContentNodeTypes, handlePasteAsPlainTextWithAnalytics, handlePasteIntoTaskAndDecisionWithAnalytics, handleCodeBlockWithAnalytics, handleMediaSingleWithAnalytics, handlePastePreservingMarksWithAnalytics, handleMarkdownWithAnalytics, handleRichTextWithAnalytics, handleExpandWithAnalytics, handleSelectedTableWithAnalytics, handlePasteLinkOnSelectedTextWithAnalytics, sendPasteAnalyticsEvent, handlePasteIntoCaptionWithAnalytics, handlePastePanelOrDecisionIntoListWithAnalytics, handlePasteNonNestableBlockNodesIntoListWithAnalytics } from './analytics';
 import { ACTION, analyticsPluginKey, INPUT_METHOD, PasteTypes } from '../../analytics';
 import { isInsideBlockQuote, insideTable, measurements } from '../../../utils';
-import { measureRender } from '@atlaskit/editor-common/utils';
 import { upgradeTextToLists, splitParagraphs } from '../commands';
-import { md } from '@atlaskit/editor-common/paste';
 import { transformSliceToDecisionList } from '../../tasks-and-decisions/utils';
 import { containsAnyAnnotations, stripNonExistingAnnotations } from '../../annotation/utils';
 import { clipboardTextSerializer } from './clipboard-text-serializer';
@@ -365,6 +363,7 @@ export function createPlugin(schema, dispatchAnalyticsEvent, dispatch, featureFl
         }
         slice = transformSingleLineCodeBlockToCodeMark(slice, schema);
         slice = transformSliceToCorrectMediaWrapper(slice, schema);
+        slice = transformSliceToMediaSingleWithNewExperience(slice, schema);
         slice = transformSliceToDecisionList(slice, schema);
 
         // splitting linebreaks into paragraphs must happen before upgrading text to lists

package/dist/es2019/plugins/rank.js

@@ -13,7 +13,7 @@ export default {
   'mediaKeymap',
   // selection keymap needs to be above gap cursor keymap so it can set node selections from
   // left/right arrows
-  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
+  'selectionKeymap', 'gapCursorKeymap', 'gapCursor', 'syncUrlText', 'fakeCursorToolbarPlugin', 'hyperLink', 'table', 'tableDecorations', 'hyperlinkInputRule', 'tablePMColResizing', 'hyperlinkKeymap', 'tableColResizing', 'undoRedoKeyMap', 'blockTypeKeyMap', 'tableEditing', 'filterStepsPlugin', 'pmCollab', 'collab', 'ruleInputRule', 'ruleKeymap', 'panel', 'media', 'mediaSingleKeymap', 'mediaEditor', 'unsupportedContent', 'jiraIssue', 'fakeTextCursor', 'helpDialog', 'helpDialogKeymap', 'macro', 'expand', 'extension', 'layout', 'contextPanel', 'selectionToolbar', 'floatingToolbar', 'clearMarksOnChange', 'reactNodeView', 'history', 'undoRedoPlugin', 'codeBlockIndent', 'placeholder', 'width', 'maxContentSize', 'multilineContent', 'grid', 'mobileDimensions', 'scrollGutterPlugin', 'analytics', 'findReplace', 'selection', 'avatarGroup', 'viewUpdateSubscription', 'beforePrimaryToolbar', 'inlineCode'],
   nodes: ['doc', 'paragraph', 'text', 'bulletList', 'orderedList', 'listItem', 'heading', 'blockquote', 'codeBlock', 'rule', 'panel', 'mention', 'confluenceUnsupportedBlock', 'confluenceUnsupportedInline', 'unsupportedBlock', 'unsupportedInline', 'confluenceJiraIssue', 'hardBreak', 'emoji', 'placeholder', 'mediaSingle', 'mediaGroup', 'table', 'expand', 'nestedExpand', 'media', 'tableHeader', 'decisionList', 'tableRow', 'decisionItem', 'tableCell', 'taskList', 'taskItem', 'extension', 'bodiedExtension', 'inlineExtension', 'layoutSection', 'layoutColumn', 'inlineCard', 'blockCard', 'embedCard'],
   marks: [
   // Fragment mark is both for inline and block elements

package/dist/es2019/plugins/tasks-and-decisions/index.js

@@ -72,7 +72,7 @@ const tasksAndDecisionsPlugin = ({
       name: 'tasksAndDecisionsKeyMap',
       plugin: ({
         schema
-      }) => keymap(schema, allowNestedTasks, consumeTabs)
+      }) => keymap(schema, api, allowNestedTasks, consumeTabs)
     } // Needs to be after "save-on-enter"
     ];
   },