@atlaskit/editor-plugin-synced-block 3.5.1 → 3.6.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 3.6.0
+
+### Minor Changes
+
+- [`10882b2fab738`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10882b2fab738) -
+  [ux] Introduced bodiedSyncBlock nodeview
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.5.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedLazySyncedBlock.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyBodiedSyncBlockView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+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" != (0, _typeof2.default)(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 lazyBodiedSyncBlockView = exports.lazyBodiedSyncBlockView = function lazyBodiedSyncBlockView(props) {
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'bodiedSyncBlock',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-bodied-synced-block-nodeview" */
+        './bodiedSyncedBlock'));
+      }).then(function (_ref) {
+        var bodiedSyncBlockNodeView = _ref.bodiedSyncBlockNodeView;
+        return bodiedSyncBlockNodeView(props);
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.bodiedSyncBlockNodeView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = _interopRequireDefault(require("react"));
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var toDOM = function toDOM() {
+  return ['div', {
+    class: _syncBlock.BodiedSyncBlockSharedCssClassName.content,
+    contenteditable: true
+  }, 0];
+};
+var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+  function BodiedSyncBlock(props) {
+    var _this;
+    (0, _classCallCheck2.default)(this, BodiedSyncBlock);
+    _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    _this.pluginOptions = props.pluginOptions;
+    return _this;
+  }
+  (0, _inherits2.default)(BodiedSyncBlock, _ReactNodeView);
+  return (0, _createClass2.default)(BodiedSyncBlock, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.classList.add(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix);
+      return domRef;
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      var _this$pluginOptions;
+      return /*#__PURE__*/_react.default.createElement(_BodiedSyncBlockWrapper.BodiedSyncBlockWrapper, {
+        ref: forwardRef,
+        dataProvider: (_this$pluginOptions = this.pluginOptions) === null || _this$pluginOptions === void 0 ? void 0 : _this$pluginOptions.dataProvider,
+        node: this.node
+      });
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM()),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+      if (dom instanceof HTMLElement) {
+        return {
+          dom: dom,
+          contentDOM: contentDOM
+        };
+      }
+      return undefined;
+    }
+  }]);
+}(_reactNodeView.default);
+var bodiedSyncBlockNodeView = exports.bodiedSyncBlockNodeView = function bodiedSyncBlockNodeView(_ref) {
+  var pluginOptions = _ref.pluginOptions,
+    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+    api = _ref.api,
+    syncBlockStore = _ref.syncBlockStore;
+  return function (node, view, getPos) {
+    var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
+      eventDispatcher = pmPluginFactoryParams.eventDispatcher;
+    return new BodiedSyncBlock({
+      api: api,
+      pluginOptions: pluginOptions,
+      node: node,
+      view: view,
+      getPos: getPos,
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher,
+      syncBlockStore: syncBlockStore
+    }).init();
+  };
+};

package/dist/cjs/nodeviews/syncedBlock.js

@@ -14,24 +14,11 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _react = _interopRequireDefault(require("react"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
-var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
-var _SyncBlockEditorWrapper = require("../ui/SyncBlockEditorWrapper");
 var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
-var defaultSyncBlockEditorDocument = {
-  version: 1,
-  type: 'doc',
-  content: [{
-    type: 'paragraph',
-    content: [{
-      type: 'text',
-      text: 'This is a source sync block. Edit me to update the content.'
-    }]
-  }]
-};
 var defaultSyncBlockRendererDocument = {
   version: 1,
   type: 'doc',
@@ -62,60 +49,12 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       return domRef;
     }
   }, {
-    key: "isSource",
-    value: function isSource() {
-      return this.syncBlockStore.isSourceBlock(this.node);
-    }
-  }, {
-    key: "setInnerEditorView",
-    value: function setInnerEditorView(editorView) {
-      var _this$options;
-      // set inner editor view
-      this.syncBlockStore.setSyncBlockNestedEditorView(editorView);
-      var nodes = [(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.fetchNodesData(nodes).then(function (data) {
-        var _data$;
-        var tr = editorView.state.tr;
-        if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
-          var newNode = editorView.state.schema.nodeFromJSON(data[0].content);
-          editorView.dispatch(tr.replaceWith(0, editorView.state.doc.nodeSize - 2, newNode));
-        }
-      });
-    }
-  }, {
-    key: "renderEditor",
-    value: function renderEditor() {
-      var _this$options2,
+    key: "render",
+    value: function render() {
+      var _this$options,
         _this2 = this,
-        _this$options3;
-      var fabricEditorPopupScrollParent = this.view.dom.closest('.fabric-editor-popup-scroll-parent');
-      if (!(fabricEditorPopupScrollParent instanceof HTMLElement)) {
-        return null;
-      }
-      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,
-        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$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.getSyncedBlockEditor
-      });
-    }
-  }, {
-    key: "renderRenderer",
-    value: function renderRenderer() {
-      var _this$options4,
-        _this3 = this,
-        _this$options5;
-      if (!((_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.getSyncedBlockRenderer)) {
+        _this$options2;
+      if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockRenderer)) {
         return null;
       }
 
@@ -123,40 +62,12 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 
       return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
         useFetchDocNode: function useFetchDocNode() {
-          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);
+          var _this2$options;
+          return (0, _editorSyncedBlockProvider.useFetchDocNode)(_this2.view, _this2.node, defaultSyncBlockRendererDocument, (_this2$options = _this2.options) === null || _this2$options === void 0 ? void 0 : _this2$options.dataProvider);
         },
-        getSyncedBlockRenderer: (_this$options5 = this.options) === null || _this$options5 === void 0 ? void 0 : _this$options5.getSyncedBlockRenderer
+        getSyncedBlockRenderer: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockRenderer
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      if (this.isSource()) {
-        return this.renderEditor();
-      }
-      return this.renderRenderer();
-    }
-  }, {
-    key: "stopEvent",
-    value: function stopEvent(event) {
-      var _target$closest;
-      var target = event.target;
-      if (!target) {
-        return false;
-      }
-      var isInNestedEditor = ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(_SyncBlockEditorWrapper.SyncBlockEditorWrapperDataId, "\"]"))) != null;
-      if (isInNestedEditor) {
-        this.selectNode();
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "selectNode",
-    value: function selectNode() {
-      this.selectSyncBlockNode(undefined);
-    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -164,27 +75,9 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (this.fetchIntervalId) {
         window.clearInterval(this.fetchIntervalId);
       }
-      this.syncBlockStore.setSyncBlockNestedEditorView(undefined);
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }
-  }, {
-    key: "selectSyncBlockNode",
-    value: function selectSyncBlockNode(relativeSelectionPos) {
-      var _this$reactComponentP;
-      var getPos = typeof this.getPos === 'function' ? this.getPos() : 0;
-      var selectionAPI = (_this$reactComponentP = this.reactComponentProps.api) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.selection) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.actions;
-      if (!selectionAPI) {
-        return;
-      }
-      var tr = selectionAPI.selectNearNode({
-        selectionRelativeToNode: relativeSelectionPos,
-        selection: _state.NodeSelection.create(this.view.state.doc, getPos !== null && getPos !== void 0 ? getPos : 0)
-      })(this.view.state);
-      if (tr) {
-        this.view.dispatch(tr);
-      }
-    }
   }]);
 }(_reactNodeView.default);
 var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {

package/dist/cjs/pm-plugins/actions.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _analytics = require("@atlaskit/editor-common/analytics");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _utils2 = require("./utils/utils");
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _utils = require("./utils/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
@@ -16,66 +16,74 @@ var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_
     syncBlockStore = _ref.syncBlockStore,
     typeAheadInsert = _ref.typeAheadInsert;
   var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
-    syncBlock = _tr$doc$type$schema$n.syncBlock,
-    doc = _tr$doc$type$schema$n.doc;
-  var syncBlockNode = syncBlockStore.createSyncBlockNode();
-  var node = syncBlock.createAndFill(_objectSpread({}, syncBlockNode.attrs));
-  if (!node) {
-    return false;
-  }
+    bodiedSyncBlock = _tr$doc$type$schema$n.bodiedSyncBlock,
+    paragraph = _tr$doc$type$schema$n.paragraph;
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
+    var storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
+    var paragraphNode = paragraph.createAndFill({});
+    var newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, storeSyncBlockNode.attrs), paragraphNode ? [paragraphNode] : []);
+    if (!newBodiedSyncBlockNode) {
+      return false;
+    }
     if (typeAheadInsert) {
-      tr = typeAheadInsert(node);
+      tr = typeAheadInsert(newBodiedSyncBlockNode);
     } else {
-      tr = tr.replaceSelectionWith(node).scrollIntoView();
+      tr = tr.replaceSelectionWith(newBodiedSyncBlockNode).scrollIntoView();
     }
   } else {
-    var conversionInfo = (0, _utils2.canBeConvertedToSyncBlock)(tr.selection);
-    if (conversionInfo) {
-      tr.replaceWith(conversionInfo.from, conversionInfo.to, node).scrollIntoView();
-      var innerNodeJson = doc.create({}, conversionInfo.contentToInclude).toJSON();
-
-      // TMP solution to wait for the nested editor view to be set
-      // this will be removed once we have a proper architecture settled
-      setTimeout(function () {
-        var editorView = syncBlockStore.getSyncBlockNestedEditorView();
-        if (editorView) {
-          var innerTr = editorView.state.tr;
-          var innerNode = editorView.state.schema.nodeFromJSON(innerNodeJson);
-          editorView.dispatch(innerTr.replaceWith(0, editorView.state.doc.nodeSize - 2, innerNode));
-        }
-      }, 1000);
+    var conversionInfo = (0, _utils.canBeConvertedToSyncBlock)(tr.selection);
+    if (!conversionInfo) {
+      // TODO: EDITOR-1665 - Raise an error analytics event
+      return false;
     } else {
-      var _safeInsert;
-      // still insert an empty sync block if conversion is not possible
-      (_safeInsert = (0, _utils.safeInsert)(syncBlock.createAndFill(syncBlockNode.attrs))(tr)) === null || _safeInsert === void 0 || _safeInsert.scrollIntoView();
+      var _storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
+      var _newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill(_objectSpread({}, _storeSyncBlockNode.attrs), conversionInfo.contentToInclude);
+      if (!_newBodiedSyncBlockNode) {
+        return false;
+      }
+      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, _newBodiedSyncBlockNode).scrollIntoView();
     }
   }
   return tr;
 };
 var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(api) {
-  return function (state, dispatch, _view) {
-    if (!(api !== null && api !== void 0 && api.floatingToolbar) || !dispatch) {
+  return function (state, _dispatch, _view) {
+    if (!(api !== null && api !== void 0 && api.floatingToolbar)) {
       return false;
     }
-    var syncBlock = state.schema.nodes.syncBlock,
-      tr = state.tr;
-    var newTr = api.floatingToolbar.commands.copyNode(syncBlock, _analytics.INPUT_METHOD.FLOATING_TB)({
-      tr: tr
-    });
-    if (!newTr) {
+    var syncBlockFindResult = (0, _utils.findSyncBlockOrBodiedSyncBlock)(state);
+    if (!syncBlockFindResult) {
       return false;
     }
-    dispatch(newTr);
+    var isBodiedSyncBlock = (0, _utils.isBodiedSyncBlockNode)(syncBlockFindResult.node, state.schema.nodes.bodiedSyncBlock);
+    var referenceSyncBlockNode = null;
+    if (isBodiedSyncBlock) {
+      var syncBlock = state.tr.doc.type.schema.nodes.syncBlock;
+
+      // create sync block reference node
+      referenceSyncBlockNode = syncBlock.createAndFill({
+        resourceId: syncBlockFindResult.node.attrs.resourceId
+      });
+      if (!referenceSyncBlockNode) {
+        return false;
+      }
+    } else {
+      referenceSyncBlockNode = syncBlockFindResult.node;
+    }
+    if (!referenceSyncBlockNode) {
+      return false;
+    }
+    var domNode = (0, _copyButton.toDOM)(referenceSyncBlockNode, state.tr.doc.type.schema);
+    (0, _copyButton.copyDomNode)(domNode, referenceSyncBlockNode.type, state.tr.selection);
     return true;
   };
 };
 var editSyncedBlockSource = exports.editSyncedBlockSource = function editSyncedBlockSource(syncBlockStore, api) {
   return function (state, dispatch, _view) {
     var _syncBlock$node;
-    var syncBlock = (0, _utils2.findSyncBlock)(state);
+    var syncBlock = (0, _utils.findSyncBlock)(state);
     var resourceId = syncBlock === null || syncBlock === void 0 || (_syncBlock$node = syncBlock.node) === null || _syncBlock$node === void 0 || (_syncBlock$node = _syncBlock$node.attrs) === null || _syncBlock$node === void 0 ? void 0 : _syncBlock$node.resourceId;
     if (!resourceId) {
       return false;
@@ -106,7 +114,7 @@ var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(a
       from = _state$selection.$from.pos,
       to = _state$selection.$to.pos,
       tr = state.tr;
-    var syncBlock = (0, _utils2.findSyncBlock)(state);
+    var syncBlock = (0, _utils.findSyncBlockOrBodiedSyncBlock)(state);
     if (!syncBlock) {
       return false;
     }

package/dist/cjs/pm-plugins/main.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _bodiedLazySyncedBlock = require("../nodeviews/bodiedLazySyncedBlock");
 var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var _trackSyncBlocks2 = require("./utils/track-sync-blocks");
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
@@ -34,6 +35,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api,
           syncBlockStore: syncBlockStore
+        }),
+        bodiedSyncBlock: (0, _bodiedLazySyncedBlock.lazyBodiedSyncBlockView)({
+          pluginOptions: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api,
+          syncBlockStore: syncBlockStore
         })
       }
     },
@@ -42,7 +49,6 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       return {
         destroy: function destroy() {
           syncBlockStore.setEditorView(undefined);
-          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },
@@ -66,7 +72,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pmPlugi
       }
       return true;
     },
-    appendTransaction: function appendTransaction(trs, oldState, newState) {
+    appendTransaction: function appendTransaction(trs, _oldState, newState) {
       trs.filter(function (tr) {
         return tr.docChanged;
       }).forEach(function (tr) {

package/dist/cjs/pm-plugins/utils/track-sync-blocks.js

@@ -6,6 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.trackSyncBlocks = void 0;
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var trackSyncBlocks = exports.trackSyncBlocks = function trackSyncBlocks(storeManager, tr, state) {
+  // TODO: EDITOR-2430 - Disable tracking for now, it will be updated to handle the new bodied sync block
+  var dontTrack = true;
+  if (dontTrack) {
+    return {
+      removed: [],
+      added: []
+    };
+  }
   var sourceSyncBlockRemoved = {};
   var sourceSyncBlockAdded = {};
 

package/dist/cjs/pm-plugins/utils/utils.js

@@ -3,14 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.findSyncBlock = exports.canBeConvertedToSyncBlock = void 0;
+exports.isBodiedSyncBlockNode = exports.findSyncBlockOrBodiedSyncBlock = exports.findSyncBlock = exports.findBodiedSyncBlock = exports.canBeConvertedToSyncBlock = void 0;
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _editorTables = require("@atlaskit/editor-tables");
 var findSyncBlock = exports.findSyncBlock = function findSyncBlock(state, selection) {
   var syncBlock = state.schema.nodes.syncBlock;
-  return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection || state.selection) || (0, _utils.findParentNodeOfType)(syncBlock)(selection || state.selection);
+  return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection || state.selection);
+};
+var findBodiedSyncBlock = exports.findBodiedSyncBlock = function findBodiedSyncBlock(state, selection) {
+  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
+  return (0, _utils.findSelectedNodeOfType)(bodiedSyncBlock)(selection || state.selection) || (0, _utils.findParentNodeOfType)(bodiedSyncBlock)(selection || state.selection);
+};
+var findSyncBlockOrBodiedSyncBlock = exports.findSyncBlockOrBodiedSyncBlock = function findSyncBlockOrBodiedSyncBlock(state, selection) {
+  return findSyncBlock(state, selection) || findBodiedSyncBlock(state, selection);
+};
+var isBodiedSyncBlockNode = exports.isBodiedSyncBlockNode = function isBodiedSyncBlockNode(node, bodiedSyncBlock) {
+  return node.type === bodiedSyncBlock;
 };
 var canBeConvertedToSyncBlock = exports.canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
   var from = selection.from;

package/dist/cjs/syncedBlockPlugin.js

@@ -27,6 +27,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       return [{
         name: 'syncBlock',
         node: _adfSchema.syncBlock
+      }, {
+        name: 'bodiedSyncBlock',
+        node: _adfSchema.bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/cjs/ui/BodiedSyncBlockWrapper.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BodiedSyncBlockWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
+var _SyncBlockLabel = require("./SyncBlockLabel");
+var BodiedSyncBlockWrapper = exports.BodiedSyncBlockWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var node = _ref.node,
+    dataProvider = _ref.dataProvider;
+  // TODO: EDITOR-2429 - this should be debounced (either here or in the data provider) to avoid excessive API writes
+  var docJSON = {
+    version: 1,
+    type: 'doc',
+    content: node.content.toJSON()
+  };
+  (0, _editorSyncedBlockProvider.useHandleContentChanges)(docJSON, true, node, dataProvider);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, null), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": "bodied-sync-block-wrapper",
+    ref: ref
+  }));
+});

package/dist/cjs/ui/CreateSyncedBlockDropdownItem.js

@@ -21,8 +21,21 @@ var CreateSyncedBlockDropdownItem = exports.CreateSyncedBlockDropdownItem = func
     return null;
   }
   var onClick = function onClick() {
-    var _api$core;
-    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock());
+    var _api$core, _api$core2;
+    api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
+      var _api$blockControls;
+      var tr = _ref2.tr;
+      api === null || api === void 0 || api.syncedBlock.commands.insertSyncedBlock()({
+        tr: tr
+      });
+      api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || (_api$blockControls = _api$blockControls.commands) === null || _api$blockControls === void 0 || _api$blockControls.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr: tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.focus();
   };
   return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SyncBlocksIcon, {

package/dist/cjs/ui/SyncBlockLabel.js

@@ -8,15 +8,16 @@ exports.SyncBlockLabel = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var SyncBlockLabelDataId = 'sync-block-label';
 var SyncBlockLabelComponent = function SyncBlockLabelComponent() {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/_react.default.createElement("div", {
-    "data-testId": SyncBlockLabelDataId
+    "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: "ak-editor-sync-block__label"
+    className: _syncBlock.SyncBlockLabelSharedCssClassName.labelClassName
   }, formatMessage(_messages.syncBlockMessages.syncedBlockLabel));
 };
 var SyncBlockLabel = exports.SyncBlockLabel = /*#__PURE__*/_react.default.memo(SyncBlockLabelComponent);

package/dist/cjs/ui/floating-toolbar.js

@@ -25,12 +25,14 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
   var api = arguments.length > 4 ? arguments[4] : undefined;
   var syncBlockStore = arguments.length > 5 ? arguments[5] : undefined;
-  var syncBlockObject = (0, _utils2.findSyncBlock)(state);
+  var syncBlockObject = (0, _utils2.findSyncBlockOrBodiedSyncBlock)(state);
   if (!syncBlockObject) {
     return;
   }
+  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
+  var isBodiedSyncBlock = (0, _utils2.isBodiedSyncBlockNode)(syncBlockObject.node, bodiedSyncBlock);
   var formatMessage = intl.formatMessage;
-  var nodeType = state.schema.nodes.syncBlock;
+  var nodeType = syncBlockObject.node.type;
   var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
   var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
     return {
@@ -53,7 +55,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
   items.push(copyButton);
   var disabled = !syncBlockStore.getSyncBlockURL(syncBlockObject.node.attrs.resourceId);
-  if (!syncBlockStore.isSourceBlock(syncBlockObject.node)) {
+  if (!isBodiedSyncBlock) {
     var editSourceButton = _objectSpread({
       id: 'editor.syncedBlock.editSource',
       type: 'button',

package/dist/es2019/nodeviews/bodiedLazySyncedBlock.js

@@ -0,0 +1,16 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+export const lazyBodiedSyncBlockView = props => {
+  return withLazyLoading({
+    nodeName: 'bodiedSyncBlock',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-bodied-synced-block-nodeview" */
+      './bodiedSyncedBlock').then(({
+        bodiedSyncBlockNodeView
+      }) => {
+        return bodiedSyncBlockNodeView(props);
+      });
+      return result;
+    }
+  });
+};