@atlaskit/editor-core 187.19.1 → 187.20.1

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.createMediaSingleNode = void 0;
+exports.insertMediaSingleNode = exports.insertMediaAsMediaSingle = exports.getParentWidthForNestedMediaSingleNode = exports.createMediaSingleNode = void 0;
 exports.isCaptionNode = isCaptionNode;
 exports.isMediaSingle = void 0;
 exports.transformSliceForMedia = transformSliceForMedia;
@@ -223,4 +223,23 @@ function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+var getParentWidthForNestedMediaSingleNode = function getParentWidthForNestedMediaSingleNode(resolvedPos, view) {
+  var domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && _utils3.floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
+    var _view$state$schema$no = view.state.schema.nodes,
+      tableCell = _view$state$schema$no.tableCell,
+      tableHeader = _view$state$schema$no.tableHeader;
+    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
+      // since table has constant padding, use hardcoded constant instead of query the dom
+      var tablePadding = 8;
+      return domNode.parentElement.offsetWidth - tablePadding * 2;
+    }
+    return domNode.parentElement.offsetWidth;
+  }
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return null;
+};
+exports.getParentWidthForNestedMediaSingleNode = getParentWidthForNestedMediaSingleNode;

package/dist/cjs/plugins/text-color/commands/toggle-color.js

@@ -7,6 +7,7 @@ exports.toggleColor = void 0;
 var _mark = require("@atlaskit/editor-common/mark");
 var _main = require("../pm-plugins/main");
 var _disabled = require("../utils/disabled");
+var _preset = require("@atlaskit/editor-common/preset");
 var toggleColor = function toggleColor(color) {
   return function (state, dispatch) {
     var textColor = state.schema.marks.textColor;
@@ -26,9 +27,9 @@ var toggleColor = function toggleColor(color) {
         color: color
       });
       state.tr.scrollIntoView();
-      (0, _mark.toggleMark)(textColor, {
+      (0, _preset.pluginCommandToPMCommand)((0, _mark.toggleMark)(textColor, {
         color: color
-      })(state, dispatch);
+      }))(state, dispatch);
     }
     return true;
   };

package/dist/cjs/utils/document.js

@@ -4,7 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findFarthestParentNode = void 0;
+Object.defineProperty(exports, "findFarthestParentNode", {
+  enumerable: true,
+  get: function get() {
+    return _utils.findFarthestParentNode;
+  }
+});
 exports.getChangedNodes = getChangedNodes;
 exports.getChangedNodesIn = getChangedNodesIn;
 exports.getChildBreakoutModes = getChildBreakoutModes;
@@ -65,29 +70,6 @@ function processRawFragmentValue(schema, value, providerFactory, sanitizePrivate
   }
   return _model.Fragment.from(adfEntities);
 }
-
-/**
- * Find the farthest node given a condition
- * @param predicate Function to check the node
- */
-var findFarthestParentNode = function findFarthestParentNode(predicate) {
-  return function ($pos) {
-    var candidate = null;
-    for (var i = $pos.depth; i > 0; i--) {
-      var _node = $pos.node(i);
-      if (predicate(_node)) {
-        candidate = {
-          pos: i > 0 ? $pos.before(i) : 0,
-          start: $pos.start(i),
-          depth: i,
-          node: _node
-        };
-      }
-    }
-    return candidate;
-  };
-};
-exports.findFarthestParentNode = findFarthestParentNode;
 var isSelectionEndOfParagraph = function isSelectionEndOfParagraph(state) {
   return state.selection.$to.parent.type === state.schema.nodes.paragraph && state.selection.$to.pos === state.doc.resolve(state.selection.$to.pos).end();
 };

package/dist/cjs/utils/index.js

@@ -10,7 +10,12 @@ Object.defineProperty(exports, "SetAttrsStep", {
     return _steps.SetAttrsStep;
   }
 });
-exports.checkNodeDown = checkNodeDown;
+Object.defineProperty(exports, "checkNodeDown", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.checkNodeDown;
+  }
+});
 exports.compose = compose;
 exports.dedupe = dedupe;
 Object.defineProperty(exports, "findFarthestParentNode", {
@@ -33,14 +38,31 @@ Object.defineProperty(exports, "insideTable", {
     return _coreUtils.insideTable;
   }
 });
-exports.insideTableCell = void 0;
+Object.defineProperty(exports, "insideTableCell", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.insideTableCell;
+  }
+});
 Object.defineProperty(exports, "isElementInTableCell", {
   enumerable: true,
   get: function get() {
     return _utils2.isElementInTableCell;
   }
 });
-exports.isInsideBlockQuote = exports.isInListItem = exports.isEmptyNode = void 0;
+Object.defineProperty(exports, "isEmptyNode", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isEmptyNode;
+  }
+});
+Object.defineProperty(exports, "isInListItem", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isInListItem;
+  }
+});
+exports.isInsideBlockQuote = void 0;
 Object.defineProperty(exports, "isLastItemMediaGroup", {
   enumerable: true,
   get: function get() {
@@ -72,7 +94,12 @@ Object.defineProperty(exports, "isSelectionEndOfParagraph", {
     return _document.isSelectionEndOfParagraph;
   }
 });
-exports.isSelectionInsideLastNodeInDocument = isSelectionInsideLastNodeInDocument;
+Object.defineProperty(exports, "isSelectionInsideLastNodeInDocument", {
+  enumerable: true,
+  get: function get() {
+    return _utils2.isSelectionInsideLastNodeInDocument;
+  }
+});
 exports.isTemporary = void 0;
 Object.defineProperty(exports, "isText", {
   enumerable: true,
@@ -138,13 +165,13 @@ var _commands = require("@atlaskit/editor-prosemirror/commands");
 var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
 var _cursor = require("../plugins/fake-text-cursor/cursor");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _document = require("./document");
+var _utils2 = require("@atlaskit/editor-common/utils");
 var _coreUtils = require("@atlaskit/editor-common/core-utils");
+var _document = require("./document");
 var _mark = require("./mark");
 var _nodes = require("./nodes");
 var _selection = require("./selection");
 var _measureEnum = _interopRequireDefault(require("./performance/measure-enum"));
-var _utils2 = require("@atlaskit/editor-common/utils");
 var _steps = require("@atlaskit/adf-schema/steps");
 function isMarkTypeCompatibleWithMark(markType, mark) {
   return !mark.type.excludes(markType) && !markType.excludes(mark.type);
@@ -152,11 +179,6 @@ function isMarkTypeCompatibleWithMark(markType, mark) {
 function isMarkTypeAllowedInNode(markType, state) {
   return (0, _commands.toggleMark)(markType)(state);
 }
-function isSelectionInsideLastNodeInDocument(selection) {
-  var docNode = selection.$anchor.node(0);
-  var rootNode = selection.$anchor.node(1);
-  return docNode.lastChild === rootNode;
-}
 function getCursor(selection) {
   return selection.$cursor || undefined;
 }
@@ -204,36 +226,6 @@ function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-function checkNodeDown(selection, doc, filter) {
-  var ancestorDepth = findAncestorPosition(doc, selection.$to).depth;
-
-  // Top level node
-  if (ancestorDepth === 0) {
-    return false;
-  }
-  var res = doc.resolve(selection.$to.after(ancestorDepth));
-  return res.nodeAfter ? filter(res.nodeAfter) : false;
-}
-
-/**
- * Traverse the document until an "ancestor" is found. Any nestable block can be an ancestor.
- */
-function findAncestorPosition(doc, pos) {
-  var nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
-  if (pos.depth === 1) {
-    return pos;
-  }
-  var node = pos.node(pos.depth);
-  var newPos = pos;
-  while (pos.depth >= 1) {
-    pos = doc.resolve(pos.before(pos.depth));
-    node = pos.node(pos.depth);
-    if (node && nestableBlocks.indexOf(node.type.name) !== -1) {
-      newPos = pos;
-    }
-  }
-  return newPos;
-}
 var transformer = new _editorJsonTransformer.JSONTransformer();
 function toJSON(node) {
   return transformer.encode(node);
@@ -280,70 +272,6 @@ var isTemporary = function isTemporary(id) {
   return id.indexOf('temporary:') === 0;
 };
 exports.isTemporary = isTemporary;
-var isEmptyNode = function isEmptyNode(schema) {
-  var _schema$nodes = schema.nodes,
-    doc = _schema$nodes.doc,
-    paragraph = _schema$nodes.paragraph,
-    codeBlock = _schema$nodes.codeBlock,
-    blockquote = _schema$nodes.blockquote,
-    panel = _schema$nodes.panel,
-    heading = _schema$nodes.heading,
-    listItem = _schema$nodes.listItem,
-    bulletList = _schema$nodes.bulletList,
-    orderedList = _schema$nodes.orderedList,
-    taskList = _schema$nodes.taskList,
-    taskItem = _schema$nodes.taskItem,
-    decisionList = _schema$nodes.decisionList,
-    decisionItem = _schema$nodes.decisionItem,
-    media = _schema$nodes.media,
-    mediaGroup = _schema$nodes.mediaGroup,
-    mediaSingle = _schema$nodes.mediaSingle;
-  var innerIsEmptyNode = function innerIsEmptyNode(node) {
-    switch (node.type) {
-      case media:
-      case mediaGroup:
-      case mediaSingle:
-        return false;
-      case paragraph:
-      case codeBlock:
-      case heading:
-      case taskItem:
-      case decisionItem:
-        return node.content.size === 0;
-      case blockquote:
-      case panel:
-      case listItem:
-        return node.content.size === 2 && innerIsEmptyNode(node.content.firstChild);
-      case bulletList:
-      case orderedList:
-        return node.content.size === 4 && innerIsEmptyNode(node.content.firstChild);
-      case taskList:
-      case decisionList:
-        return node.content.size === 2 && innerIsEmptyNode(node.content.firstChild);
-      case doc:
-        var isEmpty = true;
-        node.content.forEach(function (child) {
-          isEmpty = isEmpty && innerIsEmptyNode(child);
-        });
-        return isEmpty;
-      default:
-        return (0, _document.isNodeEmpty)(node);
-    }
-  };
-  return innerIsEmptyNode;
-};
-exports.isEmptyNode = isEmptyNode;
-var insideTableCell = function insideTableCell(state) {
-  var _state$schema$nodes = state.schema.nodes,
-    tableCell = _state$schema$nodes.tableCell,
-    tableHeader = _state$schema$nodes.tableHeader;
-  return (0, _utils.hasParentNodeOfType)([tableCell, tableHeader])(state.selection);
-};
-exports.insideTableCell = insideTableCell;
-var isInListItem = function isInListItem(state) {
-  return (0, _utils.hasParentNodeOfType)(state.schema.nodes.listItem)(state.selection);
-};
-exports.isInListItem = isInListItem;
 var hasOpenEnd = function hasOpenEnd(slice) {
   return slice.openStart > 0 || slice.openEnd > 0;
 };

package/dist/cjs/utils/prosemirror/position.js

@@ -3,48 +3,40 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.atTheBeginningOfBlock = atTheBeginningOfBlock;
-exports.atTheBeginningOfDoc = atTheBeginningOfDoc;
-exports.atTheEndOfBlock = atTheEndOfBlock;
-exports.atTheEndOfDoc = atTheEndOfDoc;
-exports.endPositionOfParent = endPositionOfParent;
-exports.startPositionOfParent = startPositionOfParent;
-var _state = require("@atlaskit/editor-prosemirror/state");
-var _selection = require("../../plugins/selection/gap-cursor/selection");
-function atTheEndOfDoc(state) {
-  var selection = state.selection,
-    doc = state.doc;
-  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
-}
-function atTheBeginningOfDoc(state) {
-  var selection = state.selection;
-  return selection.$from.pos === selection.$from.depth;
-}
-function atTheEndOfBlock(state) {
-  var selection = state.selection;
-  var $to = selection.$to;
-  if (selection instanceof _selection.GapCursorSelection) {
-    return false;
+Object.defineProperty(exports, "atTheBeginningOfBlock", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheBeginningOfBlock;
   }
-  if (selection instanceof _state.NodeSelection && selection.node.isBlock) {
-    return true;
+});
+Object.defineProperty(exports, "atTheBeginningOfDoc", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheBeginningOfDoc;
+  }
+});
+Object.defineProperty(exports, "atTheEndOfBlock", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheEndOfBlock;
+  }
+});
+Object.defineProperty(exports, "atTheEndOfDoc", {
+  enumerable: true,
+  get: function get() {
+    return _selection.atTheEndOfDoc;
   }
-  return endPositionOfParent($to) === $to.pos + 1;
-}
-function atTheBeginningOfBlock(state) {
-  var selection = state.selection;
-  var $from = selection.$from;
-  if (selection instanceof _selection.GapCursorSelection) {
-    return false;
+});
+Object.defineProperty(exports, "endPositionOfParent", {
+  enumerable: true,
+  get: function get() {
+    return _selection.endPositionOfParent;
   }
-  if (selection instanceof _state.NodeSelection && selection.node.isBlock) {
-    return true;
+});
+Object.defineProperty(exports, "startPositionOfParent", {
+  enumerable: true,
+  get: function get() {
+    return _selection.startPositionOfParent;
   }
-  return startPositionOfParent($from) === $from.pos;
-}
-function startPositionOfParent(resolvedPos) {
-  return resolvedPos.start(resolvedPos.depth);
-}
-function endPositionOfParent(resolvedPos) {
-  return resolvedPos.end(resolvedPos.depth) + 1;
-}
+});
+var _selection = require("@atlaskit/editor-common/selection");

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.19.1";
+var version = "187.20.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.19.1",
+	"version": "187.20.1",
 	"sideEffects": false
 }

package/dist/es2019/plugins/emoji/commands/insert-emoji.js

@@ -3,34 +3,38 @@ import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 export const insertEmoji = editorAnalyticsAPI => (emojiId, inputMethod) => {
-  return (state, dispatch) => {
+  return ({
+    tr
+  }) => {
+    const {
+      doc,
+      selection
+    } = tr;
     const {
       emoji
-    } = state.schema.nodes;
+    } = tr.doc.type.schema.nodes;
     if (emoji && emojiId) {
       const node = emoji.createChecked({
         ...emojiId,
         text: emojiId.fallback || emojiId.shortName
       });
-      const textNode = state.schema.text(' ');
-      if (dispatch) {
-        const fragment = Fragment.fromArray([node, textNode]);
-        const tr = safeInsert(fragment)(state.tr);
-        if (inputMethod) {
-          editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
-            action: ACTION.INSERTED,
-            actionSubject: ACTION_SUBJECT.DOCUMENT,
-            actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
-            attributes: {
-              inputMethod
-            },
-            eventType: EVENT_TYPE.TRACK
-          })(tr);
-        }
-        dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+      const textNode = doc.type.schema.text(' ');
+      const fragment = Fragment.fromArray([node, textNode]);
+      const newTr = safeInsert(fragment)(tr);
+      if (inputMethod) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+          action: ACTION.INSERTED,
+          actionSubject: ACTION_SUBJECT.DOCUMENT,
+          actionSubjectId: ACTION_SUBJECT_ID.EMOJI,
+          attributes: {
+            inputMethod
+          },
+          eventType: EVENT_TYPE.TRACK
+        })(newTr);
       }
-      return true;
+      newTr.setSelection(Selection.near(newTr.doc.resolve(selection.$from.pos + fragment.size)));
+      return newTr;
     }
-    return false;
+    return null;
   };
 };

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

@@ -12,6 +12,7 @@ import { IconEmoji } from '@atlaskit/editor-common/quick-insert';
 import { EmojiNodeView } from './nodeviews/emoji';
 import { messages } from '../insert-block/ui/ToolbarInsertBlock/messages';
 import { openTypeAheadAtCursor } from '../type-ahead/transforms/open-typeahead-at-cursor';
+import { insertEmoji } from './commands/insert-emoji';
 export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
   title: emoji.shortName || '',
   key: emoji.id || emoji.shortName,
@@ -54,7 +55,8 @@ const memoizedToItem = memoize(emojiToTypeaheadItem);
 export const defaultListLimit = 50;
 const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 const TRIGGER = ':';
-const emojiPlugin = (options, api) => {
+export const emojiPlugin = (options, api) => {
+  var _api$dependencies$ana9;
   const typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -175,6 +177,15 @@ const emojiPlugin = (options, api) => {
         }
       }];
     },
+    getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return emojiPluginKey.getState(editorState);
+    },
+    commands: {
+      insertEmoji: insertEmoji(api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions)
+    },
     pluginsOptions: {
       quickInsert: ({
         formatMessage
@@ -186,13 +197,13 @@ const emojiPlugin = (options, api) => {
         keyshortcut: ':',
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert, state) {
-          var _api$dependencies$ana9;
+          var _api$dependencies$ana10;
           const tr = insert(undefined);
           openTypeAheadAtCursor({
             triggerHandler: typeAhead,
             inputMethod: INPUT_METHOD.QUICK_INSERT
           })(tr);
-          api === null || api === void 0 ? void 0 : (_api$dependencies$ana9 = api.dependencies.analytics) === null || _api$dependencies$ana9 === void 0 ? void 0 : _api$dependencies$ana9.actions.attachAnalyticsEvent({
+          api === null || api === void 0 ? void 0 : (_api$dependencies$ana10 = api.dependencies.analytics) === null || _api$dependencies$ana10 === void 0 ? void 0 : _api$dependencies$ana10.actions.attachAnalyticsEvent({
             action: ACTION.INVOKED,
             actionSubject: ACTION_SUBJECT.TYPEAHEAD,
             actionSubjectId: ACTION_SUBJECT_ID.TYPEAHEAD_EMOJI,
@@ -208,7 +219,6 @@ const emojiPlugin = (options, api) => {
     }
   };
 };
-export default emojiPlugin;
 
 /**
  * Actions

package/dist/es2019/plugins/index.js

@@ -6,7 +6,7 @@ export { default as clearMarksOnChangeToEmptyDocumentPlugin } from './clear-mark
 export { default as codeBlockPlugin } from './code-block';
 export { default as collabEditPlugin } from './collab-edit';
 export { default as datePlugin } from './date';
-export { default as emojiPlugin } from './emoji';
+export { emojiPlugin } from './emoji';
 export { default as extensionPlugin } from './extension';
 export { default as fakeTextCursorPlugin } from './fake-text-cursor';
 export { default as helpDialogPlugin } from './help-dialog';

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

@@ -5,7 +5,6 @@ import { stateKey as mediaStateKey } from '../media/pm-plugins/plugin-key';
 import { isTypeAheadAllowed } from '../type-ahead/utils';
 import { pluginKey as layoutStateKey } from '../layout';
 import { insertMacroFromMacroBrowser } from '../macro';
-import { emojiPluginKey } from '../emoji';
 import WithPluginState from '../../ui/WithPluginState';
 import ToolbarInsertBlock from './ui/ToolbarInsertBlock';
 import { pluginKey as typeAheadPluginKey } from '../type-ahead/pm-plugins/key';
@@ -62,7 +61,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeStateKey,
             mediaState: mediaStateKey,
             macroState: macroStateKey,
-            emojiState: emojiPluginKey,
             placeholderTextState: placeholderTextStateKey,
             layoutState: layoutStateKey
           },
@@ -70,7 +68,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState,
             mediaState,
             macroState = {},
-            emojiState,
             placeholderTextState,
             layoutState
           }) => /*#__PURE__*/React.createElement(ToolbarInsertBlockWithInjectionApi, {
@@ -90,7 +87,6 @@ const insertBlockPlugin = (options = {}, api) => {
             blockTypeState: blockTypeState,
             mediaState: mediaState,
             macroState: macroState,
-            emojiState: emojiState,
             placeholderTextState: placeholderTextState,
             layoutState: layoutState,
             providers: providers,
@@ -124,7 +120,6 @@ function ToolbarInsertBlockWithInjectionApi({
   blockTypeState,
   mediaState,
   macroState,
-  emojiState,
   placeholderTextState,
   layoutState,
   featureFlags
@@ -135,8 +130,9 @@ function ToolbarInsertBlockWithInjectionApi({
     dateState,
     hyperlinkState,
     imageUploadState,
-    mentionState
-  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention']);
+    mentionState,
+    emojiState
+  } = useSharedPluginState(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji']);
   return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
     pluginInjectionApi: pluginInjectionApi,
     buttons: buttons,

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

@@ -16,8 +16,7 @@ import { insertTaskDecisionCommand } from '../../../tasks-and-decisions/commands
 import { insertExpand } from '../../../expand/commands';
 import { createTypeAheadTools } from '../../../type-ahead/api';
 import { updateStatusWithAnalytics } from '../../../status/actions';
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '../../../analytics';
-import { insertEmoji } from '../../../emoji/commands/insert-emoji';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { messages } from './messages';
 import { createItems } from './create-items';
 import { BlockInsertMenu } from './block-insert-menu';
@@ -283,8 +282,12 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
+      var _pluginInjectionApi$d8;
+      const {
+        pluginInjectionApi
+      } = this.props;
       this.props.editorView.focus();
-      insertEmoji(this.editorAnalyticsAPI)(emojiId, INPUT_METHOD.PICKER)(this.props.editorView.state, this.props.editorView.dispatch);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.executeCommand((_pluginInjectionApi$d8 = pluginInjectionApi.dependencies.emoji) === null || _pluginInjectionApi$d8 === void 0 ? void 0 : _pluginInjectionApi$d8.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       this.toggleEmojiPicker();
       return true;
     });

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

@@ -8,6 +8,7 @@ import { MediaSingle } from '@atlaskit/editor-common/ui';
 import { browser, floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { isNodeSelectedOrInRange } from '../../../utils/nodes';
 import { setNodeSelection, setTextSelection } from '../../../utils';
+import { getParentWidthForNestedMediaSingleNode } from '../utils/media-single';
 import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
 import ResizableMediaSingle from '../ui/ResizableMediaSingle';
 import { MEDIA_CONTENT_WRAP_CLASS_NAME } from '../pm-plugins/main';
@@ -180,13 +181,12 @@ export default class MediaSingleNode extends Component {
      * Get parent width for a nested media single node
      * @param view Editor view
      * @param pos node position
-     * @param includeMoreParentNodeTypes should consider table and list as parent nodes(only true for new experience)
      */
     _defineProperty(this, "getLineLength", (view, pos, includeMoreParentNodeTypes) => {
       if (typeof pos !== 'number') {
         return null;
       }
-      if (isRichMediaInsideOfBlockNode(view, pos, includeMoreParentNodeTypes)) {
+      if (isRichMediaInsideOfBlockNode(view, pos)) {
         const $pos = view.state.doc.resolve(pos);
         const domNode = view.nodeDOM($pos.pos);
         if ($pos.nodeAfter && floatingLayouts.indexOf($pos.nodeAfter.attrs.layout) > -1 && domNode && domNode.parentElement) {
@@ -198,6 +198,21 @@ export default class MediaSingleNode extends Component {
       }
       return null;
     });
+    /**
+     * Get parent width for a nested media single node for new experience
+     * @param view Editor view
+     * @param pos node position
+     */
+    _defineProperty(this, "getLineLengthNext", (view, pos) => {
+      if (typeof pos !== 'number') {
+        return null;
+      }
+      const $pos = view.state.doc.resolve(pos);
+      if ($pos && $pos.parent.type.name !== 'doc') {
+        return getParentWidthForNestedMediaSingleNode($pos, view);
+      }
+      return null;
+    });
   }
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.mediaProvider !== this.props.mediaProvider) {
@@ -280,7 +295,7 @@ export default class MediaSingleNode extends Component {
     }
     const isSelected = selected();
     const contentWidthForLegacyExperience = this.getLineLength(view, getPos()) || lineLength;
-    const contentWidth = this.getLineLength(view, getPos(), true) || lineLength;
+    const contentWidth = this.getLineLengthNext(view, getPos()) || lineLength;
     const mediaSingleProps = {
       layout,
       width,
@@ -411,6 +426,9 @@ class MediaSingleNodeView extends ReactNodeView {
       // see also: https://github.com/ProseMirror/prosemirror/issues/884
       domRef.contentEditable = 'true';
     }
+    if (getBooleanFF('platform.editor.media.extended-resize-experience')) {
+      domRef.classList.add('media-extended-resize-experience');
+    }
     return domRef;
   }
   getContentDOM() {