@atlaskit/editor-plugin-synced-block 10.4.5 → 10.4.7

package/AGENTS.md

@@ -2,7 +2,7 @@
 
 > **For workflow guidance, debugging, and cross-package task guides, load the `synced-blocks`
 > skill:**
-> `get_skill(skill_name_or_path="platform/packages/editor/.rovodev/skills/synced-blocks/SKILL.md")`
+> `get_skill(skill_name_or_path="platform/packages/editor/.agents/skills/synced-blocks/SKILL.md")`
 
 ---
 
@@ -31,7 +31,8 @@ src/
 │                                 discardUnpublishedSyncBlocks (EDITOR-6473)
 ├── editor-commands/
 │   └── index.ts                # createSyncedBlock, copySyncedBlockReferenceToClipboardEditorCommand,
-│                                 removeSyncedBlockAtPos, unsyncSyncBlock
+│                                 copySyncedBlockReferenceToClipboard, editSyncedBlockSource,
+│                                 removeSyncedBlock, removeSyncedBlockAtPos, unsync
 ├── nodeviews/
 │   ├── syncedBlock.tsx         # NodeView for reference (syncBlock) — read-only, fetches from BE
 │   ├── lazySyncedBlock.tsx     # Lazy-loaded wrapper for syncedBlock (EDITOR-6928)
@@ -50,13 +51,18 @@ src/
 │       ├── rebase-transaction.ts                   # Rebase helpers used by main.ts
 │       ├── ignore-dom-event.ts                     # DOM event guard
 │       └── utils.ts                                # Misc shared helpers
-├── ui/
+├── ui/                          # (grep the dir for the full current list — it grows often)
 │   ├── toolbar-components.tsx    # Primary toolbar button ("Create Synced Block")
+│   ├── CreateSyncedBlockButton.tsx / CreateSyncedBlockDropdownItem.tsx # Toolbar/menu entry points
 │   ├── floating-toolbar.tsx      # Node-level actions: delete, unsync, copy link, view locations
 │   ├── block-menu-components.tsx # Block menu entry
 │   ├── quick-insert.tsx          # Slash command / quick insert config
+│   ├── SyncedLocationDropdown.tsx # "View synced locations" dropdown
 │   ├── DeleteConfirmationModal.tsx # Deletion confirmation dialog
 │   ├── SyncBlockRefresher.tsx    # Periodic data refresh from backend
+│   ├── SyncBlockLabel.tsx        # Source/reference label chrome
+│   ├── BodiedSyncBlockWrapper.tsx / SyncBlockRendererWrapper.tsx # Node-view wrappers
+│   ├── SyncBlockSSRReactContextsProvider.tsx # Supplies React contexts during SSR
 │   └── Flag.tsx                  # Error/info flags (offline, copy notifications)
 └── types/
     └── index.ts                # FLAG_ID, SyncedBlockSharedState, BodiedSyncBlockDeletionStatus
@@ -89,14 +95,18 @@ Behind the `editor_synced_block_perf` experiment, `main.ts`:
 
 1. User triggers via toolbar/block menu/slash command → `ui/toolbar-components.tsx` or
    `ui/block-menu-components.tsx`
-2. Calls `editor-commands/createSyncedBlock` → inserts `bodiedSyncBlock` node into document
-3. `pm-plugins/main.ts` detects new node → `handle-bodied-sync-block-creation.ts` → calls
-   `SyncBlockStoreManager.create()` → Block Service API
-4. `menu-and-toolbar-experiences.ts` fires experience event
+2. Calls `editor-commands/createSyncedBlock` → inserts `bodiedSyncBlock` node into document (marked
+   as **pending creation** — it is not persisted yet)
+3. `pm-plugins/main.ts` detects new node → `handle-bodied-sync-block-creation.ts` updates
+   `sourceManager` state. Persistence happens later when the product layer calls `flush()`
+   (via `flushBodiedSyncBlocks`), which creates the block in the Block Service and then reconciles
+   identifiers via `commitPendingCreation()`
+4. `menu-and-toolbar-experiences.ts` fires the experience event
 
 **Reference rendering** (flow through the code):
 
-1. `nodeviews/syncedBlock.tsx` mounts for each `syncBlock` node
-2. Calls `ReferenceSyncBlockStoreManager.fetch(resourceId)` → Block Service API
+1. `nodeviews/syncedBlock.tsx` (or `lazySyncedBlock.tsx`) mounts for each `syncBlock` node
+2. Calls `referenceManager.fetchSyncBlocksData(nodes)` → batched/deduped Block Service fetch
 3. Renders content via nested renderer from `editor-synced-block-renderer`
-4. Subscribes to AGG WebSocket for real-time updates
+4. Subscribes via `referenceManager.subscribeToSyncBlock(...)` — AGG WebSocket (Confluence) or Relay
+   (Jira) — for real-time updates

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.4.7
+
+### Patch Changes
+
+- [`d9e8a63a60b63`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d9e8a63a60b63) -
+  Keep the placeholder visible in empty source synced blocks for the sync block activation treatment
+  while preserving the existing placeholder behavior in the control.
+
+## 10.4.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.4.5
 
 ### Patch Changes

package/dist/cjs/syncedBlockPlugin.js

@@ -21,6 +21,7 @@ var _DeleteConfirmationModal = require("./ui/DeleteConfirmationModal");
 var _Flag = require("./ui/Flag");
 var _floatingToolbar = require("./ui/floating-toolbar");
 var _quickInsert = require("./ui/quick-insert");
+var _SourceSyncBlockPlaceholder = require("./ui/SourceSyncBlockPlaceholder");
 var _SyncBlockRefresher = require("./ui/SyncBlockRefresher");
 var _toolbarComponents = require("./ui/toolbar-components");
 /**
@@ -157,10 +158,10 @@ var syncedBlockPlugin = exports.syncedBlockPlugin = function syncedBlockPlugin(_
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, (0, _expValEquals.expValEquals)('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/_react.default.createElement(_SourceSyncBlockPlaceholder.SourceSyncBlockPlaceholder, null), /*#__PURE__*/_react.default.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
         api: api
-      });
+      }));
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/cjs/ui/SourceSyncBlockPlaceholder.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SourceSyncBlockPlaceholder = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntl = require("react-intl");
+var _messages = require("@atlaskit/editor-common/messages");
+var _syncBlock = require("@atlaskit/editor-common/sync-block");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// Plugin content components need a global selector because the ProseMirror content is not a child
+// of this component. This follows the existing layout placeholder pattern.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
+
+var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, " .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child:has(.ProseMirror-trailingBreak:only-child)"), {
+    position: 'relative',
+    '&::before': {
+      // JSON.stringify produces a quoted and escaped CSS string.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      content: placeholderText,
+      position: 'absolute',
+      boxSizing: 'border-box',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      font: 'inherit',
+      insetInlineStart: 0,
+      width: '100%',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }
+  }));
+};
+var SourceSyncBlockPlaceholder = exports.SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
+  var _useIntl = (0, _reactIntl.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyles = (0, _react.useMemo)(function () {
+    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(_messages.placeholderTextMessages.sourceSyncBlockPlaceholderText)));
+  }, [formatMessage]);
+  return (0, _react2.jsx)(_react2.Global, {
+    styles: placeholderStyles
+  });
+};

package/dist/es2019/syncedBlockPlugin.js

@@ -14,6 +14,7 @@ import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { Flag } from './ui/Flag';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { getQuickInsertConfig } from './ui/quick-insert';
+import { SourceSyncBlockPlaceholder } from './ui/SourceSyncBlockPlaceholder';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
 
@@ -147,10 +148,10 @@ export const syncedBlockPlugin = ({
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/React.createElement(SourceSyncBlockPlaceholder, null), /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
         api: api
-      });
+      }));
     },
     getSharedState: editorState => {
       if (!editorState) {

package/dist/es2019/ui/SourceSyncBlockPlaceholder.js

@@ -0,0 +1,45 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// Plugin content components need a global selector because the ProseMirror content is not a child
+// of this component. This follows the existing layout placeholder pattern.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
+import { css, Global, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl';
+import { placeholderTextMessages } from '@atlaskit/editor-common/messages';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+const getSourceSyncBlockPlaceholderStyles = placeholderText => css({
+  // ProseMirror represents an empty paragraph with a trailing break. Keeping this visual state
+  // in CSS means typing, deletion, undo/redo, and remote changes update it without decorations.
+  // :has() ensures the placeholder only appears when that trailing break is the paragraph's
+  // only child, rather than when the paragraph contains editable content.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
+  [`.ProseMirror .${BodiedSyncBlockSharedCssClassName.prefix} .${BodiedSyncBlockSharedCssClassName.content}[contenteditable="true"] > p:only-child:has(.ProseMirror-trailingBreak:only-child)`]: {
+    position: 'relative',
+    '&::before': {
+      // JSON.stringify produces a quoted and escaped CSS string.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      content: placeholderText,
+      position: 'absolute',
+      boxSizing: 'border-box',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      font: 'inherit',
+      insetInlineStart: 0,
+      width: '100%',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }
+  }
+});
+export const SourceSyncBlockPlaceholder = () => {
+  const {
+    formatMessage
+  } = useIntl();
+  const placeholderStyles = useMemo(() => getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(placeholderTextMessages.sourceSyncBlockPlaceholderText))), [formatMessage]);
+  return jsx(Global, {
+    styles: placeholderStyles
+  });
+};

package/dist/esm/syncedBlockPlugin.js

@@ -14,6 +14,7 @@ import { DeleteConfirmationModal } from './ui/DeleteConfirmationModal';
 import { Flag } from './ui/Flag';
 import { getToolbarConfig } from './ui/floating-toolbar';
 import { getQuickInsertConfig } from './ui/quick-insert';
+import { SourceSyncBlockPlaceholder } from './ui/SourceSyncBlockPlaceholder';
 import { SyncBlockRefresher } from './ui/SyncBlockRefresher';
 import { getToolbarComponents } from './ui/toolbar-components';
 
@@ -151,10 +152,10 @@ export var syncedBlockPlugin = function syncedBlockPlugin(_ref2) {
       refs.containerElement = containerElement || undefined;
       refs.popupsMountPoint = popupsMountPoint || undefined;
       refs.wrapperElement = wrapperElement || undefined;
-      return /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, expValEquals('platform_editor_sync_block_activation', 'isEnabled', true) && /*#__PURE__*/React.createElement(SourceSyncBlockPlaceholder, null), /*#__PURE__*/React.createElement(LazySyncedBlockUI, {
         syncBlockStore: syncBlockStore,
         api: api
-      });
+      }));
     },
     getSharedState: function getSharedState(editorState) {
       if (!editorState) {

package/dist/esm/ui/SourceSyncBlockPlaceholder.js

@@ -0,0 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { useMemo } from 'react';
+
+// Plugin content components need a global selector because the ProseMirror content is not a child
+// of this component. This follows the existing layout placeholder pattern.
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
+import { css, Global, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl';
+import { placeholderTextMessages } from '@atlaskit/editor-common/messages';
+import { BodiedSyncBlockSharedCssClassName } from '@atlaskit/editor-common/sync-block';
+var getSourceSyncBlockPlaceholderStyles = function getSourceSyncBlockPlaceholderStyles(placeholderText) {
+  return css(_defineProperty({}, ".ProseMirror .".concat(BodiedSyncBlockSharedCssClassName.prefix, " .").concat(BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child:has(.ProseMirror-trailingBreak:only-child)"), {
+    position: 'relative',
+    '&::before': {
+      // JSON.stringify produces a quoted and escaped CSS string.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values
+      content: placeholderText,
+      position: 'absolute',
+      boxSizing: 'border-box',
+      color: "var(--ds-text-subtlest, #6B6E76)",
+      font: 'inherit',
+      insetInlineStart: 0,
+      width: '100%',
+      pointerEvents: 'none',
+      userSelect: 'none'
+    }
+  }));
+};
+export var SourceSyncBlockPlaceholder = function SourceSyncBlockPlaceholder() {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var placeholderStyles = useMemo(function () {
+    return getSourceSyncBlockPlaceholderStyles(JSON.stringify(formatMessage(placeholderTextMessages.sourceSyncBlockPlaceholderText)));
+  }, [formatMessage]);
+  return jsx(Global, {
+    styles: placeholderStyles
+  });
+};

package/dist/types/types/index.d.ts

@@ -83,16 +83,16 @@ export type SyncBlockMap = {
     [key: string]: SyncBlockInfo;
 };
 export declare const SYNCED_BLOCK_BUTTON_TEST_ID: {
-    readonly primaryToolbarCreate: "create-synced-block-toolbar-btn";
-    readonly blockMenuCreate: "create-synced-block-block-menu-btn";
-    readonly quickInsertCreate: "create-synced-block-quick-insert-btn";
-    readonly syncedBlockToolbarCopy: "synced-block-copy-btn";
-    readonly syncedBlockToolbarReferenceDelete: "reference-synced-block-delete-btn";
-    readonly syncedBlockToolbarSourceDelete: "source-synced-block-delete-btn";
-    readonly syncedBlockToolbarReferenceUnsync: "reference-synced-block-unsync-btn";
-    readonly syncedBlockToolbarSourceUnsync: "source-synced-block-unsync-btn";
-    readonly syncedBlockToolbarSyncedLocationsTrigger: "synced-block-synced-locations-dropdown--trigger";
-    readonly syncedBlockToolbarReferenceOverflowTrigger: "reference-synced-block-overflow-dropdown--trigger";
-    readonly syncedBlockToolbarSourceOverflowTrigger: "source-synced-block-overflow-dropdown--trigger";
+    readonly primaryToolbarCreate: 'create-synced-block-toolbar-btn';
+    readonly blockMenuCreate: 'create-synced-block-block-menu-btn';
+    readonly quickInsertCreate: 'create-synced-block-quick-insert-btn';
+    readonly syncedBlockToolbarCopy: 'synced-block-copy-btn';
+    readonly syncedBlockToolbarReferenceDelete: 'reference-synced-block-delete-btn';
+    readonly syncedBlockToolbarSourceDelete: 'source-synced-block-delete-btn';
+    readonly syncedBlockToolbarReferenceUnsync: 'reference-synced-block-unsync-btn';
+    readonly syncedBlockToolbarSourceUnsync: 'source-synced-block-unsync-btn';
+    readonly syncedBlockToolbarSyncedLocationsTrigger: 'synced-block-synced-locations-dropdown--trigger';
+    readonly syncedBlockToolbarReferenceOverflowTrigger: 'reference-synced-block-overflow-dropdown--trigger';
+    readonly syncedBlockToolbarSourceOverflowTrigger: 'source-synced-block-overflow-dropdown--trigger';
 };
 export {};

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

@@ -0,0 +1 @@
+export declare const SourceSyncBlockPlaceholder: () => JSX.Element;

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

@@ -11,7 +11,7 @@ interface Props {
     resourceId: string;
     syncBlockStore: SyncBlockStoreManager;
 }
-export declare const processReferenceData: (referenceData: ReferencesSourceInfo["references"], intl: IntlShape) => SyncBlockSourceInfo[];
+export declare const processReferenceData: (referenceData: ReferencesSourceInfo['references'], intl: IntlShape) => SyncBlockSourceInfo[];
 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 {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "10.4.5",
+	"version": "10.4.7",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,7 +22,7 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^56.1.0",
 		"@atlaskit/button": "24.3.7",
-		"@atlaskit/dropdown-menu": "17.1.7",
+		"@atlaskit/dropdown-menu": "17.2.0",
 		"@atlaskit/editor-json-transformer": "^9.1.0",
 		"@atlaskit/editor-plugin-analytics": "^12.0.0",
 		"@atlaskit/editor-plugin-block-menu": "^11.1.0",
@@ -42,22 +42,23 @@
 		"@atlaskit/icon-lab": "^7.4.0",
 		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/lozenge": "^14.1.0",
-		"@atlaskit/modal-dialog": "^16.1.0",
+		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/spinner": "20.1.1",
-		"@atlaskit/tmp-editor-statsig": "^134.0.0",
+		"@atlaskit/tmp-editor-statsig": "^135.2.0",
 		"@atlaskit/tokens": "16.3.0",
-		"@atlaskit/tooltip": "^23.1.0",
+		"@atlaskit/tooltip": "^23.2.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.0",
+		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
 		"date-fns": "^2.17.0",
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.40.0",
+		"@atlaskit/editor-common": "^116.43.0",
 		"react": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},