@atlaskit/editor-plugin-insert-block 23.0.4 → 23.0.6
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.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/insertBlockPlugin.js +6 -3
- package/dist/cjs/ui/ToolbarInsertBlock/index.js +1 -0
- package/dist/cjs/ui/toolbar-components/EmojiButton.js +5 -2
- package/dist/cjs/ui/toolbar-components/InsertButton.js +2 -0
- package/dist/cjs/ui/toolbar-components/popups/EmojiPickerPopup.js +4 -1
- package/dist/es2019/insertBlockPlugin.js +6 -3
- package/dist/es2019/ui/ToolbarInsertBlock/index.js +1 -0
- package/dist/es2019/ui/toolbar-components/EmojiButton.js +5 -2
- package/dist/es2019/ui/toolbar-components/InsertButton.js +2 -0
- package/dist/es2019/ui/toolbar-components/popups/EmojiPickerPopup.js +3 -0
- package/dist/esm/insertBlockPlugin.js +6 -3
- package/dist/esm/ui/ToolbarInsertBlock/index.js +1 -0
- package/dist/esm/ui/toolbar-components/EmojiButton.js +5 -2
- package/dist/esm/ui/toolbar-components/InsertButton.js +2 -0
- package/dist/esm/ui/toolbar-components/popups/EmojiPickerPopup.js +4 -1
- package/dist/types/types/index.d.ts +4 -2
- package/dist/types/ui/ToolbarInsertBlock/types.d.ts +1 -0
- package/dist/types/ui/toolbar-components/popups/EmojiPickerPopup.d.ts +2 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-insert-block
|
|
2
2
|
|
|
3
|
+
## 23.0.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 23.0.5
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`6a4ce5b236e6b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a4ce5b236e6b) -
|
|
14
|
+
[ux] Expose the emoji content identifier in shared state and pass it to toolbar emoji pickers so
|
|
15
|
+
Confluence comments can use AI emoji generation behind `confluence_ai_generated_emojis`.
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 23.0.4
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -217,7 +217,7 @@ var insertBlockPlugin = exports.insertBlockPlugin = function insertBlockPlugin(_
|
|
|
217
217
|
return plugin;
|
|
218
218
|
};
|
|
219
219
|
var selector = function selector(states) {
|
|
220
|
-
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
|
|
220
|
+
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
|
|
221
221
|
return {
|
|
222
222
|
showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
|
|
223
223
|
mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
|
|
@@ -231,7 +231,8 @@ var selector = function selector(states) {
|
|
|
231
231
|
imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
|
|
232
232
|
availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
|
|
233
233
|
canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
|
|
234
|
-
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
|
|
234
|
+
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
|
|
235
|
+
emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
|
|
235
236
|
};
|
|
236
237
|
};
|
|
237
238
|
function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
@@ -263,7 +264,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
|
263
264
|
imageUploadEnabled = _useSharedPluginState.imageUploadEnabled,
|
|
264
265
|
availableWrapperBlockTypes = _useSharedPluginState.availableWrapperBlockTypes,
|
|
265
266
|
canInsertLink = _useSharedPluginState.canInsertLink,
|
|
266
|
-
activeLinkMark = _useSharedPluginState.activeLinkMark
|
|
267
|
+
activeLinkMark = _useSharedPluginState.activeLinkMark,
|
|
268
|
+
emojiContentId = _useSharedPluginState.emojiContentId;
|
|
267
269
|
var emojiProvider = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(pluginInjectionApi, 'emoji.emojiProviderPromise');
|
|
268
270
|
var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
|
|
269
271
|
var _pluginInjectionApi$m, _pluginInjectionApi$c, _pluginInjectionApi$m2;
|
|
@@ -273,6 +275,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
|
273
275
|
pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
|
|
274
276
|
};
|
|
275
277
|
return /*#__PURE__*/_react.default.createElement(_ToolbarInsertBlock.default, {
|
|
278
|
+
emojiContentId: emojiContentId,
|
|
276
279
|
showElementBrowser: showElementBrowser || false,
|
|
277
280
|
pluginInjectionApi: pluginInjectionApi,
|
|
278
281
|
buttons: buttons,
|
|
@@ -601,6 +601,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
|
|
|
601
601
|
focusTrap: true,
|
|
602
602
|
zIndex: _editorSharedStyles.akEditorMenuZIndex
|
|
603
603
|
}, (0, _react2.jsx)(EmojiPickerWithListeners, {
|
|
604
|
+
contentId: this.props.emojiContentId,
|
|
604
605
|
emojiProvider: emojiProvider,
|
|
605
606
|
onSelection: this.handleSelectedEmoji,
|
|
606
607
|
handleClickOutside: this.handleEmojiClickOutside,
|
|
@@ -25,12 +25,14 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
|
|
|
25
25
|
popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
|
|
26
26
|
popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
|
|
27
27
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['emoji', 'typeAhead'], function (states) {
|
|
28
|
-
var _states$emojiState, _states$typeAheadStat;
|
|
28
|
+
var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
|
|
29
29
|
return {
|
|
30
|
-
|
|
30
|
+
contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
|
|
31
|
+
emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
|
|
31
32
|
isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
|
|
32
33
|
};
|
|
33
34
|
}),
|
|
35
|
+
contentId = _useSharedPluginState.contentId,
|
|
34
36
|
emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
|
|
35
37
|
isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
|
|
36
38
|
var emojiPickerPopup = (0, _useEmojiPickerPopup.useEmojiPickerPopup)({
|
|
@@ -41,6 +43,7 @@ var EmojiButton = exports.EmojiButton = function EmojiButton(_ref) {
|
|
|
41
43
|
return null;
|
|
42
44
|
}
|
|
43
45
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
|
|
46
|
+
contentId: contentId,
|
|
44
47
|
isOpen: emojiPickerPopup.isOpen,
|
|
45
48
|
targetRef: emojiButtonRef,
|
|
46
49
|
emojiProvider: emojiProviderPromise,
|
|
@@ -67,6 +67,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
|
|
|
67
67
|
buttonRef: insertButtonRef
|
|
68
68
|
});
|
|
69
69
|
var showMediaPicker = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'media.showMediaPicker');
|
|
70
|
+
var emojiContentId = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'emoji.contentId');
|
|
70
71
|
var _useInsertButtonState = (0, _useInsertButtonState2.useInsertButtonState)({
|
|
71
72
|
api: api,
|
|
72
73
|
breakpoint: breakpoint,
|
|
@@ -223,6 +224,7 @@ var InsertButton = exports.InsertButton = function InsertButton(_ref) {
|
|
|
223
224
|
pluginInjectionApi: api,
|
|
224
225
|
isFullPageAppearance: isFullPageAppearance
|
|
225
226
|
})), emojiProvider && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.EmojiPickerPopup, {
|
|
227
|
+
contentId: emojiContentId,
|
|
226
228
|
isOpen: emojiPickerPopup.isOpen,
|
|
227
229
|
targetRef: insertButtonRef,
|
|
228
230
|
emojiProvider: Promise.resolve(emojiProvider),
|
|
@@ -13,6 +13,7 @@ var _picker = require("@atlaskit/emoji/picker");
|
|
|
13
13
|
var EmojiPicker = function EmojiPicker(props) {
|
|
14
14
|
var setOutsideClickTargetRef = _react.default.useContext(_uiReact.OutsideClickTargetRefContext);
|
|
15
15
|
return /*#__PURE__*/_react.default.createElement(_picker.EmojiPicker, {
|
|
16
|
+
contentId: props.contentId,
|
|
16
17
|
onPickerRef: setOutsideClickTargetRef,
|
|
17
18
|
emojiProvider: props.emojiProvider,
|
|
18
19
|
onSelection: props.onSelection
|
|
@@ -20,7 +21,8 @@ var EmojiPicker = function EmojiPicker(props) {
|
|
|
20
21
|
};
|
|
21
22
|
var EmojiPickerWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(EmojiPicker);
|
|
22
23
|
var EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref) {
|
|
23
|
-
var
|
|
24
|
+
var contentId = _ref.contentId,
|
|
25
|
+
isOpen = _ref.isOpen,
|
|
24
26
|
targetRef = _ref.targetRef,
|
|
25
27
|
emojiProvider = _ref.emojiProvider,
|
|
26
28
|
onSelection = _ref.onSelection,
|
|
@@ -47,6 +49,7 @@ var EmojiPickerPopup = exports.EmojiPickerPopup = function EmojiPickerPopup(_ref
|
|
|
47
49
|
focusTrap: true,
|
|
48
50
|
zIndex: _editorSharedStyles.akEditorMenuZIndex
|
|
49
51
|
}, /*#__PURE__*/_react.default.createElement(EmojiPickerWithListeners, {
|
|
52
|
+
contentId: contentId,
|
|
50
53
|
emojiProvider: emojiProvider,
|
|
51
54
|
onSelection: onSelection,
|
|
52
55
|
handleClickOutside: onClickOutside,
|
|
@@ -199,7 +199,7 @@ export const insertBlockPlugin = ({
|
|
|
199
199
|
return plugin;
|
|
200
200
|
};
|
|
201
201
|
const selector = states => {
|
|
202
|
-
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
|
|
202
|
+
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
|
|
203
203
|
return {
|
|
204
204
|
showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
|
|
205
205
|
mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
|
|
@@ -213,7 +213,8 @@ const selector = states => {
|
|
|
213
213
|
imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
|
|
214
214
|
availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
|
|
215
215
|
canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
|
|
216
|
-
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
|
|
216
|
+
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
|
|
217
|
+
emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
|
|
217
218
|
};
|
|
218
219
|
};
|
|
219
220
|
function ToolbarInsertBlockWithInjectionApi({
|
|
@@ -246,7 +247,8 @@ function ToolbarInsertBlockWithInjectionApi({
|
|
|
246
247
|
imageUploadEnabled,
|
|
247
248
|
availableWrapperBlockTypes,
|
|
248
249
|
canInsertLink,
|
|
249
|
-
activeLinkMark
|
|
250
|
+
activeLinkMark,
|
|
251
|
+
emojiContentId
|
|
250
252
|
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['hyperlink', 'date', 'imageUpload', 'mention', 'emoji', 'blockType', 'media', 'typeAhead', 'placeholderText', 'insertBlock', 'connectivity'], selector);
|
|
251
253
|
const emojiProvider = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise');
|
|
252
254
|
const onShowMediaPicker = mountInfo => {
|
|
@@ -257,6 +259,7 @@ function ToolbarInsertBlockWithInjectionApi({
|
|
|
257
259
|
pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
|
|
258
260
|
};
|
|
259
261
|
return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
|
|
262
|
+
emojiContentId: emojiContentId,
|
|
260
263
|
showElementBrowser: showElementBrowser || false,
|
|
261
264
|
pluginInjectionApi: pluginInjectionApi,
|
|
262
265
|
buttons: buttons,
|
|
@@ -670,6 +670,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
|
|
|
670
670
|
focusTrap: true,
|
|
671
671
|
zIndex: akEditorMenuZIndex
|
|
672
672
|
}, jsx(EmojiPickerWithListeners, {
|
|
673
|
+
contentId: this.props.emojiContentId,
|
|
673
674
|
emojiProvider: emojiProvider,
|
|
674
675
|
onSelection: this.handleSelectedEmoji,
|
|
675
676
|
handleClickOutside: this.handleEmojiClickOutside,
|
|
@@ -20,12 +20,14 @@ export const EmojiButton = ({
|
|
|
20
20
|
popupsScrollableElement
|
|
21
21
|
} = useToolbarUI();
|
|
22
22
|
const {
|
|
23
|
+
contentId,
|
|
23
24
|
emojiProviderPromise,
|
|
24
25
|
isTypeAheadAllowed
|
|
25
26
|
} = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], states => {
|
|
26
|
-
var _states$emojiState, _states$typeAheadStat;
|
|
27
|
+
var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
|
|
27
28
|
return {
|
|
28
|
-
|
|
29
|
+
contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
|
|
30
|
+
emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
|
|
29
31
|
isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
|
|
30
32
|
};
|
|
31
33
|
});
|
|
@@ -37,6 +39,7 @@ export const EmojiButton = ({
|
|
|
37
39
|
return null;
|
|
38
40
|
}
|
|
39
41
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerPopup, {
|
|
42
|
+
contentId: contentId,
|
|
40
43
|
isOpen: emojiPickerPopup.isOpen,
|
|
41
44
|
targetRef: emojiButtonRef,
|
|
42
45
|
emojiProvider: emojiProviderPromise,
|
|
@@ -57,6 +57,7 @@ export const InsertButton = ({
|
|
|
57
57
|
buttonRef: insertButtonRef
|
|
58
58
|
});
|
|
59
59
|
const showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
|
|
60
|
+
const emojiContentId = useSharedPluginStateSelector(api, 'emoji.contentId');
|
|
60
61
|
const {
|
|
61
62
|
dropdownItems,
|
|
62
63
|
emojiProvider,
|
|
@@ -216,6 +217,7 @@ export const InsertButton = ({
|
|
|
216
217
|
pluginInjectionApi: api,
|
|
217
218
|
isFullPageAppearance: isFullPageAppearance
|
|
218
219
|
})), emojiProvider && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
|
|
220
|
+
contentId: emojiContentId,
|
|
219
221
|
isOpen: emojiPickerPopup.isOpen,
|
|
220
222
|
targetRef: insertButtonRef,
|
|
221
223
|
emojiProvider: Promise.resolve(emojiProvider),
|
|
@@ -6,6 +6,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
|
6
6
|
const EmojiPicker = props => {
|
|
7
7
|
const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
|
|
8
8
|
return /*#__PURE__*/React.createElement(AkEmojiPicker, {
|
|
9
|
+
contentId: props.contentId,
|
|
9
10
|
onPickerRef: setOutsideClickTargetRef,
|
|
10
11
|
emojiProvider: props.emojiProvider,
|
|
11
12
|
onSelection: props.onSelection
|
|
@@ -13,6 +14,7 @@ const EmojiPicker = props => {
|
|
|
13
14
|
};
|
|
14
15
|
const EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
|
|
15
16
|
export const EmojiPickerPopup = ({
|
|
17
|
+
contentId,
|
|
16
18
|
isOpen,
|
|
17
19
|
targetRef,
|
|
18
20
|
emojiProvider,
|
|
@@ -41,6 +43,7 @@ export const EmojiPickerPopup = ({
|
|
|
41
43
|
focusTrap: true,
|
|
42
44
|
zIndex: akEditorMenuZIndex
|
|
43
45
|
}, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
|
|
46
|
+
contentId: contentId,
|
|
44
47
|
emojiProvider: emojiProvider,
|
|
45
48
|
onSelection: onSelection,
|
|
46
49
|
handleClickOutside: onClickOutside,
|
|
@@ -207,7 +207,7 @@ export var insertBlockPlugin = function insertBlockPlugin(_ref) {
|
|
|
207
207
|
return plugin;
|
|
208
208
|
};
|
|
209
209
|
var selector = function selector(states) {
|
|
210
|
-
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2;
|
|
210
|
+
var _states$mediaState, _states$mediaState2, _states$insertBlockSt, _states$typeAheadStat, _states$mentionState, _states$mentionState2, _states$dateState, _states$placeholderTe, _states$connectivityS, _states$imageUploadSt, _states$blockTypeStat, _states$hyperlinkStat, _states$hyperlinkStat2, _states$emojiState;
|
|
211
211
|
return {
|
|
212
212
|
showMediaPicker: (_states$mediaState = states.mediaState) === null || _states$mediaState === void 0 ? void 0 : _states$mediaState.showMediaPicker,
|
|
213
213
|
mediaAllowsUploads: (_states$mediaState2 = states.mediaState) === null || _states$mediaState2 === void 0 ? void 0 : _states$mediaState2.allowsUploads,
|
|
@@ -221,7 +221,8 @@ var selector = function selector(states) {
|
|
|
221
221
|
imageUploadEnabled: (_states$imageUploadSt = states.imageUploadState) === null || _states$imageUploadSt === void 0 ? void 0 : _states$imageUploadSt.enabled,
|
|
222
222
|
availableWrapperBlockTypes: (_states$blockTypeStat = states.blockTypeState) === null || _states$blockTypeStat === void 0 ? void 0 : _states$blockTypeStat.availableWrapperBlockTypes,
|
|
223
223
|
canInsertLink: (_states$hyperlinkStat = states.hyperlinkState) === null || _states$hyperlinkStat === void 0 ? void 0 : _states$hyperlinkStat.canInsertLink,
|
|
224
|
-
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark
|
|
224
|
+
activeLinkMark: (_states$hyperlinkStat2 = states.hyperlinkState) === null || _states$hyperlinkStat2 === void 0 ? void 0 : _states$hyperlinkStat2.activeLinkMark,
|
|
225
|
+
emojiContentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId
|
|
225
226
|
};
|
|
226
227
|
};
|
|
227
228
|
function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
@@ -253,7 +254,8 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
|
253
254
|
imageUploadEnabled = _useSharedPluginState.imageUploadEnabled,
|
|
254
255
|
availableWrapperBlockTypes = _useSharedPluginState.availableWrapperBlockTypes,
|
|
255
256
|
canInsertLink = _useSharedPluginState.canInsertLink,
|
|
256
|
-
activeLinkMark = _useSharedPluginState.activeLinkMark
|
|
257
|
+
activeLinkMark = _useSharedPluginState.activeLinkMark,
|
|
258
|
+
emojiContentId = _useSharedPluginState.emojiContentId;
|
|
257
259
|
var emojiProvider = useSharedPluginStateSelector(pluginInjectionApi, 'emoji.emojiProviderPromise');
|
|
258
260
|
var onShowMediaPicker = function onShowMediaPicker(mountInfo) {
|
|
259
261
|
var _pluginInjectionApi$m, _pluginInjectionApi$c, _pluginInjectionApi$m2;
|
|
@@ -263,6 +265,7 @@ function ToolbarInsertBlockWithInjectionApi(_ref4) {
|
|
|
263
265
|
pluginInjectionApi !== null && pluginInjectionApi !== void 0 && (_pluginInjectionApi$m = pluginInjectionApi.mediaInsert) !== null && _pluginInjectionApi$m !== void 0 && _pluginInjectionApi$m.commands.showMediaInsertPopup ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c = pluginInjectionApi.core) === null || _pluginInjectionApi$c === void 0 ? void 0 : _pluginInjectionApi$c.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m2 = pluginInjectionApi.mediaInsert) === null || _pluginInjectionApi$m2 === void 0 ? void 0 : _pluginInjectionApi$m2.commands.showMediaInsertPopup(mountInfo)) : showMediaPicker();
|
|
264
266
|
};
|
|
265
267
|
return /*#__PURE__*/React.createElement(ToolbarInsertBlock, {
|
|
268
|
+
emojiContentId: emojiContentId,
|
|
266
269
|
showElementBrowser: showElementBrowser || false,
|
|
267
270
|
pluginInjectionApi: pluginInjectionApi,
|
|
268
271
|
buttons: buttons,
|
|
@@ -596,6 +596,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
596
596
|
focusTrap: true,
|
|
597
597
|
zIndex: akEditorMenuZIndex
|
|
598
598
|
}, jsx(EmojiPickerWithListeners, {
|
|
599
|
+
contentId: this.props.emojiContentId,
|
|
599
600
|
emojiProvider: emojiProvider,
|
|
600
601
|
onSelection: this.handleSelectedEmoji,
|
|
601
602
|
handleClickOutside: this.handleEmojiClickOutside,
|
|
@@ -17,12 +17,14 @@ export var EmojiButton = function EmojiButton(_ref) {
|
|
|
17
17
|
popupsBoundariesElement = _useToolbarUI.popupsBoundariesElement,
|
|
18
18
|
popupsScrollableElement = _useToolbarUI.popupsScrollableElement;
|
|
19
19
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['emoji', 'typeAhead'], function (states) {
|
|
20
|
-
var _states$emojiState, _states$typeAheadStat;
|
|
20
|
+
var _states$emojiState, _states$emojiState2, _states$typeAheadStat;
|
|
21
21
|
return {
|
|
22
|
-
|
|
22
|
+
contentId: (_states$emojiState = states.emojiState) === null || _states$emojiState === void 0 ? void 0 : _states$emojiState.contentId,
|
|
23
|
+
emojiProviderPromise: (_states$emojiState2 = states.emojiState) === null || _states$emojiState2 === void 0 ? void 0 : _states$emojiState2.emojiProviderPromise,
|
|
23
24
|
isTypeAheadAllowed: (_states$typeAheadStat = states.typeAheadState) === null || _states$typeAheadStat === void 0 ? void 0 : _states$typeAheadStat.isAllowed
|
|
24
25
|
};
|
|
25
26
|
}),
|
|
27
|
+
contentId = _useSharedPluginState.contentId,
|
|
26
28
|
emojiProviderPromise = _useSharedPluginState.emojiProviderPromise,
|
|
27
29
|
isTypeAheadAllowed = _useSharedPluginState.isTypeAheadAllowed;
|
|
28
30
|
var emojiPickerPopup = useEmojiPickerPopup({
|
|
@@ -33,6 +35,7 @@ export var EmojiButton = function EmojiButton(_ref) {
|
|
|
33
35
|
return null;
|
|
34
36
|
}
|
|
35
37
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EmojiPickerPopup, {
|
|
38
|
+
contentId: contentId,
|
|
36
39
|
isOpen: emojiPickerPopup.isOpen,
|
|
37
40
|
targetRef: emojiButtonRef,
|
|
38
41
|
emojiProvider: emojiProviderPromise,
|
|
@@ -59,6 +59,7 @@ export var InsertButton = function InsertButton(_ref) {
|
|
|
59
59
|
buttonRef: insertButtonRef
|
|
60
60
|
});
|
|
61
61
|
var showMediaPicker = useSharedPluginStateSelector(api, 'media.showMediaPicker');
|
|
62
|
+
var emojiContentId = useSharedPluginStateSelector(api, 'emoji.contentId');
|
|
62
63
|
var _useInsertButtonState = useInsertButtonState({
|
|
63
64
|
api: api,
|
|
64
65
|
breakpoint: breakpoint,
|
|
@@ -215,6 +216,7 @@ export var InsertButton = function InsertButton(_ref) {
|
|
|
215
216
|
pluginInjectionApi: api,
|
|
216
217
|
isFullPageAppearance: isFullPageAppearance
|
|
217
218
|
})), emojiProvider && /*#__PURE__*/React.createElement(EmojiPickerPopup, {
|
|
219
|
+
contentId: emojiContentId,
|
|
218
220
|
isOpen: emojiPickerPopup.isOpen,
|
|
219
221
|
targetRef: insertButtonRef,
|
|
220
222
|
emojiProvider: Promise.resolve(emojiProvider),
|
|
@@ -6,6 +6,7 @@ import { EmojiPicker as AkEmojiPicker } from '@atlaskit/emoji/picker';
|
|
|
6
6
|
var EmojiPicker = function EmojiPicker(props) {
|
|
7
7
|
var setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
|
|
8
8
|
return /*#__PURE__*/React.createElement(AkEmojiPicker, {
|
|
9
|
+
contentId: props.contentId,
|
|
9
10
|
onPickerRef: setOutsideClickTargetRef,
|
|
10
11
|
emojiProvider: props.emojiProvider,
|
|
11
12
|
onSelection: props.onSelection
|
|
@@ -13,7 +14,8 @@ var EmojiPicker = function EmojiPicker(props) {
|
|
|
13
14
|
};
|
|
14
15
|
var EmojiPickerWithListeners = withOuterListeners(EmojiPicker);
|
|
15
16
|
export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
|
|
16
|
-
var
|
|
17
|
+
var contentId = _ref.contentId,
|
|
18
|
+
isOpen = _ref.isOpen,
|
|
17
19
|
targetRef = _ref.targetRef,
|
|
18
20
|
emojiProvider = _ref.emojiProvider,
|
|
19
21
|
onSelection = _ref.onSelection,
|
|
@@ -40,6 +42,7 @@ export var EmojiPickerPopup = function EmojiPickerPopup(_ref) {
|
|
|
40
42
|
focusTrap: true,
|
|
41
43
|
zIndex: akEditorMenuZIndex
|
|
42
44
|
}, /*#__PURE__*/React.createElement(EmojiPickerWithListeners, {
|
|
45
|
+
contentId: contentId,
|
|
43
46
|
emojiProvider: emojiProvider,
|
|
44
47
|
onSelection: onSelection,
|
|
45
48
|
handleClickOutside: onClickOutside,
|
|
@@ -95,7 +95,8 @@ export interface InsertBlockPluginOptions {
|
|
|
95
95
|
* Configure which toolbar buttons should be visible
|
|
96
96
|
* @default undefined - shows all available buttons (current behaviour)
|
|
97
97
|
*
|
|
98
|
-
* Only
|
|
98
|
+
* Only respected when the editor configuration includes `toolbarPlugin` from
|
|
99
|
+
* `@atlaskit/editor-plugin-toolbar`.
|
|
99
100
|
*/
|
|
100
101
|
toolbarButtons?: ToolbarInsertBlockButtonsConfig;
|
|
101
102
|
/**
|
|
@@ -103,7 +104,8 @@ export interface InsertBlockPluginOptions {
|
|
|
103
104
|
* and only show the plus button
|
|
104
105
|
* @default undefined Shows the insert block buttons and the plus button
|
|
105
106
|
*
|
|
106
|
-
* Only
|
|
107
|
+
* Only respected when the editor configuration includes `toolbarPlugin` from
|
|
108
|
+
* `@atlaskit/editor-plugin-toolbar`.
|
|
107
109
|
*
|
|
108
110
|
* @warning Use {@link toolbarButtons} instead to configure the insert block toolbar buttons
|
|
109
111
|
* @see https://product-fabric.atlassian.net/browse/ED-29426
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { EmojiId, EmojiProvider } from '@atlaskit/emoji/types';
|
|
3
3
|
interface EmojiPickerPopupProps {
|
|
4
|
+
contentId?: string;
|
|
4
5
|
emojiProvider?: Promise<EmojiProvider>;
|
|
5
6
|
isOpen: boolean;
|
|
6
7
|
onClickOutside: (e: MouseEvent) => void;
|
|
@@ -12,5 +13,5 @@ interface EmojiPickerPopupProps {
|
|
|
12
13
|
popupsScrollableElement?: HTMLElement;
|
|
13
14
|
targetRef: React.RefObject<HTMLElement>;
|
|
14
15
|
}
|
|
15
|
-
export declare const EmojiPickerPopup: ({ isOpen, targetRef, emojiProvider, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: EmojiPickerPopupProps) => React.JSX.Element | null;
|
|
16
|
+
export declare const EmojiPickerPopup: ({ contentId, isOpen, targetRef, emojiProvider, onSelection, onClickOutside, onEscapeKeydown, onUnmount, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: EmojiPickerPopupProps) => React.JSX.Element | null;
|
|
16
17
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-insert-block",
|
|
3
|
-
"version": "23.0.
|
|
3
|
+
"version": "23.0.6",
|
|
4
4
|
"description": "Insert block plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@atlaskit/editor-plugin-code-block": "^24.0.0",
|
|
29
29
|
"@atlaskit/editor-plugin-connectivity": "^22.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-date": "^24.0.0",
|
|
31
|
-
"@atlaskit/editor-plugin-emoji": "^23.
|
|
31
|
+
"@atlaskit/editor-plugin-emoji": "^23.1.0",
|
|
32
32
|
"@atlaskit/editor-plugin-expand": "^23.0.0",
|
|
33
33
|
"@atlaskit/editor-plugin-extension": "^25.0.0",
|
|
34
34
|
"@atlaskit/editor-plugin-feature-flags": "^21.0.0",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/platform-feature-flags": "^2.2.0",
|
|
63
63
|
"@atlaskit/primitives": "^22.5.0",
|
|
64
64
|
"@atlaskit/textfield": "^10.2.0",
|
|
65
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
65
|
+
"@atlaskit/tmp-editor-statsig": "^215.0.0",
|
|
66
66
|
"@atlaskit/tokens": "^20.1.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|
|
68
68
|
"@emotion/react": "^11.7.1",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"react-virtualized": "^9.22.6"
|
|
73
73
|
},
|
|
74
74
|
"peerDependencies": {
|
|
75
|
-
"@atlaskit/editor-common": "^126.
|
|
75
|
+
"@atlaskit/editor-common": "^126.3.0",
|
|
76
76
|
"react": "^18.2.0 || ^19.2.0",
|
|
77
77
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
78
78
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|