@atlaskit/editor-plugin-synced-block 2.1.0 → 2.2.0

package/dist/cjs/ui/ContentComponent.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ContentComponent = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var ContentComponent = exports.ContentComponent = function ContentComponent(_ref) {
+  var syncBlockStoreManager = _ref.syncBlockStoreManager;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var resolverRef = _react.default.useRef(undefined);
+  var handleClose = (0, _react.useCallback)(function (confirm) {
+    return function () {
+      if (resolverRef.current) {
+        resolverRef.current(confirm);
+        resolverRef.current = undefined;
+      }
+      setIsOpen(false);
+    };
+  }, []);
+  var confirmationCallback = (0, _react.useCallback)(function () {
+    setIsOpen(true);
+    var confirmedPromise = new Promise(function (resolve) {
+      resolverRef.current = resolve;
+    });
+    return confirmedPromise;
+  }, []);
+  (0, _react.useEffect)(function () {
+    var unregister = syncBlockStoreManager.registerConfirmationCallback(confirmationCallback);
+    return function () {
+      unregister();
+    };
+  }, [syncBlockStoreManager, confirmationCallback]);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, isOpen && /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: handleClose(false)
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, null, "Confirmation")), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("div", null, "Are you sure you want to delete this synced block?")), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    onClick: handleClose(false)
+  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "danger",
+    onClick: handleClose(true),
+    autoFocus: true
+  }, "Delete"))));
+};

package/dist/cjs/ui/SyncBlockEditorWrapper.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var SyncBlockEditorWrapperDataId = exports.SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
+var SyncBlockEditorWrapperComponent = function SyncBlockEditorWrapperComponent(_ref) {
+  var defaultDocument = _ref.defaultDocument,
+    getSyncedBlockEditor = _ref.getSyncedBlockEditor,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsMountPoint = _ref.popupsMountPoint,
+    setInnerEditorView = _ref.setInnerEditorView,
+    handleContentChanges = _ref.handleContentChanges;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
+    _react.default.createElement("div", {
+      "data-testid": SyncBlockEditorWrapperDataId,
+      style: {
+        border: 'purple solid 1px'
+      }
+    }, getSyncedBlockEditor({
+      popupsBoundariesElement: popupsBoundariesElement,
+      defaultDocument: defaultDocument,
+      popupsMountPoint: popupsMountPoint,
+      onChange: function onChange(value) {
+        return handleContentChanges(value.state.doc);
+      },
+      onEditorReady: function onEditorReady(value) {
+        return setInnerEditorView(value.editorView);
+      }
+    }))
+  );
+};
+var SyncBlockEditorWrapper = exports.SyncBlockEditorWrapper = /*#__PURE__*/_react.default.memo(SyncBlockEditorWrapperComponent);

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SyncBlockRendererWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
+var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
+  var getSyncedBlockRenderer = _ref.getSyncedBlockRenderer,
+    docNode = _ref.docNode;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/design-system/ensure-design-token-usage
+    _react.default.createElement("div", {
+      "data-testid": SyncBlockRendererWrapperDataId,
+      style: {
+        border: 'blue solid 1px'
+      }
+    }, getSyncedBlockRenderer({
+      docNode: docNode
+    }))
+  );
+};
+var SyncBlockRendererWrapper = exports.SyncBlockRendererWrapper = /*#__PURE__*/_react.default.memo(SyncBlockRendererWrapperComponent);

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

@@ -1,11 +1,66 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarConfig = void 0;
-var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
-  return function (_state, _intl) {
-    return undefined;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _actions = require("../pm-plugins/actions");
+var _utils2 = require("../pm-plugins/utils/utils");
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(state, _intl) {
+  var _options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var _providerFactory = arguments.length > 3 ? arguments[3] : undefined;
+  var syncBlockObject = (0, _utils2.findSyncBlock)(state);
+  if (!syncBlockObject) {
+    return;
+  }
+  var nodeType = state.schema.nodes.syncBlock;
+  var items = [];
+  var copyButton = {
+    id: 'editor.syncedBlock.copy',
+    type: 'button',
+    appearance: 'subtle',
+    icon: _copy.default,
+    title: 'Copy',
+    showTitle: true,
+    tooltipContent: 'Copy reference to clipboard',
+    onClick: _actions.copySyncedBlockReferenceToClipboard
+  };
+  items.push(copyButton);
+  if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
+    var editSourceButton = {
+      id: 'editor.syncedBlock.editSource',
+      type: 'button',
+      appearance: 'subtle',
+      icon: _linkExternal.default,
+      title: 'Edit source',
+      showTitle: true,
+      tooltipContent: 'Navigate to source page of the sync block',
+      disabled: true,
+      onClick: function onClick(_state, _dispatch, view) {
+        if (!view) {
+          return false;
+        }
+        // to be implemented in a follow up PR
+        return true;
+      }
+    };
+    items.push(editSourceButton);
+  }
+  var getDomRef = function getDomRef(editorView) {
+    var domAtPos = editorView.domAtPos.bind(editorView);
+    var element = (0, _utils.findDomRefAtPos)(syncBlockObject.pos, domAtPos);
+    return element;
+  };
+  return {
+    title: 'Synced Block floating controls',
+    getDomRef: getDomRef,
+    nodeType: nodeType,
+    items: items,
+    scrollable: true,
+    groupLabel: 'Synced blocks'
   };
 };

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,105 +1,141 @@
-/* eslint-disable @atlaskit/ui-styling-standard/enforce-style-prop */
-import React, { useMemo, useRef, useState } from 'react';
+import React from 'react';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-export const defaultSyncBlockDocument = {
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
+import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
+const defaultSyncBlockEditorDocument = {
   version: 1,
   type: 'doc',
   content: [{
     type: 'paragraph',
     content: [{
       type: 'text',
-      text: 'This is a synced block. Edit the source to update the content.'
+      text: 'This is a source sync block. Edit me to update the content.'
     }]
   }]
 };
-const SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
-export const SyncBlockPluginComponent = ({
-  config,
-  dom
-}) => {
-  const innerEditorView = useRef(null);
-
-  /* Tmp solution to demonstrate the synced block renderer */
-  const [rendererDocument, setRendererDocument] = useState(defaultSyncBlockDocument);
-  const onChange = (editorView, _meta) => {
-    const content = editorView.state.doc.toJSON().content;
-    const rendererDocument = {
-      version: 1,
-      type: 'doc',
-      content
-    };
-    setRendererDocument(rendererDocument);
-  };
-  const onEditorReady = ({
-    editorView
-  }) => {
-    innerEditorView.current = editorView || null;
-  };
-  const boundariesElement = useMemo(() => {
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    return dom.closest('.fabric-editor-popup-scroll-parent');
-  }, [dom]);
-  if (!boundariesElement || !(boundariesElement instanceof HTMLElement)) {
-    return null;
-  }
-  if (!(config !== null && config !== void 0 && config.getSyncedBlockEditor) || !(config !== null && config !== void 0 && config.getSyncedBlockRenderer)) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": SyncBlockEditorWrapperDataId
-  }, config.getSyncedBlockEditor({
-    boundariesElement: boundariesElement,
-    defaultDocument: defaultSyncBlockDocument,
-    mountPoint: dom,
-    onChange: onChange,
-    onEditorReady: onEditorReady
-  }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      width: '100%',
-      height: '1px',
-      // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      backgroundColor: 'purple'
-    }
-  }), config.getSyncedBlockRenderer({
-    docNode: rendererDocument
-  }));
+const defaultSyncBlockRendererDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a reference sync block. Stay tuned for updates...'
+    }]
+  }]
 };
 class SyncBlock extends ReactNodeView {
+  constructor(props) {
+    super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props);
+    const {
+      resourceId,
+      localId
+    } = props.node.attrs;
+    // Temporary solution to identify the source
+    this.isSource = resourceId === localId;
+    this.options = props.options;
+  }
   createDomRef() {
     const domRef = document.createElement('div');
-    domRef.setAttribute('style', 'border: purple solid 1px;');
     return domRef;
   }
-  render() {
-    return /*#__PURE__*/React.createElement(SyncBlockPluginComponent, {
-      config: this.reactComponentProps.config,
-      dom: this.dom
+  handleContentChanges(_updatedDoc) {
+    // write data
+  }
+  setInnerEditorView(_editorView) {
+    // set inner editor view
+  }
+  renderEditor() {
+    var _this$options, _this$options2;
+    const popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
+    if (!(popupsBoundariesElement instanceof HTMLElement)) {
+      return null;
+    }
+    if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(SyncBlockEditorWrapper, {
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsMountPoint: this.dom,
+      defaultDocument: defaultSyncBlockEditorDocument,
+      handleContentChanges: this.handleContentChanges,
+      setInnerEditorView: this.setInnerEditorView,
+      getSyncedBlockEditor: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockEditor
+    });
+  }
+  renderRenderer() {
+    var _this$options3, _this$options4;
+    if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockRenderer)) {
+      return null;
+    }
+
+    // get document node from data provider
+    const docNode = defaultSyncBlockRendererDocument;
+    return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+      docNode: docNode,
+      getSyncedBlockRenderer: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockRenderer
     });
   }
+  render() {
+    if (this.isSource) {
+      return this.renderEditor();
+    }
+    return this.renderRenderer();
+  }
   stopEvent(event) {
     var _target$closest;
     const target = event.target;
     if (!target) {
       return false;
     }
-    return ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, `[data-testid="${SyncBlockEditorWrapperDataId}"]`)) != null;
+    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;
     (_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 = ({
-  config,
-  pmPluginFactoryParams
+  options,
+  pmPluginFactoryParams,
+  api
 }) => (node, view, getPos) => {
   const {
     portalProviderAPI,
     eventDispatcher
   } = pmPluginFactoryParams;
-  const reactComponentProps = {
-    config
-  };
-  return new SyncBlock(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+  return new SyncBlock({
+    api,
+    options,
+    node,
+    view,
+    getPos,
+    portalProviderAPI,
+    eventDispatcher
+  }).init();
 };

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

@@ -1,19 +1,34 @@
+import uuid from 'uuid';
+import { toDOM, copyDomNode } from '@atlaskit/editor-common/copy-button';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
-const getRandomId = () => {
-  if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
-    return new Date().toISOString();
-  }
-  return globalThis.crypto.randomUUID();
-};
 export const createSyncedBlock = state => {
+  const id = uuid();
   const tr = state.tr;
   // const { breakout } = state.schema.marks;
   const node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: getRandomId(),
-    localId: getRandomId()
+    resourceId: id,
+    localId: id
   }, null
   // [breakout.create({ mode: 'wide' })],
   );
   safeInsert(node)(tr);
   return tr;
+};
+export const copySyncedBlockReferenceToClipboard = (state, _dispatch, _view) => {
+  const {
+    schema,
+    selection
+  } = state;
+  if (selection instanceof NodeSelection) {
+    const nodeType = selection.node.type;
+    const domNode = toDOM(selection.node, schema);
+    // clear local-id
+    if (domNode instanceof HTMLElement) {
+      domNode.setAttribute('data-local-id', '');
+    }
+    copyDomNode(domNode, nodeType, selection);
+    return true;
+  }
+  return false;
 };

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

@@ -1,32 +1,59 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
+import { trackSyncBlocks } from './utils/track-sync-blocks';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export const createPlugin = (config, pmPluginFactoryParams, _syncBlockStore) => {
+export const createPlugin = (options, pmPluginFactoryParams, syncBlockStore, api) => {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
       init() {
         return {};
       },
-      apply: (tr, currentPluginState) => {
-        const meta = tr.getMeta(syncedBlockPluginKey);
-        if (meta) {
-          return meta;
-        }
+      apply: (_tr, currentPluginState) => {
         return currentPluginState;
       }
     },
     props: {
       nodeViews: {
         syncBlock: lazySyncBlockView({
-          config,
-          pmPluginFactoryParams
+          options,
+          pmPluginFactoryParams,
+          api
         })
       }
+    },
+    view: editorView => {
+      syncBlockStore.setEditorView(editorView);
+      return {
+        destroy() {
+          syncBlockStore.setEditorView(undefined);
+        }
+      };
+    },
+    filterTransaction: (tr, state) => {
+      // Ignore transactions that don't change the document
+      // or are from remote (collab) or already confirmed sync block deletion
+      // We only care about local changes that change the document
+      // and are not yet confirmed for sync block deletion
+      if (!tr.docChanged || !(syncBlockStore !== null && syncBlockStore !== void 0 && syncBlockStore.requireConfirmationBeforeDelete()) || Boolean(tr.getMeta('isRemote')) || Boolean(tr.getMeta('isConfirmedSyncBlockDeletion'))) {
+        return true;
+      }
+      const {
+        removed
+      } = trackSyncBlocks(syncBlockStore, tr, state);
+      if (removed.length > 0) {
+        // If there are source sync blocks being removed, and we need to confirm with user before deleting,
+        // we block the transaction here, and wait for user confirmation to proceed with deletion.
+        // See editor-common/src/sync-block/sync-block-store-manager.ts for how we handle user confirmation and
+        // proceed with deletion.
+        syncBlockStore.deleteSyncBlocksWithConfirmation(tr, removed);
+        return false;
+      }
+      return true;
     }
   });
 };

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

@@ -0,0 +1,50 @@
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+export const trackSyncBlocks = (storeManager, tr, state) => {
+  const sourceSyncBlockRemoved = {};
+  const sourceSyncBlockAdded = {};
+  tr.steps.map(step => {
+    if (step instanceof ReplaceStep || step instanceof ReplaceAroundStep) {
+      const {
+        from,
+        to
+      } = step;
+      // replaced a range, check for deleted syncBlock
+      if (from !== to) {
+        state.doc.nodesBetween(step.from, step.to, node => {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockAdded[node.attrs.localId]) {
+              // If a source block added and then removed in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockAdded[node.attrs.localId];
+            } else {
+              sourceSyncBlockRemoved[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+
+      // replaced content, check for inserted syncBlock
+      if (step.slice.content.size > 0) {
+        step.slice.content.nodesBetween(0, step.slice.content.size, node => {
+          if (storeManager.isSourceBlock(node)) {
+            if (sourceSyncBlockRemoved[node.attrs.localId]) {
+              // If a source block is removed and added back in the same transaction,
+              // we treat it as no-op.
+              delete sourceSyncBlockRemoved[node.attrs.localId];
+            } else {
+              sourceSyncBlockAdded[node.attrs.localId] = node.attrs;
+            }
+          }
+          // we don't need to go deeper
+          return false;
+        });
+      }
+    }
+  });
+  return {
+    removed: Object.values(sourceSyncBlockRemoved),
+    added: Object.values(sourceSyncBlockAdded)
+  };
+};

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

@@ -0,0 +1,7 @@
+import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export const findSyncBlock = (state, selection) => {
+  const {
+    syncBlock
+  } = state.schema.nodes;
+  return findSelectedNodeOfType(syncBlock)(selection || state.selection) || findParentNodeOfType(syncBlock)(selection || state.selection);
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -4,9 +4,11 @@ import { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
 import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
 import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
+import { ContentComponent } from './ui/ContentComponent';
 import { getToolbarConfig } from './ui/floating-toolbar';
 export const syncedBlockPlugin = ({
-  config
+  config,
+  api
 }) => {
   const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
@@ -20,7 +22,7 @@ export const syncedBlockPlugin = ({
     pmPlugins() {
       return [{
         name: 'syncedBlockPlugin',
-        plugin: params => createPlugin(config, params, syncBlockStore)
+        plugin: params => createPlugin(config, params, syncBlockStore, api)
       }];
     },
     pluginsOptions: {
@@ -38,7 +40,12 @@ export const syncedBlockPlugin = ({
           return createSyncedBlock(state);
         }
       }],
-      floatingToolbar: getToolbarConfig()
+      floatingToolbar: (state, intl, providerFactory) => getToolbarConfig(state, intl, config, providerFactory)
+    },
+    contentComponent: () => {
+      return /*#__PURE__*/React.createElement(ContentComponent, {
+        syncBlockStoreManager: syncBlockStore
+      });
     }
   };
 };

package/dist/es2019/ui/ContentComponent.js

@@ -0,0 +1,41 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Button from '@atlaskit/button/new';
+import ModalDialog, { ModalBody, ModalFooter, ModalHeader, ModalTitle, ModalTransition } from '@atlaskit/modal-dialog';
+export const ContentComponent = ({
+  syncBlockStoreManager
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const resolverRef = React.useRef(undefined);
+  const handleClose = useCallback(confirm => () => {
+    if (resolverRef.current) {
+      resolverRef.current(confirm);
+      resolverRef.current = undefined;
+    }
+    setIsOpen(false);
+  }, []);
+  const confirmationCallback = useCallback(() => {
+    setIsOpen(true);
+    const confirmedPromise = new Promise(resolve => {
+      resolverRef.current = resolve;
+    });
+    return confirmedPromise;
+  }, []);
+  useEffect(() => {
+    const unregister = syncBlockStoreManager.registerConfirmationCallback(confirmationCallback);
+    return () => {
+      unregister();
+    };
+  }, [syncBlockStoreManager, confirmationCallback]);
+  return /*#__PURE__*/React.createElement(ModalTransition, null, isOpen && /*#__PURE__*/React.createElement(ModalDialog, {
+    onClose: handleClose(false)
+  }, /*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseButton: true
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, "Confirmation")), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("div", null, "Are you sure you want to delete this synced block?")), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    onClick: handleClose(false)
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    appearance: "danger",
+    onClick: handleClose(true),
+    autoFocus: true
+  }, "Delete"))));
+};