@atlaskit/editor-plugin-synced-block 5.3.12 → 5.3.13
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 +8 -0
- package/afm-cc/tsconfig.json +0 -3
- package/afm-jira/tsconfig.json +0 -3
- package/afm-products/tsconfig.json +0 -3
- package/dist/cjs/editor-commands/index.js +27 -33
- package/dist/cjs/nodeviews/bodiedSyncedBlock.js +2 -7
- package/dist/cjs/nodeviews/syncedBlock.js +4 -18
- package/dist/cjs/pm-plugins/main.js +34 -43
- package/dist/cjs/pm-plugins/utils/track-sync-blocks.js +1 -2
- package/dist/cjs/pm-plugins/utils/utils.js +1 -46
- package/dist/cjs/syncedBlockPlugin.js +3 -5
- package/dist/cjs/ui/DeleteConfirmationModal.js +4 -20
- package/dist/cjs/ui/SyncBlockLabel.js +4 -10
- package/dist/cjs/ui/SyncBlockRefresher.js +7 -9
- package/dist/cjs/ui/floating-toolbar.js +3 -3
- package/dist/es2019/editor-commands/index.js +27 -33
- package/dist/es2019/nodeviews/bodiedSyncedBlock.js +2 -7
- package/dist/es2019/nodeviews/syncedBlock.js +4 -15
- package/dist/es2019/pm-plugins/main.js +33 -42
- package/dist/es2019/pm-plugins/utils/track-sync-blocks.js +1 -2
- package/dist/es2019/pm-plugins/utils/utils.js +0 -47
- package/dist/es2019/syncedBlockPlugin.js +3 -4
- package/dist/es2019/ui/DeleteConfirmationModal.js +4 -20
- package/dist/es2019/ui/SyncBlockLabel.js +4 -10
- package/dist/es2019/ui/SyncBlockRefresher.js +7 -9
- package/dist/es2019/ui/floating-toolbar.js +3 -3
- package/dist/esm/editor-commands/index.js +27 -33
- package/dist/esm/nodeviews/bodiedSyncedBlock.js +2 -7
- package/dist/esm/nodeviews/syncedBlock.js +4 -18
- package/dist/esm/pm-plugins/main.js +34 -43
- package/dist/esm/pm-plugins/utils/track-sync-blocks.js +1 -2
- package/dist/esm/pm-plugins/utils/utils.js +0 -45
- package/dist/esm/syncedBlockPlugin.js +3 -5
- package/dist/esm/ui/DeleteConfirmationModal.js +4 -20
- package/dist/esm/ui/SyncBlockLabel.js +4 -10
- package/dist/esm/ui/SyncBlockRefresher.js +7 -9
- package/dist/esm/ui/floating-toolbar.js +3 -3
- package/dist/types/pm-plugins/utils/handle-bodied-sync-block-removal.d.ts +1 -1
- package/dist/types/pm-plugins/utils/utils.d.ts +1 -3
- package/dist/types-ts4.5/pm-plugins/utils/handle-bodied-sync-block-removal.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/utils/utils.d.ts +1 -3
- package/package.json +1 -5
|
@@ -30,17 +30,15 @@ export const createSyncedBlock = ({
|
|
|
30
30
|
const paragraphNode = paragraph.createAndFill({});
|
|
31
31
|
const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, paragraphNode ? [paragraphNode] : []);
|
|
32
32
|
if (!newBodiedSyncBlockNode) {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
});
|
|
43
|
-
}
|
|
33
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
34
|
+
action: ACTION.ERROR,
|
|
35
|
+
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
36
|
+
actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
|
|
37
|
+
attributes: {
|
|
38
|
+
error: 'Create and fill for empty content failed'
|
|
39
|
+
},
|
|
40
|
+
eventType: EVENT_TYPE.OPERATIONAL
|
|
41
|
+
});
|
|
44
42
|
return false;
|
|
45
43
|
}
|
|
46
44
|
|
|
@@ -55,33 +53,29 @@ export const createSyncedBlock = ({
|
|
|
55
53
|
} else {
|
|
56
54
|
const conversionInfo = canBeConvertedToSyncBlock(tr.selection);
|
|
57
55
|
if (!conversionInfo) {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
});
|
|
68
|
-
}
|
|
56
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
57
|
+
action: ACTION.ERROR,
|
|
58
|
+
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
59
|
+
actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
|
|
60
|
+
attributes: {
|
|
61
|
+
error: 'Content cannot be converted to sync block'
|
|
62
|
+
},
|
|
63
|
+
eventType: EVENT_TYPE.OPERATIONAL
|
|
64
|
+
});
|
|
69
65
|
return false;
|
|
70
66
|
}
|
|
71
67
|
const attrs = syncBlockStore.sourceManager.generateBodiedSyncBlockAttrs();
|
|
72
68
|
const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(attrs, conversionInfo.contentToInclude);
|
|
73
69
|
if (!newBodiedSyncBlockNode) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
});
|
|
84
|
-
}
|
|
70
|
+
fireAnalyticsEvent === null || fireAnalyticsEvent === void 0 ? void 0 : fireAnalyticsEvent({
|
|
71
|
+
action: ACTION.ERROR,
|
|
72
|
+
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
73
|
+
actionSubjectId: ACTION_SUBJECT_ID.SYNCED_BLOCK_CREATE,
|
|
74
|
+
attributes: {
|
|
75
|
+
error: 'Create and fill for content failed'
|
|
76
|
+
},
|
|
77
|
+
eventType: EVENT_TYPE.OPERATIONAL
|
|
78
|
+
});
|
|
85
79
|
return false;
|
|
86
80
|
}
|
|
87
81
|
|
|
@@ -5,7 +5,6 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
5
5
|
import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
6
6
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
7
7
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
|
|
10
9
|
const toDOM = () => ['div', {
|
|
11
10
|
class: BodiedSyncBlockSharedCssClassName.content,
|
|
@@ -68,7 +67,7 @@ class BodiedSyncBlock extends ReactNodeView {
|
|
|
68
67
|
if (!syncBlockStore) {
|
|
69
68
|
return null;
|
|
70
69
|
}
|
|
71
|
-
return
|
|
70
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
72
71
|
component: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
73
72
|
dispatchAnalyticsEvent: (_this$api6 = this.api) === null || _this$api6 === void 0 ? void 0 : (_this$api6$analytics = _this$api6.analytics) === null || _this$api6$analytics === void 0 ? void 0 : _this$api6$analytics.actions.fireAnalyticsEvent,
|
|
74
73
|
fallbackComponent: null
|
|
@@ -76,11 +75,7 @@ class BodiedSyncBlock extends ReactNodeView {
|
|
|
76
75
|
ref: forwardRef,
|
|
77
76
|
syncBlockStore: syncBlockStore,
|
|
78
77
|
node: this.node
|
|
79
|
-
}))
|
|
80
|
-
ref: forwardRef,
|
|
81
|
-
syncBlockStore: syncBlockStore,
|
|
82
|
-
node: this.node
|
|
83
|
-
});
|
|
78
|
+
}));
|
|
84
79
|
}
|
|
85
80
|
getContentDOM() {
|
|
86
81
|
const {
|
|
@@ -4,7 +4,6 @@ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
|
|
|
4
4
|
import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
5
5
|
import { SyncBlockSharedCssClassName, SyncBlockActionsProvider } from '@atlaskit/editor-common/sync-block';
|
|
6
6
|
import { useFetchSyncBlockData, useFetchSyncBlockTitle } from '@atlaskit/editor-synced-block-provider';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { removeSyncedBlockAtPos } from '../editor-commands';
|
|
9
8
|
import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
|
|
10
9
|
export class SyncBlock extends ReactNodeView {
|
|
@@ -22,7 +21,7 @@ export class SyncBlock extends ReactNodeView {
|
|
|
22
21
|
render({
|
|
23
22
|
getPos
|
|
24
23
|
}) {
|
|
25
|
-
var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2
|
|
24
|
+
var _this$options, _this$api$syncedBlock, _this$api, _this$api$syncedBlock2, _this$api$syncedBlock3, _this$api2, _this$api2$analytics, _this$options2;
|
|
26
25
|
if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.syncedBlockRenderer)) {
|
|
27
26
|
return null;
|
|
28
27
|
}
|
|
@@ -33,14 +32,13 @@ export class SyncBlock extends ReactNodeView {
|
|
|
33
32
|
if (!resourceId || !localId) {
|
|
34
33
|
return null;
|
|
35
34
|
}
|
|
36
|
-
const
|
|
37
|
-
const syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api.syncedBlock) === null || _this$api$syncedBlock2 === void 0 ? void 0 : (_this$api$syncedBlock3 = _this$api$syncedBlock2.sharedState.currentState()) === null || _this$api$syncedBlock3 === void 0 ? void 0 : _this$api$syncedBlock3.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : initialSyncBlockStore;
|
|
35
|
+
const syncBlockStore = (_this$api$syncedBlock = (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$syncedBlock2 = _this$api.syncedBlock) === null || _this$api$syncedBlock2 === void 0 ? void 0 : (_this$api$syncedBlock3 = _this$api$syncedBlock2.sharedState.currentState()) === null || _this$api$syncedBlock3 === void 0 ? void 0 : _this$api$syncedBlock3.syncBlockStore) !== null && _this$api$syncedBlock !== void 0 ? _this$api$syncedBlock : this.syncBlockStore;
|
|
38
36
|
if (!syncBlockStore) {
|
|
39
37
|
return null;
|
|
40
38
|
}
|
|
41
39
|
|
|
42
40
|
// get document node from data provider
|
|
43
|
-
return
|
|
41
|
+
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
44
42
|
component: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
45
43
|
dispatchAnalyticsEvent: (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$analytics = _this$api2.analytics) === null || _this$api2$analytics === void 0 ? void 0 : _this$api2$analytics.actions.fireAnalyticsEvent,
|
|
46
44
|
fallbackComponent: null
|
|
@@ -61,16 +59,7 @@ export class SyncBlock extends ReactNodeView {
|
|
|
61
59
|
return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api3 = this.api) === null || _this$api3 === void 0 ? void 0 : (_this$api3$analytics = _this$api3.analytics) === null || _this$api3$analytics === void 0 ? void 0 : (_this$api3$analytics$ = _this$api3$analytics.actions) === null || _this$api3$analytics$ === void 0 ? void 0 : _this$api3$analytics$.fireAnalyticsEvent);
|
|
62
60
|
},
|
|
63
61
|
api: this.api
|
|
64
|
-
})))
|
|
65
|
-
localId: this.node.attrs.localId,
|
|
66
|
-
syncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.syncedBlockRenderer,
|
|
67
|
-
useFetchSyncBlockTitle: () => useFetchSyncBlockTitle(syncBlockStore, this.node),
|
|
68
|
-
useFetchSyncBlockData: () => {
|
|
69
|
-
var _this$api4, _this$api4$analytics, _this$api4$analytics$;
|
|
70
|
-
return useFetchSyncBlockData(syncBlockStore, resourceId, localId, (_this$api4 = this.api) === null || _this$api4 === void 0 ? void 0 : (_this$api4$analytics = _this$api4.analytics) === null || _this$api4$analytics === void 0 ? void 0 : (_this$api4$analytics$ = _this$api4$analytics.actions) === null || _this$api4$analytics$ === void 0 ? void 0 : _this$api4$analytics$.fireAnalyticsEvent);
|
|
71
|
-
},
|
|
72
|
-
api: this.api
|
|
73
|
-
});
|
|
62
|
+
})));
|
|
74
63
|
}
|
|
75
64
|
destroy() {
|
|
76
65
|
var _this$unsubscribe;
|
|
@@ -7,9 +7,7 @@ import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
|
7
7
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
8
8
|
import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
9
9
|
import { convertPMNodesToSyncBlockNodes, rebaseTransaction } from '@atlaskit/editor-synced-block-provider';
|
|
10
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
10
|
import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
|
|
12
|
-
import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
|
|
13
11
|
import { SyncBlock as SyncBlockView } from '../nodeviews/syncedBlock';
|
|
14
12
|
import { FLAG_ID } from '../types';
|
|
15
13
|
import { handleBodiedSyncBlockRemoval } from './utils/handle-bodied-sync-block-removal';
|
|
@@ -52,7 +50,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
|
|
|
52
50
|
const unpublishedFlagShown = new Set();
|
|
53
51
|
|
|
54
52
|
// Set up callback to detect unpublished sync blocks when they're fetched
|
|
55
|
-
|
|
53
|
+
syncBlockStore.referenceManager.setOnUnpublishedSyncBlockDetected(resourceId => {
|
|
56
54
|
// Only show the flag once per sync block
|
|
57
55
|
if (!unpublishedFlagShown.has(resourceId)) {
|
|
58
56
|
unpublishedFlagShown.add(resourceId);
|
|
@@ -104,7 +102,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
|
|
|
104
102
|
},
|
|
105
103
|
props: {
|
|
106
104
|
nodeViews: {
|
|
107
|
-
syncBlock:
|
|
105
|
+
syncBlock: (node, view, getPos, _decorations) => {
|
|
108
106
|
// To support SSR, pass `syncBlockStore` here
|
|
109
107
|
// and do not use lazy loading.
|
|
110
108
|
// We cannot start rendering and then load `syncBlockStore` asynchronously,
|
|
@@ -119,11 +117,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
|
|
|
119
117
|
eventDispatcher: pmPluginFactoryParams.eventDispatcher,
|
|
120
118
|
syncBlockStore: syncBlockStore
|
|
121
119
|
}).init();
|
|
122
|
-
}
|
|
123
|
-
options,
|
|
124
|
-
pmPluginFactoryParams,
|
|
125
|
-
api
|
|
126
|
-
}),
|
|
120
|
+
},
|
|
127
121
|
bodiedSyncBlock: lazyBodiedSyncBlockView({
|
|
128
122
|
pluginOptions: options,
|
|
129
123
|
pmPluginFactoryParams,
|
|
@@ -217,7 +211,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
|
|
|
217
211
|
const isConfirmedSyncBlockDeletion = Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'));
|
|
218
212
|
|
|
219
213
|
// Track newly added reference sync blocks before processing the transaction
|
|
220
|
-
if (tr.docChanged && !tr.getMeta('isRemote')
|
|
214
|
+
if (tr.docChanged && !tr.getMeta('isRemote')) {
|
|
221
215
|
const {
|
|
222
216
|
added
|
|
223
217
|
} = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
|
|
@@ -242,42 +236,39 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
|
|
|
242
236
|
added: bodiedSyncBlockAdded
|
|
243
237
|
} = trackSyncBlocks(syncBlockStore.sourceManager.isSourceBlock, tr, state);
|
|
244
238
|
if (!isOffline) {
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
eventType: EVENT_TYPE.OPERATIONAL
|
|
261
|
-
});
|
|
239
|
+
const {
|
|
240
|
+
removed: syncBlockRemoved,
|
|
241
|
+
added: syncBlockAdded
|
|
242
|
+
} = trackSyncBlocks(node => node.type.name === 'syncBlock', tr, state);
|
|
243
|
+
syncBlockRemoved.forEach(syncBlock => {
|
|
244
|
+
var _api$analytics, _api$analytics$action;
|
|
245
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : (_api$analytics$action = _api$analytics.actions) === null || _api$analytics$action === void 0 ? void 0 : _api$analytics$action.fireAnalyticsEvent({
|
|
246
|
+
action: ACTION.DELETED,
|
|
247
|
+
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
248
|
+
actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_DELETE,
|
|
249
|
+
attributes: {
|
|
250
|
+
resourceId: syncBlock.attrs.resourceId,
|
|
251
|
+
blockInstanceId: syncBlock.attrs.localId
|
|
252
|
+
},
|
|
253
|
+
eventType: EVENT_TYPE.OPERATIONAL
|
|
262
254
|
});
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
255
|
+
});
|
|
256
|
+
syncBlockAdded.forEach(syncBlock => {
|
|
257
|
+
var _api$analytics2, _api$analytics2$actio;
|
|
258
|
+
api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent({
|
|
259
|
+
action: ACTION.INSERTED,
|
|
260
|
+
actionSubject: ACTION_SUBJECT.SYNCED_BLOCK,
|
|
261
|
+
actionSubjectId: ACTION_SUBJECT_ID.REFERENCE_SYNCED_BLOCK_CREATE,
|
|
262
|
+
attributes: {
|
|
263
|
+
resourceId: syncBlock.attrs.resourceId,
|
|
264
|
+
blockInstanceId: syncBlock.attrs.localId
|
|
265
|
+
},
|
|
266
|
+
eventType: EVENT_TYPE.OPERATIONAL
|
|
275
267
|
});
|
|
276
|
-
}
|
|
277
|
-
;
|
|
268
|
+
});
|
|
278
269
|
if (bodiedSyncBlockRemoved.length > 0) {
|
|
279
270
|
confirmationTransactionRef.current = tr;
|
|
280
|
-
return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef,
|
|
271
|
+
return handleBodiedSyncBlockRemoval(bodiedSyncBlockRemoved, syncBlockStore, api, confirmationTransactionRef, getDeleteReason(tr));
|
|
281
272
|
}
|
|
282
273
|
if (bodiedSyncBlockAdded.length > 0) {
|
|
283
274
|
if (Boolean(tr.getMeta(pmHistoryPluginKey))) {
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
|
|
2
2
|
import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
3
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
4
3
|
export const trackSyncBlocks = (predicate, tr, state) => {
|
|
5
4
|
const removed = {};
|
|
6
5
|
const added = {};
|
|
@@ -20,7 +19,7 @@ export const trackSyncBlocks = (predicate, tr, state) => {
|
|
|
20
19
|
from,
|
|
21
20
|
to
|
|
22
21
|
} = step;
|
|
23
|
-
const docAtStep =
|
|
22
|
+
const docAtStep = tr.docs[idx];
|
|
24
23
|
let hasChange = false;
|
|
25
24
|
if (from !== to) {
|
|
26
25
|
step.getMap().forEach((oldStart, oldEnd) => {
|
|
@@ -1,9 +1,6 @@
|
|
|
1
1
|
import { expandSelectionToBlockRange } from '@atlaskit/editor-common/selection';
|
|
2
2
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
-
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
4
3
|
import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
5
|
-
import { CellSelection, findTable } from '@atlaskit/editor-tables';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
4
|
export const findSyncBlock = (schema, selection) => {
|
|
8
5
|
const {
|
|
9
6
|
syncBlock
|
|
@@ -28,50 +25,6 @@ const UNSUPPORTED_NODE_TYPES = new Set(['inlineExtension', 'extension', 'bodiedE
|
|
|
28
25
|
* or false if conversion is not possible
|
|
29
26
|
*/
|
|
30
27
|
export const canBeConvertedToSyncBlock = selection => {
|
|
31
|
-
return fg('platform_synced_block_dogfooding') ? canBeConvertedToSyncBlockNew(selection) : canBeConvertedToSyncBlockOld(selection);
|
|
32
|
-
};
|
|
33
|
-
export const canBeConvertedToSyncBlockOld = selection => {
|
|
34
|
-
const schema = selection.$from.doc.type.schema;
|
|
35
|
-
const {
|
|
36
|
-
nodes
|
|
37
|
-
} = schema;
|
|
38
|
-
let from = selection.from;
|
|
39
|
-
let to = selection.to;
|
|
40
|
-
let contentToInclude = selection.content().content;
|
|
41
|
-
if (selection instanceof CellSelection) {
|
|
42
|
-
const table = findTable(selection);
|
|
43
|
-
if (!table) {
|
|
44
|
-
return false;
|
|
45
|
-
}
|
|
46
|
-
contentToInclude = Fragment.from([table.node]);
|
|
47
|
-
from = table.pos;
|
|
48
|
-
to = table.pos + table.node.nodeSize;
|
|
49
|
-
} else if (selection instanceof TextSelection) {
|
|
50
|
-
const trueParent = findParentNodeOfType([nodes.bulletList, nodes.orderedList, nodes.taskList, nodes.blockquote])(selection);
|
|
51
|
-
if (trueParent) {
|
|
52
|
-
contentToInclude = Fragment.from([trueParent.node]);
|
|
53
|
-
from = trueParent.pos;
|
|
54
|
-
to = trueParent.pos + trueParent.node.nodeSize;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
let canBeConverted = true;
|
|
58
|
-
selection.$from.doc.nodesBetween(from, to, node => {
|
|
59
|
-
if (UNSUPPORTED_NODE_TYPES.has(node.type.name)) {
|
|
60
|
-
canBeConverted = false;
|
|
61
|
-
return false;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
|
-
if (!canBeConverted) {
|
|
65
|
-
return false;
|
|
66
|
-
}
|
|
67
|
-
contentToInclude = removeBreakoutMarks(contentToInclude);
|
|
68
|
-
return {
|
|
69
|
-
contentToInclude,
|
|
70
|
-
from,
|
|
71
|
-
to
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
export const canBeConvertedToSyncBlockNew = selection => {
|
|
75
28
|
const {
|
|
76
29
|
$from,
|
|
77
30
|
range
|
|
@@ -4,7 +4,6 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
|
|
|
4
4
|
import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
|
|
5
5
|
import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
|
|
6
6
|
import Lozenge from '@atlaskit/lozenge';
|
|
7
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
7
|
import { flushBodiedSyncBlocks, flushSyncBlocks } from './editor-actions';
|
|
9
8
|
import { copySyncedBlockReferenceToClipboardEditorCommand, createSyncedBlock } from './editor-commands';
|
|
10
9
|
import { createPlugin, syncedBlockPluginKey } from './pm-plugins/main';
|
|
@@ -41,7 +40,7 @@ export const syncedBlockPlugin = ({
|
|
|
41
40
|
return [{
|
|
42
41
|
name: 'syncedBlockPlugin',
|
|
43
42
|
plugin: params => createPlugin(config, params, syncBlockStore, api)
|
|
44
|
-
},
|
|
43
|
+
}, {
|
|
45
44
|
name: 'menuAndToolbarExperiencesPlugin',
|
|
46
45
|
plugin: () => getMenuAndToolbarExperiencesPlugin({
|
|
47
46
|
refs,
|
|
@@ -50,7 +49,7 @@ export const syncedBlockPlugin = ({
|
|
|
50
49
|
return api === null || api === void 0 ? void 0 : (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : (_api$analytics2$actio = _api$analytics2.actions) === null || _api$analytics2$actio === void 0 ? void 0 : _api$analytics2$actio.fireAnalyticsEvent(payload);
|
|
51
50
|
}
|
|
52
51
|
})
|
|
53
|
-
}]
|
|
52
|
+
}];
|
|
54
53
|
},
|
|
55
54
|
commands: {
|
|
56
55
|
copySyncedBlockReferenceToClipboard: inputMethod => copySyncedBlockReferenceToClipboardEditorCommand(syncBlockStore, inputMethod, api),
|
|
@@ -106,7 +105,7 @@ export const syncedBlockPlugin = ({
|
|
|
106
105
|
fireAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions.fireAnalyticsEvent
|
|
107
106
|
});
|
|
108
107
|
},
|
|
109
|
-
testId:
|
|
108
|
+
testId: SYNCED_BLOCK_BUTTON_TEST_ID.quickInsertCreate
|
|
110
109
|
}];
|
|
111
110
|
},
|
|
112
111
|
floatingToolbar: (state, intl) => getToolbarConfig(state, intl, api, syncBlockStore)
|
|
@@ -8,7 +8,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
|
|
|
8
8
|
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
9
9
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
10
10
|
import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { Text, Box } from '@atlaskit/primitives/compiled';
|
|
13
12
|
import Spinner from '@atlaskit/spinner';
|
|
14
13
|
import { syncedBlockPluginKey } from '../pm-plugins/main';
|
|
@@ -35,7 +34,7 @@ export const DeleteConfirmationModal = ({
|
|
|
35
34
|
syncBlockStoreManager,
|
|
36
35
|
api
|
|
37
36
|
}) => {
|
|
38
|
-
var _api$core2, _api$core4, _api$core6
|
|
37
|
+
var _api$core2, _api$core4, _api$core6;
|
|
39
38
|
const [isOpen, setIsOpen] = useState(false);
|
|
40
39
|
const [syncBlockIds, setSyncBlockIds] = useState(undefined);
|
|
41
40
|
const [referenceCount, setReferenceCount] = useState(undefined);
|
|
@@ -119,7 +118,7 @@ export const DeleteConfirmationModal = ({
|
|
|
119
118
|
}
|
|
120
119
|
}, [api === null || api === void 0 ? void 0 : (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, bodiedSyncBlockDeletionStatus, isOpen]);
|
|
121
120
|
useEffect(() => {
|
|
122
|
-
if (isOpen && syncBlockIds !== undefined
|
|
121
|
+
if (isOpen && syncBlockIds !== undefined) {
|
|
123
122
|
const fetchReferences = async () => {
|
|
124
123
|
try {
|
|
125
124
|
const references = await Promise.all(syncBlockIds.map(async syncBlockId => {
|
|
@@ -144,7 +143,7 @@ export const DeleteConfirmationModal = ({
|
|
|
144
143
|
onClose: handleClick(false),
|
|
145
144
|
testId: "sync-block-delete-confirmation",
|
|
146
145
|
height: 184
|
|
147
|
-
},
|
|
146
|
+
}, /*#__PURE__*/React.createElement(React.Fragment, null, referenceCount === undefined ? /*#__PURE__*/React.createElement(Box, {
|
|
148
147
|
xcss: styles.spinner
|
|
149
148
|
}, /*#__PURE__*/React.createElement(Spinner, {
|
|
150
149
|
size: "large"
|
|
@@ -157,22 +156,7 @@ export const DeleteConfirmationModal = ({
|
|
|
157
156
|
isDisabled: isOfflineMode(mode),
|
|
158
157
|
deleteReason: deleteReason,
|
|
159
158
|
sourceCount: (syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) || 0
|
|
160
|
-
}))
|
|
161
|
-
hasCloseButton: true
|
|
162
|
-
}, /*#__PURE__*/React.createElement(ModalTitle, {
|
|
163
|
-
appearance: "warning"
|
|
164
|
-
}, formatMessage(messages.deleteConfirmationModalTitleSingle))), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement(Text, null, formatMessage(messages.deleteConfirmationModalDescription, {
|
|
165
|
-
syncBlockCount: (_syncBlockIds$length = syncBlockIds === null || syncBlockIds === void 0 ? void 0 : syncBlockIds.length) !== null && _syncBlockIds$length !== void 0 ? _syncBlockIds$length : 1
|
|
166
|
-
}))), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
|
|
167
|
-
appearance: "subtle",
|
|
168
|
-
onClick: handleClick(false)
|
|
169
|
-
}, formatMessage(messages.deleteConfirmationModalCancelButton)), /*#__PURE__*/React.createElement(Button, {
|
|
170
|
-
appearance: "warning",
|
|
171
|
-
onClick: handleClick(true),
|
|
172
|
-
autoFocus: true,
|
|
173
|
-
isDisabled: isOfflineMode(mode),
|
|
174
|
-
isLoading: bodiedSyncBlockDeletionStatus === 'processing'
|
|
175
|
-
}, formatMessage(messages.deleteConfirmationModalDeleteButton))))));
|
|
159
|
+
}))));
|
|
176
160
|
};
|
|
177
161
|
const ModalContent = ({
|
|
178
162
|
content,
|
|
@@ -3,7 +3,6 @@ import { useIntl } from 'react-intl-next';
|
|
|
3
3
|
import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
4
4
|
import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
|
|
5
5
|
import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { Text } from '@atlaskit/primitives/compiled';
|
|
8
7
|
import Tooltip from '@atlaskit/tooltip';
|
|
9
8
|
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
@@ -22,17 +21,12 @@ const SyncBlockLabelComponent = ({
|
|
|
22
21
|
} = intl;
|
|
23
22
|
const [tooltipContent, setTooltipContent] = useState(formatMessage(messages.defaultSyncBlockTooltip));
|
|
24
23
|
let tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
|
|
25
|
-
if (
|
|
26
|
-
tooltipMessage = formatMessage(messages.sourceSyncBlockTooltip);
|
|
27
|
-
} else if (title) {
|
|
24
|
+
if (title) {
|
|
28
25
|
tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
|
|
29
26
|
title
|
|
30
27
|
});
|
|
31
28
|
}
|
|
32
29
|
const updateTooltipContent = useCallback(() => {
|
|
33
|
-
if (!fg('platform_synced_block_dogfooding')) {
|
|
34
|
-
return;
|
|
35
|
-
}
|
|
36
30
|
let tooltipContent = tooltipMessage;
|
|
37
31
|
if (contentUpdatedAt) {
|
|
38
32
|
const elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
|
|
@@ -52,7 +46,7 @@ const SyncBlockLabelComponent = ({
|
|
|
52
46
|
}, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
|
|
53
47
|
const ariaDescribedById = `sync-block-label-description-${localId}`;
|
|
54
48
|
const getLabelContent = useMemo(() => {
|
|
55
|
-
if (isUnsyncedBlock
|
|
49
|
+
if (isUnsyncedBlock) {
|
|
56
50
|
return /*#__PURE__*/React.createElement(Text, {
|
|
57
51
|
size: "small",
|
|
58
52
|
color: "color.text.subtle"
|
|
@@ -81,12 +75,12 @@ const SyncBlockLabelComponent = ({
|
|
|
81
75
|
size: "small",
|
|
82
76
|
label: ""
|
|
83
77
|
}), getLabelContent);
|
|
84
|
-
if (
|
|
78
|
+
if (isSource || isUnsyncedBlock) {
|
|
85
79
|
return label;
|
|
86
80
|
}
|
|
87
81
|
return /*#__PURE__*/React.createElement(Tooltip, {
|
|
88
82
|
position: "top",
|
|
89
|
-
content:
|
|
83
|
+
content: tooltipContent
|
|
90
84
|
// workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
|
|
91
85
|
// this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
|
|
92
86
|
// tooltip content is available for screen readers in visually hidden content after the label
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
3
3
|
import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
export const SYNC_BLOCK_FETCH_INTERVAL = 3000;
|
|
6
5
|
|
|
7
6
|
// Component that manages synced block data synchronization.
|
|
8
|
-
//
|
|
9
|
-
//
|
|
10
|
-
//
|
|
7
|
+
// Component that manages synced block data synchronization.
|
|
8
|
+
// Uses provider-based GraphQL subscriptions for updates when online.
|
|
9
|
+
// Falls back to polling at regular intervals when offline.
|
|
11
10
|
export const SyncBlockRefresher = ({
|
|
12
11
|
syncBlockStoreManager,
|
|
13
12
|
api
|
|
@@ -20,14 +19,13 @@ export const SyncBlockRefresher = ({
|
|
|
20
19
|
mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
|
|
21
20
|
};
|
|
22
21
|
});
|
|
23
|
-
const featureFlagEnabled = fg('platform_synced_block_dogfooding');
|
|
24
22
|
const isOnline = !isOfflineMode(mode);
|
|
25
23
|
useEffect(() => {
|
|
26
|
-
const useRealTimeSubscriptions =
|
|
24
|
+
const useRealTimeSubscriptions = isOnline;
|
|
27
25
|
syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
|
|
28
|
-
}, [syncBlockStoreManager,
|
|
26
|
+
}, [syncBlockStoreManager, isOnline]);
|
|
29
27
|
useEffect(() => {
|
|
30
|
-
const useRealTimeSubscriptions =
|
|
28
|
+
const useRealTimeSubscriptions = isOnline;
|
|
31
29
|
if (useRealTimeSubscriptions) {
|
|
32
30
|
return;
|
|
33
31
|
}
|
|
@@ -46,6 +44,6 @@ export const SyncBlockRefresher = ({
|
|
|
46
44
|
return () => {
|
|
47
45
|
window.clearInterval(interval);
|
|
48
46
|
};
|
|
49
|
-
}, [syncBlockStoreManager, isOnline
|
|
47
|
+
}, [syncBlockStoreManager, isOnline]);
|
|
50
48
|
return null;
|
|
51
49
|
};
|
|
@@ -53,12 +53,12 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
|
|
|
53
53
|
title: formatMessage(commonMessages.delete),
|
|
54
54
|
onClick: removeSyncedBlock(api),
|
|
55
55
|
icon: DeleteIcon,
|
|
56
|
-
testId:
|
|
57
|
-
...hoverDecorationProps(nodeType,
|
|
56
|
+
testId: SYNCED_BLOCK_BUTTON_TEST_ID.syncedBlockToolbarReferenceDelete,
|
|
57
|
+
...hoverDecorationProps(nodeType, akEditorSelectedNodeClassName)
|
|
58
58
|
};
|
|
59
59
|
items.push(deleteButton);
|
|
60
60
|
} else {
|
|
61
|
-
if (!isErroredBlock
|
|
61
|
+
if (!isErroredBlock) {
|
|
62
62
|
const syncedLocation = {
|
|
63
63
|
type: 'custom',
|
|
64
64
|
fallback: [],
|