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

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 5.3.1
+
+### Patch Changes
+
+- [`87abc5dda86fe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/87abc5dda86fe) -
+  [ux] Show last edited time in sync block tooltip
+- Updated dependencies
+
+## 5.3.0
+
+### Minor Changes
+
+- [`870c3baec758b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/870c3baec758b) -
+  Enable consumers to use GraphQL subscription for fetching the block data when the block changes
+
+### Patch Changes
+
+- [`5c522f81f181e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5c522f81f181e) -
+  [ux] EDITOR-4369 Support synced location for references on Jira in source and reference synced
+  block
+- [`058065aadf69f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/058065aadf69f) -
+  [ux] [EDITOR-2851] Support reference sync block unsyc
+- Updated dependencies
+
 ## 5.2.2
 
 ### Patch Changes

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

@@ -3,15 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+exports.unsync = exports.removeSyncedBlock = exports.editSyncedBlockSource = exports.createSyncedBlock = exports.copySyncedBlockReferenceToClipboardEditorCommand = exports.copySyncedBlockReferenceToClipboard = void 0;
+var _schemaDefault = require("@atlaskit/adf-schema/schema-default");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _copyButton = require("@atlaskit/editor-common/copy-button");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _main = require("../pm-plugins/main");
 var _utils2 = require("../pm-plugins/utils/utils");
 var _types = require("../types");
+var _utils3 = require("./utils");
 var createSyncedBlock = exports.createSyncedBlock = function createSyncedBlock(_ref) {
   var tr = _ref.tr,
     syncBlockStore = _ref.syncBlockStore,
@@ -174,4 +177,33 @@ var removeSyncedBlock = exports.removeSyncedBlock = function removeSyncedBlock(a
     api === null || api === void 0 || api.core.actions.focus();
     return true;
   };
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+var unsync = exports.unsync = function unsync(storeManager, isBodiedSyncBlock, view) {
+  var _storeManager$referen;
+  if (!view) {
+    return false;
+  }
+  var state = view.state;
+  var syncBlock = (0, _utils2.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 = _model.Fragment.fromJSON(_schemaDefault.defaultSchema, syncBlockContent);
+  var contentDOM = _model.DOMSerializer.fromSchema(_schemaDefault.defaultSchema).serializeFragment(contentFragment);
+  return (0, _utils3.pasteSyncBlockHTMLContent)(contentDOM, view);
 };

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pasteSyncBlockHTMLContent = void 0;
+var pasteSyncBlockHTMLContent = exports.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/cjs/ui/SyncBlockLabel.js

@@ -1,38 +1,132 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SyncBlockLabel = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.formatElapsedTime = exports.SyncBlockLabel = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _isYesterday = _interopRequireDefault(require("date-fns/isYesterday"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
 var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _blockSynced = _interopRequireDefault(require("@atlaskit/icon-lab/core/block-synced"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var 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;
+var formatElapsedTime = exports.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 ((0, _isYesterday.default)(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 = (0, _reactIntlNext.useIntl)(),
-    formatMessage = _useIntl.formatMessage;
+    localId = _ref.localId,
+    contentUpdatedAt = _ref.contentUpdatedAt;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var formatMessage = intl.formatMessage;
   var title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
-  var tooltipContent = isSource ? formatMessage(_messages.syncBlockMessages.sourceSyncBlockTooltip) : title ? formatMessage(_messages.syncBlockMessages.referenceSyncBlockTooltip, {
-    title: title
-  }) : formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip);
+  var _useState = (0, _react.useState)(formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    tooltipContent = _useState2[0],
+    setTooltipContent = _useState2[1];
+  var tooltipMessage = formatMessage(_messages.syncBlockMessages.defaultSyncBlockTooltip);
+  if (isSource) {
+    tooltipMessage = formatMessage(_messages.syncBlockMessages.sourceSyncBlockTooltip);
+  } else if (title) {
+    tooltipMessage = formatMessage(_messages.syncBlockMessages.referenceSyncBlockTooltip, {
+      title: title
+    });
+  }
+  var updateTooltipContent = (0, _react.useCallback)(function () {
+    if (!(0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding')) {
+      return;
+    }
+    var tooltipContent = tooltipMessage;
+    if (contentUpdatedAt) {
+      var elapsedTime = formatElapsedTime(contentUpdatedAt, intl);
+      tooltipContent = /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.inverse"
+      }, tooltipMessage), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+        size: "small",
+        color: "color.text.inverse",
+        weight: "bold"
+      }, formatMessage(_messages.syncBlockMessages.referenceSyncBlockLastEdited)), /*#__PURE__*/_react.default.createElement(_compiled.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.default.createElement(_tooltip.default, {
     position: "top",
-    content: tooltipContent
+    content: (0, _platformFeatureFlags.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.default.createElement("div", {
     "data-testid": SyncBlockLabelDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop

package/dist/cjs/ui/SyncBlockRefresher.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.SyncBlockRefresher = exports.SYNC_BLOCK_FETCH_INTERVAL = void 0;
 var _react = require("react");
 var _hooks = require("@atlaskit/editor-common/hooks");
+var _editorPluginConnectivity = require("@atlaskit/editor-plugin-connectivity");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var SYNC_BLOCK_FETCH_INTERVAL = exports.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.
 var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefresher(_ref) {
   var syncBlockStoreManager = _ref.syncBlockStoreManager,
     api = _ref.api;
@@ -20,9 +24,19 @@ var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefreshe
       };
     }),
     mode = _useSharedPluginState.mode;
+  var featureFlagEnabled = (0, _platformFeatureFlags.fg)('platform_synced_block_dogfooding');
+  var isOnline = !(0, _editorPluginConnectivity.isOfflineMode)(mode);
   (0, _react.useEffect)(function () {
+    var useRealTimeSubscriptions = featureFlagEnabled && isOnline;
+    syncBlockStoreManager.referenceManager.setRealTimeSubscriptionsEnabled(useRealTimeSubscriptions);
+  }, [syncBlockStoreManager, featureFlagEnabled, isOnline]);
+  (0, _react.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
@@ -36,6 +50,6 @@ var SyncBlockRefresher = exports.SyncBlockRefresher = function SyncBlockRefreshe
     return function () {
       window.clearInterval(interval);
     };
-  }, [syncBlockStoreManager, mode]);
+  }, [syncBlockStoreManager, isOnline, featureFlagEnabled]);
   return null;
 };

package/dist/cjs/ui/SyncBlockRendererWrapper.js

@@ -10,22 +10,26 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 var _SyncBlockLabel = require("./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.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": SyncBlockRendererWrapperDataId
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
     className: _syncBlock.SyncBlockSharedCssClassName.renderer
   }, syncedBlockRenderer({
-    useFetchSyncBlockData: useFetchSyncBlockData,
+    syncBlockFetchResult: syncBlockFetchResult,
     api: api
   })), /*#__PURE__*/_react.default.createElement(_SyncBlockLabel.SyncBlockLabel, {
     isSource: false,
     useFetchSyncBlockTitle: useFetchSyncBlockTitle,
+    contentUpdatedAt: contentUpdatedAt,
     localId: localId
   }));
 };

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -56,16 +56,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(_compiled.Inline, null, /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.title
-  }, title), onSamePage && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }, title), onSameDocument && /*#__PURE__*/React.createElement(_compiled.Box, {
     as: "span",
     xcss: styles.note
-  }, "\xA0- ", formatMessage(_messages.syncBlockMessages.syncedLocationDropdownTitleNote)), isSource && /*#__PURE__*/React.createElement(_compiled.Box, {
+  }, "\xA0- ", formatMessage(productType === 'confluence-page' ? _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForConfluencePage : _messages.syncBlockMessages.syncedLocationDropdownTitleNoteForJiraWorkItem)), 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, {
@@ -82,7 +83,7 @@ var subTypeIconMap = {
   page: _page.default,
   blogpost: _quotationMark.default
 };
-var getSubTypeIcon = function getSubTypeIcon(subType) {
+var getConfluenceSubTypeIcon = function getConfluenceSubTypeIcon(subType) {
   return subType && subType in subTypeIconMap ? subTypeIconMap[subType] : _page.default;
 };
 var ProductIcon = function ProductIcon(_ref2) {
@@ -99,17 +100,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(_icon.IconTile, {
-      icon: getSubTypeIcon(subType),
+      icon: getConfluenceSubTypeIcon(subType),
       label: "",
       appearance: 'gray',
       size: "xsmall"
     });
   }
   return /*#__PURE__*/React.createElement(ProductIcon, {
-    product: reference.productType
+    product: productType
   });
 };
 var processReferenceData = exports.processReferenceData = function processReferenceData(referenceData, intl) {
@@ -277,9 +279,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/cjs/ui/floating-toolbar.js

@@ -9,12 +9,14 @@ exports.getToolbarConfig = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
+var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _consts = require("@atlaskit/editor-shared-styles/consts");
 var _editorSyncedBlockProvider = require("@atlaskit/editor-synced-block-provider");
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
 var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
+var _linkBroken = _interopRequireDefault(require("@atlaskit/icon/core/link-broken"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _editorCommands = require("../editor-commands");
 var _utils2 = require("../pm-plugins/utils/utils");
@@ -73,7 +75,23 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
           });
         }
       };
-      items.push(syncedLocation);
+      var unsyncButton = {
+        type: 'custom',
+        fallback: [],
+        render: function render(view) {
+          return /*#__PURE__*/_react.default.createElement(_ui.FloatingToolbarButton, {
+            areAnyNewToolbarFlagsEnabled: true,
+            icon: /*#__PURE__*/_react.default.createElement(_linkBroken.default, {
+              label: ""
+            }),
+            title: formatMessage(_messages.syncBlockMessages.unsyncButton),
+            onClick: function onClick() {
+              return (0, _editorCommands.unsync)(syncBlockStore, isBodiedSyncBlock, view);
+            }
+          });
+        }
+      };
+      items.push(syncedLocation, unsyncButton);
     }
     var copyButton = _objectSpread({
       id: 'editor.syncedBlock.copy',

package/dist/es2019/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 const createSyncedBlock = ({
   tr,
   syncBlockStore,
@@ -176,4 +179,35 @@ export const removeSyncedBlock = api => (state, dispatch, _view) => {
   dispatch(removeTr);
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   return true;
+};
+
+/**
+ * Deletes (bodied)SyncBlock node and paste its content to the editor
+ */
+export const unsync = (storeManager, isBodiedSyncBlock, view) => {
+  var _storeManager$referen, _storeManager$referen2;
+  if (!view) {
+    return false;
+  }
+  const {
+    state
+  } = view;
+  const syncBlock = findSyncBlockOrBodiedSyncBlock(state.schema, state.selection);
+  if (!syncBlock) {
+    return false;
+  }
+  if (isBodiedSyncBlock) {
+    return true;
+  }
+
+  // handle syncBlock unsync
+  const syncBlockContent = (_storeManager$referen = storeManager.referenceManager.getFromCache(syncBlock.node.attrs.resourceId)) === null || _storeManager$referen === void 0 ? void 0 : (_storeManager$referen2 = _storeManager$referen.data) === null || _storeManager$referen2 === void 0 ? void 0 : _storeManager$referen2.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
+  const contentFragment = Fragment.fromJSON(defaultSchema, syncBlockContent);
+  const contentDOM = DOMSerializer.fromSchema(defaultSchema).serializeFragment(contentFragment);
+  return pasteSyncBlockHTMLContent(contentDOM, view);
 };

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

@@ -0,0 +1,14 @@
+export const pasteSyncBlockHTMLContent = (contentDOM, view) => {
+  const 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/es2019/ui/SyncBlockLabel.js

@@ -1,33 +1,122 @@
-import React from 'react';
+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';
 const SyncBlockLabelDataId = 'sync-block-label';
+const SECONDS_IN_MINUTE = 60;
+const SECONDS_IN_HOUR = SECONDS_IN_MINUTE * 60;
+const SECONDS_IN_DAY = SECONDS_IN_HOUR * 24;
+const SECONDS_IN_WEEK = SECONDS_IN_DAY * 7;
+const SECONDS_IN_MONTH = SECONDS_IN_DAY * 30;
+const SECONDS_IN_YEAR = SECONDS_IN_DAY * 365;
+export const formatElapsedTime = (isoDate, intl) => {
+  const now = Date.now();
+  const date = new Date(isoDate).getTime();
+  const diffInSeconds = Math.floor((now - date) / 1000);
+  const 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) {
+    const minutes = Math.floor(diffInSeconds / SECONDS_IN_MINUTE);
+    return intl.formatRelativeTime(-minutes, 'minute', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_DAY) {
+    const hours = Math.floor(diffInSeconds / SECONDS_IN_HOUR);
+    return intl.formatRelativeTime(-hours, 'hour', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_WEEK) {
+    const days = Math.floor(diffInSeconds / SECONDS_IN_DAY);
+    return intl.formatRelativeTime(-days, 'day', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_MONTH) {
+    const weeks = Math.floor(diffInSeconds / SECONDS_IN_WEEK);
+    return intl.formatRelativeTime(-weeks, 'week', {
+      style: 'long'
+    });
+  } else if (diffInSeconds < SECONDS_IN_YEAR) {
+    const months = Math.floor(diffInSeconds / SECONDS_IN_MONTH);
+    return intl.formatRelativeTime(-months, 'month', {
+      style: 'long'
+    });
+  } else {
+    const years = Math.floor(diffInSeconds / SECONDS_IN_YEAR);
+    return intl.formatRelativeTime(-years, 'year', {
+      style: 'long'
+    });
+  }
+};
 const SyncBlockLabelComponent = ({
   isSource,
   useFetchSyncBlockTitle,
-  localId
+  localId,
+  contentUpdatedAt
 }) => {
+  const intl = useIntl();
   const {
     formatMessage
-  } = useIntl();
+  } = intl;
   const title = useFetchSyncBlockTitle === null || useFetchSyncBlockTitle === void 0 ? void 0 : useFetchSyncBlockTitle();
-  const tooltipContent = isSource ? formatMessage(messages.sourceSyncBlockTooltip) : title ? formatMessage(messages.referenceSyncBlockTooltip, {
-    title
-  }) : formatMessage(messages.defaultSyncBlockTooltip);
+  const [tooltipContent, setTooltipContent] = useState(formatMessage(messages.defaultSyncBlockTooltip));
+  let tooltipMessage = formatMessage(messages.defaultSyncBlockTooltip);
+  if (isSource) {
+    tooltipMessage = formatMessage(messages.sourceSyncBlockTooltip);
+  } else if (title) {
+    tooltipMessage = formatMessage(messages.referenceSyncBlockTooltip, {
+      title
+    });
+  }
+  const updateTooltipContent = useCallback(() => {
+    if (!fg('platform_synced_block_dogfooding')) {
+      return;
+    }
+    let tooltipContent = tooltipMessage;
+    if (contentUpdatedAt) {
+      const 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]);
   const ariaDescribedById = `sync-block-label-description-${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