@atlaskit/editor-plugin-placeholder 6.5.4 → 6.6.1

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

@@ -0,0 +1,87 @@
+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, 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}`
+  })]);
+}

package/dist/es2019/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;
+  }
+  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,
+          withEmptyParagraph
+        });
+      },
+      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 && 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;
+          }
+        }
+        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: 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,
+          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 (withEmptyParagraph) {
+            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;
+        }
+      };
+    }
+  });
+}