cursor position, dont focus radix popover on close (takes focus form …

…editor)
Prototypr · Jun 21, 2024 · 86d19a4 · 86d19a4
1 parent 878028d
commit 86d19a4
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 17 deletions.
diff --git a/components/Editor/CustomExtensions/Tweet/Tweet.js b/components/Editor/CustomExtensions/Tweet/Tweet.js
@@ -3,7 +3,7 @@ import axios from 'axios'
 import {NodeSelection} from 'prosemirror-state'
 
 export const TWITTER_REG_G =
-  /^https?:\/\/twitter\.com\/(?:#!\/)?(\w+)\/status(es)?\/(.+)?$/g;
+  /^https?:\/\/(?:twitter|x)\.com\/(?:#!\/)?(\w+)\/status(es)?\/(.+)?$/g;
 
 const Twitter = Node.create({
   name: 'twitter',

diff --git a/components/Editor/Editor.js b/components/Editor/Editor.js
@@ -126,7 +126,7 @@ const Editor = ({
       Placeholder.configure({
         showOnlyCurrent: false,
         includeChildren: false,
-        placeholder: ({ node }) => {
+        placeholder: ({ editor, node }) => {
           if (node.type.name === "heading") {
             return "Title";
           }
@@ -139,7 +139,15 @@ const Editor = ({
           if (node.type.name === "tweet") {
             return "Paste a tweet link and press enter";
           }
-          return "Tell your story...";
+          if (node.type.name == "paragraph") {
+            //check if editor has 3 or more nodes
+            if (
+              editor.state.doc.textContent.trim() === "" &&
+              editor.state.doc.childCount <= 2
+            ) {
+              return "Tell your story...";
+            }
+          }
         },
       }),
     ],

diff --git a/components/Editor/Menus/FloatingMenu.jsx b/components/Editor/Menus/FloatingMenu.jsx
@@ -43,7 +43,7 @@ const StyledContent = styled(PopoverPrimitive.Content, {
   flexDirection: "row",
   padding: 5,
   paddingLeft: 20,
-  background: "#fff",
+  background: "transparent",
   width: 1000,
   outline: "none",
   "@media (prefers-reduced-motion: no-preference)": {
@@ -190,7 +190,7 @@ const uploadMedia = (event, editor, user, setLoading) => {
     }
   }
   //if video
-  else if(files && files[0] && isVideo(files[0])){
+  else if (files && files[0] && isVideo(files[0])) {
     if (files && files[0]) {
       var reader = new FileReader();
 
@@ -245,7 +245,6 @@ const uploadMedia = (event, editor, user, setLoading) => {
       };
       reader.readAsDataURL(files[0]);
     }
-
   }
 };
 
@@ -332,6 +331,11 @@ const MenuFloating = ({ editor, isSelecting }) => {
   return (
     <FloatingMenu
       shouldShow={({ editor, view, state, oldState }) => {
+        if (state?.selection?.$anchor?.parent?.type?.name == "doc") {
+          setIsOpen(false)
+          return false;
+        }
+
         if (
           state?.selection?.$anchor?.parent?.type?.name == "paragraph" &&
           state?.selection?.$anchor?.parent?.textContent == "" &&
@@ -341,7 +345,10 @@ const MenuFloating = ({ editor, isSelecting }) => {
           return true;
         }
 
-        if(editor.state.doc.textContent.trim() === "" && state?.selection?.$anchor?.pos==2){
+        if (
+          editor.state.doc.textContent.trim() === "" &&
+          state?.selection?.$anchor?.pos == 2
+        ) {
           return true;
         }
       }}
@@ -370,6 +377,9 @@ const MenuFloating = ({ editor, isSelecting }) => {
             </IconButton>
           </PopoverTrigger>
           <PopoverContent
+            onCloseAutoFocus={e => {
+              e.preventDefault();
+            }}
             sticky="always"
             onPointerDownOutside={e => {
               if (
@@ -423,13 +433,30 @@ const MenuFloating = ({ editor, isSelecting }) => {
               <DropdownMenuItem>
                 <IconButton
                   onClick={() => {
+                    setIsOpen(false);
+
+                    let editorDiv = document.querySelector(
+                      ".tiptap.ProseMirror"
+                    );
+
                     const url = prompt("Enter YouTube URL");
                     if (url) {
-                      editor.commands.setYoutubeVideo({
-                        src: url,
-                        width: 600,
-                        height: 400,
-                      });
+                      //get current position
+                      let pos = editor.state.selection.from;
+
+                      editor
+                        .chain()
+                        .setYoutubeVideo({
+                          src: url,
+                          width: 600,
+                          height: 400,
+                        })
+                        .setNodeSelection(pos - 1)
+                        .insertContentAt(pos, "<p></p>")
+                        .setTextSelection(pos+1)
+                        .focus()
+                        .enter()
+                        .run();
                     }
                   }}
                   className="hover:cursor-pointer menu-item"

diff --git a/components/EditorNav.js b/components/EditorNav.js
@@ -70,9 +70,9 @@ export default function EditorNav({ activeNav, postStatus, tool, post }) {
   }, [postStatus]);
 
   return (
-    <div id="main-nav" as="nav" className={`p-1 z-40 fixed w-full top-0`}>
+    <div id="main-nav" as="nav" className={`z-40 fixed w-full bg-white/80 backdrop-blur-xs py-3 top-0`}>
       <>
-        <div className="mx-auto max-w-[1320px] text-sm px-2  bg-gray-50/80 border border-1 border-gray-200/70 rounded-xl">
+        <div className="mx-auto max-w-[1000px] text-sm px-2 rounded-xl">
           <div
             className={` transition transition-all duration-700 ease-in-out relative flex items-center justify-between h-10`}
           >

diff --git a/components/authorBio.js b/components/authorBio.js
@@ -118,7 +118,7 @@ export default function AuthorBio({ author, slug, title }) {
                 {twitter && (
                   <a
                     className="link block mr-2"
-                    href={`https://twitter.com/${twitter}`}
+                    href={`https://x.com/${twitter}`}
                     target="_blank"
                   >
                     <img
@@ -186,6 +186,7 @@ function getTwitterHandle(string) {
   var result = string.replace(/(^\w+:|^)\/\//, "");
   result = result.replace(/\//g, "");
   result = result.replace("twitter.com", "");
+  result = result.replace("x.com", "");
   result = result.replace("www.", "");
   result = result.replace("@", "");
 

diff --git a/components/people/ProfileCard.js b/components/people/ProfileCard.js
@@ -123,7 +123,7 @@ export default function ProfileCard({
             {twitter ? (
               <a
                 className="link block mx-1"
-                href={`https://twitter.com/${twitter}`}
+                href={`https://x.com/${twitter}`}
                 target="_blank"
               >
                 <TwitterLogo color="rgba(0,0,0,0.8)" size={20} />

diff --git a/components/people/ProfilePageLayout.js b/components/people/ProfilePageLayout.js
@@ -292,7 +292,7 @@ const ProfilePageLayout = ({
                       {(twitter || (unapproved && user?.profile?.twitter)) && (
                         <a
                           className="link block"
-                          href={`https://twitter.com/${twitter || user?.profile?.twitter}`}
+                          href={`https://x.com/${twitter || user?.profile?.twitter}`}
                           target="_blank"
                         >
                           <TwitterLogo color="rgba(0,0,0,0.8)" size={24} />

diff --git a/lib/profile-page/profile-page.js b/lib/profile-page/profile-page.js
@@ -76,6 +76,7 @@ export const getTwitterHandle = (string) => {
   var result = string.replace(/(^\w+:|^)\/\//, "");
   result = result.replace(/\//g, "");
   result = result.replace("twitter.com", "");
+  result = result.replace("x.com", "");
   result = result.replace("www.", "");
   result = result.replace("@", "");