@atlaskit/editor-plugin-synced-block 10.7.2 → 10.7.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-synced-block
 
+## 10.7.3
+
+### Patch Changes
+
+- [`472c37e82078b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/472c37e82078b) -
+  [ux] Fixed the source synced block placeholder disappearing after placing the cursor inside an
+  empty block and then clicking away from the editor.
+- Updated dependencies
+
 ## 10.7.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/bodiedSyncedBlock.js

@@ -9,6 +9,7 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -21,8 +22,10 @@ var _model = require("@atlaskit/editor-prosemirror/model");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _BodiedSyncBlockWrapper = require("../ui/BodiedSyncBlockWrapper");
 var _SyncBlockLabel = require("../ui/SyncBlockLabel");
+var _isEmptySourceSyncBlock = require("./isEmptySourceSyncBlock");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = (0, _get2.default)((0, _getPrototypeOf2.default)(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 var toDOMOld = function toDOMOld() {
   return ['div', {
     class: _syncBlock.BodiedSyncBlockSharedCssClassName.content,
@@ -91,8 +94,26 @@ var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
       // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix);
+      domRef.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
       return domRef;
     }
+
+    /**
+     * Keeps the empty marker class in sync so the source placeholder can be shown purely from
+     * document state. See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "update",
+    value: function update(node, decorations) {
+      var updated = _superPropGet(BodiedSyncBlockOld, "update", this, 3)([node, decorations]);
+      if (updated) {
+        // `ReactNodeView`'s `dom` getter throws rather than returning nullish once the view is
+        // destroyed, so optional chaining here would be misleading. `super.update()` only
+        // returns true while the view is still mounted, so the ref is guaranteed.
+        this.dom.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
+      }
+      return updated;
+    }
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
@@ -222,6 +243,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
       }));
     }, labelContainer, this.labelKey);
     this.updateContentEditable({});
+    this.updateEmptyClass();
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
 
@@ -269,6 +291,16 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
         });
       }
     }
+
+    /**
+     * Marks the block as empty so the source placeholder can be shown purely from document state.
+     * See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "updateEmptyClass",
+    value: function updateEmptyClass() {
+      this.dom.classList.toggle(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, (0, _isEmptySourceSyncBlock.isEmptySourceSyncBlock)(this.node));
+    }
   }, {
     key: "update",
     value: function update(node) {
@@ -279,6 +311,7 @@ var BodiedSyncBlock = exports.BodiedSyncBlock = /*#__PURE__*/function () {
       // Cache updates are handled in appendTransaction where we can
       // filter out non-user changes (remote collab, table auto-scale, etc.)
       this.node = node;
+      this.updateEmptyClass();
       return true;
     }
   }, {

package/dist/cjs/nodeviews/isEmptySourceSyncBlock.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isEmptySourceSyncBlock = void 0;
+/**
+ * A source synced block counts as "empty" when it holds exactly one paragraph and that paragraph
+ * has no content. This is the only state in which the source placeholder should be shown.
+ *
+ * Emptiness is deliberately derived from the ProseMirror node rather than the rendered DOM.
+ * ProseMirror and other plugins inject non-content children into the paragraph element — the
+ * selection marker's cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator`
+ * hack node, and the `.ProseMirror-trailingBreak` — so DOM shape is not a reliable signal of
+ * whether the user has typed anything. See EDITOR-8327.
+ */
+var isEmptySourceSyncBlock = exports.isEmptySourceSyncBlock = function isEmptySourceSyncBlock(node) {
+  if (node.childCount !== 1) {
+    return false;
+  }
+  var firstChild = node.firstChild;
+  return (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type.name) === 'paragraph' && firstChild.content.size === 0;
+};

package/dist/cjs/ui/SourceSyncBlockPlaceholder.js

@@ -21,7 +21,7 @@ var _syncBlock = require("@atlaskit/editor-common/sync-block");
 // 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)"), {
+  return (0, _react2.css)((0, _defineProperty2.default)({}, ".ProseMirror .".concat(_syncBlock.BodiedSyncBlockSharedCssClassName.prefix, ".").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.empty, " .").concat(_syncBlock.BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child"), {
     position: 'relative',
     '&::before': {
       // JSON.stringify produces a quoted and escaped CSS string.

package/dist/es2019/nodeviews/bodiedSyncedBlock.js

@@ -9,6 +9,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 import { SyncBlockLabel } from '../ui/SyncBlockLabel';
+import { isEmptySourceSyncBlock } from './isEmptySourceSyncBlock';
 const toDOMOld = () => ['div', {
   class: BodiedSyncBlockSharedCssClassName.content,
   contenteditable: true
@@ -64,8 +65,24 @@ class BodiedSyncBlockOld extends ReactNodeView {
     // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
     const domRef = document.createElement('div');
     domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
+    domRef.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
     return domRef;
   }
+
+  /**
+   * Keeps the empty marker class in sync so the source placeholder can be shown purely from
+   * document state. See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+   */
+  update(node, decorations) {
+    const updated = super.update(node, decorations);
+    if (updated) {
+      // `ReactNodeView`'s `dom` getter throws rather than returning nullish once the view is
+      // destroyed, so optional chaining here would be misleading. `super.update()` only
+      // returns true while the view is still mounted, so the ref is guaranteed.
+      this.dom.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
+    }
+    return updated;
+  }
   render(_props, forwardRef) {
     var _this$api$syncedBlock, _this$api5, _this$api5$syncedBloc, _this$api5$syncedBloc2, _this$api6, _this$api6$analytics;
     // Use passed syncBlockStore for SSR where sharedState.currentState() is delayed
@@ -187,6 +204,7 @@ export class BodiedSyncBlock {
       }));
     }, labelContainer, this.labelKey);
     this.updateContentEditable({});
+    this.updateEmptyClass();
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
 
@@ -229,6 +247,14 @@ export class BodiedSyncBlock {
       });
     }
   }
+
+  /**
+   * Marks the block as empty so the source placeholder can be shown purely from document state.
+   * See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+   */
+  updateEmptyClass() {
+    this.dom.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
+  }
   update(node) {
     if (this.node.type !== node.type) {
       return false;
@@ -237,6 +263,7 @@ export class BodiedSyncBlock {
     // Cache updates are handled in appendTransaction where we can
     // filter out non-user changes (remote collab, table auto-scale, etc.)
     this.node = node;
+    this.updateEmptyClass();
     return true;
   }
   ignoreMutation(mutation) {

package/dist/es2019/nodeviews/isEmptySourceSyncBlock.js

@@ -0,0 +1,17 @@
+/**
+ * A source synced block counts as "empty" when it holds exactly one paragraph and that paragraph
+ * has no content. This is the only state in which the source placeholder should be shown.
+ *
+ * Emptiness is deliberately derived from the ProseMirror node rather than the rendered DOM.
+ * ProseMirror and other plugins inject non-content children into the paragraph element — the
+ * selection marker's cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator`
+ * hack node, and the `.ProseMirror-trailingBreak` — so DOM shape is not a reliable signal of
+ * whether the user has typed anything. See EDITOR-8327.
+ */
+export const isEmptySourceSyncBlock = node => {
+  if (node.childCount !== 1) {
+    return false;
+  }
+  const firstChild = node.firstChild;
+  return (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type.name) === 'paragraph' && firstChild.content.size === 0;
+};

package/dist/es2019/ui/SourceSyncBlockPlaceholder.js

@@ -12,12 +12,18 @@ 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.
+  // Emptiness is signalled by the node view via the `empty` class, which is derived from the
+  // ProseMirror document. Keeping this visual state in CSS means typing, deletion, undo/redo,
+  // and remote changes update it without decorations.
+  //
+  // This deliberately does NOT inspect the rendered DOM shape. The paragraph inside an empty
+  // block routinely gains extra children that are not user content — the selection marker's
+  // cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator` hack node,
+  // and the `.ProseMirror-trailingBreak`. An earlier `:has(.ProseMirror-trailingBreak:only-child)`
+  // form treated those decorations as content and hid the placeholder whenever the user placed
+  // a cursor in the block and then blurred the editor. See EDITOR-8327.
   // 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)`]: {
+  [`.ProseMirror .${BodiedSyncBlockSharedCssClassName.prefix}.${BodiedSyncBlockSharedCssClassName.empty} .${BodiedSyncBlockSharedCssClassName.content}[contenteditable="true"] > p:only-child`]: {
     position: 'relative',
     '&::before': {
       // JSON.stringify produces a quoted and escaped CSS string.

package/dist/esm/nodeviews/bodiedSyncedBlock.js

@@ -2,9 +2,11 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _get from "@babel/runtime/helpers/get";
 import _inherits from "@babel/runtime/helpers/inherits";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
 import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
@@ -16,6 +18,7 @@ import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { BodiedSyncBlockWrapper } from '../ui/BodiedSyncBlockWrapper';
 import { SyncBlockLabel } from '../ui/SyncBlockLabel';
+import { isEmptySourceSyncBlock } from './isEmptySourceSyncBlock';
 var toDOMOld = function toDOMOld() {
   return ['div', {
     class: BodiedSyncBlockSharedCssClassName.content,
@@ -84,8 +87,26 @@ var BodiedSyncBlockOld = /*#__PURE__*/function (_ReactNodeView) {
       // eslint-disable-next-line @atlaskit/platform/no-direct-document-usage -- NodeView DOM must be created against active runtime document
       var domRef = document.createElement('div');
       domRef.classList.add(BodiedSyncBlockSharedCssClassName.prefix);
+      domRef.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
       return domRef;
     }
+
+    /**
+     * Keeps the empty marker class in sync so the source placeholder can be shown purely from
+     * document state. See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "update",
+    value: function update(node, decorations) {
+      var updated = _superPropGet(BodiedSyncBlockOld, "update", this, 3)([node, decorations]);
+      if (updated) {
+        // `ReactNodeView`'s `dom` getter throws rather than returning nullish once the view is
+        // destroyed, so optional chaining here would be misleading. `super.update()` only
+        // returns true while the view is still mounted, so the ref is guaranteed.
+        this.dom.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
+      }
+      return updated;
+    }
   }, {
     key: "render",
     value: function render(_props, forwardRef) {
@@ -215,6 +236,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
       }));
     }, labelContainer, this.labelKey);
     this.updateContentEditable({});
+    this.updateEmptyClass();
     this.handleConnectivityModeChange();
     this.handleViewModeChange();
 
@@ -262,6 +284,16 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
         });
       }
     }
+
+    /**
+     * Marks the block as empty so the source placeholder can be shown purely from document state.
+     * See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+  }, {
+    key: "updateEmptyClass",
+    value: function updateEmptyClass() {
+      this.dom.classList.toggle(BodiedSyncBlockSharedCssClassName.empty, isEmptySourceSyncBlock(this.node));
+    }
   }, {
     key: "update",
     value: function update(node) {
@@ -272,6 +304,7 @@ export var BodiedSyncBlock = /*#__PURE__*/function () {
       // Cache updates are handled in appendTransaction where we can
       // filter out non-user changes (remote collab, table auto-scale, etc.)
       this.node = node;
+      this.updateEmptyClass();
       return true;
     }
   }, {

package/dist/esm/nodeviews/isEmptySourceSyncBlock.js

@@ -0,0 +1,17 @@
+/**
+ * A source synced block counts as "empty" when it holds exactly one paragraph and that paragraph
+ * has no content. This is the only state in which the source placeholder should be shown.
+ *
+ * Emptiness is deliberately derived from the ProseMirror node rather than the rendered DOM.
+ * ProseMirror and other plugins inject non-content children into the paragraph element — the
+ * selection marker's cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator`
+ * hack node, and the `.ProseMirror-trailingBreak` — so DOM shape is not a reliable signal of
+ * whether the user has typed anything. See EDITOR-8327.
+ */
+export var isEmptySourceSyncBlock = function isEmptySourceSyncBlock(node) {
+  if (node.childCount !== 1) {
+    return false;
+  }
+  var firstChild = node.firstChild;
+  return (firstChild === null || firstChild === void 0 ? void 0 : firstChild.type.name) === 'paragraph' && firstChild.content.size === 0;
+};

package/dist/esm/ui/SourceSyncBlockPlaceholder.js

@@ -13,7 +13,7 @@ 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)"), {
+  return css(_defineProperty({}, ".ProseMirror .".concat(BodiedSyncBlockSharedCssClassName.prefix, ".").concat(BodiedSyncBlockSharedCssClassName.empty, " .").concat(BodiedSyncBlockSharedCssClassName.content, "[contenteditable=\"true\"] > p:only-child"), {
     position: 'relative',
     '&::before': {
       // JSON.stringify produces a quoted and escaped CSS string.

package/dist/types/nodeviews/bodiedSyncedBlock.d.ts

@@ -38,6 +38,11 @@ export declare class BodiedSyncBlock implements NodeView {
     private updateContentEditable;
     private handleConnectivityModeChange;
     private handleViewModeChange;
+    /**
+     * Marks the block as empty so the source placeholder can be shown purely from document state.
+     * See `isEmptySourceSyncBlock` for why the DOM is not used to decide this.
+     */
+    private updateEmptyClass;
     update(node: PMNode): boolean;
     ignoreMutation(mutation: MutationRecord | {
         target: Node;

package/dist/types/nodeviews/isEmptySourceSyncBlock.d.ts

@@ -0,0 +1,12 @@
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+/**
+ * A source synced block counts as "empty" when it holds exactly one paragraph and that paragraph
+ * has no content. This is the only state in which the source placeholder should be shown.
+ *
+ * Emptiness is deliberately derived from the ProseMirror node rather than the rendered DOM.
+ * ProseMirror and other plugins inject non-content children into the paragraph element — the
+ * selection marker's cursor widget (`.ProseMirror-widget`), ProseMirror's `.ProseMirror-separator`
+ * hack node, and the `.ProseMirror-trailingBreak` — so DOM shape is not a reliable signal of
+ * whether the user has typed anything. See EDITOR-8327.
+ */
+export declare const isEmptySourceSyncBlock: (node: PMNode) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-synced-block",
-	"version": "10.7.2",
+	"version": "10.7.3",
 	"description": "SyncedBlock plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/platform-feature-flags": "^2.1.0",
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/spinner": "20.1.1",
-		"@atlaskit/tmp-editor-statsig": "^135.9.0",
+		"@atlaskit/tmp-editor-statsig": "^135.10.0",
 		"@atlaskit/tokens": "16.3.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
@@ -58,7 +58,7 @@
 		"memoize-one": "^6.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^116.46.0",
+		"@atlaskit/editor-common": "^116.47.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
 	},