[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/rich-text-editor/src/ui/extensions/index.tsx

@@ -1,26 +1,13 @@
 import { UploadImage } from "@plane/editor-core";
 import { DragAndDrop, SlashCommand } from "@plane/editor-extensions";
-import Placeholder from "@tiptap/extension-placeholder";
 
-export const RichTextEditorExtensions = (
-  uploadFile: UploadImage,
-  dragDropEnabled?: boolean,
-  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void
-) => [
+type TArguments = {
+  uploadFile: UploadImage;
+  dragDropEnabled?: boolean;
+  setHideDragHandle?: (hideDragHandlerFromDragDrop: () => void) => void;
+};
+
+export const RichTextEditorExtensions = ({ uploadFile, dragDropEnabled, setHideDragHandle }: TArguments) => [
   SlashCommand(uploadFile),
   dragDropEnabled === true && 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,
-  }),
 ];

packages/editor/rich-text-editor/src/ui/index.tsx

@@ -35,6 +35,7 @@ export type IRichTextEditor = {
     highlights: () => Promise<IMentionHighlight[]>;
     suggestions: () => Promise<IMentionSuggestion[]>;
   };
+  placeholder?: string | ((isFocused: boolean) => string);
   tabIndex?: number;
 };
 
@@ -50,6 +51,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
     forwardedRef,
     // rerenderOnPropsChange,
     id = "",
+    placeholder,
     tabIndex,
     mentionHandler,
   } = props;
@@ -74,8 +76,13 @@ const RichTextEditor = (props: IRichTextEditor) => {
     value,
     forwardedRef,
     // rerenderOnPropsChange,
-    extensions: RichTextEditorExtensions(fileHandler.upload, dragDropEnabled, setHideDragHandleFunction),
+    extensions: RichTextEditorExtensions({
+      uploadFile: fileHandler.upload,
+      dragDropEnabled,
+      setHideDragHandle: setHideDragHandleFunction,
+    }),
     mentionHandler,
+    placeholder,
   });
 
   const editorContainerClassName = getEditorClassNames({