@atlaskit/editor-plugin-synced-block 4.2.10 → 4.2.12

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/nodeviews/bodiedSyncedBlock.js +49 -11
  3. package/dist/cjs/pm-plugins/main.js +18 -14
  4. package/dist/es2019/nodeviews/bodiedSyncedBlock.js +39 -4
  5. package/dist/es2019/pm-plugins/main.js +18 -12
  6. package/dist/esm/nodeviews/bodiedSyncedBlock.js +49 -11
  7. package/dist/esm/pm-plugins/main.js +18 -13
  8. package/dist/types/syncedBlockPluginType.d.ts +3 -1
  9. package/dist/types-ts4.5/syncedBlockPluginType.d.ts +3 -1
  10. package/package.json +5 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-synced-block
2
2
 
3
+ ## 4.2.12
4
+
5
+ ### Patch Changes
6
+
7
+ - [`21110d2ba4a71`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/21110d2ba4a71) -
8
+ EDITOR-2893 disable editing sync block in live doc view mode
9
+ - Updated dependencies
10
+
11
+ ## 4.2.11
12
+
13
+ ### Patch Changes
14
+
15
+ - [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
16
+ EDITOR-2791 bump adf-schema
17
+ - Updated dependencies
18
+
3
19
  ## 4.2.10
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/nodeviews/bodiedSyncedBlock.js CHANGED
@@ -31,19 +31,51 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
31
31
  _this.syncBlockStore = props.syncBlockStore;
32
32
  _this.api = props.api;
33
33
  _this.handleConnectivityModeChange();
34
+ _this.handleViewModeChange();
34
35
  return _this;
35
36
  }
36
37
  (0, _inherits2.default)(BodiedSyncBlock, _ReactNodeView);
37
38
  return (0, _createClass2.default)(BodiedSyncBlock, [{
39
+ key: "updateContentEditable",
40
+ value: function updateContentEditable(_ref) {
41
+ var _this$api, _this$api2;
42
+ var contentDOM = _ref.contentDOM,
43
+ nextConnectivityMode = _ref.nextConnectivityMode,
44
+ nextViewMode = _ref.nextViewMode;
45
+ var connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.connectivity) === null || _this$api === void 0 || (_this$api = _this$api.sharedState) === null || _this$api === void 0 || (_this$api = _this$api.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.mode;
46
+ var viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.editorViewMode) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.sharedState) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.currentState()) === null || _this$api2 === void 0 ? void 0 : _this$api2.mode;
47
+ var isOnline = connectivityMode !== 'offline';
48
+ var isEditMode = viewMode !== 'view';
49
+ var shouldBeEditable = isOnline && isEditMode;
50
+ contentDOM === null || contentDOM === void 0 || contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
51
+ }
52
+ }, {
38
53
  key: "handleConnectivityModeChange",
39
54
  value: function handleConnectivityModeChange() {
40
- var _this$api,
55
+ var _this$api3,
41
56
  _this2 = this;
42
- if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.connectivity) {
43
- this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref) {
44
- var _this2$contentDOM;
45
- var nextSharedState = _ref.nextSharedState;
46
- (_this2$contentDOM = _this2.contentDOM) === null || _this2$contentDOM === void 0 || _this2$contentDOM.setAttribute('contenteditable', nextSharedState.mode === 'online' ? 'true' : 'false');
57
+ if ((_this$api3 = this.api) !== null && _this$api3 !== void 0 && _this$api3.connectivity) {
58
+ this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref2) {
59
+ var nextSharedState = _ref2.nextSharedState;
60
+ _this2.updateContentEditable({
61
+ contentDOM: _this2.contentDOM,
62
+ nextConnectivityMode: nextSharedState.mode
63
+ });
64
+ });
65
+ }
66
+ }
67
+ }, {
68
+ key: "handleViewModeChange",
69
+ value: function handleViewModeChange() {
70
+ var _this$api4,
71
+ _this3 = this;
72
+ if ((_this$api4 = this.api) !== null && _this$api4 !== void 0 && _this$api4.editorViewMode) {
73
+ this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(function (_ref3) {
74
+ var nextSharedState = _ref3.nextSharedState;
75
+ _this3.updateContentEditable({
76
+ contentDOM: _this3.contentDOM,
77
+ nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
78
+ });
47
79
  });
48
80
  }
49
81
  }
@@ -70,6 +102,9 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
70
102
  dom = _DOMSerializer$render.dom,
71
103
  contentDOM = _DOMSerializer$render.contentDOM;
72
104
  if (dom instanceof HTMLElement) {
105
+ this.updateContentEditable({
106
+ contentDOM: contentDOM
107
+ });
73
108
  return {
74
109
  dom: dom,
75
110
  contentDOM: contentDOM
@@ -83,14 +118,17 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
83
118
  if (this.cleanupConnectivityModeListener) {
84
119
  this.cleanupConnectivityModeListener();
85
120
  }
121
+ if (this.cleanupViewModeListener) {
122
+ this.cleanupViewModeListener();
123
+ }
86
124
  }
87
125
  }]);
88
126
  }(_reactNodeView.default);
89
- var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref2) {
90
- var pluginOptions = _ref2.pluginOptions,
91
- pmPluginFactoryParams = _ref2.pmPluginFactoryParams,
92
- api = _ref2.api,
93
- syncBlockStore = _ref2.syncBlockStore;
127
+ var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
128
+ var pluginOptions = _ref4.pluginOptions,
129
+ pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
130
+ api = _ref4.api,
131
+ syncBlockStore = _ref4.syncBlockStore;
94
132
  return function (node, view, getPos) {
95
133
  var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
96
134
  eventDispatcher = pmPluginFactoryParams.eventDispatcher;
package/dist/cjs/pm-plugins/main.js CHANGED
@@ -1,11 +1,9 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.syncedBlockPluginKey = exports.createPlugin = void 0;
8
- var _readOnlyError2 = _interopRequireDefault(require("@babel/runtime/helpers/readOnlyError"));
9
7
  var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
10
8
  var _selection = require("@atlaskit/editor-common/selection");
11
9
  var _syncBlock = require("@atlaskit/editor-common/sync-block");
@@ -66,20 +64,26 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
66
64
  })
67
65
  },
68
66
  decorations: function decorations(state) {
69
- var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity;
67
+ var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$editorViewMode;
70
68
  var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : _view.DecorationSet.empty;
71
69
  var doc = state.doc;
72
- var decorations = [];
73
- if ((api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline') {
74
- state.doc.descendants(function (node, pos) {
75
- if (node.type.name === 'bodiedSyncBlock') {
76
- decorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
77
- class: _syncBlock.SyncBlockStateCssClassName.disabledClassName
78
- }));
79
- }
80
- });
81
- }
82
- return selectionDecorationSet.add(doc, decorations);
70
+ var isOffline = (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
71
+ var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
72
+ var offlineDecorations = [];
73
+ var viewModeDecorations = [];
74
+ state.doc.descendants(function (node, pos) {
75
+ if (node.type.name === 'bodiedSyncBlock' && isOffline) {
76
+ offlineDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
77
+ class: _syncBlock.SyncBlockStateCssClassName.disabledClassName
78
+ }));
79
+ }
80
+ if ((node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && isViewMode) {
81
+ viewModeDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, {
82
+ class: _syncBlock.SyncBlockStateCssClassName.viewModeClassName
83
+ }));
84
+ }
85
+ });
86
+ return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations);
83
87
  },
84
88
  handleClickOn: (0, _selection.createSelectionClickHandler)(['bodiedSyncBlock'], function (target) {
85
89
  return !!target.closest(".".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix));
package/dist/es2019/nodeviews/bodiedSyncedBlock.js CHANGED
@@ -13,15 +13,44 @@ class BodiedSyncBlock extends ReactNodeView {
13
13
  this.syncBlockStore = props.syncBlockStore;
14
14
  this.api = props.api;
15
15
  this.handleConnectivityModeChange();
16
+ this.handleViewModeChange();
17
+ }
18
+ updateContentEditable({
19
+ contentDOM,
20
+ nextConnectivityMode,
21
+ nextViewMode
22
+ }) {
23
+ var _this$api, _this$api$connectivit, _this$api$connectivit2, _this$api$connectivit3, _this$api2, _this$api2$editorView, _this$api2$editorView2, _this$api2$editorView3;
24
+ const connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api = this.api) === null || _this$api === void 0 ? void 0 : (_this$api$connectivit = _this$api.connectivity) === null || _this$api$connectivit === void 0 ? void 0 : (_this$api$connectivit2 = _this$api$connectivit.sharedState) === null || _this$api$connectivit2 === void 0 ? void 0 : (_this$api$connectivit3 = _this$api$connectivit2.currentState()) === null || _this$api$connectivit3 === void 0 ? void 0 : _this$api$connectivit3.mode;
25
+ const viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api2 = this.api) === null || _this$api2 === void 0 ? void 0 : (_this$api2$editorView = _this$api2.editorViewMode) === null || _this$api2$editorView === void 0 ? void 0 : (_this$api2$editorView2 = _this$api2$editorView.sharedState) === null || _this$api2$editorView2 === void 0 ? void 0 : (_this$api2$editorView3 = _this$api2$editorView2.currentState()) === null || _this$api2$editorView3 === void 0 ? void 0 : _this$api2$editorView3.mode;
26
+ const isOnline = connectivityMode !== 'offline';
27
+ const isEditMode = viewMode !== 'view';
28
+ const shouldBeEditable = isOnline && isEditMode;
29
+ contentDOM === null || contentDOM === void 0 ? void 0 : contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
16
30
  }
17
31
  handleConnectivityModeChange() {
18
- var _this$api;
19
- if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.connectivity) {
32
+ var _this$api3;
33
+ if ((_this$api3 = this.api) !== null && _this$api3 !== void 0 && _this$api3.connectivity) {
20
34
  this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(({
21
35
  nextSharedState
22
36
  }) => {
23
- var _this$contentDOM;
24
- (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 ? void 0 : _this$contentDOM.setAttribute('contenteditable', nextSharedState.mode === 'online' ? 'true' : 'false');
37
+ this.updateContentEditable({
38
+ contentDOM: this.contentDOM,
39
+ nextConnectivityMode: nextSharedState.mode
40
+ });
41
+ });
42
+ }
43
+ }
44
+ handleViewModeChange() {
45
+ var _this$api4;
46
+ if ((_this$api4 = this.api) !== null && _this$api4 !== void 0 && _this$api4.editorViewMode) {
47
+ this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(({
48
+ nextSharedState
49
+ }) => {
50
+ this.updateContentEditable({
51
+ contentDOM: this.contentDOM,
52
+ nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
53
+ });
25
54
  });
26
55
  }
27
56
  }
@@ -43,6 +72,9 @@ class BodiedSyncBlock extends ReactNodeView {
43
72
  contentDOM
44
73
  } = DOMSerializer.renderSpec(document, toDOM());
45
74
  if (dom instanceof HTMLElement) {
75
+ this.updateContentEditable({
76
+ contentDOM
77
+ });
46
78
  return {
47
79
  dom,
48
80
  contentDOM
@@ -54,6 +86,9 @@ class BodiedSyncBlock extends ReactNodeView {
54
86
  if (this.cleanupConnectivityModeListener) {
55
87
  this.cleanupConnectivityModeListener();
56
88
  }
89
+ if (this.cleanupViewModeListener) {
90
+ this.cleanupViewModeListener();
91
+ }
57
92
  }
58
93
  }
59
94
  export const bodiedSyncBlockNodeView = ({
package/dist/es2019/pm-plugins/main.js CHANGED
@@ -58,22 +58,28 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
58
58
  })
59
59
  },
60
60
  decorations: state => {
61
- var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$connectivity$sha;
61
+ var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$connectivity$sha, _api$editorViewMode, _api$editorViewMode$s;
62
62
  const selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
63
63
  const {
64
64
  doc
65
65
  } = state;
66
- const decorations = [];
67
- if ((api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) === 'offline') {
68
- state.doc.descendants((node, pos) => {
69
- if (node.type.name === 'bodiedSyncBlock') {
70
- decorations.push(Decoration.node(pos, pos + node.nodeSize, {
71
- class: SyncBlockStateCssClassName.disabledClassName
72
- }));
73
- }
74
- });
75
- }
76
- return selectionDecorationSet.add(doc, decorations);
66
+ const isOffline = (api === null || api === void 0 ? void 0 : (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 ? void 0 : (_api$connectivity$sha = _api$connectivity.sharedState.currentState()) === null || _api$connectivity$sha === void 0 ? void 0 : _api$connectivity$sha.mode) === 'offline';
67
+ const isViewMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'view';
68
+ const offlineDecorations = [];
69
+ const viewModeDecorations = [];
70
+ state.doc.descendants((node, pos) => {
71
+ if (node.type.name === 'bodiedSyncBlock' && isOffline) {
72
+ offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
73
+ class: SyncBlockStateCssClassName.disabledClassName
74
+ }));
75
+ }
76
+ if ((node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && isViewMode) {
77
+ viewModeDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
78
+ class: SyncBlockStateCssClassName.viewModeClassName
79
+ }));
80
+ }
81
+ });
82
+ return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations);
77
83
  },
78
84
  handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], target => !!target.closest(`.${BodiedSyncBlockSharedCssClassName.prefix}`), {
79
85
  useLongPressSelection
package/dist/esm/nodeviews/bodiedSyncedBlock.js CHANGED
@@ -24,19 +24,51 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
24
24
  _this.syncBlockStore = props.syncBlockStore;
25
25
  _this.api = props.api;
26
26
  _this.handleConnectivityModeChange();
27
+ _this.handleViewModeChange();
27
28
  return _this;
28
29
  }
29
30
  _inherits(BodiedSyncBlock, _ReactNodeView);
30
31
  return _createClass(BodiedSyncBlock, [{
32
+ key: "updateContentEditable",
33
+ value: function updateContentEditable(_ref) {
34
+ var _this$api, _this$api2;
35
+ var contentDOM = _ref.contentDOM,
36
+ nextConnectivityMode = _ref.nextConnectivityMode,
37
+ nextViewMode = _ref.nextViewMode;
38
+ var connectivityMode = nextConnectivityMode !== null && nextConnectivityMode !== void 0 ? nextConnectivityMode : (_this$api = this.api) === null || _this$api === void 0 || (_this$api = _this$api.connectivity) === null || _this$api === void 0 || (_this$api = _this$api.sharedState) === null || _this$api === void 0 || (_this$api = _this$api.currentState()) === null || _this$api === void 0 ? void 0 : _this$api.mode;
39
+ var viewMode = nextViewMode !== null && nextViewMode !== void 0 ? nextViewMode : (_this$api2 = this.api) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.editorViewMode) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.sharedState) === null || _this$api2 === void 0 || (_this$api2 = _this$api2.currentState()) === null || _this$api2 === void 0 ? void 0 : _this$api2.mode;
40
+ var isOnline = connectivityMode !== 'offline';
41
+ var isEditMode = viewMode !== 'view';
42
+ var shouldBeEditable = isOnline && isEditMode;
43
+ contentDOM === null || contentDOM === void 0 || contentDOM.setAttribute('contenteditable', shouldBeEditable ? 'true' : 'false');
44
+ }
45
+ }, {
31
46
  key: "handleConnectivityModeChange",
32
47
  value: function handleConnectivityModeChange() {
33
- var _this$api,
48
+ var _this$api3,
34
49
  _this2 = this;
35
- if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.connectivity) {
36
- this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref) {
37
- var _this2$contentDOM;
38
- var nextSharedState = _ref.nextSharedState;
39
- (_this2$contentDOM = _this2.contentDOM) === null || _this2$contentDOM === void 0 || _this2$contentDOM.setAttribute('contenteditable', nextSharedState.mode === 'online' ? 'true' : 'false');
50
+ if ((_this$api3 = this.api) !== null && _this$api3 !== void 0 && _this$api3.connectivity) {
51
+ this.cleanupConnectivityModeListener = this.api.connectivity.sharedState.onChange(function (_ref2) {
52
+ var nextSharedState = _ref2.nextSharedState;
53
+ _this2.updateContentEditable({
54
+ contentDOM: _this2.contentDOM,
55
+ nextConnectivityMode: nextSharedState.mode
56
+ });
57
+ });
58
+ }
59
+ }
60
+ }, {
61
+ key: "handleViewModeChange",
62
+ value: function handleViewModeChange() {
63
+ var _this$api4,
64
+ _this3 = this;
65
+ if ((_this$api4 = this.api) !== null && _this$api4 !== void 0 && _this$api4.editorViewMode) {
66
+ this.cleanupViewModeListener = this.api.editorViewMode.sharedState.onChange(function (_ref3) {
67
+ var nextSharedState = _ref3.nextSharedState;
68
+ _this3.updateContentEditable({
69
+ contentDOM: _this3.contentDOM,
70
+ nextViewMode: nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.mode
71
+ });
40
72
  });
41
73
  }
42
74
  }
@@ -63,6 +95,9 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
63
95
  dom = _DOMSerializer$render.dom,
64
96
  contentDOM = _DOMSerializer$render.contentDOM;
65
97
  if (dom instanceof HTMLElement) {
98
+ this.updateContentEditable({
99
+ contentDOM: contentDOM
100
+ });
66
101
  return {
67
102
  dom: dom,
68
103
  contentDOM: contentDOM
@@ -76,14 +111,17 @@ var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
76
111
  if (this.cleanupConnectivityModeListener) {
77
112
  this.cleanupConnectivityModeListener();
78
113
  }
114
+ if (this.cleanupViewModeListener) {
115
+ this.cleanupViewModeListener();
116
+ }
79
117
  }
80
118
  }]);
81
119
  }(ReactNodeView);
82
- export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref2) {
83
- var pluginOptions = _ref2.pluginOptions,
84
- pmPluginFactoryParams = _ref2.pmPluginFactoryParams,
85
- api = _ref2.api,
86
- syncBlockStore = _ref2.syncBlockStore;
120
+ export var bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref4) {
121
+ var pluginOptions = _ref4.pluginOptions,
122
+ pmPluginFactoryParams = _ref4.pmPluginFactoryParams,
123
+ api = _ref4.api,
124
+ syncBlockStore = _ref4.syncBlockStore;
87
125
  return function (node, view, getPos) {
88
126
  var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
89
127
  eventDispatcher = pmPluginFactoryParams.eventDispatcher;
package/dist/esm/pm-plugins/main.js CHANGED
@@ -1,4 +1,3 @@
1
- import _readOnlyError from "@babel/runtime/helpers/readOnlyError";
2
1
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
3
2
  import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
4
3
  import { BodiedSyncBlockSharedCssClassName, SyncBlockStateCssClassName } from '@atlaskit/editor-common/sync-block';
@@ -59,20 +58,26 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
59
58
  })
60
59
  },
61
60
  decorations: function decorations(state) {
62
- var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity;
61
+ var _syncedBlockPluginKey, _syncedBlockPluginKey2, _api$connectivity, _api$editorViewMode;
63
62
  var selectionDecorationSet = (_syncedBlockPluginKey = (_syncedBlockPluginKey2 = syncedBlockPluginKey.getState(state)) === null || _syncedBlockPluginKey2 === void 0 ? void 0 : _syncedBlockPluginKey2.selectionDecorationSet) !== null && _syncedBlockPluginKey !== void 0 ? _syncedBlockPluginKey : DecorationSet.empty;
64
63
  var doc = state.doc;
65
- var decorations = [];
66
- if ((api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline') {
67
- state.doc.descendants(function (node, pos) {
68
- if (node.type.name === 'bodiedSyncBlock') {
69
- decorations.push(Decoration.node(pos, pos + node.nodeSize, {
70
- class: SyncBlockStateCssClassName.disabledClassName
71
- }));
72
- }
73
- });
74
- }
75
- return selectionDecorationSet.add(doc, decorations);
64
+ var isOffline = (api === null || api === void 0 || (_api$connectivity = api.connectivity) === null || _api$connectivity === void 0 || (_api$connectivity = _api$connectivity.sharedState.currentState()) === null || _api$connectivity === void 0 ? void 0 : _api$connectivity.mode) === 'offline';
65
+ var isViewMode = (api === null || api === void 0 || (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 || (_api$editorViewMode = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.mode) === 'view';
66
+ var offlineDecorations = [];
67
+ var viewModeDecorations = [];
68
+ state.doc.descendants(function (node, pos) {
69
+ if (node.type.name === 'bodiedSyncBlock' && isOffline) {
70
+ offlineDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
71
+ class: SyncBlockStateCssClassName.disabledClassName
72
+ }));
73
+ }
74
+ if ((node.type.name === 'bodiedSyncBlock' || node.type.name === 'syncBlock') && isViewMode) {
75
+ viewModeDecorations.push(Decoration.node(pos, pos + node.nodeSize, {
76
+ class: SyncBlockStateCssClassName.viewModeClassName
77
+ }));
78
+ }
79
+ });
80
+ return selectionDecorationSet.add(doc, offlineDecorations).add(doc, viewModeDecorations);
76
81
  },
77
82
  handleClickOn: createSelectionClickHandler(['bodiedSyncBlock'], function (target) {
78
83
  return !!target.closest(".".concat(BodiedSyncBlockSharedCssClassName.prefix));
package/dist/types/syncedBlockPluginType.d.ts CHANGED
@@ -6,6 +6,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
6
6
  import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
7
7
  import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
8
8
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
9
+ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
9
10
  import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
10
11
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
11
12
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -64,7 +65,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
64
65
  OptionalPlugin<ToolbarPlugin>,
65
66
  OptionalPlugin<BlockMenuPlugin>,
66
67
  OptionalPlugin<AnalyticsPlugin>,
67
- OptionalPlugin<ConnectivityPlugin>
68
+ OptionalPlugin<ConnectivityPlugin>,
69
+ OptionalPlugin<EditorViewModePlugin>
68
70
  ];
69
71
  pluginConfiguration: SyncedBlockPluginOptions | undefined;
70
72
  sharedState: SyncedBlockSharedState | undefined;
package/dist/types-ts4.5/syncedBlockPluginType.d.ts CHANGED
@@ -6,6 +6,7 @@ import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls
6
6
  import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
7
7
  import type { ConnectivityPlugin } from '@atlaskit/editor-plugin-connectivity';
8
8
  import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
9
+ import type { EditorViewModePlugin } from '@atlaskit/editor-plugin-editor-viewmode';
9
10
  import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
10
11
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
11
12
  import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
@@ -64,7 +65,8 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
64
65
  OptionalPlugin<ToolbarPlugin>,
65
66
  OptionalPlugin<BlockMenuPlugin>,
66
67
  OptionalPlugin<AnalyticsPlugin>,
67
- OptionalPlugin<ConnectivityPlugin>
68
+ OptionalPlugin<ConnectivityPlugin>,
69
+ OptionalPlugin<EditorViewModePlugin>
68
70
  ];
69
71
  pluginConfiguration: SyncedBlockPluginOptions | undefined;
70
72
  sharedState: SyncedBlockSharedState | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-synced-block",
3
- "version": "4.2.10",
3
+ "version": "4.2.12",
4
4
  "description": "SyncedBlock plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -28,7 +28,7 @@
28
28
  "sideEffects": false,
29
29
  "atlaskit:src": "src/index.ts",
30
30
  "dependencies": {
31
- "@atlaskit/adf-schema": "^51.3.2",
31
+ "@atlaskit/adf-schema": "^51.4.0",
32
32
  "@atlaskit/button": "23.6.1",
33
33
  "@atlaskit/editor-json-transformer": "^8.31.0",
34
34
  "@atlaskit/editor-plugin-analytics": "^6.2.0",
@@ -38,8 +38,8 @@
38
38
  "@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",
39
39
  "@atlaskit/editor-plugin-selection": "^6.1.0",
40
40
  "@atlaskit/editor-prosemirror": "7.0.0",
41
- "@atlaskit/editor-shared-styles": "^3.9.0",
42
- "@atlaskit/editor-synced-block-provider": "^2.9.0",
41
+ "@atlaskit/editor-shared-styles": "^3.10.0",
42
+ "@atlaskit/editor-synced-block-provider": "^2.10.0",
43
43
  "@atlaskit/editor-tables": "^2.9.0",
44
44
  "@atlaskit/editor-toolbar": "^0.17.0",
45
45
  "@atlaskit/flag": "^17.5.0",
@@ -56,7 +56,7 @@
56
56
  "react-intl-next": "npm:react-intl@^5.18.1"
57
57
  },
58
58
  "peerDependencies": {
59
- "@atlaskit/editor-common": "^110.31.0",
59
+ "@atlaskit/editor-common": "^110.32.0",
60
60
  "react": "^18.2.0"
61
61
  },
62
62
  "devDependencies": {