@atlaskit/editor-plugin-emoji 3.5.3 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-emoji
 
+## 3.6.0
+
+### Minor Changes
+
+- [#139089](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139089)
+  [`69dcdc0c4a543`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/69dcdc0c4a543) -
+  ED-26588 Start activity session and persist active session when type ahead and element broswer is
+  open
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.5.4
+
+### Patch Changes
+
+- [#138298](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138298)
+  [`cc7cc96e28407`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc7cc96e28407) -
+  Cleans up FG to preload emoji picker, allowing it to work offline
+- Updated dependencies
+
 ## 3.5.3
 
 ### Patch Changes

package/dist/cjs/emojiPlugin.js

@@ -238,9 +238,7 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
     usePluginHook: function usePluginHook() {
       (0, _react.useEffect)(function () {
         delayUntilIdle(function () {
-          if ((0, _platformFeatureFlags.fg)('platform_editor_preload_emoji_picker')) {
-            (0, _emoji2.preloadEmojiPicker)();
-          }
+          (0, _emoji2.preloadEmojiPicker)();
         });
       }, []);
     },
@@ -344,7 +342,7 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           description: formatMessage(_messages.toolbarInsertBlockMessages.emojiDescription),
           priority: 500,
           keyshortcut: ':',
-          isDisabledOffline: (0, _platformFeatureFlags.fg)('platform_editor_preload_emoji_picker') ? false : true,
+          isDisabledOffline: false,
           icon: function icon() {
             return /*#__PURE__*/_react.default.createElement(_quickInsert.IconEmoji, null);
           },

package/dist/cjs/ui/InlineEmojiPopup.js

@@ -14,6 +14,7 @@ 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");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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);
@@ -49,6 +50,22 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
     emojiProvider = _ref2.emojiProvider,
     isOpen = _ref2.inlineEmojiPopupOpen;
   var intl = (0, _reactIntlNext.useIntl)();
+  var handleOnClose = (0, _react.useCallback)(function () {
+    if ((0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
+    }
+    onClose();
+  }, [onClose, api]);
+  (0, _react.useEffect)(function () {
+    if (isOpen && (0, _platformFeatureFlags.fg)('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics2;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
+        shouldStartTimer: false,
+        shouldPersistActiveSession: true
+      }));
+    }
+  }, [isOpen, api]);
   var focusEditor = (0, _react.useCallback)(function () {
     // use requestAnimationFrame to run this async after the call
     requestAnimationFrame(function () {
@@ -57,8 +74,8 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
   }, [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]);
+    handleOnClose();
+  }, [api.core.actions, api.emoji.commands, handleOnClose]);
   if (!isOpen || !emojiProvider) {
     return null;
   }
@@ -76,8 +93,8 @@ var InlineEmojiPopup = exports.InlineEmojiPopup = function InlineEmojiPopup(_ref
     onUnmount: focusEditor,
     focusTrap: true,
     preventOverflow: true,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
+    handleClickOutside: handleOnClose,
+    handleEscapeKeydown: handleOnClose,
     captureClick: true
   }, /*#__PURE__*/_react.default.createElement(_uiReact.OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
     return /*#__PURE__*/_react.default.createElement(_emoji.EmojiPicker, {

package/dist/es2019/emojiPlugin.js

@@ -219,9 +219,7 @@ export const emojiPlugin = ({
     usePluginHook() {
       useEffect(() => {
         delayUntilIdle(() => {
-          if (fg('platform_editor_preload_emoji_picker')) {
-            preloadEmojiPicker();
-          }
+          preloadEmojiPicker();
         });
       }, []);
     },
@@ -307,7 +305,7 @@ export const emojiPlugin = ({
         description: formatMessage(messages.emojiDescription),
         priority: 500,
         keyshortcut: ':',
-        isDisabledOffline: fg('platform_editor_preload_emoji_picker') ? false : true,
+        isDisabledOffline: false,
         icon: () => /*#__PURE__*/React.createElement(IconEmoji, null),
         action(insert) {
           var _api$typeAhead;

package/dist/es2019/ui/InlineEmojiPopup.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -7,6 +7,7 @@ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as with
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker } from '@atlaskit/emoji';
+import { fg } from '@atlaskit/platform-feature-flags';
 const PopupWithListeners = withOuterListeners(Popup);
 const getDomRefFromSelection = view => {
   const domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
@@ -42,14 +43,30 @@ export const InlineEmojiPopup = ({
     inlineEmojiPopupOpen: isOpen
   } = (_useSharedPluginState = (_useSharedPluginState2 = useSharedPluginState(api, ['emoji'])) === null || _useSharedPluginState2 === void 0 ? void 0 : _useSharedPluginState2.emojiState) !== null && _useSharedPluginState !== void 0 ? _useSharedPluginState : {};
   const intl = useIntl();
+  const handleOnClose = useCallback(() => {
+    if (fg('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics;
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
+    }
+    onClose();
+  }, [onClose, api]);
+  useEffect(() => {
+    if (isOpen && fg('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics2;
+      api === null || api === void 0 ? void 0 : api.core.actions.execute(api === null || api === void 0 ? void 0 : (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
+        shouldStartTimer: false,
+        shouldPersistActiveSession: true
+      }));
+    }
+  }, [isOpen, api]);
   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]);
+    handleOnClose();
+  }, [api.core.actions, api.emoji.commands, handleOnClose]);
   if (!isOpen || !emojiProvider) {
     return null;
   }
@@ -67,8 +84,8 @@ export const InlineEmojiPopup = ({
     onUnmount: focusEditor,
     focusTrap: true,
     preventOverflow: true,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
+    handleClickOutside: handleOnClose,
+    handleEscapeKeydown: handleOnClose,
     captureClick: true
   }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, setOutsideClickTargetRef => /*#__PURE__*/React.createElement(EmojiPicker, {
     emojiProvider: Promise.resolve(emojiProvider),

package/dist/esm/emojiPlugin.js

@@ -223,9 +223,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
     usePluginHook: function usePluginHook() {
       useEffect(function () {
         delayUntilIdle(function () {
-          if (fg('platform_editor_preload_emoji_picker')) {
-            preloadEmojiPicker();
-          }
+          preloadEmojiPicker();
         });
       }, []);
     },
@@ -329,7 +327,7 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           description: formatMessage(messages.emojiDescription),
           priority: 500,
           keyshortcut: ':',
-          isDisabledOffline: fg('platform_editor_preload_emoji_picker') ? false : true,
+          isDisabledOffline: false,
           icon: function icon() {
             return /*#__PURE__*/React.createElement(IconEmoji, null);
           },

package/dist/esm/ui/InlineEmojiPopup.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useIntl } from 'react-intl-next';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
@@ -7,6 +7,7 @@ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as with
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorFloatingDialogZIndex } from '@atlaskit/editor-shared-styles';
 import { EmojiPicker } from '@atlaskit/emoji';
+import { fg } from '@atlaskit/platform-feature-flags';
 var PopupWithListeners = withOuterListeners(Popup);
 var getDomRefFromSelection = function getDomRefFromSelection(view) {
   var domRef = findDomRefAtPos(view.state.selection.from, view.domAtPos.bind(view));
@@ -40,6 +41,22 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
     emojiProvider = _ref2.emojiProvider,
     isOpen = _ref2.inlineEmojiPopupOpen;
   var intl = useIntl();
+  var handleOnClose = useCallback(function () {
+    if (fg('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics = api.metrics) === null || _api$metrics === void 0 ? void 0 : _api$metrics.commands.startActiveSessionTimer());
+    }
+    onClose();
+  }, [onClose, api]);
+  useEffect(function () {
+    if (isOpen && fg('platform_editor_ease_of_use_metrics')) {
+      var _api$metrics2;
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 || (_api$metrics2 = api.metrics) === null || _api$metrics2 === void 0 ? void 0 : _api$metrics2.commands.handleIntentToStartEdit({
+        shouldStartTimer: false,
+        shouldPersistActiveSession: true
+      }));
+    }
+  }, [isOpen, api]);
   var focusEditor = useCallback(function () {
     // use requestAnimationFrame to run this async after the call
     requestAnimationFrame(function () {
@@ -48,8 +65,8 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
   }, [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]);
+    handleOnClose();
+  }, [api.core.actions, api.emoji.commands, handleOnClose]);
   if (!isOpen || !emojiProvider) {
     return null;
   }
@@ -67,8 +84,8 @@ export var InlineEmojiPopup = function InlineEmojiPopup(_ref) {
     onUnmount: focusEditor,
     focusTrap: true,
     preventOverflow: true,
-    handleClickOutside: onClose,
-    handleEscapeKeydown: onClose,
+    handleClickOutside: handleOnClose,
+    handleEscapeKeydown: handleOnClose,
     captureClick: true
   }, /*#__PURE__*/React.createElement(OutsideClickTargetRefContext.Consumer, null, function (setOutsideClickTargetRef) {
     return /*#__PURE__*/React.createElement(EmojiPicker, {

package/dist/types/emojiPluginType.d.ts

@@ -4,6 +4,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { EmojiDescription, EmojiId, EmojiProvider, EmojiResourceConfig } from '@atlaskit/emoji';
@@ -51,7 +52,8 @@ export type EmojiPluginDependencies = [
     TypeAheadPlugin,
     OptionalPlugin<AnnotationPluginType>,
     OptionalPlugin<EditorViewModePluginType>,
-    OptionalPlugin<BasePlugin>
+    OptionalPlugin<BasePlugin>,
+    OptionalPlugin<MetricsPlugin>
 ];
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;

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

@@ -4,6 +4,7 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
+import type { MetricsPlugin } from '@atlaskit/editor-plugin-metrics';
 import type { TypeAheadInputMethod, TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
 import type { EmojiDescription, EmojiId, EmojiProvider, EmojiResourceConfig } from '@atlaskit/emoji';
@@ -51,7 +52,8 @@ export type EmojiPluginDependencies = [
     TypeAheadPlugin,
     OptionalPlugin<AnnotationPluginType>,
     OptionalPlugin<EditorViewModePluginType>,
-    OptionalPlugin<BasePlugin>
+    OptionalPlugin<BasePlugin>,
+    OptionalPlugin<MetricsPlugin>
 ];
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "3.5.3",
+	"version": "3.6.0",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,22 +23,23 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.9.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
-		"@atlaskit/editor-plugin-annotation": "^2.2.0",
+		"@atlaskit/editor-plugin-annotation": "^2.6.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
-		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
+		"@atlaskit/editor-plugin-metrics": "^3.4.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.0.0",
-		"@atlaskit/icon": "^25.5.0",
+		"@atlaskit/icon": "^25.6.0",
 		"@atlaskit/node-data-provider": "^4.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.11.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1",
@@ -110,7 +111,7 @@
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
 		},
-		"platform_editor_preload_emoji_picker": {
+		"platform_editor_ease_of_use_metrics": {
 			"type": "boolean"
 		}
 	}