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

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
+const toDOM = () => ['div', {
+  class: BodiedSyncBlockSharedCssClassName.content,
+  contenteditable: true
+}, 0];
+class BodiedSyncBlock extends ReactNodeView {
+  constructor(props) {
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    this.pluginOptions = props.pluginOptions;
+  }
+  createDomRef() {
+    const domRef = document.createElement('div');
+    domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
+    return domRef;
+  }
+  render(_props, forwardRef) {
+    var _this$pluginOptions;
+    return /*#__PURE__*/React.createElement(BodiedSyncBlockWrapper, {
+      ref: forwardRef,
+      dataProvider: (_this$pluginOptions = this.pluginOptions) === null || _this$pluginOptions === void 0 ? void 0 : _this$pluginOptions.dataProvider,
+      node: this.node
+    });
+  }
+  getContentDOM() {
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, toDOM());
+    if (dom instanceof HTMLElement) {
+      return {
+        dom,
+        contentDOM
+      };
+    }
+    return undefined;
+  }
+}
+export const bodiedSyncBlockNodeView = ({
+  pluginOptions,
+  pmPluginFactoryParams,
+  api,
+  syncBlockStore
+}) => (node, view, getPos) => {
+  const {
+    portalProviderAPI,
+    eventDispatcher
+  } = pmPluginFactoryParams;
+  return new BodiedSyncBlock({
+    api,
+    pluginOptions,
+    node,
+    view,
+    getPos,
+    portalProviderAPI,
+    eventDispatcher,
+    syncBlockStore
+  }).init();
+};

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,21 +1,8 @@
 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, useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
-import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
+import { useFetchDocNode } from '@atlaskit/editor-synced-block-provider';
 import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
-const defaultSyncBlockEditorDocument = {
-  version: 1,
-  type: 'doc',
-  content: [{
-    type: 'paragraph',
-    content: [{
-      type: 'text',
-      text: 'This is a source sync block. Edit me to update the content.'
-    }]
-  }]
-};
 const defaultSyncBlockRendererDocument = {
   version: 1,
   type: 'doc',
@@ -39,47 +26,9 @@ class SyncBlock extends ReactNodeView {
     domRef.classList.add(SyncBlockSharedCssClassName.prefix);
     return domRef;
   }
-  isSource() {
-    return this.syncBlockStore.isSourceBlock(this.node);
-  }
-  setInnerEditorView(editorView) {
-    var _this$options, _this$options$dataPro;
-    // set inner editor view
-    this.syncBlockStore.setSyncBlockNestedEditorView(editorView);
-    const nodes = [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.fetchNodesData(nodes).then(data => {
-      var _data$;
-      const tr = editorView.state.tr;
-      if (data && (_data$ = data[0]) !== null && _data$ !== void 0 && _data$.content) {
-        const newNode = editorView.state.schema.nodeFromJSON(data[0].content);
-        editorView.dispatch(tr.replaceWith(0, editorView.state.doc.nodeSize - 2, newNode));
-      }
-    });
-  }
-  renderEditor() {
-    var _this$options2, _this$options4;
-    const 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: 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
-    });
-  }
-  renderRenderer() {
-    var _this$options5, _this$options7;
-    if (!((_this$options5 = this.options) !== null && _this$options5 !== void 0 && _this$options5.getSyncedBlockRenderer)) {
+  render() {
+    var _this$options, _this$options3;
+    if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockRenderer)) {
       return null;
     }
 
@@ -87,58 +36,20 @@ class SyncBlock extends ReactNodeView {
 
     return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
       useFetchDocNode: () => {
-        var _this$options6;
-        return useFetchDocNode(this.view, this.node, defaultSyncBlockRendererDocument, (_this$options6 = this.options) === null || _this$options6 === void 0 ? void 0 : _this$options6.dataProvider);
+        var _this$options2;
+        return useFetchDocNode(this.view, this.node, defaultSyncBlockRendererDocument, (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.dataProvider);
       },
-      getSyncedBlockRenderer: (_this$options7 = this.options) === null || _this$options7 === void 0 ? void 0 : _this$options7.getSyncedBlockRenderer
+      getSyncedBlockRenderer: (_this$options3 = this.options) === null || _this$options3 === void 0 ? void 0 : _this$options3.getSyncedBlockRenderer
     });
   }
-  render() {
-    if (this.isSource()) {
-      return this.renderEditor();
-    }
-    return this.renderRenderer();
-  }
-  stopEvent(event) {
-    var _target$closest;
-    const target = event.target;
-    if (!target) {
-      return false;
-    }
-    const isInNestedEditor = ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-testid="${SyncBlockEditorWrapperDataId}"]`)) != null;
-    if (isInNestedEditor) {
-      this.selectNode();
-      return true;
-    }
-    return false;
-  }
-  selectNode() {
-    this.selectSyncBlockNode(undefined);
-  }
   destroy() {
     var _this$unsubscribe;
     if (this.fetchIntervalId) {
       window.clearInterval(this.fetchIntervalId);
     }
-    this.syncBlockStore.setSyncBlockNestedEditorView(undefined);
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
     super.destroy();
   }
-  selectSyncBlockNode(relativeSelectionPos) {
-    var _this$reactComponentP, _this$reactComponentP2;
-    const getPos = typeof this.getPos === 'function' ? this.getPos() : 0;
-    const selectionAPI = (_this$reactComponentP = this.reactComponentProps.api) === null || _this$reactComponentP === void 0 ? void 0 : (_this$reactComponentP2 = _this$reactComponentP.selection) === null || _this$reactComponentP2 === void 0 ? void 0 : _this$reactComponentP2.actions;
-    if (!selectionAPI) {
-      return;
-    }
-    const 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);
-    }
-  }
 }
 export const syncBlockNodeView = ({
   options,

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

@@ -1,6 +1,6 @@
-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 const createSyncedBlock = ({
   tr,
   syncBlockStore,
@@ -9,69 +9,79 @@ export const createSyncedBlock = ({
   const {
     schema: {
       nodes: {
-        syncBlock,
-        doc
+        bodiedSyncBlock,
+        paragraph
       }
     }
   } = tr.doc.type;
-  const syncBlockNode = syncBlockStore.createSyncBlockNode();
-  const node = syncBlock.createAndFill({
-    ...syncBlockNode.attrs
-  });
-  if (!node) {
-    return false;
-  }
 
   // If the selection is empty, we want to insert the sync block on a new line
   if (tr.selection.empty) {
+    const storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
+    const paragraphNode = paragraph.createAndFill({});
+    const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
+      ...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 {
     const conversionInfo = canBeConvertedToSyncBlock(tr.selection);
-    if (conversionInfo) {
-      tr.replaceWith(conversionInfo.from, conversionInfo.to, node).scrollIntoView();
-      const 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(() => {
-        const editorView = syncBlockStore.getSyncBlockNestedEditorView();
-        if (editorView) {
-          const innerTr = editorView.state.tr;
-          const 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 ? void 0 : _safeInsert.scrollIntoView();
+      const storeSyncBlockNode = syncBlockStore.createSyncBlockNode();
+      const newBodiedSyncBlockNode = bodiedSyncBlock.createAndFill({
+        ...storeSyncBlockNode.attrs
+      }, conversionInfo.contentToInclude);
+      if (!newBodiedSyncBlockNode) {
+        return false;
+      }
+      tr.replaceWith(conversionInfo.from - 1, conversionInfo.to, newBodiedSyncBlockNode).scrollIntoView();
     }
   }
   return tr;
 };
-export const copySyncedBlockReferenceToClipboard = api => (state, dispatch, _view) => {
-  if (!(api !== null && api !== void 0 && api.floatingToolbar) || !dispatch) {
+export const copySyncedBlockReferenceToClipboard = api => (state, _dispatch, _view) => {
+  if (!(api !== null && api !== void 0 && api.floatingToolbar)) {
     return false;
   }
-  const {
-    schema: {
-      nodes: {
-        syncBlock
+  const syncBlockFindResult = findSyncBlockOrBodiedSyncBlock(state);
+  if (!syncBlockFindResult) {
+    return false;
+  }
+  const isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockFindResult.node, state.schema.nodes.bodiedSyncBlock);
+  let referenceSyncBlockNode = null;
+  if (isBodiedSyncBlock) {
+    const {
+      schema: {
+        nodes: {
+          syncBlock
+        }
       }
-    },
-    tr
-  } = state;
-  const newTr = api.floatingToolbar.commands.copyNode(syncBlock, INPUT_METHOD.FLOATING_TB)({
-    tr
-  });
-  if (!newTr) {
+    } = state.tr.doc.type;
+
+    // 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;
   }
-  dispatch(newTr);
+  const domNode = toDOM(referenceSyncBlockNode, state.tr.doc.type.schema);
+  copyDomNode(domNode, referenceSyncBlockNode.type, state.tr.selection);
   return true;
 };
 export const editSyncedBlockSource = (syncBlockStore, api) => (state, dispatch, _view) => {
@@ -112,7 +122,7 @@ export const removeSyncedBlock = api => (state, dispatch, _view) => {
     },
     tr
   } = state;
-  const syncBlock = findSyncBlock(state);
+  const syncBlock = findSyncBlockOrBodiedSyncBlock(state);
   if (!syncBlock) {
     return false;
   }

package/dist/es2019/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 const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
@@ -28,6 +29,12 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
           pmPluginFactoryParams,
           api,
           syncBlockStore
+        }),
+        bodiedSyncBlock: lazyBodiedSyncBlockView({
+          pluginOptions: options,
+          pmPluginFactoryParams,
+          api,
+          syncBlockStore
         })
       }
     },
@@ -36,7 +43,6 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       return {
         destroy() {
           syncBlockStore.setEditorView(undefined);
-          syncBlockStore.setSyncBlockNestedEditorView(undefined);
         }
       };
     },
@@ -61,7 +67,7 @@ export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api
       }
       return true;
     },
-    appendTransaction: (trs, oldState, newState) => {
+    appendTransaction: (trs, _oldState, newState) => {
       trs.filter(tr => tr.docChanged).forEach(tr => {
         syncBlockStore === null || syncBlockStore === void 0 ? void 0 : syncBlockStore.rebaseTransaction(tr, newState);
       });

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

@@ -1,5 +1,13 @@
 import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
 export const trackSyncBlocks = (storeManager, tr, state) => {
+  // TODO: EDITOR-2430 - Disable tracking for now, it will be updated to handle the new bodied sync block
+  const dontTrack = true;
+  if (dontTrack) {
+    return {
+      removed: [],
+      added: []
+    };
+  }
   const sourceSyncBlockRemoved = {};
   const sourceSyncBlockAdded = {};
 

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

@@ -6,8 +6,18 @@ export const findSyncBlock = (state, selection) => {
   const {
     syncBlock
   } = state.schema.nodes;
-  return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
+  return findSelectedNodeOfType(syncBlock)(selection || state.selection);
 };
+export const findBodiedSyncBlock = (state, selection) => {
+  const {
+    bodiedSyncBlock
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(bodiedSyncBlock)(selection || state.selection) || findParentNodeOfType(bodiedSyncBlock)(selection || state.selection);
+};
+export const findSyncBlockOrBodiedSyncBlock = (state, selection) => {
+  return findSyncBlock(state, selection) || findBodiedSyncBlock(state, selection);
+};
+export const isBodiedSyncBlockNode = (node, bodiedSyncBlock) => node.type === bodiedSyncBlock;
 export const canBeConvertedToSyncBlock = selection => {
   let from = selection.from;
   let to = selection.to;

package/dist/es2019/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';
@@ -21,6 +21,9 @@ export const syncedBlockPlugin = ({
       return [{
         name: 'syncBlock',
         node: syncBlock
+      }, {
+        name: 'bodiedSyncBlock',
+        node: bodiedSyncBlock
       }];
     },
     pmPlugins() {

package/dist/es2019/ui/BodiedSyncBlockWrapper.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useHandleContentChanges } from '@atlaskit/editor-synced-block-provider';
+import { SyncBlockLabel } from './SyncBlockLabel';
+export const BodiedSyncBlockWrapper = /*#__PURE__*/React.forwardRef(({
+  node,
+  dataProvider
+}, ref) => {
+  // TODO: EDITOR-2429 - this should be debounced (either here or in the data provider) to avoid excessive API writes
+  const 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/es2019/ui/CreateSyncedBlockDropdownItem.js

@@ -16,8 +16,22 @@ export const CreateSyncedBlockDropdownItem = ({
     return null;
   }
   const onClick = () => {
-    var _api$core;
-    api === null || api === void 0 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? 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 ? void 0 : (_api$core = api.core) === null || _api$core === void 0 ? void 0 : _api$core.actions.execute(({
+      tr
+    }) => {
+      var _api$blockControls, _api$blockControls$co;
+      api === null || api === void 0 ? void 0 : api.syncedBlock.commands.insertSyncedBlock()({
+        tr
+      });
+      api === null || api === void 0 ? void 0 : (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : (_api$blockControls$co = _api$blockControls.commands) === null || _api$blockControls$co === void 0 ? void 0 : _api$blockControls$co.toggleBlockMenu({
+        closeMenu: true
+      })({
+        tr
+      });
+      return tr;
+    });
+    api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.focus();
   };
   return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
     elemBefore: /*#__PURE__*/React.createElement(SyncBlocksIcon, {

package/dist/es2019/ui/SyncBlockLabel.js

@@ -1,16 +1,17 @@
 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';
 const SyncBlockLabelDataId = 'sync-block-label';
 const SyncBlockLabelComponent = () => {
   const {
     formatMessage
   } = useIntl();
   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 const SyncBlockLabel = /*#__PURE__*/React.memo(SyncBlockLabelComponent);

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

@@ -6,17 +6,25 @@ 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 const getToolbarConfig = (state, intl, _options = {}, _providerFactory, api, syncBlockStore) => {
   var _api$decorations;
-  const syncBlockObject = findSyncBlock(state);
+  const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state);
   if (!syncBlockObject) {
     return;
   }
+  const {
+    schema: {
+      nodes: {
+        bodiedSyncBlock
+      }
+    }
+  } = state;
+  const isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
   const {
     formatMessage
   } = intl;
-  const nodeType = state.schema.nodes.syncBlock;
+  const nodeType = syncBlockObject.node.type;
   const hoverDecoration = api === null || api === void 0 ? void 0 : (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
   const hoverDecorationProps = (nodeType, className) => ({
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
@@ -38,7 +46,7 @@ export const getToolbarConfig = (state, intl, _options = {}, _providerFactory, a
   };
   items.push(copyButton);
   const disabled = !syncBlockStore.getSyncBlockURL(syncBlockObject.node.attrs.resourceId);
-  if (!syncBlockStore.isSourceBlock(syncBlockObject.node)) {
+  if (!isBodiedSyncBlock) {
     const editSourceButton = {
       id: 'editor.syncedBlock.editSource',
       type: 'button',

package/dist/esm/nodeviews/bodiedLazySyncedBlock.js

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

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -0,0 +1,80 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import React from 'react';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
+var toDOM = function toDOM() {
+  return ['div', {
+    class: BodiedSyncBlockSharedCssClassName.content,
+    contenteditable: true
+  }, 0];
+};
+var BodiedSyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+  function BodiedSyncBlock(props) {
+    var _this;
+    _classCallCheck(this, BodiedSyncBlock);
+    _this = _callSuper(this, BodiedSyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    _this.pluginOptions = props.pluginOptions;
+    return _this;
+  }
+  _inherits(BodiedSyncBlock, _ReactNodeView);
+  return _createClass(BodiedSyncBlock, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('div');
+      domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
+      return domRef;
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      var _this$pluginOptions;
+      return /*#__PURE__*/React.createElement(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 = DOMSerializer.renderSpec(document, toDOM()),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+      if (dom instanceof HTMLElement) {
+        return {
+          dom: dom,
+          contentDOM: contentDOM
+        };
+      }
+      return undefined;
+    }
+  }]);
+}(ReactNodeView);
+export var 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();
+  };
+};