@atlaskit/editor-plugin-emoji 7.1.2 → 7.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/pm-plugins/providers/EmojiNodeDataProvider.js +57 -20
  3. package/dist/es2019/pm-plugins/providers/EmojiNodeDataProvider.js +22 -3
  4. package/dist/esm/pm-plugins/providers/EmojiNodeDataProvider.js +57 -20
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-emoji
2
2
 
3
+ ## 7.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`3a08cc16abe76`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a08cc16abe76) -
8
+ [https://product-fabric.atlassian.net/browse/ED-29521](ED-29521) - use optimistic image URL for
9
+ emojis in editor (client support)
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 7.1.2
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -13,8 +13,11 @@ 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 _coreUtils = require("@atlaskit/editor-common/core-utils");
16
17
  var _emoji = require("@atlaskit/emoji");
17
18
  var _nodeDataProvider = require("@atlaskit/node-data-provider");
19
+ 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; }
20
+ 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; }
18
21
  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)); }
19
22
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
20
23
  var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
@@ -42,24 +45,27 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
42
45
  }, {
43
46
  key: "fetchNodesData",
44
47
  value: function () {
45
- var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(nodes) {
48
+ var _fetchNodesData = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(nodes) {
46
49
  var _this$emojiResource$e;
47
50
  var getOptimisticImageUrl, emojiProvider, fetches;
48
- return _regenerator.default.wrap(function _callee$(_context) {
49
- while (1) switch (_context.prev = _context.next) {
51
+ return _regenerator.default.wrap(function _callee2$(_context2) {
52
+ while (1) switch (_context2.prev = _context2.next) {
50
53
  case 0:
51
54
  // If we have an `optimisticImageApi`, use it to generate a URL immediately.
52
55
  // This is how emojis are server-side rendered in Confluence.
53
56
  // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
54
57
  //
58
+ // We are using this optimization only in SSR because on client side we need to know a valid emoji size
59
+ // which is not possible to get from optimisticImageApi.
60
+ //
55
61
  // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
56
62
  // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
57
63
  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;
64
+ if (!((0, _coreUtils.isSSR)() && getOptimisticImageUrl)) {
65
+ _context2.next = 3;
60
66
  break;
61
67
  }
62
- return _context.abrupt("return", nodes.map(function (node) {
68
+ return _context2.abrupt("return", nodes.map(function (node) {
63
69
  var emojiId = {
64
70
  id: node.attrs.id,
65
71
  shortName: node.attrs.shortName,
@@ -83,26 +89,57 @@ var EmojiNodeDataProvider = exports.EmojiNodeDataProvider = /*#__PURE__*/functio
83
89
  };
84
90
  }));
85
91
  case 3:
86
- _context.next = 5;
92
+ _context2.next = 5;
87
93
  return this.emojiProvider;
88
94
  case 5:
89
- emojiProvider = _context.sent;
90
- fetches = nodes.map(function (node) {
91
- var emojiId = {
92
- id: node.attrs.id,
93
- shortName: node.attrs.shortName,
94
- fallback: node.attrs.text
95
+ emojiProvider = _context2.sent;
96
+ fetches = nodes.map( /*#__PURE__*/function () {
97
+ var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(node) {
98
+ var emojiId, result, optimisticImageURL;
99
+ return _regenerator.default.wrap(function _callee$(_context) {
100
+ while (1) switch (_context.prev = _context.next) {
101
+ case 0:
102
+ emojiId = {
103
+ id: node.attrs.id,
104
+ shortName: node.attrs.shortName,
105
+ fallback: node.attrs.text
106
+ }; // This usually fast because the emojiProvider already has all emojis fetched.
107
+ _context.next = 3;
108
+ return emojiProvider.fetchByEmojiId(emojiId, true);
109
+ case 3:
110
+ result = _context.sent;
111
+ if (!(getOptimisticImageUrl && result)) {
112
+ _context.next = 8;
113
+ break;
114
+ }
115
+ optimisticImageURL = getOptimisticImageUrl(emojiId);
116
+ if (!(result.representation && 'imagePath' in result.representation)) {
117
+ _context.next = 8;
118
+ break;
119
+ }
120
+ return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
121
+ representation: _objectSpread(_objectSpread({}, result.representation), {}, {
122
+ imagePath: optimisticImageURL
123
+ })
124
+ }));
125
+ case 8:
126
+ return _context.abrupt("return", result);
127
+ case 9:
128
+ case "end":
129
+ return _context.stop();
130
+ }
131
+ }, _callee);
132
+ }));
133
+ return function (_x2) {
134
+ return _ref.apply(this, arguments);
95
135
  };
96
-
97
- // This usually fast because the emojiProvider already has all emojis fetched.
98
- return emojiProvider.fetchByEmojiId(emojiId, true);
99
- });
100
- return _context.abrupt("return", Promise.all(fetches));
136
+ }());
137
+ return _context2.abrupt("return", Promise.all(fetches));
101
138
  case 8:
102
139
  case "end":
103
- return _context.stop();
140
+ return _context2.stop();
104
141
  }
105
- }, _callee, this);
142
+ }, _callee2, this);
106
143
  }));
107
144
  function fetchNodesData(_x) {
108
145
  return _fetchNodesData.apply(this, arguments);
package/dist/es2019/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { isSSR } from '@atlaskit/editor-common/core-utils';
2
3
  import { defaultEmojiHeight } from '@atlaskit/emoji';
3
4
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
4
5
  export class EmojiNodeDataProvider extends NodeDataProvider {
@@ -21,10 +22,13 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
21
22
  // This is how emojis are server-side rendered in Confluence.
22
23
  // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
23
24
  //
25
+ // We are using this optimization only in SSR because on client side we need to know a valid emoji size
26
+ // which is not possible to get from optimisticImageApi.
27
+ //
24
28
  // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
25
29
  // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
26
30
  const getOptimisticImageUrl = (_this$emojiResource$e = this.emojiResource.emojiProviderConfig.optimisticImageApi) === null || _this$emojiResource$e === void 0 ? void 0 : _this$emojiResource$e.getUrl;
27
- if (getOptimisticImageUrl) {
31
+ if (isSSR() && getOptimisticImageUrl) {
28
32
  return nodes.map(node => {
29
33
  const emojiId = {
30
34
  id: node.attrs.id,
@@ -53,7 +57,7 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
53
57
  // This is slower path because during access to emojiProvider emojiResource
54
58
  // makes a request to fetch all emojis.
55
59
  const emojiProvider = await this.emojiProvider;
56
- const fetches = nodes.map(node => {
60
+ const fetches = nodes.map(async node => {
57
61
  const emojiId = {
58
62
  id: node.attrs.id,
59
63
  shortName: node.attrs.shortName,
@@ -61,7 +65,22 @@ export class EmojiNodeDataProvider extends NodeDataProvider {
61
65
  };
62
66
 
63
67
  // This usually fast because the emojiProvider already has all emojis fetched.
64
- return emojiProvider.fetchByEmojiId(emojiId, true);
68
+ const result = await emojiProvider.fetchByEmojiId(emojiId, true);
69
+
70
+ // If we have optimisticImageApi, we need to path response and set URL from it to match the URL used in SSR.
71
+ if (getOptimisticImageUrl && result) {
72
+ const optimisticImageURL = getOptimisticImageUrl(emojiId);
73
+ if (result.representation && 'imagePath' in result.representation) {
74
+ return {
75
+ ...result,
76
+ representation: {
77
+ ...result.representation,
78
+ imagePath: optimisticImageURL
79
+ }
80
+ };
81
+ }
82
+ }
83
+ return result;
65
84
  });
66
85
  return Promise.all(fetches);
67
86
  }
package/dist/esm/pm-plugins/providers/EmojiNodeDataProvider.js CHANGED
@@ -6,8 +6,11 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
6
6
  import _inherits from "@babel/runtime/helpers/inherits";
7
7
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
8
  import _regeneratorRuntime from "@babel/runtime/regenerator";
9
+ 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; }
10
+ 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; }
9
11
  function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
10
12
  function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
13
+ import { isSSR } from '@atlaskit/editor-common/core-utils';
11
14
  import { defaultEmojiHeight } from '@atlaskit/emoji';
12
15
  import { NodeDataProvider } from '@atlaskit/node-data-provider';
13
16
  export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
@@ -35,24 +38,27 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
35
38
  }, {
36
39
  key: "fetchNodesData",
37
40
  value: function () {
38
- var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(nodes) {
41
+ var _fetchNodesData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(nodes) {
39
42
  var _this$emojiResource$e;
40
43
  var getOptimisticImageUrl, emojiProvider, fetches;
41
- return _regeneratorRuntime.wrap(function _callee$(_context) {
42
- while (1) switch (_context.prev = _context.next) {
44
+ return _regeneratorRuntime.wrap(function _callee2$(_context2) {
45
+ while (1) switch (_context2.prev = _context2.next) {
43
46
  case 0:
44
47
  // If we have an `optimisticImageApi`, use it to generate a URL immediately.
45
48
  // This is how emojis are server-side rendered in Confluence.
46
49
  // Without this, the emoji server response will hit timeout on SSR and the emoji will not be rendered.
47
50
  //
51
+ // We are using this optimization only in SSR because on client side we need to know a valid emoji size
52
+ // which is not possible to get from optimisticImageApi.
53
+ //
48
54
  // Check platform/packages/editor/renderer/src/react/nodes/emoji.tsx
49
55
  // and platform/packages/elements/emoji/src/components/common/ResourcedEmojiComponent.tsx
50
56
  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;
57
+ if (!(isSSR() && getOptimisticImageUrl)) {
58
+ _context2.next = 3;
53
59
  break;
54
60
  }
55
- return _context.abrupt("return", nodes.map(function (node) {
61
+ return _context2.abrupt("return", nodes.map(function (node) {
56
62
  var emojiId = {
57
63
  id: node.attrs.id,
58
64
  shortName: node.attrs.shortName,
@@ -76,26 +82,57 @@ export var EmojiNodeDataProvider = /*#__PURE__*/function (_NodeDataProvider) {
76
82
  };
77
83
  }));
78
84
  case 3:
79
- _context.next = 5;
85
+ _context2.next = 5;
80
86
  return this.emojiProvider;
81
87
  case 5:
82
- emojiProvider = _context.sent;
83
- fetches = nodes.map(function (node) {
84
- var emojiId = {
85
- id: node.attrs.id,
86
- shortName: node.attrs.shortName,
87
- fallback: node.attrs.text
88
+ emojiProvider = _context2.sent;
89
+ fetches = nodes.map( /*#__PURE__*/function () {
90
+ var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node) {
91
+ var emojiId, result, optimisticImageURL;
92
+ return _regeneratorRuntime.wrap(function _callee$(_context) {
93
+ while (1) switch (_context.prev = _context.next) {
94
+ case 0:
95
+ emojiId = {
96
+ id: node.attrs.id,
97
+ shortName: node.attrs.shortName,
98
+ fallback: node.attrs.text
99
+ }; // This usually fast because the emojiProvider already has all emojis fetched.
100
+ _context.next = 3;
101
+ return emojiProvider.fetchByEmojiId(emojiId, true);
102
+ case 3:
103
+ result = _context.sent;
104
+ if (!(getOptimisticImageUrl && result)) {
105
+ _context.next = 8;
106
+ break;
107
+ }
108
+ optimisticImageURL = getOptimisticImageUrl(emojiId);
109
+ if (!(result.representation && 'imagePath' in result.representation)) {
110
+ _context.next = 8;
111
+ break;
112
+ }
113
+ return _context.abrupt("return", _objectSpread(_objectSpread({}, result), {}, {
114
+ representation: _objectSpread(_objectSpread({}, result.representation), {}, {
115
+ imagePath: optimisticImageURL
116
+ })
117
+ }));
118
+ case 8:
119
+ return _context.abrupt("return", result);
120
+ case 9:
121
+ case "end":
122
+ return _context.stop();
123
+ }
124
+ }, _callee);
125
+ }));
126
+ return function (_x2) {
127
+ return _ref.apply(this, arguments);
88
128
  };
89
-
90
- // This usually fast because the emojiProvider already has all emojis fetched.
91
- return emojiProvider.fetchByEmojiId(emojiId, true);
92
- });
93
- return _context.abrupt("return", Promise.all(fetches));
129
+ }());
130
+ return _context2.abrupt("return", Promise.all(fetches));
94
131
  case 8:
95
132
  case "end":
96
- return _context.stop();
133
+ return _context2.stop();
97
134
  }
98
- }, _callee, this);
135
+ }, _callee2, this);
99
136
  }));
100
137
  function fetchNodesData(_x) {
101
138
  return _fetchNodesData.apply(this, arguments);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-emoji",
3
- "version": "7.1.2",
3
+ "version": "7.2.0",
4
4
  "description": "Emoji plugin for @atlaskit/editor-core",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,7 +36,7 @@
36
36
  "@atlaskit/platform-feature-flags": "^1.1.0",
37
37
  "@atlaskit/prosemirror-input-rules": "^3.5.0",
38
38
  "@atlaskit/theme": "^21.0.0",
39
- "@atlaskit/tmp-editor-statsig": "^13.9.0",
39
+ "@atlaskit/tmp-editor-statsig": "^13.10.0",
40
40
  "@atlaskit/tokens": "^6.4.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@emotion/react": "^11.7.1",