@atlaskit/editor-plugin-placeholder 6.1.1 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 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
+
+- [`10882b2fab738`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/10882b2fab738) -
+  [ux] Introduced bodiedSyncBlock nodeview
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.1
 
 ### Patch Changes
@@ -114,7 +136,6 @@
   shared context or singletons.
 
   **HOW TO ADJUST:**
-
   - Consumers must now explicitly install `@atlaskit/editor-common` in their own project if they use
     any of these editor plugins.
   - Ensure the version you install matches the version required by the plugins.

package/dist/cjs/placeholderPlugin.js

@@ -1,18 +1,25 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 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 _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
 // Typewriter animation timing constants
 var TYPEWRITER_TYPE_DELAY = 50; // Delay between typing each character
 var TYPEWRITER_PAUSE_BEFORE_ERASE = 2000; // Pause before starting to erase text
@@ -20,6 +27,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) {
@@ -27,6 +36,7 @@ function getPlaceholderState(editorState) {
 }
 var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
+var nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
 var cycleThroughPlaceholderPrompts = function cycleThroughPlaceholderPrompts(placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText) {
   var initialDelayWhenUserTypedAndDeleted = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   var currentPromptIndex = 0;
@@ -122,56 +132,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;
+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({
+      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';
@@ -181,30 +266,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({
+        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) ||
@@ -221,7 +345,7 @@ function calculateUserInteractionState(_ref2) {
     typedAndDeleted: isInTypedAndDeletedState
   };
 }
-function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
+function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
   if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
     return;
   }
@@ -239,6 +363,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,
@@ -252,7 +377,7 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
-        var _api$focus2, _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({
@@ -262,17 +387,27 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
           }),
           userHadTyped = _calculateUserInterac.userHadTyped,
           typedAndDeleted = _calculateUserInterac.typedAndDeleted;
+        var isPlaceholderHidden = (_placeholderState$isP = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.isPlaceholderHidden) !== null && _placeholderState$isP !== void 0 ? _placeholderState$isP : false;
+        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
+          intl: intl,
+          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
@@ -306,25 +441,67 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
       }
     },
     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, {
@@ -335,20 +512,28 @@ 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 (_ref0) {
+          var tr = _ref0.tr;
+          return tr.setMeta(pluginKey, {
+            isPlaceholderHidden: isPlaceholderHidden
+          });
+        };
       }
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'placeholder',
-        plugin: function plugin(_ref8) {
-          var getIntl = _ref8.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, api);
         }
       }];
     }