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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.1.13
+
+### Patch Changes
+
+- [`7b1f7ff1a2235`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7b1f7ff1a2235) -
+  [ux] [EDITOR-4536] Update synced location dropdown UI
+- Updated dependencies
+
+## 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

@@ -1,5 +1,5 @@
 {
-	"extends": "../../../../tsconfig.entry-points.products.json",
+	"extends": "../../../../tsconfig.local-consumption.json",
 	"compilerOptions": {
 		"target": "es5",
 		"outDir": "../../../../../tsDist/@atlaskit__editor-plugin-synced-block/app",
@@ -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,34 @@
+
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
+._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}
+._1bsb19n7{width:106px}
+._1bsb1osq{width:100%}
+._1bsbgktf{width:20px}
+._1bsbo8uj{width:235px}
+._1bsbsmdz{width:342px}
+._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}
+._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._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}
+@keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -0,0 +1,329 @@
+/* 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 _quotationMark = _interopRequireDefault(require("@atlaskit/icon/core/quotation-mark"));
+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 _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+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 fadeIn = null;
+var headingStyles = null;
+var dropdownItemStyles = null;
+
+// logo icon does not fit in ADS IconTile, hence we need custom styles to match with other icons
+var logoTileStyles = null;
+var styles = {
+  title: "_1reo15vq _18m915vq _syazazsu _1bto1l2s _o5721q9c",
+  note: "_syaz1rpy _o5721q9c",
+  lozenge: "_ahbq12x7 _1ul91wqb",
+  noResultsContainer: "_1bsbo8uj _y3gn1h6o",
+  dropdownContent: "_1rjcv77o _1bsbsmdz _1tkeqkoa _c71lko4j _1e0c1txw _1bah1h6o _4cvr1h6o",
+  contentContainer: "_y44vfmxe _1bsb1osq _1wpz1fhb _18m91wug",
+  errorContainer: "_1bsbo8uj _1e0c1txw",
+  errorIcon: "_1mour5cr",
+  learnMoreLink: "_4bfu1r31 _1hmsglyw _ajmmnqa1",
+  requestAccess: "_1bsb19n7 _o5721q9c _ahbq12x7 _syaz1rpy"
+};
+var ItemTitle = function ItemTitle(_ref) {
+  var title = _ref.title,
+    formatMessage = _ref.formatMessage,
+    onSamePage = _ref.onSamePage,
+    isSource = _ref.isSource,
+    hasAccess = _ref.hasAccess;
+  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))), !hasAccess && /*#__PURE__*/React.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.requestAccess
+  }, formatMessage(_messages.syncBlockMessages.syncedLocationDropdownRequestAccess)));
+};
+var productIconMap = {
+  'confluence-page': _logo.ConfluenceIcon,
+  'jira-work-item': _logo.JiraIcon
+};
+var subTypeIconMap = {
+  live: _pageLiveDoc.default,
+  page: _page.default,
+  blogpost: _quotationMark.default
+};
+var getSubTypeIcon = function getSubTypeIcon(subType) {
+  return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : _page.default;
+};
+var ProductIcon = function ProductIcon(_ref2) {
+  var _productIconMap$produ;
+  var product = _ref2.product;
+  var ProductIcon = product ? (_productIconMap$produ = productIconMap[product]) !== null && _productIconMap$produ !== void 0 ? _productIconMap$produ : _logo.AtlassianIcon : _logo.AtlassianIcon;
+  return /*#__PURE__*/React.createElement("span", {
+    className: (0, _runtime.ax)(["_2rkol0p1 _bfhki8nm _1bsbgktf _4t3igktf _1e0c1txw _4cvr1h6o _1bah1h6o"])
+  }, /*#__PURE__*/React.createElement(ProductIcon, {
+    size: "xxsmall",
+    appearance: "neutral"
+  }));
+};
+var ItemIcon = function ItemIcon(_ref3) {
+  var reference = _ref3.reference;
+  var hasAccess = reference.hasAccess,
+    subType = reference.subType;
+  if (hasAccess) {
+    return /*#__PURE__*/React.createElement(_icon.IconTile, {
+      icon: getSubTypeIcon(subType),
+      label: "",
+      appearance: 'gray',
+      size: "xsmall"
+    });
+  }
+  return /*#__PURE__*/React.createElement(ProductIcon, {
+    product: reference.productType
+  });
+};
+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("div", {
+              key: reference.title,
+              className: (0, _runtime.ax)(["_2ll012x7"])
+            }, /*#__PURE__*/React.createElement(_tooltip.default, {
+              content: reference.title || reference.url || ''
+            }, /*#__PURE__*/React.createElement(_dropdownMenu.DropdownItem, {
+              elemBefore: /*#__PURE__*/React.createElement(ItemIcon, {
+                reference: reference
+              }),
+              href: reference.url,
+              target: "_blank",
+              key: reference.title
+            }, /*#__PURE__*/React.createElement(ItemTitle, {
+              title: reference.title || reference.url || '',
+              formatMessage: formatMessage,
+              onSamePage: reference.onSamePage,
+              isSource: reference.isSource,
+              hasAccess: reference.hasAccess
+            }))));
+          })));
+        } 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; }
@@ -29,8 +30,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   }
   var syncBlockInstance = syncBlockStore.referenceManager.getFromCache(syncBlockObject.node.attrs.resourceId);
   var isUnsyncedBlock = (syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error) === _editorSyncedBlockProvider.SyncBlockError.NotFound;
+  var isErroredBlock = syncBlockInstance === null || syncBlockInstance === void 0 ? void 0 : syncBlockInstance.error;
   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 +58,22 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
     }, hoverDecorationProps(nodeType, _consts.akEditorSelectedNodeClassName));
     items.push(deleteButton);
   } else {
+    if (!isErroredBlock && (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,34 @@
+
+._2rkol0p1{border-radius:var(--ds-radius-tile,25%)}
+._y44vfmxe{animation:kgnpaw5 .7s ease-in-out}
+._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}
+._1bsb19n7{width:106px}
+._1bsb1osq{width:100%}
+._1bsbgktf{width:20px}
+._1bsbo8uj{width:235px}
+._1bsbsmdz{width:342px}
+._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}
+._2ll012x7 a>span{column-gap:var(--ds-space-075,6px)}
+._4bfu1r31{text-decoration-color:currentColor}
+._4cvr1h6o{align-items:center}
+._4t3igktf{height:20px}
+._ahbq12x7{margin-inline-start:var(--ds-space-075,6px)}
+._ajmmnqa1{text-decoration-style:solid}
+._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
+._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}
+@keyframes kgnpaw5{0%{opacity:0}to{opacity:1}}