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

package/CHANGELOG.md

@@ -1,33 +1,25 @@
 # @atlaskit/editor-plugin-synced-block
 
-## 1.0.0
+## 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
 
-## 0.1.2
+## 2.0.0
 
 ### Patch Changes
 
-- [`a2cd8c46a3e94`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a2cd8c46a3e94) -
-  EDITOR-1442 Bump adf-schema
 - Updated dependencies
 
-## 0.1.1
-
-### Patch Changes
-
-- [`7ce112e18ca29`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7ce112e18ca29) -
-  [ux] Copy the sync block reference to clipboard
-- Updated dependencies
-
-## 0.1.0
+## 1.0.0
 
-### Minor Changes
+### Major Changes
 
-- [`c29118e6ca79d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c29118e6ca79d) -
-  ED-28986 create initial version of synced blocks
+- [`168d76bdf8be6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/168d76bdf8be6) -
+  Created new synced-block plugin (scaffolding only)
 
 ### Patch Changes
 

package/afm-cc/tsconfig.json

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

package/afm-dev-agents/tsconfig.json

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

package/afm-jira/tsconfig.json

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

package/afm-passionfruit/tsconfig.json

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

package/afm-post-office/tsconfig.json

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

package/afm-rovo-extension/tsconfig.json

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

package/afm-townsquare/tsconfig.json

@@ -22,21 +22,9 @@
 		"../src/**/stories/**/*"
 	],
 	"references": [
-		{
-			"path": "../../adf-utils/afm-townsquare/tsconfig.json"
-		},
-		{
-			"path": "../../editor-json-transformer/afm-townsquare/tsconfig.json"
-		},
 		{
 			"path": "../../../design-system/icon/afm-townsquare/tsconfig.json"
 		},
-		{
-			"path": "../../renderer/afm-townsquare/tsconfig.json"
-		},
-		{
-			"path": "../../../design-system/tokens/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

@@ -0,0 +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.syncBlockNodeView = exports.defaultSyncBlockDocument = exports.SyncBlockPluginComponent = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+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) {
+    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,14 +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 _SyncClient = require("./SyncClient");
-var _utils = require("./utils");
+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 syncClient = new _SyncClient.SyncClient();
+var createPlugin = exports.createPlugin = function createPlugin(config, pmPluginFactoryParams) {
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -21,30 +19,20 @@ var createPlugin = exports.createPlugin = function createPlugin() {
         return {};
       },
       apply: function apply(tr, currentPluginState) {
-        if (tr.docChanged) {
-          var $pos = tr.selection.$from;
-          var syncedBlockParent = (0, _utils.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: (0, _lazySyncedBlock.lazySyncBlockView)({
+          config: config,
+          pmPluginFactoryParams: pmPluginFactoryParams
+        })
+      }
     }
   });
 };

package/dist/cjs/syncedBlockPlugin.js

@@ -6,19 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.syncedBlockPlugin = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _smartLink = _interopRequireDefault(require("@atlaskit/icon/core/smart-link"));
+var _actions = require("./pm-plugins/actions");
 var _main = require("./pm-plugins/main");
-var _GlobalStyles = require("./ui/extensions/synced-block/components/GlobalStyles");
-var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin() {
+var _floatingToolbar = require("./ui/floating-toolbar");
+var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_ref) {
+  var config = _ref.config;
   return {
     name: 'syncedBlock',
+    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);
+        }
       }];
     },
-    contentComponent: function contentComponent() {
-      return /*#__PURE__*/_react.default.createElement(_GlobalStyles.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.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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarConfig = void 0;
+var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig() {
+  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

@@ -0,0 +1,105 @@
+/* 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 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;
+};