@atlaskit/editor-plugin-synced-block 5.1.11 → 5.1.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.1.12
+
+### Patch Changes
+
+- [`f0124a523d8f1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0124a523d8f1) -
+  [ux] [EDITOR-2845] Implement synced location for source and reference sync block
+- Updated dependencies
+
 ## 5.1.11
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -7,10 +7,7 @@
 		"composite": true,
 		"noCheck": true
 	},
-	"include": [
-		"../src/**/*.ts",
-		"../src/**/*.tsx"
-	],
+	"include": ["../src/**/*.ts", "../src/**/*.tsx"],
 	"exclude": [
 		"../src/**/__tests__/*",
 		"../src/**/*.test.*",
@@ -29,6 +26,9 @@
 		{
 			"path": "../../../design-system/button/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../editor-json-transformer/afm-cc/tsconfig.json"
 		},
@@ -74,6 +74,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/logo/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/lozenge/afm-cc/tsconfig.json"
 		},
@@ -86,6 +89,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/spinner/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../editor-json-transformer/afm-jira/tsconfig.json"
 		},
@@ -74,6 +77,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/logo/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/lozenge/afm-jira/tsconfig.json"
 		},
@@ -86,6 +92,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../../design-system/button/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/dropdown-menu/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../editor-json-transformer/afm-products/tsconfig.json"
 		},
@@ -74,6 +77,9 @@
 		{
 			"path": "../../../design-system/icon-lab/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/logo/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/lozenge/afm-products/tsconfig.json"
 		},
@@ -86,6 +92,9 @@
 		{
 			"path": "../../../design-system/primitives/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/spinner/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../tmp-editor-statsig/afm-products/tsconfig.json"
 		},

package/dist/cjs/ui/SyncedLocationDropdown.compiled.css

@@ -0,0 +1,26 @@
+
+._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb96ou{width:327px}
+._1bsbo8uj{width:235px}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1reo15vq{overflow-x:hidden}
+._1tkeqkoa{min-height:9pc}
+._1ul91wqb{min-width:60px}
+._1wpz1fhb{align-self:stretch}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ajmmnqa1{text-decoration-style:solid}
+._c71lko4j{max-height:19pc}
+._o5721q9c{white-space:nowrap}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._y3gn1h6o{text-align:center}

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -0,0 +1,302 @@
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.processReferenceData = exports.SyncedLocationDropdown = void 0;
+require("./SyncedLocationDropdown.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
+var _messages = require("@atlaskit/editor-common/messages");
+var _ui = require("@atlaskit/editor-common/ui");
+var _icon = require("@atlaskit/icon");
+var _pageLiveDoc = _interopRequireDefault(require("@atlaskit/icon-lab/core/page-live-doc"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
+var _page = _interopRequireDefault(require("@atlaskit/icon/core/page"));
+var _statusError = _interopRequireDefault(require("@atlaskit/icon/core/status-error"));
+var _logo = require("@atlaskit/logo");
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _excluded = ["triggerRef"];
+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 _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+var headingStyles = null;
+var styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq1b66 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
+};
+var ItemTitle = function ItemTitle(_ref) {
+  var title = _ref.title,
+    formatMessage = _ref.formatMessage,
+    onSamePage = _ref.onSamePage,
+    isSource = _ref.isSource;
+  return /*#__PURE__*/React.createElement(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.title
+  }, title), onSamePage && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(_lozenge.default, null, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownSourceLozenge))));
+};
+var Logo = function Logo(_ref2) {
+  var product = _ref2.product;
+  switch (product) {
+    case 'confluence-page':
+      return /*#__PURE__*/React.createElement(_logo.ConfluenceIcon, {
+        size: "xsmall"
+      });
+    case 'jira-work-item':
+      return /*#__PURE__*/React.createElement(_logo.JiraIcon, {
+        size: "xsmall"
+      });
+    default:
+      return null;
+  }
+};
+var ItemIcon = function ItemIcon(_ref3) {
+  var reference = _ref3.reference;
+  var hasAccess = reference.hasAccess,
+    subType = reference.subType;
+  var icon = hasAccess ? subType ? _pageLiveDoc.default : _page.default : function () {
+    return /*#__PURE__*/React.createElement(Logo, {
+      product: reference.productType
+    });
+  };
+  return /*#__PURE__*/React.createElement(_icon.IconTile, {
+    icon: icon,
+    label: "",
+    appearance: hasAccess ? 'grayBold' : 'gray',
+    size: "xsmall"
+  });
+};
+var processReferenceData = exports.processReferenceData = function processReferenceData(referenceData, intl) {
+  var formatMessage = intl.formatMessage;
+  var sourceInfoMap = new Map();
+  referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
+    if (!reference) {
+      return;
+    }
+    if (sourceInfoMap.has(reference.sourceAri)) {
+      var _sourceInfoMap$get;
+      (_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 || _sourceInfoMap$get.push(reference);
+    } else {
+      sourceInfoMap.set(reference.sourceAri, [reference]);
+    }
+  });
+  var _iterator = _createForOfIteratorHelper(sourceInfoMap.values()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var references = _step.value;
+      if (references.length > 1) {
+        references.forEach(function (reference, index) {
+          return reference.title = "".concat(reference.title, ": ").concat(formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleBlockIndex, {
+            index: index + 1
+          }));
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var sortedReferences = Array.from(sourceInfoMap.values()).flat().sort(function (a, b) {
+    if (a.isSource !== b.isSource) {
+      return b.isSource ? 1 : -1;
+    }
+    if (a.hasAccess !== b.hasAccess) {
+      return a.hasAccess ? -1 : 1;
+    }
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  return sortedReferences;
+};
+var SyncedLocationDropdown = exports.SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
+  var syncBlockStore = _ref4.syncBlockStore,
+    resourceId = _ref4.resourceId,
+    intl = _ref4.intl,
+    isSource = _ref4.isSource,
+    localId = _ref4.localId;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitle);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(_dropdownMenu.default, {
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange(_ref5) {
+      var isOpen = _ref5.isOpen;
+      return setIsOpen(isOpen);
+    },
+    trigger: function trigger(_ref6) {
+      var triggerRef = _ref6.triggerRef,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded);
+      return /*#__PURE__*/React.createElement(_ui.FloatingToolbarButton, (0, _extends2.default)({
+        ref: triggerRef,
+        areAnyNewToolbarFlagsEnabled: true,
+        iconAfter: /*#__PURE__*/React.createElement(_chevronDown.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: "",
+          size: "small"
+        })
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, triggerProps), triggerTitle);
+    }
+  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId
+  }));
+};
+var DropdownContent = function DropdownContent(_ref7) {
+  var syncBlockStore = _ref7.syncBlockStore,
+    resourceId = _ref7.resourceId,
+    intl = _ref7.intl,
+    isSource = _ref7.isSource,
+    localId = _ref7.localId;
+  var formatMessage = intl.formatMessage;
+  var _useState3 = (0, _react.useState)('none'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    fetchStatus = _useState4[0],
+    setFetchStatus = _useState4[1];
+  var _useState5 = (0, _react.useState)([]),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    referenceData = _useState6[0],
+    setReferenceData = _useState6[1];
+  (0, _react.useEffect)(function () {
+    setFetchStatus('loading');
+    var getReferenceData = /*#__PURE__*/function () {
+      var _ref8 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+        var response;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+            case 2:
+              response = _context.sent;
+              if (!response.error) {
+                _context.next = 6;
+                break;
+              }
+              setFetchStatus('error');
+              return _context.abrupt("return");
+            case 6:
+              setReferenceData(processReferenceData(response.references, intl));
+              setFetchStatus('success');
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getReferenceData() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    getReferenceData();
+  }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  var content = function content() {
+    switch (fetchStatus) {
+      case 'loading':
+        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+      case 'error':
+        return /*#__PURE__*/React.createElement(ErrorScreen, {
+          formatMessage: formatMessage
+        });
+      case 'success':
+        if (referenceData.length > 0) {
+          return /*#__PURE__*/React.createElement("div", {
+            "data-testid": "synced-locations-dropdown-content",
+            className: (0, _runtime.ax)([styles.contentContainer, "_ku9g126e _18bk1rpy"])
+          }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItemGroup, {
+            title: formatMessage(_messages.syncBlockMessages.syncedLocationDropdownHeading, {
+              count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
+            })
+          }, referenceData.map(function (reference) {
+            return /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
+              elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+                reference: reference
+              }),
+              href: reference.url,
+              key: reference.title
+            }, /*#__PURE__*/React.createElement(ItemTitle, {
+              title: reference.title || reference.url || '',
+              formatMessage: formatMessage,
+              onSamePage: reference.onSamePage,
+              isSource: reference.isSource
+            }));
+          })));
+        } else {
+          return /*#__PURE__*/React.createElement(NoResultScreen, {
+            formatMessage: formatMessage
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.dropdownContent
+  }, content());
+};
+var LoadingScreen = function LoadingScreen() {
+  return /*#__PURE__*/React.createElement(_compiled.Box, null, /*#__PURE__*/React.createElement(_spinner.default, null));
+};
+var ErrorScreen = function ErrorScreen(_ref9) {
+  var formatMessage = _ref9.formatMessage;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.errorIcon
+  }, /*#__PURE__*/React.createElement(_statusError.default, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    spacing: "spacious",
+    label: "",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "p",
+    size: "medium"
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownError)));
+};
+var NoResultScreen = function NoResultScreen(_ref0) {
+  var formatMessage = _ref0.formatMessage;
+  return /*#__PURE__*/React.createElement(_compiled.Stack, {
+    xcss: styles.noResultsContainer,
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "p"
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(_compiled.Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(_compiled.Anchor, {
+    href: "https://hello.atlassian.net/wiki/x/tAtCeAE",
+    target: "_blank",
+    xcss: styles.learnMoreLink
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownLearnMoreLink))));
+};

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

@@ -18,6 +18,7 @@ var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _utils2 = require("../pm-plugins/utils/utils");
+var _SyncedLocationDropdown = require("./SyncedLocationDropdown");
 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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -31,6 +32,9 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
   var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
   var isBodiedSyncBlock = (0, _utils2.isBodiedSyncBlockNode)(syncBlockObject.node, bodiedSyncBlock);
+  var _syncBlockObject$node = syncBlockObject.node.attrs,
+    resourceId = _syncBlockObject$node.resourceId,
+    localId = _syncBlockObject$node.localId;
   var formatMessage = intl.formatMessage;
   var nodeType = syncBlockObject.node.type;
   var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
@@ -53,6 +57,22 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
+    if ((0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      var syncedLocation = {
+        type: 'custom',
+        fallback: [],
+        render: function render() {
+          return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdown, {
+            syncBlockStore: syncBlockStore,
+            resourceId: resourceId,
+            localId: localId,
+            intl: intl,
+            isSource: isBodiedSyncBlock
+          });
+        }
+      };
+      items.push(syncedLocation);
+    }
     var copyButton = _objectSpread({
       id: 'editor.syncedBlock.copy',
       type: 'button',

package/dist/es2019/ui/SyncedLocationDropdown.compiled.css

@@ -0,0 +1,26 @@
+
+._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb96ou{width:327px}
+._1bsbo8uj{width:235px}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1reo15vq{overflow-x:hidden}
+._1tkeqkoa{min-height:9pc}
+._1ul91wqb{min-width:60px}
+._1wpz1fhb{align-self:stretch}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ajmmnqa1{text-decoration-style:solid}
+._c71lko4j{max-height:19pc}
+._o5721q9c{white-space:nowrap}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._y3gn1h6o{text-align:center}

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -0,0 +1,254 @@
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./SyncedLocationDropdown.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useState, useEffect } from 'react';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { IconTile } from '@atlaskit/icon';
+import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import PageIcon from '@atlaskit/icon/core/page';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+const headingStyles = null;
+const styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq1b66 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
+};
+const ItemTitle = ({
+  title,
+  formatMessage,
+  onSamePage,
+  isSource
+}) => {
+  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))));
+};
+const Logo = ({
+  product
+}) => {
+  switch (product) {
+    case 'confluence-page':
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+        size: "xsmall"
+      });
+    case 'jira-work-item':
+      return /*#__PURE__*/React.createElement(JiraIcon, {
+        size: "xsmall"
+      });
+    default:
+      return null;
+  }
+};
+const ItemIcon = ({
+  reference
+}) => {
+  const {
+    hasAccess,
+    subType
+  } = reference;
+  const icon = hasAccess ? subType ? PageLiveDocIcon : PageIcon : () => /*#__PURE__*/React.createElement(Logo, {
+    product: reference.productType
+  });
+  return /*#__PURE__*/React.createElement(IconTile, {
+    icon: icon,
+    label: "",
+    appearance: hasAccess ? 'grayBold' : 'gray',
+    size: "xsmall"
+  });
+};
+export const processReferenceData = (referenceData, intl) => {
+  const {
+    formatMessage
+  } = intl;
+  const sourceInfoMap = new Map();
+  referenceData === null || referenceData === void 0 ? void 0 : referenceData.forEach(reference => {
+    if (!reference) {
+      return;
+    }
+    if (sourceInfoMap.has(reference.sourceAri)) {
+      var _sourceInfoMap$get;
+      (_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 ? void 0 : _sourceInfoMap$get.push(reference);
+    } else {
+      sourceInfoMap.set(reference.sourceAri, [reference]);
+    }
+  });
+  for (const references of sourceInfoMap.values()) {
+    if (references.length > 1) {
+      references.forEach((reference, index) => reference.title = `${reference.title}: ${formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+        index: index + 1
+      })}`);
+    }
+  }
+  const sortedReferences = Array.from(sourceInfoMap.values()).flat().sort((a, b) => {
+    if (a.isSource !== b.isSource) {
+      return b.isSource ? 1 : -1;
+    }
+    if (a.hasAccess !== b.hasAccess) {
+      return a.hasAccess ? -1 : 1;
+    }
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  return sortedReferences;
+};
+export const SyncedLocationDropdown = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  const [isOpen, setIsOpen] = useState(false);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: ({
+      isOpen
+    }) => setIsOpen(isOpen),
+    trigger: ({
+      triggerRef,
+      ...triggerProps
+    }) => /*#__PURE__*/React.createElement(Button, _extends({
+      ref: triggerRef,
+      areAnyNewToolbarFlagsEnabled: true,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: "",
+        size: "small"
+      })
+      // eslint-disable-next-line react/jsx-props-no-spreading
+    }, triggerProps), triggerTitle)
+  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId
+  }));
+};
+const DropdownContent = ({
+  syncBlockStore,
+  resourceId,
+  intl,
+  isSource,
+  localId
+}) => {
+  const {
+    formatMessage
+  } = intl;
+  const [fetchStatus, setFetchStatus] = useState('none');
+  const [referenceData, setReferenceData] = useState([]);
+  useEffect(() => {
+    setFetchStatus('loading');
+    const getReferenceData = async () => {
+      const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+      if (response.error) {
+        setFetchStatus('error');
+        return;
+      }
+      setReferenceData(processReferenceData(response.references, intl));
+      setFetchStatus('success');
+    };
+    getReferenceData();
+  }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  const content = () => {
+    switch (fetchStatus) {
+      case 'loading':
+        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+      case 'error':
+        return /*#__PURE__*/React.createElement(ErrorScreen, {
+          formatMessage: formatMessage
+        });
+      case 'success':
+        if (referenceData.length > 0) {
+          return /*#__PURE__*/React.createElement("div", {
+            "data-testid": "synced-locations-dropdown-content",
+            className: ax([styles.contentContainer, "_ku9g126e _18bk1rpy"])
+          }, /*#__PURE__*/React.createElement(DropdownItemGroup, {
+            title: formatMessage(messages.syncedLocationDropdownHeading, {
+              count: `${referenceData.length > 99 ? '99+' : referenceData.length}`
+            })
+          }, referenceData.map(reference => /*#__PURE__*/React.createElement(DropdownItem, {
+            elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+              reference: reference
+            }),
+            href: reference.url,
+            key: reference.title
+          }, /*#__PURE__*/React.createElement(ItemTitle, {
+            title: reference.title || reference.url || '',
+            formatMessage: formatMessage,
+            onSamePage: reference.onSamePage,
+            isSource: reference.isSource
+          })))));
+        } else {
+          return /*#__PURE__*/React.createElement(NoResultScreen, {
+            formatMessage: formatMessage
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.dropdownContent
+  }, content());
+};
+const LoadingScreen = () => {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+};
+const ErrorScreen = ({
+  formatMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorIcon
+  }, /*#__PURE__*/React.createElement(StatusErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    spacing: "spacious",
+    label: "",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    size: "medium"
+  }, formatMessage(messages.syncedLocationDropdownError)));
+};
+const NoResultScreen = ({
+  formatMessage
+}) => {
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.noResultsContainer,
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(Anchor, {
+    href: "https://hello.atlassian.net/wiki/x/tAtCeAE",
+    target: "_blank",
+    xcss: styles.learnMoreLink
+  }, formatMessage(messages.syncedLocationDropdownLearnMoreLink))));
+};

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

@@ -9,6 +9,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
+import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
   var _api$decorations, _api$connectivity, _api$connectivity$sha;
   const syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
@@ -25,6 +26,10 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     }
   } = state;
   const isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
+  const {
+    resourceId,
+    localId
+  } = syncBlockObject.node.attrs;
   const {
     formatMessage
   } = intl;
@@ -48,6 +53,22 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
     };
     items.push(deleteButton);
   } else {
+    if (fg('platform_synced_block_dogfooding')) {
+      const syncedLocation = {
+        type: 'custom',
+        fallback: [],
+        render: () => {
+          return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
+            syncBlockStore: syncBlockStore,
+            resourceId: resourceId,
+            localId: localId,
+            intl: intl,
+            isSource: isBodiedSyncBlock
+          });
+        }
+      };
+      items.push(syncedLocation);
+    }
     const copyButton = {
       id: 'editor.syncedBlock.copy',
       type: 'button',

package/dist/esm/ui/SyncedLocationDropdown.compiled.css

@@ -0,0 +1,26 @@
+
+._1mour5cr{margin-block:var(--ds-space-negative-050,-4px)}
+._1rjcv77o{padding-block:var(--ds-space-025,2px)}
+._ku9g126e [data-ds--menu--heading-item]{margin-block:var(--ds-space-050,4px)!important}._18bk1rpy [data-ds--menu--heading-item]{color:var(--ds-text-subtlest,#6b6e76)}
+._18m915vq{overflow-y:hidden}
+._18m91wug{overflow-y:auto}
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1bsb96ou{width:327px}
+._1bsbo8uj{width:235px}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1hmsglyw{text-decoration-line:none}
+._1reo15vq{overflow-x:hidden}
+._1tkeqkoa{min-height:9pc}
+._1ul91wqb{min-width:60px}
+._1wpz1fhb{align-self:stretch}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._ahbq1b66{margin-inline-start:var(--ds-space-050,4px)}
+._ajmmnqa1{text-decoration-style:solid}
+._c71lko4j{max-height:19pc}
+._o5721q9c{white-space:nowrap}
+._syaz1rpy{color:var(--ds-text-subtlest,#6b6e76)}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._y3gn1h6o{text-align:center}

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -0,0 +1,293 @@
+/* SyncedLocationDropdown.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+var _excluded = ["triggerRef"];
+import "./SyncedLocationDropdown.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+import { useState, useEffect } from 'react';
+import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
+import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
+import { IconTile } from '@atlaskit/icon';
+import PageLiveDocIcon from '@atlaskit/icon-lab/core/page-live-doc';
+import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
+import PageIcon from '@atlaskit/icon/core/page';
+import StatusErrorIcon from '@atlaskit/icon/core/status-error';
+import { ConfluenceIcon, JiraIcon } from '@atlaskit/logo';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Text, Inline, Anchor, Stack } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+var headingStyles = null;
+var styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq1b66 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsb96ou _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1"
+};
+var ItemTitle = function ItemTitle(_ref) {
+  var title = _ref.title,
+    formatMessage = _ref.formatMessage,
+    onSamePage = _ref.onSamePage,
+    isSource = _ref.isSource;
+  return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.title
+  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.note
+  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.lozenge
+  }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))));
+};
+var Logo = function Logo(_ref2) {
+  var product = _ref2.product;
+  switch (product) {
+    case 'confluence-page':
+      return /*#__PURE__*/React.createElement(ConfluenceIcon, {
+        size: "xsmall"
+      });
+    case 'jira-work-item':
+      return /*#__PURE__*/React.createElement(JiraIcon, {
+        size: "xsmall"
+      });
+    default:
+      return null;
+  }
+};
+var ItemIcon = function ItemIcon(_ref3) {
+  var reference = _ref3.reference;
+  var hasAccess = reference.hasAccess,
+    subType = reference.subType;
+  var icon = hasAccess ? subType ? PageLiveDocIcon : PageIcon : function () {
+    return /*#__PURE__*/React.createElement(Logo, {
+      product: reference.productType
+    });
+  };
+  return /*#__PURE__*/React.createElement(IconTile, {
+    icon: icon,
+    label: "",
+    appearance: hasAccess ? 'grayBold' : 'gray',
+    size: "xsmall"
+  });
+};
+export var processReferenceData = function processReferenceData(referenceData, intl) {
+  var formatMessage = intl.formatMessage;
+  var sourceInfoMap = new Map();
+  referenceData === null || referenceData === void 0 || referenceData.forEach(function (reference) {
+    if (!reference) {
+      return;
+    }
+    if (sourceInfoMap.has(reference.sourceAri)) {
+      var _sourceInfoMap$get;
+      (_sourceInfoMap$get = sourceInfoMap.get(reference.sourceAri)) === null || _sourceInfoMap$get === void 0 || _sourceInfoMap$get.push(reference);
+    } else {
+      sourceInfoMap.set(reference.sourceAri, [reference]);
+    }
+  });
+  var _iterator = _createForOfIteratorHelper(sourceInfoMap.values()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var references = _step.value;
+      if (references.length > 1) {
+        references.forEach(function (reference, index) {
+          return reference.title = "".concat(reference.title, ": ").concat(formatMessage(messages.syncedLocationDropdownTitleBlockIndex, {
+            index: index + 1
+          }));
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  var sortedReferences = Array.from(sourceInfoMap.values()).flat().sort(function (a, b) {
+    if (a.isSource !== b.isSource) {
+      return b.isSource ? 1 : -1;
+    }
+    if (a.hasAccess !== b.hasAccess) {
+      return a.hasAccess ? -1 : 1;
+    }
+    return (a.title || '').localeCompare(b.title || '');
+  });
+  return sortedReferences;
+};
+export var SyncedLocationDropdown = function SyncedLocationDropdown(_ref4) {
+  var syncBlockStore = _ref4.syncBlockStore,
+    resourceId = _ref4.resourceId,
+    intl = _ref4.intl,
+    isSource = _ref4.isSource,
+    localId = _ref4.localId;
+  var formatMessage = intl.formatMessage;
+  var triggerTitle = formatMessage(messages.syncedLocationDropdownTitle);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange(_ref5) {
+      var isOpen = _ref5.isOpen;
+      return setIsOpen(isOpen);
+    },
+    trigger: function trigger(_ref6) {
+      var triggerRef = _ref6.triggerRef,
+        triggerProps = _objectWithoutProperties(_ref6, _excluded);
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        ref: triggerRef,
+        areAnyNewToolbarFlagsEnabled: true,
+        iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: "",
+          size: "small"
+        })
+        // eslint-disable-next-line react/jsx-props-no-spreading
+      }, triggerProps), triggerTitle);
+    }
+  }, isOpen && /*#__PURE__*/React.createElement(DropdownContent, {
+    syncBlockStore: syncBlockStore,
+    resourceId: resourceId,
+    intl: intl,
+    isSource: isSource,
+    localId: localId
+  }));
+};
+var DropdownContent = function DropdownContent(_ref7) {
+  var syncBlockStore = _ref7.syncBlockStore,
+    resourceId = _ref7.resourceId,
+    intl = _ref7.intl,
+    isSource = _ref7.isSource,
+    localId = _ref7.localId;
+  var formatMessage = intl.formatMessage;
+  var _useState3 = useState('none'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fetchStatus = _useState4[0],
+    setFetchStatus = _useState4[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    referenceData = _useState6[0],
+    setReferenceData = _useState6[1];
+  useEffect(function () {
+    setFetchStatus('loading');
+    var getReferenceData = /*#__PURE__*/function () {
+      var _ref8 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var response;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+            case 2:
+              response = _context.sent;
+              if (!response.error) {
+                _context.next = 6;
+                break;
+              }
+              setFetchStatus('error');
+              return _context.abrupt("return");
+            case 6:
+              setReferenceData(processReferenceData(response.references, intl));
+              setFetchStatus('success');
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function getReferenceData() {
+        return _ref8.apply(this, arguments);
+      };
+    }();
+    getReferenceData();
+  }, [syncBlockStore, intl, isSource, localId, resourceId]);
+  var content = function content() {
+    switch (fetchStatus) {
+      case 'loading':
+        return /*#__PURE__*/React.createElement(LoadingScreen, null);
+      case 'error':
+        return /*#__PURE__*/React.createElement(ErrorScreen, {
+          formatMessage: formatMessage
+        });
+      case 'success':
+        if (referenceData.length > 0) {
+          return /*#__PURE__*/React.createElement("div", {
+            "data-testid": "synced-locations-dropdown-content",
+            className: ax([styles.contentContainer, "_ku9g126e _18bk1rpy"])
+          }, /*#__PURE__*/React.createElement(DropdownItemGroup, {
+            title: formatMessage(messages.syncedLocationDropdownHeading, {
+              count: "".concat(referenceData.length > 99 ? '99+' : referenceData.length)
+            })
+          }, referenceData.map(function (reference) {
+            return /*#__PURE__*/React.createElement(DropdownItem, {
+              elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+                reference: reference
+              }),
+              href: reference.url,
+              key: reference.title
+            }, /*#__PURE__*/React.createElement(ItemTitle, {
+              title: reference.title || reference.url || '',
+              formatMessage: formatMessage,
+              onSamePage: reference.onSamePage,
+              isSource: reference.isSource
+            }));
+          })));
+        } else {
+          return /*#__PURE__*/React.createElement(NoResultScreen, {
+            formatMessage: formatMessage
+          });
+        }
+    }
+  };
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.dropdownContent
+  }, content());
+};
+var LoadingScreen = function LoadingScreen() {
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Spinner, null));
+};
+var ErrorScreen = function ErrorScreen(_ref9) {
+  var formatMessage = _ref9.formatMessage;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorContainer
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.errorIcon
+  }, /*#__PURE__*/React.createElement(StatusErrorIcon, {
+    color: "var(--ds-icon-danger, #C9372C)",
+    spacing: "spacious",
+    label: "",
+    size: "small"
+  })), /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    size: "medium"
+  }, formatMessage(messages.syncedLocationDropdownError)));
+};
+var NoResultScreen = function NoResultScreen(_ref0) {
+  var formatMessage = _ref0.formatMessage;
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: styles.noResultsContainer,
+    space: "space.100"
+  }, /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, formatMessage(messages.syncedLocationDropdownNoResults)), /*#__PURE__*/React.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(Anchor, {
+    href: "https://hello.atlassian.net/wiki/x/tAtCeAE",
+    target: "_blank",
+    xcss: styles.learnMoreLink
+  }, formatMessage(messages.syncedLocationDropdownLearnMoreLink))));
+};

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

@@ -12,6 +12,7 @@ import EditIcon from '@atlaskit/icon/core/edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
+import { SyncedLocationDropdown } from './SyncedLocationDropdown';
 export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBlockStore) {
   var _api$decorations, _api$connectivity;
   var syncBlockObject = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
@@ -22,6 +23,9 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
   var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === SyncBlockError.NotFound;
   var bodiedSyncBlock = state.schema.nodes.bodiedSyncBlock;
   var isBodiedSyncBlock = isBodiedSyncBlockNode(syncBlockObject.node, bodiedSyncBlock);
+  var _syncBlockObject$node = syncBlockObject.node.attrs,
+    resourceId = _syncBlockObject$node.resourceId,
+    localId = _syncBlockObject$node.localId;
   var formatMessage = intl.formatMessage;
   var nodeType = syncBlockObject.node.type;
   var hoverDecoration = api === null || api === void 0 || (_api$decorations = api.decorations) === null || _api$decorations === void 0 ? void 0 : _api$decorations.actions.hoverDecoration;
@@ -44,6 +48,22 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
     }, hoverDecorationProps(nodeType, akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
+    if (fg('platform_synced_block_dogfooding')) {
+      var syncedLocation = {
+        type: 'custom',
+        fallback: [],
+        render: function render() {
+          return /*#__PURE__*/React.createElement(SyncedLocationDropdown, {
+            syncBlockStore: syncBlockStore,
+            resourceId: resourceId,
+            localId: localId,
+            intl: intl,
+            isSource: isBodiedSyncBlock
+          });
+        }
+      };
+      items.push(syncedLocation);
+    }
     var copyButton = _objectSpread({
       id: 'editor.syncedBlock.copy',
       type: 'button',

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

@@ -0,0 +1,12 @@
+import { type IntlShape } from 'react-intl-next';
+import type { SyncBlockSourceInfo, SyncBlockStoreManager, ReferencesSourceInfo } from '@atlaskit/editor-synced-block-provider';
+interface Props {
+    intl: IntlShape;
+    isSource: boolean;
+    localId: string;
+    resourceId: string;
+    syncBlockStore: SyncBlockStoreManager;
+}
+export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
+export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, }: Props) => JSX.Element;
+export {};

package/dist/types-ts4.5/ui/SyncedLocationDropdown.d.ts

@@ -0,0 +1,12 @@
+import { type IntlShape } from 'react-intl-next';
+import type { SyncBlockSourceInfo, SyncBlockStoreManager, ReferencesSourceInfo } from '@atlaskit/editor-synced-block-provider';
+interface Props {
+    intl: IntlShape;
+    isSource: boolean;
+    localId: string;
+    resourceId: string;
+    syncBlockStore: SyncBlockStoreManager;
+}
+export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
+export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, }: Props) => JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.1.11",
+	"version": "5.1.12",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/button": "23.9.3",
+		"@atlaskit/dropdown-menu": "16.4.1",
 		"@atlaskit/editor-json-transformer": "^8.31.0",
 		"@atlaskit/editor-plugin-analytics": "^7.0.0",
 		"@atlaskit/editor-plugin-block-menu": "^6.0.0",
@@ -45,15 +46,18 @@
 		"@atlaskit/flag": "^17.8.0",
 		"@atlaskit/icon": "29.4.1",
 		"@atlaskit/icon-lab": "^5.14.0",
+		"@atlaskit/logo": "^19.10.0",
 		"@atlaskit/lozenge": "^13.3.0",
 		"@atlaskit/modal-dialog": "^14.10.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^16.21.0",
+		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/spinner": "19.0.8",
+		"@atlaskit/tmp-editor-statsig": "^16.22.0",
 		"@atlaskit/tokens": "9.1.2",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
+		"@compiled/react": "^0.18.6",
 		"bind-event-listener": "^3.0.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},