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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 2.1.0
+
+### Minor Changes
+
+- [`2ce1b7efe1d2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2ce1b7efe1d2e) -
+  EDITOR-1640 Create Sync-Block data manager scaffolding
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.0.1
+
+### Patch Changes
+
+- [`1a1f634a70d97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a1f634a70d97) -
+  Added Sync Block Editor and Sync Block Renderer
+- Updated dependencies
+
 ## 2.0.0
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-cc/tsconfig.json"
 		}

package/afm-dev-agents/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-dev-agents/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-dev-agents/tsconfig.json"
 		}

package/afm-jira/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-jira/tsconfig.json"
 		}

package/afm-passionfruit/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-passionfruit/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-passionfruit/tsconfig.json"
 		}

package/afm-post-office/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-post-office/tsconfig.json"
 		}

package/afm-rovo-extension/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-rovo-extension/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-rovo-extension/tsconfig.json"
 		}

package/afm-townsquare/tsconfig.json

@@ -22,6 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
+		{
+			"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
+		},
 		{
 			"path": "../../editor-common/afm-townsquare/tsconfig.json"
 		}

package/dist/cjs/nodeviews/lazySyncedBlock.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazySyncBlockView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+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" != (0, _typeof2.default)(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 lazySyncBlockView = exports.lazySyncBlockView = function lazySyncBlockView(props) {
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'syncBlock',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-synced-block-nodeview" */
+        './syncedBlock'));
+      }).then(function (_ref) {
+        var syncBlockNodeView = _ref.syncBlockNodeView;
+        return syncBlockNodeView(props);
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/nodeviews/syncedBlock.js

@@ -1,20 +1,137 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSyncedBlockNodeView = void 0;
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+exports.syncBlockNodeView = exports.defaultSyncBlockDocument = exports.SyncBlockPluginComponent = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var SyncedBlockNodeView = /*#__PURE__*/(0, _createClass2.default)(function SyncedBlockNodeView(node, view, getPos) {
-  (0, _classCallCheck2.default)(this, SyncedBlockNodeView);
-  this.node = node;
-  this.view = view;
-  this.getPos = getPos;
-});
-var getSyncedBlockNodeView = exports.getSyncedBlockNodeView = function getSyncedBlockNodeView() {
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+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); }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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 = (0, _get2.default)((0, _getPrototypeOf2.default)(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 */
+var defaultSyncBlockDocument = exports.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';
+var SyncBlockPluginComponent = exports.SyncBlockPluginComponent = function SyncBlockPluginComponent(_ref) {
+  var config = _ref.config,
+    dom = _ref.dom;
+  var innerEditorView = (0, _react.useRef)(null);
+
+  /* Tmp solution to demonstrate the synced block renderer */
+  var _useState = (0, _react.useState)(defaultSyncBlockDocument),
+    _useState2 = (0, _slicedToArray2.default)(_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 = (0, _react.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.default.createElement("div", {
+    "data-testid": SyncBlockEditorWrapperDataId
+  }, config.getSyncedBlockEditor({
+    boundariesElement: boundariesElement,
+    defaultDocument: defaultSyncBlockDocument,
+    mountPoint: dom,
+    onChange: onChange,
+    onEditorReady: onEditorReady
+  }), /*#__PURE__*/_react.default.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() {
+    (0, _classCallCheck2.default)(this, SyncBlock);
+    return _callSuper(this, SyncBlock, arguments);
+  }
+  (0, _inherits2.default)(SyncBlock, _ReactNodeView);
+  return (0, _createClass2.default)(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.default.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.default);
+var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref3) {
+  var config = _ref3.config,
+    pmPluginFactoryParams = _ref3.pmPluginFactoryParams;
   return function (node, view, getPos) {
-    return new SyncedBlockNodeView(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/cjs/pm-plugins/actions.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createSyncedBlock = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var getRandomId = function getRandomId() {
+  if (!globalThis.crypto || typeof globalThis.crypto.randomUUID !== 'function') {
+    return new Date().toISOString();
+  }
+  return globalThis.crypto.randomUUID();
+};
+var createSyncedBlock = exports.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' })],
+  );
+  (0, _utils.safeInsert)(node)(tr);
+  return tr;
+};

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

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.syncedBlockPluginKey = exports.createPlugin = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _lazySyncedBlock = require("../nodeviews/lazySyncedBlock");
 var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-var createPlugin = exports.createPlugin = function createPlugin() {
+var createPlugin = exports.createPlugin = function createPlugin(config, pmPluginFactoryParams, _syncBlockStore) {
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -24,6 +25,14 @@ var createPlugin = exports.createPlugin = function createPlugin() {
         }
         return currentPluginState;
       }
+    },
+    props: {
+      nodeViews: {
+        syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
+          config: config,
+          pmPluginFactoryParams: pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -1,27 +1,55 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.syncedBlockPlugin = void 0;
-var _syncedBlock = require("./nodeviews/syncedBlock");
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+var _smartLink = _interopRequireDefault(require("@atlaskit/icon/core/smart-link"));
+var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
 var _floatingToolbar = require("./ui/floating-toolbar");
-var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin() {
+var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var config = _ref.config;
+  var syncBlockStore = new _syncBlock.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
     name: 'syncedBlock',
-    props: {
-      nodeViews: {
-        syncedBlock: (0, _syncedBlock.getSyncedBlockNodeView)()
-      }
+    nodes: function nodes() {
+      return [{
+        name: 'syncBlock',
+        node: _adfSchema.syncBlock
+      }];
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'syncedBlockPlugin',
-        plugin: _main.createPlugin
+        plugin: function plugin(params) {
+          return (0, _main.createPlugin)(config, params, syncBlockStore);
+        }
       }];
     },
     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.default.createElement(_smartLink.default, {
+              label: "Synced Block"
+            });
+          },
+          action: function action(_insert, state) {
+            return (0, _actions.createSyncedBlock)(state);
+          }
+        }];
+      },
       floatingToolbar: (0, _floatingToolbar.getToolbarConfig)()
     }
   };

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

@@ -1,39 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getToolbarConfig = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var basicButton = function basicButton(formatMessage) {
-  return [{
-    id: 'placeholder',
-    type: 'button',
-    onClick: function onClick() {
-      return true;
-    },
-    title: formatMessage({
-      id: 'placeholder',
-      defaultMessage: 'Message',
-      description: 'Placeholder description.'
-    })
-  }];
-};
 var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
-  return function (state, intl) {
-    var formatMessage = intl.formatMessage;
-
-    // placeholder nodeType
-    var nodeType = [state.schema.nodes.paragraph];
-    var basicButtonArray = basicButton(formatMessage);
-    return {
-      title: 'Floating controls',
-      nodeType: nodeType,
-      items: [].concat((0, _toConsumableArray2.default)(basicButtonArray), [{
-        type: 'separator'
-      }]),
-      scrollable: true
-    };
+  return function (_state, _intl) {
+    return undefined;
   };
 };

package/dist/es2019/nodeviews/lazySyncedBlock.js

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

package/dist/es2019/nodeviews/syncedBlock.js

@@ -1,10 +1,105 @@
-class SyncedBlockNodeView {
-  constructor(node, view, getPos) {
-    this.node = node;
-    this.view = view;
-    this.getPos = getPos;
+/* 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 const defaultSyncBlockDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a synced block. Edit the source 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
+  }));
+};
+class SyncBlock extends ReactNodeView {
+  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
+    });
+  }
+  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;
+  }
+  destroy() {
+    var _this$unsubscribe;
+    (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+    super.destroy();
   }
 }
-export const getSyncedBlockNodeView = () => (node, view, getPos) => {
-  return new SyncedBlockNodeView(node, view, getPos);
+export const syncBlockNodeView = ({
+  config,
+  pmPluginFactoryParams
+}) => (node, view, getPos) => {
+  const {
+    portalProviderAPI,
+    eventDispatcher
+  } = pmPluginFactoryParams;
+  const reactComponentProps = {
+    config
+  };
+  return new SyncBlock(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
 };

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

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

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

@@ -1,10 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { lazySyncBlockView } from '../nodeviews/lazySyncedBlock';
 export const syncedBlockPluginKey = new PluginKey('syncedBlockPlugin');
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-export const createPlugin = () => {
+export const createPlugin = (config, pmPluginFactoryParams, _syncBlockStore) => {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -18,6 +19,14 @@ export const createPlugin = () => {
         }
         return currentPluginState;
       }
+    },
+    props: {
+      nodeViews: {
+        syncBlock: lazySyncBlockView({
+          config,
+          pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/es2019/syncedBlockPlugin.js

@@ -1,20 +1,44 @@
-import { getSyncedBlockNodeView } from './nodeviews/syncedBlock';
+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 const syncedBlockPlugin = () => ({
-  name: 'syncedBlock',
-  props: {
-    nodeViews: {
-      syncedBlock: getSyncedBlockNodeView()
+export const syncedBlockPlugin = ({
+  config
+}) => {
+  const syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
+  return {
+    name: 'syncedBlock',
+    nodes() {
+      return [{
+        name: 'syncBlock',
+        node: syncBlock
+      }];
+    },
+    pmPlugins() {
+      return [{
+        name: 'syncedBlockPlugin',
+        plugin: params => createPlugin(config, params, syncBlockStore)
+      }];
+    },
+    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()
     }
-  },
-  pmPlugins() {
-    return [{
-      name: 'syncedBlockPlugin',
-      plugin: createPlugin
-    }];
-  },
-  pluginsOptions: {
-    floatingToolbar: getToolbarConfig()
-  }
-});
+  };
+};

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

@@ -1,31 +1,3 @@
-const basicButton = formatMessage => {
-  return [{
-    id: 'placeholder',
-    type: 'button',
-    onClick: () => {
-      return true;
-    },
-    title: formatMessage({
-      id: 'placeholder',
-      defaultMessage: 'Message',
-      description: 'Placeholder description.'
-    })
-  }];
-};
-export const getToolbarConfig = () => (state, intl) => {
-  const {
-    formatMessage
-  } = intl;
-
-  // placeholder nodeType
-  const nodeType = [state.schema.nodes.paragraph];
-  const basicButtonArray = basicButton(formatMessage);
-  return {
-    title: 'Floating controls',
-    nodeType,
-    items: [...basicButtonArray, {
-      type: 'separator'
-    }],
-    scrollable: true
-  };
+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

@@ -1,13 +1,129 @@
-import _createClass from "@babel/runtime/helpers/createClass";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-var SyncedBlockNodeView = /*#__PURE__*/_createClass(function SyncedBlockNodeView(node, view, getPos) {
-  _classCallCheck(this, SyncedBlockNodeView);
-  this.node = node;
-  this.view = view;
-  this.getPos = getPos;
-});
-export var getSyncedBlockNodeView = function getSyncedBlockNodeView() {
+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) {
-    return new SyncedBlockNodeView(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,10 +1,11 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+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() {
+export var createPlugin = function createPlugin(config, pmPluginFactoryParams, _syncBlockStore) {
   return new SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -18,6 +19,14 @@ export var createPlugin = function createPlugin() {
         }
         return currentPluginState;
       }
+    },
+    props: {
+      nodeViews: {
+        syncBlock: lazySyncBlockView({
+          config: config,
+          pmPluginFactoryParams: pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/esm/syncedBlockPlugin.js

@@ -1,21 +1,48 @@
-import { getSyncedBlockNodeView } from './nodeviews/syncedBlock';
+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() {
+export var syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var config = _ref.config;
+  var syncBlockStore = new SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
     name: 'syncedBlock',
-    props: {
-      nodeViews: {
-        syncedBlock: getSyncedBlockNodeView()
-      }
+    nodes: function nodes() {
+      return [{
+        name: 'syncBlock',
+        node: syncBlock
+      }];
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'syncedBlockPlugin',
-        plugin: createPlugin
+        plugin: function plugin(params) {
+          return createPlugin(config, params, syncBlockStore);
+        }
       }];
     },
     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

@@ -1,32 +1,5 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-var basicButton = function basicButton(formatMessage) {
-  return [{
-    id: 'placeholder',
-    type: 'button',
-    onClick: function onClick() {
-      return true;
-    },
-    title: formatMessage({
-      id: 'placeholder',
-      defaultMessage: 'Message',
-      description: 'Placeholder description.'
-    })
-  }];
-};
 export var getToolbarConfig = function getToolbarConfig() {
-  return function (state, intl) {
-    var formatMessage = intl.formatMessage;
-
-    // placeholder nodeType
-    var nodeType = [state.schema.nodes.paragraph];
-    var basicButtonArray = basicButton(formatMessage);
-    return {
-      title: 'Floating controls',
-      nodeType: nodeType,
-      items: [].concat(_toConsumableArray(basicButtonArray), [{
-        type: 'separator'
-      }]),
-      scrollable: true
-    };
+  return function (_state, _intl) {
+    return undefined;
   };
 };

package/dist/types/index.d.ts

@@ -1,2 +1,2 @@
 export { syncedBlockPlugin } from './syncedBlockPlugin';
-export type { SyncedBlockPlugin } from './syncedBlockPluginType';
+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

@@ -1,11 +1,28 @@
-import type { getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
+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';
-declare class SyncedBlockNodeView {
-    node: PMNode;
-    view: EditorView;
-    getPos: getPosHandlerNode;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode);
+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 declare const getSyncedBlockNodeView: () => (node: PMNode, view: EditorView, getPos: getPosHandler) => SyncedBlockNodeView;
+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,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+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, _syncBlockStore: SyncBlockStoreManager) => SafePlugin<SyncedBlockPluginState>;
 export {};

package/dist/types/syncedBlockPluginType.d.ts

@@ -1,2 +1,39 @@
+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';
-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 = {
+    dataProvider?: SyncBlockDataProvider;
+    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/index.d.ts

@@ -1,2 +1,2 @@
 export { syncedBlockPlugin } from './syncedBlockPlugin';
-export type { SyncedBlockPlugin } from './syncedBlockPluginType';
+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

@@ -1,11 +1,28 @@
-import type { getPosHandler, getPosHandlerNode } from '@atlaskit/editor-common/types';
+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';
-declare class SyncedBlockNodeView {
-    node: PMNode;
-    view: EditorView;
-    getPos: getPosHandlerNode;
-    constructor(node: PMNode, view: EditorView, getPos: getPosHandlerNode);
+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 declare const getSyncedBlockNodeView: () => (node: PMNode, view: EditorView, getPos: getPosHandler) => SyncedBlockNodeView;
+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,9 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import type { SyncBlockStoreManager } from '@atlaskit/editor-common/sync-block';
+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, _syncBlockStore: SyncBlockStoreManager) => SafePlugin<SyncedBlockPluginState>;
 export {};

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

@@ -1,2 +1,39 @@
+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';
-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 = {
+    dataProvider?: SyncBlockDataProvider;
+    getSyncedBlockEditor?: (props: SyncedBlockEditorProps) => React.JSX.Element;
+    getSyncedBlockRenderer?: (props: SyncedBlockRendererProps) => React.JSX.Element;
+};
+export type SyncedBlockPlugin = NextEditorPlugin<'syncedBlock', {
+    pluginConfiguration: SyncedBlockPluginOptions | undefined;
+}>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "2.0.0",
+	"version": "2.1.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,12 +28,14 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
+		"@atlaskit/adf-schema": "^51.1.2",
 		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/icon": "28.2.0",
 		"@babel/runtime": "^7.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.0.0",
+		"@atlaskit/editor-common": "^109.8.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {