upgrade tiptap, change placeholder, show floating menu 2nd line on cr…

…eate editor
Prototypr · Jun 6, 2024 · bc394a4 · bc394a4
1 parent 02cc2e4
commit bc394a4
Show file tree

Hide file tree

Showing 8 changed files with 858 additions and 796 deletions.
diff --git a/components/Editor/Editor.js b/components/Editor/Editor.js
@@ -54,7 +54,7 @@ import EditorNavButtons from "./EditorNavButtons";
 // });
 
 const Editor = ({
-  wrapperClass=false,
+  wrapperClass = false,
   postType = "article",
   canEdit = false,
   initialContent = null,
@@ -123,21 +123,22 @@ const Editor = ({
       //   allowBase64: true,
       // }),
       Placeholder.configure({
+        showOnlyCurrent: false,
         includeChildren: true,
         placeholder: ({ node }) => {
           if (node.type.name === "heading") {
-            return "What's the title?";
+            return "Title";
           }
           if (node.type.name === "figcaption") {
-            return "What's the title?";
+            return "Enter a caption";
           }
           if (node.type.name === "figure") {
-            return "What's the title?";
+            return "Enter a caption";
           }
           if (node.type.name === "tweet") {
             return "Paste a tweet link and press enter";
           }
-          return "Tell a story...";
+          return "Tell your story...";
         },
       }),
     ],
@@ -152,6 +153,14 @@ const Editor = ({
         .setMeta("addToHistory", false)
         .run();
 
+      //check if editor.state.doc.textContent is white space or empty
+      if (editor.state.doc.textContent.trim() === "") {
+        editor.commands.clearContent()
+        setTimeout(()=>{
+          editor.chain().focus().setTextSelection(0).enter().run()
+        },100)
+      }
+
       //add the twitter widget script
       addTwitterScript();
     },
@@ -202,17 +211,17 @@ const Editor = ({
 
   return (
     <>
-      <div className={`w-full relative ${postType=='article'?'my-4':''}`}>
+      <div className={`w-full relative ${postType == "article" ? "my-4" : ""}`}>
         {/* NAVIGATION, WITH BUTTONS EMBEDDED AS A PROP */}
-        {(user?.isAdmin && postType=='article')?
+        {user?.isAdmin && postType == "article" ? (
           <div className="mt-16">
             <div className="fixed bottom-3 z-20 w-full">
               <div className="relative bg-gray-100/80 w-[500px] shadow-sm border border-gray-300/20 mx-auto rounded-xl p-3 text-sm backdrop-blur text-gray-800 flex flex-row justify-center items-center">
                 You're editing as admin.
               </div>
             </div>
           </div>
-        :null}
+        ) : null}
 
         {/* undoredo buttons render in a portal on the navbar */}
         {showNavButtons !== false ? (
@@ -239,7 +248,15 @@ const Editor = ({
         ) : null}
 
         {/* NAVIGATION END */}
-        <div className={wrapperClass?wrapperClass:postType=="article"?"my-4 pt-0 mt-[100px] max-w-[44rem] mx-auto relative pb-10 blog-content":''}>
+        <div
+          className={
+            wrapperClass
+              ? wrapperClass
+              : postType == "article"
+                ? "my-4 pt-0 mt-[100px] max-w-[44rem] mx-auto relative pb-10 blog-content"
+                : ""
+          }
+        >
           {editor && <MenuFloating editor={editor} />}
           <TextMenu editor={editor} />
           {/* <LinkMenu editor={editor} /> */}

diff --git a/components/Editor/Menus/FloatingMenu.jsx b/components/Editor/Menus/FloatingMenu.jsx
@@ -332,9 +332,6 @@ const MenuFloating = ({ editor, isSelecting }) => {
   return (
     <FloatingMenu
       shouldShow={({ editor, view, state, oldState }) => {
-        // if(state?.selection?.$anchor?.parent?.type?.name=='paragraph' && state?.selection?.$anchor?.parent?.textContent==''
-        // // ||state?.selection?.$anchor?.nodeBefore?.type?.name=='horizontalRule'
-        // ){
         if (
           state?.selection?.$anchor?.parent?.type?.name == "paragraph" &&
           state?.selection?.$anchor?.parent?.textContent == "" &&
@@ -343,6 +340,10 @@ const MenuFloating = ({ editor, isSelecting }) => {
         ) {
           return true;
         }
+
+        if(editor.state.doc.textContent.trim() === "" && state?.selection?.$anchor?.pos==2){
+          return true;
+        }
       }}
       editor={editor}
       tippyOptions={{ duration: 100 }}