@atlaskit/editor-plugin-synced-block 2.0.1 → 2.1.1

package/dist/esm/nodeviews/syncedBlock.js

@@ -4,97 +4,108 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
-/* 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 var defaultSyncBlockDocument = {
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
+import { SyncBlockEditorWrapper, SyncBlockEditorWrapperDataId } from '../ui/SyncBlockEditorWrapper';
+import { SyncBlockRendererWrapper } from '../ui/SyncBlockRendererWrapper';
+var 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.'
     }]
   }]
 };
-var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
-export var SyncBlockPluginComponent = function SyncBlockPluginComponent(_ref) {
-  var config = _ref.config,
-    dom = _ref.dom;
-  var innerEditorView = useRef(null);
-
-  /* Tmp solution to demonstrate the synced block renderer */
-  var _useState = useState(defaultSyncBlockDocument),
-    _useState2 = _slicedToArray(_useState, 2),
-    rendererDocument = _useState2[0],
-    setRendererDocument = _useState2[1];
-  var onChange = function onChange(editorView, _meta) {
-    var content = editorView.state.doc.toJSON().content;
-    var rendererDocument = {
-      version: 1,
-      type: 'doc',
-      content: content
-    };
-    setRendererDocument(rendererDocument);
-  };
-  var onEditorReady = function onEditorReady(_ref2) {
-    var editorView = _ref2.editorView;
-    innerEditorView.current = editorView || null;
-  };
-  var boundariesElement = useMemo(function () {
-    // 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
-  }));
+var defaultSyncBlockRendererDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a reference sync block. Stay tuned for updates...'
+    }]
+  }]
 };
 var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
-  function SyncBlock() {
+  function SyncBlock(props) {
+    var _this;
     _classCallCheck(this, SyncBlock);
-    return _callSuper(this, SyncBlock, arguments);
+    _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    var _props$node$attrs = props.node.attrs,
+      resourceId = _props$node$attrs.resourceId,
+      localId = _props$node$attrs.localId;
+    // Temporary solution to identify the source
+    _this.isSource = resourceId === localId;
+    _this.options = props.options;
+    return _this;
   }
   _inherits(SyncBlock, _ReactNodeView);
   return _createClass(SyncBlock, [{
     key: "createDomRef",
     value: function createDomRef() {
       var domRef = document.createElement('div');
-      domRef.setAttribute('style', 'border: purple solid 1px;');
       return domRef;
     }
+  }, {
+    key: "handleContentChanges",
+    value: function handleContentChanges(_updatedDoc) {
+      // write data
+    }
+  }, {
+    key: "setInnerEditorView",
+    value: function setInnerEditorView(_editorView) {
+      // set inner editor view
+    }
+  }, {
+    key: "renderEditor",
+    value: function renderEditor() {
+      var _this$options, _this$options2;
+      var 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
+      });
+    }
+  }, {
+    key: "renderRenderer",
+    value: function 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
+      var docNode = defaultSyncBlockRendererDocument;
+      return /*#__PURE__*/React.createElement(SyncBlockRendererWrapper, {
+        docNode: docNode,
+        getSyncedBlockRenderer: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockRenderer
+      });
+    }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(SyncBlockPluginComponent, {
-        config: this.reactComponentProps.config,
-        dom: this.dom
-      });
+      if (this.isSource) {
+        return this.renderEditor();
+      }
+      return this.renderRenderer();
     }
   }, {
     key: "stopEvent",
@@ -104,7 +115,17 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!target) {
         return false;
       }
-      return ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(SyncBlockEditorWrapperDataId, "\"]"))) != null;
+      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",
@@ -113,17 +134,40 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       (_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(_ref3) {
-  var config = _ref3.config,
-    pmPluginFactoryParams = _ref3.pmPluginFactoryParams;
+export var syncBlockNodeView = function syncBlockNodeView(_ref) {
+  var options = _ref.options,
+    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+    api = _ref.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-    var reactComponentProps = {
-      config: config
-    };
-    return new SyncBlock(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+    return new SyncBlock({
+      api: api,
+      options: options,
+      node: node,
+      view: view,
+      getPos: getPos,
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher
+    }).init();
   };
 };

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

@@ -1,19 +1,32 @@
+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';
-var getRandomId = function getRandomId() {
-  if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
-    return new Date().toISOString();
-  }
-  return globalThis.crypto.randomUUID();
-};
 export var createSyncedBlock = function createSyncedBlock(state) {
+  var id = uuid();
   var tr = state.tr;
   // const { breakout } = state.schema.marks;
   var 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 var copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
+  var schema = state.schema,
+    selection = state.selection;
+  if (selection instanceof NodeSelection) {
+    var nodeType = selection.node.type;
+    var 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/esm/pm-plugins/main.js

@@ -5,7 +5,7 @@ export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export var createPlugin = function createPlugin(config, pmPluginFactoryParams) {
+export var createPlugin = function createPlugin(options, pmPluginFactoryParams, _syncBlockStore, api) {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -23,8 +23,9 @@ export var createPlugin = function createPlugin(config, pmPluginFactoryParams) {
     props: {
       nodeViews: {
         syncBlock: lazySyncBlockView({
-          config: config,
-          pmPluginFactoryParams: pmPluginFactoryParams
+          options: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api
         })
       }
     }

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

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

package/dist/esm/syncedBlockPlugin.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { syncBlock } from '@atlaskit/adf-schema';
+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 { getToolbarConfig } from './ui/floating-toolbar';
 export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
-  var config = _ref.config;
+  var config = _ref.config,
+    api = _ref.api;
+  var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
     name: 'syncedBlock',
     nodes: function nodes() {
@@ -18,7 +21,7 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
       return [{
         name: 'syncedBlockPlugin',
         plugin: function plugin(params) {
-          return createPlugin(config, params);
+          return createPlugin(config, params, syncBlockStore, api);
         }
       }];
     },
@@ -41,7 +44,9 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
           }
         }];
       },
-      floatingToolbar: getToolbarConfig()
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return getToolbarConfig(state, intl, config, providerFactory);
+      }
     }
   };
 };

package/dist/esm/ui/SyncBlockEditorWrapper.js

@@ -0,0 +1,31 @@
+import React from 'react';
+export var 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.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);
+      }
+    }))
+  );
+};
+export var SyncBlockEditorWrapper = /*#__PURE__*/React.memo(SyncBlockEditorWrapperComponent);

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -0,0 +1,19 @@
+import React from '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.createElement("div", {
+      "data-testid": SyncBlockRendererWrapperDataId,
+      style: {
+        border: 'blue solid 1px'
+      }
+    }, getSyncedBlockRenderer({
+      docNode: docNode
+    }))
+  );
+};
+export var SyncBlockRendererWrapper = /*#__PURE__*/React.memo(SyncBlockRendererWrapperComponent);

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

@@ -1,5 +1,59 @@
-export var getToolbarConfig = function getToolbarConfig() {
-  return function (_state, _intl) {
-    return undefined;
+import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import CopyIcon from '@atlaskit/icon/core/copy';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import { copySyncedBlockReferenceToClipboard } from '../pm-plugins/actions';
+import { findSyncBlock } from '../pm-plugins/utils/utils';
+export var 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 = findSyncBlock(state);
+  if (!syncBlockObject) {
+    return;
+  }
+  var nodeType = state.schema.nodes.syncBlock;
+  var items = [];
+  var copyButton = {
+    id: 'editor.syncedBlock.copy',
+    type: 'button',
+    appearance: 'subtle',
+    icon: CopyIcon,
+    title: 'Copy',
+    showTitle: true,
+    tooltipContent: 'Copy reference to clipboard',
+    onClick: copySyncedBlockReferenceToClipboard
+  };
+  items.push(copyButton);
+  if (syncBlockObject.node.attrs.resourceId !== syncBlockObject.node.attrs.localId) {
+    var editSourceButton = {
+      id: 'editor.syncedBlock.editSource',
+      type: 'button',
+      appearance: 'subtle',
+      icon: LinkExternalIcon,
+      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 = 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/types/nodeviews/syncedBlock.d.ts

@@ -1,28 +1,42 @@
 import React from 'react';
-import type { DocNode } from '@atlaskit/adf-schema';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
-import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+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';
+import type { ReactComponentProps } 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 { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
-export type SyncBlockNodeViewProps = {
-    config: SyncedBlockPluginOptions | undefined;
-};
-export declare const defaultSyncBlockDocument: DocNode;
-export declare const SyncBlockPluginComponent: ({ config, dom, }: {
-    config: SyncedBlockPluginOptions | undefined;
-    dom: HTMLElement;
-}) => React.JSX.Element | null;
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export interface SyncBlockNodeViewProps extends ReactComponentProps {
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    eventDispatcher: EventDispatcher;
+    getPos: getPosHandler;
+    isNodeNested?: boolean;
+    node: PMNode;
+    options: SyncedBlockPluginOptions | undefined;
+    portalProviderAPI: PortalProviderAPI;
+    view: EditorView;
+}
 declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
+    private isSource;
+    private options;
+    constructor(props: SyncBlockNodeViewProps);
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
-    render(): React.JSX.Element;
+    private handleContentChanges;
+    private setInnerEditorView;
+    private renderEditor;
+    private renderRenderer;
+    render(): React.JSX.Element | null;
     stopEvent(event: Event): boolean;
+    selectNode(): void;
     destroy(): void;
+    private selectSyncBlockNode;
 }
 export interface SyncBlockNodeViewProperties {
-    config: SyncedBlockPluginOptions | undefined;
+    api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    options: SyncedBlockPluginOptions | undefined;
     pmPluginFactoryParams: PMPluginFactoryParams;
 }
-export declare const syncBlockNodeView: ({ config, pmPluginFactoryParams }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
+export declare const syncBlockNodeView: ({ options, pmPluginFactoryParams, api }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
 export {};

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

@@ -1,2 +1,4 @@
-import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { Command } from '@atlaskit/editor-common/types';
+import { type EditorState, type Transaction } from '@atlaskit/editor-prosemirror/state';
 export declare const createSyncedBlock: (state: EditorState) => Transaction;
+export declare const copySyncedBlockReferenceToClipboard: Command;

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

@@ -1,8 +1,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+import type { SyncedBlockPlugin, SyncedBlockPluginOptions } from '../syncedBlockPluginType';
 export declare const syncedBlockPluginKey: PluginKey<any>;
 type SyncedBlockPluginState = {};
-export declare const createPlugin: (config: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams) => SafePlugin<SyncedBlockPluginState>;
+export declare const createPlugin: (options: SyncedBlockPluginOptions | undefined, pmPluginFactoryParams: PMPluginFactoryParams, _syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => SafePlugin<SyncedBlockPluginState>;
 export {};

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

@@ -0,0 +1,3 @@
+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>>;

package/dist/types/syncedBlockPluginType.d.ts

@@ -1,12 +1,12 @@
 import type { DocNode } from '@atlaskit/adf-schema';
 import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { SyncBlockDataProvider } from '@atlaskit/editor-common/sync-block';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
 import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
 import type { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
 export type SyncedBlockEditorProps = {
-    boundariesElement: HTMLElement;
     defaultDocument: JSONDocNode;
-    mountPoint: HTMLElement;
     onChange: (editorView: EditorView, meta: {
         /**
          * Indicates whether or not the change may be unnecessary to listen to (dirty
@@ -24,14 +24,18 @@ export type SyncedBlockEditorProps = {
         editorView: EditorView;
         eventDispatcher: EventDispatcher;
     }) => void;
+    popupsBoundariesElement: HTMLElement;
+    popupsMountPoint: HTMLElement;
 };
 export type SyncedBlockRendererProps = {
     docNode: DocNode;
 };
 export type SyncedBlockPluginOptions = {
+    dataProvider?: SyncBlockDataProvider;
     getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
     getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
 };
 export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
+    dependencies: [SelectionPlugin];
     pluginConfiguration: SyncedBlockPluginOptions | undefined;
 }>;

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { SyncedBlockRendererProps } from '../syncedBlockPluginType';
+type Props = {
+    docNode: DocNode;
+    getSyncedBlockRenderer: (props: SyncedBlockRendererProps) => React.JSX.Element;
+};
+export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ getSyncedBlockRenderer, docNode }: Props) => React.JSX.Element>;
+export {};

package/dist/types/ui/floating-toolbar.d.ts

@@ -1,2 +1,6 @@
-import type { FloatingToolbarHandler } from '@atlaskit/editor-common/types';
-export declare const getToolbarConfig: () => FloatingToolbarHandler;
+import type { IntlShape } from 'react-intl-next';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { EditorState } from '@atlaskit/editor-prosemirror/dist/types/state';
+import type { SyncedBlockPluginOptions } from '../syncedBlockPluginType';
+export declare const getToolbarConfig: (state: EditorState, _intl: IntlShape, _options: SyncedBlockPluginOptions | undefined, _providerFactory: ProviderFactory) => FloatingToolbarConfig | undefined;