@atlaskit/editor-plugin-synced-block 11.0.6 → 11.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +15 -0
- package/dist/cjs/syncedBlockPlugin.js +6 -2
- package/dist/cjs/ui/DeleteConfirmationModal.js +13 -3
- package/dist/es2019/syncedBlockPlugin.js +6 -2
- package/dist/es2019/ui/DeleteConfirmationModal.js +13 -3
- package/dist/esm/syncedBlockPlugin.js +6 -2
- package/dist/esm/ui/DeleteConfirmationModal.js +13 -3
- package/dist/types/ui/DeleteConfirmationModal.d.ts +3 -1
- package/package.json +10 -10
- package/tsconfig.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-synced-block
|
|
2
2
|
|
|
3
|
+
## 11.0.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`c32d495837a60`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c32d495837a60) -
|
|
8
|
+
[ux] Clear the red destructive highlight on a synced block when the delete confirmation is
|
|
9
|
+
cancelled
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 11.0.7
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 11.0.6
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -34,6 +34,7 @@ var _toolbarComponents = require("./ui/toolbar-components");
|
|
|
34
34
|
var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
|
|
35
35
|
var syncBlockStoreManager = _ref.syncBlockStore,
|
|
36
36
|
api = _ref.api,
|
|
37
|
+
editorView = _ref.editorView,
|
|
37
38
|
onFeedbackPromptShown = _ref.onFeedbackPromptShown,
|
|
38
39
|
onGiveFeedback = _ref.onGiveFeedback;
|
|
39
40
|
var hasSyncBlocks = (0, _hooks.useSharedPluginStateWithSelector)(api, ['syncedBlock'], function (states) {
|
|
@@ -48,7 +49,8 @@ var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
|
|
|
48
49
|
api: api
|
|
49
50
|
}), /*#__PURE__*/_react.default.createElement(_DeleteConfirmationModal.DeleteConfirmationModal, {
|
|
50
51
|
syncBlockStoreManager: syncBlockStoreManager,
|
|
51
|
-
api: api
|
|
52
|
+
api: api,
|
|
53
|
+
editorView: editorView
|
|
52
54
|
}), /*#__PURE__*/_react.default.createElement(_Flag.Flag, {
|
|
53
55
|
api: api,
|
|
54
56
|
onFeedbackPromptShown: onFeedbackPromptShown,
|
|
@@ -149,13 +151,15 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
|
|
|
149
151
|
contentComponent: function contentComponent(_ref4) {
|
|
150
152
|
var containerElement = _ref4.containerElement,
|
|
151
153
|
wrapperElement = _ref4.wrapperElement,
|
|
152
|
-
popupsMountPoint = _ref4.popupsMountPoint
|
|
154
|
+
popupsMountPoint = _ref4.popupsMountPoint,
|
|
155
|
+
editorView = _ref4.editorView;
|
|
153
156
|
refs.containerElement = containerElement || undefined;
|
|
154
157
|
refs.popupsMountPoint = popupsMountPoint || undefined;
|
|
155
158
|
refs.wrapperElement = wrapperElement || undefined;
|
|
156
159
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_SourceSyncBlockPlaceholder.SourceSyncBlockPlaceholder, null), /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
|
|
157
160
|
syncBlockStore: syncBlockStore,
|
|
158
161
|
api: api,
|
|
162
|
+
editorView: editorView,
|
|
159
163
|
onFeedbackPromptShown: config === null || config === void 0 ? void 0 : config.onFeedbackPromptShown,
|
|
160
164
|
onGiveFeedback: config === null || config === void 0 ? void 0 : config.onGiveFeedback
|
|
161
165
|
}));
|
|
@@ -54,9 +54,10 @@ var styles = {
|
|
|
54
54
|
spinner: "_1mou1wug _195g1wug"
|
|
55
55
|
};
|
|
56
56
|
var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
|
|
57
|
-
var _api$core2, _api$core5, _api$core8;
|
|
57
|
+
var _api$core2, _api$decorations2, _api$core5, _api$core8;
|
|
58
58
|
var syncBlockStoreManager = _ref.syncBlockStoreManager,
|
|
59
|
-
api = _ref.api
|
|
59
|
+
api = _ref.api,
|
|
60
|
+
editorView = _ref.editorView;
|
|
60
61
|
var _useState = (0, _react.useState)(false),
|
|
61
62
|
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
62
63
|
isOpen = _useState2[0],
|
|
@@ -110,8 +111,17 @@ var DeleteConfirmationModal = exports.DeleteConfirmationModal = function DeleteC
|
|
|
110
111
|
activeFlag: false
|
|
111
112
|
});
|
|
112
113
|
});
|
|
114
|
+
|
|
115
|
+
// The delete menu adds a `danger` decoration that it only clears on mouse leave, which
|
|
116
|
+
// never fires because clicking Delete closes the menu. It stays for the lifetime of this
|
|
117
|
+
// modal so the block being deleted remains highlighted, and confirming drops it along
|
|
118
|
+
// with the node, but cancelling has to clear it or the red highlight is left behind.
|
|
119
|
+
if (!confirm && editorView && (0, _fg.fg)('platform_editor_blocks_patch_7')) {
|
|
120
|
+
var _api$decorations;
|
|
121
|
+
api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || _api$decorations.actions.removeDecoration(editorView.state, editorView.dispatch);
|
|
122
|
+
}
|
|
113
123
|
};
|
|
114
|
-
}, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
|
|
124
|
+
}, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : _api$decorations2.actions, editorView]);
|
|
115
125
|
|
|
116
126
|
// Store activeFlag in a ref so confirmationCallback always reads the latest value
|
|
117
127
|
// even if it changes during the await fetchReferenceCountRef call.
|
|
@@ -28,6 +28,7 @@ import { getToolbarComponents } from './ui/toolbar-components';
|
|
|
28
28
|
const LazySyncedBlockUI = ({
|
|
29
29
|
syncBlockStore: syncBlockStoreManager,
|
|
30
30
|
api,
|
|
31
|
+
editorView,
|
|
31
32
|
onFeedbackPromptShown,
|
|
32
33
|
onGiveFeedback
|
|
33
34
|
}) => {
|
|
@@ -43,7 +44,8 @@ const LazySyncedBlockUI = ({
|
|
|
43
44
|
api: api
|
|
44
45
|
}), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
|
|
45
46
|
syncBlockStoreManager: syncBlockStoreManager,
|
|
46
|
-
api: api
|
|
47
|
+
api: api,
|
|
48
|
+
editorView: editorView
|
|
47
49
|
}), /*#__PURE__*/React.createElement(Flag, {
|
|
48
50
|
api: api,
|
|
49
51
|
onFeedbackPromptShown: onFeedbackPromptShown,
|
|
@@ -138,7 +140,8 @@ export const syncedBlockPlugin = ({
|
|
|
138
140
|
contentComponent: ({
|
|
139
141
|
containerElement,
|
|
140
142
|
wrapperElement,
|
|
141
|
-
popupsMountPoint
|
|
143
|
+
popupsMountPoint,
|
|
144
|
+
editorView
|
|
142
145
|
}) => {
|
|
143
146
|
refs.containerElement = containerElement || undefined;
|
|
144
147
|
refs.popupsMountPoint = popupsMountPoint || undefined;
|
|
@@ -146,6 +149,7 @@ export const syncedBlockPlugin = ({
|
|
|
146
149
|
return /*#__PURE__*/React.createElement(React.Fragment, null, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/React.createElement(SourceSyncBlockPlaceholder, null), /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
|
|
147
150
|
syncBlockStore: syncBlockStore,
|
|
148
151
|
api: api,
|
|
152
|
+
editorView: editorView,
|
|
149
153
|
onFeedbackPromptShown: config === null || config === void 0 ? void 0 : config.onFeedbackPromptShown,
|
|
150
154
|
onGiveFeedback: config === null || config === void 0 ? void 0 : config.onGiveFeedback
|
|
151
155
|
}));
|
|
@@ -40,9 +40,10 @@ const styles = {
|
|
|
40
40
|
};
|
|
41
41
|
export const DeleteConfirmationModal = ({
|
|
42
42
|
syncBlockStoreManager,
|
|
43
|
-
api
|
|
43
|
+
api,
|
|
44
|
+
editorView
|
|
44
45
|
}) => {
|
|
45
|
-
var _api$core2, _api$core5, _api$core8;
|
|
46
|
+
var _api$core2, _api$decorations2, _api$core5, _api$core8;
|
|
46
47
|
const [isOpen, setIsOpen] = useState(false);
|
|
47
48
|
const [syncBlockIds, setSyncBlockIds] = useState(undefined);
|
|
48
49
|
const [referenceCount, setReferenceCount] = useState(undefined);
|
|
@@ -86,7 +87,16 @@ export const DeleteConfirmationModal = ({
|
|
|
86
87
|
activeFlag: false
|
|
87
88
|
});
|
|
88
89
|
});
|
|
89
|
-
|
|
90
|
+
|
|
91
|
+
// The delete menu adds a `danger` decoration that it only clears on mouse leave, which
|
|
92
|
+
// never fires because clicking Delete closes the menu. It stays for the lifetime of this
|
|
93
|
+
// modal so the block being deleted remains highlighted, and confirming drops it along
|
|
94
|
+
// with the node, but cancelling has to clear it or the red highlight is left behind.
|
|
95
|
+
if (!confirm && editorView && fg('platform_editor_blocks_patch_7')) {
|
|
96
|
+
var _api$decorations;
|
|
97
|
+
api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.removeDecoration(editorView.state, editorView.dispatch);
|
|
98
|
+
}
|
|
99
|
+
}, [api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 ? void 0 : (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : _api$decorations2.actions, editorView]);
|
|
90
100
|
|
|
91
101
|
// Store activeFlag in a ref so confirmationCallback always reads the latest value
|
|
92
102
|
// even if it changes during the await fetchReferenceCountRef call.
|
|
@@ -28,6 +28,7 @@ import { getToolbarComponents } from './ui/toolbar-components';
|
|
|
28
28
|
var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
|
|
29
29
|
var syncBlockStoreManager = _ref.syncBlockStore,
|
|
30
30
|
api = _ref.api,
|
|
31
|
+
editorView = _ref.editorView,
|
|
31
32
|
onFeedbackPromptShown = _ref.onFeedbackPromptShown,
|
|
32
33
|
onGiveFeedback = _ref.onGiveFeedback;
|
|
33
34
|
var hasSyncBlocks = useSharedPluginStateWithSelector(api, ['syncedBlock'], function (states) {
|
|
@@ -42,7 +43,8 @@ var LazySyncedBlockUI = function LazySyncedBlockUI(_ref) {
|
|
|
42
43
|
api: api
|
|
43
44
|
}), /*#__PURE__*/React.createElement(DeleteConfirmationModal, {
|
|
44
45
|
syncBlockStoreManager: syncBlockStoreManager,
|
|
45
|
-
api: api
|
|
46
|
+
api: api,
|
|
47
|
+
editorView: editorView
|
|
46
48
|
}), /*#__PURE__*/React.createElement(Flag, {
|
|
47
49
|
api: api,
|
|
48
50
|
onFeedbackPromptShown: onFeedbackPromptShown,
|
|
@@ -143,13 +145,15 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
|
|
|
143
145
|
contentComponent: function contentComponent(_ref4) {
|
|
144
146
|
var containerElement = _ref4.containerElement,
|
|
145
147
|
wrapperElement = _ref4.wrapperElement,
|
|
146
|
-
popupsMountPoint = _ref4.popupsMountPoint
|
|
148
|
+
popupsMountPoint = _ref4.popupsMountPoint,
|
|
149
|
+
editorView = _ref4.editorView;
|
|
147
150
|
refs.containerElement = containerElement || undefined;
|
|
148
151
|
refs.popupsMountPoint = popupsMountPoint || undefined;
|
|
149
152
|
refs.wrapperElement = wrapperElement || undefined;
|
|
150
153
|
return /*#__PURE__*/React.createElement(React.Fragment, null, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/React.createElement(SourceSyncBlockPlaceholder, null), /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
|
|
151
154
|
syncBlockStore: syncBlockStore,
|
|
152
155
|
api: api,
|
|
156
|
+
editorView: editorView,
|
|
153
157
|
onFeedbackPromptShown: config === null || config === void 0 ? void 0 : config.onFeedbackPromptShown,
|
|
154
158
|
onGiveFeedback: config === null || config === void 0 ? void 0 : config.onGiveFeedback
|
|
155
159
|
}));
|
|
@@ -45,9 +45,10 @@ var styles = {
|
|
|
45
45
|
spinner: "_1mou1wug _195g1wug"
|
|
46
46
|
};
|
|
47
47
|
export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
|
|
48
|
-
var _api$core2, _api$core5, _api$core8;
|
|
48
|
+
var _api$core2, _api$decorations2, _api$core5, _api$core8;
|
|
49
49
|
var syncBlockStoreManager = _ref.syncBlockStoreManager,
|
|
50
|
-
api = _ref.api
|
|
50
|
+
api = _ref.api,
|
|
51
|
+
editorView = _ref.editorView;
|
|
51
52
|
var _useState = useState(false),
|
|
52
53
|
_useState2 = _slicedToArray(_useState, 2),
|
|
53
54
|
isOpen = _useState2[0],
|
|
@@ -101,8 +102,17 @@ export var DeleteConfirmationModal = function DeleteConfirmationModal(_ref) {
|
|
|
101
102
|
activeFlag: false
|
|
102
103
|
});
|
|
103
104
|
});
|
|
105
|
+
|
|
106
|
+
// The delete menu adds a `danger` decoration that it only clears on mouse leave, which
|
|
107
|
+
// never fires because clicking Delete closes the menu. It stays for the lifetime of this
|
|
108
|
+
// modal so the block being deleted remains highlighted, and confirming drops it along
|
|
109
|
+
// with the node, but cancelling has to clear it or the red highlight is left behind.
|
|
110
|
+
if (!confirm && editorView && fg('platform_editor_blocks_patch_7')) {
|
|
111
|
+
var _api$decorations;
|
|
112
|
+
api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 || _api$decorations.actions.removeDecoration(editorView.state, editorView.dispatch);
|
|
113
|
+
}
|
|
104
114
|
};
|
|
105
|
-
}, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions]);
|
|
115
|
+
}, [api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$decorations2 = api.decorations) === null || _api$decorations2 === void 0 ? void 0 : _api$decorations2.actions, editorView]);
|
|
106
116
|
|
|
107
117
|
// Store activeFlag in a ref so confirmationCallback always reads the latest value
|
|
108
118
|
// even if it changes during the await fetchReferenceCountRef call.
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
3
4
|
import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
|
|
4
5
|
import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
|
|
5
|
-
export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, api, }: {
|
|
6
|
+
export declare const DeleteConfirmationModal: ({ syncBlockStoreManager, api, editorView, }: {
|
|
6
7
|
api?: ExtractInjectionAPI<SyncedBlockPlugin>;
|
|
8
|
+
editorView?: EditorView;
|
|
7
9
|
syncBlockStoreManager: SyncBlockStoreManager;
|
|
8
10
|
}) => React.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-synced-block",
|
|
3
|
-
"version": "11.0.
|
|
3
|
+
"version": "11.0.8",
|
|
4
4
|
"description": "SyncedBlock plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
"sideEffects": false,
|
|
21
21
|
"atlaskit:src": "src/index.ts",
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@atlaskit/adf-schema": "^56.
|
|
24
|
-
"@atlaskit/button": "25.0.
|
|
25
|
-
"@atlaskit/dropdown-menu": "17.2.
|
|
23
|
+
"@atlaskit/adf-schema": "^56.6.0",
|
|
24
|
+
"@atlaskit/button": "25.0.2",
|
|
25
|
+
"@atlaskit/dropdown-menu": "17.2.4",
|
|
26
26
|
"@atlaskit/editor-json-transformer": "^9.2.0",
|
|
27
27
|
"@atlaskit/editor-plugin-analytics": "^13.0.0",
|
|
28
|
-
"@atlaskit/editor-plugin-block-menu": "^12.
|
|
28
|
+
"@atlaskit/editor-plugin-block-menu": "^12.1.0",
|
|
29
29
|
"@atlaskit/editor-plugin-connectivity": "13.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-format": "^7.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-decorations": "^13.0.0",
|
|
@@ -35,18 +35,18 @@
|
|
|
35
35
|
"@atlaskit/editor-plugin-user-intent": "^11.0.0",
|
|
36
36
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
37
37
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
38
|
-
"@atlaskit/editor-synced-block-provider": "^9.
|
|
38
|
+
"@atlaskit/editor-synced-block-provider": "^9.1.0",
|
|
39
39
|
"@atlaskit/editor-toolbar": "^2.4.0",
|
|
40
40
|
"@atlaskit/flag": "^18.2.0",
|
|
41
41
|
"@atlaskit/icon": "37.3.0",
|
|
42
42
|
"@atlaskit/icon-lab": "^7.5.0",
|
|
43
43
|
"@atlaskit/logo": "^21.4.0",
|
|
44
44
|
"@atlaskit/lozenge": "^15.0.0",
|
|
45
|
-
"@atlaskit/modal-dialog": "^16.
|
|
45
|
+
"@atlaskit/modal-dialog": "^16.3.0",
|
|
46
46
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
47
47
|
"@atlaskit/primitives": "^22.2.0",
|
|
48
|
-
"@atlaskit/spinner": "20.1.
|
|
49
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
48
|
+
"@atlaskit/spinner": "20.1.2",
|
|
49
|
+
"@atlaskit/tmp-editor-statsig": "^141.1.0",
|
|
50
50
|
"@atlaskit/tokens": "16.3.0",
|
|
51
51
|
"@atlaskit/tooltip": "^24.0.0",
|
|
52
52
|
"@atlaskit/visually-hidden": "^4.2.0",
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"memoize-one": "^6.0.0"
|
|
59
59
|
},
|
|
60
60
|
"peerDependencies": {
|
|
61
|
-
"@atlaskit/editor-common": "^117.
|
|
61
|
+
"@atlaskit/editor-common": "^117.3.0",
|
|
62
62
|
"react": "^18.2.0 || ^19.2.0",
|
|
63
63
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
64
64
|
},
|
package/tsconfig.json
CHANGED