@atlaskit/editor-plugin-card 0.14.10 → 0.14.12
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 +15 -0
- package/dist/cjs/nodeviews/datasource.js +8 -7
- package/dist/cjs/nodeviews/inlineCardWithAwareness.js +11 -8
- package/dist/cjs/ui/EditDatasourceButton.js +7 -5
- package/dist/cjs/ui/InlineCardOverlay/index.js +7 -7
- package/dist/cjs/ui/LayoutButton/index.js +6 -6
- package/dist/cjs/ui/ResizableEmbedCard.js +6 -5
- package/dist/cjs/ui/useFetchDatasourceInfo.js +2 -0
- package/dist/es2019/nodeviews/datasource.js +8 -6
- package/dist/es2019/nodeviews/inlineCardWithAwareness.js +11 -9
- package/dist/es2019/ui/EditDatasourceButton.js +7 -6
- package/dist/es2019/ui/InlineCardOverlay/index.js +9 -7
- package/dist/es2019/ui/LayoutButton/index.js +7 -6
- package/dist/es2019/ui/ResizableEmbedCard.js +6 -4
- package/dist/es2019/ui/useFetchDatasourceInfo.js +1 -0
- package/dist/esm/nodeviews/datasource.js +8 -6
- package/dist/esm/nodeviews/inlineCardWithAwareness.js +11 -9
- package/dist/esm/ui/EditDatasourceButton.js +7 -6
- package/dist/esm/ui/InlineCardOverlay/index.js +9 -7
- package/dist/esm/ui/LayoutButton/index.js +7 -6
- package/dist/esm/ui/ResizableEmbedCard.js +6 -4
- package/dist/esm/ui/useFetchDatasourceInfo.js +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 0.14.12
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#58979](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58979) [`e1db19a2208c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e1db19a2208c) - [ux] Passing isHovering prop to the SmartCard when user hovers on the "Change view" overlay
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
10
|
+
## 0.14.11
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [#59147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59147) [`f12e489f23b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f12e489f23b0) - Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).
|
|
15
|
+
- [#58969](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58969) [`297598de20d6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/297598de20d6) - ED-20809: removes web driver project reference
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 0.14.10
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -13,6 +13,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
13
13
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
14
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
15
15
|
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _react2 = require("@emotion/react");
|
|
16
17
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
17
18
|
var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
|
|
18
19
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
@@ -24,7 +25,7 @@ var _EditorAnalyticsContext = require("../ui/EditorAnalyticsContext");
|
|
|
24
25
|
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; }
|
|
25
26
|
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; }
|
|
26
27
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
27
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
28
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
28
29
|
var getPosSafely = function getPosSafely(pos) {
|
|
29
30
|
if (!pos || typeof pos === 'boolean') {
|
|
30
31
|
return;
|
|
@@ -149,11 +150,11 @@ var DatasourceComponent = exports.DatasourceComponent = /*#__PURE__*/function (_
|
|
|
149
150
|
|
|
150
151
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready
|
|
151
152
|
if (cardContext && cardContext.value) {
|
|
152
|
-
return
|
|
153
|
+
return (0, _react2.jsx)(_EditorAnalyticsContext.EditorAnalyticsContext, {
|
|
153
154
|
editorView: this.props.view
|
|
154
|
-
},
|
|
155
|
+
}, (0, _react2.jsx)(cardContext.Provider, {
|
|
155
156
|
value: cardContext.value
|
|
156
|
-
},
|
|
157
|
+
}, (0, _react2.jsx)(_linkDatasource.DatasourceTableView, {
|
|
157
158
|
datasourceId: datasource.id,
|
|
158
159
|
parameters: datasource.parameters,
|
|
159
160
|
visibleColumnKeys: visibleColumnKeys,
|
|
@@ -203,16 +204,16 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
203
204
|
key: "render",
|
|
204
205
|
value: function render() {
|
|
205
206
|
var attrs = this.node.attrs;
|
|
206
|
-
return
|
|
207
|
+
return (0, _react2.jsx)(_datasourceErrorBoundary.DatasourceErrorBoundary, {
|
|
207
208
|
unsupportedComponent: _ui.UnsupportedInline,
|
|
208
209
|
view: this.view,
|
|
209
210
|
url: attrs.url
|
|
210
|
-
},
|
|
211
|
+
}, (0, _react2.jsx)("div", {
|
|
211
212
|
className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
|
|
212
213
|
style: {
|
|
213
214
|
minWidth: (0, _utils.calcBreakoutWidth)(attrs.layout, this.tableWidth)
|
|
214
215
|
}
|
|
215
|
-
},
|
|
216
|
+
}, (0, _react2.jsx)(DatasourceComponent, {
|
|
216
217
|
node: this.node,
|
|
217
218
|
view: this.view,
|
|
218
219
|
getPos: this.getPos
|
|
@@ -18,6 +18,8 @@ var _pulse = require("../common/pulse");
|
|
|
18
18
|
var _actions = require("../pm-plugins/actions");
|
|
19
19
|
var _InlineCardOverlay = _interopRequireDefault(require("../ui/InlineCardOverlay"));
|
|
20
20
|
var _utils = require("../utils");
|
|
21
|
+
/** @jsx jsx */
|
|
22
|
+
|
|
21
23
|
// editor adds a standard line-height that is bigger than an inline smart link
|
|
22
24
|
// due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
|
|
23
25
|
var loaderWrapperStyles = (0, _react2.css)({
|
|
@@ -120,7 +122,7 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
120
122
|
});
|
|
121
123
|
}, [onResolve]);
|
|
122
124
|
var innerCard = (0, _react.useMemo)(function () {
|
|
123
|
-
return
|
|
125
|
+
return (0, _react2.jsx)(_smartCard.Card, {
|
|
124
126
|
key: url,
|
|
125
127
|
url: url,
|
|
126
128
|
data: data,
|
|
@@ -130,13 +132,14 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
130
132
|
onResolve: onResolve,
|
|
131
133
|
onError: onError,
|
|
132
134
|
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
|
|
133
|
-
showServerActions: showServerActions
|
|
135
|
+
showServerActions: showServerActions,
|
|
136
|
+
isHovered: isHovered
|
|
134
137
|
});
|
|
135
|
-
}, [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
|
|
138
|
+
}, [data, isHovered, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
|
|
136
139
|
|
|
137
140
|
// BEGIN: Awareness (To be revisited in EDM-8508)
|
|
138
141
|
var cardWithOverlay = (0, _react.useMemo)(function () {
|
|
139
|
-
return shouldShowLinkOverlay ?
|
|
142
|
+
return shouldShowLinkOverlay ? (0, _react2.jsx)(_InlineCardOverlay.default, {
|
|
140
143
|
isSelected: isSelected,
|
|
141
144
|
isVisible: isInserted || isHovered || isSelected,
|
|
142
145
|
onMouseEnter: function onMouseEnter() {
|
|
@@ -150,14 +153,14 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
150
153
|
}, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
|
|
151
154
|
var card = (0, _react.useMemo)(function () {
|
|
152
155
|
var _cardContext$value;
|
|
153
|
-
return
|
|
156
|
+
return (0, _react2.jsx)("span", {
|
|
154
157
|
css: shouldShowLinkPulse && loaderWrapperStyles,
|
|
155
158
|
className: "card"
|
|
156
|
-
}, shouldShowLinkPulse ?
|
|
159
|
+
}, shouldShowLinkPulse ? (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
|
|
157
160
|
data: {
|
|
158
161
|
attributes: (0, _utils.getResolvedAttributesFromStore)(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
|
|
159
162
|
}
|
|
160
|
-
},
|
|
163
|
+
}, (0, _react2.jsx)(_pulse.DiscoveryPulse, {
|
|
161
164
|
localStorageKey: _localStorage.LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
|
|
162
165
|
localStorageKeyExpirationInMs: _localStorage.ONE_DAY_IN_MILLISECONDS,
|
|
163
166
|
discoveryMode: "start"
|
|
@@ -167,7 +170,7 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
167
170
|
|
|
168
171
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready,
|
|
169
172
|
// otherwise if we got data, we can render the card directly since it doesn't need the Provider
|
|
170
|
-
return cardContext && cardContext.value ?
|
|
173
|
+
return cardContext && cardContext.value ? (0, _react2.jsx)(cardContext.Provider, {
|
|
171
174
|
value: cardContext.value
|
|
172
175
|
}, card) : data ? card : null;
|
|
173
176
|
};
|
|
@@ -12,6 +12,8 @@ var _primitives = require("@atlaskit/primitives");
|
|
|
12
12
|
var _actions = require("../pm-plugins/actions");
|
|
13
13
|
var _CardContextProvider = require("./CardContextProvider");
|
|
14
14
|
var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
|
|
15
|
+
/** @jsx jsx */
|
|
16
|
+
|
|
15
17
|
var buttonStyles = (0, _react.css)({
|
|
16
18
|
pointerEvents: 'auto'
|
|
17
19
|
});
|
|
@@ -47,16 +49,16 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
|
|
|
47
49
|
editorView.focus();
|
|
48
50
|
}
|
|
49
51
|
};
|
|
50
|
-
return
|
|
52
|
+
return (0, _react.jsx)(_primitives.Flex, null, (0, _react.jsx)(_ui.FloatingToolbarButton, {
|
|
51
53
|
css: buttonStyles,
|
|
52
54
|
title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
|
|
53
|
-
icon:
|
|
55
|
+
icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),
|
|
54
56
|
selected: false,
|
|
55
57
|
onClick: function onClick() {
|
|
56
58
|
return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
|
|
57
59
|
},
|
|
58
60
|
testId: 'card-edit-datasource-button'
|
|
59
|
-
}),
|
|
61
|
+
}), (0, _react.jsx)(_ui.FloatingToolbarSeparator, null));
|
|
60
62
|
};
|
|
61
63
|
var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourceButton(_ref2) {
|
|
62
64
|
var intl = _ref2.intl,
|
|
@@ -64,9 +66,9 @@ var EditDatasourceButton = exports.EditDatasourceButton = function EditDatasourc
|
|
|
64
66
|
url = _ref2.url,
|
|
65
67
|
editorView = _ref2.editorView,
|
|
66
68
|
editorState = _ref2.editorState;
|
|
67
|
-
return
|
|
69
|
+
return (0, _react.jsx)(_CardContextProvider.CardContextProvider, null, function (_ref3) {
|
|
68
70
|
var cardContext = _ref3.cardContext;
|
|
69
|
-
return
|
|
71
|
+
return (0, _react.jsx)(EditDatasourceButtonWithCardContext, {
|
|
70
72
|
url: url,
|
|
71
73
|
intl: intl,
|
|
72
74
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
@@ -24,7 +24,7 @@ var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
|
|
|
24
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
25
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
26
26
|
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; }
|
|
27
|
-
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; }
|
|
27
|
+
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; } /** @jsx jsx */
|
|
28
28
|
var DEBOUNCE_IN_MS = 5;
|
|
29
29
|
var ESTIMATED_MIN_WIDTH_IN_PX = 16;
|
|
30
30
|
var PADDING_IN_PX = 2;
|
|
@@ -231,20 +231,20 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
|
|
|
231
231
|
var label = intl.formatMessage(_messages.messages.inlineOverlay);
|
|
232
232
|
var icon = (0, _react.useMemo)(function () {
|
|
233
233
|
var IconComponent = isSelected ? _chevronUp.default : _chevronDown.default;
|
|
234
|
-
return
|
|
234
|
+
return (0, _react2.jsx)(IconComponent, {
|
|
235
235
|
label: label,
|
|
236
236
|
size: "small",
|
|
237
237
|
testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
|
|
238
238
|
});
|
|
239
239
|
}, [isSelected, label, testId]);
|
|
240
|
-
return
|
|
240
|
+
return (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
|
|
241
241
|
css: containerStyles,
|
|
242
242
|
ref: containerRef
|
|
243
|
-
}), children, isVisible && showOverlay &&
|
|
243
|
+
}), children, isVisible && showOverlay && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
|
|
244
244
|
"aria-hidden": "true",
|
|
245
245
|
className: OVERLAY_MARKER_CLASSNAME,
|
|
246
246
|
css: markerStyles
|
|
247
|
-
}, _utils.ZERO_WIDTH_JOINER),
|
|
247
|
+
}, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
|
|
248
248
|
className: OVERLAY_CLASSNAME,
|
|
249
249
|
css: [overlayStyles, _utils.browser.safari && safariOverlayStyles],
|
|
250
250
|
style: {
|
|
@@ -256,11 +256,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
|
|
|
256
256
|
return e.preventDefault();
|
|
257
257
|
},
|
|
258
258
|
tabIndex: -1
|
|
259
|
-
}, showLabel &&
|
|
259
|
+
}, showLabel && (0, _react2.jsx)("span", {
|
|
260
260
|
className: OVERLAY_LABEL_CLASSNAME,
|
|
261
261
|
css: textStyles,
|
|
262
262
|
"data-testid": "".concat(testId, "-label")
|
|
263
|
-
}, label),
|
|
263
|
+
}, label), (0, _react2.jsx)("span", {
|
|
264
264
|
css: iconStyles
|
|
265
265
|
}, icon))));
|
|
266
266
|
};
|
|
@@ -19,7 +19,7 @@ var _colors = require("@atlaskit/theme/colors");
|
|
|
19
19
|
var _actions = require("../../pm-plugins/actions");
|
|
20
20
|
var _utils2 = require("./utils");
|
|
21
21
|
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; }
|
|
22
|
-
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; }
|
|
22
|
+
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; } /** @jsx jsx */
|
|
23
23
|
var toolbarButtonWrapperStyles = (0, _react2.css)({
|
|
24
24
|
background: "".concat("var(--ds-background-neutral, ".concat(_colors.N20A, ")")),
|
|
25
25
|
color: "".concat("var(--ds-icon, ".concat(_colors.N300, ")")),
|
|
@@ -48,7 +48,7 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
|
|
|
48
48
|
if (!targetElement) {
|
|
49
49
|
return null;
|
|
50
50
|
}
|
|
51
|
-
return
|
|
51
|
+
return (0, _react2.jsx)(_ui.Popup, {
|
|
52
52
|
mountTo: mountPoint,
|
|
53
53
|
boundariesElement: boundariesElement,
|
|
54
54
|
scrollableElement: scrollableElement,
|
|
@@ -58,14 +58,14 @@ var LayoutButton = exports.LayoutButton = function LayoutButton(_ref) {
|
|
|
58
58
|
forcePlacement: true,
|
|
59
59
|
stick: true,
|
|
60
60
|
ariaLabel: title
|
|
61
|
-
},
|
|
61
|
+
}, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
|
|
62
62
|
testId: testId,
|
|
63
63
|
css: toolbarButtonWrapperStyles,
|
|
64
64
|
title: title,
|
|
65
65
|
onClick: handleClick,
|
|
66
|
-
iconBefore: layout === 'full-width' ?
|
|
66
|
+
iconBefore: layout === 'full-width' ? (0, _react2.jsx)(_collapse.default, {
|
|
67
67
|
label: title
|
|
68
|
-
}) :
|
|
68
|
+
}) : (0, _react2.jsx)(_expand.default, {
|
|
69
69
|
label: title
|
|
70
70
|
})
|
|
71
71
|
}));
|
|
@@ -103,7 +103,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
|
|
|
103
103
|
if (!isDatasource) {
|
|
104
104
|
return null;
|
|
105
105
|
}
|
|
106
|
-
return
|
|
106
|
+
return (0, _react2.jsx)(LayoutButton, {
|
|
107
107
|
mountPoint: mountPoint,
|
|
108
108
|
scrollableElement: scrollableElement,
|
|
109
109
|
boundariesElement: boundariesElement,
|
|
@@ -14,6 +14,7 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
|
|
|
14
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
|
+
var _react2 = require("@emotion/react");
|
|
17
18
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
18
19
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
20
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
@@ -22,7 +23,7 @@ var _smartCard = require("@atlaskit/smart-card");
|
|
|
22
23
|
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; }
|
|
23
24
|
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; }
|
|
24
25
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
25
|
-
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
26
|
+
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
|
|
26
27
|
// eslint-disable-next-line @repo/internal/react/no-class-components
|
|
27
28
|
var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Component) {
|
|
28
29
|
(0, _inherits2.default)(ResizableEmbedCard, _React$Component);
|
|
@@ -311,7 +312,7 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
|
|
|
311
312
|
paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(_smartCard.embedHeaderHeight, "px)")
|
|
312
313
|
};
|
|
313
314
|
}
|
|
314
|
-
return
|
|
315
|
+
return (0, _react2.jsx)("span", {
|
|
315
316
|
"data-testid": 'resizable-embed-card-height-definer',
|
|
316
317
|
style: _objectSpread({
|
|
317
318
|
display: 'block',
|
|
@@ -357,17 +358,17 @@ var ResizableEmbedCard = exports.default = /*#__PURE__*/function (_React$Compone
|
|
|
357
358
|
};
|
|
358
359
|
|
|
359
360
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
360
|
-
return
|
|
361
|
+
return (0, _react2.jsx)("div", {
|
|
361
362
|
css: _styles.embedSpacingStyles,
|
|
362
363
|
"data-testid": "resizable-embed-card-spacing"
|
|
363
|
-
},
|
|
364
|
+
}, (0, _react2.jsx)("div", {
|
|
364
365
|
css: (0, _ui.wrapperStyle)({
|
|
365
366
|
layout: layout,
|
|
366
367
|
isResized: !!pctWidth,
|
|
367
368
|
containerWidth: containerWidth || _editorSharedStyles.DEFAULT_EMBED_CARD_WIDTH,
|
|
368
369
|
fullWidthMode: fullWidthMode
|
|
369
370
|
})
|
|
370
|
-
},
|
|
371
|
+
}, (0, _react2.jsx)(_ui.Resizer, (0, _extends2.default)({}, this.props, {
|
|
371
372
|
width: initialWidth // Starting or initial width of embed <iframe> itself.
|
|
372
373
|
,
|
|
373
374
|
enable: enable,
|
|
@@ -9,6 +9,8 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
10
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
11
|
var _react = require("react");
|
|
12
|
+
/** @jsx jsx */
|
|
13
|
+
|
|
12
14
|
var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
|
|
13
15
|
var isRegularCardNode = _ref.isRegularCardNode,
|
|
14
16
|
url = _ref.url,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
/** @jsx jsx */
|
|
2
3
|
import React from 'react';
|
|
4
|
+
import { jsx } from '@emotion/react';
|
|
3
5
|
import PropTypes from 'prop-types';
|
|
4
6
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
5
7
|
import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
@@ -121,11 +123,11 @@ export class DatasourceComponent extends React.PureComponent {
|
|
|
121
123
|
|
|
122
124
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready
|
|
123
125
|
if (cardContext && cardContext.value) {
|
|
124
|
-
return
|
|
126
|
+
return jsx(EditorAnalyticsContext, {
|
|
125
127
|
editorView: this.props.view
|
|
126
|
-
},
|
|
128
|
+
}, jsx(cardContext.Provider, {
|
|
127
129
|
value: cardContext.value
|
|
128
|
-
},
|
|
130
|
+
}, jsx(DatasourceTableView, {
|
|
129
131
|
datasourceId: datasource.id,
|
|
130
132
|
parameters: datasource.parameters,
|
|
131
133
|
visibleColumnKeys: visibleColumnKeys,
|
|
@@ -168,16 +170,16 @@ export class Datasource extends ReactNodeView {
|
|
|
168
170
|
const {
|
|
169
171
|
attrs
|
|
170
172
|
} = this.node;
|
|
171
|
-
return
|
|
173
|
+
return jsx(DatasourceErrorBoundary, {
|
|
172
174
|
unsupportedComponent: UnsupportedInline,
|
|
173
175
|
view: this.view,
|
|
174
176
|
url: attrs.url
|
|
175
|
-
},
|
|
177
|
+
}, jsx("div", {
|
|
176
178
|
className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
|
|
177
179
|
style: {
|
|
178
180
|
minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
|
|
179
181
|
}
|
|
180
|
-
},
|
|
182
|
+
}, jsx(DatasourceComponent, {
|
|
181
183
|
node: this.node,
|
|
182
184
|
view: this.view,
|
|
183
185
|
getPos: this.getPos
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
1
2
|
import { memo, useCallback, useMemo, useState } from 'react';
|
|
2
|
-
import { css } from '@emotion/react';
|
|
3
|
+
import { css, jsx } from '@emotion/react';
|
|
3
4
|
import rafSchedule from 'raf-schd';
|
|
4
5
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
5
6
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
@@ -107,7 +108,7 @@ const InlineCard = ({
|
|
|
107
108
|
url
|
|
108
109
|
});
|
|
109
110
|
}, [onResolve]);
|
|
110
|
-
const innerCard = useMemo(() =>
|
|
111
|
+
const innerCard = useMemo(() => jsx(SmartCard, {
|
|
111
112
|
key: url,
|
|
112
113
|
url: url,
|
|
113
114
|
data: data,
|
|
@@ -117,11 +118,12 @@ const InlineCard = ({
|
|
|
117
118
|
onResolve: onResolve,
|
|
118
119
|
onError: onError,
|
|
119
120
|
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
|
|
120
|
-
showServerActions: showServerActions
|
|
121
|
-
|
|
121
|
+
showServerActions: showServerActions,
|
|
122
|
+
isHovered: isHovered
|
|
123
|
+
}), [data, isHovered, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
|
|
122
124
|
|
|
123
125
|
// BEGIN: Awareness (To be revisited in EDM-8508)
|
|
124
|
-
const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ?
|
|
126
|
+
const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
|
|
125
127
|
isSelected: isSelected,
|
|
126
128
|
isVisible: isInserted || isHovered || isSelected,
|
|
127
129
|
onMouseEnter: () => setIsHovered(true),
|
|
@@ -130,14 +132,14 @@ const InlineCard = ({
|
|
|
130
132
|
}, innerCard) : innerCard, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
|
|
131
133
|
const card = useMemo(() => {
|
|
132
134
|
var _cardContext$value;
|
|
133
|
-
return
|
|
135
|
+
return jsx("span", {
|
|
134
136
|
css: shouldShowLinkPulse && loaderWrapperStyles,
|
|
135
137
|
className: "card"
|
|
136
|
-
}, shouldShowLinkPulse ?
|
|
138
|
+
}, shouldShowLinkPulse ? jsx(AnalyticsContext, {
|
|
137
139
|
data: {
|
|
138
140
|
attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
|
|
139
141
|
}
|
|
140
|
-
},
|
|
142
|
+
}, jsx(DiscoveryPulse, {
|
|
141
143
|
localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
|
|
142
144
|
localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
|
|
143
145
|
discoveryMode: "start"
|
|
@@ -147,7 +149,7 @@ const InlineCard = ({
|
|
|
147
149
|
|
|
148
150
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready,
|
|
149
151
|
// otherwise if we got data, we can render the card directly since it doesn't need the Provider
|
|
150
|
-
return cardContext && cardContext.value ?
|
|
152
|
+
return cardContext && cardContext.value ? jsx(cardContext.Provider, {
|
|
151
153
|
value: cardContext.value
|
|
152
154
|
}, card) : data ? card : null;
|
|
153
155
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { css, jsx } from '@emotion/react';
|
|
2
3
|
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
3
4
|
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
|
|
4
5
|
import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
|
|
@@ -43,14 +44,14 @@ const EditDatasourceButtonWithCardContext = ({
|
|
|
43
44
|
editorView.focus();
|
|
44
45
|
}
|
|
45
46
|
};
|
|
46
|
-
return
|
|
47
|
+
return jsx(Flex, null, jsx(Button, {
|
|
47
48
|
css: buttonStyles,
|
|
48
49
|
title: intl.formatMessage(messages.datasourceTitle),
|
|
49
|
-
icon:
|
|
50
|
+
icon: jsx(SmallerEditIcon, null),
|
|
50
51
|
selected: false,
|
|
51
52
|
onClick: () => dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi)),
|
|
52
53
|
testId: 'card-edit-datasource-button'
|
|
53
|
-
}),
|
|
54
|
+
}), jsx(Separator, null));
|
|
54
55
|
};
|
|
55
56
|
export const EditDatasourceButton = ({
|
|
56
57
|
intl,
|
|
@@ -59,9 +60,9 @@ export const EditDatasourceButton = ({
|
|
|
59
60
|
editorView,
|
|
60
61
|
editorState
|
|
61
62
|
}) => {
|
|
62
|
-
return
|
|
63
|
+
return jsx(CardContextProvider, null, ({
|
|
63
64
|
cardContext
|
|
64
|
-
}) =>
|
|
65
|
+
}) => jsx(EditDatasourceButtonWithCardContext, {
|
|
65
66
|
url: url,
|
|
66
67
|
intl: intl,
|
|
67
68
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/** @jsx jsx */
|
|
3
|
+
|
|
2
4
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
-
import { css } from '@emotion/react';
|
|
5
|
+
import { css, jsx } from '@emotion/react';
|
|
4
6
|
import debounce from 'lodash/debounce';
|
|
5
7
|
import { useIntl } from 'react-intl-next';
|
|
6
8
|
import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
|
|
@@ -215,20 +217,20 @@ const InlineCardOverlay = ({
|
|
|
215
217
|
const label = intl.formatMessage(messages.inlineOverlay);
|
|
216
218
|
const icon = useMemo(() => {
|
|
217
219
|
const IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
|
|
218
|
-
return
|
|
220
|
+
return jsx(IconComponent, {
|
|
219
221
|
label: label,
|
|
220
222
|
size: "small",
|
|
221
223
|
testId: `${testId}-${isSelected ? 'open' : 'close'}`
|
|
222
224
|
});
|
|
223
225
|
}, [isSelected, label, testId]);
|
|
224
|
-
return
|
|
226
|
+
return jsx("span", _extends({}, props, {
|
|
225
227
|
css: containerStyles,
|
|
226
228
|
ref: containerRef
|
|
227
|
-
}), children, isVisible && showOverlay &&
|
|
229
|
+
}), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
|
|
228
230
|
"aria-hidden": "true",
|
|
229
231
|
className: OVERLAY_MARKER_CLASSNAME,
|
|
230
232
|
css: markerStyles
|
|
231
|
-
}, ZERO_WIDTH_JOINER),
|
|
233
|
+
}, ZERO_WIDTH_JOINER), jsx("a", {
|
|
232
234
|
className: OVERLAY_CLASSNAME,
|
|
233
235
|
css: [overlayStyles, browser.safari && safariOverlayStyles],
|
|
234
236
|
style: {
|
|
@@ -238,11 +240,11 @@ const InlineCardOverlay = ({
|
|
|
238
240
|
href: url,
|
|
239
241
|
onClick: e => e.preventDefault(),
|
|
240
242
|
tabIndex: -1
|
|
241
|
-
}, showLabel &&
|
|
243
|
+
}, showLabel && jsx("span", {
|
|
242
244
|
className: OVERLAY_LABEL_CLASSNAME,
|
|
243
245
|
css: textStyles,
|
|
244
246
|
"data-testid": `${testId}-label`
|
|
245
|
-
}, label),
|
|
247
|
+
}, label), jsx("span", {
|
|
246
248
|
css: iconStyles
|
|
247
249
|
}, icon))));
|
|
248
250
|
};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
1
2
|
import { useCallback, useMemo } from 'react';
|
|
2
|
-
import { css } from '@emotion/react';
|
|
3
|
+
import { css, jsx } from '@emotion/react';
|
|
3
4
|
import { injectIntl } from 'react-intl-next';
|
|
4
5
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
5
6
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -39,7 +40,7 @@ export const LayoutButton = ({
|
|
|
39
40
|
if (!targetElement) {
|
|
40
41
|
return null;
|
|
41
42
|
}
|
|
42
|
-
return
|
|
43
|
+
return jsx(Popup, {
|
|
43
44
|
mountTo: mountPoint,
|
|
44
45
|
boundariesElement: boundariesElement,
|
|
45
46
|
scrollableElement: scrollableElement,
|
|
@@ -49,14 +50,14 @@ export const LayoutButton = ({
|
|
|
49
50
|
forcePlacement: true,
|
|
50
51
|
stick: true,
|
|
51
52
|
ariaLabel: title
|
|
52
|
-
},
|
|
53
|
+
}, jsx(ToolbarButton, {
|
|
53
54
|
testId: testId,
|
|
54
55
|
css: toolbarButtonWrapperStyles,
|
|
55
56
|
title: title,
|
|
56
57
|
onClick: handleClick,
|
|
57
|
-
iconBefore: layout === 'full-width' ?
|
|
58
|
+
iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
|
|
58
59
|
label: title
|
|
59
|
-
}) :
|
|
60
|
+
}) : jsx(ExpandIcon, {
|
|
60
61
|
label: title
|
|
61
62
|
})
|
|
62
63
|
}));
|
|
@@ -100,7 +101,7 @@ const LayoutButtonWrapper = ({
|
|
|
100
101
|
if (!isDatasource) {
|
|
101
102
|
return null;
|
|
102
103
|
}
|
|
103
|
-
return
|
|
104
|
+
return jsx(LayoutButton, {
|
|
104
105
|
mountPoint: mountPoint,
|
|
105
106
|
scrollableElement: scrollableElement,
|
|
106
107
|
boundariesElement: boundariesElement,
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
|
+
/** @jsx jsx */
|
|
3
4
|
import React from 'react';
|
|
5
|
+
import { jsx } from '@emotion/react';
|
|
4
6
|
import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
|
|
5
7
|
import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
|
|
6
8
|
import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
@@ -285,7 +287,7 @@ export default class ResizableEmbedCard extends React.Component {
|
|
|
285
287
|
paddingBottom: `calc(${(1 / aspectRatio * 100).toFixed(3)}% + ${embedHeaderHeight}px)`
|
|
286
288
|
};
|
|
287
289
|
}
|
|
288
|
-
return
|
|
290
|
+
return jsx("span", {
|
|
289
291
|
"data-testid": 'resizable-embed-card-height-definer',
|
|
290
292
|
style: {
|
|
291
293
|
display: 'block',
|
|
@@ -330,17 +332,17 @@ export default class ResizableEmbedCard extends React.Component {
|
|
|
330
332
|
};
|
|
331
333
|
|
|
332
334
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
333
|
-
return
|
|
335
|
+
return jsx("div", {
|
|
334
336
|
css: embedSpacingStyles,
|
|
335
337
|
"data-testid": "resizable-embed-card-spacing"
|
|
336
|
-
},
|
|
338
|
+
}, jsx("div", {
|
|
337
339
|
css: wrapperStyle({
|
|
338
340
|
layout,
|
|
339
341
|
isResized: !!pctWidth,
|
|
340
342
|
containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
|
|
341
343
|
fullWidthMode
|
|
342
344
|
})
|
|
343
|
-
},
|
|
345
|
+
}, jsx(Resizer, _extends({}, this.props, {
|
|
344
346
|
width: initialWidth // Starting or initial width of embed <iframe> itself.
|
|
345
347
|
,
|
|
346
348
|
enable: enable,
|
|
@@ -9,7 +9,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
9
9
|
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; }
|
|
10
10
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
11
11
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
12
|
+
/** @jsx jsx */
|
|
12
13
|
import React from 'react';
|
|
14
|
+
import { jsx } from '@emotion/react';
|
|
13
15
|
import PropTypes from 'prop-types';
|
|
14
16
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
15
17
|
import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
|
|
@@ -142,11 +144,11 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
142
144
|
|
|
143
145
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready
|
|
144
146
|
if (cardContext && cardContext.value) {
|
|
145
|
-
return
|
|
147
|
+
return jsx(EditorAnalyticsContext, {
|
|
146
148
|
editorView: this.props.view
|
|
147
|
-
},
|
|
149
|
+
}, jsx(cardContext.Provider, {
|
|
148
150
|
value: cardContext.value
|
|
149
|
-
},
|
|
151
|
+
}, jsx(DatasourceTableView, {
|
|
150
152
|
datasourceId: datasource.id,
|
|
151
153
|
parameters: datasource.parameters,
|
|
152
154
|
visibleColumnKeys: visibleColumnKeys,
|
|
@@ -196,16 +198,16 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
196
198
|
key: "render",
|
|
197
199
|
value: function render() {
|
|
198
200
|
var attrs = this.node.attrs;
|
|
199
|
-
return
|
|
201
|
+
return jsx(DatasourceErrorBoundary, {
|
|
200
202
|
unsupportedComponent: UnsupportedInline,
|
|
201
203
|
view: this.view,
|
|
202
204
|
url: attrs.url
|
|
203
|
-
},
|
|
205
|
+
}, jsx("div", {
|
|
204
206
|
className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
|
|
205
207
|
style: {
|
|
206
208
|
minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
|
|
207
209
|
}
|
|
208
|
-
},
|
|
210
|
+
}, jsx(DatasourceComponent, {
|
|
209
211
|
node: this.node,
|
|
210
212
|
view: this.view,
|
|
211
213
|
getPos: this.getPos
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
+
/** @jsx jsx */
|
|
2
3
|
import { memo, useCallback, useMemo, useState } from 'react';
|
|
3
|
-
import { css } from '@emotion/react';
|
|
4
|
+
import { css, jsx } from '@emotion/react';
|
|
4
5
|
import rafSchedule from 'raf-schd';
|
|
5
6
|
import { AnalyticsContext } from '@atlaskit/analytics-next';
|
|
6
7
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
@@ -113,7 +114,7 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
113
114
|
});
|
|
114
115
|
}, [onResolve]);
|
|
115
116
|
var innerCard = useMemo(function () {
|
|
116
|
-
return
|
|
117
|
+
return jsx(SmartCard, {
|
|
117
118
|
key: url,
|
|
118
119
|
url: url,
|
|
119
120
|
data: data,
|
|
@@ -123,13 +124,14 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
123
124
|
onResolve: onResolve,
|
|
124
125
|
onError: onError,
|
|
125
126
|
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
|
|
126
|
-
showServerActions: showServerActions
|
|
127
|
+
showServerActions: showServerActions,
|
|
128
|
+
isHovered: isHovered
|
|
127
129
|
});
|
|
128
|
-
}, [data, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
|
|
130
|
+
}, [data, isHovered, onError, onResolve, scrollContainer, showServerActions, url, useAlternativePreloader]);
|
|
129
131
|
|
|
130
132
|
// BEGIN: Awareness (To be revisited in EDM-8508)
|
|
131
133
|
var cardWithOverlay = useMemo(function () {
|
|
132
|
-
return shouldShowLinkOverlay ?
|
|
134
|
+
return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
|
|
133
135
|
isSelected: isSelected,
|
|
134
136
|
isVisible: isInserted || isHovered || isSelected,
|
|
135
137
|
onMouseEnter: function onMouseEnter() {
|
|
@@ -143,14 +145,14 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
143
145
|
}, [innerCard, isHovered, isSelected, isInserted, shouldShowLinkOverlay, url]);
|
|
144
146
|
var card = useMemo(function () {
|
|
145
147
|
var _cardContext$value;
|
|
146
|
-
return
|
|
148
|
+
return jsx("span", {
|
|
147
149
|
css: shouldShowLinkPulse && loaderWrapperStyles,
|
|
148
150
|
className: "card"
|
|
149
|
-
}, shouldShowLinkPulse ?
|
|
151
|
+
}, shouldShowLinkPulse ? jsx(AnalyticsContext, {
|
|
150
152
|
data: {
|
|
151
153
|
attributes: getResolvedAttributesFromStore(url, 'inline', cardContext === null || cardContext === void 0 || (_cardContext$value = cardContext.value) === null || _cardContext$value === void 0 ? void 0 : _cardContext$value.store)
|
|
152
154
|
}
|
|
153
|
-
},
|
|
155
|
+
}, jsx(DiscoveryPulse, {
|
|
154
156
|
localStorageKey: LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK,
|
|
155
157
|
localStorageKeyExpirationInMs: ONE_DAY_IN_MILLISECONDS,
|
|
156
158
|
discoveryMode: "start"
|
|
@@ -160,7 +162,7 @@ var InlineCard = function InlineCard(_ref) {
|
|
|
160
162
|
|
|
161
163
|
// [WS-2307]: we only render card wrapped into a Provider when the value is ready,
|
|
162
164
|
// otherwise if we got data, we can render the card directly since it doesn't need the Provider
|
|
163
|
-
return cardContext && cardContext.value ?
|
|
165
|
+
return cardContext && cardContext.value ? jsx(cardContext.Provider, {
|
|
164
166
|
value: cardContext.value
|
|
165
167
|
}, card) : data ? card : null;
|
|
166
168
|
};
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import { css, jsx } from '@emotion/react';
|
|
2
3
|
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
3
4
|
import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
|
|
4
5
|
import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
|
|
@@ -41,16 +42,16 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
|
|
|
41
42
|
editorView.focus();
|
|
42
43
|
}
|
|
43
44
|
};
|
|
44
|
-
return
|
|
45
|
+
return jsx(Flex, null, jsx(Button, {
|
|
45
46
|
css: buttonStyles,
|
|
46
47
|
title: intl.formatMessage(messages.datasourceTitle),
|
|
47
|
-
icon:
|
|
48
|
+
icon: jsx(SmallerEditIcon, null),
|
|
48
49
|
selected: false,
|
|
49
50
|
onClick: function onClick() {
|
|
50
51
|
return dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi));
|
|
51
52
|
},
|
|
52
53
|
testId: 'card-edit-datasource-button'
|
|
53
|
-
}),
|
|
54
|
+
}), jsx(Separator, null));
|
|
54
55
|
};
|
|
55
56
|
export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
|
|
56
57
|
var intl = _ref2.intl,
|
|
@@ -58,9 +59,9 @@ export var EditDatasourceButton = function EditDatasourceButton(_ref2) {
|
|
|
58
59
|
url = _ref2.url,
|
|
59
60
|
editorView = _ref2.editorView,
|
|
60
61
|
editorState = _ref2.editorState;
|
|
61
|
-
return
|
|
62
|
+
return jsx(CardContextProvider, null, function (_ref3) {
|
|
62
63
|
var cardContext = _ref3.cardContext;
|
|
63
|
-
return
|
|
64
|
+
return jsx(EditDatasourceButtonWithCardContext, {
|
|
64
65
|
url: url,
|
|
65
66
|
intl: intl,
|
|
66
67
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
@@ -5,8 +5,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
5
5
|
var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
|
|
6
6
|
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; }
|
|
7
7
|
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; }
|
|
8
|
+
/** @jsx jsx */
|
|
9
|
+
|
|
8
10
|
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
|
|
9
|
-
import { css } from '@emotion/react';
|
|
11
|
+
import { css, jsx } from '@emotion/react';
|
|
10
12
|
import debounce from 'lodash/debounce';
|
|
11
13
|
import { useIntl } from 'react-intl-next';
|
|
12
14
|
import { browser, ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
|
|
@@ -221,20 +223,20 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
|
|
|
221
223
|
var label = intl.formatMessage(messages.inlineOverlay);
|
|
222
224
|
var icon = useMemo(function () {
|
|
223
225
|
var IconComponent = isSelected ? HipchatChevronUpIcon : HipchatChevronDownIcon;
|
|
224
|
-
return
|
|
226
|
+
return jsx(IconComponent, {
|
|
225
227
|
label: label,
|
|
226
228
|
size: "small",
|
|
227
229
|
testId: "".concat(testId, "-").concat(isSelected ? 'open' : 'close')
|
|
228
230
|
});
|
|
229
231
|
}, [isSelected, label, testId]);
|
|
230
|
-
return
|
|
232
|
+
return jsx("span", _extends({}, props, {
|
|
231
233
|
css: containerStyles,
|
|
232
234
|
ref: containerRef
|
|
233
|
-
}), children, isVisible && showOverlay &&
|
|
235
|
+
}), children, isVisible && showOverlay && jsx(React.Fragment, null, jsx("span", {
|
|
234
236
|
"aria-hidden": "true",
|
|
235
237
|
className: OVERLAY_MARKER_CLASSNAME,
|
|
236
238
|
css: markerStyles
|
|
237
|
-
}, ZERO_WIDTH_JOINER),
|
|
239
|
+
}, ZERO_WIDTH_JOINER), jsx("a", {
|
|
238
240
|
className: OVERLAY_CLASSNAME,
|
|
239
241
|
css: [overlayStyles, browser.safari && safariOverlayStyles],
|
|
240
242
|
style: {
|
|
@@ -246,11 +248,11 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
|
|
|
246
248
|
return e.preventDefault();
|
|
247
249
|
},
|
|
248
250
|
tabIndex: -1
|
|
249
|
-
}, showLabel &&
|
|
251
|
+
}, showLabel && jsx("span", {
|
|
250
252
|
className: OVERLAY_LABEL_CLASSNAME,
|
|
251
253
|
css: textStyles,
|
|
252
254
|
"data-testid": "".concat(testId, "-label")
|
|
253
|
-
}, label),
|
|
255
|
+
}, label), jsx("span", {
|
|
254
256
|
css: iconStyles
|
|
255
257
|
}, icon))));
|
|
256
258
|
};
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
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
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
|
+
/** @jsx jsx */
|
|
4
5
|
import { useCallback, useMemo } from 'react';
|
|
5
|
-
import { css } from '@emotion/react';
|
|
6
|
+
import { css, jsx } from '@emotion/react';
|
|
6
7
|
import { injectIntl } from 'react-intl-next';
|
|
7
8
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
8
9
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
@@ -41,7 +42,7 @@ export var LayoutButton = function LayoutButton(_ref) {
|
|
|
41
42
|
if (!targetElement) {
|
|
42
43
|
return null;
|
|
43
44
|
}
|
|
44
|
-
return
|
|
45
|
+
return jsx(Popup, {
|
|
45
46
|
mountTo: mountPoint,
|
|
46
47
|
boundariesElement: boundariesElement,
|
|
47
48
|
scrollableElement: scrollableElement,
|
|
@@ -51,14 +52,14 @@ export var LayoutButton = function LayoutButton(_ref) {
|
|
|
51
52
|
forcePlacement: true,
|
|
52
53
|
stick: true,
|
|
53
54
|
ariaLabel: title
|
|
54
|
-
},
|
|
55
|
+
}, jsx(ToolbarButton, {
|
|
55
56
|
testId: testId,
|
|
56
57
|
css: toolbarButtonWrapperStyles,
|
|
57
58
|
title: title,
|
|
58
59
|
onClick: handleClick,
|
|
59
|
-
iconBefore: layout === 'full-width' ?
|
|
60
|
+
iconBefore: layout === 'full-width' ? jsx(CollapseIcon, {
|
|
60
61
|
label: title
|
|
61
|
-
}) :
|
|
62
|
+
}) : jsx(ExpandIcon, {
|
|
62
63
|
label: title
|
|
63
64
|
})
|
|
64
65
|
}));
|
|
@@ -96,7 +97,7 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
|
|
|
96
97
|
if (!isDatasource) {
|
|
97
98
|
return null;
|
|
98
99
|
}
|
|
99
|
-
return
|
|
100
|
+
return jsx(LayoutButton, {
|
|
100
101
|
mountPoint: mountPoint,
|
|
101
102
|
scrollableElement: scrollableElement,
|
|
102
103
|
boundariesElement: boundariesElement,
|
|
@@ -10,7 +10,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
10
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; }
|
|
11
11
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
12
12
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
13
|
+
/** @jsx jsx */
|
|
13
14
|
import React from 'react';
|
|
15
|
+
import { jsx } from '@emotion/react';
|
|
14
16
|
import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
|
|
15
17
|
import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
|
|
16
18
|
import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
@@ -304,7 +306,7 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
|
|
|
304
306
|
paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(embedHeaderHeight, "px)")
|
|
305
307
|
};
|
|
306
308
|
}
|
|
307
|
-
return
|
|
309
|
+
return jsx("span", {
|
|
308
310
|
"data-testid": 'resizable-embed-card-height-definer',
|
|
309
311
|
style: _objectSpread({
|
|
310
312
|
display: 'block',
|
|
@@ -350,17 +352,17 @@ var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
|
|
|
350
352
|
};
|
|
351
353
|
|
|
352
354
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
353
|
-
return
|
|
355
|
+
return jsx("div", {
|
|
354
356
|
css: embedSpacingStyles,
|
|
355
357
|
"data-testid": "resizable-embed-card-spacing"
|
|
356
|
-
},
|
|
358
|
+
}, jsx("div", {
|
|
357
359
|
css: wrapperStyle({
|
|
358
360
|
layout: layout,
|
|
359
361
|
isResized: !!pctWidth,
|
|
360
362
|
containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
|
|
361
363
|
fullWidthMode: fullWidthMode
|
|
362
364
|
})
|
|
363
|
-
},
|
|
365
|
+
}, jsx(Resizer, _extends({}, this.props, {
|
|
364
366
|
width: initialWidth // Starting or initial width of embed <iframe> itself.
|
|
365
367
|
,
|
|
366
368
|
enable: enable,
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
3
|
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
4
|
+
/** @jsx jsx */
|
|
4
5
|
import { useEffect, useState } from 'react';
|
|
5
6
|
export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
|
|
6
7
|
var isRegularCardNode = _ref.isRegularCardNode,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-card",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.12",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@atlaskit/adf-schema": "^35.0.0",
|
|
35
35
|
"@atlaskit/analytics-next": "^9.1.0",
|
|
36
|
-
"@atlaskit/custom-steps": "^0.0.
|
|
36
|
+
"@atlaskit/custom-steps": "^0.0.7",
|
|
37
37
|
"@atlaskit/editor-common": "^76.25.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^0.3.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^0.2.0",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@atlaskit/linking-types": "^8.5.0",
|
|
54
54
|
"@atlaskit/platform-feature-flags": "^0.2.0",
|
|
55
55
|
"@atlaskit/primitives": "^1.13.0",
|
|
56
|
-
"@atlaskit/smart-card": "^26.
|
|
56
|
+
"@atlaskit/smart-card": "^26.43.0",
|
|
57
57
|
"@atlaskit/theme": "^12.6.0",
|
|
58
58
|
"@atlaskit/tokens": "^1.29.0",
|
|
59
59
|
"@babel/runtime": "^7.0.0",
|