[WEB-735] chore: added a custom placeholder prop to all the editors (#4194)

* chore: added a custom placeholder prop to all the editors

* chore: inbox issue create modal placeholder

packages/editor/document-editor/src/ui/extensions/index.tsx

@@ -1,28 +1,15 @@
-import Placeholder from "@tiptap/extension-placeholder";
 import { IssueWidgetPlaceholder } from "src/ui/extensions/widgets/issue-embed-widget";
 
 import { SlashCommand, DragAndDrop } from "@plane/editor-extensions";
 import { UploadImage } from "@plane/editor-core";
 
-export const DocumentEditorExtensions = (
-  uploadFile: UploadImage,
-  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
-) => [
+type TArguments = {
+  uploadFile: UploadImage;
+  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+};
+
+export const DocumentEditorExtensions = ({ uploadFile, setHideDragHandle }: TArguments) => [
   SlashCommand(uploadFile),
   DragAndDrop(setHideDragHandle),
-  Placeholder.configure({
-    placeholder: ({ editor, node }) => {
-      if (node.type.name === "heading") {
-        return `Heading ${node.attrs.level}`;
-      }
-
-      if (editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image")) {
-        return "";
-      }
-
-      return "Press '/' for commands...";
-    },
-    includeChildren: true,
-  }),
   IssueWidgetPlaceholder(),
 ];

packages/editor/document-editor/src/ui/index.tsx

@@ -31,6 +31,7 @@ interface IDocumentEditor {
     suggestions: () => Promise<IMentionSuggestion[]>;
   };
   tabIndex?: number;
+  placeholder?: string | ((isFocused: boolean) => string);
 }
 
 const DocumentEditor = (props: IDocumentEditor) => {
@@ -45,6 +46,7 @@ const DocumentEditor = (props: IDocumentEditor) => {
     handleEditorReady,
     forwardedRef,
     tabIndex,
+    placeholder,
   } = props;
   // states
   const [hideDragHandleOnMouseLeave, setHideDragHandleOnMouseLeave] = useState<() => void>(() => {});
@@ -69,7 +71,11 @@ const DocumentEditor = (props: IDocumentEditor) => {
     handleEditorReady,
     forwardedRef,
     mentionHandler,
-    extensions: DocumentEditorExtensions(fileHandler.upload, setHideDragHandleFunction),
+    extensions: DocumentEditorExtensions({
+      uploadFile: fileHandler.upload,
+      setHideDragHandle: setHideDragHandleFunction,
+    }),
+    placeholder,
   });
 
   const editorContainerClassNames = getEditorClassNames({