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

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 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/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/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/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/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/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/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-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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "5.2.2",
+	"version": "5.3.0",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/editor-plugin-selection": "^7.0.0",
 		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
-		"@atlaskit/editor-synced-block-provider": "^3.12.0",
+		"@atlaskit/editor-synced-block-provider": "^3.13.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/editor-toolbar": "^0.19.0",
 		"@atlaskit/flag": "^17.8.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^17.1.0",
 		"@atlaskit/spinner": "19.0.9",
-		"@atlaskit/tmp-editor-statsig": "^16.28.0",
+		"@atlaskit/tmp-editor-statsig": "^16.30.0",
 		"@atlaskit/tokens": "10.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",