@atlaskit/editor-plugin-floating-toolbar 1.13.20 → 1.13.21

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 (5) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/ui/EmojiPickerButton.js +33 -26
  3. package/dist/es2019/ui/EmojiPickerButton.js +31 -27
  4. package/dist/esm/ui/EmojiPickerButton.js +31 -27
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/editor-plugin-floating-toolbar
2
2
 
3
+ ## 1.13.21
4
+
5
+ ### Patch Changes
6
+
7
+ - [#155668](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155668)
8
+ [`f948f63ced742`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f948f63ced742) -
9
+ We are testing replacing findDOMNode with an explicit ref behind a feature flag. If this fix is
10
+ successful it will be available in a later release.
11
+ - Updated dependencies
12
+
3
13
  ## 1.13.20
4
14
 
5
15
  ### Patch Changes
package/dist/cjs/ui/EmojiPickerButton.js CHANGED
@@ -1,12 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports.EmojiPickerButton = void 0;
8
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
10
11
  var _react2 = require("@emotion/react");
11
12
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
12
13
  var _hooks = require("@atlaskit/editor-common/hooks");
@@ -16,6 +17,8 @@ var _emoji = require("@atlaskit/emoji");
16
17
  var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/emoji-add"));
17
18
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
18
19
  var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon"));
20
+ 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); }
21
+ 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; }
19
22
  /**
20
23
  * @jsxRuntime classic
21
24
  * @jsx jsx
@@ -28,7 +31,21 @@ var _EditorEmojiAddIcon = _interopRequireDefault(require("./EditorEmojiAddIcon")
28
31
  var emojiPickerButtonWrapper = (0, _react2.css)({
29
32
  position: 'relative'
30
33
  });
31
- var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(_emoji.EmojiPicker);
34
+ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
35
+ var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
36
+ emojiState = _useSharedPluginState.emojiState;
37
+ var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
38
+ var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
39
+ if (!emojiProvider) {
40
+ return null;
41
+ }
42
+ return (0, _react2.jsx)(_emoji.EmojiPicker, {
43
+ emojiProvider: emojiProvider,
44
+ onSelection: props.updateEmoji,
45
+ onPickerRef: setOutsideClickTargetRef
46
+ });
47
+ };
48
+ var EmojiPickerWithListener = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPickerWithProvider);
32
49
  var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(props) {
33
50
  var buttonRef = _react.default.useRef(null);
34
51
  var _React$useState = _react.default.useState(false),
@@ -41,9 +58,9 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
41
58
  }
42
59
  // eslint-disable-next-line react-hooks/exhaustive-deps
43
60
  }, [isPopupOpen]);
44
- var togglePopup = function togglePopup() {
61
+ var togglePopup = (0, _react.useCallback)(function () {
45
62
  setIsPopupOpen(!isPopupOpen);
46
- };
63
+ }, [setIsPopupOpen, isPopupOpen]);
47
64
  var updateEmoji = function updateEmoji(emoji) {
48
65
  setIsPopupOpen(false);
49
66
  props.onChange && props.onChange(emoji);
@@ -52,10 +69,10 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
52
69
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 || _props$editorView.focus();
53
70
  });
54
71
  };
55
- var isDetachedElement = function isDetachedElement(el) {
72
+ var isDetachedElement = (0, _react.useCallback)(function (el) {
56
73
  return !document.body.contains(el);
57
- };
58
- var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
74
+ }, []);
75
+ var handleEmojiClickOutside = (0, _react.useCallback)(function (e) {
59
76
  // Ignore click events for detached elements.
60
77
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
61
78
  // still in the document, and one once it's detached. Does not always occur, and
@@ -63,27 +80,12 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
63
80
  if (e && e.target && !isDetachedElement(e.target)) {
64
81
  togglePopup();
65
82
  }
66
- };
67
- var handleEmojiPressEscape = function handleEmojiPressEscape() {
83
+ }, [isDetachedElement, togglePopup]);
84
+ var handleEmojiPressEscape = (0, _react.useCallback)(function () {
68
85
  var _buttonRef$current;
69
86
  setIsPopupOpen(false);
70
87
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
71
- };
72
- var EmojiPickerWithProvider = function EmojiPickerWithProvider() {
73
- var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.pluginInjectionApi, ['emoji']),
74
- emojiState = _useSharedPluginState.emojiState;
75
- var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
76
- if (!emojiProvider) {
77
- return null;
78
- }
79
- return (0, _react2.jsx)(EmojiPickerWithListener, {
80
- emojiProvider: emojiProvider,
81
- onSelection: updateEmoji,
82
- onPickerRef: function onPickerRef() {},
83
- handleClickOutside: handleEmojiClickOutside,
84
- handleEscapeKeydown: handleEmojiPressEscape
85
- });
86
- };
88
+ }, [setIsPopupOpen, buttonRef]);
87
89
  var renderPopup = function renderPopup() {
88
90
  if (!buttonRef.current || !isPopupOpen) {
89
91
  return;
@@ -100,7 +102,12 @@ var EmojiPickerButton = exports.EmojiPickerButton = function EmojiPickerButton(p
100
102
  ,
101
103
  zIndex: props.setDisableParentScroll ? 600 : undefined,
102
104
  focusTrap: true
103
- }, (0, _react2.jsx)(EmojiPickerWithProvider, null));
105
+ }, (0, _react2.jsx)(EmojiPickerWithListener, {
106
+ handleEscapeKeydown: handleEmojiPressEscape,
107
+ handleClickOutside: handleEmojiClickOutside,
108
+ pluginInjectionApi: props.pluginInjectionApi,
109
+ updateEmoji: updateEmoji
110
+ }));
104
111
  };
105
112
  var title = props.title || '';
106
113
  return (0, _react2.jsx)("div", {
package/dist/es2019/ui/EmojiPickerButton.js CHANGED
@@ -2,14 +2,14 @@
2
2
  * @jsxRuntime classic
3
3
  * @jsx jsx
4
4
  */
5
- import React from 'react';
5
+ import React, { useCallback, useContext } from 'react';
6
6
 
7
7
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
8
  import { css, jsx } from '@emotion/react';
9
9
  import Button from '@atlaskit/button/standard-button';
10
10
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
11
11
  import { Popup } from '@atlaskit/editor-common/ui';
12
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
12
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
13
13
  import { EmojiPicker } from '@atlaskit/emoji';
14
14
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
15
15
  import Tooltip from '@atlaskit/tooltip';
@@ -20,7 +20,22 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon';
20
20
  const emojiPickerButtonWrapper = css({
21
21
  position: 'relative'
22
22
  });
23
- const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
23
+ const EmojiPickerWithProvider = props => {
24
+ const {
25
+ emojiState
26
+ } = useSharedPluginState(props.pluginInjectionApi, ['emoji']);
27
+ const setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
28
+ const emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
29
+ if (!emojiProvider) {
30
+ return null;
31
+ }
32
+ return jsx(EmojiPicker, {
33
+ emojiProvider: emojiProvider,
34
+ onSelection: props.updateEmoji,
35
+ onPickerRef: setOutsideClickTargetRef
36
+ });
37
+ };
38
+ const EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
24
39
  export const EmojiPickerButton = props => {
25
40
  const buttonRef = React.useRef(null);
26
41
  const [isPopupOpen, setIsPopupOpen] = React.useState(false);
@@ -30,9 +45,9 @@ export const EmojiPickerButton = props => {
30
45
  }
31
46
  // eslint-disable-next-line react-hooks/exhaustive-deps
32
47
  }, [isPopupOpen]);
33
- const togglePopup = () => {
48
+ const togglePopup = useCallback(() => {
34
49
  setIsPopupOpen(!isPopupOpen);
35
- };
50
+ }, [setIsPopupOpen, isPopupOpen]);
36
51
  const updateEmoji = emoji => {
37
52
  setIsPopupOpen(false);
38
53
  props.onChange && props.onChange(emoji);
@@ -41,8 +56,8 @@ export const EmojiPickerButton = props => {
41
56
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 ? void 0 : _props$editorView.focus();
42
57
  });
43
58
  };
44
- const isDetachedElement = el => !document.body.contains(el);
45
- const handleEmojiClickOutside = e => {
59
+ const isDetachedElement = useCallback(el => !document.body.contains(el), []);
60
+ const handleEmojiClickOutside = useCallback(e => {
46
61
  // Ignore click events for detached elements.
47
62
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
48
63
  // still in the document, and one once it's detached. Does not always occur, and
@@ -50,28 +65,12 @@ export const EmojiPickerButton = props => {
50
65
  if (e && e.target && !isDetachedElement(e.target)) {
51
66
  togglePopup();
52
67
  }
53
- };
54
- const handleEmojiPressEscape = () => {
68
+ }, [isDetachedElement, togglePopup]);
69
+ const handleEmojiPressEscape = useCallback(() => {
55
70
  var _buttonRef$current;
56
71
  setIsPopupOpen(false);
57
72
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
58
- };
59
- const EmojiPickerWithProvider = () => {
60
- const {
61
- emojiState
62
- } = useSharedPluginState(props.pluginInjectionApi, ['emoji']);
63
- const emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
64
- if (!emojiProvider) {
65
- return null;
66
- }
67
- return jsx(EmojiPickerWithListener, {
68
- emojiProvider: emojiProvider,
69
- onSelection: updateEmoji,
70
- onPickerRef: () => {},
71
- handleClickOutside: handleEmojiClickOutside,
72
- handleEscapeKeydown: handleEmojiPressEscape
73
- });
74
- };
73
+ }, [setIsPopupOpen, buttonRef]);
75
74
  const renderPopup = () => {
76
75
  if (!buttonRef.current || !isPopupOpen) {
77
76
  return;
@@ -88,7 +87,12 @@ export const EmojiPickerButton = props => {
88
87
  ,
89
88
  zIndex: props.setDisableParentScroll ? 600 : undefined,
90
89
  focusTrap: true
91
- }, jsx(EmojiPickerWithProvider, null));
90
+ }, jsx(EmojiPickerWithListener, {
91
+ handleEscapeKeydown: handleEmojiPressEscape,
92
+ handleClickOutside: handleEmojiClickOutside,
93
+ pluginInjectionApi: props.pluginInjectionApi,
94
+ updateEmoji: updateEmoji
95
+ }));
92
96
  };
93
97
  const title = props.title || '';
94
98
  return jsx("div", {
package/dist/esm/ui/EmojiPickerButton.js CHANGED
@@ -3,14 +3,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  * @jsxRuntime classic
4
4
  * @jsx jsx
5
5
  */
6
- import React from 'react';
6
+ import React, { useCallback, useContext } from 'react';
7
7
 
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import Button from '@atlaskit/button/standard-button';
11
11
  import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
12
12
  import { Popup } from '@atlaskit/editor-common/ui';
13
- import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
13
+ import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
14
14
  import { EmojiPicker } from '@atlaskit/emoji';
15
15
  import EmojiAddIcon from '@atlaskit/icon/core/emoji-add';
16
16
  import Tooltip from '@atlaskit/tooltip';
@@ -21,7 +21,21 @@ import EditorEmojiAddIcon from './EditorEmojiAddIcon';
21
21
  var emojiPickerButtonWrapper = css({
22
22
  position: 'relative'
23
23
  });
24
- var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPicker);
24
+ var EmojiPickerWithProvider = function EmojiPickerWithProvider(props) {
25
+ var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
26
+ emojiState = _useSharedPluginState.emojiState;
27
+ var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
28
+ var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
29
+ if (!emojiProvider) {
30
+ return null;
31
+ }
32
+ return jsx(EmojiPicker, {
33
+ emojiProvider: emojiProvider,
34
+ onSelection: props.updateEmoji,
35
+ onPickerRef: setOutsideClickTargetRef
36
+ });
37
+ };
38
+ var EmojiPickerWithListener = withReactEditorViewOuterListeners(EmojiPickerWithProvider);
25
39
  export var EmojiPickerButton = function EmojiPickerButton(props) {
26
40
  var buttonRef = React.useRef(null);
27
41
  var _React$useState = React.useState(false),
@@ -34,9 +48,9 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
34
48
  }
35
49
  // eslint-disable-next-line react-hooks/exhaustive-deps
36
50
  }, [isPopupOpen]);
37
- var togglePopup = function togglePopup() {
51
+ var togglePopup = useCallback(function () {
38
52
  setIsPopupOpen(!isPopupOpen);
39
- };
53
+ }, [setIsPopupOpen, isPopupOpen]);
40
54
  var updateEmoji = function updateEmoji(emoji) {
41
55
  setIsPopupOpen(false);
42
56
  props.onChange && props.onChange(emoji);
@@ -45,10 +59,10 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
45
59
  (_props$editorView = props.editorView) === null || _props$editorView === void 0 || _props$editorView.focus();
46
60
  });
47
61
  };
48
- var isDetachedElement = function isDetachedElement(el) {
62
+ var isDetachedElement = useCallback(function (el) {
49
63
  return !document.body.contains(el);
50
- };
51
- var handleEmojiClickOutside = function handleEmojiClickOutside(e) {
64
+ }, []);
65
+ var handleEmojiClickOutside = useCallback(function (e) {
52
66
  // Ignore click events for detached elements.
53
67
  // Workaround for CETI-240 - where two onClicks fire - one when the upload button is
54
68
  // still in the document, and one once it's detached. Does not always occur, and
@@ -56,27 +70,12 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
56
70
  if (e && e.target && !isDetachedElement(e.target)) {
57
71
  togglePopup();
58
72
  }
59
- };
60
- var handleEmojiPressEscape = function handleEmojiPressEscape() {
73
+ }, [isDetachedElement, togglePopup]);
74
+ var handleEmojiPressEscape = useCallback(function () {
61
75
  var _buttonRef$current;
62
76
  setIsPopupOpen(false);
63
77
  (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 || _buttonRef$current.focus();
64
- };
65
- var EmojiPickerWithProvider = function EmojiPickerWithProvider() {
66
- var _useSharedPluginState = useSharedPluginState(props.pluginInjectionApi, ['emoji']),
67
- emojiState = _useSharedPluginState.emojiState;
68
- var emojiProvider = emojiState !== null && emojiState !== void 0 && emojiState.emojiProvider ? Promise.resolve(emojiState === null || emojiState === void 0 ? void 0 : emojiState.emojiProvider) : undefined;
69
- if (!emojiProvider) {
70
- return null;
71
- }
72
- return jsx(EmojiPickerWithListener, {
73
- emojiProvider: emojiProvider,
74
- onSelection: updateEmoji,
75
- onPickerRef: function onPickerRef() {},
76
- handleClickOutside: handleEmojiClickOutside,
77
- handleEscapeKeydown: handleEmojiPressEscape
78
- });
79
- };
78
+ }, [setIsPopupOpen, buttonRef]);
80
79
  var renderPopup = function renderPopup() {
81
80
  if (!buttonRef.current || !isPopupOpen) {
82
81
  return;
@@ -93,7 +92,12 @@ export var EmojiPickerButton = function EmojiPickerButton(props) {
93
92
  ,
94
93
  zIndex: props.setDisableParentScroll ? 600 : undefined,
95
94
  focusTrap: true
96
- }, jsx(EmojiPickerWithProvider, null));
95
+ }, jsx(EmojiPickerWithListener, {
96
+ handleEscapeKeydown: handleEmojiPressEscape,
97
+ handleClickOutside: handleEmojiClickOutside,
98
+ pluginInjectionApi: props.pluginInjectionApi,
99
+ updateEmoji: updateEmoji
100
+ }));
97
101
  };
98
102
  var title = props.title || '';
99
103
  return jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-floating-toolbar",
3
- "version": "1.13.20",
3
+ "version": "1.13.21",
4
4
  "description": "Floating toolbar plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -26,9 +26,9 @@
26
26
  "@atlaskit/adf-utils": "^19.10.0",
27
27
  "@atlaskit/button": "^20.3.0",
28
28
  "@atlaskit/checkbox": "^15.1.0",
29
- "@atlaskit/editor-common": "^94.3.0",
30
- "@atlaskit/editor-palette": "1.6.2",
31
- "@atlaskit/editor-plugin-block-controls": "^2.10.0",
29
+ "@atlaskit/editor-common": "^94.5.0",
30
+ "@atlaskit/editor-palette": "1.6.3",
31
+ "@atlaskit/editor-plugin-block-controls": "^2.11.0",
32
32
  "@atlaskit/editor-plugin-context-panel": "^1.3.0",
33
33
  "@atlaskit/editor-plugin-copy-button": "^1.3.0",
34
34
  "@atlaskit/editor-plugin-decorations": "^1.3.0",