@atlaskit/editor-plugin-emoji 3.1.3 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-emoji
 
+## 3.2.0
+
+### Minor Changes
+
+- [#122920](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122920)
+  [`18c265545150a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/18c265545150a) -
+  [ux] [ED-26914] Emoji quick insert will now open the emoji picker rather than the typeahead when
+  platform_editor_controls is enabled
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.1.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.3
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -28,11 +28,13 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _emoji2 = require("@atlaskit/emoji");
 var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _insertEmoji = require("./editor-commands/insert-emoji");
 var _emoji3 = require("./nodeviews/emoji");
 var _emojiNodeSpec = require("./nodeviews/emojiNodeSpec");
 var _actions = require("./pm-plugins/actions");
 var _asciiInputRules = require("./pm-plugins/ascii-input-rules");
+var _InlineEmojiPopup = require("./ui/InlineEmojiPopup");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -264,12 +266,14 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
       var _ref9 = (_emojiPluginKey$getSt = emojiPluginKey.getState(editorState)) !== null && _emojiPluginKey$getSt !== void 0 ? _emojiPluginKey$getSt : {},
         emojiResourceConfig = _ref9.emojiResourceConfig,
         asciiMap = _ref9.asciiMap,
-        emojiProvider = _ref9.emojiProvider;
+        emojiProvider = _ref9.emojiProvider,
+        inlineEmojiPopupOpen = _ref9.inlineEmojiPopupOpen;
       return {
         emojiResourceConfig: emojiResourceConfig,
         asciiMap: asciiMap,
         typeAheadHandler: typeAhead,
-        emojiProvider: emojiProvider
+        emojiProvider: emojiProvider,
+        inlineEmojiPopupOpen: inlineEmojiPopupOpen
       };
     },
     actions: {
@@ -311,9 +315,28 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
     commands: {
       insertEmoji: (0, _insertEmoji.insertEmoji)(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)
     },
+    contentComponent: function contentComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        popupsBoundariesElement = _ref11.popupsBoundariesElement,
+        popupsMountPoint = _ref11.popupsMountPoint,
+        popupsScrollableElement = _ref11.popupsScrollableElement;
+      if (!api || (0, _experiments.editorExperiment)('platform_editor_controls', 'control')) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_InlineEmojiPopup.InlineEmojiPopup, {
+        api: api,
+        editorView: editorView,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        onClose: function onClose() {
+          editorView.dispatch((0, _actions.setInlineEmojiPopupOpen)(false)(editorView.state.tr));
+        }
+      });
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'emoji',
           title: formatMessage(_messages.toolbarInsertBlockMessages.emoji),
@@ -324,8 +347,16 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           icon: function icon() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },
-          action: function action(insert, state) {
+          action: function action(insert) {
             var _api$typeAhead;
+            if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
+              exposure: true
+            })) {
+              // Clear slash
+              var _tr = insert('');
+              _tr = (0, _actions.setInlineEmojiPopupOpen)(true)(_tr);
+              return _tr;
+            }
             var tr = insert(undefined);
             api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
               triggerHandler: typeAhead,
@@ -479,12 +510,12 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         return {};
       },
       apply: function apply(tr, pluginState) {
-        var _ref12 = tr.getMeta(emojiPluginKey) || {
+        var _ref13 = tr.getMeta(emojiPluginKey) || {
             action: null,
             params: null
           },
-          action = _ref12.action,
-          params = _ref12.params;
+          action = _ref13.action,
+          params = _ref13.params;
         var newPluginState = pluginState;
         switch (action) {
           case _actions.ACTIONS.SET_PROVIDER:
@@ -499,6 +530,12 @@ function createEmojiPlugin(pmPluginFactoryParams, options, api) {
             });
             pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
+          case _actions.ACTIONS.SET_INLINE_POPUP:
+            newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              inlineEmojiPopupOpen: params.open
+            });
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            return newPluginState;
         }
         return newPluginState;
       }

package/dist/cjs/pm-plugins/actions.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setProvider = exports.setAsciiMap = exports.openTypeAhead = exports.ACTIONS = void 0;
+exports.setProvider = exports.setInlineEmojiPopupOpen = exports.setAsciiMap = exports.openTypeAhead = exports.ACTIONS = void 0;
 var _emojiPlugin = require("../emojiPlugin");
 var ACTIONS = exports.ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
   SET_RESULTS: 'SET_RESULTS',
-  SET_ASCII_MAP: 'SET_ASCII_MAP'
+  SET_ASCII_MAP: 'SET_ASCII_MAP',
+  SET_INLINE_POPUP: 'SET_INLINE_POPUP'
 };
 var setAsciiMap = exports.setAsciiMap = function setAsciiMap(asciiMap) {
   return function (tr) {
@@ -38,4 +39,14 @@ var setProvider = exports.setProvider = function setProvider(provider) {
       }
     });
   };
+};
+var setInlineEmojiPopupOpen = exports.setInlineEmojiPopupOpen = function setInlineEmojiPopupOpen(open) {
+  return function (tr) {
+    return tr.setMeta(_emojiPlugin.emojiPluginKey, {
+      action: ACTIONS.SET_INLINE_POPUP,
+      params: {
+        open: open
+      }
+    });
+  };
 };

package/dist/cjs/ui/InlineEmojiPopup.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEmojiPopup = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _emoji = require("@atlaskit/emoji");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
+var getDomRefFromSelection = function getDomRefFromSelection(view) {
+  var domRef = (0, _utils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
+  if (domRef instanceof HTMLElement) {
+    if (domRef.nodeName !== 'P') {
+      var paragraphRef = domRef.closest('p');
+      if (paragraphRef) {
+        return paragraphRef;
+      }
+    }
+    return domRef;
+  }
+  throw new Error('Invalid DOM reference');
+};
+var emojiPopupMessages = {
+  emojiPickerAriaLabel: {
+    id: 'fabric.emoji.picker.aria.label',
+    defaultMessage: 'Emoji picker',
+    description: 'Accessible label for the emoji picker popup'
+  }
+};
+var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref) {
+  var _useSharedPluginState, _useSharedPluginState2;
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    editorView = _ref.editorView,
+    onClose = _ref.onClose;
+  var _ref2 = (_useSharedPluginState = (_useSharedPluginState2 = (0, _hooks.useSharedPluginState)(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
+    emojiProvider = _ref2.emojiProvider,
+    isOpen = _ref2.inlineEmojiPopupOpen;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var focusEditor = (0, _react.useCallback)(function () {
+    // use requestAnimationFrame to run this async after the call
+    requestAnimationFrame(function () {
+      return editorView.focus();
+    });
+  }, [editorView]);
+  var handleSelection = (0, _react.useCallback)(function (emojiId) {
+    api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, _analytics.INPUT_METHOD.PICKER));
+    onClose();
+  }, [api.core.actions, api.emoji.commands, onClose]);
+  if (!isOpen || !emojiProvider) {
+    return null;
+  }
+  var domRef = getDomRefFromSelection(editorView);
+  return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
+    offset: [0, 12],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
+    fitHeight: 350,
+    fitWidth: 350,
+    target: domRef,
+    onUnmount: focusEditor,
+    focusTrap: true,
+    preventOverflow: true,
+    handleClickOutside: onClose,
+    handleEscapeKeydown: onClose,
+    captureClick: true
+  }, /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+    return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPicker, {
+      emojiProvider: Promise.resolve(emojiProvider),
+      onPickerRef: setOutsideClickTargetRef,
+      onSelection: handleSelection
+    });
+  }));
+};

package/dist/es2019/emojiPlugin.js

@@ -12,11 +12,13 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
 import { EmojiNodeView } from './nodeviews/emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
-import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setProvider as setProviderAction } from './pm-plugins/actions';
+import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
+import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
 export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
   title: emoji.shortName || '',
   key: emoji.id || emoji.shortName,
@@ -246,13 +248,15 @@ export const emojiPlugin = ({
       const {
         emojiResourceConfig,
         asciiMap,
-        emojiProvider
+        emojiProvider,
+        inlineEmojiPopupOpen
       } = (_emojiPluginKey$getSt = emojiPluginKey.getState(editorState)) !== null && _emojiPluginKey$getSt !== void 0 ? _emojiPluginKey$getSt : {};
       return {
         emojiResourceConfig,
         asciiMap,
         typeAheadHandler: typeAhead,
-        emojiProvider
+        emojiProvider,
+        inlineEmojiPopupOpen
       };
     },
     actions: {
@@ -273,6 +277,26 @@ export const emojiPlugin = ({
     commands: {
       insertEmoji: insertEmoji(api === null || api === void 0 ? void 0 : (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)
     },
+    contentComponent({
+      editorView,
+      popupsBoundariesElement,
+      popupsMountPoint,
+      popupsScrollableElement
+    }) {
+      if (!api || editorExperiment('platform_editor_controls', 'control')) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(InlineEmojiPopup, {
+        api: api,
+        editorView: editorView,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        onClose: () => {
+          editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
+        }
+      });
+    },
     pluginsOptions: {
       quickInsert: ({
         formatMessage
@@ -284,8 +308,16 @@ export const emojiPlugin = ({
         keyshortcut: ':',
         isDisabledOffline: fg('platform_editor_preload_emoji_picker') ? false : true,
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
-        action(insert, state) {
+        action(insert) {
           var _api$typeAhead;
+          if (editorExperiment('platform_editor_controls', 'variant1', {
+            exposure: true
+          })) {
+            // Clear slash
+            let tr = insert('');
+            tr = setInlineEmojiPopupOpen(true)(tr);
+            return tr;
+          }
           const tr = insert(undefined);
           api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.openAtTransaction({
             triggerHandler: typeAhead,
@@ -451,6 +483,13 @@ export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
             };
             pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
+          case ACTIONS.SET_INLINE_POPUP:
+            newPluginState = {
+              ...pluginState,
+              inlineEmojiPopupOpen: params.open
+            };
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            return newPluginState;
         }
         return newPluginState;
       }

package/dist/es2019/pm-plugins/actions.js

@@ -2,7 +2,8 @@ import { emojiPluginKey } from '../emojiPlugin';
 export const ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
   SET_RESULTS: 'SET_RESULTS',
-  SET_ASCII_MAP: 'SET_ASCII_MAP'
+  SET_ASCII_MAP: 'SET_ASCII_MAP',
+  SET_INLINE_POPUP: 'SET_INLINE_POPUP'
 };
 export const setAsciiMap = asciiMap => tr => {
   return tr.setMeta(emojiPluginKey, {
@@ -26,4 +27,10 @@ export const setProvider = provider => tr => {
       provider
     }
   });
-};
+};
+export const setInlineEmojiPopupOpen = open => tr => tr.setMeta(emojiPluginKey, {
+  action: ACTIONS.SET_INLINE_POPUP,
+  params: {
+    open
+  }
+});

package/dist/es2019/ui/InlineEmojiPopup.js

@@ -0,0 +1,78 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { EmojiPicker } from '@atlaskit/emoji';
+const PopupWithListeners = withOuterListeners(Popup);
+const getDomRefFromSelection = view => {
+  const domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+  if (domRef instanceof HTMLElement) {
+    if (domRef.nodeName !== 'P') {
+      const paragraphRef = domRef.closest('p');
+      if (paragraphRef) {
+        return paragraphRef;
+      }
+    }
+    return domRef;
+  }
+  throw new Error('Invalid DOM reference');
+};
+const emojiPopupMessages = {
+  emojiPickerAriaLabel: {
+    id: 'fabric.emoji.picker.aria.label',
+    defaultMessage: 'Emoji picker',
+    description: 'Accessible label for the emoji picker popup'
+  }
+};
+export const InlineEmojiPopup = ({
+  api,
+  popupsMountPoint,
+  popupsBoundariesElement,
+  popupsScrollableElement,
+  editorView,
+  onClose
+}) => {
+  var _useSharedPluginState, _useSharedPluginState2;
+  const {
+    emojiProvider,
+    inlineEmojiPopupOpen: isOpen
+  } = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {};
+  const intl = useIntl();
+  const focusEditor = useCallback(() => {
+    // use requestAnimationFrame to run this async after the call
+    requestAnimationFrame(() => editorView.focus());
+  }, [editorView]);
+  const handleSelection = useCallback(emojiId => {
+    api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+    onClose();
+  }, [api.core.actions, api.emoji.commands, onClose]);
+  if (!isOpen || !emojiProvider) {
+    return null;
+  }
+  const domRef = getDomRefFromSelection(editorView);
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
+    offset: [0, 12],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    zIndex: akEditorFloatingDialogZIndex,
+    fitHeight: 350,
+    fitWidth: 350,
+    target: domRef,
+    onUnmount: focusEditor,
+    focusTrap: true,
+    preventOverflow: true,
+    handleClickOutside: onClose,
+    handleEscapeKeydown: onClose,
+    captureClick: true
+  }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(EmojiPicker, {
+    emojiProvider: Promise.resolve(emojiProvider),
+    onPickerRef: setOutsideClickTargetRef,
+    onSelection: handleSelection
+  })));
+};

package/dist/esm/emojiPlugin.js

@@ -17,11 +17,13 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
 import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
 import { EmojiNodeView } from './nodeviews/emoji';
 import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
-import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setProvider as setProviderAction } from './pm-plugins/actions';
+import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setInlineEmojiPopupOpen, setProvider as setProviderAction } from './pm-plugins/actions';
 import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
+import { InlineEmojiPopup } from './ui/InlineEmojiPopup';
 export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
   return {
     title: emoji.shortName || '',
@@ -249,12 +251,14 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
       var _ref9 = (_emojiPluginKey$getSt = emojiPluginKey.getState(editorState)) !== null && _emojiPluginKey$getSt !== void 0 ? _emojiPluginKey$getSt : {},
         emojiResourceConfig = _ref9.emojiResourceConfig,
         asciiMap = _ref9.asciiMap,
-        emojiProvider = _ref9.emojiProvider;
+        emojiProvider = _ref9.emojiProvider,
+        inlineEmojiPopupOpen = _ref9.inlineEmojiPopupOpen;
       return {
         emojiResourceConfig: emojiResourceConfig,
         asciiMap: asciiMap,
         typeAheadHandler: typeAhead,
-        emojiProvider: emojiProvider
+        emojiProvider: emojiProvider,
+        inlineEmojiPopupOpen: inlineEmojiPopupOpen
       };
     },
     actions: {
@@ -296,9 +300,28 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
     commands: {
       insertEmoji: insertEmoji(api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions)
     },
+    contentComponent: function contentComponent(_ref11) {
+      var editorView = _ref11.editorView,
+        popupsBoundariesElement = _ref11.popupsBoundariesElement,
+        popupsMountPoint = _ref11.popupsMountPoint,
+        popupsScrollableElement = _ref11.popupsScrollableElement;
+      if (!api || editorExperiment('platform_editor_controls', 'control')) {
+        return null;
+      }
+      return /*#__PURE__*/React.createElement(InlineEmojiPopup, {
+        api: api,
+        editorView: editorView,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        onClose: function onClose() {
+          editorView.dispatch(setInlineEmojiPopupOpen(false)(editorView.state.tr));
+        }
+      });
+    },
     pluginsOptions: {
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'emoji',
           title: formatMessage(messages.emoji),
@@ -309,8 +332,16 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           icon: function icon() {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },
-          action: function action(insert, state) {
+          action: function action(insert) {
             var _api$typeAhead;
+            if (editorExperiment('platform_editor_controls', 'variant1', {
+              exposure: true
+            })) {
+              // Clear slash
+              var _tr = insert('');
+              _tr = setInlineEmojiPopupOpen(true)(_tr);
+              return _tr;
+            }
             var tr = insert(undefined);
             api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 || _api$typeAhead.actions.openAtTransaction({
               triggerHandler: typeAhead,
@@ -464,12 +495,12 @@ export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
         return {};
       },
       apply: function apply(tr, pluginState) {
-        var _ref12 = tr.getMeta(emojiPluginKey) || {
+        var _ref13 = tr.getMeta(emojiPluginKey) || {
             action: null,
             params: null
           },
-          action = _ref12.action,
-          params = _ref12.params;
+          action = _ref13.action,
+          params = _ref13.params;
         var newPluginState = pluginState;
         switch (action) {
           case ACTIONS.SET_PROVIDER:
@@ -484,6 +515,12 @@ export function createEmojiPlugin(pmPluginFactoryParams, options, api) {
             });
             pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
             return newPluginState;
+          case ACTIONS.SET_INLINE_POPUP:
+            newPluginState = _objectSpread(_objectSpread({}, pluginState), {}, {
+              inlineEmojiPopupOpen: params.open
+            });
+            pmPluginFactoryParams.dispatch(emojiPluginKey, newPluginState);
+            return newPluginState;
         }
         return newPluginState;
       }

package/dist/esm/pm-plugins/actions.js

@@ -2,7 +2,8 @@ import { emojiPluginKey } from '../emojiPlugin';
 export var ACTIONS = {
   SET_PROVIDER: 'SET_PROVIDER',
   SET_RESULTS: 'SET_RESULTS',
-  SET_ASCII_MAP: 'SET_ASCII_MAP'
+  SET_ASCII_MAP: 'SET_ASCII_MAP',
+  SET_INLINE_POPUP: 'SET_INLINE_POPUP'
 };
 export var setAsciiMap = function setAsciiMap(asciiMap) {
   return function (tr) {
@@ -32,4 +33,14 @@ export var setProvider = function setProvider(provider) {
       }
     });
   };
+};
+export var setInlineEmojiPopupOpen = function setInlineEmojiPopupOpen(open) {
+  return function (tr) {
+    return tr.setMeta(emojiPluginKey, {
+      action: ACTIONS.SET_INLINE_POPUP,
+      params: {
+        open: open
+      }
+    });
+  };
 };

package/dist/esm/ui/InlineEmojiPopup.js

@@ -0,0 +1,80 @@
+import React, { useCallback } from 'react';
+import { useIntl } from 'react-intl-next';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
+import { EmojiPicker } from '@atlaskit/emoji';
+var PopupWithListeners = withOuterListeners(Popup);
+var getDomRefFromSelection = function getDomRefFromSelection(view) {
+  var domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
+  if (domRef instanceof HTMLElement) {
+    if (domRef.nodeName !== 'P') {
+      var paragraphRef = domRef.closest('p');
+      if (paragraphRef) {
+        return paragraphRef;
+      }
+    }
+    return domRef;
+  }
+  throw new Error('Invalid DOM reference');
+};
+var emojiPopupMessages = {
+  emojiPickerAriaLabel: {
+    id: 'fabric.emoji.picker.aria.label',
+    defaultMessage: 'Emoji picker',
+    description: 'Accessible label for the emoji picker popup'
+  }
+};
+export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
+  var _useSharedPluginState, _useSharedPluginState2;
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    editorView = _ref.editorView,
+    onClose = _ref.onClose;
+  var _ref2 = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {},
+    emojiProvider = _ref2.emojiProvider,
+    isOpen = _ref2.inlineEmojiPopupOpen;
+  var intl = useIntl();
+  var focusEditor = useCallback(function () {
+    // use requestAnimationFrame to run this async after the call
+    requestAnimationFrame(function () {
+      return editorView.focus();
+    });
+  }, [editorView]);
+  var handleSelection = useCallback(function (emojiId) {
+    api.core.actions.execute(api.emoji.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+    onClose();
+  }, [api.core.actions, api.emoji.commands, onClose]);
+  if (!isOpen || !emojiProvider) {
+    return null;
+  }
+  var domRef = getDomRefFromSelection(editorView);
+  return /*#__PURE__*/React.createElement(PopupWithListeners, {
+    ariaLabel: intl.formatMessage(emojiPopupMessages.emojiPickerAriaLabel),
+    offset: [0, 12],
+    mountTo: popupsMountPoint,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    zIndex: akEditorFloatingDialogZIndex,
+    fitHeight: 350,
+    fitWidth: 350,
+    target: domRef,
+    onUnmount: focusEditor,
+    focusTrap: true,
+    preventOverflow: true,
+    handleClickOutside: onClose,
+    handleEscapeKeydown: onClose,
+    captureClick: true
+  }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
+    return /*#__PURE__*/React.createElement(EmojiPicker, {
+      emojiProvider: Promise.resolve(emojiProvider),
+      onPickerRef: setOutsideClickTargetRef,
+      onSelection: handleSelection
+    });
+  }));
+};

package/dist/types/emojiPluginType.d.ts

@@ -34,6 +34,7 @@ export type EmojiPluginState = {
     emojiProvider?: EmojiProvider;
     emojiResourceConfig?: EmojiResourceConfig;
     asciiMap?: Map<string, EmojiDescription>;
+    inlineEmojiPopupOpen?: boolean;
 };
 export type EmojiPluginSharedState = EmojiPluginState & {
     typeAheadHandler: TypeAheadHandler;

package/dist/types/pm-plugins/actions.d.ts

@@ -7,7 +7,9 @@ export declare const ACTIONS: {
     SET_PROVIDER: string;
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
+    SET_INLINE_POPUP: string;
 };
 export declare const setAsciiMap: (asciiMap: Map<string, EmojiDescription>) => (tr: Transaction) => Transaction;
 export declare const openTypeAhead: (typeaheadHandler: TypeAheadHandler, api?: PublicPluginAPI<EmojiPlugin>) => (inputMethod: TypeAheadInputMethod) => boolean;
 export declare const setProvider: (provider?: EmojiProvider) => (tr: Transaction) => Transaction;
+export declare const setInlineEmojiPopupOpen: (open: boolean) => (tr: Transaction) => Transaction;

package/dist/types/ui/InlineEmojiPopup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EmojiPlugin } from '../emojiPluginType';
+type InlineEmojiPopupProps = Pick<UiComponentFactoryParams, 'popupsBoundariesElement' | 'popupsMountPoint' | 'popupsScrollableElement'> & {
+    api: ExtractInjectionAPI<EmojiPlugin>;
+    editorView: EditorView;
+    onClose: () => void;
+};
+export declare const InlineEmojiPopup: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
+export {};

package/dist/types-ts4.5/emojiPluginType.d.ts

@@ -34,6 +34,7 @@ export type EmojiPluginState = {
     emojiProvider?: EmojiProvider;
     emojiResourceConfig?: EmojiResourceConfig;
     asciiMap?: Map<string, EmojiDescription>;
+    inlineEmojiPopupOpen?: boolean;
 };
 export type EmojiPluginSharedState = EmojiPluginState & {
     typeAheadHandler: TypeAheadHandler;

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -7,7 +7,9 @@ export declare const ACTIONS: {
     SET_PROVIDER: string;
     SET_RESULTS: string;
     SET_ASCII_MAP: string;
+    SET_INLINE_POPUP: string;
 };
 export declare const setAsciiMap: (asciiMap: Map<string, EmojiDescription>) => (tr: Transaction) => Transaction;
 export declare const openTypeAhead: (typeaheadHandler: TypeAheadHandler, api?: PublicPluginAPI<EmojiPlugin>) => (inputMethod: TypeAheadInputMethod) => boolean;
 export declare const setProvider: (provider?: EmojiProvider) => (tr: Transaction) => Transaction;
+export declare const setInlineEmojiPopupOpen: (open: boolean) => (tr: Transaction) => Transaction;

package/dist/types-ts4.5/ui/InlineEmojiPopup.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { ExtractInjectionAPI, UiComponentFactoryParams } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { type EmojiPlugin } from '../emojiPluginType';
+type InlineEmojiPopupProps = Pick<UiComponentFactoryParams, 'popupsBoundariesElement' | 'popupsMountPoint' | 'popupsScrollableElement'> & {
+    api: ExtractInjectionAPI<EmojiPlugin>;
+    editorView: EditorView;
+    onClose: () => void;
+};
+export declare const InlineEmojiPopup: ({ api, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, editorView, onClose, }: InlineEmojiPopupProps) => React.JSX.Element | null;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "3.1.3",
+	"version": "3.2.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,13 +23,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^101.1.0",
+		"@atlaskit/editor-common": "^102.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.1.0",
-		"@atlaskit/editor-plugin-annotation": "2.1.1",
+		"@atlaskit/editor-plugin-annotation": "^2.1.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/icon": "^24.1.0",
 		"@atlaskit/node-data-provider": "^4.1.0",
@@ -48,12 +49,12 @@
 		"react-dom": "^18.2.0"
 	},
 	"devDependencies": {
-		"@af/visual-regression": "*",
+		"@af/visual-regression": "^1.3.0",
 		"@atlaskit/editor-plugin-composition": "^1.3.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
-		"@atlaskit/ssr": "*",
+		"@atlaskit/ssr": "^0.4.0",
 		"@atlaskit/util-data-test": "^18.0.0",
-		"@atlaskit/visual-regression": "*",
+		"@atlaskit/visual-regression": "^0.10.0",
 		"@testing-library/react": "^13.4.0",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"