@atlaskit/editor-plugin-card 4.3.6 → 4.3.8
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 +18 -0
- package/dist/cjs/nodeviews/blockCard.js +11 -1
- package/dist/cjs/nodeviews/inlineCard.js +14 -1
- package/dist/cjs/toolbar.js +25 -64
- package/dist/cjs/ui/EditLinkToolbar.js +2 -2
- package/dist/cjs/ui/EditToolbarButton/EditToolbarButtonPresentation.js +2 -2
- package/dist/cjs/ui/EditToolbarButton/index.js +2 -2
- package/dist/cjs/ui/HyperlinkToolbarAppearance.js +1 -9
- package/dist/cjs/ui/editDatasourceAction.js +31 -0
- package/dist/es2019/nodeviews/blockCard.js +11 -1
- package/dist/es2019/nodeviews/inlineCard.js +14 -1
- package/dist/es2019/toolbar.js +25 -62
- package/dist/es2019/ui/EditLinkToolbar.js +1 -1
- package/dist/es2019/ui/EditToolbarButton/EditToolbarButtonPresentation.js +1 -1
- package/dist/es2019/ui/EditToolbarButton/index.js +1 -1
- package/dist/es2019/ui/HyperlinkToolbarAppearance.js +1 -9
- package/dist/es2019/ui/editDatasourceAction.js +25 -0
- package/dist/esm/nodeviews/blockCard.js +11 -1
- package/dist/esm/nodeviews/inlineCard.js +14 -1
- package/dist/esm/toolbar.js +27 -66
- package/dist/esm/ui/EditLinkToolbar.js +1 -1
- package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js +1 -1
- package/dist/esm/ui/EditToolbarButton/index.js +1 -1
- package/dist/esm/ui/HyperlinkToolbarAppearance.js +1 -9
- package/dist/esm/ui/editDatasourceAction.js +25 -0
- package/dist/types/ui/EditLinkToolbar.d.ts +1 -1
- package/dist/types/ui/editDatasourceAction.d.ts +4 -0
- package/dist/types-ts4.5/ui/EditLinkToolbar.d.ts +1 -1
- package/dist/types-ts4.5/ui/editDatasourceAction.d.ts +4 -0
- package/package.json +7 -7
- package/dist/cjs/ui/EditDatasourceButton.js +0 -113
- package/dist/es2019/ui/EditDatasourceButton.js +0 -108
- package/dist/esm/ui/EditDatasourceButton.js +0 -106
- package/dist/types/ui/EditDatasourceButton.d.ts +0 -18
- package/dist/types-ts4.5/ui/EditDatasourceButton.d.ts +0 -18
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 4.3.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#156301](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156301)
|
|
8
|
+
[`da531da92568b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/da531da92568b) -
|
|
9
|
+
Migrating tests to use url prop from @atlaskit/smart-card instead of deprecated data prop
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 4.3.7
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#155058](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155058)
|
|
17
|
+
[`789a3e0517247`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/789a3e0517247) -
|
|
18
|
+
[ux] Removing platform.linking-platform.enable-datasource-edit-dropdown-toolbar feature flag
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 4.3.6
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -92,7 +92,17 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
|
|
|
92
92
|
var _node$attrs = node.attrs,
|
|
93
93
|
url = _node$attrs.url,
|
|
94
94
|
data = _node$attrs.data;
|
|
95
|
-
var cardInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
95
|
+
var cardInner = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _platformFeatureFlags.fg)('linking-platform-migrate-deprecated-data-prop') ? /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
96
|
+
key: url,
|
|
97
|
+
url: url !== null && url !== void 0 ? url : data.url,
|
|
98
|
+
container: this.scrollContainer,
|
|
99
|
+
appearance: "block",
|
|
100
|
+
onClick: onClick,
|
|
101
|
+
onResolve: this.onResolve,
|
|
102
|
+
onError: this.onError,
|
|
103
|
+
platform: 'web',
|
|
104
|
+
actionOptions: actionOptions
|
|
105
|
+
}) : /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
96
106
|
key: url,
|
|
97
107
|
url: url,
|
|
98
108
|
data: data,
|
|
@@ -78,7 +78,20 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
|
|
|
78
78
|
});
|
|
79
79
|
}, [onResolve]);
|
|
80
80
|
var card = (0, _react.useMemo)(function () {
|
|
81
|
-
return /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
81
|
+
return (0, _platformFeatureFlags.fg)('linking-platform-migrate-deprecated-data-prop') ? /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
82
|
+
key: url,
|
|
83
|
+
url: url !== null && url !== void 0 ? url : data.url,
|
|
84
|
+
appearance: "inline",
|
|
85
|
+
onClick: onClick,
|
|
86
|
+
container: scrollContainer,
|
|
87
|
+
onResolve: onResolve,
|
|
88
|
+
onError: onError,
|
|
89
|
+
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
|
|
90
|
+
actionOptions: actionOptions,
|
|
91
|
+
isHovered: isHovered,
|
|
92
|
+
showHoverPreview: showHoverPreview,
|
|
93
|
+
hoverPreviewOptions: hoverPreviewOptions
|
|
94
|
+
}) : /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
|
|
82
95
|
key: url,
|
|
83
96
|
url: url,
|
|
84
97
|
data: data,
|
package/dist/cjs/toolbar.js
CHANGED
|
@@ -15,7 +15,6 @@ var _card = require("@atlaskit/editor-common/card");
|
|
|
15
15
|
var _link = require("@atlaskit/editor-common/link");
|
|
16
16
|
var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
|
|
17
17
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
18
|
-
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
18
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
20
19
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
21
20
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
@@ -27,11 +26,9 @@ var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove
|
|
|
27
26
|
var _settings2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/settings"));
|
|
28
27
|
var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
|
|
29
28
|
var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
|
|
30
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
31
29
|
var _doc = require("./pm-plugins/doc");
|
|
32
30
|
var _main = require("./pm-plugins/main");
|
|
33
31
|
var _DatasourceAppearanceButton = require("./ui/DatasourceAppearanceButton");
|
|
34
|
-
var _EditDatasourceButton = require("./ui/EditDatasourceButton");
|
|
35
32
|
var _EditLinkToolbar = require("./ui/EditLinkToolbar");
|
|
36
33
|
var _EditToolbarButton = require("./ui/EditToolbarButton");
|
|
37
34
|
var _HyperlinkToolbarAppearance = require("./ui/HyperlinkToolbarAppearance");
|
|
@@ -192,7 +189,7 @@ var getToolbarViewedItem = function getToolbarViewedItem(url, display) {
|
|
|
192
189
|
};
|
|
193
190
|
var generateToolbarItems = function generateToolbarItems(state, intl, providerFactory, cardOptions, lpLinkPicker, linkPicker, pluginInjectionApi) {
|
|
194
191
|
return function (node) {
|
|
195
|
-
var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs
|
|
192
|
+
var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs;
|
|
196
193
|
var _titleUrlPairFromNode2 = (0, _utils3.titleUrlPairFromNode)(node),
|
|
197
194
|
url = _titleUrlPairFromNode2.url;
|
|
198
195
|
var _ref = (_pluginInjectionApi$a = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.analytics) !== null && _pluginInjectionApi$a !== void 0 ? _pluginInjectionApi$a : {},
|
|
@@ -212,9 +209,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
212
209
|
var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
|
|
213
210
|
hoverDecoration = _ref2.hoverDecoration;
|
|
214
211
|
var isDatasource = (0, _utils3.isDatasourceNode)(node);
|
|
215
|
-
var datasourceId = node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.datasource) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id;
|
|
216
212
|
var pluginState = _main.pluginKey.getState(state);
|
|
217
|
-
var shouldRenderDatasourceToolbar = isDatasource && cardOptions.allowDatasource && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$
|
|
213
|
+
var shouldRenderDatasourceToolbar = isDatasource && cardOptions.allowDatasource && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 || (_node$attrs = _node$attrs.datasource) === null || _node$attrs === void 0 ? void 0 : _node$attrs.id);
|
|
218
214
|
if (pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar) {
|
|
219
215
|
return [(0, _EditLinkToolbar.buildEditLinkToolbar)({
|
|
220
216
|
providerFactory: providerFactory,
|
|
@@ -227,8 +223,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
227
223
|
return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id, state, cardOptions, currentAppearance);
|
|
228
224
|
} else {
|
|
229
225
|
var inlineCard = state.schema.nodes.inlineCard;
|
|
230
|
-
var
|
|
231
|
-
var editItems = isEditDropdownEnabled ? [{
|
|
226
|
+
var editItems = cardOptions.allowDatasource ? [{
|
|
232
227
|
type: 'custom',
|
|
233
228
|
fallback: [],
|
|
234
229
|
render: function render(editorView) {
|
|
@@ -238,7 +233,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
238
233
|
intl: intl,
|
|
239
234
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
240
235
|
editorView: editorView,
|
|
241
|
-
onLinkEditClick: (0, _EditLinkToolbar.
|
|
236
|
+
onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
|
|
242
237
|
currentAppearance: currentAppearance
|
|
243
238
|
});
|
|
244
239
|
}
|
|
@@ -250,7 +245,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
250
245
|
title: intl.formatMessage(_messages.linkToolbarMessages.editLink),
|
|
251
246
|
showTitle: true,
|
|
252
247
|
testId: 'link-toolbar-edit-link-button',
|
|
253
|
-
onClick: (0, _EditLinkToolbar.
|
|
248
|
+
onClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true)
|
|
254
249
|
}, {
|
|
255
250
|
type: 'separator'
|
|
256
251
|
}];
|
|
@@ -343,23 +338,6 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
|
|
|
343
338
|
type: 'separator'
|
|
344
339
|
}]));
|
|
345
340
|
}
|
|
346
|
-
var shouldShowDatasourceEditButton = allowDatasource && !(0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
|
|
347
|
-
if (shouldShowDatasourceEditButton) {
|
|
348
|
-
toolbarItems.unshift({
|
|
349
|
-
type: 'custom',
|
|
350
|
-
fallback: [],
|
|
351
|
-
render: function render(editorView) {
|
|
352
|
-
return /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
|
|
353
|
-
datasourceId: datasourceId,
|
|
354
|
-
intl: intl,
|
|
355
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
356
|
-
url: url,
|
|
357
|
-
editorView: editorView,
|
|
358
|
-
currentAppearance: currentAppearance
|
|
359
|
-
});
|
|
360
|
-
}
|
|
361
|
-
});
|
|
362
|
-
}
|
|
363
341
|
return toolbarItems;
|
|
364
342
|
}
|
|
365
343
|
};
|
|
@@ -390,22 +368,8 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
|
|
|
390
368
|
};
|
|
391
369
|
};
|
|
392
370
|
var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) {
|
|
393
|
-
var _node$
|
|
371
|
+
var _node$attrs2;
|
|
394
372
|
var toolbarItems = [];
|
|
395
|
-
if ((0, _utils3.isDatasourceConfigEditable)(datasourceId) && !(0, _platformFeatureFlags.fg)('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
|
|
396
|
-
toolbarItems.push({
|
|
397
|
-
id: 'editor.edit.datasource',
|
|
398
|
-
type: 'button',
|
|
399
|
-
icon: _ui.SmallerEditIcon,
|
|
400
|
-
metadata: metadata,
|
|
401
|
-
className: 'datasource-edit',
|
|
402
|
-
title: intl.formatMessage(_messages.linkToolbarMessages.editDatasource),
|
|
403
|
-
onClick: (0, _EditDatasourceButton.editDatasource)(datasourceId, editorAnalyticsApi, 'datasource'),
|
|
404
|
-
testId: 'datasource-edit-button'
|
|
405
|
-
}, {
|
|
406
|
-
type: 'separator'
|
|
407
|
-
});
|
|
408
|
-
}
|
|
409
373
|
var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
|
|
410
374
|
// we do not show smart-link or the datasource icons when the node does not have a url to resolve
|
|
411
375
|
if (!metadata.url) {
|
|
@@ -454,26 +418,24 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
|
|
|
454
418
|
type: 'separator'
|
|
455
419
|
});
|
|
456
420
|
}
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
}
|
|
476
|
-
if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
|
|
421
|
+
toolbarItems.push({
|
|
422
|
+
type: 'custom',
|
|
423
|
+
fallback: [],
|
|
424
|
+
render: function render(editorView) {
|
|
425
|
+
return /*#__PURE__*/_react.default.createElement(_EditToolbarButton.EditToolbarButton, {
|
|
426
|
+
datasourceId: datasourceId,
|
|
427
|
+
node: node,
|
|
428
|
+
key: "edit-toolbar-item",
|
|
429
|
+
url: metadata.url,
|
|
430
|
+
intl: intl,
|
|
431
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
432
|
+
editorView: editorView,
|
|
433
|
+
onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, false),
|
|
434
|
+
currentAppearance: "datasource"
|
|
435
|
+
});
|
|
436
|
+
}
|
|
437
|
+
});
|
|
438
|
+
if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
|
|
477
439
|
toolbarItems.push({
|
|
478
440
|
id: 'editor.link.openLink',
|
|
479
441
|
type: 'button',
|
|
@@ -519,8 +481,7 @@ var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shoul
|
|
|
519
481
|
};
|
|
520
482
|
var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
|
|
521
483
|
return function (intl, link, onEditLink, metadata) {
|
|
522
|
-
var
|
|
523
|
-
var editLinkItem = isEditDropdownEnabled ? [{
|
|
484
|
+
var editLinkItem = options.allowDatasource ? [{
|
|
524
485
|
type: 'custom',
|
|
525
486
|
fallback: [],
|
|
526
487
|
render: function render(editorView) {
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.EditLinkToolbar = void 0;
|
|
8
8
|
exports.HyperlinkAddToolbarWithState = HyperlinkAddToolbarWithState;
|
|
9
|
-
exports.
|
|
9
|
+
exports.getEditLinkCallback = exports.editLinkToolbarConfig = exports.buildEditLinkToolbar = void 0;
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
@@ -133,7 +133,7 @@ var EditLinkToolbar = exports.EditLinkToolbar = /*#__PURE__*/function (_React$Co
|
|
|
133
133
|
}]);
|
|
134
134
|
return EditLinkToolbar;
|
|
135
135
|
}(_react.default.Component);
|
|
136
|
-
var
|
|
136
|
+
var getEditLinkCallback = exports.getEditLinkCallback = function getEditLinkCallback(editorAnalyticsApi, scrollIntoView) {
|
|
137
137
|
return function (state, dispatch) {
|
|
138
138
|
var type = 'hyperlink';
|
|
139
139
|
if (state.selection instanceof _state.NodeSelection) {
|
|
@@ -16,7 +16,7 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
|
|
|
16
16
|
var _menu = require("@atlaskit/menu");
|
|
17
17
|
var _primitives = require("@atlaskit/primitives");
|
|
18
18
|
var _utils = require("../../utils");
|
|
19
|
-
var
|
|
19
|
+
var _editDatasourceAction = require("../editDatasourceAction");
|
|
20
20
|
/**
|
|
21
21
|
* @jsxRuntime classic
|
|
22
22
|
* @jsx jsx
|
|
@@ -57,7 +57,7 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
|
|
|
57
57
|
}, [editorView, onLinkEditClick]);
|
|
58
58
|
var onEditDatasource = (0, _react.useCallback)(function () {
|
|
59
59
|
if (editorView && datasourceId) {
|
|
60
|
-
(0,
|
|
60
|
+
(0, _editDatasourceAction.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
|
|
61
61
|
(0, _utils.focusEditorView)(editorView);
|
|
62
62
|
}
|
|
63
63
|
}, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
|
|
@@ -17,9 +17,9 @@ var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-
|
|
|
17
17
|
var _menu = require("@atlaskit/menu");
|
|
18
18
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
19
|
var _primitives = require("@atlaskit/primitives");
|
|
20
|
-
var _EditDatasourceButton = require("../../ui/EditDatasourceButton");
|
|
21
20
|
var _utils = require("../../utils");
|
|
22
21
|
var _CardContextProvider = require("../CardContextProvider");
|
|
22
|
+
var _editDatasourceAction = require("../editDatasourceAction");
|
|
23
23
|
var _useFetchDatasourceDataInfo = require("../useFetchDatasourceDataInfo");
|
|
24
24
|
var _useFetchDatasourceInfo = require("../useFetchDatasourceInfo");
|
|
25
25
|
var _EditToolbarButtonPresentation = _interopRequireDefault(require("./EditToolbarButtonPresentation"));
|
|
@@ -89,7 +89,7 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
|
|
|
89
89
|
}, [cardContext === null || cardContext === void 0 ? void 0 : cardContext.store, datasourceId, url]);
|
|
90
90
|
var onEditDatasource = (0, _react.useCallback)(function () {
|
|
91
91
|
if (editorView && datasourceId) {
|
|
92
|
-
(0,
|
|
92
|
+
(0, _editDatasourceAction.editDatasource)(datasourceId, editorAnalyticsApi, currentAppearance, extensionKey)(editorView.state, editorView.dispatch);
|
|
93
93
|
(0, _utils.focusEditorView)(editorView);
|
|
94
94
|
}
|
|
95
95
|
}, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
|
|
@@ -12,10 +12,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
|
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
14
14
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
15
|
var _primitives = require("@atlaskit/primitives");
|
|
17
16
|
var _DatasourceAppearanceButton = require("./DatasourceAppearanceButton");
|
|
18
|
-
var _EditDatasourceButton = require("./EditDatasourceButton");
|
|
19
17
|
var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
|
|
20
18
|
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); }
|
|
21
19
|
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; }
|
|
@@ -136,13 +134,7 @@ function HyperlinkToolbarAppearance(props) {
|
|
|
136
134
|
if (!supportedUrlsMap.get(url)) {
|
|
137
135
|
return null;
|
|
138
136
|
}
|
|
139
|
-
return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null,
|
|
140
|
-
url: url,
|
|
141
|
-
intl: intl,
|
|
142
|
-
editorView: editorView,
|
|
143
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
144
|
-
currentAppearance: "url"
|
|
145
|
-
}), /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
|
|
137
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
|
|
146
138
|
key: "link-appearance",
|
|
147
139
|
url: url,
|
|
148
140
|
intl: intl,
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.editDatasource = void 0;
|
|
7
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
8
|
+
var _utils = require("@atlaskit/editor-common/utils");
|
|
9
|
+
var _actions = require("../pm-plugins/actions");
|
|
10
|
+
var editDatasource = exports.editDatasource = function editDatasource(datasourceId, editorAnalyticsApi, appearance, extensionKey) {
|
|
11
|
+
return function (state, dispatch) {
|
|
12
|
+
var datasourceType = (0, _utils.getDatasourceType)(datasourceId);
|
|
13
|
+
if (dispatch && datasourceType) {
|
|
14
|
+
var tr = state.tr;
|
|
15
|
+
(0, _actions.showDatasourceModal)(datasourceType)(tr);
|
|
16
|
+
editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
|
|
17
|
+
action: _analytics.ACTION.CLICKED,
|
|
18
|
+
actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
|
|
19
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.EDIT_DATASOURCE,
|
|
20
|
+
eventType: _analytics.EVENT_TYPE.UI,
|
|
21
|
+
attributes: {
|
|
22
|
+
extensionKey: extensionKey,
|
|
23
|
+
appearance: appearance
|
|
24
|
+
}
|
|
25
|
+
})(tr);
|
|
26
|
+
dispatch(tr);
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
return false;
|
|
30
|
+
};
|
|
31
|
+
};
|
|
@@ -76,7 +76,17 @@ export class BlockCardComponent extends React.PureComponent {
|
|
|
76
76
|
url,
|
|
77
77
|
data
|
|
78
78
|
} = node.attrs;
|
|
79
|
-
const cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SmartCard, {
|
|
79
|
+
const cardInner = /*#__PURE__*/React.createElement(React.Fragment, null, fg('linking-platform-migrate-deprecated-data-prop') ? /*#__PURE__*/React.createElement(SmartCard, {
|
|
80
|
+
key: url,
|
|
81
|
+
url: url !== null && url !== void 0 ? url : data.url,
|
|
82
|
+
container: this.scrollContainer,
|
|
83
|
+
appearance: "block",
|
|
84
|
+
onClick: onClick,
|
|
85
|
+
onResolve: this.onResolve,
|
|
86
|
+
onError: this.onError,
|
|
87
|
+
platform: 'web',
|
|
88
|
+
actionOptions: actionOptions
|
|
89
|
+
}) : /*#__PURE__*/React.createElement(SmartCard, {
|
|
80
90
|
key: url,
|
|
81
91
|
url: url,
|
|
82
92
|
data: data,
|
|
@@ -68,7 +68,20 @@ export const InlineCard = /*#__PURE__*/memo(({
|
|
|
68
68
|
url
|
|
69
69
|
});
|
|
70
70
|
}, [onResolve]);
|
|
71
|
-
const card = useMemo(() => /*#__PURE__*/React.createElement(SmartCard, {
|
|
71
|
+
const card = useMemo(() => fg('linking-platform-migrate-deprecated-data-prop') ? /*#__PURE__*/React.createElement(SmartCard, {
|
|
72
|
+
key: url,
|
|
73
|
+
url: url !== null && url !== void 0 ? url : data.url,
|
|
74
|
+
appearance: "inline",
|
|
75
|
+
onClick: onClick,
|
|
76
|
+
container: scrollContainer,
|
|
77
|
+
onResolve: onResolve,
|
|
78
|
+
onError: onError,
|
|
79
|
+
inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
|
|
80
|
+
actionOptions: actionOptions,
|
|
81
|
+
isHovered: isHovered,
|
|
82
|
+
showHoverPreview: showHoverPreview,
|
|
83
|
+
hoverPreviewOptions: hoverPreviewOptions
|
|
84
|
+
}) : /*#__PURE__*/React.createElement(SmartCard, {
|
|
72
85
|
key: url,
|
|
73
86
|
url: url,
|
|
74
87
|
data: data,
|
package/dist/es2019/toolbar.js
CHANGED
|
@@ -5,7 +5,6 @@ import { buildLayoutButtons, commandWithMetadata } from '@atlaskit/editor-common
|
|
|
5
5
|
import { getLinkPreferencesURLFromENV } from '@atlaskit/editor-common/link';
|
|
6
6
|
import commonMessages, { linkMessages, linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
7
7
|
import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atlaskit/editor-common/styles';
|
|
8
|
-
import { SmallerEditIcon } from '@atlaskit/editor-common/ui';
|
|
9
8
|
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
10
9
|
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
11
10
|
import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
|
|
@@ -17,17 +16,15 @@ import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
|
17
16
|
import CogIcon from '@atlaskit/icon/glyph/editor/settings';
|
|
18
17
|
import UnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
|
|
19
18
|
import OpenIcon from '@atlaskit/icon/glyph/shortcut';
|
|
20
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
21
19
|
import { changeSelectedCardToText } from './pm-plugins/doc';
|
|
22
20
|
import { pluginKey } from './pm-plugins/main';
|
|
23
21
|
import { DatasourceAppearanceButton } from './ui/DatasourceAppearanceButton';
|
|
24
|
-
import {
|
|
25
|
-
import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
|
|
22
|
+
import { buildEditLinkToolbar, editLinkToolbarConfig, getEditLinkCallback } from './ui/EditLinkToolbar';
|
|
26
23
|
import { EditToolbarButton } from './ui/EditToolbarButton';
|
|
27
24
|
import { HyperlinkToolbarAppearance } from './ui/HyperlinkToolbarAppearance';
|
|
28
25
|
import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
|
|
29
26
|
import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
|
|
30
|
-
import { appearanceForNodeType, displayInfoForCard, findCardInfo,
|
|
27
|
+
import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceNode, titleUrlPairFromNode } from './utils';
|
|
31
28
|
export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
|
|
32
29
|
if (!(state.selection instanceof NodeSelection)) {
|
|
33
30
|
return false;
|
|
@@ -180,7 +177,7 @@ const getToolbarViewedItem = (url, display) => {
|
|
|
180
177
|
}];
|
|
181
178
|
};
|
|
182
179
|
const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkPicker, linkPicker, pluginInjectionApi) => node => {
|
|
183
|
-
var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs, _node$attrs$datasourc
|
|
180
|
+
var _pluginInjectionApi$a, _pluginInjectionApi$d, _pluginInjectionApi$d2, _node$attrs, _node$attrs$datasourc;
|
|
184
181
|
const {
|
|
185
182
|
url
|
|
186
183
|
} = titleUrlPairFromNode(node);
|
|
@@ -204,9 +201,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
204
201
|
hoverDecoration
|
|
205
202
|
} = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
|
|
206
203
|
const isDatasource = isDatasourceNode(node);
|
|
207
|
-
const datasourceId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : (_node$attrs$datasourc = _node$attrs.datasource) === null || _node$attrs$datasourc === void 0 ? void 0 : _node$attrs$datasourc.id;
|
|
208
204
|
const pluginState = pluginKey.getState(state);
|
|
209
|
-
const shouldRenderDatasourceToolbar = isDatasource && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$
|
|
205
|
+
const shouldRenderDatasourceToolbar = isDatasource && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : (_node$attrs$datasourc = _node$attrs.datasource) === null || _node$attrs$datasourc === void 0 ? void 0 : _node$attrs$datasourc.id);
|
|
210
206
|
if (pluginState !== null && pluginState !== void 0 && pluginState.showLinkingToolbar) {
|
|
211
207
|
return [buildEditLinkToolbar({
|
|
212
208
|
providerFactory,
|
|
@@ -221,8 +217,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
221
217
|
const {
|
|
222
218
|
inlineCard
|
|
223
219
|
} = state.schema.nodes;
|
|
224
|
-
const
|
|
225
|
-
const editItems = isEditDropdownEnabled ? [{
|
|
220
|
+
const editItems = cardOptions.allowDatasource ? [{
|
|
226
221
|
type: 'custom',
|
|
227
222
|
fallback: [],
|
|
228
223
|
render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
|
|
@@ -231,7 +226,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
231
226
|
intl: intl,
|
|
232
227
|
editorAnalyticsApi: editorAnalyticsApi,
|
|
233
228
|
editorView: editorView,
|
|
234
|
-
onLinkEditClick:
|
|
229
|
+
onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
|
|
235
230
|
currentAppearance: currentAppearance
|
|
236
231
|
})
|
|
237
232
|
}] : [{
|
|
@@ -242,7 +237,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
242
237
|
title: intl.formatMessage(linkToolbarMessages.editLink),
|
|
243
238
|
showTitle: true,
|
|
244
239
|
testId: 'link-toolbar-edit-link-button',
|
|
245
|
-
onClick:
|
|
240
|
+
onClick: getEditLinkCallback(editorAnalyticsApi, true)
|
|
246
241
|
}, {
|
|
247
242
|
type: 'separator'
|
|
248
243
|
}];
|
|
@@ -333,21 +328,6 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
|
|
|
333
328
|
type: 'separator'
|
|
334
329
|
});
|
|
335
330
|
}
|
|
336
|
-
const shouldShowDatasourceEditButton = allowDatasource && !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar');
|
|
337
|
-
if (shouldShowDatasourceEditButton) {
|
|
338
|
-
toolbarItems.unshift({
|
|
339
|
-
type: 'custom',
|
|
340
|
-
fallback: [],
|
|
341
|
-
render: editorView => /*#__PURE__*/React.createElement(EditDatasourceButton, {
|
|
342
|
-
datasourceId: datasourceId,
|
|
343
|
-
intl: intl,
|
|
344
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
345
|
-
url: url,
|
|
346
|
-
editorView: editorView,
|
|
347
|
-
currentAppearance: currentAppearance
|
|
348
|
-
})
|
|
349
|
-
});
|
|
350
|
-
}
|
|
351
331
|
return toolbarItems;
|
|
352
332
|
}
|
|
353
333
|
};
|
|
@@ -377,22 +357,8 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
|
|
|
377
357
|
};
|
|
378
358
|
};
|
|
379
359
|
const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance) => {
|
|
380
|
-
var _node$
|
|
360
|
+
var _node$attrs2;
|
|
381
361
|
const toolbarItems = [];
|
|
382
|
-
if (isDatasourceConfigEditable(datasourceId) && !fg('platform.linking-platform.enable-datasource-edit-dropdown-toolbar')) {
|
|
383
|
-
toolbarItems.push({
|
|
384
|
-
id: 'editor.edit.datasource',
|
|
385
|
-
type: 'button',
|
|
386
|
-
icon: SmallerEditIcon,
|
|
387
|
-
metadata: metadata,
|
|
388
|
-
className: 'datasource-edit',
|
|
389
|
-
title: intl.formatMessage(linkToolbarMessages.editDatasource),
|
|
390
|
-
onClick: editDatasource(datasourceId, editorAnalyticsApi, 'datasource'),
|
|
391
|
-
testId: 'datasource-edit-button'
|
|
392
|
-
}, {
|
|
393
|
-
type: 'separator'
|
|
394
|
-
});
|
|
395
|
-
}
|
|
396
362
|
const canShowAppearanceSwitch = () => {
|
|
397
363
|
// we do not show smart-link or the datasource icons when the node does not have a url to resolve
|
|
398
364
|
if (!metadata.url) {
|
|
@@ -443,24 +409,22 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
|
|
|
443
409
|
type: 'separator'
|
|
444
410
|
});
|
|
445
411
|
}
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
}
|
|
463
|
-
if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {
|
|
412
|
+
toolbarItems.push({
|
|
413
|
+
type: 'custom',
|
|
414
|
+
fallback: [],
|
|
415
|
+
render: editorView => /*#__PURE__*/React.createElement(EditToolbarButton, {
|
|
416
|
+
datasourceId: datasourceId,
|
|
417
|
+
node: node,
|
|
418
|
+
key: "edit-toolbar-item",
|
|
419
|
+
url: metadata.url,
|
|
420
|
+
intl: intl,
|
|
421
|
+
editorAnalyticsApi: editorAnalyticsApi,
|
|
422
|
+
editorView: editorView,
|
|
423
|
+
onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, false),
|
|
424
|
+
currentAppearance: "datasource"
|
|
425
|
+
})
|
|
426
|
+
});
|
|
427
|
+
if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
|
|
464
428
|
toolbarItems.push({
|
|
465
429
|
id: 'editor.link.openLink',
|
|
466
430
|
type: 'button',
|
|
@@ -506,8 +470,7 @@ export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDis
|
|
|
506
470
|
};
|
|
507
471
|
export const getStartingToolbarItems = (options, api) => {
|
|
508
472
|
return (intl, link, onEditLink, metadata) => {
|
|
509
|
-
const
|
|
510
|
-
const editLinkItem = isEditDropdownEnabled ? [{
|
|
473
|
+
const editLinkItem = options.allowDatasource ? [{
|
|
511
474
|
type: 'custom',
|
|
512
475
|
fallback: [],
|
|
513
476
|
render: editorView => {
|
|
@@ -107,7 +107,7 @@ export class EditLinkToolbar extends React.Component {
|
|
|
107
107
|
});
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
export const
|
|
110
|
+
export const getEditLinkCallback = (editorAnalyticsApi, scrollIntoView) => (state, dispatch) => {
|
|
111
111
|
let type = 'hyperlink';
|
|
112
112
|
if (state.selection instanceof NodeSelection) {
|
|
113
113
|
type = state.selection.node.type.name;
|
|
@@ -14,7 +14,7 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
|
14
14
|
import { ButtonItem } from '@atlaskit/menu';
|
|
15
15
|
import { Flex } from '@atlaskit/primitives';
|
|
16
16
|
import { focusEditorView } from '../../utils';
|
|
17
|
-
import { editDatasource } from '../
|
|
17
|
+
import { editDatasource } from '../editDatasourceAction';
|
|
18
18
|
const dropdownExpandContainer = css({
|
|
19
19
|
margin: `0px ${"var(--ds-space-negative-050, -4px)"}`
|
|
20
20
|
});
|
|
@@ -14,9 +14,9 @@ import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
|
|
|
14
14
|
import { ButtonItem } from '@atlaskit/menu';
|
|
15
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
16
16
|
import { Flex } from '@atlaskit/primitives';
|
|
17
|
-
import { editDatasource } from '../../ui/EditDatasourceButton';
|
|
18
17
|
import { focusEditorView, isDatasourceConfigEditable } from '../../utils';
|
|
19
18
|
import { CardContextProvider } from '../CardContextProvider';
|
|
19
|
+
import { editDatasource } from '../editDatasourceAction';
|
|
20
20
|
import { useFetchDatasourceDataInfo } from '../useFetchDatasourceDataInfo';
|
|
21
21
|
import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
|
|
22
22
|
import EditToolbarButtonPresentation from './EditToolbarButtonPresentation';
|
|
@@ -1,10 +1,8 @@
|
|
|
1
1
|
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
3
3
|
import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import { Flex } from '@atlaskit/primitives';
|
|
6
5
|
import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
|
|
7
|
-
import { EditDatasourceButton } from './EditDatasourceButton';
|
|
8
6
|
import { LinkToolbarAppearance } from './LinkToolbarAppearance';
|
|
9
7
|
export function HyperlinkToolbarAppearance(props) {
|
|
10
8
|
var _props$cardOptions3;
|
|
@@ -59,13 +57,7 @@ export function HyperlinkToolbarAppearance(props) {
|
|
|
59
57
|
if (!supportedUrlsMap.get(url)) {
|
|
60
58
|
return null;
|
|
61
59
|
}
|
|
62
|
-
return /*#__PURE__*/React.createElement(Flex, null,
|
|
63
|
-
url: url,
|
|
64
|
-
intl: intl,
|
|
65
|
-
editorView: editorView,
|
|
66
|
-
editorAnalyticsApi: editorAnalyticsApi,
|
|
67
|
-
currentAppearance: "url"
|
|
68
|
-
}), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
|
|
60
|
+
return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
|
|
69
61
|
key: "link-appearance",
|
|
70
62
|
url: url,
|
|
71
63
|
intl: intl,
|