@atlaskit/editor-plugin-annotation 10.1.9 → 10.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/ui/CommentButton/CommentButton.js +31 -11
  3. package/dist/cjs/ui/CommentButton/utils.js +8 -1
  4. package/dist/es2019/ui/CommentButton/CommentButton.js +27 -5
  5. package/dist/es2019/ui/CommentButton/utils.js +8 -1
  6. package/dist/esm/ui/CommentButton/CommentButton.js +29 -9
  7. package/dist/esm/ui/CommentButton/utils.js +8 -1
  8. package/dist/types/ui/CommentButton/utils.d.ts +6 -1
  9. package/dist/types-ts4.5/ui/CommentButton/utils.d.ts +6 -1
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # @atlaskit/editor-plugin-annotation
2
2
 
3
+ ## 10.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`902c2a2a06799`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/902c2a2a06799) -
8
+ [ux] Fix confusing tooltip on Comment toolbar when offline
9
+
10
+ ### Patch Changes
11
+
12
+ - Updated dependencies
13
+
3
14
  ## 10.1.9
4
15
 
5
16
  ### Patch Changes
package/dist/cjs/ui/CommentButton/CommentButton.js CHANGED
@@ -7,29 +7,37 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.CommentButton = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _reactIntl = require("react-intl");
10
+ var _hooks = require("@atlaskit/editor-common/hooks");
10
11
  var _keymaps = require("@atlaskit/editor-common/keymaps");
11
12
  var _messages = require("@atlaskit/editor-common/messages");
12
13
  var _toolbar = require("@atlaskit/editor-common/toolbar");
13
- var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
14
14
  var _editorToolbar = require("@atlaskit/editor-toolbar");
15
15
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
16
17
  var _utils = require("../../pm-plugins/utils");
17
18
  var _types = require("../../types");
18
- var _hooks = require("./hooks");
19
+ var _hooks2 = require("./hooks");
19
20
  var _utils2 = require("./utils");
20
21
  var CommentButton = exports.CommentButton = function CommentButton(_ref) {
21
22
  var _annotationProviders$;
22
23
  var api = _ref.api,
23
24
  annotationProviders = _ref.annotationProviders;
24
- var isVisible = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.isVisible');
25
- var bookmark = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'annotation.bookmark');
25
+ var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['annotation'], function (states) {
26
+ var _states$annotationSta, _states$annotationSta2;
27
+ return {
28
+ isVisible: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.isVisible,
29
+ bookmark: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.bookmark
30
+ };
31
+ }),
32
+ isVisible = _useSharedPluginState.isVisible,
33
+ bookmark = _useSharedPluginState.bookmark;
26
34
  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
27
35
  editorView = _useEditorToolbar.editorView;
28
36
  var annotationSelectionType = editorView !== null && editorView !== void 0 && editorView.state ? (0, _utils.isSelectionValid)(editorView.state) : _types.AnnotationSelectionType.INVALID;
29
37
  var _ref2 = (_annotationProviders$ = annotationProviders === null || annotationProviders === void 0 ? void 0 : annotationProviders.inlineComment) !== null && _annotationProviders$ !== void 0 ? _annotationProviders$ : {},
30
38
  getCanAddComments = _ref2.getCanAddComments,
31
39
  contentType = _ref2.contentType;
32
- (0, _hooks.useCommentButtonMount)({
40
+ (0, _hooks2.useCommentButtonMount)({
33
41
  state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
34
42
  annotationProviders: annotationProviders,
35
43
  api: api,
@@ -64,13 +72,25 @@ var CommentButton = exports.CommentButton = function CommentButton(_ref) {
64
72
  var noPermissionToAddCommentMessage = intl.formatMessage(_messages.annotationMessages.noPermissionToAddComment, {
65
73
  contentType: contentType
66
74
  });
67
- var isDisabled = (0, _utils2.isButtonDisabled)({
68
- state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
69
- api: api,
70
- canAddComments: canAddComments
71
- });
75
+ var _isButtonDisabled = (0, _utils2.isButtonDisabled)({
76
+ state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
77
+ api: api,
78
+ canAddComments: canAddComments
79
+ }),
80
+ isDisabled = _isButtonDisabled.isDisabled,
81
+ isAnnotationSelectionInvalid = _isButtonDisabled.isAnnotationSelectionInvalid;
82
+ var tooltipContentWhenDisabled = function tooltipContentWhenDisabled() {
83
+ if (!canAddComments) {
84
+ return noPermissionToAddCommentMessage;
85
+ } else if (isAnnotationSelectionInvalid) {
86
+ return commentDisabledMessage;
87
+ } else {
88
+ // i.e. isOffline. No tooltip message needed.
89
+ return (0, _expValEquals.expValEquals)('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
90
+ }
91
+ };
72
92
  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
73
- content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
93
+ content: isDisabled ? tooltipContentWhenDisabled() : /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
74
94
  description: commentMessage,
75
95
  keymap: _keymaps.addInlineComment
76
96
  })
package/dist/cjs/ui/CommentButton/utils.js CHANGED
@@ -16,7 +16,14 @@ var isButtonDisabled = exports.isButtonDisabled = function isButtonDisabled(_ref
16
16
  api = _ref.api,
17
17
  canAddComments = _ref.canAddComments;
18
18
  var annotationSelectionType = state ? (0, _utils.isSelectionValid)(state) : _types.AnnotationSelectionType.INVALID;
19
- return !canAddComments || annotationSelectionType === _types.AnnotationSelectionType.DISABLED || (0, _editorPluginConnectivity.isOfflineMode)(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode);
19
+ var isAnnotationSelectionInvalid = annotationSelectionType === _types.AnnotationSelectionType.DISABLED;
20
+ var isOffline = (0, _editorPluginConnectivity.isOfflineMode)(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode);
21
+ return {
22
+ isAnnotationSelectionInvalid: isAnnotationSelectionInvalid,
23
+ isOffline: isOffline,
24
+ canAddComments: canAddComments,
25
+ isDisabled: !canAddComments || isAnnotationSelectionInvalid || isOffline
26
+ };
20
27
  };
21
28
  var shouldShowCommentButton = exports.shouldShowCommentButton = function shouldShowCommentButton(_ref2) {
22
29
  var state = _ref2.state,
package/dist/es2019/ui/CommentButton/CommentButton.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl';
3
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
4
  import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
4
5
  import { annotationMessages } from '@atlaskit/editor-common/messages';
5
6
  import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
6
- import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
7
7
  import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
10
  import { isSelectionValid } from '../../pm-plugins/utils';
10
11
  import { AnnotationSelectionType, AnnotationTestIds } from '../../types';
11
12
  import { useCommentButtonMount } from './hooks';
@@ -15,8 +16,16 @@ export const CommentButton = ({
15
16
  annotationProviders
16
17
  }) => {
17
18
  var _annotationProviders$;
18
- const isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
19
- const bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
19
+ const {
20
+ isVisible,
21
+ bookmark
22
+ } = useSharedPluginStateWithSelector(api, ['annotation'], states => {
23
+ var _states$annotationSta, _states$annotationSta2;
24
+ return {
25
+ isVisible: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.isVisible,
26
+ bookmark: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.bookmark
27
+ };
28
+ });
20
29
  const {
21
30
  editorView
22
31
  } = useEditorToolbar();
@@ -60,13 +69,26 @@ export const CommentButton = ({
60
69
  const noPermissionToAddCommentMessage = intl.formatMessage(annotationMessages.noPermissionToAddComment, {
61
70
  contentType
62
71
  });
63
- const isDisabled = isButtonDisabled({
72
+ const {
73
+ isDisabled,
74
+ isAnnotationSelectionInvalid
75
+ } = isButtonDisabled({
64
76
  state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
65
77
  api,
66
78
  canAddComments
67
79
  });
80
+ const tooltipContentWhenDisabled = () => {
81
+ if (!canAddComments) {
82
+ return noPermissionToAddCommentMessage;
83
+ } else if (isAnnotationSelectionInvalid) {
84
+ return commentDisabledMessage;
85
+ } else {
86
+ // i.e. isOffline. No tooltip message needed.
87
+ return expValEquals('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
88
+ }
89
+ };
68
90
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
69
- content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/React.createElement(ToolTipContent, {
91
+ content: isDisabled ? tooltipContentWhenDisabled() : /*#__PURE__*/React.createElement(ToolTipContent, {
70
92
  description: commentMessage,
71
93
  keymap: addInlineComment
72
94
  })
package/dist/es2019/ui/CommentButton/utils.js CHANGED
@@ -11,7 +11,14 @@ export const isButtonDisabled = ({
11
11
  }) => {
12
12
  var _api$connectivity, _api$connectivity$sha, _api$connectivity$sha2;
13
13
  const annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
14
- return !canAddComments || annotationSelectionType === AnnotationSelectionType.DISABLED || isOfflineMode(api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode);
14
+ const isAnnotationSelectionInvalid = annotationSelectionType === AnnotationSelectionType.DISABLED;
15
+ const isOffline = isOfflineMode(api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState) === null || _api$connectivity$sha === void 0 ? void 0 : (_api$connectivity$sha2 = _api$connectivity$sha.currentState()) === null || _api$connectivity$sha2 === void 0 ? void 0 : _api$connectivity$sha2.mode);
16
+ return {
17
+ isAnnotationSelectionInvalid,
18
+ isOffline,
19
+ canAddComments,
20
+ isDisabled: !canAddComments || isAnnotationSelectionInvalid || isOffline
21
+ };
15
22
  };
16
23
  export const shouldShowCommentButton = ({
17
24
  state,
package/dist/esm/ui/CommentButton/CommentButton.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { useIntl } from 'react-intl';
3
+ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
3
4
  import { ToolTipContent, addInlineComment } from '@atlaskit/editor-common/keymaps';
4
5
  import { annotationMessages } from '@atlaskit/editor-common/messages';
5
6
  import { useEditorToolbar } from '@atlaskit/editor-common/toolbar';
6
- import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
7
7
  import { ToolbarButton, CommentIcon as NewCommentIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
8
8
  import { fg } from '@atlaskit/platform-feature-flags';
9
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
10
  import { isSelectionValid } from '../../pm-plugins/utils';
10
11
  import { AnnotationSelectionType, AnnotationTestIds } from '../../types';
11
12
  import { useCommentButtonMount } from './hooks';
@@ -14,8 +15,15 @@ export var CommentButton = function CommentButton(_ref) {
14
15
  var _annotationProviders$;
15
16
  var api = _ref.api,
16
17
  annotationProviders = _ref.annotationProviders;
17
- var isVisible = useSharedPluginStateSelector(api, 'annotation.isVisible');
18
- var bookmark = useSharedPluginStateSelector(api, 'annotation.bookmark');
18
+ var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['annotation'], function (states) {
19
+ var _states$annotationSta, _states$annotationSta2;
20
+ return {
21
+ isVisible: (_states$annotationSta = states.annotationState) === null || _states$annotationSta === void 0 ? void 0 : _states$annotationSta.isVisible,
22
+ bookmark: (_states$annotationSta2 = states.annotationState) === null || _states$annotationSta2 === void 0 ? void 0 : _states$annotationSta2.bookmark
23
+ };
24
+ }),
25
+ isVisible = _useSharedPluginState.isVisible,
26
+ bookmark = _useSharedPluginState.bookmark;
19
27
  var _useEditorToolbar = useEditorToolbar(),
20
28
  editorView = _useEditorToolbar.editorView;
21
29
  var annotationSelectionType = editorView !== null && editorView !== void 0 && editorView.state ? isSelectionValid(editorView.state) : AnnotationSelectionType.INVALID;
@@ -57,13 +65,25 @@ export var CommentButton = function CommentButton(_ref) {
57
65
  var noPermissionToAddCommentMessage = intl.formatMessage(annotationMessages.noPermissionToAddComment, {
58
66
  contentType: contentType
59
67
  });
60
- var isDisabled = isButtonDisabled({
61
- state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
62
- api: api,
63
- canAddComments: canAddComments
64
- });
68
+ var _isButtonDisabled = isButtonDisabled({
69
+ state: editorView === null || editorView === void 0 ? void 0 : editorView.state,
70
+ api: api,
71
+ canAddComments: canAddComments
72
+ }),
73
+ isDisabled = _isButtonDisabled.isDisabled,
74
+ isAnnotationSelectionInvalid = _isButtonDisabled.isAnnotationSelectionInvalid;
75
+ var tooltipContentWhenDisabled = function tooltipContentWhenDisabled() {
76
+ if (!canAddComments) {
77
+ return noPermissionToAddCommentMessage;
78
+ } else if (isAnnotationSelectionInvalid) {
79
+ return commentDisabledMessage;
80
+ } else {
81
+ // i.e. isOffline. No tooltip message needed.
82
+ return expValEquals('confluence_fe_disable_comment_if_offline_fix', 'isEnabled', true) ? undefined : commentDisabledMessage;
83
+ }
84
+ };
65
85
  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
66
- content: isDisabled ? !canAddComments ? noPermissionToAddCommentMessage : commentDisabledMessage : /*#__PURE__*/React.createElement(ToolTipContent, {
86
+ content: isDisabled ? tooltipContentWhenDisabled() : /*#__PURE__*/React.createElement(ToolTipContent, {
67
87
  description: commentMessage,
68
88
  keymap: addInlineComment
69
89
  })
package/dist/esm/ui/CommentButton/utils.js CHANGED
@@ -10,7 +10,14 @@ export var isButtonDisabled = function isButtonDisabled(_ref) {
10
10
  api = _ref.api,
11
11
  canAddComments = _ref.canAddComments;
12
12
  var annotationSelectionType = state ? isSelectionValid(state) : AnnotationSelectionType.INVALID;
13
- return !canAddComments || annotationSelectionType === AnnotationSelectionType.DISABLED || isOfflineMode(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode);
13
+ var isAnnotationSelectionInvalid = annotationSelectionType === AnnotationSelectionType.DISABLED;
14
+ var isOffline = isOfflineMode(api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode);
15
+ return {
16
+ isAnnotationSelectionInvalid: isAnnotationSelectionInvalid,
17
+ isOffline: isOffline,
18
+ canAddComments: canAddComments,
19
+ isDisabled: !canAddComments || isAnnotationSelectionInvalid || isOffline
20
+ };
14
21
  };
15
22
  export var shouldShowCommentButton = function shouldShowCommentButton(_ref2) {
16
23
  var state = _ref2.state,
package/dist/types/ui/CommentButton/utils.d.ts CHANGED
@@ -7,7 +7,12 @@ export declare const isButtonDisabled: ({ state, api, canAddComments, }: {
7
7
  api?: ExtractInjectionAPI<AnnotationPlugin>;
8
8
  canAddComments: boolean;
9
9
  state: EditorState | null | undefined;
10
- }) => boolean;
10
+ }) => {
11
+ canAddComments: boolean;
12
+ isAnnotationSelectionInvalid: boolean;
13
+ isDisabled: boolean;
14
+ isOffline: boolean;
15
+ };
11
16
  export declare const shouldShowCommentButton: ({ state, isVisible, annotationSelectionType, }: {
12
17
  annotationSelectionType: AnnotationSelectionType;
13
18
  isVisible?: boolean;
package/dist/types-ts4.5/ui/CommentButton/utils.d.ts CHANGED
@@ -7,7 +7,12 @@ export declare const isButtonDisabled: ({ state, api, canAddComments, }: {
7
7
  api?: ExtractInjectionAPI<AnnotationPlugin>;
8
8
  canAddComments: boolean;
9
9
  state: EditorState | null | undefined;
10
- }) => boolean;
10
+ }) => {
11
+ canAddComments: boolean;
12
+ isAnnotationSelectionInvalid: boolean;
13
+ isDisabled: boolean;
14
+ isOffline: boolean;
15
+ };
11
16
  export declare const shouldShowCommentButton: ({ state, isVisible, annotationSelectionType, }: {
12
17
  annotationSelectionType: AnnotationSelectionType;
13
18
  isVisible?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-annotation",
3
- "version": "10.1.9",
3
+ "version": "10.2.0",
4
4
  "description": "Annotation plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -27,23 +27,23 @@
27
27
  "sideEffects": false,
28
28
  "atlaskit:src": "src/index.ts",
29
29
  "dependencies": {
30
- "@atlaskit/adf-schema": "^52.7.0",
30
+ "@atlaskit/adf-schema": "^52.9.0",
31
31
  "@atlaskit/editor-plugin-analytics": "^10.0.0",
32
32
  "@atlaskit/editor-plugin-connectivity": "^10.0.0",
33
33
  "@atlaskit/editor-plugin-editor-viewmode-effects": "^10.0.0",
34
34
  "@atlaskit/editor-plugin-feature-flags": "^9.0.0",
35
35
  "@atlaskit/editor-plugin-toolbar": "^7.0.0",
36
- "@atlaskit/editor-plugin-user-intent": "^8.0.0",
36
+ "@atlaskit/editor-plugin-user-intent": "^8.1.0",
37
37
  "@atlaskit/editor-prosemirror": "^7.3.0",
38
38
  "@atlaskit/editor-toolbar": "^1.0.0",
39
39
  "@atlaskit/editor-toolbar-model": "^0.4.0",
40
40
  "@atlaskit/icon": "^34.3.0",
41
41
  "@atlaskit/platform-feature-flags": "^1.1.0",
42
- "@atlaskit/tmp-editor-statsig": "^74.0.0",
42
+ "@atlaskit/tmp-editor-statsig": "^74.10.0",
43
43
  "@babel/runtime": "^7.0.0"
44
44
  },
45
45
  "peerDependencies": {
46
- "@atlaskit/editor-common": "^114.15.0",
46
+ "@atlaskit/editor-common": "^114.19.0",
47
47
  "react": "^18.2.0",
48
48
  "react-dom": "^18.2.0",
49
49
  "react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"