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

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 2.1.1
+
+### Patch Changes
+
+- [`7846d87959f7a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7846d87959f7a) -
+  Initial implementation of the floating toolbar
+- Updated dependencies
+
+## 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

package/afm-cc/tsconfig.json

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

package/afm-dev-agents/tsconfig.json

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

package/afm-jira/tsconfig.json

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

package/afm-passionfruit/tsconfig.json

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

package/afm-post-office/tsconfig.json

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

package/afm-rovo-extension/tsconfig.json

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

package/afm-townsquare/tsconfig.json

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

package/dist/cjs/nodeviews/syncedBlock.js

@@ -1,108 +1,118 @@
 "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;
+exports.syncBlockNodeView = 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 _react = _interopRequireDefault(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); }
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _SyncBlockEditorWrapper = require("../ui/SyncBlockEditorWrapper");
+var _SyncBlockRendererWrapper = require("../ui/SyncBlockRendererWrapper");
 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 = {
+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; }
+var defaultSyncBlockEditorDocument = {
   version: 1,
   type: 'doc',
   content: [{
     type: 'paragraph',
     content: [{
       type: 'text',
-      text: 'This is a synced block. Edit the source to update the content.'
+      text: 'This is a source sync block. Edit me to update the content.'
     }]
   }]
 };
-var SyncBlockEditorWrapperDataId = 'sync-block-plugin-editor-wrapper';
-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 defaultSyncBlockRendererDocument = {
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [{
+      type: 'text',
+      text: 'This is a reference sync block. Stay tuned for updates...'
+    }]
+  }]
 };
 var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
-  function SyncBlock() {
+  function SyncBlock(props) {
+    var _this;
     (0, _classCallCheck2.default)(this, SyncBlock);
-    return _callSuper(this, SyncBlock, arguments);
+    _this = _callSuper(this, SyncBlock, [props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props]);
+    var _props$node$attrs = props.node.attrs,
+      resourceId = _props$node$attrs.resourceId,
+      localId = _props$node$attrs.localId;
+    // Temporary solution to identify the source
+    _this.isSource = resourceId === localId;
+    _this.options = props.options;
+    return _this;
   }
   (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: "handleContentChanges",
+    value: function handleContentChanges(_updatedDoc) {
+      // write data
+    }
+  }, {
+    key: "setInnerEditorView",
+    value: function setInnerEditorView(_editorView) {
+      // set inner editor view
+    }
+  }, {
+    key: "renderEditor",
+    value: function renderEditor() {
+      var _this$options, _this$options2;
+      var popupsBoundariesElement = this.dom.closest('.fabric-editor-popup-scroll-parent');
+      if (!(popupsBoundariesElement instanceof HTMLElement)) {
+        return null;
+      }
+      if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.getSyncedBlockEditor)) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_SyncBlockEditorWrapper.SyncBlockEditorWrapper, {
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsMountPoint: this.dom,
+        defaultDocument: defaultSyncBlockEditorDocument,
+        handleContentChanges: this.handleContentChanges,
+        setInnerEditorView: this.setInnerEditorView,
+        getSyncedBlockEditor: (_this$options2 = this.options) === null || _this$options2 === void 0 ? void 0 : _this$options2.getSyncedBlockEditor
+      });
+    }
+  }, {
+    key: "renderRenderer",
+    value: function renderRenderer() {
+      var _this$options3, _this$options4;
+      if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.getSyncedBlockRenderer)) {
+        return null;
+      }
+
+      // get document node from data provider
+      var docNode = defaultSyncBlockRendererDocument;
+      return /*#__PURE__*/_react.default.createElement(_SyncBlockRendererWrapper.SyncBlockRendererWrapper, {
+        docNode: docNode,
+        getSyncedBlockRenderer: (_this$options4 = this.options) === null || _this$options4 === void 0 ? void 0 : _this$options4.getSyncedBlockRenderer
+      });
+    }
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/_react.default.createElement(SyncBlockPluginComponent, {
-        config: this.reactComponentProps.config,
-        dom: this.dom
-      });
+      if (this.isSource) {
+        return this.renderEditor();
+      }
+      return this.renderRenderer();
     }
   }, {
     key: "stopEvent",
@@ -112,7 +122,17 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       if (!target) {
         return false;
       }
-      return ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(SyncBlockEditorWrapperDataId, "\"]"))) != null;
+      var isInNestedEditor = ((_target$closest = target.closest) === null || _target$closest === void 0 ? void 0 : _target$closest.call(target, "[data-testid=\"".concat(_SyncBlockEditorWrapper.SyncBlockEditorWrapperDataId, "\"]"))) != null;
+      if (isInNestedEditor) {
+        this.selectNode();
+        return true;
+      }
+      return false;
+    }
+  }, {
+    key: "selectNode",
+    value: function selectNode() {
+      this.selectSyncBlockNode(undefined);
     }
   }, {
     key: "destroy",
@@ -121,17 +141,40 @@ var SyncBlock = /*#__PURE__*/function (_ReactNodeView) {
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
       _superPropGet(SyncBlock, "destroy", this, 3)([]);
     }
+  }, {
+    key: "selectSyncBlockNode",
+    value: function selectSyncBlockNode(relativeSelectionPos) {
+      var _this$reactComponentP;
+      var getPos = typeof this.getPos === 'function' ? this.getPos() : 0;
+      var selectionAPI = (_this$reactComponentP = this.reactComponentProps.api) === null || _this$reactComponentP === void 0 || (_this$reactComponentP = _this$reactComponentP.selection) === null || _this$reactComponentP === void 0 ? void 0 : _this$reactComponentP.actions;
+      if (!selectionAPI) {
+        return;
+      }
+      var tr = selectionAPI.selectNearNode({
+        selectionRelativeToNode: relativeSelectionPos,
+        selection: _state.NodeSelection.create(this.view.state.doc, getPos !== null && getPos !== void 0 ? getPos : 0)
+      })(this.view.state);
+      if (tr) {
+        this.view.dispatch(tr);
+      }
+    }
   }]);
 }(_reactNodeView.default);
-var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref3) {
-  var config = _ref3.config,
-    pmPluginFactoryParams = _ref3.pmPluginFactoryParams;
+var syncBlockNodeView = exports.syncBlockNodeView = function syncBlockNodeView(_ref) {
+  var options = _ref.options,
+    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+    api = _ref.api;
   return function (node, view, getPos) {
     var portalProviderAPI = pmPluginFactoryParams.portalProviderAPI,
       eventDispatcher = pmPluginFactoryParams.eventDispatcher;
-    var reactComponentProps = {
-      config: config
-    };
-    return new SyncBlock(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined).init();
+    return new SyncBlock({
+      api: api,
+      options: options,
+      node: node,
+      view: view,
+      getPos: getPos,
+      portalProviderAPI: portalProviderAPI,
+      eventDispatcher: eventDispatcher
+    }).init();
   };
 };

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

@@ -1,25 +1,39 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createSyncedBlock = void 0;
+exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _uuid = _interopRequireDefault(require("uuid"));
+var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _state = require("@atlaskit/editor-prosemirror/state");
 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 id = (0, _uuid.default)();
   var tr = state.tr;
   // const { breakout } = state.schema.marks;
   var node = state.schema.nodes.syncBlock.createChecked({
-    resourceId: getRandomId(),
-    localId: getRandomId()
+    resourceId: id,
+    localId: id
   }, null
   // [breakout.create({ mode: 'wide' })],
   );
   (0, _utils.safeInsert)(node)(tr);
   return tr;
+};
+var copySyncedBlockReferenceToClipboard = exports.copySyncedBlockReferenceToClipboard = function copySyncedBlockReferenceToClipboard(state, _dispatch, _view) {
+  var schema = state.schema,
+    selection = state.selection;
+  if (selection instanceof _state.NodeSelection) {
+    var nodeType = selection.node.type;
+    var domNode = (0, _copyButton.toDOM)(selection.node, schema);
+    // clear local-id
+    if (domNode instanceof HTMLElement) {
+      domNode.setAttribute('data-local-id', '');
+    }
+    (0, _copyButton.copyDomNode)(domNode, nodeType, selection);
+    return true;
+  }
+  return false;
 };

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

@@ -11,7 +11,7 @@ var syncedBlockPluginKey = exports.syncedBlockPluginKey = new _state.PluginKey('
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 
-var createPlugin = exports.createPlugin = function createPlugin(config, pmPluginFactoryParams) {
+var createPlugin = exports.createPlugin = function createPlugin(options, pmPluginFactoryParams, _syncBlockStore, api) {
   return new _safePlugin.SafePlugin({
     key: syncedBlockPluginKey,
     state: {
@@ -29,8 +29,9 @@ var createPlugin = exports.createPlugin = function createPlugin(config, pmPlugin
     props: {
       nodeViews: {
         syncBlock: (0, _lazySyncedBlock.lazySyncBlockView)({
-          config: config,
-          pmPluginFactoryParams: pmPluginFactoryParams
+          options: options,
+          pmPluginFactoryParams: pmPluginFactoryParams,
+          api: api
         })
       }
     }

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findSyncBlock = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var findSyncBlock = exports.findSyncBlock = function findSyncBlock(state, selection) {
+  var syncBlock = state.schema.nodes.syncBlock;
+  return (0, _utils.findSelectedNodeOfType)(syncBlock)(selection || state.selection) || (0, _utils.findParentNodeOfType)(syncBlock)(selection || state.selection);
+};

package/dist/cjs/syncedBlockPlugin.js

@@ -7,12 +7,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.syncedBlockPlugin = void 0;
 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(_ref) {
-  var config = _ref.config;
+  var config = _ref.config,
+    api = _ref.api;
+  var syncBlockStore = new _syncBlock.SyncBlockStoreManager(config === null || config === void 0 ? void 0 : config.dataProvider);
   return {
     name: 'syncedBlock',
     nodes: function nodes() {
@@ -25,7 +28,7 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       return [{
         name: 'syncedBlockPlugin',
         plugin: function plugin(params) {
-          return (0, _main.createPlugin)(config, params);
+          return (0, _main.createPlugin)(config, params, syncBlockStore, api);
         }
       }];
     },
@@ -48,7 +51,9 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
           }
         }];
       },
-      floatingToolbar: (0, _floatingToolbar.getToolbarConfig)()
+      floatingToolbar: function floatingToolbar(state, intl, providerFactory) {
+        return (0, _floatingToolbar.getToolbarConfig)(state, intl, config, providerFactory);
+      }
     }
   };
 };

package/dist/cjs/ui/SyncBlockEditorWrapper.js

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

package/dist/cjs/ui/SyncBlockRendererWrapper.js

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

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

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