[WIKI-829] fix: add option to only show placeholder on empty editor (#8232)

* feat: add placeholderOnEmpty functionality to editor components

* Update packages/editor/src/core/extensions/placeholder.ts

Co-authored-by: Copilot <[email protected]>

* refactor: rename placeholderOnEmpty to showPlaceholderOnEmpty across editor components

* chore : make optional

---------

Co-authored-by: Copilot <[email protected]>

Author: iam-vipin

apps/web/core/components/editor/lite-text/editor.tsx

@@ -72,6 +72,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
     placeholder = t("issue.comments.placeholder"),
     disabledExtensions: additionalDisabledExtensions = [],
     editorClassName = "",
+    showPlaceholderOnEmpty = true,
     ...rest
   } = props;
   // states
@@ -154,6 +155,7 @@ export const LiteTextEditor = React.forwardRef(function LiteTextEditor(
               }),
             }}
             placeholder={placeholder}
+            showPlaceholderOnEmpty={showPlaceholderOnEmpty}
             containerClassName={cn(containerClassName, "relative", {
               "p-2": !editable,
             })}

packages/editor/src/core/components/editors/editor-wrapper.tsx

@@ -41,6 +41,7 @@ export function EditorWrapper(props: Props) {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   } = props;
@@ -67,6 +68,7 @@ export function EditorWrapper(props: Props) {
     handleEditorReady,
     autofocus,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     value,
   });

packages/editor/src/core/extensions/extensions.ts

@@ -47,6 +47,7 @@ type TArguments = Pick<
   | "isTouchDevice"
   | "mentionHandler"
   | "placeholder"
+  | "showPlaceholderOnEmpty"
   | "tabIndex"
   | "extendedEditorProps"
 > & {
@@ -65,6 +66,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     isTouchDevice = false,
     mentionHandler,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     editable,
     extendedEditorProps,
@@ -108,7 +110,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     TableCell,
     TableRow,
     CustomMentionExtension(mentionHandler),
-    CustomPlaceholderExtension({ placeholder }),
+    CustomPlaceholderExtension({ placeholder, showPlaceholderOnEmpty }),
     CharacterCount,
     CustomColorExtension,
     CustomTextAlignExtension,

packages/editor/src/core/extensions/placeholder.ts

@@ -6,10 +6,11 @@ import type { IEditorProps } from "@/types";
 
 type TArgs = {
   placeholder: IEditorProps["placeholder"];
+  showPlaceholderOnEmpty: IEditorProps["showPlaceholderOnEmpty"];
 };
 
 export const CustomPlaceholderExtension = (args: TArgs) => {
-  const { placeholder } = args;
+  const { placeholder, showPlaceholderOnEmpty = false } = args;
 
   return Placeholder.configure({
     placeholder: ({ editor, node }) => {
@@ -29,6 +30,13 @@ export const CustomPlaceholderExtension = (args: TArgs) => {
 
       if (shouldHidePlaceholder) return "";
 
+      if (showPlaceholderOnEmpty) {
+        const isDocumentEmpty = editor.state.doc.textContent.length === 0;
+        if (!isDocumentEmpty) {
+          return "";
+        }
+      }
+
       if (placeholder) {
         if (typeof placeholder === "string") return placeholder;
         else return placeholder(editor.isFocused, editor.getHTML());

packages/editor/src/core/hooks/use-collaborative-editor.ts

@@ -33,6 +33,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     mentionHandler,
     onEditorFocus,
     placeholder,
+    showPlaceholderOnEmpty,
     realtimeConfig,
     serverHandler,
     tabIndex,
@@ -119,6 +120,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorHookProps) =>
     onEditorFocus,
     onTransaction,
     placeholder,
+    showPlaceholderOnEmpty,
     provider,
     tabIndex,
   });

packages/editor/src/core/hooks/use-editor.ts

@@ -40,6 +40,7 @@ export const useEditor = (props: TEditorHookProps) => {
     onEditorFocus,
     onTransaction,
     placeholder,
+    showPlaceholderOnEmpty,
     tabIndex,
     provider,
     value,
@@ -70,6 +71,7 @@ export const useEditor = (props: TEditorHookProps) => {
           isTouchDevice,
           mentionHandler,
           placeholder,
+          showPlaceholderOnEmpty,
           tabIndex,
           provider,
         }),

packages/editor/src/core/types/editor.ts

@@ -164,6 +164,7 @@ export type IEditorProps = {
   onEnterKeyPress?: (e?: any) => void;
   onTransaction?: () => void;
   placeholder?: string | ((isFocused: boolean, value: string) => string);
+  showPlaceholderOnEmpty?: boolean;
   tabIndex?: number;
   value?: string | null;
   extendedEditorProps: IEditorPropsExtended;

packages/editor/src/core/types/hook.ts

@@ -29,6 +29,7 @@ export type TEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
     | "value"
   > & {
@@ -50,6 +51,7 @@ export type TCollaborativeEditorHookProps = TCoreHookProps &
     | "onChange"
     | "onTransaction"
     | "placeholder"
+    | "showPlaceholderOnEmpty"
     | "tabIndex"
   > &
   Pick<