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

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

@@ -1,13 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { SyncClient } from './SyncClient';
-import { findSyncedBlockParent } from './utils';
+import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export const createPlugin = () => {
-  const syncClient = new SyncClient();
+export const createPlugin = (config, pmPluginFactoryParams) => {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -15,33 +13,20 @@ export const createPlugin = () => {
         return {};
       },
       apply: (tr, currentPluginState) => {
-        if (tr.docChanged) {
-          const $pos = tr.selection.$from;
-          const syncedBlockParent = findSyncedBlockParent($pos);
-          if (syncedBlockParent) {
-            const {
-              node,
-              attributes
-            } = syncedBlockParent;
-            const {
-              sourceDocumentAri,
-              contentAri,
-              contentPropertyKey
-            } = attributes.parameters;
-            syncClient.syncContent({
-              sourceDocumentAri,
-              contentAri,
-              contentPropertyKey,
-              node
-            });
-          }
-        }
         const meta = tr.getMeta(syncedBlockPluginKey);
         if (meta) {
           return meta;
         }
         return currentPluginState;
       }
+    },
+    props: {
+      nodeViews: {
+        syncBlock: lazySyncBlockView({
+          config,
+          pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -1,17 +1,40 @@
 import React from 'react';
+import { syncBlock } from '@atlaskit/adf-schema';
+import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
+import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
-import { GlobalStylesWrapper } from './ui/extensions/synced-block/components/GlobalStyles';
-export const syncedBlockPlugin = () => {
-  return {
-    name: 'syncedBlock',
-    pmPlugins() {
-      return [{
-        name: 'syncedBlockPlugin',
-        plugin: createPlugin
-      }];
-    },
-    contentComponent() {
-      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
-    }
-  };
-};
+import { getToolbarConfig } from './ui/floating-toolbar';
+export const syncedBlockPlugin = ({
+  config
+}) => ({
+  name: 'syncedBlock',
+  nodes() {
+    return [{
+      name: 'syncBlock',
+      node: syncBlock
+    }];
+  },
+  pmPlugins() {
+    return [{
+      name: 'syncedBlockPlugin',
+      plugin: params => createPlugin(config, params)
+    }];
+  },
+  pluginsOptions: {
+    quickInsert: () => [{
+      id: 'syncBlock',
+      title: 'Synced Block',
+      description: 'Create a synced block',
+      priority: 800,
+      keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block'],
+      keyshortcut: '',
+      icon: () => /*#__PURE__*/React.createElement(SmartLinkIcon, {
+        label: "Synced Block"
+      }),
+      action: (_insert, state) => {
+        return createSyncedBlock(state);
+      }
+    }],
+    floatingToolbar: getToolbarConfig()
+  }
+});

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

@@ -0,0 +1,3 @@
+export const getToolbarConfig = () => (_state, _intl) => {
+  return undefined;
+};

package/dist/esm/nodeviews/lazySyncedBlock.js

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

package/dist/esm/nodeviews/syncedBlock.js

@@ -0,0 +1,129 @@
+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 _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 ReactNodeView from '@atlaskit/editor-common/react-node-view';
+export var defaultSyncBlockDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a synced block. Edit the source 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 SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
+  function SyncBlock() {
+    _classCallCheck(this, SyncBlock);
+    return _callSuper(this, SyncBlock, arguments);
+  }
+  _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: "render",
+    value: function render() {
+      return /*#__PURE__*/React.createElement(SyncBlockPluginComponent, {
+        config: this.reactComponentProps.config,
+        dom: this.dom
+      });
+    }
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      var _target$closest;
+      var 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=\"".concat(SyncBlockEditorWrapperDataId, "\"]"))) != null;
+    }
+  }, {
+    key: "destroy",
+    value: function destroy() {
+      var _this$unsubscribe;
+      (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      _superPropGet(SyncBlock, "destroy", this, 3)([]);
+    }
+  }]);
+}(ReactNodeView);
+export var syncBlockNodeView = function syncBlockNodeView(_ref3) {
+  var config = _ref3.config,
+    pmPluginFactoryParams = _ref3.pmPluginFactoryParams;
+  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();
+  };
+};

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

@@ -0,0 +1,19 @@
+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 tr = state.tr;
+  // const { breakout } = state.schema.marks;
+  var node = state.schema.nodes.syncBlock.createChecked({
+    resourceId: getRandomId(),
+    localId: getRandomId()
+  }, null
+  // [breakout.create({ mode: 'wide' })],
+  );
+  safeInsert(node)(tr);
+  return tr;
+};

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

@@ -1,13 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { SyncClient } from './SyncClient';
-import { findSyncedBlockParent } from './utils';
+import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 export var syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export var createPlugin = function createPlugin() {
-  var syncClient = new SyncClient();
+export var createPlugin = function createPlugin(config, pmPluginFactoryParams) {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -15,30 +13,20 @@ export var createPlugin = function createPlugin() {
         return {};
       },
       apply: function apply(tr, currentPluginState) {
-        if (tr.docChanged) {
-          var $pos = tr.selection.$from;
-          var syncedBlockParent = findSyncedBlockParent($pos);
-          if (syncedBlockParent) {
-            var node = syncedBlockParent.node,
-              attributes = syncedBlockParent.attributes;
-            var _attributes$parameter = attributes.parameters,
-              sourceDocumentAri = _attributes$parameter.sourceDocumentAri,
-              contentAri = _attributes$parameter.contentAri,
-              contentPropertyKey = _attributes$parameter.contentPropertyKey;
-            syncClient.syncContent({
-              sourceDocumentAri: sourceDocumentAri,
-              contentAri: contentAri,
-              contentPropertyKey: contentPropertyKey,
-              node: node
-            });
-          }
-        }
         var meta = tr.getMeta(syncedBlockPluginKey);
         if (meta) {
           return meta;
         }
         return currentPluginState;
       }
+    },
+    props: {
+      nodeViews: {
+        syncBlock: lazySyncBlockView({
+          config: config,
+          pmPluginFactoryParams: pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/esm/syncedBlockPlugin.js

@@ -1,17 +1,47 @@
 import React from 'react';
+import { syncBlock } from '@atlaskit/adf-schema';
+import SmartLinkIcon from '@atlaskit/icon/core/smart-link';
+import { createSyncedBlock } from './pm-plugins/actions';
 import { createPlugin } from './pm-plugins/main';
-import { GlobalStylesWrapper } from './ui/extensions/synced-block/components/GlobalStyles';
-export var syncedBlockPlugin = function syncedBlockPlugin() {
+import { getToolbarConfig } from './ui/floating-toolbar';
+export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var config = _ref.config;
   return {
     name: 'syncedBlock',
+    nodes: function nodes() {
+      return [{
+        name: 'syncBlock',
+        node: syncBlock
+      }];
+    },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'syncedBlockPlugin',
-        plugin: createPlugin
+        plugin: function plugin(params) {
+          return createPlugin(config, params);
+        }
       }];
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/React.createElement(GlobalStylesWrapper, null);
+    pluginsOptions: {
+      quickInsert: function quickInsert() {
+        return [{
+          id: 'syncBlock',
+          title: 'Synced Block',
+          description: 'Create a synced block',
+          priority: 800,
+          keywords: ['synced', 'block', 'synced-block', 'sync', 'sync-block'],
+          keyshortcut: '',
+          icon: function icon() {
+            return /*#__PURE__*/React.createElement(SmartLinkIcon, {
+              label: "Synced Block"
+            });
+          },
+          action: function action(_insert, state) {
+            return createSyncedBlock(state);
+          }
+        }];
+      },
+      floatingToolbar: getToolbarConfig()
     }
   };
 };

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

@@ -0,0 +1,5 @@
+export var getToolbarConfig = function getToolbarConfig() {
+  return function (_state, _intl) {
+    return undefined;
+  };
+};

package/dist/types/index.d.ts

@@ -1,3 +1,2 @@
 export { syncedBlockPlugin } from './syncedBlockPlugin';
-export type { SyncedBlockPlugin } from './syncedBlockPluginType';
-export type { SyncedBlockPluginOptions } from './types';
+export type { SyncedBlockPlugin, SyncedBlockPluginOptions, SyncedBlockEditorProps, SyncedBlockRendererProps, } from './syncedBlockPluginType';

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

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

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

@@ -0,0 +1,28 @@
+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 { 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;
+declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
+    createDomRef(): HTMLElement;
+    render(): React.JSX.Element;
+    stopEvent(event: Event): boolean;
+    destroy(): void;
+}
+export interface SyncBlockNodeViewProperties {
+    config: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+}
+export declare const syncBlockNodeView: ({ config, pmPluginFactoryParams }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
+export {};

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

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

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

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

package/dist/types/syncedBlockPluginType.d.ts

@@ -1,2 +1,37 @@
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock'>;
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+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
+         * changes can generally be ignored).
+         *
+         * This might be changes to media attributes for example when it gets updated
+         * due to initial setup.
+         *
+         * We still fire these events however to avoid a breaking change.
+         */
+        isDirtyChange: boolean;
+        source: 'local' | 'remote';
+    }) => void;
+    onEditorReady: ({ editorView, eventDispatcher, }: {
+        editorView: EditorView;
+        eventDispatcher: EventDispatcher;
+    }) => void;
+};
+export type SyncedBlockRendererProps = {
+    docNode: DocNode;
+};
+export type SyncedBlockPluginOptions = {
+    getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
+    getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
+};
+export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
+    pluginConfiguration: SyncedBlockPluginOptions | undefined;
+}>;

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

@@ -0,0 +1,2 @@
+import type { FloatingToolbarHandler } from '@atlaskit/editor-common/types';
+export declare const getToolbarConfig: () => FloatingToolbarHandler;

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,2 @@
 export { syncedBlockPlugin } from './syncedBlockPlugin';
-export type { SyncedBlockPlugin } from './syncedBlockPluginType';
-export type { SyncedBlockPluginOptions } from './types';
+export type { SyncedBlockPlugin, SyncedBlockPluginOptions, SyncedBlockEditorProps, SyncedBlockRendererProps, } from './syncedBlockPluginType';

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

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

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

@@ -0,0 +1,28 @@
+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 { 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;
+declare class SyncBlock extends ReactNodeView<SyncBlockNodeViewProps> {
+    unsubscribe: (() => void) | undefined;
+    createDomRef(): HTMLElement;
+    render(): React.JSX.Element;
+    stopEvent(event: Event): boolean;
+    destroy(): void;
+}
+export interface SyncBlockNodeViewProperties {
+    config: SyncedBlockPluginOptions | undefined;
+    pmPluginFactoryParams: PMPluginFactoryParams;
+}
+export declare const syncBlockNodeView: ({ config, pmPluginFactoryParams }: SyncBlockNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => SyncBlock;
+export {};

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

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

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

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

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -1,2 +1,37 @@
+import type { DocNode } from '@atlaskit/adf-schema';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
-export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock'>;
+import type { JSONDocNode } from '@atlaskit/editor-json-transformer';
+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
+         * changes can generally be ignored).
+         *
+         * This might be changes to media attributes for example when it gets updated
+         * due to initial setup.
+         *
+         * We still fire these events however to avoid a breaking change.
+         */
+        isDirtyChange: boolean;
+        source: 'local' | 'remote';
+    }) => void;
+    onEditorReady: ({ editorView, eventDispatcher, }: {
+        editorView: EditorView;
+        eventDispatcher: EventDispatcher;
+    }) => void;
+};
+export type SyncedBlockRendererProps = {
+    docNode: DocNode;
+};
+export type SyncedBlockPluginOptions = {
+    getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
+    getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
+};
+export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
+    pluginConfiguration: SyncedBlockPluginOptions | undefined;
+}>;

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

@@ -0,0 +1,2 @@
+import type { FloatingToolbarHandler } from '@atlaskit/editor-common/types';
+export declare const getToolbarConfig: () => FloatingToolbarHandler;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "1.0.0",
+	"version": "2.0.1",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,18 +28,14 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.2.3",
-		"@atlaskit/adf-utils": "^19.21.0",
-		"@atlaskit/editor-json-transformer": "^8.27.0",
+		"@atlaskit/adf-schema": "^51.1.2",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/icon": "^28.1.0",
-		"@atlaskit/renderer": "^121.0.0",
-		"@atlaskit/tokens": "^6.1.0",
+		"@atlaskit/icon": "28.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1"
+		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^108.0.0",
+		"@atlaskit/editor-common": "^109.7.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {

package/SyncedBlock/package.json

@@ -1,15 +0,0 @@
-{
-  "name": "@atlaskit/editor-plugin-synced-block/SyncedBlock",
-  "main": "../dist/cjs/ui/extensions/synced-block/index.js",
-  "module": "../dist/esm/ui/extensions/synced-block/index.js",
-  "module:es2019": "../dist/es2019/ui/extensions/synced-block/index.js",
-  "sideEffects": false,
-  "types": "../dist/types/ui/extensions/synced-block/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/ui/extensions/synced-block/index.d.ts"
-      ]
-    }
-  }
-}