@atlaskit/editor-plugin-synced-block 3.2.1 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.3.0
+
+### Minor Changes
+
+- [`3ebbf8e97e2d9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3ebbf8e97e2d9) -
+  Update for new sync block provider API
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-cc/tsconfig.json"
 		},

package/afm-dev-agents/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-dev-agents/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-dev-agents/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-jira/tsconfig.json"
 		},

package/afm-passionfruit/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-passionfruit/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-passionfruit/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-post-office/tsconfig.json"
 		},

package/afm-rovo-extension/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-rovo-extension/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-rovo-extension/tsconfig.json"
 		},

package/afm-townsquare/tsconfig.json

@@ -25,6 +25,9 @@
 		{
 			"path": "../../../design-system/button/afm-townsquare/tsconfig.json"
 		},
+		{
+			"path": "../../editor-json-transformer/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-plugin-block-menu/afm-townsquare/tsconfig.json"
 		},

package/dist/cjs/nodeviews/syncedBlock.js

@@ -65,26 +65,13 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function isSource() {
       return this.syncBlockStore.isSourceBlock(this.node);
     }
-  }, {
-    key: "handleContentChanges",
-    value: function handleContentChanges(updatedDoc) {
-      var _this$options;
-      if (!this.isSource) {
-        return;
-      }
-      // write data
-      var node = (0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false);
-      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
-        content: updatedDoc.toJSON()
-      }]);
-    }
   }, {
     key: "setInnerEditorView",
     value: function setInnerEditorView(editorView) {
-      var _this$options2;
+      var _this$options;
       // set inner editor view
       var nodes = [(0, _editorSyncedBlockProvider.convertSyncBlockPMNodeToSyncBlockData)(this.node, false)];
-      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.dataProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
+      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
         if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -96,36 +83,37 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "renderEditor",
     value: function renderEditor() {
-      var _this$options3,
+      var _this$options2,
         _this2 = this,
-        _this$options4;
+        _this$options3;
       var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
       if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
         return null;
       }
-      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockEditor)) {
+      if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.getSyncedBlockEditor)) {
         return null;
       }
       return /*#__PURE__*/_react.default.createElement(_SyncBlockEditorWrapper.SyncBlockEditorWrapper, {
         popupsBoundariesElement: fabricEditorPopupScrollParent,
         popupsMountPoint: fabricEditorPopupScrollParent,
         defaultDocument: defaultSyncBlockEditorDocument,
-        handleContentChanges: function handleContentChanges(updatedDoc) {
-          return _this2.handleContentChanges(updatedDoc);
+        useHandleContentChanges: function useHandleContentChanges(updatedDoc) {
+          var _this2$options;
+          return (0, _editorSyncedBlockProvider.useHandleContentChanges)(updatedDoc, _this2.isSource(), _this2.node, (_this2$options = _this2.options) === null || _this2$options === void 0 ? void 0 : _this2$options.dataProvider);
         },
         setInnerEditorView: function setInnerEditorView(editorView) {
           return _this2.setInnerEditorView(editorView);
         },
-        getSyncedBlockEditor: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockEditor
+        getSyncedBlockEditor: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.getSyncedBlockEditor
       });
     }
   }, {
     key: "renderRenderer",
     value: function renderRenderer() {
-      var _this$options5,
+      var _this$options4,
         _this3 = this,
-        _this$options6;
-      if (!((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.getSyncedBlockRenderer)) {
+        _this$options5;
+      if (!((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.getSyncedBlockRenderer)) {
         return null;
       }
 
@@ -136,7 +124,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           var _this3$options;
           return (0, _editorSyncedBlockProvider.useFetchDocNode)(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.dataProvider);
         },
-        getSyncedBlockRenderer: (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.getSyncedBlockRenderer
+        getSyncedBlockRenderer: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.getSyncedBlockRenderer
       });
     }
   }, {

package/dist/cjs/ui/SyncBlockEditorWrapper.js

@@ -1,12 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapper = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _editorJsonTransformer = require("@atlaskit/editor-json-transformer");
+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); }
 var SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
   var defaultDocument = _ref.defaultDocument,
@@ -14,7 +18,12 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsMountPoint = _ref.popupsMountPoint,
     setInnerEditorView = _ref.setInnerEditorView,
-    handleContentChanges = _ref.handleContentChanges;
+    useHandleContentChanges = _ref.useHandleContentChanges;
+  var _useState = (0, _react.useState)(new _editorJsonTransformer.JSONTransformer().parse(defaultDocument)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    updatedDoc = _useState2[0],
+    setUpdatedDoc = _useState2[1];
+  useHandleContentChanges(updatedDoc);
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -25,7 +34,7 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     defaultDocument: defaultDocument,
     popupsMountPoint: popupsMountPoint,
     onChange: function onChange(value) {
-      return handleContentChanges(value.state.doc);
+      return setUpdatedDoc(value.state.doc);
     },
     onEditorReady: function onEditorReady(value) {
       return setInnerEditorView(value.editorView);

package/dist/es2019/nodeviews/syncedBlock.js

@@ -2,7 +2,7 @@ import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode, useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 const defaultSyncBlockEditorDocument = {
@@ -41,22 +41,11 @@ class SyncBlock extends ReactNodeView {
   isSource() {
     return this.syncBlockStore.isSourceBlock(this.node);
   }
-  handleContentChanges(updatedDoc) {
-    var _this$options, _this$options$dataPro;
-    if (!this.isSource) {
-      return;
-    }
-    // write data
-    const node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
-    (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$dataPro = _this$options.dataProvider) === null || _this$options$dataPro === void 0 ? void 0 : _this$options$dataPro.writeNodesData([node], [{
-      content: updatedDoc.toJSON()
-    }]);
-  }
   setInnerEditorView(editorView) {
-    var _this$options2, _this$options2$dataPr;
+    var _this$options, _this$options$dataPro;
     // set inner editor view
     const nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
-    (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : (_this$options2$dataPr = _this$options2.dataProvider) === null || _this$options2$dataPr === void 0 ? void 0 : _this$options2$dataPr.fetchNodesData(nodes).then(data => {
+    (_this$options = this.options) === null || _this$options === void 0 ? void 0 : (_this$options$dataPro = _this$options.dataProvider) === null || _this$options$dataPro === void 0 ? void 0 : _this$options$dataPro.fetchNodesData(nodes).then(data => {
       var _data$;
       const tr = editorView.state.tr;
       if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -66,19 +55,22 @@ class SyncBlock extends ReactNodeView {
     });
   }
   renderEditor() {
-    var _this$options3, _this$options4;
+    var _this$options2, _this$options4;
     const fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
     if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
       return null;
     }
-    if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockEditor)) {
+    if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.getSyncedBlockEditor)) {
       return null;
     }
     return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
       popupsBoundariesElement: fabricEditorPopupScrollParent,
       popupsMountPoint: fabricEditorPopupScrollParent,
       defaultDocument: defaultSyncBlockEditorDocument,
-      handleContentChanges: updatedDoc => this.handleContentChanges(updatedDoc),
+      useHandleContentChanges: updatedDoc => {
+        var _this$options3;
+        return useHandleContentChanges(updatedDoc, this.isSource(), this.node, (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.dataProvider);
+      },
       setInnerEditorView: editorView => this.setInnerEditorView(editorView),
       getSyncedBlockEditor: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockEditor
     });

package/dist/es2019/ui/SyncBlockEditorWrapper.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 export const SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 const SyncBlockEditorWrapperComponent = ({
   defaultDocument,
@@ -7,8 +8,10 @@ const SyncBlockEditorWrapperComponent = ({
   popupsBoundariesElement,
   popupsMountPoint,
   setInnerEditorView,
-  handleContentChanges
+  useHandleContentChanges
 }) => {
+  const [updatedDoc, setUpdatedDoc] = useState(new JSONTransformer().parse(defaultDocument));
+  useHandleContentChanges(updatedDoc);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -18,7 +21,7 @@ const SyncBlockEditorWrapperComponent = ({
     popupsBoundariesElement,
     defaultDocument,
     popupsMountPoint,
-    onChange: value => handleContentChanges(value.state.doc),
+    onChange: value => setUpdatedDoc(value.state.doc),
     onEditorReady: value => setInnerEditorView(value.editorView)
   }));
 };

package/dist/esm/nodeviews/syncedBlock.js

@@ -11,7 +11,7 @@ import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode as _useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
+import { convertSyncBlockPMNodeToSyncBlockData, useFetchDocNode as _useFetchDocNode, useHandleContentChanges as _useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
 var defaultSyncBlockEditorDocument = {
@@ -58,26 +58,13 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
     value: function isSource() {
       return this.syncBlockStore.isSourceBlock(this.node);
     }
-  }, {
-    key: "handleContentChanges",
-    value: function handleContentChanges(updatedDoc) {
-      var _this$options;
-      if (!this.isSource) {
-        return;
-      }
-      // write data
-      var node = convertSyncBlockPMNodeToSyncBlockData(this.node, false);
-      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.writeNodesData([node], [{
-        content: updatedDoc.toJSON()
-      }]);
-    }
   }, {
     key: "setInnerEditorView",
     value: function setInnerEditorView(editorView) {
-      var _this$options2;
+      var _this$options;
       // set inner editor view
       var nodes = [convertSyncBlockPMNodeToSyncBlockData(this.node, false)];
-      (_this$options2 = this.options) === null || _this$options2 === void 0 || (_this$options2 = _this$options2.dataProvider) === null || _this$options2 === void 0 || _this$options2.fetchNodesData(nodes).then(function (data) {
+      (_this$options = this.options) === null || _this$options === void 0 || (_this$options = _this$options.dataProvider) === null || _this$options === void 0 || _this$options.fetchNodesData(nodes).then(function (data) {
         var _data$;
         var tr = editorView.state.tr;
         if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
@@ -89,36 +76,37 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
   }, {
     key: "renderEditor",
     value: function renderEditor() {
-      var _this$options3,
+      var _this$options2,
         _this2 = this,
-        _this$options4;
+        _this$options3;
       var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
       if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
         return null;
       }
-      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockEditor)) {
+      if (!((_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.getSyncedBlockEditor)) {
         return null;
       }
       return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
         popupsBoundariesElement: fabricEditorPopupScrollParent,
         popupsMountPoint: fabricEditorPopupScrollParent,
         defaultDocument: defaultSyncBlockEditorDocument,
-        handleContentChanges: function handleContentChanges(updatedDoc) {
-          return _this2.handleContentChanges(updatedDoc);
+        useHandleContentChanges: function useHandleContentChanges(updatedDoc) {
+          var _this2$options;
+          return _useHandleContentChanges(updatedDoc, _this2.isSource(), _this2.node, (_this2$options = _this2.options) === null || _this2$options === void 0 ? void 0 : _this2$options.dataProvider);
         },
         setInnerEditorView: function setInnerEditorView(editorView) {
           return _this2.setInnerEditorView(editorView);
         },
-        getSyncedBlockEditor: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockEditor
+        getSyncedBlockEditor: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.getSyncedBlockEditor
       });
     }
   }, {
     key: "renderRenderer",
     value: function renderRenderer() {
-      var _this$options5,
+      var _this$options4,
         _this3 = this,
-        _this$options6;
-      if (!((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.getSyncedBlockRenderer)) {
+        _this$options5;
+      if (!((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.getSyncedBlockRenderer)) {
         return null;
       }
 
@@ -129,7 +117,7 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
           var _this3$options;
           return _useFetchDocNode(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.dataProvider);
         },
-        getSyncedBlockRenderer: (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.getSyncedBlockRenderer
+        getSyncedBlockRenderer: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.getSyncedBlockRenderer
       });
     }
   }, {

package/dist/esm/ui/SyncBlockEditorWrapper.js

@@ -1,5 +1,7 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from 'react';
 import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { JSONTransformer } from '@atlaskit/editor-json-transformer';
 export var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
 var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
   var defaultDocument = _ref.defaultDocument,
@@ -7,7 +9,12 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     popupsBoundariesElement = _ref.popupsBoundariesElement,
     popupsMountPoint = _ref.popupsMountPoint,
     setInnerEditorView = _ref.setInnerEditorView,
-    handleContentChanges = _ref.handleContentChanges;
+    useHandleContentChanges = _ref.useHandleContentChanges;
+  var _useState = useState(new JSONTransformer().parse(defaultDocument)),
+    _useState2 = _slicedToArray(_useState, 2),
+    updatedDoc = _useState2[0],
+    setUpdatedDoc = _useState2[1];
+  useHandleContentChanges(updatedDoc);
   return /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockEditorWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
@@ -18,7 +25,7 @@ var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_
     defaultDocument: defaultDocument,
     popupsMountPoint: popupsMountPoint,
     onChange: function onChange(value) {
-      return handleContentChanges(value.state.doc);
+      return setUpdatedDoc(value.state.doc);
     },
     onEditorReady: function onEditorReady(value) {
       return setInnerEditorView(value.editorView);

package/dist/types/nodeviews/syncedBlock.d.ts

@@ -27,7 +27,6 @@ declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
     private isSource;
-    private handleContentChanges;
     private setInnerEditorView;
     private renderEditor;
     private renderRenderer;

package/dist/types/ui/SyncBlockEditorWrapper.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
-import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import { type JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncedBlockEditorProps } from '../syncedBlockPluginType';
 type Props = {
     defaultDocument: JSONDocNode;
     getSyncedBlockEditor: (props: SyncedBlockEditorProps) => React.JSX.Element;
-    handleContentChanges: (updatedDoc: PMNode) => void;
     popupsBoundariesElement: HTMLElement;
     popupsMountPoint: HTMLElement;
     setInnerEditorView: (editorView: EditorView) => void;
+    useHandleContentChanges: (updatedDoc: PMNode) => void;
 };
 export declare const SyncBlockEditorWrapperDataId = "sync-block-plugin-editor-wrapper";
-export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, handleContentChanges, }: Props) => React.JSX.Element>;
+export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, useHandleContentChanges, }: Props) => React.JSX.Element>;
 export {};

package/dist/types-ts4.5/nodeviews/syncedBlock.d.ts

@@ -27,7 +27,6 @@ declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
     private isSource;
-    private handleContentChanges;
     private setInnerEditorView;
     private renderEditor;
     private renderRenderer;

package/dist/types-ts4.5/ui/SyncBlockEditorWrapper.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
-import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import { type JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncedBlockEditorProps } from '../syncedBlockPluginType';
 type Props = {
     defaultDocument: JSONDocNode;
     getSyncedBlockEditor: (props: SyncedBlockEditorProps) => React.JSX.Element;
-    handleContentChanges: (updatedDoc: PMNode) => void;
     popupsBoundariesElement: HTMLElement;
     popupsMountPoint: HTMLElement;
     setInnerEditorView: (editorView: EditorView) => void;
+    useHandleContentChanges: (updatedDoc: PMNode) => void;
 };
 export declare const SyncBlockEditorWrapperDataId = "sync-block-plugin-editor-wrapper";
-export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, handleContentChanges, }: Props) => React.JSX.Element>;
+export declare const SyncBlockEditorWrapper: React.MemoExoticComponent<({ defaultDocument, getSyncedBlockEditor, popupsBoundariesElement, popupsMountPoint, setInnerEditorView, useHandleContentChanges, }: Props) => React.JSX.Element>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "3.2.1",
+	"version": "3.3.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,13 +30,14 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.2.0",
 		"@atlaskit/button": "23.5.0",
+		"@atlaskit/editor-json-transformer": "^8.30.0",
 		"@atlaskit/editor-plugin-block-menu": "^4.0.0",
 		"@atlaskit/editor-plugin-decorations": "^6.1.0",
 		"@atlaskit/editor-plugin-floating-toolbar": "^8.2.0",
 		"@atlaskit/editor-plugin-selection": "^6.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
-		"@atlaskit/editor-synced-block-provider": "^0.4.0",
+		"@atlaskit/editor-synced-block-provider": "^0.5.0",
 		"@atlaskit/editor-toolbar": "^0.14.0",
 		"@atlaskit/icon": "28.5.0",
 		"@atlaskit/modal-dialog": "^14.4.0",
@@ -44,7 +45,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.7.0",
+		"@atlaskit/editor-common": "^110.8.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {