@atlaskit/editor-plugin-card 0.14.13 → 0.14.15

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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/nodeviews/inlineCardWithAwareness.js +9 -2
  3. package/dist/cjs/ui/InlineCardOverlay/index.js +11 -7
  4. package/dist/es2019/nodeviews/inlineCardWithAwareness.js +6 -2
  5. package/dist/es2019/ui/InlineCardOverlay/index.js +11 -7
  6. package/dist/esm/nodeviews/inlineCardWithAwareness.js +9 -2
  7. package/dist/esm/ui/InlineCardOverlay/index.js +11 -7
  8. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/editor-plugin-card
2
2
 
3
+ ## 0.14.15
4
+
5
+ ### Patch Changes
6
+
7
+ - [#58798](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58798) [`8e489065dff2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8e489065dff2) - Workaround for inline overlay showing incorrectly on undo.
8
+
9
+ ## 0.14.14
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 0.14.13
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -54,6 +54,10 @@ var InlineCard = function InlineCard(_ref) {
54
54
  _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
55
55
  isInserted = _useState4[0],
56
56
  setIsInserted = _useState4[1];
57
+ var _useState5 = (0, _react.useState)(false),
58
+ _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
59
+ isResolvedViewRendered = _useState6[0],
60
+ setIsResolvedViewRendered = _useState6[1];
57
61
  var linkPosition = (0, _react.useMemo)(function () {
58
62
  if (!getPos || typeof getPos === 'boolean') {
59
63
  return undefined;
@@ -109,6 +113,9 @@ var InlineCard = function InlineCard(_ref) {
109
113
  })(tr);
110
114
  view.dispatch(tr);
111
115
  })();
116
+ if (title) {
117
+ setIsResolvedViewRendered(true);
118
+ }
112
119
  setIsInserted(isLinkMostRecentlyInserted);
113
120
  }, [view, getPos, isLinkMostRecentlyInserted]);
114
121
  var onError = (0, _react.useCallback)(function (data) {
@@ -141,7 +148,7 @@ var InlineCard = function InlineCard(_ref) {
141
148
  var cardWithOverlay = (0, _react.useMemo)(function () {
142
149
  return shouldShowLinkOverlay ? (0, _react2.jsx)(_InlineCardOverlay.default, {
143
150
  isSelected: isSelected,
144
- isVisible: isInserted || isHovered || isSelected,
151
+ isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
145
152
  onMouseEnter: function onMouseEnter() {
146
153
  return setIsHovered(true);
147
154
  },
@@ -150,7 +157,7 @@ var InlineCard = function InlineCard(_ref) {
150
157
  },
151
158
  url: url
152
159
  }, innerCard) : innerCard;
153
- }, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
160
+ }, [innerCard, isHovered, isResolvedViewRendered, isSelected, isInserted, shouldShowLinkOverlay, url]);
154
161
  var card = (0, _react.useMemo)(function () {
155
162
  var _cardContext$value;
156
163
  return (0, _react2.jsx)("span", {
package/dist/cjs/ui/InlineCardOverlay/index.js CHANGED
@@ -42,17 +42,17 @@ var linkStyles = (0, _react2.css)({
42
42
  textDecoration: 'none'
43
43
  });
44
44
  var overlayStyles = (0, _react2.css)({
45
- // Visibility is set directly on element via style prop
46
- display: 'inline-flex',
45
+ // Set default styling to be invisible but available in dom for width calculation.
46
+ position: 'absolute',
47
+ visibility: 'hidden',
47
48
  // Positioning
48
- position: 'relative',
49
+ display: 'inline-flex',
49
50
  flexWrap: 'nowrap',
50
51
  alignItems: 'center',
51
52
  alignSelf: 'stretch',
52
53
  height: 'inherit',
53
54
  lineHeight: 'initial',
54
55
  width: 'max-content',
55
- top: "var(--ds-space-0, 0)",
56
56
  bottom: "var(--ds-space-0, 0)",
57
57
  right: 3,
58
58
  margin: "-1px ".concat("var(--ds-space-0, 0)"),
@@ -86,6 +86,10 @@ var overlayStyles = (0, _react2.css)({
86
86
  padding: "var(--ds-space-0, 0)"
87
87
  }
88
88
  });
89
+ var showOverlayStyles = (0, _react2.css)({
90
+ position: 'relative',
91
+ visibility: 'visible'
92
+ });
89
93
  var safariOverlayStyles = (0, _react2.css)({
90
94
  height: '1.1em',
91
95
  paddingBottom: "var(--ds-space-025, 2px)",
@@ -120,7 +124,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
120
124
  testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
121
125
  url = _ref.url,
122
126
  props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
123
- var _useState = (0, _react.useState)(true),
127
+ var _useState = (0, _react.useState)(false),
124
128
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
125
129
  showOverlay = _useState2[0],
126
130
  setShowOverlay = _useState2[1];
@@ -240,13 +244,13 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
240
244
  return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
241
245
  css: containerStyles,
242
246
  ref: containerRef
243
- }), children, isVisible && showOverlay && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
247
+ }), children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
244
248
  "aria-hidden": "true",
245
249
  className: OVERLAY_MARKER_CLASSNAME,
246
250
  css: markerStyles
247
251
  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
248
252
  className: OVERLAY_CLASSNAME,
249
- css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
253
+ css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, _utils.browser.safari && safariOverlayStyles],
250
254
  style: {
251
255
  marginLeft: -overlayWidth
252
256
  },
package/dist/es2019/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -40,6 +40,7 @@ const InlineCard = ({
40
40
  // BEGIN: Awareness (To be revisited in EDM-8508)
41
41
  const [isHovered, setIsHovered] = useState(false);
42
42
  const [isInserted, setIsInserted] = useState(false);
43
+ const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
43
44
  const linkPosition = useMemo(() => {
44
45
  if (!getPos || typeof getPos === 'boolean') {
45
46
  return undefined;
@@ -94,6 +95,9 @@ const InlineCard = ({
94
95
  registerRemoveOverlay(() => setIsInserted(false))(tr);
95
96
  view.dispatch(tr);
96
97
  })();
98
+ if (title) {
99
+ setIsResolvedViewRendered(true);
100
+ }
97
101
  setIsInserted(isLinkMostRecentlyInserted);
98
102
  }, [view, getPos, isLinkMostRecentlyInserted]);
99
103
  const onError = useCallback(data => {
@@ -125,11 +129,11 @@ const InlineCard = ({
125
129
  // BEGIN: Awareness (To be revisited in EDM-8508)
126
130
  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
127
131
  isSelected: isSelected,
128
- isVisible: isInserted || isHovered || isSelected,
132
+ isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
129
133
  onMouseEnter: () => setIsHovered(true),
130
134
  onMouseLeave: () => setIsHovered(false),
131
135
  url: url
132
- }, innerCard) : innerCard, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
136
+ }, innerCard) : innerCard, [innerCard, isHovered, isResolvedViewRendered, isSelected, isInserted, shouldShowLinkOverlay, url]);
133
137
  const card = useMemo(() => {
134
138
  var _cardContext$value;
135
139
  return jsx("span", {
package/dist/es2019/ui/InlineCardOverlay/index.js CHANGED
@@ -28,17 +28,17 @@ const linkStyles = css({
28
28
  textDecoration: 'none'
29
29
  });
30
30
  const overlayStyles = css({
31
- // Visibility is set directly on element via style prop
32
- display: 'inline-flex',
31
+ // Set default styling to be invisible but available in dom for width calculation.
32
+ position: 'absolute',
33
+ visibility: 'hidden',
33
34
  // Positioning
34
- position: 'relative',
35
+ display: 'inline-flex',
35
36
  flexWrap: 'nowrap',
36
37
  alignItems: 'center',
37
38
  alignSelf: 'stretch',
38
39
  height: 'inherit',
39
40
  lineHeight: 'initial',
40
41
  width: 'max-content',
41
- top: "var(--ds-space-0, 0)",
42
42
  bottom: "var(--ds-space-0, 0)",
43
43
  right: 3,
44
44
  margin: `-1px ${"var(--ds-space-0, 0)"}`,
@@ -82,6 +82,10 @@ const overlayStyles = css({
82
82
  padding: "var(--ds-space-0, 0)"
83
83
  }
84
84
  });
85
+ const showOverlayStyles = css({
86
+ position: 'relative',
87
+ visibility: 'visible'
88
+ });
85
89
  const safariOverlayStyles = css({
86
90
  height: '1.1em',
87
91
  paddingBottom: "var(--ds-space-025, 2px)",
@@ -114,7 +118,7 @@ const InlineCardOverlay = ({
114
118
  url,
115
119
  ...props
116
120
  }) => {
117
- const [showOverlay, setShowOverlay] = useState(true);
121
+ const [showOverlay, setShowOverlay] = useState(false);
118
122
  const [showLabel, setShowLabel] = useState(true);
119
123
  const [overlayWidth, setOverlayWidth] = useState(0);
120
124
  const maxOverlayWidth = useRef(0);
@@ -226,13 +230,13 @@ const InlineCardOverlay = ({
226
230
  return jsx("span", _extends({}, props, {
227
231
  css: containerStyles,
228
232
  ref: containerRef
229
- }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
233
+ }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
230
234
  "aria-hidden": "true",
231
235
  className: OVERLAY_MARKER_CLASSNAME,
232
236
  css: markerStyles
233
237
  }, ZERO_WIDTH_JOINER), jsx("a", {
234
238
  className: OVERLAY_CLASSNAME,
235
- css: [overlayStyles, browser.safari && safariOverlayStyles],
239
+ css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
236
240
  style: {
237
241
  marginLeft: -overlayWidth
238
242
  },
package/dist/esm/nodeviews/inlineCardWithAwareness.js CHANGED
@@ -46,6 +46,10 @@ var InlineCard = function InlineCard(_ref) {
46
46
  _useState4 = _slicedToArray(_useState3, 2),
47
47
  isInserted = _useState4[0],
48
48
  setIsInserted = _useState4[1];
49
+ var _useState5 = useState(false),
50
+ _useState6 = _slicedToArray(_useState5, 2),
51
+ isResolvedViewRendered = _useState6[0],
52
+ setIsResolvedViewRendered = _useState6[1];
49
53
  var linkPosition = useMemo(function () {
50
54
  if (!getPos || typeof getPos === 'boolean') {
51
55
  return undefined;
@@ -101,6 +105,9 @@ var InlineCard = function InlineCard(_ref) {
101
105
  })(tr);
102
106
  view.dispatch(tr);
103
107
  })();
108
+ if (title) {
109
+ setIsResolvedViewRendered(true);
110
+ }
104
111
  setIsInserted(isLinkMostRecentlyInserted);
105
112
  }, [view, getPos, isLinkMostRecentlyInserted]);
106
113
  var onError = useCallback(function (data) {
@@ -133,7 +140,7 @@ var InlineCard = function InlineCard(_ref) {
133
140
  var cardWithOverlay = useMemo(function () {
134
141
  return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
135
142
  isSelected: isSelected,
136
- isVisible: isInserted || isHovered || isSelected,
143
+ isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
137
144
  onMouseEnter: function onMouseEnter() {
138
145
  return setIsHovered(true);
139
146
  },
@@ -142,7 +149,7 @@ var InlineCard = function InlineCard(_ref) {
142
149
  },
143
150
  url: url
144
151
  }, innerCard) : innerCard;
145
- }, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
152
+ }, [innerCard, isHovered, isResolvedViewRendered, isSelected, isInserted, shouldShowLinkOverlay, url]);
146
153
  var card = useMemo(function () {
147
154
  var _cardContext$value;
148
155
  return jsx("span", {
package/dist/esm/ui/InlineCardOverlay/index.js CHANGED
@@ -34,17 +34,17 @@ var linkStyles = css({
34
34
  textDecoration: 'none'
35
35
  });
36
36
  var overlayStyles = css({
37
- // Visibility is set directly on element via style prop
38
- display: 'inline-flex',
37
+ // Set default styling to be invisible but available in dom for width calculation.
38
+ position: 'absolute',
39
+ visibility: 'hidden',
39
40
  // Positioning
40
- position: 'relative',
41
+ display: 'inline-flex',
41
42
  flexWrap: 'nowrap',
42
43
  alignItems: 'center',
43
44
  alignSelf: 'stretch',
44
45
  height: 'inherit',
45
46
  lineHeight: 'initial',
46
47
  width: 'max-content',
47
- top: "var(--ds-space-0, 0)",
48
48
  bottom: "var(--ds-space-0, 0)",
49
49
  right: 3,
50
50
  margin: "-1px ".concat("var(--ds-space-0, 0)"),
@@ -78,6 +78,10 @@ var overlayStyles = css({
78
78
  padding: "var(--ds-space-0, 0)"
79
79
  }
80
80
  });
81
+ var showOverlayStyles = css({
82
+ position: 'relative',
83
+ visibility: 'visible'
84
+ });
81
85
  var safariOverlayStyles = css({
82
86
  height: '1.1em',
83
87
  paddingBottom: "var(--ds-space-025, 2px)",
@@ -112,7 +116,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
112
116
  testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
113
117
  url = _ref.url,
114
118
  props = _objectWithoutProperties(_ref, _excluded);
115
- var _useState = useState(true),
119
+ var _useState = useState(false),
116
120
  _useState2 = _slicedToArray(_useState, 2),
117
121
  showOverlay = _useState2[0],
118
122
  setShowOverlay = _useState2[1];
@@ -232,13 +236,13 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
232
236
  return jsx("span", _extends({}, props, {
233
237
  css: containerStyles,
234
238
  ref: containerRef
235
- }), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
239
+ }), children, isVisible && jsx(React.Fragment, null, jsx("span", {
236
240
  "aria-hidden": "true",
237
241
  className: OVERLAY_MARKER_CLASSNAME,
238
242
  css: markerStyles
239
243
  }, ZERO_WIDTH_JOINER), jsx("a", {
240
244
  className: OVERLAY_CLASSNAME,
241
- css: [overlayStyles, browser.safari && safariOverlayStyles],
245
+ css: [overlayStyles, showOverlay && overlayWidth > 0 && showOverlayStyles, browser.safari && safariOverlayStyles],
242
246
  style: {
243
247
  marginLeft: -overlayWidth
244
248
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-card",
3
- "version": "0.14.13",
3
+ "version": "0.14.15",
4
4
  "description": "Card plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,8 +34,8 @@
34
34
  "@atlaskit/adf-schema": "^35.0.0",
35
35
  "@atlaskit/analytics-next": "^9.1.0",
36
36
  "@atlaskit/custom-steps": "^0.0.7",
37
- "@atlaskit/editor-common": "^76.25.0",
38
- "@atlaskit/editor-plugin-analytics": "^0.3.0",
37
+ "@atlaskit/editor-common": "^76.26.0",
38
+ "@atlaskit/editor-plugin-analytics": "^0.4.0",
39
39
  "@atlaskit/editor-plugin-decorations": "^0.2.0",
40
40
  "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
41
41
  "@atlaskit/editor-plugin-floating-toolbar": "^0.7.0",