fix for video, and remove alt text button for video for now

Prototypr · Jun 23, 2024 · af427cd · af427cd
1 parent 90e9f7f
commit af427cd
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 99 deletions.
diff --git a/components/Editor/Menus/Common/WidthRange.js b/components/Editor/Menus/Common/WidthRange.js
@@ -19,33 +19,8 @@ const WidthSlider = ({ editor, showing, figureType }) => {
   }
 
   const updateWidth = value => {
-    if (figureType === "video") {
-      //the video rerenders on change quite badly,causing the tooltip to disappear
-      //so only update video width on mouseup
-
-      editor.commands.updateAttributes("figure", { width: value + "%" });
-    } else {
-      //if not video, update width as the slider moves
-
-      // let height = null
-      // //get child of figure
-      // const image_node = editor.state.selection?.$anchor?.nodeAfter?.content?.content?.length?editor.state.selection?.$anchor?.nodeAfter?.content?.content[0]:null
-      // console.log(image_node)
-      // if(image_node?.type?.name=='image'){
-      //   //get current selection position
-      //   const parentPos = editor.state.selection.$anchor.pos +1
-      //   var domNode  = editor.view.nodeDOM(parentPos)
-      //   console.log(domNode)
-      //   //get intrinsic height of image
-      //   let styles = window.getComputedStyle(domNode)
-      //   let minHeight = styles.height
-      //   //depending on the old percentage (value), the new percentage, and the current compouted height, calculate the new height in %
-      //   height = minHeight
-      // }
-
-      setValue(value);
-      editor.commands.updateAttributes("figure", { width: value + "%" });
-    }
+    setValue(value);
+    editor.commands.updateAttributes("figure", { width: value + "%" });
   };
 
   return (
@@ -61,21 +36,14 @@ const WidthSlider = ({ editor, showing, figureType }) => {
             value={value}
             // onInput={(e) => setWidth(e.target.value)}
             onChange={e => {
-              if (figureType === "video") {
-                //the video rerenders on change quite badly,causing the tooltip to disappear
-                //so only update video width on mouseup
-                setValue(e.target.value);
-              } else {
-                //if not video, update width as the slider moves
-                updateWidth(e.target.value);
-              }
+              updateWidth(e.target.value);
             }}
             // onChange={(e) => setValue(e.target.value)}
-            onMouseUp={e => {
-                if (figureType === "video") {
-                    updateWidth(e.target.value);
-                }
-            }}
+            // onMouseUp={e => {
+            //     if (figureType === "video") {
+            //         updateWidth(e.target.value);
+            //     }
+            // }}
           />
           <span class="text-xs font-semibold text-gray-400 select-none">
             {value}%

diff --git a/components/Editor/Menus/ImageMenu.jsx b/components/Editor/Menus/ImageMenu.jsx
@@ -73,14 +73,14 @@ const ImageMenu = ({ editor, isSelecting }) => {
           const selection = editor.state.selection;
           const isTextSelection = selection instanceof TextSelection;
 
-          // if (!editor.isActive("figure", { figureType: "image" })) {
-          //   return false;
-          // }
+          if (!editor.isActive("figure", { figureType: "image" })) {
+            return false;
+          }
 
-          //  if (isTextSelection) {
-          //   setShowing(false);
-          //   return false;
-          // }
+           if (isTextSelection) {
+            setShowing(false);
+            return false;
+          }
 
           //update image src
           const figure_node = selection?.$anchor?.nodeAfter

diff --git a/components/Editor/Menus/MenuButtons/VideoPopoverButton/VideoPopoverButton.js b/components/Editor/Menus/MenuButtons/VideoPopoverButton/VideoPopoverButton.js
@@ -204,55 +204,46 @@ const VideoModalButton = ({ editor, showing }) => {
   };
 
   return (
-    <Dialog open={modalOpen} onOpenChange={onOpenChange}>
-      <div className="flex">
-        <DialogTrigger asChild>
-          <IconButton
-            onClick={() => setModal("alt")}
-            className={"text-sm hover:bg-gray-800 hover:text-white"}
-            aria-label="Update link"
-          >
-            ALT
-          </IconButton>
-        </DialogTrigger>
-        {/* <LinkInput isFigure={true} marginLeft={-100} showRemove={true} editor={editor} /> */}
-        <WidthRange showing={showing} editor={editor} figureType={'video'} />
-      </div>
-      <DialogContent>
-        <DialogTitle>{modalOption == "alt" && "Alternative Text"}</DialogTitle>
-        <DialogDescription>
-          {modalOption == "alt" &&
-            "Write a brief description of this image for readers with visual impairments"}
-        </DialogDescription>
-        <div>
-          <img
-            style={{ maxWidth: 300, maxHeight: 200, objectFit: "cover" }}
-            className="mx-auto mt-3 mb-10"
-            src={imgSrc}
-          />
-        </div>
-        <div>
-          hi
-          {/* <ImageAltField figureNode={figureNode} closePopup={toggleModal} editor={editor}/> */}
-        </div>
-        {/* <div className="flex flex-row justify-start gap-2">
-        <DialogClose asChild>
-          <Button onClick={onClick} variant="red">
-            Delete
-          </Button>
-        </DialogClose>
-
-        <DialogClose asChild>
-          <Button variant="gray">Cancel</Button>
-        </DialogClose>
-      </div> */}
-        <DialogClose asChild>
-          <CloseButton aria-label="Close">
-            <Cross2Icon />
-          </CloseButton>
-        </DialogClose>
-      </DialogContent>
-    </Dialog>
+    <div className="h-[26px] flex flex-col justify-center">
+      <WidthRange showing={showing} editor={editor} figureType={"video"} />
+    </div>
+
+    // <Dialog open={modalOpen} onOpenChange={onOpenChange}>
+    //   <div className="flex">
+    //     <DialogTrigger asChild>
+    //       <IconButton
+    //         onClick={() => setModal("alt")}
+    //         className={"text-sm hover:bg-gray-800 hover:text-white"}
+    //         aria-label="Update link"
+    //       >
+    //         ALT
+    //       </IconButton>
+    //     </DialogTrigger>
+    //     <WidthRange showing={showing} editor={editor} figureType={'video'} />
+    //   </div>
+    //   <DialogContent>
+    //     <DialogTitle>{modalOption == "alt" && "Alternative Text"}</DialogTitle>
+    //     <DialogDescription>
+    //       {modalOption == "alt" &&
+    //         "Write a brief description of this image for readers with visual impairments"}
+    //     </DialogDescription>
+    //     <div>
+    //       <img
+    //         style={{ maxWidth: 300, maxHeight: 200, objectFit: "cover" }}
+    //         className="mx-auto mt-3 mb-10"
+    //         src={imgSrc}
+    //       />
+    //     </div>
+    //     <div>
+    //       hi
+    //     </div>
+    //     <DialogClose asChild>
+    //       <CloseButton aria-label="Close">
+    //         <Cross2Icon />
+    //       </CloseButton>
+    //     </DialogClose>
+    //   </DialogContent>
+    // </Dialog>
   );
 };
 

diff --git a/components/Editor/Menus/VideoMenu.js b/components/Editor/Menus/VideoMenu.js
@@ -51,7 +51,7 @@ const VideoMenu = ({ editor, isSelecting }) => {
         tippyOptions={{
         //   arrow: roundArrow,
           arrow: false,
-          placement: "top-start",
+          placement: "left-start",
           zIndex: "38",
           popperOptions: {
             modifiers: [{ name: "eventListeners", options: { scroll: false } },
@@ -127,8 +127,8 @@ const VideoMenu = ({ editor, isSelecting }) => {
       >
         {/* bold */}
         <div
-          className={`${isSelecting ? "" : "pointer-events-all"} p-2 duration-300 rounded-xl shadow-md bg-gray-900 flex text-gray-100`}
-        >
+          className={`${isSelecting ? "" : "pointer-events-all"} p-2 w-fit -mt-[52px] ml-[102%] duration-300 rounded-xl shadow-md bg-gray-900 flex text-gray-100`}
+          >
           <div
             className={`${isSelecting ? "pointer-events-none" : "pointer-events-all"} flex`}
           >