@atlaskit/editor-plugin-synced-block 24.0.6 → 24.0.7

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 24.0.7
+
+### Patch Changes
+
+- [`63c2a47db7f66`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63c2a47db7f66) -
+  Pass the current editor document into the lookup for synced locations behind
+  platform_editor_blocks_patch_12, including references added, removed, or unsynced before saving.
+  Reconcile saved references with the current document, preserving locations on other documents.
+- Updated dependencies
+
 ## 24.0.6
 
 ### Patch Changes

package/dist/cjs/ui/SyncedLocationDropdown.js

@@ -551,6 +551,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
 };
 var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref8) {
   var syncBlockStore = _ref8.syncBlockStore,
+    doc = _ref8.doc,
     resourceId = _ref8.resourceId,
     intl = _ref8.intl,
     isSource = _ref8.isSource,
@@ -566,7 +567,8 @@ var SyncedLocationDropdownWithCount = exports.SyncedLocationDropdownWithCount =
       isSource: isSource,
       localId: localId,
       resourceId: resourceId,
-      syncBlockStore: syncBlockStore
+      syncBlockStore: syncBlockStore,
+      doc: doc
     }),
     fetchStatus = _useReferenceData.fetchStatus,
     locations = _useReferenceData.locations;
@@ -706,24 +708,29 @@ var DropdownContent = function DropdownContent(_ref1) {
 };
 var useReferenceData = function useReferenceData(_ref11) {
   var syncBlockStore = _ref11.syncBlockStore,
+    doc = _ref11.doc,
     resourceId = _ref11.resourceId,
     intl = _ref11.intl,
     isSource = _ref11.isSource,
     localId = _ref11.localId;
-  var _useState9 = (0, _react.useState)(function () {
-      return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
-    }),
+  // Refresh locations when the toolbar opens, rather than on every document edit.
+  var _useState9 = (0, _react.useState)(doc),
     _useState0 = (0, _slicedToArray2.default)(_useState9, 1),
-    isNewSourceBlock = _useState0[0];
+    docAtMount = _useState0[0];
   var _useState1 = (0, _react.useState)(function () {
+      return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
+    }),
+    _useState10 = (0, _slicedToArray2.default)(_useState1, 1),
+    isNewSourceBlock = _useState10[0];
+  var _useState11 = (0, _react.useState)(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
         locations: EMPTY_LOCATIONS
       };
     }),
-    _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
-    state = _useState10[0],
-    setState = _useState10[1];
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
   (0, _react.useEffect)(function () {
     var isCurrentRequest = true;
     setState({
@@ -737,7 +744,7 @@ var useReferenceData = function useReferenceData(_ref11) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               _context2.next = 1;
-              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource, docAtMount);
             case 1:
               response = _context2.sent;
               if (isCurrentRequest) {
@@ -777,7 +784,7 @@ var useReferenceData = function useReferenceData(_ref11) {
     return function () {
       isCurrentRequest = false;
     };
-  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
+  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock, docAtMount]);
   return {
     fetchStatus: state.fetchStatus,
     locations: state.locations

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

@@ -87,6 +87,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
           return /*#__PURE__*/_react.default.createElement(_SyncedLocationDropdown.SyncedLocationDropdownWithCount, {
             key: "".concat(resourceId, ":").concat(localId, ":").concat(isBodiedSyncBlock),
             syncBlockStore: syncBlockStore,
+            doc: state.doc,
             resourceId: resourceId,
             localId: localId,
             intl: intl,

package/dist/es2019/ui/SyncedLocationDropdown.js

@@ -510,6 +510,7 @@ const EditorPositionedSyncedLocationDropdown = ({
 };
 export const SyncedLocationDropdownWithCount = ({
   syncBlockStore,
+  doc,
   resourceId,
   intl,
   isSource,
@@ -526,7 +527,8 @@ export const SyncedLocationDropdownWithCount = ({
     isSource,
     localId,
     resourceId,
-    syncBlockStore
+    syncBlockStore,
+    doc
   });
   const referenceCount = useMemo(() => {
     switch (locations.kind) {
@@ -633,11 +635,14 @@ const DropdownContent = ({
 };
 const useReferenceData = ({
   syncBlockStore,
+  doc,
   resourceId,
   intl,
   isSource,
   localId
 }) => {
+  // Refresh locations when the toolbar opens, rather than on every document edit.
+  const [docAtMount] = useState(doc);
   const [isNewSourceBlock] = useState(() => isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId));
   const [state, setState] = useState(() => ({
     fetchStatus: isNewSourceBlock ? 'success' : 'loading',
@@ -650,7 +655,7 @@ const useReferenceData = ({
       locations: EMPTY_LOCATIONS
     });
     const getReferenceData = async () => {
-      const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+      const response = await syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource, docAtMount);
       if (!isCurrentRequest) {
         return;
       }
@@ -673,7 +678,7 @@ const useReferenceData = ({
     return () => {
       isCurrentRequest = false;
     };
-  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
+  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock, docAtMount]);
   return {
     fetchStatus: state.fetchStatus,
     locations: state.locations

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

@@ -85,6 +85,7 @@ export const getToolbarConfig = (state, intl, api, syncBlockStore, isLivePage, o
           return /*#__PURE__*/React.createElement(SyncedLocationDropdownWithCount, {
             key: `${resourceId}:${localId}:${isBodiedSyncBlock}`,
             syncBlockStore: syncBlockStore,
+            doc: state.doc,
             resourceId: resourceId,
             localId: localId,
             intl: intl,

package/dist/esm/ui/SyncedLocationDropdown.js

@@ -543,6 +543,7 @@ var EditorPositionedSyncedLocationDropdown = function EditorPositionedSyncedLoca
 };
 export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWithCount(_ref8) {
   var syncBlockStore = _ref8.syncBlockStore,
+    doc = _ref8.doc,
     resourceId = _ref8.resourceId,
     intl = _ref8.intl,
     isSource = _ref8.isSource,
@@ -558,7 +559,8 @@ export var SyncedLocationDropdownWithCount = function SyncedLocationDropdownWith
       isSource: isSource,
       localId: localId,
       resourceId: resourceId,
-      syncBlockStore: syncBlockStore
+      syncBlockStore: syncBlockStore,
+      doc: doc
     }),
     fetchStatus = _useReferenceData.fetchStatus,
     locations = _useReferenceData.locations;
@@ -698,24 +700,29 @@ var DropdownContent = function DropdownContent(_ref1) {
 };
 var useReferenceData = function useReferenceData(_ref11) {
   var syncBlockStore = _ref11.syncBlockStore,
+    doc = _ref11.doc,
     resourceId = _ref11.resourceId,
     intl = _ref11.intl,
     isSource = _ref11.isSource,
     localId = _ref11.localId;
-  var _useState9 = useState(function () {
-      return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
-    }),
+  // Refresh locations when the toolbar opens, rather than on every document edit.
+  var _useState9 = useState(doc),
     _useState0 = _slicedToArray(_useState9, 1),
-    isNewSourceBlock = _useState0[0];
+    docAtMount = _useState0[0];
   var _useState1 = useState(function () {
+      return isSource && syncBlockStore.sourceManager.isNewSourceBlock(resourceId);
+    }),
+    _useState10 = _slicedToArray(_useState1, 1),
+    isNewSourceBlock = _useState10[0];
+  var _useState11 = useState(function () {
       return {
         fetchStatus: isNewSourceBlock ? 'success' : 'loading',
         locations: EMPTY_LOCATIONS
       };
     }),
-    _useState10 = _slicedToArray(_useState1, 2),
-    state = _useState10[0],
-    setState = _useState10[1];
+    _useState12 = _slicedToArray(_useState11, 2),
+    state = _useState12[0],
+    setState = _useState12[1];
   useEffect(function () {
     var isCurrentRequest = true;
     setState({
@@ -729,7 +736,7 @@ var useReferenceData = function useReferenceData(_ref11) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
               _context2.next = 1;
-              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource);
+              return syncBlockStore.fetchReferencesSourceInfo(resourceId, localId, isSource, docAtMount);
             case 1:
               response = _context2.sent;
               if (isCurrentRequest) {
@@ -769,7 +776,7 @@ var useReferenceData = function useReferenceData(_ref11) {
     return function () {
       isCurrentRequest = false;
     };
-  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock]);
+  }, [syncBlockStore, resourceId, intl, isSource, localId, isNewSourceBlock, docAtMount]);
   return {
     fetchStatus: state.fetchStatus,
     locations: state.locations

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

@@ -80,6 +80,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl, api, syncBl
           return /*#__PURE__*/React.createElement(SyncedLocationDropdownWithCount, {
             key: "".concat(resourceId, ":").concat(localId, ":").concat(isBodiedSyncBlock),
             syncBlockStore: syncBlockStore,
+            doc: state.doc,
             resourceId: resourceId,
             localId: localId,
             intl: intl,

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

@@ -1,12 +1,14 @@
 import type { IntlShape } from 'react-intl';
 import type { FloatingToolbarCustomRenderContext } from '@atlaskit/editor-common/types/floating-toolbar';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types/next-editor-plugin';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { ReferencesSourceInfo } from '@atlaskit/editor-synced-block-provider/common/types';
 import type { SyncBlockSourceInfo } from '@atlaskit/editor-synced-block-provider/providers/types';
 import type { SyncBlockStoreManager } from '@atlaskit/editor-synced-block-provider/syncBlockStoreManager';
 import type { SyncedBlockPlugin } from '../syncedBlockPluginType';
 interface Props {
     api?: ExtractInjectionAPI<SyncedBlockPlugin>;
+    doc?: PMNode;
     floatingToolbarRenderContext?: FloatingToolbarCustomRenderContext;
     intl: IntlShape;
     isSource: boolean;
@@ -35,5 +37,5 @@ export type SyncedLocationItem = {
 export declare const processReferenceData: (referenceData: ReferencesSourceInfo['references'], intl: IntlShape) => SyncBlockSourceInfo[];
 export declare const buildFieldAwareItems: (referenceData: ReferencesSourceInfo['references'], formatMessage: IntlShape['formatMessage']) => SyncedLocationItem[];
 export declare const SyncedLocationDropdown: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
-export declare const SyncedLocationDropdownWithCount: ({ syncBlockStore, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
+export declare const SyncedLocationDropdownWithCount: ({ syncBlockStore, doc, resourceId, intl, isSource, localId, api, floatingToolbarRenderContext, }: Props) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "24.0.6",
+	"version": "24.0.7",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-user-intent": "^24.0.0",
 		"@atlaskit/editor-prosemirror": "^9.0.0",
 		"@atlaskit/editor-shared-styles": "^4.4.0",
-		"@atlaskit/editor-synced-block-provider": "^22.0.0",
+		"@atlaskit/editor-synced-block-provider": "^22.1.0",
 		"@atlaskit/editor-toolbar": "^2.8.0",
 		"@atlaskit/flag": "^19.0.0",
 		"@atlaskit/icon": "38.0.2",
@@ -65,7 +65,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^130.3.0",
+		"@atlaskit/editor-common": "^130.4.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},