@atlaskit/editor-plugin-placeholder 6.2.0 → 6.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 6.4.0
+
+### Minor Changes
+
+- [`f34c6075cc3a4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f34c6075cc3a4) -
+  [ux] [EDITOR-2327] added support to add marks on placeholder plugin texts
+
+## 6.3.0
+
+### Minor Changes
+
+- [`673772ec67daf`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/673772ec67daf) -
+  [ux] EDITOR-2265 - show placeholder for empty paragraph
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.2.0
 
 ### Minor Changes

package/dist/cjs/placeholderPlugin.js

@@ -4,13 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = void 0;
 exports.createPlaceholderDecoration = createPlaceholderDecoration;
 exports.createPlugin = createPlugin;
 exports.pluginKey = exports.placeholderPlugin = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _messages = require("@atlaskit/editor-common/messages");
+var _processRawValue = require("@atlaskit/editor-common/process-raw-value");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
+var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
@@ -26,6 +29,8 @@ var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
 var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
 var TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
 
+var EMPTY_PARAGRAPH_TIMEOUT_DELAY = exports.EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
+
 var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderPlugin');
 var placeholderTestId = 'placeholder-test-id';
 function getPlaceholderState(editorState) {
@@ -88,6 +93,7 @@ var cycleThroughPlaceholderPrompts = function cycleThroughPlaceholderPrompts(pla
 function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts) {
   var pos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
   var initialDelayWhenUserTypedAndDeleted = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  var placeholderADF = arguments.length > 6 ? arguments[6] : undefined;
   var placeholderDecoration = document.createElement('span');
   var placeholderNodeWithText = placeholderDecoration;
   placeholderDecoration.setAttribute('data-testid', placeholderTestId);
@@ -101,7 +107,43 @@ function createPlaceholderDecoration(editorState, placeholderText, placeholderPr
     placeholderDecoration.appendChild(placeholderNode);
     placeholderNodeWithText = placeholderNode;
   }
-  if (placeholderText) {
+  if (placeholderADF) {
+    var serializer = _model.DOMSerializer.fromSchema(editorState.schema);
+    // Get a PMNode from docnode
+    var docNode = (0, _processRawValue.processRawValue)(editorState.schema, placeholderADF);
+    if (docNode) {
+      // Extract only the inline content from paragraphs, avoiding block-level elements
+      // that can interfere with cursor rendering
+      docNode.children.forEach(function (node) {
+        // For paragraph nodes, serialize their content (inline elements) directly
+        // without the wrapping <p> tag
+        if (node.type.name === 'paragraph') {
+          node.content.forEach(function (inlineNode) {
+            var inlineDOM = serializer.serializeNode(inlineNode);
+            placeholderNodeWithText.append(inlineDOM);
+          });
+        } else {
+          // For non-paragraph nodes, serialize normally
+          var nodeDOM = serializer.serializeNode(node);
+          placeholderNodeWithText.append(nodeDOM);
+        }
+      });
+      var markElements = placeholderNodeWithText.querySelectorAll('[data-prosemirror-content-type="mark"]');
+      markElements.forEach(function (markEl) {
+        if (markEl instanceof HTMLElement) {
+          markEl.style.setProperty('color', "var(--ds-text-subtlest, #6B6E76)");
+        }
+      });
+      // Ensure all child elements don't block pointer events or cursor
+      var allElements = placeholderNodeWithText.querySelectorAll('*');
+      allElements.forEach(function (el) {
+        if (el instanceof HTMLElement) {
+          el.style.pointerEvents = 'none';
+          el.style.userSelect = 'none';
+        }
+      });
+    }
+  } else if (placeholderText) {
     placeholderNodeWithText.textContent = placeholderText || ' ';
   } else if (placeholderPrompts) {
     cycleThroughPlaceholderPrompts(placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText, initialDelayWhenUserTypedAndDeleted);
@@ -129,62 +171,131 @@ function createPlaceholderDecoration(editorState, placeholderText, placeholderPr
     key: "placeholder ".concat(placeholderText)
   })]);
 }
-function setPlaceHolderState(placeholderText, pos, placeholderPrompts, typedAndDeleted, userHadTyped) {
+function setPlaceHolderState(_ref) {
+  var placeholderText = _ref.placeholderText,
+    pos = _ref.pos,
+    placeholderPrompts = _ref.placeholderPrompts,
+    typedAndDeleted = _ref.typedAndDeleted,
+    userHadTyped = _ref.userHadTyped,
+    canShowOnEmptyParagraph = _ref.canShowOnEmptyParagraph,
+    showOnEmptyParagraph = _ref.showOnEmptyParagraph;
   return {
     hasPlaceholder: true,
     placeholderText: placeholderText,
     placeholderPrompts: placeholderPrompts,
     pos: pos ? pos : 1,
     typedAndDeleted: typedAndDeleted,
-    userHadTyped: userHadTyped
+    userHadTyped: userHadTyped,
+    canShowOnEmptyParagraph: canShowOnEmptyParagraph,
+    showOnEmptyParagraph: showOnEmptyParagraph
   };
 }
-var emptyPlaceholder = function emptyPlaceholder(placeholderText, placeholderPrompts, userHadTyped) {
+var emptyPlaceholder = function emptyPlaceholder(_ref2) {
+  var placeholderText = _ref2.placeholderText,
+    placeholderPrompts = _ref2.placeholderPrompts,
+    userHadTyped = _ref2.userHadTyped,
+    pos = _ref2.pos,
+    canShowOnEmptyParagraph = _ref2.canShowOnEmptyParagraph,
+    showOnEmptyParagraph = _ref2.showOnEmptyParagraph;
   return {
     hasPlaceholder: false,
     placeholderText: placeholderText,
     placeholderPrompts: placeholderPrompts,
     userHadTyped: userHadTyped,
-    typedAndDeleted: false
+    typedAndDeleted: false,
+    canShowOnEmptyParagraph: canShowOnEmptyParagraph,
+    showOnEmptyParagraph: showOnEmptyParagraph,
+    pos: pos
   };
 };
-function createPlaceHolderStateFrom(_ref) {
-  var isEditorFocused = _ref.isEditorFocused,
-    editorState = _ref.editorState,
-    isTypeAheadOpen = _ref.isTypeAheadOpen,
-    defaultPlaceholderText = _ref.defaultPlaceholderText,
-    intl = _ref.intl,
-    bracketPlaceholderText = _ref.bracketPlaceholderText,
-    emptyLinePlaceholder = _ref.emptyLinePlaceholder,
-    placeholderPrompts = _ref.placeholderPrompts,
-    typedAndDeleted = _ref.typedAndDeleted,
-    userHadTyped = _ref.userHadTyped,
-    isPlaceholderHidden = _ref.isPlaceholderHidden;
+function createPlaceHolderStateFrom(_ref3) {
+  var isInitial = _ref3.isInitial,
+    isEditorFocused = _ref3.isEditorFocused,
+    editorState = _ref3.editorState,
+    isTypeAheadOpen = _ref3.isTypeAheadOpen,
+    defaultPlaceholderText = _ref3.defaultPlaceholderText,
+    intl = _ref3.intl,
+    bracketPlaceholderText = _ref3.bracketPlaceholderText,
+    emptyLinePlaceholder = _ref3.emptyLinePlaceholder,
+    placeholderPrompts = _ref3.placeholderPrompts,
+    typedAndDeleted = _ref3.typedAndDeleted,
+    userHadTyped = _ref3.userHadTyped,
+    isPlaceholderHidden = _ref3.isPlaceholderHidden,
+    withEmptyParagraph = _ref3.withEmptyParagraph,
+    showOnEmptyParagraph = _ref3.showOnEmptyParagraph;
   if (isPlaceholderHidden && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta')) {
-    return _objectSpread(_objectSpread({}, emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped)), {}, {
+    return _objectSpread(_objectSpread({}, emptyPlaceholder({
+      placeholderText: defaultPlaceholderText,
+      placeholderPrompts: placeholderPrompts,
+      userHadTyped: userHadTyped
+    })), {}, {
       isPlaceholderHidden: isPlaceholderHidden
     });
   }
   if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
-    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+    return emptyPlaceholder({
+      placeholderText: defaultPlaceholderText,
+      placeholderPrompts: placeholderPrompts,
+      userHadTyped: userHadTyped
+    });
   }
   if ((defaultPlaceholderText || placeholderPrompts) && (0, _utils.isEmptyDocument)(editorState.doc)) {
-    return setPlaceHolderState(defaultPlaceholderText, 1, placeholderPrompts, typedAndDeleted, userHadTyped);
+    return setPlaceHolderState({
+      placeholderText: defaultPlaceholderText,
+      pos: 1,
+      placeholderPrompts: placeholderPrompts,
+      typedAndDeleted: typedAndDeleted,
+      userHadTyped: userHadTyped
+    });
   }
-  if (isEditorFocused && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-    var _parentNode$firstChil, _parentNode$firstChil2;
+  if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
     var _editorState$selectio = editorState.selection,
-      $from = _editorState$selectio.$from,
+      from = _editorState$selectio.from,
+      to = _editorState$selectio.to,
       $to = _editorState$selectio.$to;
-    if ($from.pos !== $to.pos) {
-      return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+    if (defaultPlaceholderText && withEmptyParagraph && isEditorFocused && !isInitial && !(0, _utils.isEmptyDocument)(editorState.doc) && from === to && (0, _utils.isEmptyParagraph)($to.parent) && (0, _utils.hasDocAsParent)($to)) {
+      return showOnEmptyParagraph ? setPlaceHolderState({
+        placeholderText: defaultPlaceholderText,
+        pos: to,
+        placeholderPrompts: placeholderPrompts,
+        typedAndDeleted: typedAndDeleted,
+        userHadTyped: userHadTyped,
+        canShowOnEmptyParagraph: true,
+        showOnEmptyParagraph: true
+      }) : emptyPlaceholder({
+        placeholderText: defaultPlaceholderText,
+        placeholderPrompts: placeholderPrompts,
+        userHadTyped: userHadTyped,
+        canShowOnEmptyParagraph: true,
+        showOnEmptyParagraph: false,
+        pos: to
+      });
+    }
+  }
+  if (isEditorFocused && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+    var _parentNode$firstChil, _parentNode$firstChil2;
+    var _editorState$selectio2 = editorState.selection,
+      $from = _editorState$selectio2.$from,
+      _$to = _editorState$selectio2.$to;
+    if ($from.pos !== _$to.pos) {
+      return emptyPlaceholder({
+        placeholderText: defaultPlaceholderText,
+        placeholderPrompts: placeholderPrompts,
+        userHadTyped: userHadTyped
+      });
     }
     var parentNode = $from.node($from.depth - 1);
     var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
     if (emptyLinePlaceholder && parentType === 'doc') {
       var isEmptyLine = (0, _utils.isEmptyParagraph)($from.parent);
       if (isEmptyLine) {
-        return setPlaceHolderState(emptyLinePlaceholder, $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+        return setPlaceHolderState({
+          placeholderText: emptyLinePlaceholder,
+          pos: $from.pos,
+          placeholderPrompts: placeholderPrompts,
+          typedAndDeleted: typedAndDeleted,
+          userHadTyped: userHadTyped
+        });
       }
     }
     var isEmptyNode = (parentNode === null || parentNode === void 0 ? void 0 : parentNode.childCount) === 1 && ((_parentNode$firstChil = parentNode.firstChild) === null || _parentNode$firstChil === void 0 ? void 0 : _parentNode$firstChil.content.size) === 0 && ((_parentNode$firstChil2 = parentNode.firstChild) === null || _parentNode$firstChil2 === void 0 ? void 0 : _parentNode$firstChil2.type.name) === 'paragraph';
@@ -194,33 +305,69 @@ function createPlaceHolderStateFrom(_ref) {
         return node.type === editorState.schema.nodes.table;
       })(editorState.selection);
       if (!table) {
-        return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+        return emptyPlaceholder({
+          placeholderText: defaultPlaceholderText,
+          placeholderPrompts: placeholderPrompts,
+          userHadTyped: userHadTyped
+        });
       }
       var isFirstCell = (table === null || table === void 0 || (_table$node$firstChil = table.node.firstChild) === null || _table$node$firstChil === void 0 ? void 0 : _table$node$firstChil.content.firstChild) === parentNode;
       if (isFirstCell) {
-        return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText), $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+        return setPlaceHolderState({
+          placeholderText: intl.formatMessage(_messages.placeholderTextMessages.shortEmptyNodePlaceholderText),
+          pos: $from.pos,
+          placeholderPrompts: placeholderPrompts,
+          typedAndDeleted: typedAndDeleted,
+          userHadTyped: userHadTyped
+        });
       }
     }
     if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
-      return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText), $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+      return setPlaceHolderState({
+        placeholderText: intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText),
+        pos: $from.pos,
+        placeholderPrompts: placeholderPrompts,
+        typedAndDeleted: typedAndDeleted,
+        userHadTyped: userHadTyped
+      });
     }
     if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && (0, _expValEquals.expValEquals)('platform_synced_block', 'isEnabled', true)) {
-      return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.syncBlockPlaceholderText), $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+      return setPlaceHolderState({
+        placeholderText: intl.formatMessage(_messages.placeholderTextMessages.syncBlockPlaceholderText),
+        pos: $from.pos,
+        placeholderPrompts: placeholderPrompts,
+        typedAndDeleted: typedAndDeleted,
+        userHadTyped: userHadTyped
+      });
     }
-    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+    return emptyPlaceholder({
+      placeholderText: defaultPlaceholderText,
+      placeholderPrompts: placeholderPrompts,
+      userHadTyped: userHadTyped
+    });
   }
   if (bracketPlaceholderText && (0, _utils.bracketTyped)(editorState) && isEditorFocused) {
     var _$from = editorState.selection.$from;
     // Space is to account for positioning of the bracket
     var bracketHint = '  ' + bracketPlaceholderText;
-    return setPlaceHolderState(bracketHint, _$from.pos - 1, placeholderPrompts, typedAndDeleted, userHadTyped);
+    return setPlaceHolderState({
+      placeholderText: bracketHint,
+      pos: _$from.pos - 1,
+      placeholderPrompts: placeholderPrompts,
+      typedAndDeleted: typedAndDeleted,
+      userHadTyped: userHadTyped
+    });
   }
-  return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+  return emptyPlaceholder({
+    placeholderText: defaultPlaceholderText,
+    placeholderPrompts: placeholderPrompts,
+    userHadTyped: userHadTyped
+  });
 }
-function calculateUserInteractionState(_ref2) {
-  var placeholderState = _ref2.placeholderState,
-    oldEditorState = _ref2.oldEditorState,
-    newEditorState = _ref2.newEditorState;
+function calculateUserInteractionState(_ref4) {
+  var placeholderState = _ref4.placeholderState,
+    oldEditorState = _ref4.oldEditorState,
+    newEditorState = _ref4.newEditorState;
   var wasEmpty = oldEditorState ? (0, _utils.isEmptyDocument)(oldEditorState.doc) : true;
   var isEmpty = (0, _utils.isEmptyDocument)(newEditorState.doc);
   var hasEverTyped = Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.userHadTyped) ||
@@ -237,8 +384,8 @@ function calculateUserInteractionState(_ref2) {
     typedAndDeleted: isInTypedAndDeletedState
   };
 }
-function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
-  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
+function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, placeholderADF, api) {
+  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
     return;
   }
   var isDestroyed = false;
@@ -255,6 +402,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
       init: function init(_, state) {
         var _api$focus, _api$typeAhead;
         return createPlaceHolderStateFrom({
+          isInitial: true,
           isEditorFocused: Boolean(api === null || api === void 0 || (_api$focus = api.focus) === null || _api$focus === void 0 || (_api$focus = _api$focus.sharedState.currentState()) === null || _api$focus === void 0 ? void 0 : _api$focus.hasFocus),
           editorState: state,
           isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
@@ -268,7 +416,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
-        var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref3, _meta$placeholderText, _ref4, _meta$placeholderProm;
+        var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref5, _meta$placeholderText, _ref6, _meta$placeholderProm, _meta$showOnEmptyPara;
         var meta = tr.getMeta(pluginKey);
         var isEditorFocused = Boolean(api === null || api === void 0 || (_api$focus2 = api.focus) === null || _api$focus2 === void 0 || (_api$focus2 = _api$focus2.sharedState.currentState()) === null || _api$focus2 === void 0 ? void 0 : _api$focus2.hasFocus);
         var _calculateUserInterac = calculateUserInteractionState({
@@ -282,18 +430,23 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
         if ((meta === null || meta === void 0 ? void 0 : meta.isPlaceholderHidden) !== undefined && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta')) {
           isPlaceholderHidden = meta.isPlaceholderHidden;
         }
+        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
+          defaultPlaceholderText = meta.placeholderText;
+        }
         var newPlaceholderState = createPlaceHolderStateFrom({
           isEditorFocused: isEditorFocused,
           editorState: newEditorState,
           isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
-          defaultPlaceholderText: (_ref3 = (_meta$placeholderText = meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref3 !== void 0 ? _ref3 : defaultPlaceholderText,
+          defaultPlaceholderText: (0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2') ? defaultPlaceholderText : (_ref5 = (_meta$placeholderText = meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref5 !== void 0 ? _ref5 : defaultPlaceholderText,
           bracketPlaceholderText: bracketPlaceholderText,
           emptyLinePlaceholder: emptyLinePlaceholder,
-          placeholderPrompts: (_ref4 = (_meta$placeholderProm = meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref4 !== void 0 ? _ref4 : placeholderPrompts,
+          placeholderPrompts: (_ref6 = (_meta$placeholderProm = meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref6 !== void 0 ? _ref6 : placeholderPrompts,
           typedAndDeleted: typedAndDeleted,
           userHadTyped: userHadTyped,
           intl: intl,
-          isPlaceholderHidden: isPlaceholderHidden
+          isPlaceholderHidden: isPlaceholderHidden,
+          withEmptyParagraph: withEmptyParagraph,
+          showOnEmptyParagraph: (_meta$showOnEmptyPara = meta === null || meta === void 0 ? void 0 : meta.showOnEmptyParagraph) !== null && _meta$showOnEmptyPara !== void 0 ? _meta$showOnEmptyPara : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.showOnEmptyParagraph
         });
 
         // Clear timeouts when hasPlaceholder becomes false
@@ -319,33 +472,75 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
         }
         var compositionPluginState = api === null || api === void 0 || (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
         var isShowingDiff = Boolean(api === null || api === void 0 || (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 || (_api$showDiff = _api$showDiff.sharedState.currentState()) === null || _api$showDiff === void 0 ? void 0 : _api$showDiff.isDisplayingChanges);
-        if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
+        if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
           var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
-          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted);
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderADF);
         }
         return;
       }
     },
     view: function view() {
+      var timeoutId;
+      function startEmptyParagraphTimeout(editorView) {
+        if (timeoutId) {
+          return;
+        }
+        timeoutId = setTimeout(function () {
+          timeoutId = undefined;
+          editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
+            showOnEmptyParagraph: true
+          }));
+        }, EMPTY_PARAGRAPH_TIMEOUT_DELAY);
+      }
+      function destroyEmptyParagraphTimeout() {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = undefined;
+        }
+      }
       return {
+        update: function update(editorView, prevState) {
+          if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_beta_2')) {
+            var prevPluginState = getPlaceholderState(prevState);
+            var newPluginState = getPlaceholderState(editorView.state);
+
+            // user start typing after move to an empty paragraph, clear timeout
+            if (!newPluginState.canShowOnEmptyParagraph && timeoutId) {
+              destroyEmptyParagraphTimeout();
+            }
+            // user move to an empty paragraph again, reset state to hide placeholder, and restart timeout
+            else if (prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && newPluginState.pos !== prevPluginState.pos) {
+              editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
+                showOnEmptyParagraph: false
+              }));
+              destroyEmptyParagraphTimeout();
+              startEmptyParagraphTimeout(editorView);
+            }
+            // user move to an empty paragraph (by click enter or move to an empty paragraph), start timeout
+            else if (!prevPluginState.canShowOnEmptyParagraph && newPluginState.canShowOnEmptyParagraph && !newPluginState.showOnEmptyParagraph && !timeoutId) {
+              startEmptyParagraphTimeout(editorView);
+            }
+          }
+        },
         destroy: function destroy() {
           clearAllTypewriterTimeouts();
+          destroyEmptyParagraphTimeout();
           isDestroyed = true;
         }
       };
     }
   });
 }
-var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref5) {
-  var options = _ref5.config,
-    api = _ref5.api;
+var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref7) {
+  var options = _ref7.config,
+    api = _ref7.api;
   var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
   return {
     name: 'placeholder',
     commands: {
       setPlaceholder: function setPlaceholder(placeholderText) {
-        return function (_ref6) {
-          var tr = _ref6.tr;
+        return function (_ref8) {
+          var tr = _ref8.tr;
           if (currentPlaceholder !== placeholderText) {
             currentPlaceholder = placeholderText;
             return tr.setMeta(pluginKey, {
@@ -356,16 +551,16 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
         };
       },
       setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
-        return function (_ref7) {
-          var tr = _ref7.tr;
+        return function (_ref9) {
+          var tr = _ref9.tr;
           return tr.setMeta(pluginKey, {
             placeholderPrompts: placeholderPrompts
           });
         };
       },
       setPlaceholderHidden: function setPlaceholderHidden(isPlaceholderHidden) {
-        return function (_ref8) {
-          var tr = _ref8.tr;
+        return function (_ref0) {
+          var tr = _ref0.tr;
           return tr.setMeta(pluginKey, {
             isPlaceholderHidden: isPlaceholderHidden
           });
@@ -375,9 +570,9 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
     pmPlugins: function pmPlugins() {
       return [{
         name: 'placeholder',
-        plugin: function plugin(_ref9) {
-          var getIntl = _ref9.getIntl;
-          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api);
+        plugin: function plugin(_ref1) {
+          var getIntl = _ref1.getIntl;
+          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, options && options.placeholderADF, api);
         }
       }];
     }