@atlaskit/editor-plugin-placeholder 6.5.4 → 6.6.1

package/dist/es2019/placeholderPlugin.js

@@ -1,560 +1,20 @@
-import { code, text } from '@atlaskit/adf-utils/builders';
-import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
-import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
-import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { bracketTyped, browser, hasDocAsParent, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
-import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
-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
-const TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
-
+import createPlugin from './pm-plugins/main';
+import { placeholderPluginLegacy } from './pm-plugins/placeholderPluginLegacy';
 export const EMPTY_PARAGRAPH_TIMEOUT_DELAY = 2000; // Delay before showing placeholder on empty paragraph
 
 export const pluginKey = new PluginKey('placeholderPlugin');
-const placeholderTestId = 'placeholder-test-id';
-function getPlaceholderState(editorState) {
-  return pluginKey.getState(editorState);
-}
-const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
-const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
-const nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
-const createShortEmptyNodePlaceholderADF = ({
-  formatMessage
-}) => ({
-  version: 1,
-  type: 'doc',
-  content: [{
-    type: 'paragraph',
-    content: [code(formatMessage(messages.shortEmptyNodePlaceholderADFSlashShortcut)), text(' '), text(formatMessage(messages.shortEmptyNodePlaceholderADFSuffix))]
-  }]
-});
-const createLongEmptyNodePlaceholderADF = ({
-  formatMessage
-}) => ({
-  version: 1,
-  type: 'doc',
-  content: [{
-    type: 'paragraph',
-    content: [text(formatMessage(messages.longEmptyNodePlaceholderADFPrefix)), text(' '), code(formatMessage(messages.longEmptyNodePlaceholderADFSlashShortcut)), text(' '), text(formatMessage(messages.longEmptyNodePlaceholderADFSuffix))]
-  }]
-});
-const cycleThroughPlaceholderPrompts = (placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText, initialDelayWhenUserTypedAndDeleted = 0) => {
-  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);
-        placeholderNodeWithText.textContent = displayedText;
-        characterIndex++;
-        scheduleTimeout(typeNextCharacter, TYPEWRITER_TYPE_DELAY);
-      } else {
-        scheduleTimeout(eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
-      }
-    };
-    const eraseLastCharacter = () => {
-      if (displayedText.length > 1) {
-        displayedText = displayedText.substring(0, displayedText.length - 1);
-        placeholderNodeWithText.textContent = displayedText;
-        scheduleTimeout(eraseLastCharacter, TYPEWRITER_ERASE_DELAY);
-      } else {
-        displayedText = ' ';
-        placeholderNodeWithText.textContent = displayedText;
-        currentPromptIndex = (currentPromptIndex + 1) % placeholderPrompts.length;
-        scheduleTimeout(startAnimationCycle, TYPEWRITER_CYCLE_DELAY);
-      }
-    };
-    typeNextCharacter();
-  };
-  activeTypewriterTimeouts === null || activeTypewriterTimeouts === void 0 ? void 0 : activeTypewriterTimeouts.push(clearAllTimeouts);
-  if (initialDelayWhenUserTypedAndDeleted > 0) {
-    placeholderNodeWithText.textContent = ' ';
-    scheduleTimeout(startAnimationCycle, initialDelayWhenUserTypedAndDeleted);
-  } else {
-    startAnimationCycle();
-  }
-};
-export function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts, pos = 1, initialDelayWhenUserTypedAndDeleted = 0, placeholderADF) {
-  const placeholderDecoration = document.createElement('span');
-  let placeholderNodeWithText = placeholderDecoration;
-  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
-  placeholderDecoration.className = 'placeholder-decoration';
-  placeholderDecoration.setAttribute('aria-hidden', 'true');
-
-  // PM sets contenteditable to false on Decorations so Firefox doesn't display the flashing cursor
-  // So adding an extra span which will contain the placeholder text
-  if (browser.gecko) {
-    const placeholderNode = document.createElement('span');
-    placeholderNode.setAttribute('contenteditable', 'true'); // explicitly overriding the default Decoration behaviour
-    placeholderDecoration.appendChild(placeholderNode);
-    placeholderNodeWithText = placeholderNode;
-  }
-  if (placeholderText) {
-    placeholderNodeWithText.textContent = placeholderText || ' ';
-  } else if (placeholderADF) {
-    const serializer = DOMSerializer.fromSchema(editorState.schema);
-    // Get a PMNode from docnode
-    const docNode = 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(node => {
-        // For paragraph nodes, serialize their content (inline elements) directly
-        // without the wrapping <p> tag
-        if (node.type.name === 'paragraph') {
-          node.content.forEach(inlineNode => {
-            const inlineDOM = serializer.serializeNode(inlineNode);
-            placeholderNodeWithText.append(inlineDOM);
-          });
-        } else {
-          // For non-paragraph nodes, serialize normally
-          const nodeDOM = serializer.serializeNode(node);
-          placeholderNodeWithText.append(nodeDOM);
-        }
-      });
-      const markElements = placeholderNodeWithText.querySelectorAll('[data-prosemirror-content-type="mark"]');
-      markElements.forEach(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
-      const allElements = placeholderNodeWithText.querySelectorAll('*');
-      allElements.forEach(el => {
-        if (el instanceof HTMLElement) {
-          el.style.pointerEvents = 'none';
-          el.style.userSelect = 'none';
-        }
-      });
-    }
-  } else if (placeholderPrompts) {
-    cycleThroughPlaceholderPrompts(placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText, initialDelayWhenUserTypedAndDeleted);
-  }
-
-  // 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
-  // when backspace in GBoard composition
-  if (browser.android && browser.chrome) {
-    const buffNode = document.createElement('span');
-    buffNode.setAttribute('class', 'placeholder-android');
-    buffNode.setAttribute('contenteditable', 'true');
-    buffNode.textContent = ' ';
-    placeholderDecoration.appendChild(buffNode);
-  }
-  const isTargetNested = editorState.doc.resolve(pos).depth > 1;
-
-  // only truncate text for nested nodes, otherwise applying 'overflow: hidden;' to top level nodes
-  // creates issues with quick insert button
-  if (isTargetNested && editorExperiment('platform_editor_controls', 'variant1')) {
-    placeholderDecoration.classList.add('placeholder-decoration-hide-overflow');
-  }
-  return DecorationSet.create(editorState.doc, [Decoration.widget(pos, placeholderDecoration, {
-    side: 0,
-    key: `placeholder ${placeholderText}`
-  })]);
-}
-function setPlaceHolderState({
-  placeholderText,
-  pos,
-  placeholderPrompts,
-  typedAndDeleted,
-  userHadTyped,
-  canShowOnEmptyParagraph,
-  showOnEmptyParagraph,
-  contextPlaceholderADF
-}) {
-  return {
-    hasPlaceholder: true,
-    placeholderText,
-    placeholderPrompts,
-    contextPlaceholderADF,
-    pos: pos ? pos : 1,
-    typedAndDeleted,
-    userHadTyped,
-    canShowOnEmptyParagraph,
-    showOnEmptyParagraph
-  };
-}
-const emptyPlaceholder = ({
-  placeholderText,
-  placeholderPrompts,
-  userHadTyped,
-  pos,
-  canShowOnEmptyParagraph,
-  showOnEmptyParagraph
-}) => ({
-  hasPlaceholder: false,
-  placeholderText,
-  placeholderPrompts,
-  userHadTyped,
-  typedAndDeleted: false,
-  canShowOnEmptyParagraph,
-  showOnEmptyParagraph,
-  pos
-});
-function createPlaceHolderStateFrom({
-  isInitial,
-  isEditorFocused,
-  editorState,
-  isTypeAheadOpen,
-  defaultPlaceholderText,
-  intl,
-  bracketPlaceholderText,
-  emptyLinePlaceholder,
-  placeholderADF,
-  placeholderPrompts,
-  typedAndDeleted,
-  userHadTyped,
-  isPlaceholderHidden,
-  withEmptyParagraph,
-  showOnEmptyParagraph
-}) {
-  if (isPlaceholderHidden && fg('platform_editor_ai_aifc_patch_beta')) {
-    return {
-      ...emptyPlaceholder({
-        placeholderText: defaultPlaceholderText,
-        placeholderPrompts,
-        userHadTyped
-      }),
-      isPlaceholderHidden
-    };
-  }
-  if (isTypeAheadOpen !== null && isTypeAheadOpen !== void 0 && isTypeAheadOpen(editorState)) {
-    return emptyPlaceholder({
-      placeholderText: defaultPlaceholderText,
-      placeholderPrompts,
-      userHadTyped
-    });
-  }
-  if ((defaultPlaceholderText || placeholderPrompts || placeholderADF) && isEmptyDocument(editorState.doc)) {
-    return setPlaceHolderState({
-      placeholderText: defaultPlaceholderText,
-      pos: 1,
-      placeholderPrompts,
-      typedAndDeleted,
-      userHadTyped
-    });
-  }
-  if (fg('platform_editor_ai_aifc_patch_beta_2') || fg('platform_editor_ai_aifc_patch_ga')) {
-    const {
-      from,
-      to,
-      $to
-    } = editorState.selection;
-    if ((defaultPlaceholderText || placeholderADF) && withEmptyParagraph && isEditorFocused && !isInitial && !isEmptyDocument(editorState.doc) && from === to && isEmptyParagraph($to.parent) && hasDocAsParent($to)) {
-      return showOnEmptyParagraph ? setPlaceHolderState({
-        placeholderText: defaultPlaceholderText,
-        pos: to,
-        placeholderPrompts,
-        typedAndDeleted,
-        userHadTyped,
-        canShowOnEmptyParagraph: true,
-        showOnEmptyParagraph: true
-      }) : emptyPlaceholder({
-        placeholderText: defaultPlaceholderText,
-        placeholderPrompts,
-        userHadTyped,
-        canShowOnEmptyParagraph: true,
-        showOnEmptyParagraph: false,
-        pos: to
-      });
-    }
-  }
-  if (isEditorFocused && editorExperiment('platform_editor_controls', 'variant1')) {
-    var _parentNode$firstChil, _parentNode$firstChil2;
-    const {
-      $from,
-      $to
-    } = editorState.selection;
-    if ($from.pos !== $to.pos) {
-      return emptyPlaceholder({
-        placeholderText: defaultPlaceholderText,
-        placeholderPrompts,
-        userHadTyped
-      });
-    }
-    const parentNode = $from.node($from.depth - 1);
-    const parentType = parentNode === null || parentNode === void 0 ? void 0 : parentNode.type.name;
-    if (emptyLinePlaceholder && parentType === 'doc') {
-      const isEmptyLine = isEmptyParagraph($from.parent);
-      if (isEmptyLine) {
-        return setPlaceHolderState({
-          placeholderText: emptyLinePlaceholder,
-          pos: $from.pos,
-          placeholderPrompts,
-          typedAndDeleted,
-          userHadTyped
-        });
-      }
-    }
-    const 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';
-    if (nodeTypesWithShortPlaceholderText.includes(parentType) && isEmptyNode) {
-      var _table$node$firstChil;
-      const table = findParentNode(node => node.type === editorState.schema.nodes.table)(editorState.selection);
-      if (!table) {
-        return emptyPlaceholder({
-          placeholderText: defaultPlaceholderText,
-          placeholderPrompts,
-          userHadTyped
-        });
-      }
-      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) {
-        return setPlaceHolderState({
-          placeholderText: !fg('platform_editor_ai_aifc_patch_ga') ? intl.formatMessage(messages.shortEmptyNodePlaceholderText) : undefined,
-          contextPlaceholderADF: fg('platform_editor_ai_aifc_patch_ga') ? createShortEmptyNodePlaceholderADF(intl) : undefined,
-          pos: $from.pos,
-          placeholderPrompts,
-          typedAndDeleted,
-          userHadTyped
-        });
-      }
-    }
-    if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
-      return setPlaceHolderState({
-        placeholderText: !fg('platform_editor_ai_aifc_patch_ga') ? intl.formatMessage(messages.longEmptyNodePlaceholderText) : undefined,
-        contextPlaceholderADF: fg('platform_editor_ai_aifc_patch_ga') ? createLongEmptyNodePlaceholderADF(intl) : undefined,
-        pos: $from.pos,
-        placeholderPrompts,
-        typedAndDeleted,
-        userHadTyped
-      });
-    }
-    if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && editorExperiment('platform_synced_block', true)) {
-      return setPlaceHolderState({
-        placeholderText: intl.formatMessage(messages.syncBlockPlaceholderText),
-        pos: $from.pos,
-        placeholderPrompts,
-        typedAndDeleted,
-        userHadTyped
-      });
-    }
-    return emptyPlaceholder({
-      placeholderText: defaultPlaceholderText,
-      placeholderPrompts,
-      userHadTyped
-    });
-  }
-  if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
-    const {
-      $from
-    } = editorState.selection;
-    // Space is to account for positioning of the bracket
-    const bracketHint = '  ' + bracketPlaceholderText;
-    return setPlaceHolderState({
-      placeholderText: bracketHint,
-      pos: $from.pos - 1,
-      placeholderPrompts,
-      typedAndDeleted,
-      userHadTyped
-    });
-  }
-  return emptyPlaceholder({
-    placeholderText: defaultPlaceholderText,
-    placeholderPrompts,
-    userHadTyped
-  });
-}
-function calculateUserInteractionState({
-  placeholderState,
-  oldEditorState,
-  newEditorState
-}) {
-  const wasEmpty = oldEditorState ? isEmptyDocument(oldEditorState.doc) : true;
-  const isEmpty = isEmptyDocument(newEditorState.doc);
-  const hasEverTyped = Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.userHadTyped) ||
-  // Previously typed
-  !wasEmpty ||
-  // Had content before
-  wasEmpty && !isEmpty; // Just added content
-  const justDeletedAll = hasEverTyped && isEmpty && !wasEmpty;
-  const isInTypedAndDeletedState = justDeletedAll || Boolean(placeholderState === null || placeholderState === void 0 ? void 0 : placeholderState.typedAndDeleted) && isEmpty;
-  // Only reset user interaction tracking when editor is cleanly empty
-  const shouldResetInteraction = isEmpty && !isInTypedAndDeletedState;
-  return {
-    userHadTyped: shouldResetInteraction ? false : hasEverTyped,
-    typedAndDeleted: isInTypedAndDeletedState
-  };
-}
-export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, placeholderADF, api) {
-  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
-    return;
-  }
-  let isDestroyed = false;
-  let activeTypewriterTimeouts = [];
-  const clearAllTypewriterTimeouts = () => {
-    activeTypewriterTimeouts.forEach(clearFn => clearFn());
-    activeTypewriterTimeouts = [];
-  };
-  return new SafePlugin({
-    key: pluginKey,
-    state: {
-      init: (_, state) => {
-        var _api$focus, _api$focus$sharedStat, _api$typeAhead;
-        return createPlaceHolderStateFrom({
-          isInitial: true,
-          isEditorFocused: Boolean(api === null || api === void 0 ? void 0 : (_api$focus = api.focus) === null || _api$focus === void 0 ? void 0 : (_api$focus$sharedStat = _api$focus.sharedState.currentState()) === null || _api$focus$sharedStat === void 0 ? void 0 : _api$focus$sharedStat.hasFocus),
-          editorState: state,
-          isTypeAheadOpen: api === null || api === void 0 ? void 0 : (_api$typeAhead = api.typeAhead) === null || _api$typeAhead === void 0 ? void 0 : _api$typeAhead.actions.isOpen,
-          defaultPlaceholderText,
-          bracketPlaceholderText,
-          emptyLinePlaceholder,
-          placeholderADF,
-          placeholderPrompts,
-          typedAndDeleted: false,
-          userHadTyped: false,
-          intl
-        });
-      },
-      apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
-        var _api$focus2, _api$focus2$sharedSta, _placeholderState$isP, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm, _meta$showOnEmptyPara;
-        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);
-        const {
-          userHadTyped,
-          typedAndDeleted
-        } = calculateUserInteractionState({
-          placeholderState,
-          oldEditorState: _oldEditorState,
-          newEditorState
-        });
-        let 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 && fg('platform_editor_ai_aifc_patch_beta')) {
-          isPlaceholderHidden = meta.isPlaceholderHidden;
-        }
-        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && (fg('platform_editor_ai_aifc_patch_beta_2') || fg('platform_editor_ai_aifc_patch_ga'))) {
-          // Only update defaultPlaceholderText from meta if we're not using ADF placeholder
-          if (!(fg('platform_editor_ai_aifc_patch_ga') && placeholderADF)) {
-            defaultPlaceholderText = meta.placeholderText;
-          }
-        }
-        const newPlaceholderState = 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: fg('platform_editor_ai_aifc_patch_beta_2') || fg('platform_editor_ai_aifc_patch_ga') ? defaultPlaceholderText : (_ref = (_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 && _ref !== void 0 ? _ref : defaultPlaceholderText,
-          bracketPlaceholderText,
-          emptyLinePlaceholder,
-          placeholderADF,
-          placeholderPrompts: (_ref2 = (_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 && _ref2 !== void 0 ? _ref2 : placeholderPrompts,
-          typedAndDeleted,
-          userHadTyped,
-          intl,
-          isPlaceholderHidden,
-          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
-        if (!newPlaceholderState.hasPlaceholder) {
-          clearAllTypewriterTimeouts();
-        }
-        return newPlaceholderState;
-      }
-    },
-    props: {
-      decorations(editorState) {
-        var _api$composition, _api$showDiff, _api$showDiff$sharedS;
-        const {
-          hasPlaceholder,
-          placeholderText,
-          pos,
-          typedAndDeleted,
-          contextPlaceholderADF
-        } = 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 !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
-          const initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
-          // contextPlaceholderADF takes precedence over the global placeholderADF
-          const placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
-          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse);
-        }
-        return;
-      }
-    },
-    view() {
-      let timeoutId;
-      function startEmptyParagraphTimeout(editorView) {
-        if (timeoutId) {
-          return;
-        }
-        timeoutId = setTimeout(() => {
-          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(editorView, prevState) {
-          if (fg('platform_editor_ai_aifc_patch_beta_2') || fg('platform_editor_ai_aifc_patch_ga')) {
-            const prevPluginState = getPlaceholderState(prevState);
-            const 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() {
-          clearAllTypewriterTimeouts();
-          destroyEmptyParagraphTimeout();
-          isDestroyed = true;
-        }
-      };
-    }
-  });
-}
 export const placeholderPlugin = ({
   config: options,
   api
 }) => {
+  if (!fg('platform_editor_placeholder_plugin_tidying')) {
+    return placeholderPluginLegacy({
+      config: options,
+      api
+    });
+  }
   let currentPlaceholder = options === null || options === void 0 ? void 0 : options.placeholder;
   return {
     name: 'placeholder',

package/dist/es2019/pm-plugins/adf-builders.js

@@ -0,0 +1,22 @@
+import { code, text } from '@atlaskit/adf-utils/builders';
+import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
+export const createShortEmptyNodePlaceholderADF = ({
+  formatMessage
+}) => ({
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [code(formatMessage(messages.shortEmptyNodePlaceholderADFSlashShortcut)), text(' '), text(formatMessage(messages.shortEmptyNodePlaceholderADFSuffix))]
+  }]
+});
+export const createLongEmptyNodePlaceholderADF = ({
+  formatMessage
+}) => ({
+  version: 1,
+  type: 'doc',
+  content: [{
+    type: 'paragraph',
+    content: [text(formatMessage(messages.longEmptyNodePlaceholderADFPrefix)), text(' '), code(formatMessage(messages.longEmptyNodePlaceholderADFSlashShortcut)), text(' '), text(formatMessage(messages.longEmptyNodePlaceholderADFSuffix))]
+  }]
+});

package/dist/es2019/pm-plugins/animation.js

@@ -0,0 +1,49 @@
+import { TYPEWRITER_CYCLE_DELAY, TYPEWRITER_ERASE_DELAY, TYPEWRITER_PAUSE_BEFORE_ERASE, TYPEWRITER_TYPE_DELAY } from './constants';
+export const cycleThroughPlaceholderPrompts = (placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText, initialDelayWhenUserTypedAndDeleted = 0) => {
+  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);
+        placeholderNodeWithText.textContent = displayedText;
+        characterIndex++;
+        scheduleTimeout(typeNextCharacter, TYPEWRITER_TYPE_DELAY);
+      } else {
+        scheduleTimeout(eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
+      }
+    };
+    const eraseLastCharacter = () => {
+      if (displayedText.length > 1) {
+        displayedText = displayedText.substring(0, displayedText.length - 1);
+        placeholderNodeWithText.textContent = displayedText;
+        scheduleTimeout(eraseLastCharacter, TYPEWRITER_ERASE_DELAY);
+      } else {
+        displayedText = ' ';
+        placeholderNodeWithText.textContent = displayedText;
+        currentPromptIndex = (currentPromptIndex + 1) % placeholderPrompts.length;
+        scheduleTimeout(startAnimationCycle, TYPEWRITER_CYCLE_DELAY);
+      }
+    };
+    typeNextCharacter();
+  };
+  activeTypewriterTimeouts === null || activeTypewriterTimeouts === void 0 ? void 0 : activeTypewriterTimeouts.push(clearAllTimeouts);
+  if (initialDelayWhenUserTypedAndDeleted > 0) {
+    placeholderNodeWithText.textContent = ' ';
+    scheduleTimeout(startAnimationCycle, initialDelayWhenUserTypedAndDeleted);
+  } else {
+    startAnimationCycle();
+  }
+};

package/dist/es2019/pm-plugins/constants.js

@@ -0,0 +1,12 @@
+export const placeholderTestId = 'placeholder-test-id';
+
+// Typewriter animation timing constants
+export const TYPEWRITER_TYPE_DELAY = 50; // Delay between typing each character
+export const TYPEWRITER_PAUSE_BEFORE_ERASE = 2000; // Pause before starting to erase text
+export const TYPEWRITER_ERASE_DELAY = 40; // Delay between erasing each character
+export const TYPEWRITER_CYCLE_DELAY = 500; // Delay before starting next cycle
+export const TYPEWRITER_TYPED_AND_DELETED_DELAY = 1500; // Delay before starting animation after user typed and deleted
+
+export const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
+export const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
+export const nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];