@atlaskit/editor-core 188.0.12 → 188.1.0

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

@@ -9,13 +9,8 @@ import AkModalDialog, { ModalTransition, useModal } from '@atlaskit/modal-dialog
 import { header, footer, contentWrapper, line, content, row, codeSm, codeMd, codeLg, title, column, dialogHeader } from './styles';
 import { navToFloatingToolbar, navToEditorToolbar, toggleBold, toggleItalic, toggleUnderline, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleHeading1, toggleHeading2, toggleHeading3, toggleHeading4, toggleHeading5, toggleHeading6, toggleOrderedList, insertRule, addLink, setNormalText, alignLeft, clearFormatting, undo, redo, pastePlainText, addInlineComment, toggleTaskItemCheckbox, toggleCode, openHelp, toggleBulletList, toggleBlockQuote } from '@atlaskit/editor-common/keymaps';
 import ToolbarButton from '../../../ui/ToolbarButton';
-import { toolbarMessages, listMessages } from '@atlaskit/editor-common/messages';
-import { messages as insertBlockMessages } from '../../insert-block/ui/ToolbarInsertBlock/messages';
-import { messages as blockTypeMessages } from '@atlaskit/editor-plugin-block-type/messages';
-import { messages as undoRedoMessages } from '../../undo-redo/messages';
-import { alignmentMessages } from '../../../ui/Alignment/messages';
+import { alignmentMessages, annotationMessages, listMessages, toolbarInsertBlockMessages, toolbarMessages, undoRedoMessages, blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { closeHelpCommand } from '../commands';
-import { annotationMessages } from '../../annotation/toolbar';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 const messages = defineMessages({
   editorHelp: {
@@ -203,19 +198,19 @@ export const formatting = ({
     css: codeLg
   }, "```"))
 }, {
-  name: formatMessage(insertBlockMessages.horizontalRule),
+  name: formatMessage(toolbarInsertBlockMessages.horizontalRule),
   type: 'rule',
   keymap: () => insertRule,
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeLg
   }, "---"))
 }, {
-  name: formatMessage(insertBlockMessages.link),
+  name: formatMessage(toolbarInsertBlockMessages.link),
   type: 'link',
   keymap: () => addLink,
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeLg
-  }, "[", jsx(FormattedMessage, insertBlockMessages.link), "](http://a.com)"))
+  }, "[", jsx(FormattedMessage, toolbarInsertBlockMessages.link), "](http://a.com)"))
 }, {
   name: formatMessage(toolbarMessages.code),
   type: 'code',
@@ -224,7 +219,7 @@ export const formatting = ({
     css: codeLg
   }, "`", jsx(FormattedMessage, toolbarMessages.code), "`"))
 }, {
-  name: formatMessage(insertBlockMessages.action),
+  name: formatMessage(toolbarInsertBlockMessages.action),
   type: 'taskItem',
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeSm
@@ -232,7 +227,7 @@ export const formatting = ({
     css: codeLg
   }, "Space"))
 }, {
-  name: formatMessage(insertBlockMessages.decision),
+  name: formatMessage(toolbarInsertBlockMessages.decision),
   type: 'decisionItem',
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeSm
@@ -240,13 +235,13 @@ export const formatting = ({
     css: codeLg
   }, "Space"))
 }, {
-  name: formatMessage(insertBlockMessages.emoji),
+  name: formatMessage(toolbarInsertBlockMessages.emoji),
   type: 'emoji',
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeLg
   }, ":"))
 }, {
-  name: formatMessage(insertBlockMessages.mention),
+  name: formatMessage(toolbarInsertBlockMessages.mention),
   type: 'mention',
   autoFormatting: () => jsx("span", null, jsx("span", {
     css: codeLg

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

@@ -2,7 +2,7 @@ import React from 'react';
 import memoize from 'lodash/memoize';
 import memoizeOne from 'memoize-one';
 import { messages } from './messages';
-import { messages as blockTypeMessages } from '@atlaskit/editor-plugin-block-type/messages';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { ToolTipContent } from '../../../../keymaps';
 import { sortItems } from './sort-items';
 import { action, link, media, mention, emoji, table, layout, codeblock, panel, blockquote, decision, horizontalrule, expand, date, placeholder, status, more, imageUpload } from './item';

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

@@ -23,6 +23,7 @@ import { ReactMediaNode } from './nodeviews/mediaNodeView';
 import { ReactMediaInlineNode } from './nodeviews/mediaInline';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { stateKey } from './pm-plugins/plugin-key';
+import { insertMediaAsMediaSingle } from './utils/media-single';
 export { insertMediaSingleNode } from './utils/media-single';
 const MediaPickerFunctionalComponent = ({
   api,
@@ -56,6 +57,12 @@ const mediaPlugin = ({
       }
       return stateKey.getState(editorState) || null;
     },
+    actions: {
+      insertMediaAsMediaSingle: (view, node, inputMethod) => {
+        var _api$analytics;
+        return insertMediaAsMediaSingle(view, node, inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
+    },
     nodes() {
       const {
         allowMediaGroup = true,
@@ -136,8 +143,8 @@ const mediaPlugin = ({
       }, {
         name: 'mediaKeymap',
         plugin: () => {
-          var _api$analytics;
-          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+          var _api$analytics2;
+          return keymapPlugin(options, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
         }
       }];
       if (options && options.allowMediaSingle) {
@@ -158,8 +165,8 @@ const mediaPlugin = ({
           plugin: ({
             schema
           }) => {
-            var _api$analytics2;
-            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+            var _api$analytics3;
+            return keymapMediaAltTextPlugin(schema, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions);
           }
         });
       }
@@ -245,11 +252,11 @@ const mediaPlugin = ({
         keywords: ['attachment', 'gif', 'media', 'picture', 'image', 'video'],
         icon: () => /*#__PURE__*/React.createElement(IconImages, null),
         action(insert, state) {
-          var _api$analytics3;
+          var _api$analytics4;
           const pluginState = pluginKey.getState(state);
           pluginState === null || pluginState === void 0 ? void 0 : pluginState.showMediaPicker();
           const tr = insert('');
-          api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.attachAnalyticsEvent({
             action: ACTION.OPENED,
             actionSubject: ACTION_SUBJECT.PICKER,
             actionSubjectId: ACTION_SUBJECT_ID.PICKER_CLOUD,

package/dist/es2019/plugins/media/utils/media-common.js

@@ -1,11 +1,8 @@
+import { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, endPositionOfParent, GapCursorSelection, startPositionOfParent } from '@atlaskit/editor-common/selection';
+import { createNewParagraphBelow, createParagraphNear } from '@atlaskit/editor-common/utils';
 import { deleteSelection, splitBlock } from '@atlaskit/editor-prosemirror/commands';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findPositionOfNodeBefore } from '@atlaskit/editor-prosemirror/utils';
-import { createParagraphNear, createNewParagraphBelow } from '@atlaskit/editor-common/utils';
-import { mapSlice } from '@atlaskit/editor-common/utils';
-import { walkUpTreeUntil, removeNestedEmptyEls, unwrap } from '@atlaskit/editor-common/utils';
-import { isImage } from './is-image';
-import { GapCursorSelection, atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';
 import { isMediaBlobUrl } from '@atlaskit/media-client';
 const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
@@ -178,108 +175,6 @@ export const copyOptionalAttrsFromMediaState = (mediaState, node) => {
     }
   });
 };
-export const transformSliceToCorrectMediaWrapper = (slice, schema) => {
-  const {
-    mediaGroup,
-    mediaSingle,
-    media
-  } = schema.nodes;
-  return mapSlice(slice, (node, parent) => {
-    if (!parent && node.type === media) {
-      if (mediaSingle && (isImage(node.attrs.__fileMimeType) || node.attrs.type === 'external')) {
-        return mediaSingle.createChecked({}, node);
-      } else {
-        return mediaGroup.createChecked({}, [node]);
-      }
-    }
-    return node;
-  });
-};
-
-/**
- * Check base styles to see if an element will be invisible when rendered in a document.
- * @param element
- */
-const isElementInvisible = element => {
-  return element.style.opacity === '0' || element.style.display === 'none' || element.style.visibility === 'hidden';
-};
-const VALID_TAGS_CONTAINER = ['DIV', 'TD'];
-function canContainImage(element) {
-  if (!element) {
-    return false;
-  }
-  return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
-}
-
-/**
- * Given a html string, we attempt to hoist any nested `<img>` tags,
- * not directly wrapped by a `<div>` as ProseMirror no-op's
- * on those scenarios.
- * @param html
- */
-export const unwrapNestedMediaElements = html => {
-  const parser = new DOMParser();
-  let doc = parser.parseFromString(html, 'text/html');
-  const wrapper = doc.body;
-
-  // Remove Google Doc's wrapper <b> el
-  const docsWrapper = wrapper.querySelector('b[id^="docs-internal-guid-"]');
-  if (docsWrapper) {
-    unwrap(wrapper, docsWrapper);
-  }
-  const imageTags = wrapper.querySelectorAll('img');
-  if (!imageTags.length) {
-    return html;
-  }
-  imageTags.forEach(imageTag => {
-    // Capture the immediate parent, we may remove the media from here later.
-    const mediaParent = imageTag.parentElement;
-    if (!mediaParent) {
-      return;
-    }
-
-    // If either the parent or the image itself contains styles that would make
-    // them invisible on copy, dont paste them.
-    if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {
-      mediaParent.removeChild(imageTag);
-      return;
-    }
-
-    // If its wrapped by a valid container we assume its safe to bypass.
-    // ProseMirror should handle these cases properly.
-    if (canContainImage(mediaParent) || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
-      return;
-    }
-
-    // Find the top most element that the parent has a valid container for the image.
-    // Stop just before found the wrapper
-    const insertBeforeElement = walkUpTreeUntil(mediaParent, element => {
-      // If is at the top just use this element as reference
-      if (element.parentElement === wrapper) {
-        return true;
-      }
-      return canContainImage(element.parentElement);
-    });
-
-    // Here we try to insert the media right after its top most valid parent element
-    // Unless its the last element in our structure then we will insert above it.
-    if (insertBeforeElement && insertBeforeElement.parentElement) {
-      // Insert as close as possible to the most closest valid element index in the tree.
-      insertBeforeElement.parentElement.insertBefore(imageTag, insertBeforeElement.nextElementSibling || insertBeforeElement);
-
-      // Attempt to clean up lines left behind by the image
-      mediaParent.innerText = mediaParent.innerText.trim();
-      // Walk up and delete empty elements left over after removing the image tag
-      removeNestedEmptyEls(mediaParent);
-    }
-  });
-
-  // If last child is a hardbreak we don't want it
-  if (wrapper.lastElementChild && wrapper.lastElementChild.tagName === 'BR') {
-    wrapper.removeChild(wrapper.lastElementChild);
-  }
-  return wrapper.innerHTML;
-};
 export const getMediaNodeFromSelection = state => {
   if (!isSelectionMediaSingleNode(state)) {
     return null;

package/dist/es2019/plugins/media/utils/media-single.js

@@ -1,14 +1,13 @@
+import { getMaxWidthForNestedNodeNext, getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
+import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { checkNodeDown, isEmptyParagraph, mapSlice } from '@atlaskit/editor-common/utils';
-import { getMediaSingleInitialWidth, MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH, MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH, getMaxWidthForNestedNodeNext } from '@atlaskit/editor-common/media-single';
-import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { safeInsert as pmSafeInsert } from '@atlaskit/editor-prosemirror/utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { safeInsert, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
-import { isImage } from './is-image';
+import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { atTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
-import { getRandomHex } from '@atlaskit/media-common';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { isImage } from './is-image';
 const getInsertMediaAnalytics = (inputMethod, fileExtension) => ({
   action: ACTION.INSERTED,
   actionSubject: ACTION_SUBJECT.DOCUMENT,
@@ -164,71 +163,6 @@ export const createMediaSingleNode = (schema, collection, maxWidth, minWidth, al
   copyOptionalAttrsFromMediaState(mediaState, mediaNode);
   return mediaSingle.createChecked(extendedMediaSingleAttrs, mediaNode);
 };
-export function transformSliceForMedia(slice, schema) {
-  const {
-    mediaSingle,
-    layoutSection,
-    table,
-    bulletList,
-    orderedList,
-    media,
-    mediaInline,
-    expand,
-    nestedExpand
-  } = schema.nodes;
-  return selection => {
-    let newSlice = slice;
-    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
-      newSlice = mapSlice(newSlice, node => {
-        const extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
-          layout: node.attrs.layout,
-          widthType: node.attrs.widthType,
-          width: node.attrs.width
-        } : {
-          layout: node.attrs.layout
-        };
-        let attrs = {};
-        if (hasParentNodeOfType([layoutSection, table])(selection)) {
-          // Supports layouts
-          attrs = {
-            ...extendedOrLegacyAttrs
-          };
-        } else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
-          // does not support other layouts
-          attrs = {
-            ...extendedOrLegacyAttrs,
-            layout: 'center'
-          };
-        }
-        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;
-  };
-}
 export function isCaptionNode(editorView) {
   const {
     $from

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

@@ -6,7 +6,7 @@ import keymap from './pm-plugins/keymaps';
 import { addAnalytics, ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, INPUT_METHOD, EVENT_TYPE } from '../analytics';
 import { IconPanel, IconPanelNote, IconPanelSuccess, IconPanelWarning, IconPanelError } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
-import { messages } from '@atlaskit/editor-plugin-block-type/messages';
+import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCustomPanel } from '@atlaskit/editor-common/quick-insert';
 import { T50 } from '@atlaskit/theme/colors';
 import { insertPanelWithAnalytics } from './actions';
@@ -46,9 +46,9 @@ const panelPlugin = ({
     }) => {
       let quickInsertOptions = [{
         id: 'infopanel',
-        title: formatMessage(messages.infoPanel),
+        title: formatMessage(blockTypeMessages.infoPanel),
         keywords: ['panel'],
-        description: formatMessage(messages.infoPanelDescription),
+        description: formatMessage(blockTypeMessages.infoPanelDescription),
         priority: 800,
         icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
         action(insert, state) {
@@ -61,8 +61,8 @@ const panelPlugin = ({
         }
       }, {
         id: 'notepanel',
-        title: formatMessage(messages.notePanel),
-        description: formatMessage(messages.notePanelDescription),
+        title: formatMessage(blockTypeMessages.notePanel),
+        description: formatMessage(blockTypeMessages.notePanelDescription),
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
         action(insert, state) {
@@ -75,8 +75,8 @@ const panelPlugin = ({
         }
       }, {
         id: 'successpanel',
-        title: formatMessage(messages.successPanel),
-        description: formatMessage(messages.successPanelDescription),
+        title: formatMessage(blockTypeMessages.successPanel),
+        description: formatMessage(blockTypeMessages.successPanelDescription),
         keywords: ['tip'],
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
@@ -90,8 +90,8 @@ const panelPlugin = ({
         }
       }, {
         id: 'warningpanel',
-        title: formatMessage(messages.warningPanel),
-        description: formatMessage(messages.warningPanelDescription),
+        title: formatMessage(blockTypeMessages.warningPanel),
+        description: formatMessage(blockTypeMessages.warningPanelDescription),
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
         action(insert, state) {
@@ -104,8 +104,8 @@ const panelPlugin = ({
         }
       }, {
         id: 'errorpanel',
-        title: formatMessage(messages.errorPanel),
-        description: formatMessage(messages.errorPanelDescription),
+        title: formatMessage(blockTypeMessages.errorPanel),
+        description: formatMessage(blockTypeMessages.errorPanelDescription),
         priority: 1000,
         icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
         action(insert, state) {
@@ -120,8 +120,8 @@ const panelPlugin = ({
       if (options.allowCustomPanel && options.allowCustomPanelEdit) {
         quickInsertOptions.push({
           id: 'custompanel',
-          title: formatMessage(messages.customPanel),
-          description: formatMessage(messages.customPanelDescription),
+          title: formatMessage(blockTypeMessages.customPanel),
+          description: formatMessage(blockTypeMessages.customPanelDescription),
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
           action(insert, state) {

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

@@ -6,10 +6,9 @@ import uuid from 'uuid/v4';
 import { replaceSelectedTable } from '@atlaskit/editor-tables/utils';
 import { compose, insideTable, isParagraph, isText, isLinkMark, insideTableCell, isInListItem } from '../../utils';
 import { mapSlice } from '../../utils/slice';
-import { INPUT_METHOD } from '../analytics';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { GapCursorSelection, Side } from '@atlaskit/editor-common/selection';
 import { runMacroAutoConvert } from '../macro';
-import { insertMediaAsMediaSingle } from '../media/utils/media-single';
 import { addReplaceSelectedTableAnalytics, applyTextMarksToSlice, hasOnlyNodesOfType } from './util';
 import { linkifyContent, isListItemNode, isListNode, canLinkBeCreatedInRange } from '@atlaskit/editor-common/utils';
 import { insertSliceForLists } from './edge-cases';
@@ -555,12 +554,13 @@ function isOnlyMediaSingle(state, slice) {
   } = state.schema.nodes;
   return mediaSingle && slice.content.childCount === 1 && slice.content.firstChild.type === mediaSingle;
 }
-export function handleMediaSingle(inputMethod, editorAnalyticsAPI) {
+export function handleMediaSingle(inputMethod, insertMediaAsMediaSingle) {
   return function (slice) {
     return (state, dispatch, view) => {
       if (view) {
         if (isOnlyMedia(state, slice)) {
-          return insertMediaAsMediaSingle(view, slice.content.firstChild, inputMethod, editorAnalyticsAPI);
+          var _insertMediaAsMediaSi;
+          return (_insertMediaAsMediaSi = insertMediaAsMediaSingle === null || insertMediaAsMediaSingle === void 0 ? void 0 : insertMediaAsMediaSingle(view, slice.content.firstChild, inputMethod)) !== null && _insertMediaAsMediaSi !== void 0 ? _insertMediaAsMediaSi : false;
         }
         if (insideTable(state) && isOnlyMediaSingle(state, slice)) {
           const tr = state.tr.replaceSelection(slice);

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

@@ -0,0 +1,176 @@
+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';
+export function transformSliceForMedia(slice, schema) {
+  const {
+    mediaSingle,
+    layoutSection,
+    table,
+    bulletList,
+    orderedList,
+    media,
+    mediaInline,
+    expand,
+    nestedExpand
+  } = schema.nodes;
+  return selection => {
+    let newSlice = slice;
+    if (hasParentNodeOfType([layoutSection, table, bulletList, orderedList, expand, nestedExpand])(selection)) {
+      newSlice = mapSlice(newSlice, node => {
+        const extendedOrLegacyAttrs = getBooleanFF('platform.editor.media.extended-resize-experience') ? {
+          layout: node.attrs.layout,
+          widthType: node.attrs.widthType,
+          width: node.attrs.width
+        } : {
+          layout: node.attrs.layout
+        };
+        let attrs = {};
+        if (hasParentNodeOfType([layoutSection, table])(selection)) {
+          // Supports layouts
+          attrs = {
+            ...extendedOrLegacyAttrs
+          };
+        } else if (hasParentNodeOfType([bulletList, orderedList, expand, nestedExpand])(selection)) {
+          // does not support other layouts
+          attrs = {
+            ...extendedOrLegacyAttrs,
+            layout: 'center'
+          };
+        }
+        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;
+  };
+}
+
+// TODO move this to editor-common
+export const isImage = fileType => {
+  return !!fileType && (fileType.indexOf('image/') > -1 || fileType.indexOf('video/') > -1);
+};
+export const transformSliceToCorrectMediaWrapper = (slice, schema) => {
+  const {
+    mediaGroup,
+    mediaSingle,
+    media
+  } = schema.nodes;
+  return mapSlice(slice, (node, parent) => {
+    if (!parent && node.type === media) {
+      if (mediaSingle && (isImage(node.attrs.__fileMimeType) || node.attrs.type === 'external')) {
+        return mediaSingle.createChecked({}, node);
+      } else {
+        return mediaGroup.createChecked({}, [node]);
+      }
+    }
+    return node;
+  });
+};
+
+/**
+ * Check base styles to see if an element will be invisible when rendered in a document.
+ * @param element
+ */
+const isElementInvisible = element => {
+  return element.style.opacity === '0' || element.style.display === 'none' || element.style.visibility === 'hidden';
+};
+const VALID_TAGS_CONTAINER = ['DIV', 'TD'];
+function canContainImage(element) {
+  if (!element) {
+    return false;
+  }
+  return VALID_TAGS_CONTAINER.indexOf(element.tagName) !== -1;
+}
+
+/**
+ * Given a html string, we attempt to hoist any nested `<img>` tags,
+ * not directly wrapped by a `<div>` as ProseMirror no-op's
+ * on those scenarios.
+ * @param html
+ */
+export const unwrapNestedMediaElements = html => {
+  const parser = new DOMParser();
+  let doc = parser.parseFromString(html, 'text/html');
+  const wrapper = doc.body;
+
+  // Remove Google Doc's wrapper <b> el
+  const docsWrapper = wrapper.querySelector('b[id^="docs-internal-guid-"]');
+  if (docsWrapper) {
+    unwrap(wrapper, docsWrapper);
+  }
+  const imageTags = wrapper.querySelectorAll('img');
+  if (!imageTags.length) {
+    return html;
+  }
+  imageTags.forEach(imageTag => {
+    // Capture the immediate parent, we may remove the media from here later.
+    const mediaParent = imageTag.parentElement;
+    if (!mediaParent) {
+      return;
+    }
+
+    // If either the parent or the image itself contains styles that would make
+    // them invisible on copy, dont paste them.
+    if (isElementInvisible(mediaParent) || isElementInvisible(imageTag)) {
+      mediaParent.removeChild(imageTag);
+      return;
+    }
+
+    // If its wrapped by a valid container we assume its safe to bypass.
+    // ProseMirror should handle these cases properly.
+    if (canContainImage(mediaParent) || mediaParent instanceof HTMLSpanElement && mediaParent.closest('[class*="emoji-common"]')) {
+      return;
+    }
+
+    // Find the top most element that the parent has a valid container for the image.
+    // Stop just before found the wrapper
+    const insertBeforeElement = walkUpTreeUntil(mediaParent, element => {
+      // If is at the top just use this element as reference
+      if (element.parentElement === wrapper) {
+        return true;
+      }
+      return canContainImage(element.parentElement);
+    });
+
+    // Here we try to insert the media right after its top most valid parent element
+    // Unless its the last element in our structure then we will insert above it.
+    if (insertBeforeElement && insertBeforeElement.parentElement) {
+      // Insert as close as possible to the most closest valid element index in the tree.
+      insertBeforeElement.parentElement.insertBefore(imageTag, insertBeforeElement.nextElementSibling || insertBeforeElement);
+
+      // Attempt to clean up lines left behind by the image
+      mediaParent.innerText = mediaParent.innerText.trim();
+      // Walk up and delete empty elements left over after removing the image tag
+      removeNestedEmptyEls(mediaParent);
+    }
+  });
+
+  // If last child is a hardbreak we don't want it
+  if (wrapper.lastElementChild && wrapper.lastElementChild.tagName === 'BR') {
+    wrapper.removeChild(wrapper.lastElementChild);
+  }
+  return wrapper.innerHTML;
+};

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

@@ -238,9 +238,9 @@ export const handlePasteIntoCaptionWithAnalytics = (view, event, slice, type) =>
 export const handleCodeBlockWithAnalytics = (view, event, slice, text) => injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {
   type: PasteTypes.plain
 }))(handleCodeBlock(text));
-export const handleMediaSingleWithAnalytics = (view, event, slice, type, editorAnalyticsAPI) => injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {
+export const handleMediaSingleWithAnalytics = (view, event, slice, type, insertMediaAsMediaSingle) => injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {
   type
-}))(handleMediaSingle(INPUT_METHOD.CLIPBOARD, editorAnalyticsAPI)(slice));
+}))(handleMediaSingle(INPUT_METHOD.CLIPBOARD, insertMediaAsMediaSingle)(slice));
 export const handlePastePreservingMarksWithAnalytics = (view, event, slice, type, pluginInjectionApi) => {
   var _pluginInjectionApi$c3, _pluginInjectionApi$c4;
   return injectAnalyticsPayloadBeforeCommand(createPasteAnalyticsPayloadBySelection(event, slice, {