[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/core/src/hooks/use-editor.tsx

@@ -34,6 +34,7 @@ interface CustomEditorProps {
     suggestions?: () => Promise<IMentionSuggestion[]>;
   };
   handleEditorReady?: (value: boolean) => void;
+  placeholder?: string | ((isFocused: boolean) => string);
 }
 
 export const useEditor = ({
@@ -51,6 +52,7 @@ export const useEditor = ({
   restoreFile,
   handleEditorReady,
   mentionHandler,
+  placeholder,
 }: CustomEditorProps) => {
   const editor = useCustomEditor({
     editorProps: {
@@ -58,15 +60,18 @@ export const useEditor = ({
       ...editorProps,
     },
     extensions: [
-      ...CoreEditorExtensions(
-        {
+      ...CoreEditorExtensions({
+        mentionConfig: {
           mentionSuggestions: mentionHandler.suggestions ?? (() => Promise.resolve<IMentionSuggestion[]>([])),
           mentionHighlights: mentionHandler.highlights ?? [],
         },
-        deleteFile,
-        restoreFile,
-        cancelUploadImage
-      ),
+        fileConfig: {
+          deleteFile,
+          restoreFile,
+          cancelUploadImage,
+        },
+        placeholder,
+      }),
       ...extensions,
     ],
     content: typeof initialValue === "string" && initialValue.trim() !== "" ? initialValue : "<p></p>",

packages/editor/core/src/ui/extensions/index.tsx

@@ -2,6 +2,7 @@ import TaskItem from "@tiptap/extension-task-item";
 import TaskList from "@tiptap/extension-task-list";
 import TextStyle from "@tiptap/extension-text-style";
 import TiptapUnderline from "@tiptap/extension-underline";
+import Placeholder from "@tiptap/extension-placeholder";
 import StarterKit from "@tiptap/starter-kit";
 import { Markdown } from "tiptap-markdown";
 
@@ -29,15 +30,24 @@ import { CustomTypographyExtension } from "src/ui/extensions/typography";
 import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
 import { CustomCodeMarkPlugin } from "./custom-code-inline/inline-code-plugin";
 
-export const CoreEditorExtensions = (
+type TArguments = {
   mentionConfig: {
     mentionSuggestions?: () => Promise<IMentionSuggestion[]>;
     mentionHighlights?: () => Promise<IMentionHighlight[]>;
-  },
-  deleteFile: DeleteImage,
-  restoreFile: RestoreImage,
-  cancelUploadImage?: () => any
-) => [
+  };
+  fileConfig: {
+    deleteFile: DeleteImage;
+    restoreFile: RestoreImage;
+    cancelUploadImage?: () => any;
+  };
+  placeholder?: string | ((isFocused: boolean) => string);
+};
+
+export const CoreEditorExtensions = ({
+  mentionConfig,
+  fileConfig: { deleteFile, restoreFile, cancelUploadImage },
+  placeholder,
+}: TArguments) => [
   StarterKit.configure({
     bulletList: {
       HTMLAttributes: {
@@ -124,4 +134,21 @@ export const CoreEditorExtensions = (
     mentionHighlights: mentionConfig.mentionHighlights,
     readonly: false,
   }),
+  Placeholder.configure({
+    placeholder: ({ editor, node }) => {
+      if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
+
+      const shouldHidePlaceholder =
+        editor.isActive("table") || editor.isActive("codeBlock") || editor.isActive("image");
+      if (shouldHidePlaceholder) return "";
+
+      if (placeholder) {
+        if (typeof placeholder === "string") return placeholder;
+        else return placeholder(editor.isFocused);
+      }
+
+      return "Press '/' for commands...";
+    },
+    includeChildren: true,
+  }),
 ];