@atlaskit/editor-plugin-emoji 2.7.8 → 2.7.10

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-emoji
 
+## 2.7.10
+
+### Patch Changes
+
+- [#173838](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173838)
+  [`66ed8e1cd9c74`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/66ed8e1cd9c74) -
+  [ux] ED-25836 show comment in floating toolbar for emoji
+- Updated dependencies
+
+## 2.7.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.7.8
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -16,14 +16,17 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _reactNodeView = require("@atlaskit/editor-common/react-node-view");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
+var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 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 _insertEmoji = require("./commands/insert-emoji");
 var _emoji3 = require("./nodeviews/emoji");
@@ -290,7 +293,50 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
           }
         }];
       },
-      typeAhead: typeAhead
+      typeAhead: typeAhead,
+      floatingToolbar: function floatingToolbar(state, intl) {
+        var _api$editorViewMode;
+        var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+        if (!isViewMode || !(0, _platformFeatureFlags.fg)('platform_inline_node_as_valid_annotation_selection')) {
+          return undefined;
+        }
+        var onClick = function onClick(stateFromClickEvent, dispatch) {
+          var _api$annotation;
+          if (!(api !== null && api !== void 0 && api.annotation)) {
+            return true;
+          }
+          var command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.actions) === null || _api$annotation === void 0 ? void 0 : _api$annotation.setInlineCommentDraftState(true, _analytics.INPUT_METHOD.TOOLBAR);
+          return command(stateFromClickEvent, dispatch);
+        };
+        return {
+          title: 'Emoji floating toolbar',
+          nodeType: [state.schema.nodes.emoji],
+          onPositionCalculated: (0, _utils.calculateToolbarPositionAboveSelection)('Emoji floating toolbar'),
+          items: function items(node) {
+            var _api$annotation2;
+            var annotationState = api === null || api === void 0 || (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            var activeCommentMark = node.marks.find(function (mark) {
+              return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
+            });
+            var showAnnotation = annotationState && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
+            if (showAnnotation) {
+              return [{
+                type: 'button',
+                showTitle: true,
+                testId: 'add-comment-emoji-button',
+                icon: _comment.default,
+                title: intl.formatMessage(_messages.annotationMessages.createComment),
+                onClick: onClick,
+                tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
+                  description: intl.formatMessage(_messages.annotationMessages.createComment)
+                }),
+                supportsViewMode: true
+              }];
+            }
+            return [];
+          }
+        };
+      }
     }
   };
 };

package/dist/es2019/plugin.js

@@ -1,14 +1,17 @@
 import React from 'react';
 import { emoji } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconEmoji } from '@atlaskit/editor-common/quick-insert';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
+import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createEmojiFragment, insertEmoji } from './commands/insert-emoji';
 import { EmojiNodeView } from './nodeviews/emoji';
@@ -249,7 +252,48 @@ export const emojiPlugin = ({
           return tr;
         }
       }],
-      typeAhead
+      typeAhead,
+      floatingToolbar: (state, intl) => {
+        var _api$editorViewMode, _api$editorViewMode$s;
+        const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
+        if (!isViewMode || !fg('platform_inline_node_as_valid_annotation_selection')) {
+          return undefined;
+        }
+        const onClick = (stateFromClickEvent, dispatch) => {
+          var _api$annotation, _api$annotation$actio;
+          if (!(api !== null && api !== void 0 && api.annotation)) {
+            return true;
+          }
+          const command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 ? void 0 : (_api$annotation$actio = _api$annotation.actions) === null || _api$annotation$actio === void 0 ? void 0 : _api$annotation$actio.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
+          return command(stateFromClickEvent, dispatch);
+        };
+        return {
+          title: 'Emoji floating toolbar',
+          nodeType: [state.schema.nodes.emoji],
+          onPositionCalculated: calculateToolbarPositionAboveSelection('Emoji floating toolbar'),
+          items: node => {
+            var _api$annotation2;
+            const annotationState = api === null || api === void 0 ? void 0 : (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            const activeCommentMark = node.marks.find(mark => mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false);
+            const showAnnotation = annotationState && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
+            if (showAnnotation) {
+              return [{
+                type: 'button',
+                showTitle: true,
+                testId: 'add-comment-emoji-button',
+                icon: CommentIcon,
+                title: intl.formatMessage(annotationMessages.createComment),
+                onClick,
+                tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+                  description: intl.formatMessage(annotationMessages.createComment)
+                }),
+                supportsViewMode: true
+              }];
+            }
+            return [];
+          }
+        };
+      }
     }
   };
 };

package/dist/esm/plugin.js

@@ -6,14 +6,17 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React from 'react';
 import { emoji } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { IconEmoji } from '@atlaskit/editor-common/quick-insert';
 import { getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
+import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { EmojiTypeAheadItem, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
+import CommentIcon from '@atlaskit/icon/core/comment';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { createEmojiFragment, insertEmoji } from './commands/insert-emoji';
 import { EmojiNodeView } from './nodeviews/emoji';
@@ -278,7 +281,50 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
           }
         }];
       },
-      typeAhead: typeAhead
+      typeAhead: typeAhead,
+      floatingToolbar: function floatingToolbar(state, intl) {
+        var _api$editorViewMode;
+        var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
+        if (!isViewMode || !fg('platform_inline_node_as_valid_annotation_selection')) {
+          return undefined;
+        }
+        var onClick = function onClick(stateFromClickEvent, dispatch) {
+          var _api$annotation;
+          if (!(api !== null && api !== void 0 && api.annotation)) {
+            return true;
+          }
+          var command = (_api$annotation = api.annotation) === null || _api$annotation === void 0 || (_api$annotation = _api$annotation.actions) === null || _api$annotation === void 0 ? void 0 : _api$annotation.setInlineCommentDraftState(true, INPUT_METHOD.TOOLBAR);
+          return command(stateFromClickEvent, dispatch);
+        };
+        return {
+          title: 'Emoji floating toolbar',
+          nodeType: [state.schema.nodes.emoji],
+          onPositionCalculated: calculateToolbarPositionAboveSelection('Emoji floating toolbar'),
+          items: function items(node) {
+            var _api$annotation2;
+            var annotationState = api === null || api === void 0 || (_api$annotation2 = api.annotation) === null || _api$annotation2 === void 0 ? void 0 : _api$annotation2.sharedState.currentState();
+            var activeCommentMark = node.marks.find(function (mark) {
+              return mark.type.name === 'annotation' && (annotationState === null || annotationState === void 0 ? void 0 : annotationState.annotations[mark.attrs.id]) === false;
+            });
+            var showAnnotation = annotationState && annotationState.isVisible && !annotationState.bookmark && !annotationState.mouseData.isSelecting && !activeCommentMark;
+            if (showAnnotation) {
+              return [{
+                type: 'button',
+                showTitle: true,
+                testId: 'add-comment-emoji-button',
+                icon: CommentIcon,
+                title: intl.formatMessage(annotationMessages.createComment),
+                onClick: onClick,
+                tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {
+                  description: intl.formatMessage(annotationMessages.createComment)
+                }),
+                supportsViewMode: true
+              }];
+            }
+            return [];
+          }
+        };
+      }
     }
   };
 };

package/dist/types/types.d.ts

@@ -1,9 +1,29 @@
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
+import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
 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';
 import { type EmojiNodeDataProvider } from '@atlaskit/node-data-provider/emoji-provider';
+type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod) => Command;
+type AnnotationPluginType = NextEditorPlugin<'annotation', {
+    sharedState: {
+        annotations: InlineCommentMap;
+        isVisible: boolean;
+        bookmark?: SelectionBookmark;
+        mouseData: {
+            isSelecting: boolean;
+        };
+    };
+    actions: {
+        setInlineCommentDraftState: SetInlineCommentDraftState;
+    };
+}>;
+type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
+    sharedState: EditorViewModePluginState;
+}>;
 export interface EmojiPluginOptions {
     headless?: boolean;
     emojiNodeDataProvider?: EmojiNodeDataProvider;
@@ -19,7 +39,12 @@ export type EmojiPluginSharedState = EmojiPluginState & {
 };
 export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;
-    dependencies: [OptionalPlugin<AnalyticsPlugin>, TypeAheadPlugin];
+    dependencies: [
+        OptionalPlugin<AnalyticsPlugin>,
+        TypeAheadPlugin,
+        OptionalPlugin<AnnotationPluginType>,
+        OptionalPlugin<EditorViewModePluginType>
+    ];
     sharedState: EmojiPluginSharedState | undefined;
     commands: {
         insertEmoji: (emojiId: EmojiId, inputMethod?: INPUT_METHOD.PICKER | INPUT_METHOD.ASCII | INPUT_METHOD.TYPEAHEAD) => EditorCommand;
@@ -29,3 +54,4 @@ export type EmojiPlugin = NextEditorPlugin<'emoji', {
         setProvider: (provider: Promise<EmojiProvider>) => Promise<boolean>;
     };
 }>;
+export {};

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

@@ -1,9 +1,29 @@
 import type { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import type { EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
+import type { Command, EditorCommand, NextEditorPlugin, OptionalPlugin, TypeAheadHandler } from '@atlaskit/editor-common/types';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { InlineCommentInputMethod, InlineCommentMap } from '@atlaskit/editor-plugin-annotation';
+import { type EditorViewModePluginState } from '@atlaskit/editor-plugin-editor-viewmode';
 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';
 import { type EmojiNodeDataProvider } from '@atlaskit/node-data-provider/emoji-provider';
+type SetInlineCommentDraftState = (drafting: boolean, inputMethod: InlineCommentInputMethod) => Command;
+type AnnotationPluginType = NextEditorPlugin<'annotation', {
+    sharedState: {
+        annotations: InlineCommentMap;
+        isVisible: boolean;
+        bookmark?: SelectionBookmark;
+        mouseData: {
+            isSelecting: boolean;
+        };
+    };
+    actions: {
+        setInlineCommentDraftState: SetInlineCommentDraftState;
+    };
+}>;
+type EditorViewModePluginType = NextEditorPlugin<'editorViewMode', {
+    sharedState: EditorViewModePluginState;
+}>;
 export interface EmojiPluginOptions {
     headless?: boolean;
     emojiNodeDataProvider?: EmojiNodeDataProvider;
@@ -21,7 +41,9 @@ export type EmojiPlugin = NextEditorPlugin<'emoji', {
     pluginConfiguration: EmojiPluginOptions | undefined;
     dependencies: [
         OptionalPlugin<AnalyticsPlugin>,
-        TypeAheadPlugin
+        TypeAheadPlugin,
+        OptionalPlugin<AnnotationPluginType>,
+        OptionalPlugin<EditorViewModePluginType>
     ];
     sharedState: EmojiPluginSharedState | undefined;
     commands: {
@@ -32,3 +54,4 @@ export type EmojiPlugin = NextEditorPlugin<'emoji', {
         setProvider: (provider: Promise<EmojiProvider>) => Promise<boolean>;
     };
 }>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-emoji",
-	"version": "2.7.8",
+	"version": "2.7.10",
 	"description": "Emoji plugin for @atlaskit/editor-core",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,11 +21,14 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^46.1.0",
-		"@atlaskit/editor-common": "^95.10.0",
+		"@atlaskit/editor-common": "^96.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
+		"@atlaskit/editor-plugin-annotation": "1.26.0",
+		"@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.11.0",
 		"@atlaskit/editor-prosemirror": "6.2.1",
 		"@atlaskit/emoji": "^67.11.0",
+		"@atlaskit/icon": "^23.0.1",
 		"@atlaskit/node-data-provider": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
@@ -96,6 +99,9 @@
 	"platform-feature-flags": {
 		"editor_inline_comments_paste_insert_nodes": {
 			"type": "boolean"
+		},
+		"platform_inline_node_as_valid_annotation_selection": {
+			"type": "boolean"
 		}
 	}
 }