@atlaskit/editor-plugin-placeholder 6.5.4 → 6.6.1

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

@@ -0,0 +1,52 @@
+import { TYPEWRITER_CYCLE_DELAY, TYPEWRITER_ERASE_DELAY, TYPEWRITER_PAUSE_BEFORE_ERASE, TYPEWRITER_TYPE_DELAY } from './constants';
+export var cycleThroughPlaceholderPrompts = function cycleThroughPlaceholderPrompts(placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText) {
+  var initialDelayWhenUserTypedAndDeleted = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  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);
+        placeholderNodeWithText.textContent = displayedText;
+        characterIndex++;
+        scheduleTimeout(_typeNextCharacter, TYPEWRITER_TYPE_DELAY);
+      } else {
+        scheduleTimeout(_eraseLastCharacter, TYPEWRITER_PAUSE_BEFORE_ERASE);
+      }
+    };
+    var _eraseLastCharacter = function 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 || activeTypewriterTimeouts.push(clearAllTimeouts);
+  if (initialDelayWhenUserTypedAndDeleted > 0) {
+    placeholderNodeWithText.textContent = ' ';
+    scheduleTimeout(_startAnimationCycle, initialDelayWhenUserTypedAndDeleted);
+  } else {
+    _startAnimationCycle();
+  }
+};

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

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

package/dist/esm/pm-plugins/decorations.js

@@ -0,0 +1,90 @@
+import { processRawValue } from '@atlaskit/editor-common/process-raw-value';
+import { browser } from '@atlaskit/editor-common/utils';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { cycleThroughPlaceholderPrompts } from './animation';
+import { placeholderTestId } from './constants';
+export function createPlaceholderDecoration(editorState, placeholderText, placeholderPrompts, activeTypewriterTimeouts) {
+  var pos = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
+  var initialDelayWhenUserTypedAndDeleted = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
+  var placeholderADF = arguments.length > 6 ? arguments[6] : undefined;
+  var placeholderDecoration = document.createElement('span');
+  var placeholderNodeWithText = placeholderDecoration;
+  placeholderDecoration.setAttribute('data-testid', placeholderTestId);
+  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) {
+    var 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) {
+    var serializer = DOMSerializer.fromSchema(editorState.schema);
+    // Get a PMNode from docnode
+    var 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(function (node) {
+        // For paragraph nodes, serialize their content (inline elements) directly
+        // without the wrapping <p> tag
+        if (node.type.name === 'paragraph') {
+          node.content.forEach(function (inlineNode) {
+            var inlineDOM = serializer.serializeNode(inlineNode);
+            placeholderNodeWithText.append(inlineDOM);
+          });
+        } else {
+          // For non-paragraph nodes, serialize normally
+          var nodeDOM = serializer.serializeNode(node);
+          placeholderNodeWithText.append(nodeDOM);
+        }
+      });
+      var markElements = placeholderNodeWithText.querySelectorAll('[data-prosemirror-content-type="mark"]');
+      markElements.forEach(function (markEl) {
+        if (markEl instanceof HTMLElement) {
+          markEl.style.setProperty('color', "var(--ds-text-subtlest, #6B6E76)");
+        }
+      });
+      // Ensure all child elements don't block pointer events or cursor
+      var allElements = placeholderNodeWithText.querySelectorAll('*');
+      allElements.forEach(function (el) {
+        if (el instanceof HTMLElement) {
+          el.style.pointerEvents = 'none';
+          el.style.userSelect = 'none';
+        }
+      });
+    }
+  } else if (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) {
+    var buffNode = document.createElement('span');
+    buffNode.setAttribute('class', 'placeholder-android');
+    buffNode.setAttribute('contenteditable', 'true');
+    buffNode.textContent = ' ';
+    placeholderDecoration.appendChild(buffNode);
+  }
+  var 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 ".concat(placeholderText)
+  })]);
+}

package/dist/esm/pm-plugins/main.js

@@ -0,0 +1,162 @@
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { pluginKey, EMPTY_PARAGRAPH_TIMEOUT_DELAY } from '../placeholderPlugin';
+import { TYPEWRITER_TYPED_AND_DELETED_DELAY } from './constants';
+import { createPlaceholderDecoration } from './decorations';
+import { calculateUserInteractionState, createPlaceHolderStateFrom, getPlaceholderState } from './utils';
+export default function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, placeholderADF, api) {
+  if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText && !placeholderADF) {
+    return;
+  }
+  var isDestroyed = false;
+  var activeTypewriterTimeouts = [];
+  var clearAllTypewriterTimeouts = function clearAllTypewriterTimeouts() {
+    activeTypewriterTimeouts.forEach(function (clearFn) {
+      return clearFn();
+    });
+    activeTypewriterTimeouts = [];
+  };
+  return new SafePlugin({
+    key: pluginKey,
+    state: {
+      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,
+          defaultPlaceholderText: defaultPlaceholderText,
+          bracketPlaceholderText: bracketPlaceholderText,
+          emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderADF: placeholderADF,
+          placeholderPrompts: placeholderPrompts,
+          typedAndDeleted: false,
+          userHadTyped: false,
+          intl: intl,
+          withEmptyParagraph: withEmptyParagraph
+        });
+      },
+      apply: function apply(tr, placeholderState, _oldEditorState, newEditorState) {
+        var _api$focus2, _placeholderState$isP, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _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({
+            placeholderState: placeholderState,
+            oldEditorState: _oldEditorState,
+            newEditorState: newEditorState
+          }),
+          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 && withEmptyParagraph) {
+          isPlaceholderHidden = meta.isPlaceholderHidden;
+        }
+        if ((meta === null || meta === void 0 ? void 0 : meta.placeholderText) !== undefined && withEmptyParagraph) {
+          // Only update defaultPlaceholderText from meta if we're not using ADF placeholder
+          if (!(fg('platform_editor_ai_aifc_patch_ga') && placeholderADF)) {
+            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: withEmptyParagraph ? 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: bracketPlaceholderText,
+          emptyLinePlaceholder: emptyLinePlaceholder,
+          placeholderADF: 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: typedAndDeleted,
+          userHadTyped: userHadTyped,
+          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
+        if (!newPlaceholderState.hasPlaceholder) {
+          clearAllTypewriterTimeouts();
+        }
+        return newPlaceholderState;
+      }
+    },
+    props: {
+      decorations: function decorations(editorState) {
+        var _api$composition, _api$showDiff;
+        var _getPlaceholderState = getPlaceholderState(editorState),
+          hasPlaceholder = _getPlaceholderState.hasPlaceholder,
+          placeholderText = _getPlaceholderState.placeholderText,
+          pos = _getPlaceholderState.pos,
+          typedAndDeleted = _getPlaceholderState.typedAndDeleted,
+          contextPlaceholderADF = _getPlaceholderState.contextPlaceholderADF;
+
+        // 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 !== null && placeholderText !== void 0 ? placeholderText : '') || placeholderPrompts || placeholderADF || contextPlaceholderADF) && pos !== undefined && !(compositionPluginState !== null && compositionPluginState !== void 0 && compositionPluginState.isComposing) && !isShowingDiff) {
+          var initialDelayWhenUserTypedAndDeleted = typedAndDeleted ? TYPEWRITER_TYPED_AND_DELETED_DELAY : 0;
+          // contextPlaceholderADF takes precedence over the global placeholderADF
+          var placeholderAdfToUse = contextPlaceholderADF || placeholderADF;
+          return createPlaceholderDecoration(editorState, placeholderText !== null && placeholderText !== void 0 ? placeholderText : '', placeholderPrompts, activeTypewriterTimeouts, pos, initialDelayWhenUserTypedAndDeleted, placeholderAdfToUse);
+        }
+        return;
+      }
+    },
+    view: function view() {
+      var timeoutId;
+      function startEmptyParagraphTimeout(editorView) {
+        if (timeoutId) {
+          return;
+        }
+        timeoutId = setTimeout(function () {
+          timeoutId = undefined;
+          editorView.dispatch(editorView.state.tr.setMeta(pluginKey, {
+            showOnEmptyParagraph: true
+          }));
+        }, EMPTY_PARAGRAPH_TIMEOUT_DELAY);
+      }
+      function destroyEmptyParagraphTimeout() {
+        if (timeoutId) {
+          clearTimeout(timeoutId);
+          timeoutId = undefined;
+        }
+      }
+      return {
+        update: function update(editorView, prevState) {
+          if (withEmptyParagraph) {
+            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;
+        }
+      };
+    }
+  });
+}