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

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.10",
+	"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.19.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"
 	},