@atlaskit/editor-plugin-emoji 2.9.0 → 2.9.2
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 +18 -0
- package/dist/cjs/emojiPlugin.js +32 -3
- package/dist/cjs/nodeviews/emojiNodeSpec.js +62 -0
- package/dist/es2019/emojiPlugin.js +26 -4
- package/dist/es2019/nodeviews/emojiNodeSpec.js +54 -0
- package/dist/esm/emojiPlugin.js +30 -4
- package/dist/esm/nodeviews/emojiNodeSpec.js +55 -0
- package/dist/types/nodeviews/emojiNodeSpec.d.ts +7 -0
- package/dist/types-ts4.5/nodeviews/emojiNodeSpec.d.ts +7 -0
- package/package.json +14 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-emoji
|
|
2
2
|
|
|
3
|
+
## 2.9.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#112186](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/112186)
|
|
8
|
+
[`9462d8ca2405a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9462d8ca2405a) -
|
|
9
|
+
Bump adf-schema to 47.2.1
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 2.9.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#113788](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113788)
|
|
17
|
+
[`532820b675878`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/532820b675878) -
|
|
18
|
+
ED-26212: Preloads the emoji picker to allow it to be used offline
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 2.9.0
|
|
4
22
|
|
|
5
23
|
### Minor Changes
|
package/dist/cjs/emojiPlugin.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
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
|
});
|
|
@@ -13,8 +14,7 @@ exports.setProviderTr = exports.setProvider = void 0;
|
|
|
13
14
|
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
|
14
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
16
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
16
|
-
var _react =
|
|
17
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
17
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
18
18
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
19
19
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
20
20
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
@@ -30,8 +30,11 @@ var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
|
|
|
30
30
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
31
31
|
var _insertEmoji = require("./editor-commands/insert-emoji");
|
|
32
32
|
var _emoji3 = require("./nodeviews/emoji");
|
|
33
|
+
var _emojiNodeSpec = require("./nodeviews/emojiNodeSpec");
|
|
33
34
|
var _actions = require("./pm-plugins/actions");
|
|
34
35
|
var _asciiInputRules = require("./pm-plugins/ascii-input-rules");
|
|
36
|
+
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); }
|
|
37
|
+
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; }
|
|
35
38
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
36
39
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
37
40
|
var emojiToTypeaheadItem = exports.emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
|
|
@@ -79,6 +82,23 @@ var isFullShortName = function isFullShortName(query) {
|
|
|
79
82
|
return query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
|
|
80
83
|
};
|
|
81
84
|
var TRIGGER = ':';
|
|
85
|
+
function delayUntilIdle(cb) {
|
|
86
|
+
if (typeof window === 'undefined') {
|
|
87
|
+
return;
|
|
88
|
+
}
|
|
89
|
+
// eslint-disable-next-line compat/compat
|
|
90
|
+
if (window.requestIdleCallback !== undefined) {
|
|
91
|
+
// eslint-disable-next-line compat/compat
|
|
92
|
+
return window.requestIdleCallback(function () {
|
|
93
|
+
return cb();
|
|
94
|
+
}, {
|
|
95
|
+
timeout: 500
|
|
96
|
+
});
|
|
97
|
+
}
|
|
98
|
+
return window.requestAnimationFrame(function () {
|
|
99
|
+
return cb();
|
|
100
|
+
});
|
|
101
|
+
}
|
|
82
102
|
|
|
83
103
|
/**
|
|
84
104
|
* Emoji plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
|
|
@@ -209,9 +229,18 @@ var emojiPlugin = exports.emojiPlugin = function emojiPlugin(_ref2) {
|
|
|
209
229
|
nodes: function nodes() {
|
|
210
230
|
return [{
|
|
211
231
|
name: 'emoji',
|
|
212
|
-
node:
|
|
232
|
+
node: (0, _emojiNodeSpec.emojiNodeSpec)()
|
|
213
233
|
}];
|
|
214
234
|
},
|
|
235
|
+
usePluginHook: function usePluginHook() {
|
|
236
|
+
(0, _react.useEffect)(function () {
|
|
237
|
+
delayUntilIdle(function () {
|
|
238
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_preload_emoji_picker')) {
|
|
239
|
+
(0, _emoji2.preloadEmojiPicker)();
|
|
240
|
+
}
|
|
241
|
+
});
|
|
242
|
+
}, []);
|
|
243
|
+
},
|
|
215
244
|
pmPlugins: function pmPlugins() {
|
|
216
245
|
return [{
|
|
217
246
|
name: 'emoji',
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.emojiNodeSpec = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
|
+
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
13
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
14
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
15
|
+
var isSSR = Boolean(process.env.REACT_SSR);
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Wrapper for ADF emoji node spec to augment toDOM implementation
|
|
19
|
+
* with fallback UI for lazy node view rendering / window virtualization
|
|
20
|
+
* @nodeSpecException:toDOM patch
|
|
21
|
+
* @returns
|
|
22
|
+
*/
|
|
23
|
+
var emojiNodeSpec = exports.emojiNodeSpec = function emojiNodeSpec() {
|
|
24
|
+
if (isSSR || !(0, _platformFeatureFlags.fg)('platform_editor_lego__inline_node_virtualization')) {
|
|
25
|
+
return _adfSchema.emoji;
|
|
26
|
+
}
|
|
27
|
+
return _objectSpread(_objectSpread({}, _adfSchema.emoji), {}, {
|
|
28
|
+
toDOM: function toDOM(node) {
|
|
29
|
+
// From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
|
|
30
|
+
var _node$attrs = node.attrs,
|
|
31
|
+
shortName = _node$attrs.shortName,
|
|
32
|
+
id = _node$attrs.id,
|
|
33
|
+
text = _node$attrs.text;
|
|
34
|
+
var attrs = {
|
|
35
|
+
'data-emoji-short-name': shortName,
|
|
36
|
+
'data-emoji-id': id,
|
|
37
|
+
'data-emoji-text': text,
|
|
38
|
+
contenteditable: 'false',
|
|
39
|
+
style: (0, _lazyNodeView.convertToInlineCss)({
|
|
40
|
+
content: "''",
|
|
41
|
+
fill: 'f7f7f7',
|
|
42
|
+
minWidth: "20px",
|
|
43
|
+
width: "20px",
|
|
44
|
+
height: "20px",
|
|
45
|
+
position: 'relative',
|
|
46
|
+
margin: '-1px 0',
|
|
47
|
+
display: 'inline-block',
|
|
48
|
+
background: "var(--ds-background-neutral, ".concat(_colors.N20A, ")"),
|
|
49
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
verticalAlign: 'middle',
|
|
52
|
+
whiteSpace: 'nowrap',
|
|
53
|
+
textAlign: 'center'
|
|
54
|
+
}),
|
|
55
|
+
'aria-busy': 'true',
|
|
56
|
+
'aria-label': shortName,
|
|
57
|
+
class: 'emoji-common-placeholder'
|
|
58
|
+
};
|
|
59
|
+
return ['span', attrs];
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
};
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { emoji } from '@atlaskit/adf-schema';
|
|
1
|
+
import React, { useEffect } from 'react';
|
|
3
2
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
4
3
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
5
4
|
import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
@@ -10,11 +9,12 @@ import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
|
10
9
|
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
|
|
11
10
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
12
11
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
13
|
-
import { EmojiTypeAheadItem, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
|
|
12
|
+
import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
|
|
14
13
|
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
15
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
15
|
import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
|
|
17
16
|
import { EmojiNodeView } from './nodeviews/emoji';
|
|
17
|
+
import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
|
|
18
18
|
import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setProvider as setProviderAction } from './pm-plugins/actions';
|
|
19
19
|
import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
|
|
20
20
|
export const emojiToTypeaheadItem = (emoji, emojiProvider) => ({
|
|
@@ -59,6 +59,19 @@ const memoizedToItem = memoize(emojiToTypeaheadItem);
|
|
|
59
59
|
export const defaultListLimit = 50;
|
|
60
60
|
const isFullShortName = query => query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
|
|
61
61
|
const TRIGGER = ':';
|
|
62
|
+
function delayUntilIdle(cb) {
|
|
63
|
+
if (typeof window === 'undefined') {
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
// eslint-disable-next-line compat/compat
|
|
67
|
+
if (window.requestIdleCallback !== undefined) {
|
|
68
|
+
// eslint-disable-next-line compat/compat
|
|
69
|
+
return window.requestIdleCallback(() => cb(), {
|
|
70
|
+
timeout: 500
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
return window.requestAnimationFrame(() => cb());
|
|
74
|
+
}
|
|
62
75
|
|
|
63
76
|
/**
|
|
64
77
|
* Emoji plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
|
|
@@ -197,9 +210,18 @@ export const emojiPlugin = ({
|
|
|
197
210
|
nodes() {
|
|
198
211
|
return [{
|
|
199
212
|
name: 'emoji',
|
|
200
|
-
node:
|
|
213
|
+
node: emojiNodeSpec()
|
|
201
214
|
}];
|
|
202
215
|
},
|
|
216
|
+
usePluginHook() {
|
|
217
|
+
useEffect(() => {
|
|
218
|
+
delayUntilIdle(() => {
|
|
219
|
+
if (fg('platform_editor_preload_emoji_picker')) {
|
|
220
|
+
preloadEmojiPicker();
|
|
221
|
+
}
|
|
222
|
+
});
|
|
223
|
+
}, []);
|
|
224
|
+
},
|
|
203
225
|
pmPlugins() {
|
|
204
226
|
return [{
|
|
205
227
|
name: 'emoji',
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { emoji } from '@atlaskit/adf-schema';
|
|
2
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
+
import { N20A } from '@atlaskit/theme/colors';
|
|
5
|
+
const isSSR = Boolean(process.env.REACT_SSR);
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Wrapper for ADF emoji node spec to augment toDOM implementation
|
|
9
|
+
* with fallback UI for lazy node view rendering / window virtualization
|
|
10
|
+
* @nodeSpecException:toDOM patch
|
|
11
|
+
* @returns
|
|
12
|
+
*/
|
|
13
|
+
export const emojiNodeSpec = () => {
|
|
14
|
+
if (isSSR || !fg('platform_editor_lego__inline_node_virtualization')) {
|
|
15
|
+
return emoji;
|
|
16
|
+
}
|
|
17
|
+
return {
|
|
18
|
+
...emoji,
|
|
19
|
+
toDOM: node => {
|
|
20
|
+
// From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
|
|
21
|
+
const {
|
|
22
|
+
shortName,
|
|
23
|
+
id,
|
|
24
|
+
text
|
|
25
|
+
} = node.attrs;
|
|
26
|
+
const attrs = {
|
|
27
|
+
'data-emoji-short-name': shortName,
|
|
28
|
+
'data-emoji-id': id,
|
|
29
|
+
'data-emoji-text': text,
|
|
30
|
+
contenteditable: 'false',
|
|
31
|
+
style: convertToInlineCss({
|
|
32
|
+
content: "''",
|
|
33
|
+
fill: 'f7f7f7',
|
|
34
|
+
minWidth: `20px`,
|
|
35
|
+
width: `20px`,
|
|
36
|
+
height: `20px`,
|
|
37
|
+
position: 'relative',
|
|
38
|
+
margin: '-1px 0',
|
|
39
|
+
display: 'inline-block',
|
|
40
|
+
background: `var(--ds-background-neutral, ${N20A})`,
|
|
41
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
42
|
+
overflow: 'hidden',
|
|
43
|
+
verticalAlign: 'middle',
|
|
44
|
+
whiteSpace: 'nowrap',
|
|
45
|
+
textAlign: 'center'
|
|
46
|
+
}),
|
|
47
|
+
'aria-busy': 'true',
|
|
48
|
+
'aria-label': shortName,
|
|
49
|
+
class: 'emoji-common-placeholder'
|
|
50
|
+
};
|
|
51
|
+
return ['span', attrs];
|
|
52
|
+
}
|
|
53
|
+
};
|
|
54
|
+
};
|
package/dist/esm/emojiPlugin.js
CHANGED
|
@@ -3,8 +3,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
|
3
3
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
4
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
5
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { emoji } from '@atlaskit/adf-schema';
|
|
6
|
+
import React, { useEffect } from 'react';
|
|
8
7
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
9
8
|
import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
|
|
10
9
|
import { annotationMessages, toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
@@ -15,11 +14,12 @@ import { TypeAheadAvailableNodes } from '@atlaskit/editor-common/type-ahead';
|
|
|
15
14
|
import { calculateToolbarPositionAboveSelection } from '@atlaskit/editor-common/utils';
|
|
16
15
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
17
16
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
18
|
-
import { EmojiTypeAheadItem, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
|
|
17
|
+
import { EmojiTypeAheadItem, preloadEmojiPicker, recordSelectionFailedSli, recordSelectionSucceededSli, SearchSort } from '@atlaskit/emoji';
|
|
19
18
|
import CommentIcon from '@atlaskit/icon/core/comment';
|
|
20
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
21
20
|
import { createEmojiFragment, insertEmoji } from './editor-commands/insert-emoji';
|
|
22
21
|
import { EmojiNodeView } from './nodeviews/emoji';
|
|
22
|
+
import { emojiNodeSpec } from './nodeviews/emojiNodeSpec';
|
|
23
23
|
import { ACTIONS, openTypeAhead as openTypeAheadAction, setAsciiMap as setAsciiMapAction, setProvider as setProviderAction } from './pm-plugins/actions';
|
|
24
24
|
import { inputRulePlugin as asciiInputRulePlugin } from './pm-plugins/ascii-input-rules';
|
|
25
25
|
export var emojiToTypeaheadItem = function emojiToTypeaheadItem(emoji, emojiProvider) {
|
|
@@ -67,6 +67,23 @@ var isFullShortName = function isFullShortName(query) {
|
|
|
67
67
|
return query && query.length > 1 && query.charAt(0) === ':' && query.charAt(query.length - 1) === ':';
|
|
68
68
|
};
|
|
69
69
|
var TRIGGER = ':';
|
|
70
|
+
function delayUntilIdle(cb) {
|
|
71
|
+
if (typeof window === 'undefined') {
|
|
72
|
+
return;
|
|
73
|
+
}
|
|
74
|
+
// eslint-disable-next-line compat/compat
|
|
75
|
+
if (window.requestIdleCallback !== undefined) {
|
|
76
|
+
// eslint-disable-next-line compat/compat
|
|
77
|
+
return window.requestIdleCallback(function () {
|
|
78
|
+
return cb();
|
|
79
|
+
}, {
|
|
80
|
+
timeout: 500
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
return window.requestAnimationFrame(function () {
|
|
84
|
+
return cb();
|
|
85
|
+
});
|
|
86
|
+
}
|
|
70
87
|
|
|
71
88
|
/**
|
|
72
89
|
* Emoji plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
|
|
@@ -197,9 +214,18 @@ export var emojiPlugin = function emojiPlugin(_ref2) {
|
|
|
197
214
|
nodes: function nodes() {
|
|
198
215
|
return [{
|
|
199
216
|
name: 'emoji',
|
|
200
|
-
node:
|
|
217
|
+
node: emojiNodeSpec()
|
|
201
218
|
}];
|
|
202
219
|
},
|
|
220
|
+
usePluginHook: function usePluginHook() {
|
|
221
|
+
useEffect(function () {
|
|
222
|
+
delayUntilIdle(function () {
|
|
223
|
+
if (fg('platform_editor_preload_emoji_picker')) {
|
|
224
|
+
preloadEmojiPicker();
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
}, []);
|
|
228
|
+
},
|
|
203
229
|
pmPlugins: function pmPlugins() {
|
|
204
230
|
return [{
|
|
205
231
|
name: 'emoji',
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
+
import { emoji } from '@atlaskit/adf-schema';
|
|
5
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { N20A } from '@atlaskit/theme/colors';
|
|
8
|
+
var isSSR = Boolean(process.env.REACT_SSR);
|
|
9
|
+
|
|
10
|
+
/**
|
|
11
|
+
* Wrapper for ADF emoji node spec to augment toDOM implementation
|
|
12
|
+
* with fallback UI for lazy node view rendering / window virtualization
|
|
13
|
+
* @nodeSpecException:toDOM patch
|
|
14
|
+
* @returns
|
|
15
|
+
*/
|
|
16
|
+
export var emojiNodeSpec = function emojiNodeSpec() {
|
|
17
|
+
if (isSSR || !fg('platform_editor_lego__inline_node_virtualization')) {
|
|
18
|
+
return emoji;
|
|
19
|
+
}
|
|
20
|
+
return _objectSpread(_objectSpread({}, emoji), {}, {
|
|
21
|
+
toDOM: function toDOM(node) {
|
|
22
|
+
// From packages/elements/emoji/src/components/common/EmojiPlaceholder.tsx
|
|
23
|
+
var _node$attrs = node.attrs,
|
|
24
|
+
shortName = _node$attrs.shortName,
|
|
25
|
+
id = _node$attrs.id,
|
|
26
|
+
text = _node$attrs.text;
|
|
27
|
+
var attrs = {
|
|
28
|
+
'data-emoji-short-name': shortName,
|
|
29
|
+
'data-emoji-id': id,
|
|
30
|
+
'data-emoji-text': text,
|
|
31
|
+
contenteditable: 'false',
|
|
32
|
+
style: convertToInlineCss({
|
|
33
|
+
content: "''",
|
|
34
|
+
fill: 'f7f7f7',
|
|
35
|
+
minWidth: "20px",
|
|
36
|
+
width: "20px",
|
|
37
|
+
height: "20px",
|
|
38
|
+
position: 'relative',
|
|
39
|
+
margin: '-1px 0',
|
|
40
|
+
display: 'inline-block',
|
|
41
|
+
background: "var(--ds-background-neutral, ".concat(N20A, ")"),
|
|
42
|
+
borderRadius: "var(--ds-border-radius-100, 3px)",
|
|
43
|
+
overflow: 'hidden',
|
|
44
|
+
verticalAlign: 'middle',
|
|
45
|
+
whiteSpace: 'nowrap',
|
|
46
|
+
textAlign: 'center'
|
|
47
|
+
}),
|
|
48
|
+
'aria-busy': 'true',
|
|
49
|
+
'aria-label': shortName,
|
|
50
|
+
class: 'emoji-common-placeholder'
|
|
51
|
+
};
|
|
52
|
+
return ['span', attrs];
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Wrapper for ADF emoji node spec to augment toDOM implementation
|
|
3
|
+
* with fallback UI for lazy node view rendering / window virtualization
|
|
4
|
+
* @nodeSpecException:toDOM patch
|
|
5
|
+
* @returns
|
|
6
|
+
*/
|
|
7
|
+
export declare const emojiNodeSpec: () => import("prosemirror-model").NodeSpec;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Wrapper for ADF emoji node spec to augment toDOM implementation
|
|
3
|
+
* with fallback UI for lazy node view rendering / window virtualization
|
|
4
|
+
* @nodeSpecException:toDOM patch
|
|
5
|
+
* @returns
|
|
6
|
+
*/
|
|
7
|
+
export declare const emojiNodeSpec: () => import("prosemirror-model").NodeSpec;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-emoji",
|
|
3
|
-
"version": "2.9.
|
|
3
|
+
"version": "2.9.2",
|
|
4
4
|
"description": "Emoji plugin for @atlaskit/editor-core",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -20,19 +20,21 @@
|
|
|
20
20
|
"runReact18": true
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@atlaskit/adf-schema": "^
|
|
24
|
-
"@atlaskit/editor-common": "^99.
|
|
23
|
+
"@atlaskit/adf-schema": "^47.2.1",
|
|
24
|
+
"@atlaskit/editor-common": "^99.14.0",
|
|
25
25
|
"@atlaskit/editor-plugin-analytics": "^1.12.0",
|
|
26
|
-
"@atlaskit/editor-plugin-annotation": "1.28.
|
|
26
|
+
"@atlaskit/editor-plugin-annotation": "1.28.1",
|
|
27
27
|
"@atlaskit/editor-plugin-base": "^2.2.0",
|
|
28
28
|
"@atlaskit/editor-plugin-editor-viewmode": "^2.2.0",
|
|
29
29
|
"@atlaskit/editor-plugin-type-ahead": "^1.13.0",
|
|
30
30
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
31
|
-
"@atlaskit/emoji": "^67.
|
|
32
|
-
"@atlaskit/icon": "^23.
|
|
31
|
+
"@atlaskit/emoji": "^67.14.0",
|
|
32
|
+
"@atlaskit/icon": "^23.9.0",
|
|
33
33
|
"@atlaskit/node-data-provider": "^3.1.0",
|
|
34
34
|
"@atlaskit/platform-feature-flags": "^1.0.0",
|
|
35
35
|
"@atlaskit/prosemirror-input-rules": "^3.3.0",
|
|
36
|
+
"@atlaskit/theme": "^15.0.0",
|
|
37
|
+
"@atlaskit/tokens": "^3.2.0",
|
|
36
38
|
"@babel/runtime": "^7.0.0",
|
|
37
39
|
"@emotion/react": "^11.7.1",
|
|
38
40
|
"react-intl-next": "npm:react-intl@^5.18.1",
|
|
@@ -106,6 +108,12 @@
|
|
|
106
108
|
},
|
|
107
109
|
"platform_inline_node_as_valid_annotation_selection": {
|
|
108
110
|
"type": "boolean"
|
|
111
|
+
},
|
|
112
|
+
"platform_editor_lego__inline_node_virtualization": {
|
|
113
|
+
"type": "boolean"
|
|
114
|
+
},
|
|
115
|
+
"platform_editor_preload_emoji_picker": {
|
|
116
|
+
"type": "boolean"
|
|
109
117
|
}
|
|
110
118
|
}
|
|
111
119
|
}
|