@atlaskit/editor-plugin-synced-block 5.2.2 → 5.3.1

package/dist/es2019/ui/SyncBlockRefresher.js

@@ -1,9 +1,13 @@
 import { useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
+import { fg } from '@atlaskit/platform-feature-flags';
 export const SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
-// Component that refreshes synced block subscriptions at regular intervals
-// this is a workaround for the subscription mechanism not being real-time
+// Component that manages synced block data synchronization.
+// When the feature flag 'platform_synced_block_dogfooding' is enabled,
+// it uses provider-based GraphQL subscriptions for updates.
+// When disabled, it falls back to polling at regular intervals.
 export const SyncBlockRefresher = ({
   syncBlockStoreManager,
   api
@@ -16,9 +20,19 @@ export const SyncBlockRefresher = ({
       mode: (_states$connectivityS = states.connectivityState) === null || _states$connectivityS === void 0 ? void 0 : _states$connectivityS.mode
     };
   });
+  const featureFlagEnabled = fg('platform_synced_block_dogfooding');
+  const isOnline = !isOfflineMode(mode);
   useEffect(() => {
+    const useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  useEffect(() => {
+    const useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    if (useRealTimeSubscriptions) {
+      return;
+    }
     let interval = -1;
-    if (mode !== 'offline') {
+    if (isOnline) {
       interval = window.setInterval(() => {
         var _document;
         // check if document is visible to avoid unnecessary refreshes
@@ -32,6 +46,6 @@ export const SyncBlockRefresher = ({
     return () => {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/es2019/ui/SyncBlockRendererWrapper.js

@@ -5,21 +5,25 @@ const SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 const SyncBlockRendererWrapperComponent = ({
   syncedBlockRenderer,
   useFetchSyncBlockData,
-  localId,
   useFetchSyncBlockTitle,
+  localId,
   api
 }) => {
+  var _syncBlockFetchResult, _syncBlockFetchResult2;
+  const syncBlockFetchResult = useFetchSyncBlockData();
+  const contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 ? void 0 : (_syncBlockFetchResult2 = _syncBlockFetchResult.data) === null || _syncBlockFetchResult2 === void 0 ? void 0 : _syncBlockFetchResult2.contentUpdatedAt;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: SyncBlockSharedCssClassName.renderer
   }, syncedBlockRenderer({
-    useFetchSyncBlockData,
+    syncBlockFetchResult,
     api
   })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
     isSource: false,
     useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));
 };

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -39,17 +39,18 @@ const styles = {
 const ItemTitle = ({
   title,
   formatMessage,
-  onSamePage,
+  onSameDocument,
   isSource,
-  hasAccess
+  hasAccess,
+  productType
 }) => {
   return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.title
-  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+  }, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
@@ -66,7 +67,7 @@ const subTypeIconMap = {
   page: PageIcon,
   blogpost: QuotationMarkIcon
 };
-const getSubTypeIcon = subType => {
+const getConfluenceSubTypeIcon = subType => {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
 };
 const ProductIcon = ({
@@ -86,18 +87,19 @@ const ItemIcon = ({
 }) => {
   const {
     hasAccess,
-    subType
+    subType,
+    productType
   } = reference;
-  if (hasAccess) {
+  if (productType === 'confluence-page' && hasAccess) {
     return /*#__PURE__*/React.createElement(IconTile, {
-      icon: getSubTypeIcon(subType),
+      icon: getConfluenceSubTypeIcon(subType),
       label: "",
       appearance: 'gray',
       size: "xsmall"
     });
   }
   return /*#__PURE__*/React.createElement(ProductIcon, {
-    product: reference.productType
+    product: productType
   });
 };
 export const processReferenceData = (referenceData, intl) => {
@@ -230,9 +232,10 @@ const DropdownContent = ({
           }, /*#__PURE__*/React.createElement(ItemTitle, {
             title: reference.title || reference.url || '',
             formatMessage: formatMessage,
-            onSamePage: reference.onSamePage,
+            onSameDocument: reference.onSameDocument,
             isSource: reference.isSource,
-            hasAccess: reference.hasAccess
+            hasAccess: reference.hasAccess,
+            productType: reference.productType
           })))))));
         } else {
           return /*#__PURE__*/React.createElement(NoResultScreen, {

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

@@ -1,13 +1,15 @@
 import React from 'react';
 import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
+import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 import { SyncedLocationDropdown } from './SyncedLocationDropdown';
@@ -69,7 +71,21 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore) => {
           });
         }
       };
-      items.push(syncedLocation);
+      const unsyncButton = {
+        type: 'custom',
+        fallback: [],
+        render: view => {
+          return /*#__PURE__*/React.createElement(Button, {
+            areAnyNewToolbarFlagsEnabled: true,
+            icon: /*#__PURE__*/React.createElement(LinkBrokenIcon, {
+              label: ""
+            }),
+            title: formatMessage(messages.unsyncButton),
+            onClick: () => unsync(syncBlockStore, isBodiedSyncBlock, view)
+          });
+        }
+      };
+      items.push(syncedLocation, unsyncButton);
     }
     const copyButton = {
       id: 'editor.syncedBlock.copy',

package/dist/esm/editor-commands/index.js

@@ -1,11 +1,14 @@
+import { defaultSchema } from '@atlaskit/adf-schema/schema-default';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { copyDomNode, toDOM } from '@atlaskit/editor-common/copy-button';
+import { DOMSerializer, Fragment } from '@atlaskit/editor-prosemirror/model';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { syncedBlockPluginKey } from '../pm-plugins/main';
 import { canBeConvertedToSyncBlock, findSyncBlock, findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { FLAG_ID } from '../types';
+import { pasteSyncBlockHTMLContent } from './utils';
 export var createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     syncBlockStore = _ref.syncBlockStore,
@@ -168,4 +171,33 @@ export var removeSyncedBlock = function removeSyncedBlock(api) {
     api === null || api === void 0 || api.core.actions.focus();
     return true;
   };
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export var unsync = function unsync(storeManager, isBodiedSyncBlock, view) {
+  var _storeManager$referen;
+  if (!view) {
+    return false;
+  }
+  var state = view.state;
+  var syncBlock = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
+  if (!syncBlock) {
+    return false;
+  }
+  if (isBodiedSyncBlock) {
+    return true;
+  }
+
+  // handle syncBlock unsync
+  var syncBlockContent = (_storeManager$referen = storeManager.referenceManager.getFromCache(syncBlock.node.attrs.resourceId)) === null || _storeManager$referen === void 0 || (_storeManager$referen = _storeManager$referen.data) === null || _storeManager$referen === void 0 ? void 0 : _storeManager$referen.content;
+  if (!syncBlockContent) {
+    return false;
+  }
+
+  // use defaultSchema for serialization so we can serialize any type of nodes and marks despite current editor's schema might not allow it
+  var contentFragment = Fragment.fromJSON(defaultSchema, syncBlockContent);
+  var contentDOM = DOMSerializer.fromSchema(defaultSchema).serializeFragment(contentFragment);
+  return pasteSyncBlockHTMLContent(contentDOM, view);
 };

package/dist/esm/editor-commands/utils.js

@@ -0,0 +1,14 @@
+export var pasteSyncBlockHTMLContent = function pasteSyncBlockHTMLContent(contentDOM, view) {
+  var tmpDiv = document.createElement('div');
+  tmpDiv.appendChild(contentDOM);
+
+  // This is required so that prosemirror can read the fragment context and slice properly
+  if (tmpDiv.firstChild instanceof HTMLElement) {
+    tmpDiv.firstChild.setAttribute('data-pm-slice', '0 0 []');
+
+    // As per requirement - when unsync reference block, it should render its content as copy&paste behaviour
+    // Hence here we call pasteHTML to evoke editor paste logic that handles any unsupported nodes/marks
+    return view.pasteHTML(tmpDiv.innerHTML);
+  }
+  return false;
+};

package/dist/esm/ui/SyncBlockLabel.js

@@ -1,31 +1,123 @@
-import React from 'react';
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useState } from 'react';
+import isYesterday from 'date-fns/isYesterday';
 import { useIntl } from 'react-intl-next';
 import { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { SyncBlockLabelSharedCssClassName } from '@atlaskit/editor-common/sync-block';
 import BlockSyncedIcon from '@atlaskit/icon-lab/core/block-synced';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 var SyncBlockLabelDataId = 'sync-block-label';
+var SECONDS_IN_MINUTE = 60;
+var SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+var SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+var SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+var SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+var SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
+export var formatElapsedTime = function formatElapsedTime(isoDate, intl) {
+  var now = Date.now();
+  var date = new Date(isoDate).getTime();
+  var diffInSeconds = Math.floor((now - date) / 1000);
+  var dateObj = new Date(isoDate);
+
+  // Show "yesterday" when timestamp is from the previous calendar day
+  if (isYesterday(dateObj) && diffInSeconds >= SECONDS_IN_DAY) {
+    return intl.formatRelativeTime(-1, 'day', {
+      numeric: 'auto',
+      style: 'long'
+    });
+  }
+  if (diffInSeconds < SECONDS_IN_MINUTE) {
+    return intl.formatRelativeTime(-Math.max(diffInSeconds, 1), 'second', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_HOUR) {
+    var minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
+    return intl.formatRelativeTime(-minutes, 'minute', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_DAY) {
+    var hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
+    return intl.formatRelativeTime(-hours, 'hour', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_WEEK) {
+    var days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
+    return intl.formatRelativeTime(-days, 'day', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_MONTH) {
+    var weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
+    return intl.formatRelativeTime(-weeks, 'week', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_YEAR) {
+    var months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
+    return intl.formatRelativeTime(-months, 'month', {
+      style: 'long'
+    });
+  } else {
+    var years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
+    return intl.formatRelativeTime(-years, 'year', {
+      style: 'long'
+    });
+  }
+};
 var SyncBlockLabelComponent = function SyncBlockLabelComponent(_ref) {
   var isSource = _ref.isSource,
     useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
-    localId = _ref.localId;
-  var _useIntl = useIntl(),
-    formatMessage = _useIntl.formatMessage;
+    localId = _ref.localId,
+    contentUpdatedAt = _ref.contentUpdatedAt;
+  var intl = useIntl();
+  var formatMessage = intl.formatMessage;
   var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
-  var tooltipContent = isSource ? formatMessage(messages.sourceSyncBlockTooltip) : title ? formatMessage(messages.referenceSyncBlockTooltip, {
-    title: title
-  }) : formatMessage(messages.defaultSyncBlockTooltip);
+  var _useState = useState(formatMessage(messages.defaultSyncBlockTooltip)),
+    _useState2 = _slicedToArray(_useState, 2),
+    tooltipContent = _useState2[0],
+    setTooltipContent = _useState2[1];
+  var tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
+  if (isSource) {
+    tooltipMessage = formatMessage(messages.sourceSyncBlockTooltip);
+  } else if (title) {
+    tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
+      title: title
+    });
+  }
+  var updateTooltipContent = useCallback(function () {
+    if (!fg('platform_synced_block_dogfooding')) {
+      return;
+    }
+    var tooltipContent = tooltipMessage;
+    if (contentUpdatedAt) {
+      var elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
+      tooltipContent = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.inverse"
+      }, tooltipMessage), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.inverse",
+        weight: "bold"
+      }, formatMessage(messages.referenceSyncBlockLastEdited)), /*#__PURE__*/React.createElement(Text, {
+        size: "small",
+        color: "color.text.inverse"
+      }, elapsedTime));
+    }
+    setTooltipContent(tooltipContent);
+  }, [contentUpdatedAt, formatMessage, intl, tooltipMessage]);
   var ariaDescribedById = "sync-block-label-description-".concat(localId);
   return /*#__PURE__*/React.createElement(Tooltip, {
     position: "top",
-    content: tooltipContent
+    content: fg('platform_synced_block_dogfooding') ? tooltipContent : tooltipMessage
     // workaround because tooltip adds aria-describedby with a new id every time the tooltip is opened
     // this causes an infinite rerender loop because of the forwardRef from the node view we are inside in bodiedSyncBlock
     // tooltip content is available for screen readers in visually hidden content after the label
     ,
     isScreenReaderAnnouncementDisabled: true
+    // using this to ensure that the 'last edited' time is updated when the tooltip is opened
+    ,
+    onShow: updateTooltipContent
   }, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/esm/ui/SyncBlockRefresher.js

@@ -1,9 +1,13 @@
 import { useEffect } from 'react';
 import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { isOfflineMode } from '@atlaskit/editor-plugin-connectivity';
+import { fg } from '@atlaskit/platform-feature-flags';
 export var SYNC_BLOCK_FETCH_INTERVAL = 3000;
 
-// Component that refreshes synced block subscriptions at regular intervals
-// this is a workaround for the subscription mechanism not being real-time
+// Component that manages synced block data synchronization.
+// When the feature flag 'platform_synced_block_dogfooding' is enabled,
+// it uses provider-based GraphQL subscriptions for updates.
+// When disabled, it falls back to polling at regular intervals.
 export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
@@ -14,9 +18,19 @@ export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
       };
     }),
     mode = _useSharedPluginState.mode;
+  var featureFlagEnabled = fg('platform_synced_block_dogfooding');
+  var isOnline = !isOfflineMode(mode);
   useEffect(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  useEffect(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    if (useRealTimeSubscriptions) {
+      return;
+    }
     var interval = -1;
-    if (mode !== 'offline') {
+    if (isOnline) {
       interval = window.setInterval(function () {
         var _document;
         // check if document is visible to avoid unnecessary refreshes
@@ -30,6 +44,6 @@ export var SyncBlockRefresher = function SyncBlockRefresher(_ref) {
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/esm/ui/SyncBlockRendererWrapper.js

@@ -3,22 +3,26 @@ import { SyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block'
 import { SyncBlockLabel } from './SyncBlockLabel';
 var SyncBlockRendererWrapperDataId = 'sync-block-plugin-renderer-wrapper';
 var SyncBlockRendererWrapperComponent = function SyncBlockRendererWrapperComponent(_ref) {
+  var _syncBlockFetchResult;
   var syncedBlockRenderer = _ref.syncedBlockRenderer,
     useFetchSyncBlockData = _ref.useFetchSyncBlockData,
-    localId = _ref.localId,
     useFetchSyncBlockTitle = _ref.useFetchSyncBlockTitle,
+    localId = _ref.localId,
     api = _ref.api;
+  var syncBlockFetchResult = useFetchSyncBlockData();
+  var contentUpdatedAt = syncBlockFetchResult === null || syncBlockFetchResult === void 0 || (_syncBlockFetchResult = syncBlockFetchResult.syncBlockInstance) === null || _syncBlockFetchResult === void 0 || (_syncBlockFetchResult = _syncBlockFetchResult.data) === null || _syncBlockFetchResult === void 0 ? void 0 : _syncBlockFetchResult.contentUpdatedAt;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: SyncBlockSharedCssClassName.renderer
   }, syncedBlockRenderer({
-    useFetchSyncBlockData: useFetchSyncBlockData,
+    syncBlockFetchResult: syncBlockFetchResult,
     api: api
   })), /*#__PURE__*/React.createElement(SyncBlockLabel, {
     isSource: false,
     useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));
 };

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -47,16 +47,17 @@ var styles = {
 var ItemTitle = function ItemTitle(_ref) {
   var title = _ref.title,
     formatMessage = _ref.formatMessage,
-    onSamePage = _ref.onSamePage,
+    onSameDocument = _ref.onSameDocument,
     isSource = _ref.isSource,
-    hasAccess = _ref.hasAccess;
+    hasAccess = _ref.hasAccess,
+    productType = _ref.productType;
   return /*#__PURE__*/React.createElement(Inline, null, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.title
-  }, title), onSamePage && /*#__PURE__*/React.createElement(Box, {
+  }, title), onSameDocument && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(messages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(Box, {
+  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? messages.syncedLocationDropdownTitleNoteForConfluencePage : messages.syncedLocationDropdownTitleNoteForJiraWorkItem)), isSource && /*#__PURE__*/React.createElement(Box, {
     as: "span",
     xcss: styles.lozenge
   }, /*#__PURE__*/React.createElement(Lozenge, null, formatMessage(messages.syncedLocationDropdownSourceLozenge))), !hasAccess && /*#__PURE__*/React.createElement(Box, {
@@ -73,7 +74,7 @@ var subTypeIconMap = {
   page: PageIcon,
   blogpost: QuotationMarkIcon
 };
-var getSubTypeIcon = function getSubTypeIcon(subType) {
+var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(subType) {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : PageIcon;
 };
 var ProductIcon = function ProductIcon(_ref2) {
@@ -90,17 +91,18 @@ var ProductIcon = function ProductIcon(_ref2) {
 var ItemIcon = function ItemIcon(_ref3) {
   var reference = _ref3.reference;
   var hasAccess = reference.hasAccess,
-    subType = reference.subType;
-  if (hasAccess) {
+    subType = reference.subType,
+    productType = reference.productType;
+  if (productType === 'confluence-page' && hasAccess) {
     return /*#__PURE__*/React.createElement(IconTile, {
-      icon: getSubTypeIcon(subType),
+      icon: getConfluenceSubTypeIcon(subType),
       label: "",
       appearance: 'gray',
       size: "xsmall"
     });
   }
   return /*#__PURE__*/React.createElement(ProductIcon, {
-    product: reference.productType
+    product: productType
   });
 };
 export var processReferenceData = function processReferenceData(referenceData, intl) {
@@ -268,9 +270,10 @@ var DropdownContent = function DropdownContent(_ref7) {
             }, /*#__PURE__*/React.createElement(ItemTitle, {
               title: reference.title || reference.url || '',
               formatMessage: formatMessage,
-              onSamePage: reference.onSamePage,
+              onSameDocument: reference.onSameDocument,
               isSource: reference.isSource,
-              hasAccess: reference.hasAccess
+              hasAccess: reference.hasAccess,
+              productType: reference.productType
             }))));
           })));
         } else {

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

@@ -3,14 +3,16 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 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) { _defineProperty(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; }
 import React from 'react';
 import commonMessages, { syncBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles/consts';
 import { SyncBlockError } from '@atlaskit/editor-synced-block-provider';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
 import EditIcon from '@atlaskit/icon/core/edit';
+import LinkBrokenIcon from '@atlaskit/icon/core/link-broken';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock } from '../editor-commands';
+import { copySyncedBlockReferenceToClipboard, editSyncedBlockSource, removeSyncedBlock, unsync } from '../editor-commands';
 import { findSyncBlockOrBodiedSyncBlock, isBodiedSyncBlockNode } from '../pm-plugins/utils/utils';
 import { SYNCED_BLOCK_BUTTON_TEST_ID } from '../types';
 import { SyncedLocationDropdown } from './SyncedLocationDropdown';
@@ -64,7 +66,23 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
           });
         }
       };
-      items.push(syncedLocation);
+      var unsyncButton = {
+        type: 'custom',
+        fallback: [],
+        render: function render(view) {
+          return /*#__PURE__*/React.createElement(Button, {
+            areAnyNewToolbarFlagsEnabled: true,
+            icon: /*#__PURE__*/React.createElement(LinkBrokenIcon, {
+              label: ""
+            }),
+            title: formatMessage(messages.unsyncButton),
+            onClick: function onClick() {
+              return unsync(syncBlockStore, isBodiedSyncBlock, view);
+            }
+          });
+        }
+      };
+      items.push(syncedLocation, unsyncButton);
     }
     var copyButton = _objectSpread({
       id: 'editor.syncedBlock.copy',

package/dist/types/editor-commands/index.d.ts

@@ -1,6 +1,7 @@
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 type createSyncedBlockProps = {
@@ -14,4 +15,8 @@ export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBloc
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export declare const unsync: (storeManager: SyncBlockStoreManager, isBodiedSyncBlock: boolean, view?: EditorView) => boolean;
 export {};

package/dist/types/editor-commands/utils.d.ts

@@ -0,0 +1,2 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const pasteSyncBlockHTMLContent: (contentDOM: HTMLElement | DocumentFragment, view: EditorView) => boolean;

package/dist/types/syncedBlockPluginType.d.ts

@@ -37,7 +37,7 @@ export type SyncedBlockEditorProps = {
 };
 export type SyncedBlockRendererProps = {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
-    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
+    syncBlockFetchResult: UseFetchSyncBlockDataResult;
 };
 export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOptions {
     enableSourceCreation?: boolean;

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

@@ -1,8 +1,11 @@
 import React from 'react';
+import { type IntlShape } from 'react-intl-next';
+export declare const formatElapsedTime: (isoDate: string, intl: IntlShape) => string;
 type SyncBlockLabelProps = {
+    contentUpdatedAt?: string;
     isSource: boolean;
     localId: string;
     useFetchSyncBlockTitle?: () => string | undefined;
 };
-export declare const SyncBlockLabel: React.MemoExoticComponent<({ isSource, useFetchSyncBlockTitle, localId, }: SyncBlockLabelProps) => React.JSX.Element>;
+export declare const SyncBlockLabel: React.MemoExoticComponent<({ isSource, useFetchSyncBlockTitle, localId, contentUpdatedAt, }: SyncBlockLabelProps) => React.JSX.Element>;
 export {};

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

@@ -9,5 +9,5 @@ type Props = {
     useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
     useFetchSyncBlockTitle: () => string | undefined;
 };
-export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ syncedBlockRenderer, useFetchSyncBlockData, localId, useFetchSyncBlockTitle, api, }: Props) => React.JSX.Element>;
+export declare const SyncBlockRendererWrapper: React.MemoExoticComponent<({ syncedBlockRenderer, useFetchSyncBlockData, useFetchSyncBlockTitle, localId, api, }: Props) => React.JSX.Element>;
 export {};

package/dist/types-ts4.5/editor-commands/index.d.ts

@@ -1,6 +1,7 @@
 import { type DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import type { Command, EditorCommand, ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
 import { type Transaction } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 type createSyncedBlockProps = {
@@ -14,4 +15,8 @@ export declare const copySyncedBlockReferenceToClipboardEditorCommand: (syncBloc
 export declare const copySyncedBlockReferenceToClipboard: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const editSyncedBlockSource: (syncBlockStore: SyncBlockStoreManager, api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
 export declare const removeSyncedBlock: (api?: ExtractInjectionAPI<SyncedBlockPlugin>) => Command;
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export declare const unsync: (storeManager: SyncBlockStoreManager, isBodiedSyncBlock: boolean, view?: EditorView) => boolean;
 export {};

package/dist/types-ts4.5/editor-commands/utils.d.ts

@@ -0,0 +1,2 @@
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+export declare const pasteSyncBlockHTMLContent: (contentDOM: HTMLElement | DocumentFragment, view: EditorView) => boolean;

package/dist/types-ts4.5/syncedBlockPluginType.d.ts

@@ -37,7 +37,7 @@ export type SyncedBlockEditorProps = {
 };
 export type SyncedBlockRendererProps = {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
-    useFetchSyncBlockData: () => UseFetchSyncBlockDataResult;
+    syncBlockFetchResult: UseFetchSyncBlockDataResult;
 };
 export interface SyncedBlockPluginOptions extends LongPressSelectionPluginOptions {
     enableSourceCreation?: boolean;