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

package/dist/esm/nodeviews/syncedBlock.js

@@ -10,21 +10,8 @@ function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prot
 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, useHandleContentChanges as _useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
-import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
+import { useFetchDocNode as _useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
-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',
@@ -55,60 +42,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 = [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.createElement(SyncBlockEditorWrapper, {
-        popupsBoundariesElement: fabricEditorPopupScrollParent,
-        popupsMountPoint: fabricEditorPopupScrollParent,
-        defaultDocument: defaultSyncBlockEditorDocument,
-        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$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;
       }
 
@@ -116,40 +55,12 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
 
       return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
         useFetchDocNode: function useFetchDocNode() {
-          var _this3$options;
-          return _useFetchDocNode(_this3.view, _this3.node, defaultSyncBlockRendererDocument, (_this3$options = _this3.options) === null || _this3$options === void 0 ? void 0 : _this3$options.dataProvider);
+          var _this2$options;
+          return _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(SyncBlockEditorWrapperDataId, "\"]"))) != null;
-      if (isInNestedEditor) {
-        this.selectNode();
-        return true;
-      }
-      return false;
-    }
-  }, {
-    key: "selectNode",
-    value: function selectNode() {
-      this.selectSyncBlockNode(undefined);
-    }
   }, {
     key: "destroy",
     value: function destroy() {
@@ -157,27 +68,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: NodeSelection.create(this.view.state.doc, getPos !== null && getPos !== void 0 ? getPos : 0)
-      })(this.view.state);
-      if (tr) {
-        this.view.dispatch(tr);
-      }
-    }
   }]);
 }(ReactNodeView);
 export var syncBlockNodeView = function syncBlockNodeView(_ref) {

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

@@ -1,67 +1,75 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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) { _defineProperty(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; }
-import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-import { canBeConvertedToSyncBlock, findSyncBlock } from './utils/utils';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
+import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from './utils/utils';
 export var createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     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 = 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);
+    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 = 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;
 };
 export var 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, INPUT_METHOD.FLOATING_TB)({
-      tr: tr
-    });
-    if (!newTr) {
+    var syncBlockFindResult = findSyncBlockOrBodiedSyncBlock(state);
+    if (!syncBlockFindResult) {
       return false;
     }
-    dispatch(newTr);
+    var isBodiedSyncBlock = 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 = toDOM(referenceSyncBlockNode, state.tr.doc.type.schema);
+    copyDomNode(domNode, referenceSyncBlockNode.type, state.tr.selection);
     return true;
   };
 };
@@ -99,7 +107,7 @@ export var removeSyncedBlock = function removeSyncedBlock(api) {
       from = _state$selection.$from.pos,
       to = _state$selection.$to.pos,
       tr = state.tr;
-    var syncBlock = findSyncBlock(state);
+    var syncBlock = findSyncBlockOrBodiedSyncBlock(state);
     if (!syncBlock) {
       return false;
     }

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

@@ -1,5 +1,6 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { lazyBodiedSyncBlockView } from '../nodeviews/bodiedLazySyncedBlock';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 import { trackSyncBlocks } from './utils/track-sync-blocks';
 export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
@@ -28,6 +29,12 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
           pmPluginFactoryParams: pmPluginFactoryParams,
           api: api,
           syncBlockStore: syncBlockStore
+        }),
+        bodiedSyncBlock: lazyBodiedSyncBlockView({
+          pluginOptions: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api,
+          syncBlockStore: syncBlockStore
         })
       }
     },
@@ -36,7 +43,6 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       return {
         destroy: function destroy() {
           syncBlockStore.setEditorView(undefined);
-          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },
@@ -60,7 +66,7 @@ export var createPlugin = function createPlugin(options, pmPluginFactoryParams,
       }
       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/esm/pm-plugins/utils/track-sync-blocks.js

@@ -1,5 +1,13 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 export var 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/esm/pm-plugins/utils/utils.js

@@ -4,7 +4,17 @@ import { getDefaultSyncBlockSchema } from '@atlaskit/editor-synced-block-provide
 import { CellSelection, findTable } from '@atlaskit/editor-tables';
 export var findSyncBlock = function findSyncBlock(state, selection) {
   var syncBlock = state.schema.nodes.syncBlock;
-  return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
+  return findSelectedNodeOfType(syncBlock)(selection || state.selection);
+};
+export var findBodiedSyncBlock = function findBodiedSyncBlock(state, selection) {
+  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
+  return findSelectedNodeOfType(bodiedSyncBlock)(selection || state.selection) || findParentNodeOfType(bodiedSyncBlock)(selection || state.selection);
+};
+export var findSyncBlockOrBodiedSyncBlock = function findSyncBlockOrBodiedSyncBlock(state, selection) {
+  return findSyncBlock(state, selection) || findBodiedSyncBlock(state, selection);
+};
+export var isBodiedSyncBlockNode = function isBodiedSyncBlockNode(node, bodiedSyncBlock) {
+  return node.type === bodiedSyncBlock;
 };
 export var canBeConvertedToSyncBlock = function canBeConvertedToSyncBlock(selection) {
   var from = selection.from;

package/dist/esm/syncedBlockPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { syncBlock } from '@atlaskit/adf-schema';
+import { bodiedSyncBlock, syncBlock } from '@atlaskit/adf-schema';
 import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconSyncBlock } from '@atlaskit/editor-common/quick-insert';
 import { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
@@ -20,6 +20,9 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       return [{
         name: 'syncBlock',
         node: syncBlock
+      }, {
+        name: 'bodiedSyncBlock',
+        node: bodiedSyncBlock
       }];
     },
     pmPlugins: function pmPlugins() {

package/dist/esm/ui/BodiedSyncBlockWrapper.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
+import { SyncBlockLabel } from './SyncBlockLabel';
+export var BodiedSyncBlockWrapper = /*#__PURE__*/React.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()
+  };
+  useHandleContentChanges(docJSON, true, node, dataProvider);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SyncBlockLabel, null), /*#__PURE__*/React.createElement("div", {
+    "data-testid": "bodied-sync-block-wrapper",
+    ref: ref
+  }));
+});

package/dist/esm/ui/CreateSyncedBlockDropdownItem.js

@@ -14,8 +14,21 @@ export var CreateSyncedBlockDropdownItem = function CreateSyncedBlockDropdownIte
     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.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {

package/dist/esm/ui/SyncBlockLabel.js

@@ -1,15 +1,16 @@
 import React from 'react';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 var SyncBlockLabelDataId = 'sync-block-label';
 var SyncBlockLabelComponent = function SyncBlockLabelComponent() {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   return /*#__PURE__*/React.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: SyncBlockLabelSharedCssClassName.labelClassName
   }, formatMessage(messages.syncedBlockLabel));
 };
 export var SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

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

@@ -9,19 +9,21 @@ import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../pm-plugins/actions';
-import { findSyncBlock } from '../pm-plugins/utils/utils';
+import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 export var getToolbarConfig = function getToolbarConfig(state, intl) {
   var _api$decorations;
   var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   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 = findSyncBlock(state);
+  var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state);
   if (!syncBlockObject) {
     return;
   }
+  var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
+  var isBodiedSyncBlock = 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 {
@@ -44,7 +46,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
   }, hoverDecorationProps(nodeType, 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/types/nodeviews/bodiedLazySyncedBlock.d.ts

@@ -0,0 +1,3 @@
+import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { BodiedSyncBlockNodeViewProperties } from './bodiedSyncedBlock';
+export declare const lazyBodiedSyncBlockView: (props: BodiedSyncBlockNodeViewProperties) => NodeViewConstructor;

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

@@ -0,0 +1,25 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
+import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    eventDispatcher: EventDispatcher;
+    getPos: getPosHandler;
+    node: PMNode;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    portalProviderAPI: PortalProviderAPI;
+    view: EditorView;
+}
+export interface BodiedSyncBlockNodeViewProperties {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore: SyncBlockStoreManager;
+}
+export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
@@ -19,28 +18,10 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
-declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
-    private options;
-    private fetchIntervalId;
-    private syncBlockStore;
-    constructor(props: SyncBlockNodeViewProps);
-    unsubscribe: (() => void) | undefined;
-    createDomRef(): HTMLElement;
-    private isSource;
-    private setInnerEditorView;
-    private renderEditor;
-    private renderRenderer;
-    render(): React.JSX.Element | null;
-    stopEvent(event: Event): boolean;
-    selectNode(): void;
-    destroy(): void;
-    private selectSyncBlockNode;
-}
 export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
     syncBlockStore: SyncBlockStoreManager;
 }
-export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api, syncBlockStore }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
-export {};
+export declare const syncBlockNodeView: (props: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<SyncBlockNodeViewProps>;

package/dist/types/pm-plugins/utils/utils.d.ts

@@ -1,7 +1,11 @@
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import type { NodeType, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
+import type { ContentNodeWithPos } from '@atlaskit/editor-prosemirror/utils';
+export declare const findSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
+export declare const findBodiedSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
+export declare const findSyncBlockOrBodiedSyncBlock: (state: EditorState, selection?: Selection | null) => ContentNodeWithPos | undefined;
+export declare const isBodiedSyncBlockNode: (node: PMNode, bodiedSyncBlock: NodeType) => boolean;
 export interface SyncBlockConversionInfo {
     contentToInclude: Fragment;
     from: number;

package/dist/types/syncedBlockPluginType.d.ts

@@ -3,6 +3,7 @@ import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { EditorCommand, NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
 import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { BlockControlsPlugin } from '@atlaskit/editor-plugin-block-controls';
 import type { BlockMenuPlugin } from '@atlaskit/editor-plugin-block-menu';
 import type { DecorationsPlugin } from '@atlaskit/editor-plugin-decorations';
 import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
@@ -47,6 +48,7 @@ export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
         SelectionPlugin,
         FloatingToolbarPlugin,
         DecorationsPlugin,
+        OptionalPlugin<BlockControlsPlugin>,
         OptionalPlugin<BlockMenuPlugin>,
         OptionalPlugin<AnalyticsPlugin>
     ];

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { type SyncBlockDataProvider } from '@atlaskit/editor-synced-block-provider';
+interface BodiedSyncBlockWrapperProps {
+    dataProvider?: SyncBlockDataProvider | undefined;
+    node: PMNode;
+}
+export declare const BodiedSyncBlockWrapper: React.ForwardRefExoticComponent<BodiedSyncBlockWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,3 @@
+import type { NodeViewConstructor } from '@atlaskit/editor-common/lazy-node-view';
+import type { BodiedSyncBlockNodeViewProperties } from './bodiedSyncedBlock';
+export declare const lazyBodiedSyncBlockView: (props: BodiedSyncBlockNodeViewProperties) => NodeViewConstructor;

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

@@ -0,0 +1,25 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
+import type { ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
+import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export interface BodiedSyncBlockNodeViewProps extends ReactComponentProps {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    eventDispatcher: EventDispatcher;
+    getPos: getPosHandler;
+    node: PMNode;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    portalProviderAPI: PortalProviderAPI;
+    view: EditorView;
+}
+export interface BodiedSyncBlockNodeViewProperties {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    pluginOptions: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    syncBlockStore: SyncBlockStoreManager;
+}
+export declare const bodiedSyncBlockNodeView: (props: BodiedSyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<BodiedSyncBlockNodeViewProps>;

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import ReactNodeView, { type getPosHandler } from '@atlaskit/editor-common/react-node-view';
@@ -19,28 +18,10 @@ export interface SyncBlockNodeViewProps extends ReactComponentProps {
     syncBlockStore: SyncBlockStoreManager;
     view: EditorView;
 }
-declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
-    private options;
-    private fetchIntervalId;
-    private syncBlockStore;
-    constructor(props: SyncBlockNodeViewProps);
-    unsubscribe: (() => void) | undefined;
-    createDomRef(): HTMLElement;
-    private isSource;
-    private setInnerEditorView;
-    private renderEditor;
-    private renderRenderer;
-    render(): React.JSX.Element | null;
-    stopEvent(event: Event): boolean;
-    selectNode(): void;
-    destroy(): void;
-    private selectSyncBlockNode;
-}
 export interface SyncBlockNodeViewProperties {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
     options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
     syncBlockStore: SyncBlockStoreManager;
 }
-export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api, syncBlockStore }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
-export {};
+export declare const syncBlockNodeView: (props: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: getPosHandler) => ReactNodeView<SyncBlockNodeViewProps>;