@atlaskit/editor-plugin-placeholder 6.1.1 → 6.3.0

package/dist/es2019/placeholderPlugin.js

@@ -1,9 +1,11 @@
 import { placeholderTextMessages as messages } from '@atlaskit/editor-common/messages';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
-import { bracketTyped, browser, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
+import { bracketTyped, browser, hasDocAsParent, isEmptyDocument, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 // Typewriter animation timing constants
 const TYPEWRITER_TYPE_DELAY = 50; // Delay between typing each character
@@ -12,6 +14,8 @@ 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
 
+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) {
@@ -19,6 +23,7 @@ function getPlaceholderState(editorState) {
 }
 const nodeTypesWithLongPlaceholderText = ['expand', 'panel'];
 const nodeTypesWithShortPlaceholderText = ['tableCell', 'tableHeader'];
+const nodeTypesWithSyncBlockPlaceholderText = ['bodiedSyncBlock'];
 const cycleThroughPlaceholderPrompts = (placeholderPrompts, activeTypewriterTimeouts, placeholderNodeWithText, initialDelayWhenUserTypedAndDeleted = 0) => {
   let currentPromptIndex = 0;
   let displayedText = '';
@@ -109,24 +114,45 @@ export function createPlaceholderDecoration(editorState, placeholderText, placeh
     key: `placeholder ${placeholderText}`
   })]);
 }
-function setPlaceHolderState(placeholderText, pos, placeholderPrompts, typedAndDeleted, userHadTyped) {
+function setPlaceHolderState({
+  placeholderText,
+  pos,
+  placeholderPrompts,
+  typedAndDeleted,
+  userHadTyped,
+  canShowOnEmptyParagraph,
+  showOnEmptyParagraph
+}) {
   return {
     hasPlaceholder: true,
     placeholderText,
     placeholderPrompts,
     pos: pos ? pos : 1,
     typedAndDeleted,
-    userHadTyped
+    userHadTyped,
+    canShowOnEmptyParagraph,
+    showOnEmptyParagraph
   };
 }
-const emptyPlaceholder = (placeholderText, placeholderPrompts, userHadTyped) => ({
+const emptyPlaceholder = ({
+  placeholderText,
+  placeholderPrompts,
+  userHadTyped,
+  pos,
+  canShowOnEmptyParagraph,
+  showOnEmptyParagraph
+}) => ({
   hasPlaceholder: false,
   placeholderText,
   placeholderPrompts,
   userHadTyped,
-  typedAndDeleted: false
+  typedAndDeleted: false,
+  canShowOnEmptyParagraph,
+  showOnEmptyParagraph,
+  pos
 });
 function createPlaceHolderStateFrom({
+  isInitial,
   isEditorFocused,
   editorState,
   isTypeAheadOpen,
@@ -136,13 +162,61 @@ function createPlaceHolderStateFrom({
   emptyLinePlaceholder,
   placeholderPrompts,
   typedAndDeleted,
-  userHadTyped
+  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(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+    return emptyPlaceholder({
+      placeholderText: defaultPlaceholderText,
+      placeholderPrompts,
+      userHadTyped
+    });
   }
   if ((defaultPlaceholderText || placeholderPrompts) && isEmptyDocument(editorState.doc)) {
-    return setPlaceHolderState(defaultPlaceholderText, 1, placeholderPrompts, typedAndDeleted, userHadTyped);
+    return setPlaceHolderState({
+      placeholderText: defaultPlaceholderText,
+      pos: 1,
+      placeholderPrompts,
+      typedAndDeleted,
+      userHadTyped
+    });
+  }
+  if (fg('platform_editor_ai_aifc_patch_beta_2')) {
+    const {
+      from,
+      to,
+      $to
+    } = editorState.selection;
+    if (defaultPlaceholderText && 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;
@@ -151,14 +225,24 @@ function createPlaceHolderStateFrom({
       $to
     } = editorState.selection;
     if ($from.pos !== $to.pos) {
-      return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+      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(emptyLinePlaceholder, $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+        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';
@@ -166,17 +250,46 @@ function createPlaceHolderStateFrom({
       var _table$node$firstChil;
       const table = findParentNode(node => node.type === editorState.schema.nodes.table)(editorState.selection);
       if (!table) {
-        return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+        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(intl.formatMessage(messages.shortEmptyNodePlaceholderText), $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+        return setPlaceHolderState({
+          placeholderText: intl.formatMessage(messages.shortEmptyNodePlaceholderText),
+          pos: $from.pos,
+          placeholderPrompts,
+          typedAndDeleted,
+          userHadTyped
+        });
       }
     }
     if (nodeTypesWithLongPlaceholderText.includes(parentType) && isEmptyNode) {
-      return setPlaceHolderState(intl.formatMessage(messages.longEmptyNodePlaceholderText), $from.pos, placeholderPrompts, typedAndDeleted, userHadTyped);
+      return setPlaceHolderState({
+        placeholderText: intl.formatMessage(messages.longEmptyNodePlaceholderText),
+        pos: $from.pos,
+        placeholderPrompts,
+        typedAndDeleted,
+        userHadTyped
+      });
+    }
+    if (nodeTypesWithSyncBlockPlaceholderText.includes(parentType) && isEmptyNode && expValEquals('platform_synced_block', 'isEnabled', true)) {
+      return setPlaceHolderState({
+        placeholderText: intl.formatMessage(messages.syncBlockPlaceholderText),
+        pos: $from.pos,
+        placeholderPrompts,
+        typedAndDeleted,
+        userHadTyped
+      });
     }
-    return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+    return emptyPlaceholder({
+      placeholderText: defaultPlaceholderText,
+      placeholderPrompts,
+      userHadTyped
+    });
   }
   if (bracketPlaceholderText && bracketTyped(editorState) && isEditorFocused) {
     const {
@@ -184,9 +297,19 @@ function createPlaceHolderStateFrom({
     } = editorState.selection;
     // Space is to account for positioning of the bracket
     const bracketHint = '  ' + bracketPlaceholderText;
-    return setPlaceHolderState(bracketHint, $from.pos - 1, placeholderPrompts, typedAndDeleted, userHadTyped);
+    return setPlaceHolderState({
+      placeholderText: bracketHint,
+      pos: $from.pos - 1,
+      placeholderPrompts,
+      typedAndDeleted,
+      userHadTyped
+    });
   }
-  return emptyPlaceholder(defaultPlaceholderText, placeholderPrompts, userHadTyped);
+  return emptyPlaceholder({
+    placeholderText: defaultPlaceholderText,
+    placeholderPrompts,
+    userHadTyped
+  });
 }
 function calculateUserInteractionState({
   placeholderState,
@@ -209,7 +332,7 @@ function calculateUserInteractionState({
     typedAndDeleted: isInTypedAndDeletedState
   };
 }
-export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, api) {
+export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderText, emptyLinePlaceholder, placeholderPrompts, withEmptyParagraph, api) {
   if (!defaultPlaceholderText && !placeholderPrompts && !bracketPlaceholderText) {
     return;
   }
@@ -225,6 +348,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
       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,
@@ -238,7 +362,7 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
         });
       },
       apply: (tr, placeholderState, _oldEditorState, newEditorState) => {
-        var _api$focus2, _api$focus2$sharedSta, _api$typeAhead2, _ref, _meta$placeholderText, _ref2, _meta$placeholderProm;
+        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 {
@@ -249,17 +373,27 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
           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')) {
+          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: (_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,
+          defaultPlaceholderText: fg('platform_editor_ai_aifc_patch_beta_2') ? 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,
           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
+          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
@@ -294,9 +428,51 @@ export function createPlugin(intl, defaultPlaceholderText, bracketPlaceholderTex
       }
     },
     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')) {
+            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;
         }
       };
@@ -328,6 +504,13 @@ export const placeholderPlugin = ({
         return tr.setMeta(pluginKey, {
           placeholderPrompts: placeholderPrompts
         });
+      },
+      setPlaceholderHidden: isPlaceholderHidden => ({
+        tr
+      }) => {
+        return tr.setMeta(pluginKey, {
+          isPlaceholderHidden
+        });
       }
     },
     pmPlugins() {
@@ -335,7 +518,7 @@ export const placeholderPlugin = ({
         name: 'placeholder',
         plugin: ({
           getIntl
-        }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, api)
+        }) => createPlugin(getIntl(), options && options.placeholder, options && options.placeholderBracketHint, options && options.emptyLinePlaceholder, options && options.placeholderPrompts, options === null || options === void 0 ? void 0 : options.withEmptyParagraph, api)
       }];
     }
   };