@atlaskit/editor-plugin-placeholder 3.1.0 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-placeholder
 
+## 3.2.0
+
+### Minor Changes
+
+- [`bc9e17e2197a9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bc9e17e2197a9) -
+  [ux] add new setAnimatingPlaceholderPrompts API to placeholder plugin
+
+## 3.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.1.0
 
 ### Minor Changes

package/dist/cjs/placeholderPlugin.js

@@ -13,6 +13,12 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+// 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
+var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
+var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
+
 var pluginKey = exports.pluginKey = new _state.PluginKey('placeholderPlugin');
 function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
@@ -20,10 +26,57 @@ function getPlaceholderState(editorState) {
 var placeholderTestId = exports.placeholderTestId = 'placeholder-test-id';
 var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-function createPlaceholderDecoration(editorState, placeholderText) {
-  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+var createTypewriterElement = function createTypewriterElement(placeholderPrompts, activeTypewriterTimeouts) {
+  var typewriterElement = document.createElement('span');
+  var currentPromptIndex = 0;
+  var displayedText = '';
+  var animationTimeouts = [];
+  var clearAllTimeouts = function clearAllTimeouts() {
+    animationTimeouts.forEach(function (timeoutId) {
+      return clearTimeout(timeoutId);
+    });
+    animationTimeouts = [];
+  };
+  var scheduleTimeout = function scheduleTimeout(callback, delay) {
+    var timeoutId = setTimeout(callback, delay);
+    animationTimeouts.push(timeoutId);
+    return timeoutId;
+  };
+  var _startAnimationCycle = function startAnimationCycle() {
+    var currentPrompt = placeholderPrompts[currentPromptIndex];
+    var characterIndex = 0;
+    var _typeNextCharacter = function typeNextCharacter() {
+      if (characterIndex < currentPrompt.length) {
+        displayedText = currentPrompt.substring(0, characterIndex + 1);
+        typewriterElement.textContent = displayedText;
+        characterIndex++;
+        scheduleTimeout(_typeNextCharacter, TYPEWRITER_TYPE_DELAY);
+      } else {
+        scheduleTimeout(_eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
+      }
+    };
+    var _eraseLastCharacter = function eraseLastCharacter() {
+      if (displayedText.length > 0) {
+        displayedText = displayedText.substring(0, displayedText.length - 1);
+        typewriterElement.textContent = displayedText;
+        scheduleTimeout(_eraseLastCharacter, TYPEWRITER_ERASE_DELAY);
+      } else {
+        // Move to next prompt. Modulo lets us cycle infinitely
+        currentPromptIndex = (currentPromptIndex + 1) % placeholderPrompts.length;
+        scheduleTimeout(_startAnimationCycle, TYPEWRITER_CYCLE_DELAY);
+      }
+    };
+    _typeNextCharacter();
+  };
+  activeTypewriterTimeouts === null || activeTypewriterTimeouts === void 0 || activeTypewriterTimeouts.push(clearAllTimeouts);
+  _startAnimationCycle();
+  return typewriterElement;
+};
+function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts) {
+  var pos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
   var placeholderDecoration = document.createElement('span');
   var placeholderNodeWithText = placeholderDecoration;
+  var typewriterElement = null;
   placeholderDecoration.setAttribute('data-testid', placeholderTestId);
   placeholderDecoration.className = 'placeholder-decoration';
 
@@ -35,7 +88,12 @@ function createPlaceholderDecoration(editorState, placeholderText) {
     placeholderDecoration.appendChild(placeholderNode);
     placeholderNodeWithText = placeholderNode;
   }
-  placeholderNodeWithText.textContent = placeholderText || ' ';
+  if (placeholderPrompts) {
+    typewriterElement = createTypewriterElement(placeholderPrompts, activeTypewriterTimeouts);
+    placeholderNodeWithText.appendChild(typewriterElement);
+  } else {
+    placeholderNodeWithText.textContent = placeholderText || ' ';
+  }
 
   // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
   // Add a editable buff node as the cursor moving forward is inevitable
@@ -59,17 +117,19 @@ function createPlaceholderDecoration(editorState, placeholderText) {
     key: "placeholder ".concat(placeholderText)
   })]);
 }
-function setPlaceHolderState(placeholderText, pos) {
+function setPlaceHolderState(placeholderText, pos, placeholderPrompts) {
   return {
     hasPlaceholder: true,
     placeholderText: placeholderText,
+    placeholderPrompts: placeholderPrompts,
     pos: pos ? pos : 1
   };
 }
-var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
+var emptyPlaceholder = function emptyPlaceholder(placeholderText, placeholderPrompts) {
   return {
     hasPlaceholder: false,
-    placeholderText: placeholderText
+    placeholderText: placeholderText,
+    placeholderPrompts: placeholderPrompts
   };
 };
 function createPlaceHolderStateFrom(_ref) {
@@ -79,12 +139,13 @@ function createPlaceHolderStateFrom(_ref) {
     defaultPlaceholderText = _ref.defaultPlaceholderText,
     intl = _ref.intl,
     bracketPlaceholderText = _ref.bracketPlaceholderText,
-    emptyLinePlaceholder = _ref.emptyLinePlaceholder;
+    emptyLinePlaceholder = _ref.emptyLinePlaceholder,
+    placeholderPrompts = _ref.placeholderPrompts;
   if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
-  if (defaultPlaceholderText && (0, _utils.isEmptyDocument)(editorState.doc)) {
-    return setPlaceHolderState(defaultPlaceholderText);
+  if ((defaultPlaceholderText || placeholderPrompts) && (0, _utils.isEmptyDocument)(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText, 1, placeholderPrompts);
   }
   if (isEditorFocused && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
     var _parentNode$firstChil, _parentNode$firstChil2;
@@ -92,7 +153,7 @@ function createPlaceHolderStateFrom(_ref) {
       $from = _editorState$selectio.$from,
       $to = _editorState$selectio.$to;
     if ($from.pos !== $to.pos) {
-      return emptyPlaceholder(defaultPlaceholderText);
+      return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
     }
     var parentNode = $from.node($from.depth - 1);
     var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
@@ -109,7 +170,7 @@ function createPlaceHolderStateFrom(_ref) {
         return node.type === editorState.schema.nodes.table;
       })(editorState.selection);
       if (!table) {
-        return emptyPlaceholder(defaultPlaceholderText);
+        return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
       }
       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) {
@@ -119,20 +180,28 @@ function createPlaceHolderStateFrom(_ref) {
     if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
       return setPlaceHolderState(intl.formatMessage(_messages.placeholderTextMessages.longEmptyNodePlaceholderText), $from.pos);
     }
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
   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);
+    return setPlaceHolderState(bracketHint, _$from.pos - 1, placeholderPrompts);
   }
-  return emptyPlaceholder(defaultPlaceholderText);
+  return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
 }
-function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
-  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
+  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
     return;
   }
+  var isDestroyed = false;
+  var activeTypewriterTimeouts = [];
+  var clearAllTypewriterTimeouts = function clearAllTypewriterTimeouts() {
+    activeTypewriterTimeouts.forEach(function (clearFn) {
+      return clearFn();
+    });
+    activeTypewriterTimeouts = [];
+  };
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -145,34 +214,39 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
           defaultPlaceholderText: defaultPlaceholderText,
           bracketPlaceholderText: bracketPlaceholderText,
           emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: placeholderPrompts,
           intl: intl
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
-        var _api$focus2, _api$typeAhead3, _placeholderState$pla;
+        var _api$focus2, _api$typeAhead2, _ref2, _meta$placeholderText, _ref3, _meta$placeholderProm, _api$typeAhead3, _placeholderState$pla, _placeholderState$pla2;
         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);
-        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
-          var _api$typeAhead2;
-          return 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: meta.placeholderText,
-            bracketPlaceholderText: bracketPlaceholderText,
-            emptyLinePlaceholder: emptyLinePlaceholder,
-            intl: intl
-          });
-        }
-        return createPlaceHolderStateFrom({
+        var newPlaceholderState = (meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined || (meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== undefined ? 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: (_ref2 = (_meta$placeholderText = meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref2 !== void 0 ? _ref2 : defaultPlaceholderText,
+          bracketPlaceholderText: bracketPlaceholderText,
+          emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: (_ref3 = (_meta$placeholderProm = meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref3 !== void 0 ? _ref3 : placeholderPrompts,
+          intl: intl
+        }) : createPlaceHolderStateFrom({
           isEditorFocused: isEditorFocused,
           editorState: newEditorState,
           isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
           defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
           bracketPlaceholderText: bracketPlaceholderText,
           emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: (_placeholderState$pla2 = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _placeholderState$pla2 !== void 0 ? _placeholderState$pla2 : placeholderPrompts,
           intl: intl
         });
+
+        // Clear timeouts when hasPlaceholder becomes false
+        if (!newPlaceholderState.hasPlaceholder) {
+          clearAllTypewriterTimeouts();
+        }
+        return newPlaceholderState;
       }
     },
     props: {
@@ -182,26 +256,40 @@ function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, empt
           hasPlaceholder = _getPlaceholderState.hasPlaceholder,
           placeholderText = _getPlaceholderState.placeholderText,
           pos = _getPlaceholderState.pos;
+
+        // Decorations is still called after plugin is destroyed
+        // So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
+        if (isDestroyed) {
+          return;
+        }
         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 && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos);
         }
         return;
       }
+    },
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          clearAllTypewriterTimeouts();
+          isDestroyed = true;
+        }
+      };
     }
   });
 }
-var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref2) {
-  var options = _ref2.config,
-    api = _ref2.api;
+var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
   return {
     name: 'placeholder',
     commands: {
       setPlaceholder: function setPlaceholder(placeholderText) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           if (currentPlaceholder !== placeholderText) {
             currentPlaceholder = placeholderText;
             return tr.setMeta(pluginKey, {
@@ -210,14 +298,22 @@ var placeholderPlugin = exports.placeholderPlugin = function placeholderPlugin(_
           }
           return null;
         };
+      },
+      setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
+        return function (_ref6) {
+          var tr = _ref6.tr;
+          return tr.setMeta(pluginKey, {
+            placeholderPrompts: placeholderPrompts
+          });
+        };
       }
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'placeholder',
-        plugin: function plugin(_ref4) {
-          var getIntl = _ref4.getIntl;
-          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
+        plugin: function plugin(_ref7) {
+          var getIntl = _ref7.getIntl;
+          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api);
         }
       }];
     }

package/dist/es2019/placeholderPlugin.js

@@ -5,6 +5,12 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+// Typewriter animation timing constants
+const TYPEWRITER_TYPE_DELAY = 50; // Delay between typing each character
+const TYPEWRITER_PAUSE_BEFORE_ERASE = 2000; // Pause before starting to erase text
+const TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
+const TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
+
 export const pluginKey = new PluginKey('placeholderPlugin');
 function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
@@ -12,9 +18,54 @@ function getPlaceholderState(editorState) {
 export const placeholderTestId = 'placeholder-test-id';
 const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-export function createPlaceholderDecoration(editorState, placeholderText, pos = 1) {
+const createTypewriterElement = (placeholderPrompts, activeTypewriterTimeouts) => {
+  const typewriterElement = document.createElement('span');
+  let currentPromptIndex = 0;
+  let displayedText = '';
+  let animationTimeouts = [];
+  const clearAllTimeouts = () => {
+    animationTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
+    animationTimeouts = [];
+  };
+  const scheduleTimeout = (callback, delay) => {
+    const timeoutId = setTimeout(callback, delay);
+    animationTimeouts.push(timeoutId);
+    return timeoutId;
+  };
+  const startAnimationCycle = () => {
+    const currentPrompt = placeholderPrompts[currentPromptIndex];
+    let characterIndex = 0;
+    const typeNextCharacter = () => {
+      if (characterIndex < currentPrompt.length) {
+        displayedText = currentPrompt.substring(0, characterIndex + 1);
+        typewriterElement.textContent = displayedText;
+        characterIndex++;
+        scheduleTimeout(typeNextCharacter, TYPEWRITER_TYPE_DELAY);
+      } else {
+        scheduleTimeout(eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
+      }
+    };
+    const eraseLastCharacter = () => {
+      if (displayedText.length > 0) {
+        displayedText = displayedText.substring(0, displayedText.length - 1);
+        typewriterElement.textContent = displayedText;
+        scheduleTimeout(eraseLastCharacter, TYPEWRITER_ERASE_DELAY);
+      } else {
+        // Move to next prompt. Modulo lets us cycle infinitely
+        currentPromptIndex = (currentPromptIndex + 1) % placeholderPrompts.length;
+        scheduleTimeout(startAnimationCycle, TYPEWRITER_CYCLE_DELAY);
+      }
+    };
+    typeNextCharacter();
+  };
+  activeTypewriterTimeouts === null || activeTypewriterTimeouts === void 0 ? void 0 : activeTypewriterTimeouts.push(clearAllTimeouts);
+  startAnimationCycle();
+  return typewriterElement;
+};
+export function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts, pos = 1) {
   const placeholderDecoration = document.createElement('span');
   let placeholderNodeWithText = placeholderDecoration;
+  let typewriterElement = null;
   placeholderDecoration.setAttribute('data-testid', placeholderTestId);
   placeholderDecoration.className = 'placeholder-decoration';
 
@@ -26,7 +77,12 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
     placeholderDecoration.appendChild(placeholderNode);
     placeholderNodeWithText = placeholderNode;
   }
-  placeholderNodeWithText.textContent = placeholderText || ' ';
+  if (placeholderPrompts) {
+    typewriterElement = createTypewriterElement(placeholderPrompts, activeTypewriterTimeouts);
+    placeholderNodeWithText.appendChild(typewriterElement);
+  } else {
+    placeholderNodeWithText.textContent = placeholderText || ' ';
+  }
 
   // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
   // Add a editable buff node as the cursor moving forward is inevitable
@@ -50,16 +106,18 @@ export function createPlaceholderDecoration(editorState, placeholderText, pos =
     key: `placeholder ${placeholderText}`
   })]);
 }
-function setPlaceHolderState(placeholderText, pos) {
+function setPlaceHolderState(placeholderText, pos, placeholderPrompts) {
   return {
     hasPlaceholder: true,
     placeholderText,
+    placeholderPrompts,
     pos: pos ? pos : 1
   };
 }
-const emptyPlaceholder = placeholderText => ({
+const emptyPlaceholder = (placeholderText, placeholderPrompts) => ({
   hasPlaceholder: false,
-  placeholderText
+  placeholderText,
+  placeholderPrompts
 });
 function createPlaceHolderStateFrom({
   isEditorFocused,
@@ -68,13 +126,14 @@ function createPlaceHolderStateFrom({
   defaultPlaceholderText,
   intl,
   bracketPlaceholderText,
-  emptyLinePlaceholder
+  emptyLinePlaceholder,
+  placeholderPrompts
 }) {
   if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
-  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
-    return setPlaceHolderState(defaultPlaceholderText);
+  if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText, 1, placeholderPrompts);
   }
   if (isEditorFocused && editorExperiment('platform_editor_controls', 'variant1')) {
     var _parentNode$firstChil, _parentNode$firstChil2;
@@ -83,7 +142,7 @@ function createPlaceHolderStateFrom({
       $to
     } = editorState.selection;
     if ($from.pos !== $to.pos) {
-      return emptyPlaceholder(defaultPlaceholderText);
+      return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
     }
     const parentNode = $from.node($from.depth - 1);
     const parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
@@ -98,7 +157,7 @@ function createPlaceHolderStateFrom({
       var _table$node$firstChil;
       const table = findParentNode(node => node.type === editorState.schema.nodes.table)(editorState.selection);
       if (!table) {
-        return emptyPlaceholder(defaultPlaceholderText);
+        return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
       }
       const isFirstCell = (table === null || table === void 0 ? void 0 : (_table$node$firstChil = table.node.firstChild) === null || _table$node$firstChil === void 0 ? void 0 : _table$node$firstChil.content.firstChild) === parentNode;
       if (isFirstCell) {
@@ -108,7 +167,7 @@ function createPlaceHolderStateFrom({
     if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
       return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
     }
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
   if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
     const {
@@ -116,14 +175,20 @@ function createPlaceHolderStateFrom({
     } = editorState.selection;
     // Space is to account for positioning of the bracket
     const bracketHint = '  ' + bracketPlaceholderText;
-    return setPlaceHolderState(bracketHint, $from.pos - 1);
+    return setPlaceHolderState(bracketHint, $from.pos - 1, placeholderPrompts);
   }
-  return emptyPlaceholder(defaultPlaceholderText);
+  return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
 }
-export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
-  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
+  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
     return;
   }
+  let isDestroyed = false;
+  let activeTypewriterTimeouts = [];
+  const clearAllTypewriterTimeouts = () => {
+    activeTypewriterTimeouts.forEach(clearFn => clearFn());
+    activeTypewriterTimeouts = [];
+  };
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -136,34 +201,39 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
           defaultPlaceholderText,
           bracketPlaceholderText,
           emptyLinePlaceholder,
+          placeholderPrompts,
           intl
         });
       },
       apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
-        var _api$focus2, _api$focus2$sharedSta, _api$typeAhead3, _placeholderState$pla;
+        var _api$focus2, _api$focus2$sharedSta, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm, _api$typeAhead3, _placeholderState$pla, _placeholderState$pla2;
         const meta = tr.getMeta(pluginKey);
         const isEditorFocused = Boolean(api === null || api === void 0 ? void 0 : (_api$focus2 = api.focus) === null || _api$focus2 === void 0 ? void 0 : (_api$focus2$sharedSta = _api$focus2.sharedState.currentState()) === null || _api$focus2$sharedSta === void 0 ? void 0 : _api$focus2$sharedSta.hasFocus);
-        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
-          var _api$typeAhead2;
-          return createPlaceHolderStateFrom({
-            isEditorFocused,
-            editorState: newEditorState,
-            isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
-            defaultPlaceholderText: meta.placeholderText,
-            bracketPlaceholderText,
-            emptyLinePlaceholder,
-            intl
-          });
-        }
-        return createPlaceHolderStateFrom({
+        const newPlaceholderState = (meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined || (meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== undefined ? createPlaceHolderStateFrom({
+          isEditorFocused,
+          editorState: newEditorState,
+          isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead2 = api.typeAhead) === null || _api$typeAhead2 === void 0 ? void 0 : _api$typeAhead2.actions.isOpen,
+          defaultPlaceholderText: (_ref = (_meta$placeholderText = meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref !== void 0 ? _ref : defaultPlaceholderText,
+          bracketPlaceholderText,
+          emptyLinePlaceholder,
+          placeholderPrompts: (_ref2 = (_meta$placeholderProm = meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref2 !== void 0 ? _ref2 : placeholderPrompts,
+          intl
+        }) : createPlaceHolderStateFrom({
           isEditorFocused,
           editorState: newEditorState,
           isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
           defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
           bracketPlaceholderText,
           emptyLinePlaceholder,
+          placeholderPrompts: (_placeholderState$pla2 = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _placeholderState$pla2 !== void 0 ? _placeholderState$pla2 : placeholderPrompts,
           intl
         });
+
+        // Clear timeouts when hasPlaceholder becomes false
+        if (!newPlaceholderState.hasPlaceholder) {
+          clearAllTypewriterTimeouts();
+        }
+        return newPlaceholderState;
       }
     },
     props: {
@@ -174,13 +244,27 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
           placeholderText,
           pos
         } = getPlaceholderState(editorState);
+
+        // Decorations is still called after plugin is destroyed
+        // So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
+        if (isDestroyed) {
+          return;
+        }
         const compositionPluginState = api === null || api === void 0 ? void 0 : (_api$composition = api.composition) === null || _api$composition === void 0 ? void 0 : _api$composition.sharedState.currentState();
         const isShowingDiff = Boolean(api === null || api === void 0 ? void 0 : (_api$showDiff = api.showDiff) === null || _api$showDiff === void 0 ? void 0 : (_api$showDiff$sharedS = _api$showDiff.sharedState.currentState()) === null || _api$showDiff$sharedS === void 0 ? void 0 : _api$showDiff$sharedS.isDisplayingChanges);
-        if (hasPlaceholder && placeholderText && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos);
         }
         return;
       }
+    },
+    view() {
+      return {
+        destroy() {
+          clearAllTypewriterTimeouts();
+          isDestroyed = true;
+        }
+      };
     }
   });
 }
@@ -202,6 +286,13 @@ export const placeholderPlugin = ({
           });
         }
         return null;
+      },
+      setAnimatingPlaceholderPrompts: placeholderPrompts => ({
+        tr
+      }) => {
+        return tr.setMeta(pluginKey, {
+          placeholderPrompts: placeholderPrompts
+        });
       }
     },
     pmPlugins() {
@@ -209,7 +300,7 @@ export const placeholderPlugin = ({
         name: 'placeholder',
         plugin: ({
           getIntl
-        }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api)
+        }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api)
       }];
     }
   };

package/dist/esm/placeholderPlugin.js

@@ -5,6 +5,12 @@ import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+// 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
+var TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
+var TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
+
 export var pluginKey = new PluginKey('placeholderPlugin');
 function getPlaceholderState(editorState) {
   return pluginKey.getState(editorState);
@@ -12,10 +18,57 @@ function getPlaceholderState(editorState) {
 export var placeholderTestId = 'placeholder-test-id';
 var nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 var nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-export function createPlaceholderDecoration(editorState, placeholderText) {
-  var pos = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+var createTypewriterElement = function createTypewriterElement(placeholderPrompts, activeTypewriterTimeouts) {
+  var typewriterElement = document.createElement('span');
+  var currentPromptIndex = 0;
+  var displayedText = '';
+  var animationTimeouts = [];
+  var clearAllTimeouts = function clearAllTimeouts() {
+    animationTimeouts.forEach(function (timeoutId) {
+      return clearTimeout(timeoutId);
+    });
+    animationTimeouts = [];
+  };
+  var scheduleTimeout = function scheduleTimeout(callback, delay) {
+    var timeoutId = setTimeout(callback, delay);
+    animationTimeouts.push(timeoutId);
+    return timeoutId;
+  };
+  var _startAnimationCycle = function startAnimationCycle() {
+    var currentPrompt = placeholderPrompts[currentPromptIndex];
+    var characterIndex = 0;
+    var _typeNextCharacter = function typeNextCharacter() {
+      if (characterIndex < currentPrompt.length) {
+        displayedText = currentPrompt.substring(0, characterIndex + 1);
+        typewriterElement.textContent = displayedText;
+        characterIndex++;
+        scheduleTimeout(_typeNextCharacter, TYPEWRITER_TYPE_DELAY);
+      } else {
+        scheduleTimeout(_eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
+      }
+    };
+    var _eraseLastCharacter = function eraseLastCharacter() {
+      if (displayedText.length > 0) {
+        displayedText = displayedText.substring(0, displayedText.length - 1);
+        typewriterElement.textContent = displayedText;
+        scheduleTimeout(_eraseLastCharacter, TYPEWRITER_ERASE_DELAY);
+      } else {
+        // Move to next prompt. Modulo lets us cycle infinitely
+        currentPromptIndex = (currentPromptIndex + 1) % placeholderPrompts.length;
+        scheduleTimeout(_startAnimationCycle, TYPEWRITER_CYCLE_DELAY);
+      }
+    };
+    _typeNextCharacter();
+  };
+  activeTypewriterTimeouts === null || activeTypewriterTimeouts === void 0 || activeTypewriterTimeouts.push(clearAllTimeouts);
+  _startAnimationCycle();
+  return typewriterElement;
+};
+export function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts) {
+  var pos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
   var placeholderDecoration = document.createElement('span');
   var placeholderNodeWithText = placeholderDecoration;
+  var typewriterElement = null;
   placeholderDecoration.setAttribute('data-testid', placeholderTestId);
   placeholderDecoration.className = 'placeholder-decoration';
 
@@ -27,7 +80,12 @@ export function createPlaceholderDecoration(editorState, placeholderText) {
     placeholderDecoration.appendChild(placeholderNode);
     placeholderNodeWithText = placeholderNode;
   }
-  placeholderNodeWithText.textContent = placeholderText || ' ';
+  if (placeholderPrompts) {
+    typewriterElement = createTypewriterElement(placeholderPrompts, activeTypewriterTimeouts);
+    placeholderNodeWithText.appendChild(typewriterElement);
+  } else {
+    placeholderNodeWithText.textContent = placeholderText || ' ';
+  }
 
   // ME-2289 Tapping on backspace in empty editor hides and displays the keyboard
   // Add a editable buff node as the cursor moving forward is inevitable
@@ -51,17 +109,19 @@ export function createPlaceholderDecoration(editorState, placeholderText) {
     key: "placeholder ".concat(placeholderText)
   })]);
 }
-function setPlaceHolderState(placeholderText, pos) {
+function setPlaceHolderState(placeholderText, pos, placeholderPrompts) {
   return {
     hasPlaceholder: true,
     placeholderText: placeholderText,
+    placeholderPrompts: placeholderPrompts,
     pos: pos ? pos : 1
   };
 }
-var emptyPlaceholder = function emptyPlaceholder(placeholderText) {
+var emptyPlaceholder = function emptyPlaceholder(placeholderText, placeholderPrompts) {
   return {
     hasPlaceholder: false,
-    placeholderText: placeholderText
+    placeholderText: placeholderText,
+    placeholderPrompts: placeholderPrompts
   };
 };
 function createPlaceHolderStateFrom(_ref) {
@@ -71,12 +131,13 @@ function createPlaceHolderStateFrom(_ref) {
     defaultPlaceholderText = _ref.defaultPlaceholderText,
     intl = _ref.intl,
     bracketPlaceholderText = _ref.bracketPlaceholderText,
-    emptyLinePlaceholder = _ref.emptyLinePlaceholder;
+    emptyLinePlaceholder = _ref.emptyLinePlaceholder,
+    placeholderPrompts = _ref.placeholderPrompts;
   if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
-  if (defaultPlaceholderText && isEmptyDocument(editorState.doc)) {
-    return setPlaceHolderState(defaultPlaceholderText);
+  if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
+    return setPlaceHolderState(defaultPlaceholderText, 1, placeholderPrompts);
   }
   if (isEditorFocused && editorExperiment('platform_editor_controls', 'variant1')) {
     var _parentNode$firstChil, _parentNode$firstChil2;
@@ -84,7 +145,7 @@ function createPlaceHolderStateFrom(_ref) {
       $from = _editorState$selectio.$from,
       $to = _editorState$selectio.$to;
     if ($from.pos !== $to.pos) {
-      return emptyPlaceholder(defaultPlaceholderText);
+      return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
     }
     var parentNode = $from.node($from.depth - 1);
     var parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
@@ -101,7 +162,7 @@ function createPlaceHolderStateFrom(_ref) {
         return node.type === editorState.schema.nodes.table;
       })(editorState.selection);
       if (!table) {
-        return emptyPlaceholder(defaultPlaceholderText);
+        return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
       }
       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) {
@@ -111,20 +172,28 @@ function createPlaceHolderStateFrom(_ref) {
     if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
       return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos);
     }
-    return emptyPlaceholder(defaultPlaceholderText);
+    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
   }
   if (bracketPlaceholderText && 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);
+    return setPlaceHolderState(bracketHint, _$from.pos - 1, placeholderPrompts);
   }
-  return emptyPlaceholder(defaultPlaceholderText);
+  return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts);
 }
-export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, api) {
-  if (!defaultPlaceholderText && !bracketPlaceholderText) {
+export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
+  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
     return;
   }
+  var isDestroyed = false;
+  var activeTypewriterTimeouts = [];
+  var clearAllTypewriterTimeouts = function clearAllTypewriterTimeouts() {
+    activeTypewriterTimeouts.forEach(function (clearFn) {
+      return clearFn();
+    });
+    activeTypewriterTimeouts = [];
+  };
   return new SafePlugin({
     key: pluginKey,
     state: {
@@ -137,34 +206,39 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
           defaultPlaceholderText: defaultPlaceholderText,
           bracketPlaceholderText: bracketPlaceholderText,
           emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: placeholderPrompts,
           intl: intl
         });
       },
       apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
-        var _api$focus2, _api$typeAhead3, _placeholderState$pla;
+        var _api$focus2, _api$typeAhead2, _ref2, _meta$placeholderText, _ref3, _meta$placeholderProm, _api$typeAhead3, _placeholderState$pla, _placeholderState$pla2;
         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);
-        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined) {
-          var _api$typeAhead2;
-          return 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: meta.placeholderText,
-            bracketPlaceholderText: bracketPlaceholderText,
-            emptyLinePlaceholder: emptyLinePlaceholder,
-            intl: intl
-          });
-        }
-        return createPlaceHolderStateFrom({
+        var newPlaceholderState = (meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined || (meta === null || meta === void 0 ? void 0 : meta.placeholderPrompts) !== undefined ? 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: (_ref2 = (_meta$placeholderText = meta.placeholderText) !== null && _meta$placeholderText !== void 0 ? _meta$placeholderText : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _ref2 !== void 0 ? _ref2 : defaultPlaceholderText,
+          bracketPlaceholderText: bracketPlaceholderText,
+          emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: (_ref3 = (_meta$placeholderProm = meta.placeholderPrompts) !== null && _meta$placeholderProm !== void 0 ? _meta$placeholderProm : placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _ref3 !== void 0 ? _ref3 : placeholderPrompts,
+          intl: intl
+        }) : createPlaceHolderStateFrom({
           isEditorFocused: isEditorFocused,
           editorState: newEditorState,
           isTypeAheadOpen: api === null || api === void 0 || (_api$typeAhead3 = api.typeAhead) === null || _api$typeAhead3 === void 0 ? void 0 : _api$typeAhead3.actions.isOpen,
           defaultPlaceholderText: (_placeholderState$pla = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderText) !== null && _placeholderState$pla !== void 0 ? _placeholderState$pla : defaultPlaceholderText,
           bracketPlaceholderText: bracketPlaceholderText,
           emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderPrompts: (_placeholderState$pla2 = placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.placeholderPrompts) !== null && _placeholderState$pla2 !== void 0 ? _placeholderState$pla2 : placeholderPrompts,
           intl: intl
         });
+
+        // Clear timeouts when hasPlaceholder becomes false
+        if (!newPlaceholderState.hasPlaceholder) {
+          clearAllTypewriterTimeouts();
+        }
+        return newPlaceholderState;
       }
     },
     props: {
@@ -174,26 +248,40 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
           hasPlaceholder = _getPlaceholderState.hasPlaceholder,
           placeholderText = _getPlaceholderState.placeholderText,
           pos = _getPlaceholderState.pos;
+
+        // Decorations is still called after plugin is destroyed
+        // So we need to make sure decorations is not called if plugin has been destroyed to prevent the placeholder animations' setTimeouts called infinitely
+        if (isDestroyed) {
+          return;
+        }
         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 && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          return createPlaceholderDecoration(editorState, placeholderText, pos);
+        if (hasPlaceholder && ((placeholderText !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos);
         }
         return;
       }
+    },
+    view: function view() {
+      return {
+        destroy: function destroy() {
+          clearAllTypewriterTimeouts();
+          isDestroyed = true;
+        }
+      };
     }
   });
 }
-export var placeholderPlugin = function placeholderPlugin(_ref2) {
-  var options = _ref2.config,
-    api = _ref2.api;
+export var placeholderPlugin = function placeholderPlugin(_ref4) {
+  var options = _ref4.config,
+    api = _ref4.api;
   var currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
   return {
     name: 'placeholder',
     commands: {
       setPlaceholder: function setPlaceholder(placeholderText) {
-        return function (_ref3) {
-          var tr = _ref3.tr;
+        return function (_ref5) {
+          var tr = _ref5.tr;
           if (currentPlaceholder !== placeholderText) {
             currentPlaceholder = placeholderText;
             return tr.setMeta(pluginKey, {
@@ -202,14 +290,22 @@ export var placeholderPlugin = function placeholderPlugin(_ref2) {
           }
           return null;
         };
+      },
+      setAnimatingPlaceholderPrompts: function setAnimatingPlaceholderPrompts(placeholderPrompts) {
+        return function (_ref6) {
+          var tr = _ref6.tr;
+          return tr.setMeta(pluginKey, {
+            placeholderPrompts: placeholderPrompts
+          });
+        };
       }
     },
     pmPlugins: function pmPlugins() {
       return [{
         name: 'placeholder',
-        plugin: function plugin(_ref4) {
-          var getIntl = _ref4.getIntl;
-          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, api);
+        plugin: function plugin(_ref7) {
+          var getIntl = _ref7.getIntl;
+          return createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api);
         }
       }];
     }

package/dist/types/placeholderPlugin.d.ts

@@ -7,6 +7,6 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { PlaceholderPlugin } from './placeholderPluginType';
 export declare const pluginKey: PluginKey<any>;
 export declare const placeholderTestId = "placeholder-test-id";
-export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
-export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
+export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, placeholderPrompts?: string[], activeTypewriterTimeouts?: (() => void)[], pos?: number): DecorationSet;
+export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
 export declare const placeholderPlugin: PlaceholderPlugin;

package/dist/types/placeholderPluginType.d.ts

@@ -7,11 +7,13 @@ export interface PlaceholderPluginOptions {
     placeholder?: string;
     placeholderBracketHint?: string;
     emptyLinePlaceholder?: string;
+    placeholderPrompts?: string[];
 }
 export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
     pluginConfiguration: PlaceholderPluginOptions | undefined;
     commands: {
         setPlaceholder: (placeholder: string) => EditorCommand;
+        setAnimatingPlaceholderPrompts: (placeholderPrompts: string[]) => EditorCommand;
     };
     dependencies: [FocusPlugin, CompositionPlugin, TypeAheadPlugin, OptionalPlugin<ShowDiffPlugin>];
 }>;

package/dist/types-ts4.5/placeholderPlugin.d.ts

@@ -7,6 +7,6 @@ import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { PlaceholderPlugin } from './placeholderPluginType';
 export declare const pluginKey: PluginKey<any>;
 export declare const placeholderTestId = "placeholder-test-id";
-export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, pos?: number): DecorationSet;
-export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
+export declare function createPlaceholderDecoration(editorState: EditorState, placeholderText: string, placeholderPrompts?: string[], activeTypewriterTimeouts?: (() => void)[], pos?: number): DecorationSet;
+export declare function createPlugin(intl: IntlShape, defaultPlaceholderText?: string, bracketPlaceholderText?: string, emptyLinePlaceholder?: string, placeholderPrompts?: string[], api?: ExtractInjectionAPI<PlaceholderPlugin>): SafePlugin | undefined;
 export declare const placeholderPlugin: PlaceholderPlugin;

package/dist/types-ts4.5/placeholderPluginType.d.ts

@@ -7,11 +7,13 @@ export interface PlaceholderPluginOptions {
     placeholder?: string;
     placeholderBracketHint?: string;
     emptyLinePlaceholder?: string;
+    placeholderPrompts?: string[];
 }
 export type PlaceholderPlugin = NextEditorPlugin<'placeholder', {
     pluginConfiguration: PlaceholderPluginOptions | undefined;
     commands: {
         setPlaceholder: (placeholder: string) => EditorCommand;
+        setAnimatingPlaceholderPrompts: (placeholderPrompts: string[]) => EditorCommand;
     };
     dependencies: [
         FocusPlugin,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-placeholder",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "Placeholder plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,11 +36,11 @@
 		"@atlaskit/editor-plugin-type-ahead": "^3.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^9.26.0",
+		"@atlaskit/tmp-editor-statsig": "^10.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.20.0",
+		"@atlaskit/editor-common": "^107.25.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"