@atlaskit/editor-plugin-emoji 7.0.0 → 7.1.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 (7) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/pm-plugins/providers/EmojiNodeDataProvider.js +47 -6
  3. package/dist/es2019/pm-plugins/providers/EmojiNodeDataProvider.js +48 -5
  4. package/dist/esm/pm-plugins/providers/EmojiNodeDataProvider.js +47 -6
  5. package/dist/types/pm-plugins/providers/EmojiNodeDataProvider.d.ts +2 -1
  6. package/dist/types-ts4.5/pm-plugins/providers/EmojiNodeDataProvider.d.ts +2 -1
  7. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 7.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`f3b7f40b214f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f3b7f40b214f3) -
8
+ [https://product-fabric.atlassian.net/browse/ED-29414](ED-29414) - add optimistic emoji SSR
9
+ loading supporting
10
+
3
11
  ## 7.0.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -13,6 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
13
13
  var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
14
14
  var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
15
15
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
16
+ var _emoji = require("@atlaskit/emoji");
16
17
  var _nodeDataProvider = require("@atlaskit/node-data-provider");
17
18
  function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
18
19
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -22,6 +23,7 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
22
23
  (0, _classCallCheck2.default)(this, EmojiNodeDataProvider);
23
24
  _this = _callSuper(this, EmojiNodeDataProvider);
24
25
  (0, _defineProperty2.default)(_this, "name", 'emojiNodeDataProvider');
26
+ _this.emojiResource = resource;
25
27
  _this.emojiProvider = resource.getEmojiProvider();
26
28
  return _this;
27
29
  }
@@ -41,23 +43,62 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
41
43
  key: "fetchNodesData",
42
44
  value: function () {
43
45
  var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(nodes) {
44
- var emojiProvider, fetches;
46
+ var _this$emojiResource$e;
47
+ var getOptimisticImageUrl, emojiProvider, fetches;
45
48
  return _regenerator.default.wrap(function _callee$(_context) {
46
49
  while (1) switch (_context.prev = _context.next) {
47
50
  case 0:
48
- _context.next = 2;
51
+ // If we have an `optimisticImageApi`, use it to generate a URL immediately.
52
+ // This is how emojis are server-side rendered in Confluence.
53
+ // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
54
+ //
55
+ // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
56
+ // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
57
+ getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
58
+ if (!getOptimisticImageUrl) {
59
+ _context.next = 3;
60
+ break;
61
+ }
62
+ return _context.abrupt("return", nodes.map(function (node) {
63
+ var emojiId = {
64
+ id: node.attrs.id,
65
+ shortName: node.attrs.shortName,
66
+ fallback: node.attrs.text
67
+ };
68
+ var optimisticImageURL = getOptimisticImageUrl(emojiId);
69
+ return {
70
+ id: node.attrs.id,
71
+ shortName: node.attrs.shortName,
72
+ fallback: node.attrs.text,
73
+ representation: {
74
+ height: _emoji.defaultEmojiHeight,
75
+ width: _emoji.defaultEmojiHeight,
76
+ imagePath: optimisticImageURL
77
+ },
78
+ searchable: true,
79
+ // Type and category are unknown at this point.
80
+ // It's not a big deal, because EmojiNodeView doesn't use them.
81
+ type: '',
82
+ category: ''
83
+ };
84
+ }));
85
+ case 3:
86
+ _context.next = 5;
49
87
  return this.emojiProvider;
50
- case 2:
88
+ case 5:
51
89
  emojiProvider = _context.sent;
52
90
  fetches = nodes.map(function (node) {
53
- return emojiProvider.fetchByEmojiId({
91
+ var emojiId = {
54
92
  id: node.attrs.id,
55
93
  shortName: node.attrs.shortName,
56
94
  fallback: node.attrs.text
57
- }, true);
95
+ };
96
+
97
+ // This usually fast because the emojiProvider already has all emojis fetched.
98
+ return emojiProvider.fetchByEmojiId(emojiId, true);
58
99
  });
59
100
  return _context.abrupt("return", Promise.all(fetches));
60
- case 5:
101
+ case 8:
61
102
  case "end":
62
103
  return _context.stop();
63
104
  }
package/dist/es2019/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { defaultEmojiHeight } from '@atlaskit/emoji';
2
3
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
3
4
  export class EmojiNodeDataProvider extends NodeDataProvider {
4
5
  constructor(resource) {
5
6
  super();
6
7
  _defineProperty(this, "name", 'emojiNodeDataProvider');
8
+ this.emojiResource = resource;
7
9
  this.emojiProvider = resource.getEmojiProvider();
8
10
  }
9
11
  isNodeSupported(node) {
@@ -14,12 +16,53 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
14
16
  return (_node$attrs$id = node.attrs.id) !== null && _node$attrs$id !== void 0 ? _node$attrs$id : node.attrs.shortName;
15
17
  }
16
18
  async fetchNodesData(nodes) {
19
+ var _this$emojiResource$e;
20
+ // If we have an `optimisticImageApi`, use it to generate a URL immediately.
21
+ // This is how emojis are server-side rendered in Confluence.
22
+ // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
23
+ //
24
+ // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
25
+ // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
26
+ const getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
27
+ if (getOptimisticImageUrl) {
28
+ return nodes.map(node => {
29
+ const emojiId = {
30
+ id: node.attrs.id,
31
+ shortName: node.attrs.shortName,
32
+ fallback: node.attrs.text
33
+ };
34
+ const optimisticImageURL = getOptimisticImageUrl(emojiId);
35
+ return {
36
+ id: node.attrs.id,
37
+ shortName: node.attrs.shortName,
38
+ fallback: node.attrs.text,
39
+ representation: {
40
+ height: defaultEmojiHeight,
41
+ width: defaultEmojiHeight,
42
+ imagePath: optimisticImageURL
43
+ },
44
+ searchable: true,
45
+ // Type and category are unknown at this point.
46
+ // It's not a big deal, because EmojiNodeView doesn't use them.
47
+ type: '',
48
+ category: ''
49
+ };
50
+ });
51
+ }
52
+
53
+ // This is slower path because during access to emojiProvider emojiResource
54
+ // makes a request to fetch all emojis.
17
55
  const emojiProvider = await this.emojiProvider;
18
- const fetches = nodes.map(node => emojiProvider.fetchByEmojiId({
19
- id: node.attrs.id,
20
- shortName: node.attrs.shortName,
21
- fallback: node.attrs.text
22
- }, true));
56
+ const fetches = nodes.map(node => {
57
+ const emojiId = {
58
+ id: node.attrs.id,
59
+ shortName: node.attrs.shortName,
60
+ fallback: node.attrs.text
61
+ };
62
+
63
+ // This usually fast because the emojiProvider already has all emojis fetched.
64
+ return emojiProvider.fetchByEmojiId(emojiId, true);
65
+ });
23
66
  return Promise.all(fetches);
24
67
  }
25
68
  }
package/dist/esm/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -8,6 +8,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
8
  import _regeneratorRuntime from "@babel/runtime/regenerator";
9
9
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
10
10
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
11
+ import { defaultEmojiHeight } from '@atlaskit/emoji';
11
12
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
12
13
  export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
13
14
  function EmojiNodeDataProvider(resource) {
@@ -15,6 +16,7 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
15
16
  _classCallCheck(this, EmojiNodeDataProvider);
16
17
  _this = _callSuper(this, EmojiNodeDataProvider);
17
18
  _defineProperty(_this, "name", 'emojiNodeDataProvider');
19
+ _this.emojiResource = resource;
18
20
  _this.emojiProvider = resource.getEmojiProvider();
19
21
  return _this;
20
22
  }
@@ -34,23 +36,62 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
34
36
  key: "fetchNodesData",
35
37
  value: function () {
36
38
  var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes) {
37
- var emojiProvider, fetches;
39
+ var _this$emojiResource$e;
40
+ var getOptimisticImageUrl, emojiProvider, fetches;
38
41
  return _regeneratorRuntime.wrap(function _callee$(_context) {
39
42
  while (1) switch (_context.prev = _context.next) {
40
43
  case 0:
41
- _context.next = 2;
44
+ // If we have an `optimisticImageApi`, use it to generate a URL immediately.
45
+ // This is how emojis are server-side rendered in Confluence.
46
+ // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
47
+ //
48
+ // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
49
+ // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
50
+ getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
51
+ if (!getOptimisticImageUrl) {
52
+ _context.next = 3;
53
+ break;
54
+ }
55
+ return _context.abrupt("return", nodes.map(function (node) {
56
+ var emojiId = {
57
+ id: node.attrs.id,
58
+ shortName: node.attrs.shortName,
59
+ fallback: node.attrs.text
60
+ };
61
+ var optimisticImageURL = getOptimisticImageUrl(emojiId);
62
+ return {
63
+ id: node.attrs.id,
64
+ shortName: node.attrs.shortName,
65
+ fallback: node.attrs.text,
66
+ representation: {
67
+ height: defaultEmojiHeight,
68
+ width: defaultEmojiHeight,
69
+ imagePath: optimisticImageURL
70
+ },
71
+ searchable: true,
72
+ // Type and category are unknown at this point.
73
+ // It's not a big deal, because EmojiNodeView doesn't use them.
74
+ type: '',
75
+ category: ''
76
+ };
77
+ }));
78
+ case 3:
79
+ _context.next = 5;
42
80
  return this.emojiProvider;
43
- case 2:
81
+ case 5:
44
82
  emojiProvider = _context.sent;
45
83
  fetches = nodes.map(function (node) {
46
- return emojiProvider.fetchByEmojiId({
84
+ var emojiId = {
47
85
  id: node.attrs.id,
48
86
  shortName: node.attrs.shortName,
49
87
  fallback: node.attrs.text
50
- }, true);
88
+ };
89
+
90
+ // This usually fast because the emojiProvider already has all emojis fetched.
91
+ return emojiProvider.fetchByEmojiId(emojiId, true);
51
92
  });
52
93
  return _context.abrupt("return", Promise.all(fetches));
53
- case 5:
94
+ case 8:
54
95
  case "end":
55
96
  return _context.stop();
56
97
  }
package/dist/types/pm-plugins/providers/EmojiNodeDataProvider.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type { EmojiDefinition } from '@atlaskit/adf-schema';
2
2
  import type { JSONNode } from '@atlaskit/editor-json-transformer';
3
- import type { EmojiResource, OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
3
+ import { type EmojiResource, type OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
4
4
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
5
5
  export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
6
6
  name: "emojiNodeDataProvider";
7
+ private readonly emojiResource;
7
8
  private readonly emojiProvider;
8
9
  constructor(resource: EmojiResource);
9
10
  isNodeSupported(node: JSONNode): node is EmojiDefinition;
package/dist/types-ts4.5/pm-plugins/providers/EmojiNodeDataProvider.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import type { EmojiDefinition } from '@atlaskit/adf-schema';
2
2
  import type { JSONNode } from '@atlaskit/editor-json-transformer';
3
- import type { EmojiResource, OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
3
+ import { type EmojiResource, type OptionalEmojiDescriptionWithVariations } from '@atlaskit/emoji';
4
4
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
5
5
  export declare class EmojiNodeDataProvider extends NodeDataProvider<EmojiDefinition, OptionalEmojiDescriptionWithVariations> {
6
6
  name: "emojiNodeDataProvider";
7
+ private readonly emojiResource;
7
8
  private readonly emojiProvider;
8
9
  constructor(resource: EmojiResource);
9
10
  isNodeSupported(node: JSONNode): node is EmojiDefinition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "7.0.0",
3
+ "version": "7.1.0",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -27,7 +27,7 @@
27
27
  "@atlaskit/editor-plugin-base": "^7.0.0",
28
28
  "@atlaskit/editor-plugin-editor-viewmode": "^8.0.0",
29
29
  "@atlaskit/editor-plugin-metrics": "^7.0.0",
30
- "@atlaskit/editor-plugin-type-ahead": "^6.0.0",
30
+ "@atlaskit/editor-plugin-type-ahead": "^6.1.0",
31
31
  "@atlaskit/editor-prosemirror": "7.0.0",
32
32
  "@atlaskit/editor-shared-styles": "^3.6.0",
33
33
  "@atlaskit/emoji": "^69.5.0",
@@ -36,8 +36,8 @@
36
36
  "@atlaskit/platform-feature-flags": "^1.1.0",
37
37
  "@atlaskit/prosemirror-input-rules": "^3.4.0",
38
38
  "@atlaskit/theme": "^21.0.0",
39
- "@atlaskit/tmp-editor-statsig": "^12.31.0",
40
- "@atlaskit/tokens": "^6.3.0",
39
+ "@atlaskit/tmp-editor-statsig": "^12.32.0",
40
+ "@atlaskit/tokens": "^6.4.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@emotion/react": "^11.7.1",
43
43
  "lodash": "^4.17.21",
@@ -45,14 +45,14 @@
45
45
  "react-loadable": "^5.1.0"
46
46
  },
47
47
  "peerDependencies": {
48
- "@atlaskit/editor-common": "^110.0.0",
48
+ "@atlaskit/editor-common": "^110.2.0",
49
49
  "react": "^18.2.0",
50
50
  "react-dom": "^18.2.0"
51
51
  },
52
52
  "devDependencies": {
53
53
  "@af/visual-regression": "workspace:^",
54
54
  "@atlaskit/editor-plugin-composition": "^5.0.0",
55
- "@atlaskit/editor-plugin-decorations": "^6.0.0",
55
+ "@atlaskit/editor-plugin-decorations": "^6.1.0",
56
56
  "@atlaskit/ssr": "workspace:^",
57
57
  "@testing-library/react": "^13.4.0",
58
58
  "wait-for-expect": "^1.2.0"