@atlaskit/editor-core 187.19.1 → 187.20.1

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

@@ -27,6 +27,7 @@ import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 export { stateKey } from './plugin-key';
 export const MEDIA_CONTENT_WRAP_CLASS_NAME = 'media-content-wrap';
 export const MEDIA_PLUGIN_IS_RESIZING_KEY = 'mediaSinglePlugin.isResizing';
+export const MEDIA_PLUGIN_RESIZING_WIDTH_KEY = 'mediaSinglePlugin.resizing-width';
 const createDropPlaceholder = (intl, allowDropLine) => {
   const dropPlaceholder = document.createElement('div');
   const createElement = React.createElement;
@@ -55,6 +56,7 @@ export class MediaPluginStateImplementation {
     _defineProperty(this, "layout", 'center');
     _defineProperty(this, "mediaNodes", []);
     _defineProperty(this, "isResizing", false);
+    _defineProperty(this, "resizingWidth", 0);
     _defineProperty(this, "destroyed", false);
     _defineProperty(this, "removeOnCloseListener", () => {});
     _defineProperty(this, "onPopupToggleCallback", () => {});
@@ -428,6 +430,9 @@ export class MediaPluginStateImplementation {
   setIsResizing(isResizing) {
     this.isResizing = isResizing;
   }
+  setResizingWidth(width) {
+    this.resizingWidth = width;
+  }
   updateElement() {
     let newElement;
     const selectedContainer = this.selectedMediaContainerNode();
@@ -530,9 +535,13 @@ export const createPlugin = (_schema, options, reactContext, getIntl, dispatch,
       },
       apply(tr, pluginState) {
         const isResizing = tr.getMeta(MEDIA_PLUGIN_IS_RESIZING_KEY);
+        const resizingWidth = tr.getMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY);
         if (isResizing !== undefined) {
           pluginState.setIsResizing(isResizing);
         }
+        if (resizingWidth) {
+          pluginState.setResizingWidth(resizingWidth);
+        }
 
         // remap editing media single position if we're in collab
         if (typeof pluginState.editingMediaSinglePos === 'number') {

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

@@ -11,6 +11,12 @@ export const mediaStyles = css`
       transform: translateX(-50%);
     }
 
+    .media-extended-resize-experience[layout^='wrap-'] {
+      // override 'overflow: auto' when viewport <= 410 set by mediaSingleSharedStyle
+      // to prevent scroll bar
+      overflow: visible !important;
+    }
+
     & [layout^='wrap-'] + [layout^='wrap-'] {
       clear: none;
       & + p,
@@ -72,13 +78,13 @@ export const mediaStyles = css`
 
   .richMedia-resize-handle-right {
     align-items: flex-end;
-    padding-right: 12px;
+    padding-right: ${"var(--ds-space-150, 12px)"};
     margin-right: -${akEditorMediaResizeHandlerPadding}px;
   }
 
   .richMedia-resize-handle-left {
     align-items: flex-start;
-    padding-left: 12px;
+    padding-left: ${"var(--ds-space-150, 12px)"};
     margin-left: -${akEditorMediaResizeHandlerPadding}px;
   }
 

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

@@ -25,8 +25,8 @@ import ImageBorderItem from '../ui/ImageBorder';
 import { currentMediaNodeBorderMark } from '../utils/current-media-node';
 import { shouldShowImageBorder } from './imageBorder';
 import { PixelEntry } from '../ui/PixelEntry';
-import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH } from '@atlaskit/editor-common/media-single';
-import { akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
+import { DEFAULT_IMAGE_WIDTH, DEFAULT_IMAGE_HEIGHT, MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_GUTTER_SIZE, calcMediaSinglePixelWidth } from '@atlaskit/editor-common/media-single';
+import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
 const remove = (state, dispatch) => {
   if (dispatch) {
     dispatch(removeSelectedNode(state.tr));
@@ -266,6 +266,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         type: 'custom',
         fallback: [],
         render: editorView => {
+          var _widthPlugin$sharedSt2, _widthPlugin$sharedSt3;
           if (!editorView) {
             return null;
           }
@@ -274,6 +275,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             dispatch
           } = editorView;
           const selectedMediaSingleNode = getSelectedMediaSingle(state);
+          const contentWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt2 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt2 === void 0 ? void 0 : _widthPlugin$sharedSt2.lineLength) || akEditorDefaultLayoutWidth;
+          const containerWidth = (widthPlugin === null || widthPlugin === void 0 ? void 0 : (_widthPlugin$sharedSt3 = widthPlugin.sharedState.currentState()) === null || _widthPlugin$sharedSt3 === void 0 ? void 0 : _widthPlugin$sharedSt3.width) || akEditorFullWidthLayoutWidth;
           if (!selectedMediaSingleNode) {
             return null;
           }
@@ -282,15 +285,26 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             return null;
           }
           const {
-            width: singleMediaWidth
+            width: singleMediaWidth,
+            widthType,
+            layout
           } = selectedMediaSingleNode.node.attrs;
           const {
             width: mediaWidth,
             height: mediaHeight
           } = selectedMediaNode.attrs;
+          const pixelWidth = calcMediaSinglePixelWidth({
+            width: singleMediaWidth,
+            widthType,
+            origWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
+            layout,
+            contentWidth,
+            containerWidth,
+            gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
+          });
           return /*#__PURE__*/React.createElement(PixelEntry, {
             intl: intl,
-            width: singleMediaWidth,
+            width: pluginState.isResizing ? pluginState.resizingWidth : pixelWidth,
             mediaWidth: mediaWidth || DEFAULT_IMAGE_WIDTH,
             mediaHeight: mediaHeight || DEFAULT_IMAGE_HEIGHT,
             validate: value => {
@@ -312,11 +326,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           });
         }
       });
-      if (!pluginState.isResizing) {
-        toolbarButtons.push({
-          type: 'separator'
-        });
-      }
+      toolbarButtons.push({
+        type: 'separator'
+      });
     }
     if (allowLinking && shouldShowMediaLinkToolbar(state)) {
       toolbarButtons.push({
@@ -423,7 +435,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d9 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.dependencies.decorations.actions) !== null && _pluginInjectionApi$d9 !== void 0 ? _pluginInjectionApi$d9 : {};
-  if (!mediaPluginState || mediaPluginState.isResizing) {
+  if (!mediaPluginState) {
     return;
   }
   const nodeType = allowMediaInline ? [mediaInline, mediaSingle, media] : [mediaSingle];

package/dist/es2019/plugins/media/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -12,9 +12,11 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import classnames from 'classnames';
 import { richMediaClassName, resizerStyles } from '@atlaskit/editor-common/styles';
-import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
+import { MEDIA_SINGLE_MIN_PIXEL_WIDTH, MEDIA_SINGLE_SNAP_GAP, MEDIA_SINGLE_RESIZE_THROTTLE_TIME, calculateOffsetLeft, DEFAULT_IMAGE_WIDTH, calcMediaSingleMaxWidth } from '@atlaskit/editor-common/media-single';
 import { findClosestSnap, getGuidelinesWithHighlights, generateDefaultGuidelines, generateDynamicGuidelines, getGuidelineSnaps } from '@atlaskit/editor-common/guideline';
 import memoizeOne from 'memoize-one';
+import throttle from 'lodash/throttle';
+import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 export const resizerNextTestId = 'mediaSingle.resizerNext.testid';
 
 // TODO: Create new fixed image size event
@@ -58,13 +60,14 @@ class ResizableMediaSingleNext extends React.Component {
           state
         },
         containerWidth,
-        lineLength
+        lineLength,
+        fullWidthMode
       } = this.props;
       const newPct = calcPctFromPx(newWidth, this.props.lineLength) * 100;
       this.setState({
         resizedPctWidth: newPct
       });
-      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength);
+      let newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode);
       if (newPct <= 100) {
         if (this.wrappedLayout && (stop ? newPct !== 100 : true)) {
           newLayout = layout;
@@ -80,7 +83,13 @@ class ResizableMediaSingleNext extends React.Component {
         };
       }
     });
-    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth) => {
+    _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode) => {
+      if (fullWidthMode) {
+        if (width < contentWidth) {
+          return 'center';
+        }
+        return 'full-width';
+      }
       if (width <= contentWidth) {
         return 'center';
       }
@@ -122,7 +131,16 @@ class ResizableMediaSingleNext extends React.Component {
         dispatch
       } = this.props.view;
       const tr = state.tr;
-      tr.setMeta('mediaSinglePlugin.isResizing', isResizing);
+      tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+      return dispatch(tr);
+    });
+    _defineProperty(this, "updateSizeInPluginState", width => {
+      const {
+        state,
+        dispatch
+      } = this.props.view;
+      const tr = state.tr;
+      tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
       return dispatch(tr);
     });
     _defineProperty(this, "calcMaxWidth", memoizeOne((contentWidth, containerWidth, fullWidthMode) => {
@@ -167,11 +185,12 @@ class ResizableMediaSingleNext extends React.Component {
       });
       this.selectCurrentMediaNode();
       this.setIsResizing(true);
+      this.updateSizeInPluginState(this.state.size.width);
       // re-calucate guidelines
       this.guidelines = this.getAllGuidelines();
       return 0;
     });
-    _defineProperty(this, "handleResize", (size, delta) => {
+    _defineProperty(this, "handleResize", throttle((size, delta) => {
       const {
         width: originalWidth,
         height: originalHeight,
@@ -193,10 +212,11 @@ class ResizableMediaSingleNext extends React.Component {
         },
         snaps: guidelineSnaps.snaps
       });
+      this.updateSizeInPluginState(width);
       if (calculatedWidthWithLayout.layout !== layout) {
         updateSize(width, calculatedWidthWithLayout.layout);
       }
-    });
+    }, MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
     _defineProperty(this, "handleResizeStop", (size, delta) => {
       const {
         width: originalWidth,
@@ -279,6 +299,18 @@ class ResizableMediaSingleNext extends React.Component {
         }
       });
     }
+    if (this.props.layout === 'full-width' && !this.isNestedNode() && prevProps.containerWidth !== this.props.containerWidth) {
+      // To achieve edge-to-edge for full-width, we need to update its width according to containerWidth
+      // Update state to allow resizer to get most up-to-date width to avoid jumping when start resizing
+      this.setState(prevState => {
+        return {
+          size: {
+            width: calcMediaSingleMaxWidth(this.props.containerWidth),
+            height: prevState.size.height
+          }
+        };
+      });
+    }
     return true;
   }
 

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

@@ -1,7 +1,7 @@
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { safeInsert as pmSafeInsert, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { checkNodeDown } from '../../../utils';
-import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { isEmptyParagraph, floatingLayouts } from '@atlaskit/editor-common/utils';
 import { getMediaSingleInitialWidth } from '@atlaskit/editor-common/media-single';
 import { copyOptionalAttrsFromMediaState } from '../utils/media-common';
 import { mapSlice } from '../../../utils/slice';
@@ -218,4 +218,23 @@ export function isCaptionNode(editorView) {
     return true;
   }
   return false;
-}
+}
+export const getParentWidthForNestedMediaSingleNode = (resolvedPos, view) => {
+  const domNode = view.nodeDOM(resolvedPos.pos);
+  if (resolvedPos.nodeAfter && floatingLayouts.includes(resolvedPos.nodeAfter.attrs.layout) && domNode && domNode.parentElement) {
+    const {
+      tableCell,
+      tableHeader
+    } = view.state.schema.nodes;
+    if ([tableCell, tableHeader].includes(resolvedPos.parent.type)) {
+      // since table has constant padding, use hardcoded constant instead of query the dom
+      const tablePadding = 8;
+      return domNode.parentElement.offsetWidth - tablePadding * 2;
+    }
+    return domNode.parentElement.offsetWidth;
+  }
+  if (domNode instanceof HTMLElement) {
+    return domNode.offsetWidth;
+  }
+  return null;
+};

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

@@ -1,6 +1,7 @@
 import { toggleMark } from '@atlaskit/editor-common/mark';
 import { ACTIONS, pluginKey } from '../pm-plugins/main';
 import { getDisabledState } from '../utils/disabled';
+import { pluginCommandToPMCommand } from '@atlaskit/editor-common/preset';
 export const toggleColor = color => (state, dispatch) => {
   const {
     textColor
@@ -21,9 +22,9 @@ export const toggleColor = color => (state, dispatch) => {
       color
     });
     state.tr.scrollIntoView();
-    toggleMark(textColor, {
+    pluginCommandToPMCommand(toggleMark(textColor, {
       color
-    })(state, dispatch);
+    }))(state, dispatch);
   }
   return true;
 };

package/dist/es2019/utils/document.js

@@ -1,6 +1,7 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { getBreakoutMode } from './node-width';
 import { processRawValue, hasDocAsParent, getStepRange, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+export { findFarthestParentNode } from '@atlaskit/editor-common/utils';
 
 /**
  * Checks if a node has any content. Ignores node that only contain empty block nodes.
@@ -46,26 +47,6 @@ export function processRawFragmentValue(schema, value, providerFactory, sanitize
   }
   return Fragment.from(adfEntities);
 }
-
-/**
- * Find the farthest node given a condition
- * @param predicate Function to check the node
- */
-export const findFarthestParentNode = predicate => $pos => {
-  let candidate = null;
-  for (let i = $pos.depth; i > 0; i--) {
-    const node = $pos.node(i);
-    if (predicate(node)) {
-      candidate = {
-        pos: i > 0 ? $pos.before(i) : 0,
-        start: $pos.start(i),
-        depth: i,
-        node
-      };
-    }
-  }
-  return candidate;
-};
 export const isSelectionEndOfParagraph = state => state.selection.$to.parent.type === state.schema.nodes.paragraph && state.selection.$to.pos === state.doc.resolve(state.selection.$to.pos).end();
 export function getChangedNodesIn({
   tr,

package/dist/es2019/utils/index.js

@@ -2,7 +2,7 @@ import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
 import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 import { FakeTextCursorSelection } from '../plugins/fake-text-cursor/cursor';
 import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-import { isNodeEmpty } from './document';
+export { isEmptyNode, isSelectionInsideLastNodeInDocument, checkNodeDown, insideTableCell, isInListItem } from '@atlaskit/editor-common/utils';
 export { insideTable } from '@atlaskit/editor-common/core-utils';
 export { isNodeEmpty, findFarthestParentNode, isSelectionEndOfParagraph, nodesBetweenChanged, getNodesCount } from './document';
 export { sanitiseMarksInSelection } from './mark';
@@ -15,11 +15,6 @@ function isMarkTypeCompatibleWithMark(markType, mark) {
 function isMarkTypeAllowedInNode(markType, state) {
   return toggleMark(markType)(state);
 }
-export function isSelectionInsideLastNodeInDocument(selection) {
-  const docNode = selection.$anchor.node(0);
-  const rootNode = selection.$anchor.node(1);
-  return docNode.lastChild === rootNode;
-}
 export function getCursor(selection) {
   return selection.$cursor || undefined;
 }
@@ -67,36 +62,6 @@ export function isMarkTypeAllowedInCurrentSelection(markType, state) {
     return allowedInActiveMarks;
   });
 }
-export function checkNodeDown(selection, doc, filter) {
-  const ancestorDepth = findAncestorPosition(doc, selection.$to).depth;
-
-  // Top level node
-  if (ancestorDepth === 0) {
-    return false;
-  }
-  const 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) {
-  const nestableBlocks = ['blockquote', 'bulletList', 'orderedList'];
-  if (pos.depth === 1) {
-    return pos;
-  }
-  let node = pos.node(pos.depth);
-  let 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;
-}
 const transformer = new JSONTransformer();
 export function toJSON(node) {
   return transformer.encode(node);
@@ -142,69 +107,6 @@ export function whichTransitionEvent() {
 export const isTemporary = id => {
   return id.indexOf('temporary:') === 0;
 };
-export const isEmptyNode = schema => {
-  const {
-    doc,
-    paragraph,
-    codeBlock,
-    blockquote,
-    panel,
-    heading,
-    listItem,
-    bulletList,
-    orderedList,
-    taskList,
-    taskItem,
-    decisionList,
-    decisionItem,
-    media,
-    mediaGroup,
-    mediaSingle
-  } = schema.nodes;
-  const 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:
-        let isEmpty = true;
-        node.content.forEach(child => {
-          isEmpty = isEmpty && innerIsEmptyNode(child);
-        });
-        return isEmpty;
-      default:
-        return isNodeEmpty(node);
-    }
-  };
-  return innerIsEmptyNode;
-};
-export const insideTableCell = state => {
-  const {
-    tableCell,
-    tableHeader
-  } = state.schema.nodes;
-  return hasParentNodeOfType([tableCell, tableHeader])(state.selection);
-};
-export const isInListItem = state => {
-  return hasParentNodeOfType(state.schema.nodes.listItem)(state.selection);
-};
 export const hasOpenEnd = slice => {
   return slice.openStart > 0 || slice.openEnd > 0;
 };

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

@@ -1,51 +1 @@
-import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { GapCursorSelection } from '../../plugins/selection/gap-cursor/selection';
-export function atTheEndOfDoc(state) {
-  const {
-    selection,
-    doc
-  } = state;
-  return doc.nodeSize - selection.$to.pos - 2 === selection.$to.depth;
-}
-export function atTheBeginningOfDoc(state) {
-  const {
-    selection
-  } = state;
-  return selection.$from.pos === selection.$from.depth;
-}
-export function atTheEndOfBlock(state) {
-  const {
-    selection
-  } = state;
-  const {
-    $to
-  } = selection;
-  if (selection instanceof GapCursorSelection) {
-    return false;
-  }
-  if (selection instanceof NodeSelection && selection.node.isBlock) {
-    return true;
-  }
-  return endPositionOfParent($to) === $to.pos + 1;
-}
-export function atTheBeginningOfBlock(state) {
-  const {
-    selection
-  } = state;
-  const {
-    $from
-  } = selection;
-  if (selection instanceof GapCursorSelection) {
-    return false;
-  }
-  if (selection instanceof NodeSelection && selection.node.isBlock) {
-    return true;
-  }
-  return startPositionOfParent($from) === $from.pos;
-}
-export function startPositionOfParent(resolvedPos) {
-  return resolvedPos.start(resolvedPos.depth);
-}
-export function endPositionOfParent(resolvedPos) {
-  return resolvedPos.end(resolvedPos.depth) + 1;
-}
+export { atTheBeginningOfBlock, atTheBeginningOfDoc, atTheEndOfBlock, atTheEndOfDoc, endPositionOfParent, startPositionOfParent } from '@atlaskit/editor-common/selection';

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.19.1";
+export const version = "187.20.1";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

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

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

@@ -7,32 +7,33 @@ import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { EVENT_TYPE, ACTION_SUBJECT_ID, ACTION_SUBJECT, ACTION } from '@atlaskit/editor-common/analytics';
 export var insertEmoji = function insertEmoji(editorAnalyticsAPI) {
   return function (emojiId, inputMethod) {
-    return function (state, dispatch) {
-      var emoji = state.schema.nodes.emoji;
+    return function (_ref) {
+      var tr = _ref.tr;
+      var doc = tr.doc,
+        selection = tr.selection;
+      var emoji = tr.doc.type.schema.nodes.emoji;
       if (emoji && emojiId) {
         var node = emoji.createChecked(_objectSpread(_objectSpread({}, emojiId), {}, {
           text: emojiId.fallback || emojiId.shortName
         }));
-        var textNode = state.schema.text(' ');
-        if (dispatch) {
-          var fragment = Fragment.fromArray([node, textNode]);
-          var 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: inputMethod
-              },
-              eventType: EVENT_TYPE.TRACK
-            })(tr);
-          }
-          dispatch(tr.setSelection(Selection.near(tr.doc.resolve(state.selection.$from.pos + fragment.size))));
+        var textNode = doc.type.schema.text(' ');
+        var fragment = Fragment.fromArray([node, textNode]);
+        var 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: 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/esm/plugins/emoji/index.js

@@ -15,6 +15,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 var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
   return {
     title: emoji.shortName || '',
@@ -60,7 +61,8 @@ var isFullShortName = function isFullShortName(query) {
   return query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
 };
 var TRIGGER = ':';
-var emojiPlugin = function emojiPlugin(options, api) {
+export var emojiPlugin = function emojiPlugin(options, api) {
+  var _api$dependencies$ana9;
   var typeAhead = {
     id: TypeAheadAvailableNodes.EMOJI,
     trigger: TRIGGER,
@@ -182,6 +184,15 @@ var emojiPlugin = function emojiPlugin(options, api) {
         }
       }];
     },
+    getSharedState: function 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: function quickInsert(_ref7) {
         var formatMessage = _ref7.formatMessage;
@@ -195,13 +206,13 @@ var emojiPlugin = function emojiPlugin(options, api) {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },
           action: function action(insert, state) {
-            var _api$dependencies$ana9;
+            var _api$dependencies$ana10;
             var 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,
@@ -218,7 +229,6 @@ var emojiPlugin = function emojiPlugin(options, api) {
     }
   };
 };
-export default emojiPlugin;
 
 /**
  * Actions

package/dist/esm/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';