@atlaskit/editor-synced-block-renderer 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-dev-agents/tsconfig.json +35 -0
- package/afm-passionfruit/tsconfig.json +35 -0
- package/afm-post-office/tsconfig.json +35 -0
- package/afm-rovo-extension/tsconfig.json +35 -0
- package/afm-townsquare/tsconfig.json +35 -0
- package/dist/cjs/index.js +6 -0
- package/dist/cjs/syncedBlockRenderer.js +78 -4
- package/dist/es2019/index.js +1 -1
- package/dist/es2019/syncedBlockRenderer.js +66 -3
- package/dist/esm/index.js +1 -1
- package/dist/esm/syncedBlockRenderer.js +75 -3
- package/dist/types/index.d.ts +1 -1
- package/dist/types/syncedBlockRenderer.d.ts +32 -0
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/syncedBlockRenderer.d.ts +32 -0
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/editor-synced-block-renderer
|
|
2
2
|
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`6fabf6d555515`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fabf6d555515) -
|
|
8
|
+
EDITOR-1566 add renderer sync-block node support
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 2.0.0
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.dev-agents.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../dev-agents/tsDist/@atlaskit__editor-synced-block-renderer/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
23
|
+
],
|
|
24
|
+
"references": [
|
|
25
|
+
{
|
|
26
|
+
"path": "../../editor-synced-block-provider/afm-dev-agents/tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"path": "../../renderer/afm-dev-agents/tsconfig.json"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"path": "../../editor-common/afm-dev-agents/tsconfig.json"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.passionfruit.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../passionfruit/tsDist/@atlaskit__editor-synced-block-renderer/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
23
|
+
],
|
|
24
|
+
"references": [
|
|
25
|
+
{
|
|
26
|
+
"path": "../../editor-synced-block-provider/afm-passionfruit/tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"path": "../../renderer/afm-passionfruit/tsconfig.json"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"path": "../../editor-common/afm-passionfruit/tsconfig.json"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.post-office.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../post-office/tsDist/@atlaskit__editor-synced-block-renderer/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
23
|
+
],
|
|
24
|
+
"references": [
|
|
25
|
+
{
|
|
26
|
+
"path": "../../editor-synced-block-provider/afm-post-office/tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"path": "../../renderer/afm-post-office/tsconfig.json"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"path": "../../editor-common/afm-post-office/tsconfig.json"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.rovo-extension.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../rovo-extension/tsDist/@atlaskit__editor-synced-block-renderer/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
23
|
+
],
|
|
24
|
+
"references": [
|
|
25
|
+
{
|
|
26
|
+
"path": "../../editor-synced-block-provider/afm-rovo-extension/tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"path": "../../renderer/afm-rovo-extension/tsconfig.json"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../../../tsconfig.entry-points.townsquare.json",
|
|
3
|
+
"compilerOptions": {
|
|
4
|
+
"target": "es5",
|
|
5
|
+
"outDir": "../../../../../townsquare/tsDist/@atlaskit__editor-synced-block-renderer/app",
|
|
6
|
+
"rootDir": "../",
|
|
7
|
+
"composite": true
|
|
8
|
+
},
|
|
9
|
+
"include": [
|
|
10
|
+
"../src/**/*.ts",
|
|
11
|
+
"../src/**/*.tsx"
|
|
12
|
+
],
|
|
13
|
+
"exclude": [
|
|
14
|
+
"../src/**/__tests__/*",
|
|
15
|
+
"../src/**/*.test.*",
|
|
16
|
+
"../src/**/test.*",
|
|
17
|
+
"../src/**/examples.*",
|
|
18
|
+
"../src/**/examples/*",
|
|
19
|
+
"../src/**/examples/**/*",
|
|
20
|
+
"../src/**/*.stories.*",
|
|
21
|
+
"../src/**/stories/*",
|
|
22
|
+
"../src/**/stories/**/*"
|
|
23
|
+
],
|
|
24
|
+
"references": [
|
|
25
|
+
{
|
|
26
|
+
"path": "../../editor-synced-block-provider/afm-townsquare/tsconfig.json"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"path": "../../renderer/afm-townsquare/tsconfig.json"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"path": "../../editor-common/afm-townsquare/tsconfig.json"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
+
Object.defineProperty(exports, "getSyncBlockNodeComponent", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _syncedBlockRenderer.getSyncBlockNodeComponent;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
6
12
|
Object.defineProperty(exports, "getSyncedBlockRenderer", {
|
|
7
13
|
enumerable: true,
|
|
8
14
|
get: function get() {
|
|
@@ -1,26 +1,100 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
|
-
exports.getSyncedBlockRenderer = void 0;
|
|
8
|
-
var
|
|
8
|
+
exports.getSyncedBlockRenderer = exports.getSyncBlockNodeComponent = void 0;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
12
|
+
var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
|
|
9
13
|
var _renderer = require("@atlaskit/renderer");
|
|
10
14
|
var _actions = require("@atlaskit/renderer/actions");
|
|
15
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
16
|
+
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; }
|
|
17
|
+
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; }
|
|
11
18
|
var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
|
|
12
|
-
var useFetchDocNode = _ref.useFetchDocNode
|
|
19
|
+
var useFetchDocNode = _ref.useFetchDocNode,
|
|
20
|
+
dataProviders = _ref.dataProviders;
|
|
13
21
|
var latestDocNode = useFetchDocNode();
|
|
14
22
|
return /*#__PURE__*/_react.default.createElement(_actions.RendererActionsContext, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
15
23
|
"data-testid": "sync-block-renderer-wrapper"
|
|
16
24
|
}, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
|
|
17
25
|
appearance: "full-width",
|
|
18
26
|
adfStage: "stage0",
|
|
19
|
-
|
|
27
|
+
schema: (0, _editorSyncedBlockProvider.getDefaultSyncBlockSchema)(),
|
|
28
|
+
document: latestDocNode,
|
|
29
|
+
disableHeadingIDs: true,
|
|
30
|
+
dataProviders: dataProviders
|
|
20
31
|
})));
|
|
21
32
|
};
|
|
22
33
|
var getSyncedBlockRenderer = exports.getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
|
|
23
34
|
return /*#__PURE__*/_react.default.createElement(SyncedBlockRenderer, {
|
|
24
35
|
useFetchDocNode: props.useFetchDocNode
|
|
25
36
|
});
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
/**
|
|
40
|
+
* From packages packages/editor/renderer/src/react/types.ts
|
|
41
|
+
* Avoid importing from renderer package directly to avoid circular dependency
|
|
42
|
+
*/
|
|
43
|
+
|
|
44
|
+
/**
|
|
45
|
+
* This is a subset of the full NodeMeta type defined in renderer package
|
|
46
|
+
* packages/editor/renderer/src/react/types.ts
|
|
47
|
+
*/
|
|
48
|
+
|
|
49
|
+
var SyncBlockNodeComponent = function SyncBlockNodeComponent(props) {
|
|
50
|
+
var _useState = (0, _react.useState)(null),
|
|
51
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
52
|
+
data = _useState2[0],
|
|
53
|
+
setData = _useState2[1];
|
|
54
|
+
(0, _react.useEffect)(function () {
|
|
55
|
+
if (!props.dataPromise) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
if (data) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
props.dataPromise.then(function (data) {
|
|
62
|
+
setData(data);
|
|
63
|
+
});
|
|
64
|
+
}, [props.dataPromise, data]);
|
|
65
|
+
if (!data) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement("div", null, "loading...");
|
|
67
|
+
}
|
|
68
|
+
var syncBlockData = data.find(function (item) {
|
|
69
|
+
return item.resourceId === props.resourceId;
|
|
70
|
+
});
|
|
71
|
+
if (!(syncBlockData !== null && syncBlockData !== void 0 && syncBlockData.content)) {
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement("div", null, "Sync block not found");
|
|
73
|
+
}
|
|
74
|
+
var syncBlockDoc = _objectSpread(_objectSpread({}, syncBlockData.content), {}, {
|
|
75
|
+
version: 1
|
|
76
|
+
});
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
78
|
+
"data-testid": "sync-block-renderer-wrapper"
|
|
79
|
+
}, /*#__PURE__*/_react.default.createElement(_renderer.ReactRenderer, {
|
|
80
|
+
appearance: "full-width",
|
|
81
|
+
adfStage: "stage0",
|
|
82
|
+
schema: (0, _editorSyncedBlockProvider.getDefaultSyncBlockSchema)(),
|
|
83
|
+
document: syncBlockDoc,
|
|
84
|
+
disableHeadingIDs: true,
|
|
85
|
+
dataProviders: props.providers
|
|
86
|
+
}));
|
|
87
|
+
};
|
|
88
|
+
var getSyncBlockNodeComponent = exports.getSyncBlockNodeComponent = function getSyncBlockNodeComponent(dataProvider, doc) {
|
|
89
|
+
var content = doc.content;
|
|
90
|
+
var isEmpty = !content || !Array.isArray(content) || content.length === 0;
|
|
91
|
+
var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
|
|
92
|
+
return node.type === 'syncBlock';
|
|
93
|
+
});
|
|
94
|
+
var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
|
|
95
|
+
return function (props) {
|
|
96
|
+
return SyncBlockNodeComponent(_objectSpread(_objectSpread({}, props), {}, {
|
|
97
|
+
dataPromise: dataPromise
|
|
98
|
+
}));
|
|
99
|
+
};
|
|
26
100
|
};
|
package/dist/es2019/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/editor/no-re-export
|
|
2
|
-
export { getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
2
|
+
export { getSyncBlockNodeComponent, getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useEffect, useState } from 'react';
|
|
2
|
+
import { getDefaultSyncBlockSchema } from '@atlaskit/editor-synced-block-provider';
|
|
2
3
|
import { ReactRenderer } from '@atlaskit/renderer';
|
|
3
4
|
import { RendererActionsContext } from '@atlaskit/renderer/actions';
|
|
4
5
|
const SyncedBlockRenderer = ({
|
|
5
|
-
useFetchDocNode
|
|
6
|
+
useFetchDocNode,
|
|
7
|
+
dataProviders
|
|
6
8
|
}) => {
|
|
7
9
|
const latestDocNode = useFetchDocNode();
|
|
8
10
|
return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
|
|
@@ -10,11 +12,72 @@ const SyncedBlockRenderer = ({
|
|
|
10
12
|
}, /*#__PURE__*/React.createElement(ReactRenderer, {
|
|
11
13
|
appearance: "full-width",
|
|
12
14
|
adfStage: "stage0",
|
|
13
|
-
|
|
15
|
+
schema: getDefaultSyncBlockSchema(),
|
|
16
|
+
document: latestDocNode,
|
|
17
|
+
disableHeadingIDs: true,
|
|
18
|
+
dataProviders: dataProviders
|
|
14
19
|
})));
|
|
15
20
|
};
|
|
16
21
|
export const getSyncedBlockRenderer = props => {
|
|
17
22
|
return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
|
|
18
23
|
useFetchDocNode: props.useFetchDocNode
|
|
19
24
|
});
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
/**
|
|
28
|
+
* From packages packages/editor/renderer/src/react/types.ts
|
|
29
|
+
* Avoid importing from renderer package directly to avoid circular dependency
|
|
30
|
+
*/
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* This is a subset of the full NodeMeta type defined in renderer package
|
|
34
|
+
* packages/editor/renderer/src/react/types.ts
|
|
35
|
+
*/
|
|
36
|
+
|
|
37
|
+
const SyncBlockNodeComponent = props => {
|
|
38
|
+
const [data, setData] = useState(null);
|
|
39
|
+
useEffect(() => {
|
|
40
|
+
if (!props.dataPromise) {
|
|
41
|
+
return;
|
|
42
|
+
}
|
|
43
|
+
if (data) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
props.dataPromise.then(data => {
|
|
47
|
+
setData(data);
|
|
48
|
+
});
|
|
49
|
+
}, [props.dataPromise, data]);
|
|
50
|
+
if (!data) {
|
|
51
|
+
return /*#__PURE__*/React.createElement("div", null, "loading...");
|
|
52
|
+
}
|
|
53
|
+
const syncBlockData = data.find(item => item.resourceId === props.resourceId);
|
|
54
|
+
if (!(syncBlockData !== null && syncBlockData !== void 0 && syncBlockData.content)) {
|
|
55
|
+
return /*#__PURE__*/React.createElement("div", null, "Sync block not found");
|
|
56
|
+
}
|
|
57
|
+
const syncBlockDoc = {
|
|
58
|
+
...syncBlockData.content,
|
|
59
|
+
version: 1
|
|
60
|
+
};
|
|
61
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
62
|
+
"data-testid": "sync-block-renderer-wrapper"
|
|
63
|
+
}, /*#__PURE__*/React.createElement(ReactRenderer, {
|
|
64
|
+
appearance: "full-width",
|
|
65
|
+
adfStage: "stage0",
|
|
66
|
+
schema: getDefaultSyncBlockSchema(),
|
|
67
|
+
document: syncBlockDoc,
|
|
68
|
+
disableHeadingIDs: true,
|
|
69
|
+
dataProviders: props.providers
|
|
70
|
+
}));
|
|
71
|
+
};
|
|
72
|
+
export const getSyncBlockNodeComponent = (dataProvider, doc) => {
|
|
73
|
+
const {
|
|
74
|
+
content
|
|
75
|
+
} = doc;
|
|
76
|
+
const isEmpty = !content || !Array.isArray(content) || content.length === 0;
|
|
77
|
+
const syncBlockNodes = isEmpty ? [] : content.filter(node => node.type === 'syncBlock');
|
|
78
|
+
const dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
|
|
79
|
+
return props => SyncBlockNodeComponent({
|
|
80
|
+
...props,
|
|
81
|
+
dataPromise
|
|
82
|
+
});
|
|
20
83
|
};
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
// eslint-disable-next-line @atlaskit/editor/no-re-export
|
|
2
|
-
export { getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
2
|
+
export { getSyncBlockNodeComponent, getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
@@ -1,19 +1,91 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
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; }
|
|
4
|
+
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; }
|
|
5
|
+
import React, { useEffect, useState } from 'react';
|
|
6
|
+
import { getDefaultSyncBlockSchema } from '@atlaskit/editor-synced-block-provider';
|
|
2
7
|
import { ReactRenderer } from '@atlaskit/renderer';
|
|
3
8
|
import { RendererActionsContext } from '@atlaskit/renderer/actions';
|
|
4
9
|
var SyncedBlockRenderer = function SyncedBlockRenderer(_ref) {
|
|
5
|
-
var useFetchDocNode = _ref.useFetchDocNode
|
|
10
|
+
var useFetchDocNode = _ref.useFetchDocNode,
|
|
11
|
+
dataProviders = _ref.dataProviders;
|
|
6
12
|
var latestDocNode = useFetchDocNode();
|
|
7
13
|
return /*#__PURE__*/React.createElement(RendererActionsContext, null, /*#__PURE__*/React.createElement("div", {
|
|
8
14
|
"data-testid": "sync-block-renderer-wrapper"
|
|
9
15
|
}, /*#__PURE__*/React.createElement(ReactRenderer, {
|
|
10
16
|
appearance: "full-width",
|
|
11
17
|
adfStage: "stage0",
|
|
12
|
-
|
|
18
|
+
schema: getDefaultSyncBlockSchema(),
|
|
19
|
+
document: latestDocNode,
|
|
20
|
+
disableHeadingIDs: true,
|
|
21
|
+
dataProviders: dataProviders
|
|
13
22
|
})));
|
|
14
23
|
};
|
|
15
24
|
export var getSyncedBlockRenderer = function getSyncedBlockRenderer(props) {
|
|
16
25
|
return /*#__PURE__*/React.createElement(SyncedBlockRenderer, {
|
|
17
26
|
useFetchDocNode: props.useFetchDocNode
|
|
18
27
|
});
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* From packages packages/editor/renderer/src/react/types.ts
|
|
32
|
+
* Avoid importing from renderer package directly to avoid circular dependency
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
/**
|
|
36
|
+
* This is a subset of the full NodeMeta type defined in renderer package
|
|
37
|
+
* packages/editor/renderer/src/react/types.ts
|
|
38
|
+
*/
|
|
39
|
+
|
|
40
|
+
var SyncBlockNodeComponent = function SyncBlockNodeComponent(props) {
|
|
41
|
+
var _useState = useState(null),
|
|
42
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
43
|
+
data = _useState2[0],
|
|
44
|
+
setData = _useState2[1];
|
|
45
|
+
useEffect(function () {
|
|
46
|
+
if (!props.dataPromise) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
if (data) {
|
|
50
|
+
return;
|
|
51
|
+
}
|
|
52
|
+
props.dataPromise.then(function (data) {
|
|
53
|
+
setData(data);
|
|
54
|
+
});
|
|
55
|
+
}, [props.dataPromise, data]);
|
|
56
|
+
if (!data) {
|
|
57
|
+
return /*#__PURE__*/React.createElement("div", null, "loading...");
|
|
58
|
+
}
|
|
59
|
+
var syncBlockData = data.find(function (item) {
|
|
60
|
+
return item.resourceId === props.resourceId;
|
|
61
|
+
});
|
|
62
|
+
if (!(syncBlockData !== null && syncBlockData !== void 0 && syncBlockData.content)) {
|
|
63
|
+
return /*#__PURE__*/React.createElement("div", null, "Sync block not found");
|
|
64
|
+
}
|
|
65
|
+
var syncBlockDoc = _objectSpread(_objectSpread({}, syncBlockData.content), {}, {
|
|
66
|
+
version: 1
|
|
67
|
+
});
|
|
68
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
69
|
+
"data-testid": "sync-block-renderer-wrapper"
|
|
70
|
+
}, /*#__PURE__*/React.createElement(ReactRenderer, {
|
|
71
|
+
appearance: "full-width",
|
|
72
|
+
adfStage: "stage0",
|
|
73
|
+
schema: getDefaultSyncBlockSchema(),
|
|
74
|
+
document: syncBlockDoc,
|
|
75
|
+
disableHeadingIDs: true,
|
|
76
|
+
dataProviders: props.providers
|
|
77
|
+
}));
|
|
78
|
+
};
|
|
79
|
+
export var getSyncBlockNodeComponent = function getSyncBlockNodeComponent(dataProvider, doc) {
|
|
80
|
+
var content = doc.content;
|
|
81
|
+
var isEmpty = !content || !Array.isArray(content) || content.length === 0;
|
|
82
|
+
var syncBlockNodes = isEmpty ? [] : content.filter(function (node) {
|
|
83
|
+
return node.type === 'syncBlock';
|
|
84
|
+
});
|
|
85
|
+
var dataPromise = dataProvider.fetchNodesData(syncBlockNodes);
|
|
86
|
+
return function (props) {
|
|
87
|
+
return SyncBlockNodeComponent(_objectSpread(_objectSpread({}, props), {}, {
|
|
88
|
+
dataPromise: dataPromise
|
|
89
|
+
}));
|
|
90
|
+
};
|
|
19
91
|
};
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
1
|
+
export { getSyncBlockNodeComponent, getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DocNode } from '@atlaskit/adf-schema';
|
|
3
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
4
|
+
import type { NodeType, Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import { type SyncBlockData, type SyncBlockNode } from '@atlaskit/editor-synced-block-provider';
|
|
6
|
+
import type { NodeDataProvider } from '@atlaskit/node-data-provider';
|
|
3
7
|
export type SyncedBlockRendererProps = {
|
|
8
|
+
dataProviders?: ProviderFactory;
|
|
4
9
|
useFetchDocNode: () => DocNode;
|
|
5
10
|
};
|
|
6
11
|
export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
12
|
+
/**
|
|
13
|
+
* From packages packages/editor/renderer/src/react/types.ts
|
|
14
|
+
* Avoid importing from renderer package directly to avoid circular dependency
|
|
15
|
+
*/
|
|
16
|
+
export interface RendererContext {
|
|
17
|
+
adDoc?: any;
|
|
18
|
+
containerAri?: string;
|
|
19
|
+
objectAri?: string;
|
|
20
|
+
schema?: Schema;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* This is a subset of the full NodeMeta type defined in renderer package
|
|
24
|
+
* packages/editor/renderer/src/react/types.ts
|
|
25
|
+
*/
|
|
26
|
+
export interface NodeMeta {
|
|
27
|
+
dataAttributes: {
|
|
28
|
+
'data-renderer-start-pos': number;
|
|
29
|
+
};
|
|
30
|
+
localId?: string;
|
|
31
|
+
marks: PMNode['marks'];
|
|
32
|
+
nodeType: NodeType['name'];
|
|
33
|
+
portal?: HTMLElement | undefined;
|
|
34
|
+
providers?: ProviderFactory | undefined;
|
|
35
|
+
rendererContext?: RendererContext;
|
|
36
|
+
resourceId?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const getSyncBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockData>, doc: DocNode) => (props: NodeMeta) => React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
1
|
+
export { getSyncBlockNodeComponent, getSyncedBlockRenderer } from './syncedBlockRenderer';
|
|
@@ -1,6 +1,38 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { DocNode } from '@atlaskit/adf-schema';
|
|
3
|
+
import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
|
|
4
|
+
import type { NodeType, Node as PMNode, Schema } from '@atlaskit/editor-prosemirror/model';
|
|
5
|
+
import { type SyncBlockData, type SyncBlockNode } from '@atlaskit/editor-synced-block-provider';
|
|
6
|
+
import type { NodeDataProvider } from '@atlaskit/node-data-provider';
|
|
3
7
|
export type SyncedBlockRendererProps = {
|
|
8
|
+
dataProviders?: ProviderFactory;
|
|
4
9
|
useFetchDocNode: () => DocNode;
|
|
5
10
|
};
|
|
6
11
|
export declare const getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
|
|
12
|
+
/**
|
|
13
|
+
* From packages packages/editor/renderer/src/react/types.ts
|
|
14
|
+
* Avoid importing from renderer package directly to avoid circular dependency
|
|
15
|
+
*/
|
|
16
|
+
export interface RendererContext {
|
|
17
|
+
adDoc?: any;
|
|
18
|
+
containerAri?: string;
|
|
19
|
+
objectAri?: string;
|
|
20
|
+
schema?: Schema;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* This is a subset of the full NodeMeta type defined in renderer package
|
|
24
|
+
* packages/editor/renderer/src/react/types.ts
|
|
25
|
+
*/
|
|
26
|
+
export interface NodeMeta {
|
|
27
|
+
dataAttributes: {
|
|
28
|
+
'data-renderer-start-pos': number;
|
|
29
|
+
};
|
|
30
|
+
localId?: string;
|
|
31
|
+
marks: PMNode['marks'];
|
|
32
|
+
nodeType: NodeType['name'];
|
|
33
|
+
portal?: HTMLElement | undefined;
|
|
34
|
+
providers?: ProviderFactory | undefined;
|
|
35
|
+
rendererContext?: RendererContext;
|
|
36
|
+
resourceId?: string;
|
|
37
|
+
}
|
|
38
|
+
export declare const getSyncBlockNodeComponent: (dataProvider: NodeDataProvider<SyncBlockNode, SyncBlockData>, doc: DocNode) => (props: NodeMeta) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-synced-block-renderer",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "SyncedBlockRenderer for @atlaskit/editor-plugin-synced-block",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -29,11 +29,12 @@
|
|
|
29
29
|
"atlaskit:src": "src/index.ts",
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"@atlaskit/editor-prosemirror": "7.0.0",
|
|
32
|
-
"@atlaskit/
|
|
32
|
+
"@atlaskit/editor-synced-block-provider": "^0.2.0",
|
|
33
|
+
"@atlaskit/renderer": "^124.1.0",
|
|
33
34
|
"@babel/runtime": "^7.0.0"
|
|
34
35
|
},
|
|
35
36
|
"peerDependencies": {
|
|
36
|
-
"@atlaskit/editor-common": "^110.
|
|
37
|
+
"@atlaskit/editor-common": "^110.3.0",
|
|
37
38
|
"react": "^18.2.0"
|
|
38
39
|
},
|
|
39
40
|
"devDependencies": {
|