Added missing data-cy props and fixed eslint issues (#906)

bigbinary · Oct 9, 2023 · 6cb422b · 6cb422b
1 parent f64674b
commit 6cb422b
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 51 deletions.
diff --git a/dist/editor-content.min.css b/dist/editor-content.min.css
diff --git a/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx b/src/components/Editor/CustomExtensions/Image/ImageComponent.jsx
@@ -28,44 +28,42 @@ const ImageComponent = ({
     ? figureRef.current.querySelector("figcaption>div")?.textContent
     : alt;
 
+  const handleResizeStop = (_event, _direction, ref) => {
+    height = ref.offsetHeight;
+    width = ref.offsetWidth;
+    view.dispatch(
+      view.state.tr.setNodeMarkup(
+        getPos(),
+        undefined,
+        mergeRight(node.attrs, {
+          figheight: height,
+          figwidth: width,
+          height,
+          width,
+        })
+      )
+    );
+    editor.commands.focus();
+  };
+
   return (
     <NodeViewWrapper
       className={`neeto-editor__image-wrapper neeto-editor__image--${align}`}
+      data-cy="neeto-editor-image-wrapper"
     >
       <figure ref={figureRef}>
-        <Menu
-          align={align}
-          deleteNode={deleteNode}
-          editor={editor}
-          updateAttributes={updateAttributes}
-        />
+        <Menu {...{ align, deleteNode, editor, updateAttributes }} />
         {src ? (
           <Resizable
             lockAspectRatio
             className="neeto-editor__image"
             size={{ height, width }}
+            onResizeStop={handleResizeStop}
             onResize={(_event, _direction, ref) =>
               setCaptionWidth(ref.offsetWidth)
             }
-            onResizeStop={(_event, _direction, ref) => {
-              height = ref.offsetHeight;
-              width = ref.offsetWidth;
-              view.dispatch(
-                view.state.tr.setNodeMarkup(
-                  getPos(),
-                  undefined,
-                  mergeRight(node.attrs, {
-                    figheight: height,
-                    figwidth: width,
-                    height,
-                    width,
-                  })
-                )
-              );
-              editor.commands.focus();
-            }}
           >
-            <img {...node.attrs} alt={caption} src={src} />
+            <img {...node.attrs} alt={caption} {...{ src }} />
           </Resizable>
         ) : (
           <div className="neeto-editor__image-placeholder">

diff --git a/src/components/Editor/MediaUploader/LocalUploader.jsx b/src/components/Editor/MediaUploader/LocalUploader.jsx
@@ -34,9 +34,7 @@ const LocalUploader = ({
     ? DEFAULT_IMAGE_UPPY_CONFIG
     : DEFAULT_VIDEO_UPPY_CONFIG;
 
-  const { uppy, isUploading } = useUppyUploader({
-    uppyConfig,
-  });
+  const { uppy, isUploading } = useUppyUploader({ uppyConfig });
 
   setIsUploading(isUploading);
 
@@ -109,20 +107,18 @@ const LocalUploader = ({
   }, []);
 
   return !isEmpty(pendingUploads) || isUploading ? (
-    <Progress
-      pendingUploads={pendingUploads}
-      setPendingUploads={setPendingUploads}
-      uppy={uppy}
-    />
+    <Progress {...{ pendingUploads, setPendingUploads, uppy }} />
   ) : (
     <div
       className="ne-media-uploader__dnd"
+      data-cy="neeto-editor-media-uploader-dnd"
       ref={dropTargetRef}
       onClick={() => fileInputRef.current?.click()}
     >
       <input
         multiple
         className="ne-media-uploader__dnd-input"
+        data-cy="neeto-editor-media-uploader-input"
         ref={fileInputRef}
         type="file"
         accept={

diff --git a/src/components/Editor/Menu/Fixed/index.jsx b/src/components/Editor/Menu/Fixed/index.jsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 
-import DynamicVariables from "@bigbinary/neeto-molecules/DynamicVariables";
 import classNames from "classnames";
 import { isNotEmpty } from "neetocommons/pure";
 import { Left, Right } from "neetoicons";
+import DynamicVariables from "neetomolecules/DynamicVariables";
 import { Button } from "neetoui";
 import { isEmpty, not } from "ramda";
 import { useTranslation } from "react-i18next";
@@ -132,18 +132,22 @@ const Fixed = ({
         [className]: className,
       })}
     >
-      <div className="neeto-editor-fixed-menu__wrapper" ref={menuRef}>
+      <div
+        className="neeto-editor-fixed-menu__wrapper"
+        data-cy="neeto-editor-fixed-menu-wrapper"
+        ref={menuRef}
+      >
         {isFontSizeActive && (
           <FontSizeOption
-            editor={editor}
+            {...{ editor }}
             tooltipContent={tooltips.fontSize || t("menu.fontSize")}
           />
         )}
         {isFontSizeActive && <div className="vertical-divider" />}
         <div className="neeto-editor-fixed-menu__wrapper__button-group">
           {fontStyleOptions.map(renderOptionButton)}
           <TableActions
-            editor={editor}
+            {...{ editor }}
             tooltipContent={tooltips.table || t("menu.table")}
           />
         </div>
@@ -173,52 +177,46 @@ const Fixed = ({
             <div className="neeto-editor-fixed-menu__wrapper__button-group">
               {isLinkActive && (
                 <LinkOption
-                  editor={editor}
-                  menuRef={menuRef}
+                  {...{ editor, menuRef }}
                   tooltipContent={tooltips.link || t("menu.link")}
                 />
               )}
               {isTableActive && (
                 <TableOption
-                  editor={editor}
+                  {...{ editor }}
                   tooltipContent={tooltips.table || t("menu.table")}
                 />
               )}
               {miscOptions.map(renderOptionButton)}
               {isTextColorOptionActive && (
                 <TextColorOption
-                  editor={editor}
+                  {...{ editor }}
                   tooltipContent={tooltips.textColor || t("menu.textColor")}
                 />
               )}
               {isEmojiActive && (
                 <EmojiOption
-                  editor={editor}
+                  {...{ editor }}
                   isActive={isEmojiPickerActive}
                   setActive={setIsEmojiPickerActive}
                   tooltipContent={tooltips.emoji || t("menu.emoji")}
                 />
               )}
               {isMediaUploaderActive && (
                 <MediaUploader
-                  editor={editor}
-                  mediaUploader={mediaUploader}
-                  unsplashApiKey={unsplashApiKey}
+                  {...{ editor, mediaUploader, unsplashApiKey }}
                   onClose={() =>
                     setMediaUploader({ image: false, video: false })
                   }
                 />
               )}
               {isEmbedOptionActive && (
                 <EmbedOption
-                  editor={editor}
-                  isEmbedModalOpen={isEmbedModalOpen}
-                  setIsEmbedModalOpen={setIsEmbedModalOpen}
+                  {...{ editor, isEmbedModalOpen, setIsEmbedModalOpen }}
                 />
               )}
               <Mentions
-                editor={editor}
-                mentions={mentions}
+                {...{ editor, mentions }}
                 tooltipContent={tooltips.mention || t("menu.mention")}
               />
               {addonCommandOptions.map(renderOptionButton)}
@@ -248,7 +246,7 @@ const Fixed = ({
       {!isEmpty(variables) && (
         <div className="neeto-editor-fixed-menu__variables">
           <DynamicVariables
-            variables={variables}
+            {...{ variables }}
             dropdownProps={{
               buttonSize: "small",
               buttonProps: {