Refactor ImageEditor component #89

libs/scooter-bubble-menu/src/lib/ImageEditorModal.jsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Modal } from "@factly/scooter-ui";
 
-import { ImageEditor } from "@factly/scooter-image";
+import { ImageEditor } from "@factly/scooter-ui";
 
 export const ImageEditorModal = ({ editor, isOpen, onClose }) => {
   const node = editor && editor.view.state.selection.node;

libs/scooter-fixed-menu/src/lib/index.jsx

@@ -22,7 +22,7 @@ import LinkOption from "./LinkOption";
 import TextColorOption from "./TextColorOption";
 
 import { helpers } from "@factly/scooter-bubble-menu";
-import { ImageEditor } from "@factly/scooter-image";
+import { ImageEditor } from "@factly/scooter-ui";
 // import Mentions from '../Mention';
 // import Variables from '../Variable';
 

libs/scooter-image/src/index.js

@@ -3,7 +3,6 @@ export * from "./lib/ScooterImage";
 export * from "./lib/ExtensionConfig";
 export * from "./lib/LocalUploader";
 export * from "./lib/Gallery";
-export * from "./lib/ImageEditor";
 export * from "./lib/ScooterImage";
 export * from "./lib/URLForm";
 export * from "./lib/UnsplashImagePicker";

libs/scooter-image/src/lib/Uploader.jsx

@@ -2,10 +2,10 @@ import React, { useState } from "react";
 
 import { Modal } from "@factly/scooter-ui";
 import { Tab } from "@factly/scooter-ui";
+import { ImageEditor } from "@factly/scooter-ui";
 import { useTabBar } from "@factly/scooter-shared-utils";
 
 import { IMAGE_UPLOAD_OPTIONS } from "./constants";
-import ImageEditor from "./ImageEditor";
 import LocalUploader from "./LocalUploader";
 import UnsplashImagePicker from "./UnsplashImagePicker";
 import URLForm from "./URLForm";

libs/scooter-image/src/scooter-image.scss

@@ -271,26 +271,6 @@
     flex-grow: 0;
     margin-bottom: 16px;
   }
-  .scooter-editor-image-editor {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.25rem;
-  }
-  .scooter-editor-image-editor figure {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    min-height: 208px;
-    max-height: 400px;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-  }
-  .scooter-editor-image-editor figure:focus {
-    display: hidden;
-  }
   .image-float-left {
     float: left;
     margin-left: 0;
@@ -329,25 +309,6 @@
     overflow: hidden;
     object-fit: cover;
   }
-
-  .scooter-editor-image-editor figure img,
-  .scooter-editor-image-editor img {
-    max-width: 100%;
-    height: 100%;
-    width: 100%;
-    -o-object-fit: contain;
-    object-fit: contain;
-  }
-  .scooter-editor-image-editor .sc-input__wrapper {
-    width: 100%;
-  }
-  .scooter-editor-image-editor__footer {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-  }
   .scooter-editor-image-gallery__content {
     display: flex;
     flex-direction: column;

libs/scooter-ui/src/index.js

@@ -14,3 +14,4 @@ export * from "./lib/Portal";
 export * from "./lib/Tab";
 export * from "./lib/ToolTip";
 export * from "./lib/Icons";
+export * from "./lib/shared-ui/ImageEditor";

libs/scooter-image/src/lib/ImageEditor.jsx → libs/scooter-ui/src/lib/shared-ui/ImageEditor.jsx

@@ -20,7 +20,7 @@ export const ImageEditor = ({ url, editor, onClose, alt, caption }) => {
   };
 
   return (
-    <div className="scooter-editor-image-editor" onKeyDown={handleKeyDown}>
+    <div className="sc-scooter-editor-image-editor" onKeyDown={handleKeyDown}>
       <img src={url} />
       <Input
         value={captionText}
@@ -34,7 +34,7 @@ export const ImageEditor = ({ url, editor, onClose, alt, caption }) => {
         placeholder="Brand Image"
         label="Alt Text"
       />
-      <div className="scooter-editor-image-editor__footer">
+      <div className="sc-scooter-editor-image-editor__footer">
         <Button label="Save Changes" onClick={handleSubmit} />
         <Button label="Cancel" variant="text" onClick={onClose} />
       </div>

libs/scooter-ui/src/scooter-ui.scss

@@ -570,4 +570,43 @@
     -webkit-animation: spin 600ms linear infinite;
     animation: spin 600ms linear infinite;
     margin: 0px auto;
+  }
+  // ImageEditor styles
+  .sc-scooter-editor-image-editor {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+  }
+  .sc-scooter-editor-image-editor figure {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 208px;
+    max-height: 400px;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+  }
+  .sc-scooter-editor-image-editor figure:focus {
+    display: hidden;
+  }
+  .sc-scooter-editor-image-editor figure img,
+  .sc-scooter-editor-image-editor img {
+    max-width: 100%;
+    height: 100%;
+    width: 100%;
+    -o-object-fit: contain;
+    object-fit: contain;
+  }
+  .sc-scooter-editor-image-editor .sc-input__wrapper {
+    width: 100%;
+  }
+  .sc-scooter-editor-image-editor__footer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.5rem;
   }