@atlaskit/editor-plugin-card 3.4.1 → 3.4.3
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/inlineCard.js +8 -1
- package/dist/cjs/nodeviews/lazy-block-card.js +1 -1
- package/dist/cjs/nodeviews/lazy-inline-card.js +33 -0
- package/dist/cjs/plugin.js +2 -2
- package/dist/cjs/pm-plugins/main.js +4 -1
- package/dist/cjs/toDOM-fixes/blockCard.js +12 -2
- package/dist/cjs/toDOM-fixes/embedCard.js +12 -3
- package/dist/cjs/toDOM-fixes/inlineCard.js +60 -0
- package/dist/es2019/nodeviews/inlineCard.js +6 -1
- package/dist/es2019/nodeviews/lazy-block-card.js +1 -1
- package/dist/es2019/nodeviews/lazy-inline-card.js +22 -0
- package/dist/es2019/plugin.js +2 -2
- package/dist/es2019/pm-plugins/main.js +4 -1
- package/dist/es2019/toDOM-fixes/blockCard.js +12 -2
- package/dist/es2019/toDOM-fixes/embedCard.js +12 -3
- package/dist/es2019/toDOM-fixes/inlineCard.js +51 -0
- package/dist/esm/nodeviews/inlineCard.js +7 -1
- package/dist/esm/nodeviews/lazy-block-card.js +1 -1
- package/dist/esm/nodeviews/lazy-inline-card.js +21 -0
- package/dist/esm/plugin.js +2 -2
- package/dist/esm/pm-plugins/main.js +4 -1
- package/dist/esm/toDOM-fixes/blockCard.js +12 -2
- package/dist/esm/toDOM-fixes/embedCard.js +12 -3
- package/dist/esm/toDOM-fixes/inlineCard.js +53 -0
- package/dist/types/nodeviews/blockCard.d.ts +1 -1
- package/dist/types/nodeviews/inlineCard.d.ts +7 -0
- package/dist/types/nodeviews/lazy-block-card.d.ts +1 -1
- package/dist/types/nodeviews/lazy-inline-card.d.ts +2 -0
- package/dist/types/toDOM-fixes/inlineCard.d.ts +1 -0
- package/dist/types-ts4.5/nodeviews/blockCard.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/inlineCard.d.ts +7 -0
- package/dist/types-ts4.5/nodeviews/lazy-block-card.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/lazy-inline-card.d.ts +2 -0
- package/dist/types-ts4.5/toDOM-fixes/inlineCard.d.ts +1 -0
- package/package.json +8 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-card
|
|
2
2
|
|
|
3
|
+
## 3.4.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 3.4.2
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [#147708](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147708)
|
|
14
|
+
[`82148eb4038af`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/82148eb4038af) -
|
|
15
|
+
add lazy node view for inline card
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 3.4.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.InlineCard = void 0;
|
|
9
9
|
exports.InlineCardNodeView = InlineCardNodeView;
|
|
10
|
+
exports.inlineCardNodeView = void 0;
|
|
10
11
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
12
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -162,4 +163,10 @@ function InlineCardNodeView(props) {
|
|
|
162
163
|
pluginInjectionApi: pluginInjectionApi,
|
|
163
164
|
onClickCallback: onClickCallback
|
|
164
165
|
}, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, (0, _platformFeatureFlags.fg)('linking_platform_disable_live_view_inline_overlay') && (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
|
|
165
|
-
}
|
|
166
|
+
}
|
|
167
|
+
var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref2) {
|
|
168
|
+
var inlineCardViewProducer = _ref2.inlineCardViewProducer;
|
|
169
|
+
return function (node, view, getPos, decorations) {
|
|
170
|
+
return inlineCardViewProducer(node, view, getPos, decorations);
|
|
171
|
+
};
|
|
172
|
+
};
|
|
@@ -20,7 +20,7 @@ var lazyBlockCardView = exports.lazyBlockCardView = function lazyBlockCardView(p
|
|
|
20
20
|
getNodeViewOptions: function getNodeViewOptions() {},
|
|
21
21
|
loader: function loader() {
|
|
22
22
|
var result = Promise.resolve().then(function () {
|
|
23
|
-
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-
|
|
23
|
+
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-block-card-item-nodeview" */
|
|
24
24
|
'./blockCard'));
|
|
25
25
|
}).then(function (_ref) {
|
|
26
26
|
var blockCardNodeView = _ref.blockCardNodeView;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.lazyInlineCardView = void 0;
|
|
8
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
10
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
|
+
var _inlineCard = require("./inlineCard");
|
|
13
|
+
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); }
|
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(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; }
|
|
15
|
+
var lazyInlineCardView = exports.lazyInlineCardView = function lazyInlineCardView(props) {
|
|
16
|
+
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || !(0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_smartlinks')) {
|
|
17
|
+
return (0, _inlineCard.inlineCardNodeView)(props);
|
|
18
|
+
}
|
|
19
|
+
return (0, _lazyNodeView.withLazyLoading)({
|
|
20
|
+
nodeName: 'inlineCard',
|
|
21
|
+
getNodeViewOptions: function getNodeViewOptions() {},
|
|
22
|
+
loader: function loader() {
|
|
23
|
+
var result = Promise.resolve().then(function () {
|
|
24
|
+
return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-inline-card-item-nodeview" */
|
|
25
|
+
'./inlineCard'));
|
|
26
|
+
}).then(function (_ref) {
|
|
27
|
+
var inlineCardNodeView = _ref.inlineCardNodeView;
|
|
28
|
+
return inlineCardNodeView(props);
|
|
29
|
+
});
|
|
30
|
+
return result;
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
};
|
package/dist/cjs/plugin.js
CHANGED
|
@@ -9,7 +9,6 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
|
|
|
9
9
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
13
12
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
14
13
|
var _quickInsert = require("@atlaskit/editor-common/quick-insert");
|
|
15
14
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
@@ -22,6 +21,7 @@ var _main = require("./pm-plugins/main");
|
|
|
22
21
|
var _pluginKey = require("./pm-plugins/plugin-key");
|
|
23
22
|
var _blockCard = require("./toDOM-fixes/blockCard");
|
|
24
23
|
var _embedCard = require("./toDOM-fixes/embedCard");
|
|
24
|
+
var _inlineCard = require("./toDOM-fixes/inlineCard");
|
|
25
25
|
var _toolbar = require("./toolbar");
|
|
26
26
|
var _ModalWithState = _interopRequireDefault(require("./ui/DatasourceModal/ModalWithState"));
|
|
27
27
|
var _EditorLinkingPlatformAnalytics = require("./ui/EditorLinkingPlatformAnalytics");
|
|
@@ -48,7 +48,7 @@ var cardPlugin = exports.cardPlugin = function cardPlugin(_ref) {
|
|
|
48
48
|
nodes: function nodes() {
|
|
49
49
|
var nodes = [{
|
|
50
50
|
name: 'inlineCard',
|
|
51
|
-
node:
|
|
51
|
+
node: (0, _inlineCard.inlineCardSpecWithFixedToDOM)()
|
|
52
52
|
}, {
|
|
53
53
|
name: 'blockCard',
|
|
54
54
|
node: (0, _blockCard.blockCardSpecWithFixedToDOM)()
|
|
@@ -27,6 +27,7 @@ var _localStorage = require("../common/local-storage");
|
|
|
27
27
|
var _inlineCard = require("../nodeviews/inlineCard");
|
|
28
28
|
var _lazyBlockCard = require("../nodeviews/lazy-block-card");
|
|
29
29
|
var _lazyEmbedCard = require("../nodeviews/lazy-embed-card");
|
|
30
|
+
var _lazyInlineCard = require("../nodeviews/lazy-inline-card");
|
|
30
31
|
var _utils2 = require("../ui/LayoutButton/utils");
|
|
31
32
|
var _utils3 = require("../utils");
|
|
32
33
|
var _actions = require("./actions");
|
|
@@ -255,7 +256,9 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
|
|
|
255
256
|
},
|
|
256
257
|
props: _objectSpread({
|
|
257
258
|
nodeViews: {
|
|
258
|
-
inlineCard:
|
|
259
|
+
inlineCard: (0, _lazyInlineCard.lazyInlineCardView)({
|
|
260
|
+
inlineCardViewProducer: inlineCardViewProducer
|
|
261
|
+
}),
|
|
259
262
|
blockCard: (0, _lazyBlockCard.lazyBlockCardView)({
|
|
260
263
|
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
261
264
|
actionOptions: actionOptions,
|
|
@@ -8,6 +8,7 @@ exports.blockCardSpecWithFixedToDOM = void 0;
|
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
10
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
11
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
11
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
13
|
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; }
|
|
13
14
|
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; }
|
|
@@ -40,11 +41,20 @@ var blockCardSpecWithFixedToDOM = exports.blockCardSpecWithFixedToDOM = function
|
|
|
40
41
|
// To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
41
42
|
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
|
|
42
43
|
style: (0, _lazyNodeView.convertToInlineCss)({
|
|
44
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
43
45
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
46
|
+
display: 'inline',
|
|
44
47
|
boxDecorationBreak: 'clone',
|
|
45
48
|
WebkitBoxDecorationBreak: 'clone',
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
50
|
+
color: "var(--ds-link, ".concat(_colors.B400, ")"),
|
|
51
|
+
lineHeight: '22px',
|
|
52
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
53
|
+
transition: '0.1s all ease-in-out',
|
|
54
|
+
userSelect: 'text',
|
|
55
|
+
WebkitUserSelect: 'text',
|
|
56
|
+
msUserSelect: 'text',
|
|
57
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
48
58
|
}),
|
|
49
59
|
href: url || ''
|
|
50
60
|
}, (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
|
|
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
10
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
12
13
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
13
14
|
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; }
|
|
14
15
|
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; } /**
|
|
@@ -98,11 +99,19 @@ var embedCardSpecWithFixedToDOM = exports.embedCardSpecWithFixedToDOM = function
|
|
|
98
99
|
// To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
99
100
|
['a', {
|
|
100
101
|
style: (0, _lazyNodeView.convertToInlineCss)({
|
|
102
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
101
103
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
104
|
+
display: 'inline',
|
|
102
105
|
boxDecorationBreak: 'clone',
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
lineHeight: '22px'
|
|
106
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
107
|
+
color: "var(--ds-link, ".concat(_colors.B400, ")"),
|
|
108
|
+
lineHeight: '22px',
|
|
109
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
110
|
+
transition: '0.1s all ease-in-out',
|
|
111
|
+
userSelect: 'text',
|
|
112
|
+
WebkitUserSelect: 'text',
|
|
113
|
+
msUserSelect: 'text',
|
|
114
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
106
115
|
})
|
|
107
116
|
}, url !== null && url !== void 0 ? url : ''],
|
|
108
117
|
// From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.inlineCardSpecWithFixedToDOM = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _adfSchema = require("@atlaskit/adf-schema");
|
|
10
|
+
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
11
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
+
var _colors = require("@atlaskit/theme/colors");
|
|
13
|
+
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
14
|
+
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; }
|
|
15
|
+
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; }
|
|
16
|
+
// @nodeSpecException:toDOM patch
|
|
17
|
+
var inlineCardSpecWithFixedToDOM = exports.inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM() {
|
|
18
|
+
if ((0, _experiments.editorExperiment)('platform_editor_exp_lazy_node_views', false) || !(0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_smartlinks')) {
|
|
19
|
+
return _adfSchema.inlineCard;
|
|
20
|
+
}
|
|
21
|
+
return _objectSpread(_objectSpread({}, _adfSchema.inlineCard), {}, {
|
|
22
|
+
toDOM: function toDOM(node) {
|
|
23
|
+
var wrapperAttrs = {
|
|
24
|
+
class: 'inlineCardView-content-wrap inlineNodeView'
|
|
25
|
+
};
|
|
26
|
+
var cardAttrs = {
|
|
27
|
+
class: 'card'
|
|
28
|
+
};
|
|
29
|
+
var attrs = {
|
|
30
|
+
'data-inline-card': '',
|
|
31
|
+
href: node.attrs.url || '',
|
|
32
|
+
'data-card-data': node.attrs.data ? JSON.stringify(node.attrs.data) : '',
|
|
33
|
+
// LoadingCardLink used for Suspense in `packages/linking-platform/smart-card/src/view/CardWithUrl/loader.tsx`
|
|
34
|
+
// We need to match the style of LoadingCardLink
|
|
35
|
+
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`, with withoutBackground=true
|
|
36
|
+
style: (0, _lazyNodeView.convertToInlineCss)({
|
|
37
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
38
|
+
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
39
|
+
display: 'inline',
|
|
40
|
+
boxDecorationBreak: 'clone',
|
|
41
|
+
WebkitBoxDecorationBreak: 'clone',
|
|
42
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
43
|
+
color: "var(--ds-link, ".concat(_colors.B400, ")"),
|
|
44
|
+
lineHeight: '22px',
|
|
45
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
46
|
+
transition: '0.1s all ease-in-out',
|
|
47
|
+
userSelect: 'text',
|
|
48
|
+
WebkitUserSelect: 'text',
|
|
49
|
+
msUserSelect: 'text',
|
|
50
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
51
|
+
})
|
|
52
|
+
};
|
|
53
|
+
if (node.attrs.url) {
|
|
54
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs, node.attrs.url]]];
|
|
55
|
+
} else {
|
|
56
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs]]];
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
};
|
|
@@ -152,4 +152,9 @@ export function InlineCardNodeView(props) {
|
|
|
152
152
|
pluginInjectionApi: pluginInjectionApi,
|
|
153
153
|
onClickCallback: onClickCallback
|
|
154
154
|
}, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, fg('linking_platform_disable_live_view_inline_overlay') && (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
|
|
155
|
-
}
|
|
155
|
+
}
|
|
156
|
+
export const inlineCardNodeView = ({
|
|
157
|
+
inlineCardViewProducer
|
|
158
|
+
}) => (node, view, getPos, decorations) => {
|
|
159
|
+
return inlineCardViewProducer(node, view, getPos, decorations);
|
|
160
|
+
};
|
|
@@ -9,7 +9,7 @@ export const lazyBlockCardView = props => {
|
|
|
9
9
|
nodeName: 'blockCard',
|
|
10
10
|
getNodeViewOptions: () => {},
|
|
11
11
|
loader: () => {
|
|
12
|
-
const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-
|
|
12
|
+
const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-block-card-item-nodeview" */
|
|
13
13
|
'./blockCard').then(({
|
|
14
14
|
blockCardNodeView
|
|
15
15
|
}) => {
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
|
+
import { inlineCardNodeView } from './inlineCard';
|
|
5
|
+
export const lazyInlineCardView = props => {
|
|
6
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks')) {
|
|
7
|
+
return inlineCardNodeView(props);
|
|
8
|
+
}
|
|
9
|
+
return withLazyLoading({
|
|
10
|
+
nodeName: 'inlineCard',
|
|
11
|
+
getNodeViewOptions: () => {},
|
|
12
|
+
loader: () => {
|
|
13
|
+
const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-inline-card-item-nodeview" */
|
|
14
|
+
'./inlineCard').then(({
|
|
15
|
+
inlineCardNodeView
|
|
16
|
+
}) => {
|
|
17
|
+
return inlineCardNodeView(props);
|
|
18
|
+
});
|
|
19
|
+
return result;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
};
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { inlineCard } from '@atlaskit/adf-schema';
|
|
3
2
|
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
4
3
|
import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
|
|
5
4
|
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
@@ -12,6 +11,7 @@ import { createPlugin } from './pm-plugins/main';
|
|
|
12
11
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
13
12
|
import { blockCardSpecWithFixedToDOM } from './toDOM-fixes/blockCard';
|
|
14
13
|
import { embedCardSpecWithFixedToDOM } from './toDOM-fixes/embedCard';
|
|
14
|
+
import { inlineCardSpecWithFixedToDOM } from './toDOM-fixes/inlineCard';
|
|
15
15
|
import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
|
|
16
16
|
import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
|
|
17
17
|
import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
|
|
@@ -36,7 +36,7 @@ export const cardPlugin = ({
|
|
|
36
36
|
nodes() {
|
|
37
37
|
const nodes = [{
|
|
38
38
|
name: 'inlineCard',
|
|
39
|
-
node:
|
|
39
|
+
node: inlineCardSpecWithFixedToDOM()
|
|
40
40
|
}, {
|
|
41
41
|
name: 'blockCard',
|
|
42
42
|
node: blockCardSpecWithFixedToDOM()
|
|
@@ -11,6 +11,7 @@ import { isLocalStorageKeyDiscovered } from '../common/local-storage';
|
|
|
11
11
|
import { InlineCardNodeView } from '../nodeviews/inlineCard';
|
|
12
12
|
import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
|
|
13
13
|
import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
|
|
14
|
+
import { lazyInlineCardView } from '../nodeviews/lazy-inline-card';
|
|
14
15
|
import { isDatasourceTableLayout } from '../ui/LayoutButton/utils';
|
|
15
16
|
import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
|
|
16
17
|
import { clearOverlayCandidate, setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
|
|
@@ -248,7 +249,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
|
|
|
248
249
|
},
|
|
249
250
|
props: {
|
|
250
251
|
nodeViews: {
|
|
251
|
-
inlineCard:
|
|
252
|
+
inlineCard: lazyInlineCardView({
|
|
253
|
+
inlineCardViewProducer
|
|
254
|
+
}),
|
|
252
255
|
blockCard: lazyBlockCardView({
|
|
253
256
|
pmPluginFactoryParams,
|
|
254
257
|
actionOptions,
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { blockCard } from '@atlaskit/adf-schema';
|
|
2
2
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
3
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
5
|
// @nodeSpecException:toDOM patch
|
|
5
6
|
export const blockCardSpecWithFixedToDOM = () => {
|
|
@@ -34,11 +35,20 @@ export const blockCardSpecWithFixedToDOM = () => {
|
|
|
34
35
|
// To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
35
36
|
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
|
|
36
37
|
style: convertToInlineCss({
|
|
38
|
+
padding: `${"var(--ds-space-025, 2px)"} 0px`,
|
|
37
39
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
40
|
+
display: 'inline',
|
|
38
41
|
boxDecorationBreak: 'clone',
|
|
39
42
|
WebkitBoxDecorationBreak: 'clone',
|
|
40
|
-
|
|
41
|
-
|
|
43
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
44
|
+
color: `var(--ds-link, ${B400})`,
|
|
45
|
+
lineHeight: '22px',
|
|
46
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
47
|
+
transition: '0.1s all ease-in-out',
|
|
48
|
+
userSelect: 'text',
|
|
49
|
+
WebkitUserSelect: 'text',
|
|
50
|
+
msUserSelect: 'text',
|
|
51
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
42
52
|
}),
|
|
43
53
|
href: url || ''
|
|
44
54
|
}, (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
import { embedCard } from '@atlaskit/adf-schema';
|
|
12
12
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
13
13
|
import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
|
|
14
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
14
15
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
15
16
|
// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
|
|
16
17
|
function calcMargin(layout) {
|
|
@@ -91,11 +92,19 @@ export const embedCardSpecWithFixedToDOM = () => {
|
|
|
91
92
|
// To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
92
93
|
['a', {
|
|
93
94
|
style: convertToInlineCss({
|
|
95
|
+
padding: `${"var(--ds-space-025, 2px)"} 0px`,
|
|
94
96
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
97
|
+
display: 'inline',
|
|
95
98
|
boxDecorationBreak: 'clone',
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
lineHeight: '22px'
|
|
99
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
100
|
+
color: `var(--ds-link, ${B400})`,
|
|
101
|
+
lineHeight: '22px',
|
|
102
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
103
|
+
transition: '0.1s all ease-in-out',
|
|
104
|
+
userSelect: 'text',
|
|
105
|
+
WebkitUserSelect: 'text',
|
|
106
|
+
msUserSelect: 'text',
|
|
107
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
99
108
|
})
|
|
100
109
|
}, url !== null && url !== void 0 ? url : ''],
|
|
101
110
|
// From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { inlineCard } from '@atlaskit/adf-schema';
|
|
2
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
3
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
5
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
|
+
// @nodeSpecException:toDOM patch
|
|
7
|
+
export const inlineCardSpecWithFixedToDOM = () => {
|
|
8
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks')) {
|
|
9
|
+
return inlineCard;
|
|
10
|
+
}
|
|
11
|
+
return {
|
|
12
|
+
...inlineCard,
|
|
13
|
+
toDOM: node => {
|
|
14
|
+
const wrapperAttrs = {
|
|
15
|
+
class: 'inlineCardView-content-wrap inlineNodeView'
|
|
16
|
+
};
|
|
17
|
+
const cardAttrs = {
|
|
18
|
+
class: 'card'
|
|
19
|
+
};
|
|
20
|
+
const attrs = {
|
|
21
|
+
'data-inline-card': '',
|
|
22
|
+
href: node.attrs.url || '',
|
|
23
|
+
'data-card-data': node.attrs.data ? JSON.stringify(node.attrs.data) : '',
|
|
24
|
+
// LoadingCardLink used for Suspense in `packages/linking-platform/smart-card/src/view/CardWithUrl/loader.tsx`
|
|
25
|
+
// We need to match the style of LoadingCardLink
|
|
26
|
+
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`, with withoutBackground=true
|
|
27
|
+
style: convertToInlineCss({
|
|
28
|
+
padding: `${"var(--ds-space-025, 2px)"} 0px`,
|
|
29
|
+
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
30
|
+
display: 'inline',
|
|
31
|
+
boxDecorationBreak: 'clone',
|
|
32
|
+
WebkitBoxDecorationBreak: 'clone',
|
|
33
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
34
|
+
color: `var(--ds-link, ${B400})`,
|
|
35
|
+
lineHeight: '22px',
|
|
36
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
37
|
+
transition: '0.1s all ease-in-out',
|
|
38
|
+
userSelect: 'text',
|
|
39
|
+
WebkitUserSelect: 'text',
|
|
40
|
+
msUserSelect: 'text',
|
|
41
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
42
|
+
})
|
|
43
|
+
};
|
|
44
|
+
if (node.attrs.url) {
|
|
45
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs, node.attrs.url]]];
|
|
46
|
+
} else {
|
|
47
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs]]];
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
};
|
|
@@ -151,4 +151,10 @@ export function InlineCardNodeView(props) {
|
|
|
151
151
|
pluginInjectionApi: pluginInjectionApi,
|
|
152
152
|
onClickCallback: onClickCallback
|
|
153
153
|
}, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, fg('linking_platform_disable_live_view_inline_overlay') && (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
|
|
154
|
-
}
|
|
154
|
+
}
|
|
155
|
+
export var inlineCardNodeView = function inlineCardNodeView(_ref2) {
|
|
156
|
+
var inlineCardViewProducer = _ref2.inlineCardViewProducer;
|
|
157
|
+
return function (node, view, getPos, decorations) {
|
|
158
|
+
return inlineCardViewProducer(node, view, getPos, decorations);
|
|
159
|
+
};
|
|
160
|
+
};
|
|
@@ -9,7 +9,7 @@ export var lazyBlockCardView = function lazyBlockCardView(props) {
|
|
|
9
9
|
nodeName: 'blockCard',
|
|
10
10
|
getNodeViewOptions: function getNodeViewOptions() {},
|
|
11
11
|
loader: function loader() {
|
|
12
|
-
var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-
|
|
12
|
+
var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-block-card-item-nodeview" */
|
|
13
13
|
'./blockCard').then(function (_ref) {
|
|
14
14
|
var blockCardNodeView = _ref.blockCardNodeView;
|
|
15
15
|
return blockCardNodeView(props);
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
|
+
import { inlineCardNodeView } from './inlineCard';
|
|
5
|
+
export var lazyInlineCardView = function lazyInlineCardView(props) {
|
|
6
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks')) {
|
|
7
|
+
return inlineCardNodeView(props);
|
|
8
|
+
}
|
|
9
|
+
return withLazyLoading({
|
|
10
|
+
nodeName: 'inlineCard',
|
|
11
|
+
getNodeViewOptions: function getNodeViewOptions() {},
|
|
12
|
+
loader: function loader() {
|
|
13
|
+
var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-inline-card-item-nodeview" */
|
|
14
|
+
'./inlineCard').then(function (_ref) {
|
|
15
|
+
var inlineCardNodeView = _ref.inlineCardNodeView;
|
|
16
|
+
return inlineCardNodeView(props);
|
|
17
|
+
});
|
|
18
|
+
return result;
|
|
19
|
+
}
|
|
20
|
+
});
|
|
21
|
+
};
|
package/dist/esm/plugin.js
CHANGED
|
@@ -4,7 +4,6 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
6
6
|
import React from 'react';
|
|
7
|
-
import { inlineCard } from '@atlaskit/adf-schema';
|
|
8
7
|
import { cardMessages as messages } from '@atlaskit/editor-common/messages';
|
|
9
8
|
import { IconDatasourceAssetsObjects, IconDatasourceConfluenceSearch, IconDatasourceJiraIssue } from '@atlaskit/editor-common/quick-insert';
|
|
10
9
|
import { canRenderDatasource } from '@atlaskit/editor-common/utils';
|
|
@@ -17,6 +16,7 @@ import { createPlugin } from './pm-plugins/main';
|
|
|
17
16
|
import { pluginKey } from './pm-plugins/plugin-key';
|
|
18
17
|
import { blockCardSpecWithFixedToDOM } from './toDOM-fixes/blockCard';
|
|
19
18
|
import { embedCardSpecWithFixedToDOM } from './toDOM-fixes/embedCard';
|
|
19
|
+
import { inlineCardSpecWithFixedToDOM } from './toDOM-fixes/inlineCard';
|
|
20
20
|
import { floatingToolbar, getEndingToolbarItems, getStartingToolbarItems } from './toolbar';
|
|
21
21
|
import DatasourceModalWithState from './ui/DatasourceModal/ModalWithState';
|
|
22
22
|
import { EditorLinkingPlatformAnalytics } from './ui/EditorLinkingPlatformAnalytics';
|
|
@@ -41,7 +41,7 @@ export var cardPlugin = function cardPlugin(_ref) {
|
|
|
41
41
|
nodes: function nodes() {
|
|
42
42
|
var nodes = [{
|
|
43
43
|
name: 'inlineCard',
|
|
44
|
-
node:
|
|
44
|
+
node: inlineCardSpecWithFixedToDOM()
|
|
45
45
|
}, {
|
|
46
46
|
name: 'blockCard',
|
|
47
47
|
node: blockCardSpecWithFixedToDOM()
|
|
@@ -15,6 +15,7 @@ import { isLocalStorageKeyDiscovered } from '../common/local-storage';
|
|
|
15
15
|
import { InlineCardNodeView } from '../nodeviews/inlineCard';
|
|
16
16
|
import { lazyBlockCardView } from '../nodeviews/lazy-block-card';
|
|
17
17
|
import { lazyEmbedCardView } from '../nodeviews/lazy-embed-card';
|
|
18
|
+
import { lazyInlineCardView } from '../nodeviews/lazy-inline-card';
|
|
18
19
|
import { isDatasourceTableLayout } from '../ui/LayoutButton/utils';
|
|
19
20
|
import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
|
|
20
21
|
import { clearOverlayCandidate, setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
|
|
@@ -242,7 +243,9 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
|
|
|
242
243
|
},
|
|
243
244
|
props: _objectSpread({
|
|
244
245
|
nodeViews: {
|
|
245
|
-
inlineCard:
|
|
246
|
+
inlineCard: lazyInlineCardView({
|
|
247
|
+
inlineCardViewProducer: inlineCardViewProducer
|
|
248
|
+
}),
|
|
246
249
|
blockCard: lazyBlockCardView({
|
|
247
250
|
pmPluginFactoryParams: pmPluginFactoryParams,
|
|
248
251
|
actionOptions: actionOptions,
|
|
@@ -3,6 +3,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
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
4
|
import { blockCard } from '@atlaskit/adf-schema';
|
|
5
5
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
6
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
6
7
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
7
8
|
// @nodeSpecException:toDOM patch
|
|
8
9
|
export var blockCardSpecWithFixedToDOM = function blockCardSpecWithFixedToDOM() {
|
|
@@ -33,11 +34,20 @@ export var blockCardSpecWithFixedToDOM = function blockCardSpecWithFixedToDOM()
|
|
|
33
34
|
// To match `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
34
35
|
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`
|
|
35
36
|
style: convertToInlineCss({
|
|
37
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
36
38
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
39
|
+
display: 'inline',
|
|
37
40
|
boxDecorationBreak: 'clone',
|
|
38
41
|
WebkitBoxDecorationBreak: 'clone',
|
|
39
|
-
|
|
40
|
-
|
|
42
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
43
|
+
color: "var(--ds-link, ".concat(B400, ")"),
|
|
44
|
+
lineHeight: '22px',
|
|
45
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
46
|
+
transition: '0.1s all ease-in-out',
|
|
47
|
+
userSelect: 'text',
|
|
48
|
+
WebkitUserSelect: 'text',
|
|
49
|
+
msUserSelect: 'text',
|
|
50
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
41
51
|
}),
|
|
42
52
|
href: url || ''
|
|
43
53
|
}, (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url) || ' ']];
|
|
@@ -14,6 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
14
14
|
import { embedCard } from '@atlaskit/adf-schema';
|
|
15
15
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
16
16
|
import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
|
|
17
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
17
18
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
18
19
|
// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
|
|
19
20
|
function calcMargin(layout) {
|
|
@@ -92,11 +93,19 @@ export var embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM()
|
|
|
92
93
|
// To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
|
|
93
94
|
['a', {
|
|
94
95
|
style: convertToInlineCss({
|
|
96
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
95
97
|
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
98
|
+
display: 'inline',
|
|
96
99
|
boxDecorationBreak: 'clone',
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
lineHeight: '22px'
|
|
100
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
101
|
+
color: "var(--ds-link, ".concat(B400, ")"),
|
|
102
|
+
lineHeight: '22px',
|
|
103
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
104
|
+
transition: '0.1s all ease-in-out',
|
|
105
|
+
userSelect: 'text',
|
|
106
|
+
WebkitUserSelect: 'text',
|
|
107
|
+
msUserSelect: 'text',
|
|
108
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
100
109
|
})
|
|
101
110
|
}, url !== null && url !== void 0 ? url : ''],
|
|
102
111
|
// From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
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
|
+
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
|
+
import { inlineCard } from '@atlaskit/adf-schema';
|
|
5
|
+
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
6
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
|
+
import { B400 } from '@atlaskit/theme/colors';
|
|
8
|
+
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
|
+
// @nodeSpecException:toDOM patch
|
|
10
|
+
export var inlineCardSpecWithFixedToDOM = function inlineCardSpecWithFixedToDOM() {
|
|
11
|
+
if (editorExperiment('platform_editor_exp_lazy_node_views', false) || !fg('platform_editor_ssr_fix_smartlinks')) {
|
|
12
|
+
return inlineCard;
|
|
13
|
+
}
|
|
14
|
+
return _objectSpread(_objectSpread({}, inlineCard), {}, {
|
|
15
|
+
toDOM: function toDOM(node) {
|
|
16
|
+
var wrapperAttrs = {
|
|
17
|
+
class: 'inlineCardView-content-wrap inlineNodeView'
|
|
18
|
+
};
|
|
19
|
+
var cardAttrs = {
|
|
20
|
+
class: 'card'
|
|
21
|
+
};
|
|
22
|
+
var attrs = {
|
|
23
|
+
'data-inline-card': '',
|
|
24
|
+
href: node.attrs.url || '',
|
|
25
|
+
'data-card-data': node.attrs.data ? JSON.stringify(node.attrs.data) : '',
|
|
26
|
+
// LoadingCardLink used for Suspense in `packages/linking-platform/smart-card/src/view/CardWithUrl/loader.tsx`
|
|
27
|
+
// We need to match the style of LoadingCardLink
|
|
28
|
+
// Which uses frame styling `packages/linking-platform/smart-card/src/view/InlineCard/Frame/styled.ts`, with withoutBackground=true
|
|
29
|
+
style: convertToInlineCss({
|
|
30
|
+
padding: "var(--ds-space-025, 2px)".concat(" 0px"),
|
|
31
|
+
marginLeft: "var(--ds-space-negative-025, -2px)",
|
|
32
|
+
display: 'inline',
|
|
33
|
+
boxDecorationBreak: 'clone',
|
|
34
|
+
WebkitBoxDecorationBreak: 'clone',
|
|
35
|
+
borderRadius: "var(--ds-border-radius-100, 4px)",
|
|
36
|
+
color: "var(--ds-link, ".concat(B400, ")"),
|
|
37
|
+
lineHeight: '22px',
|
|
38
|
+
WebkitTransition: '0.1s all ease-in-out',
|
|
39
|
+
transition: '0.1s all ease-in-out',
|
|
40
|
+
userSelect: 'text',
|
|
41
|
+
WebkitUserSelect: 'text',
|
|
42
|
+
msUserSelect: 'text',
|
|
43
|
+
MozUserSelect: 'none' // -moz-user-select
|
|
44
|
+
})
|
|
45
|
+
};
|
|
46
|
+
if (node.attrs.url) {
|
|
47
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs, node.attrs.url]]];
|
|
48
|
+
} else {
|
|
49
|
+
return ['span', wrapperAttrs, ['span', cardAttrs, ['a', attrs]]];
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
};
|
|
@@ -40,4 +40,4 @@ export interface BlockCardNodeViewProperties {
|
|
|
40
40
|
allowDatasource: boolean | undefined;
|
|
41
41
|
inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
|
|
42
42
|
}
|
|
43
|
-
export declare const blockCardNodeView: ({ pmPluginFactoryParams, actionOptions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) =>
|
|
43
|
+
export declare const blockCardNodeView: ({ pmPluginFactoryParams, actionOptions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => import("prosemirror-view").NodeView | Datasource | BlockCard;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
|
|
3
|
+
import { type getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
|
|
4
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
6
|
import type { SmartCardProps } from './genericCard';
|
|
4
7
|
import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
|
|
5
8
|
export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
|
|
6
9
|
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage'>;
|
|
7
10
|
export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
|
|
11
|
+
export interface InlineCardNodeViewProperties {
|
|
12
|
+
inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
|
|
13
|
+
}
|
|
14
|
+
export declare const inlineCardNodeView: ({ inlineCardViewProducer }: InlineCardNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => import("prosemirror-view").NodeView;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type BlockCardNodeViewProperties } from './blockCard';
|
|
2
|
-
export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("
|
|
2
|
+
export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("prosemirror-view").NodeView | import("./datasource").Datasource | import("./blockCard").BlockCard) | import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const inlineCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
|
|
@@ -40,4 +40,4 @@ export interface BlockCardNodeViewProperties {
|
|
|
40
40
|
allowDatasource: boolean | undefined;
|
|
41
41
|
inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
|
|
42
42
|
}
|
|
43
|
-
export declare const blockCardNodeView: ({ pmPluginFactoryParams, actionOptions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) =>
|
|
43
|
+
export declare const blockCardNodeView: ({ pmPluginFactoryParams, actionOptions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => import("prosemirror-view").NodeView | Datasource | BlockCard;
|
|
@@ -1,7 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
|
|
3
|
+
import { type getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
|
|
4
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
6
|
import type { SmartCardProps } from './genericCard';
|
|
4
7
|
import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
|
|
5
8
|
export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
|
|
6
9
|
export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage'>;
|
|
7
10
|
export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
|
|
11
|
+
export interface InlineCardNodeViewProperties {
|
|
12
|
+
inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
|
|
13
|
+
}
|
|
14
|
+
export declare const inlineCardNodeView: ({ inlineCardViewProducer }: InlineCardNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => import("prosemirror-view").NodeView;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type BlockCardNodeViewProperties } from './blockCard';
|
|
2
|
-
export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("
|
|
2
|
+
export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("prosemirror-view").NodeView | import("./datasource").Datasource | import("./blockCard").BlockCard) | import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const inlineCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-card",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.3",
|
|
4
4
|
"description": "Card plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@atlaskit/adf-schema": "^40.9.0",
|
|
35
35
|
"@atlaskit/analytics-next": "^10.1.0",
|
|
36
36
|
"@atlaskit/custom-steps": "^0.7.0",
|
|
37
|
-
"@atlaskit/editor-common": "^
|
|
37
|
+
"@atlaskit/editor-common": "^93.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^1.8.0",
|
|
39
39
|
"@atlaskit/editor-plugin-decorations": "^1.3.0",
|
|
40
40
|
"@atlaskit/editor-plugin-editor-disabled": "^1.3.0",
|
|
@@ -49,15 +49,15 @@
|
|
|
49
49
|
"@atlaskit/icon": "^22.20.0",
|
|
50
50
|
"@atlaskit/link-analytics": "^8.5.0",
|
|
51
51
|
"@atlaskit/link-client-extension": "^2.4.0",
|
|
52
|
-
"@atlaskit/link-datasource": "^3.
|
|
52
|
+
"@atlaskit/link-datasource": "^3.3.0",
|
|
53
53
|
"@atlaskit/linking-common": "^5.11.0",
|
|
54
54
|
"@atlaskit/linking-types": "^9.0.0",
|
|
55
|
-
"@atlaskit/menu": "2.12.
|
|
55
|
+
"@atlaskit/menu": "2.12.6",
|
|
56
56
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
57
57
|
"@atlaskit/primitives": "^12.2.0",
|
|
58
58
|
"@atlaskit/smart-card": "^29.0.0",
|
|
59
59
|
"@atlaskit/theme": "^13.0.0",
|
|
60
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
60
|
+
"@atlaskit/tmp-editor-statsig": "^2.2.0",
|
|
61
61
|
"@atlaskit/tokens": "^2.0.0",
|
|
62
62
|
"@babel/runtime": "^7.0.0",
|
|
63
63
|
"@emotion/react": "^11.7.1",
|
|
@@ -143,6 +143,9 @@
|
|
|
143
143
|
},
|
|
144
144
|
"linking_platform_smart_links_in_live_pages": {
|
|
145
145
|
"type": "boolean"
|
|
146
|
+
},
|
|
147
|
+
"platform_editor_ssr_fix_smartlinks": {
|
|
148
|
+
"type": "boolean"
|
|
146
149
|
}
|
|
147
150
|
},
|
|
148
151
|
"stricter": {
|