@atlaskit/editor-plugin-card 6.3.3 → 6.4.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 6.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#161266](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/161266)
8
+ [`3eb1f4c974f21`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3eb1f4c974f21) -
9
+ Improved load performance by moving recalculate logic on interaction
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 6.3.3
4
16
 
5
17
  ### Patch Changes
package/compass.yml CHANGED
@@ -26,4 +26,11 @@ links:
26
26
  type: REPOSITORY
27
27
  url: 'https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-card'
28
28
  customFields: []
29
- relationships: {}
29
+ relationships:
30
+ DEPENDS_ON:
31
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/27e8ffab-42db-4c16-9afb-9eefd72d02ec' # link-analytics
32
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/37dc08cd-d81c-4bbb-9b26-5d6d8a417ea3' # link-client-extension
33
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/2833bb40-a2e4-4b79-b74b-147d0d23fdb1' # link-datasource
34
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/18157dad-b7fb-4cde-8b74-e905b5757611' # link-provider
35
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/3d229125-4f9d-4091-a303-84ae4eb643fb' # linking-common
36
+ - 'ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/c9898540-33b1-4cd4-9399-16e575bcedae' # smart-card
@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
15
15
  var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
16
16
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
17
  var _primitives = require("@atlaskit/primitives");
18
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
18
19
  var _toolbar = require("../toolbar");
19
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); }
20
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; }
@@ -98,19 +99,23 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
98
99
  setHovered = _useState4[1];
99
100
  var openTextWidthRef = (0, _react.useRef)(DEFAULT_OPEN_TEXT_WIDTH);
100
101
  (0, _react.useLayoutEffect)(function () {
101
- var hiddenText = hiddenTextRef.current;
102
- if (!hiddenText) {
103
- return;
104
- }
105
- // Measure the width of the hidden text
106
- // Temporarily make the element visible to measure its width
107
- hiddenText.style.visibility = 'hidden';
108
- hiddenText.style.display = 'inline';
109
- openTextWidthRef.current = hiddenText.offsetWidth;
102
+ if ((0, _experiments.editorExperiment)('platform_editor_smart_card_open_overlay_perf', false, {
103
+ exposure: true
104
+ })) {
105
+ var hiddenText = hiddenTextRef.current;
106
+ if (!hiddenText) {
107
+ return;
108
+ }
109
+ // Measure the width of the hidden text
110
+ // Temporarily make the element visible to measure its width
111
+ hiddenText.style.visibility = 'hidden';
112
+ hiddenText.style.display = 'inline';
113
+ openTextWidthRef.current = hiddenText.offsetWidth;
110
114
 
111
- // Reset the hiddenText's display property
112
- hiddenText.style.display = 'none';
113
- hiddenText.style.visibility = 'inherit';
115
+ // Reset the hiddenText's display property
116
+ hiddenText.style.display = 'none';
117
+ hiddenText.style.visibility = 'inherit';
118
+ }
114
119
  }, []);
115
120
  (0, _react.useLayoutEffect)(function () {
116
121
  var _containerRef$current, _openButtonRef$curren;
@@ -119,6 +124,28 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
119
124
  }
120
125
  var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
121
126
  var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
127
+
128
+ // Get the hidden text width
129
+ if ((0, _experiments.editorExperiment)('platform_editor_smart_card_open_overlay_perf', true, {
130
+ exposure: true
131
+ })) {
132
+ if (!openTextWidthRef.current) {
133
+ var hiddenText = hiddenTextRef.current;
134
+ if (!hiddenText) {
135
+ return;
136
+ }
137
+
138
+ // Measure the width of the hidden text
139
+ // Temporarily make the element visible to measure its width
140
+ hiddenText.style.visibility = 'hidden';
141
+ hiddenText.style.display = 'inline';
142
+ openTextWidthRef.current = hiddenText.offsetWidth;
143
+
144
+ // Reset the hiddenText's display property
145
+ hiddenText.style.display = 'none';
146
+ hiddenText.style.visibility = 'inherit';
147
+ }
148
+ }
122
149
  if (!cardWidth || !openButtonWidth) {
123
150
  return;
124
151
  }
@@ -13,6 +13,7 @@ import { cardMessages } from '@atlaskit/editor-common/messages';
13
13
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
14
14
  import { fg } from '@atlaskit/platform-feature-flags';
15
15
  import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
16
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
16
17
  import { visitCardLinkAnalyticsOnly } from '../toolbar';
17
18
  const containerStyles = css({
18
19
  position: 'relative'
@@ -78,19 +79,23 @@ const OpenButtonOverlay = ({
78
79
  const [isHovered, setHovered] = useState(false);
79
80
  const openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
80
81
  useLayoutEffect(() => {
81
- const hiddenText = hiddenTextRef.current;
82
- if (!hiddenText) {
83
- return;
84
- }
85
- // Measure the width of the hidden text
86
- // Temporarily make the element visible to measure its width
87
- hiddenText.style.visibility = 'hidden';
88
- hiddenText.style.display = 'inline';
89
- openTextWidthRef.current = hiddenText.offsetWidth;
82
+ if (editorExperiment('platform_editor_smart_card_open_overlay_perf', false, {
83
+ exposure: true
84
+ })) {
85
+ const hiddenText = hiddenTextRef.current;
86
+ if (!hiddenText) {
87
+ return;
88
+ }
89
+ // Measure the width of the hidden text
90
+ // Temporarily make the element visible to measure its width
91
+ hiddenText.style.visibility = 'hidden';
92
+ hiddenText.style.display = 'inline';
93
+ openTextWidthRef.current = hiddenText.offsetWidth;
90
94
 
91
- // Reset the hiddenText's display property
92
- hiddenText.style.display = 'none';
93
- hiddenText.style.visibility = 'inherit';
95
+ // Reset the hiddenText's display property
96
+ hiddenText.style.display = 'none';
97
+ hiddenText.style.visibility = 'inherit';
98
+ }
94
99
  }, []);
95
100
  useLayoutEffect(() => {
96
101
  var _containerRef$current, _openButtonRef$curren;
@@ -99,6 +104,28 @@ const OpenButtonOverlay = ({
99
104
  }
100
105
  const cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
101
106
  const openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
107
+
108
+ // Get the hidden text width
109
+ if (editorExperiment('platform_editor_smart_card_open_overlay_perf', true, {
110
+ exposure: true
111
+ })) {
112
+ if (!openTextWidthRef.current) {
113
+ const hiddenText = hiddenTextRef.current;
114
+ if (!hiddenText) {
115
+ return;
116
+ }
117
+
118
+ // Measure the width of the hidden text
119
+ // Temporarily make the element visible to measure its width
120
+ hiddenText.style.visibility = 'hidden';
121
+ hiddenText.style.display = 'inline';
122
+ openTextWidthRef.current = hiddenText.offsetWidth;
123
+
124
+ // Reset the hiddenText's display property
125
+ hiddenText.style.display = 'none';
126
+ hiddenText.style.visibility = 'inherit';
127
+ }
128
+ }
102
129
  if (!cardWidth || !openButtonWidth) {
103
130
  return;
104
131
  }
@@ -14,6 +14,7 @@ import { cardMessages } from '@atlaskit/editor-common/messages';
14
14
  import LinkExternalIcon from '@atlaskit/icon/core/link-external';
15
15
  import { fg } from '@atlaskit/platform-feature-flags';
16
16
  import { Anchor, Box, Text, xcss } from '@atlaskit/primitives';
17
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
17
18
  import { visitCardLinkAnalyticsOnly } from '../toolbar';
18
19
  var containerStyles = css({
19
20
  position: 'relative'
@@ -84,19 +85,23 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
84
85
  setHovered = _useState4[1];
85
86
  var openTextWidthRef = useRef(DEFAULT_OPEN_TEXT_WIDTH);
86
87
  useLayoutEffect(function () {
87
- var hiddenText = hiddenTextRef.current;
88
- if (!hiddenText) {
89
- return;
90
- }
91
- // Measure the width of the hidden text
92
- // Temporarily make the element visible to measure its width
93
- hiddenText.style.visibility = 'hidden';
94
- hiddenText.style.display = 'inline';
95
- openTextWidthRef.current = hiddenText.offsetWidth;
88
+ if (editorExperiment('platform_editor_smart_card_open_overlay_perf', false, {
89
+ exposure: true
90
+ })) {
91
+ var hiddenText = hiddenTextRef.current;
92
+ if (!hiddenText) {
93
+ return;
94
+ }
95
+ // Measure the width of the hidden text
96
+ // Temporarily make the element visible to measure its width
97
+ hiddenText.style.visibility = 'hidden';
98
+ hiddenText.style.display = 'inline';
99
+ openTextWidthRef.current = hiddenText.offsetWidth;
96
100
 
97
- // Reset the hiddenText's display property
98
- hiddenText.style.display = 'none';
99
- hiddenText.style.visibility = 'inherit';
101
+ // Reset the hiddenText's display property
102
+ hiddenText.style.display = 'none';
103
+ hiddenText.style.visibility = 'inherit';
104
+ }
100
105
  }, []);
101
106
  useLayoutEffect(function () {
102
107
  var _containerRef$current, _openButtonRef$curren;
@@ -105,6 +110,28 @@ var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
105
110
  }
106
111
  var cardWidth = (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.offsetWidth;
107
112
  var openButtonWidth = (_openButtonRef$curren = openButtonRef.current) === null || _openButtonRef$curren === void 0 ? void 0 : _openButtonRef$curren.offsetWidth;
113
+
114
+ // Get the hidden text width
115
+ if (editorExperiment('platform_editor_smart_card_open_overlay_perf', true, {
116
+ exposure: true
117
+ })) {
118
+ if (!openTextWidthRef.current) {
119
+ var hiddenText = hiddenTextRef.current;
120
+ if (!hiddenText) {
121
+ return;
122
+ }
123
+
124
+ // Measure the width of the hidden text
125
+ // Temporarily make the element visible to measure its width
126
+ hiddenText.style.visibility = 'hidden';
127
+ hiddenText.style.display = 'inline';
128
+ openTextWidthRef.current = hiddenText.offsetWidth;
129
+
130
+ // Reset the hiddenText's display property
131
+ hiddenText.style.display = 'none';
132
+ hiddenText.style.visibility = 'inherit';
133
+ }
134
+ }
108
135
  if (!cardWidth || !openButtonWidth) {
109
136
  return;
110
137
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "6.3.3",
3
+ "version": "6.4.0",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/analytics-next": "^11.0.0",
38
38
  "@atlaskit/button": "^23.2.0",
39
39
  "@atlaskit/custom-steps": "^0.11.0",
40
- "@atlaskit/editor-common": "^105.10.0",
40
+ "@atlaskit/editor-common": "^105.11.0",
41
41
  "@atlaskit/editor-plugin-analytics": "^2.3.0",
42
42
  "@atlaskit/editor-plugin-base": "^3.0.0",
43
43
  "@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -51,7 +51,7 @@
51
51
  "@atlaskit/editor-prosemirror": "7.0.0",
52
52
  "@atlaskit/editor-shared-styles": "^3.4.0",
53
53
  "@atlaskit/frontend-utilities": "^3.0.0",
54
- "@atlaskit/icon": "^26.3.0",
54
+ "@atlaskit/icon": "^26.4.0",
55
55
  "@atlaskit/link": "^3.2.0",
56
56
  "@atlaskit/link-analytics": "^10.0.0",
57
57
  "@atlaskit/link-client-extension": "^5.0.0",
@@ -63,7 +63,7 @@
63
63
  "@atlaskit/primitives": "^14.8.0",
64
64
  "@atlaskit/smart-card": "^38.5.0",
65
65
  "@atlaskit/theme": "^18.0.0",
66
- "@atlaskit/tmp-editor-statsig": "^5.0.0",
66
+ "@atlaskit/tmp-editor-statsig": "^5.2.0",
67
67
  "@atlaskit/tokens": "^4.9.0",
68
68
  "@babel/runtime": "^7.0.0",
69
69
  "@emotion/react": "^11.7.1",
@@ -174,5 +174,5 @@
174
174
  "checkDevDependencies": true
175
175
  }
176
176
  },
177
- "compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/44b8f355-366d-4e0c-a22a-1ba5a6106330"
177
+ "compassUnitTestMetricSourceId": "ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:metric-source/c5751cc6-3513-4070-9deb-af31e86aed34/e6f3220b-0ca2-445a-a4c5-78cff6ca2a34"
178
178
  }