From 382aead748fbc633461cde037b9b549374f0c69a Mon Sep 17 00:00:00 2001 From: surajmn1 Date: Wed, 30 Aug 2023 17:31:52 +0530 Subject: [PATCH] Refactor ImageEditor component #89 --- .../src/lib/ImageEditorModal.jsx | 2 +- libs/scooter-fixed-menu/src/lib/index.jsx | 2 +- libs/scooter-image/src/index.js | 1 - libs/scooter-image/src/lib/Uploader.jsx | 2 +- libs/scooter-image/src/scooter-image.scss | 39 ------------------- libs/scooter-ui/src/index.js | 1 + .../src/lib/shared-ui}/ImageEditor.jsx | 4 +- libs/scooter-ui/src/scooter-ui.scss | 39 +++++++++++++++++++ 8 files changed, 45 insertions(+), 45 deletions(-) rename libs/{scooter-image/src/lib => scooter-ui/src/lib/shared-ui}/ImageEditor.jsx (88%) diff --git a/libs/scooter-bubble-menu/src/lib/ImageEditorModal.jsx b/libs/scooter-bubble-menu/src/lib/ImageEditorModal.jsx index 6a49ac1..bb099eb 100644 --- a/libs/scooter-bubble-menu/src/lib/ImageEditorModal.jsx +++ b/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; diff --git a/libs/scooter-fixed-menu/src/lib/index.jsx b/libs/scooter-fixed-menu/src/lib/index.jsx index 791186f..0b8beb5 100644 --- a/libs/scooter-fixed-menu/src/lib/index.jsx +++ b/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'; diff --git a/libs/scooter-image/src/index.js b/libs/scooter-image/src/index.js index 6ac063b..d6c7c06 100644 --- a/libs/scooter-image/src/index.js +++ b/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"; diff --git a/libs/scooter-image/src/lib/Uploader.jsx b/libs/scooter-image/src/lib/Uploader.jsx index 6ed1ecd..4847be3 100644 --- a/libs/scooter-image/src/lib/Uploader.jsx +++ b/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"; diff --git a/libs/scooter-image/src/scooter-image.scss b/libs/scooter-image/src/scooter-image.scss index ac95633..0898a19 100644 --- a/libs/scooter-image/src/scooter-image.scss +++ b/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; diff --git a/libs/scooter-ui/src/index.js b/libs/scooter-ui/src/index.js index 0282d60..20befe6 100644 --- a/libs/scooter-ui/src/index.js +++ b/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"; \ No newline at end of file diff --git a/libs/scooter-image/src/lib/ImageEditor.jsx b/libs/scooter-ui/src/lib/shared-ui/ImageEditor.jsx similarity index 88% rename from libs/scooter-image/src/lib/ImageEditor.jsx rename to libs/scooter-ui/src/lib/shared-ui/ImageEditor.jsx index 8d6b351..75862ad 100644 --- a/libs/scooter-image/src/lib/ImageEditor.jsx +++ b/libs/scooter-ui/src/lib/shared-ui/ImageEditor.jsx @@ -20,7 +20,7 @@ export const ImageEditor = ({ url, editor, onClose, alt, caption }) => { }; return ( -
+
{ placeholder="Brand Image" label="Alt Text" /> -
+
diff --git a/libs/scooter-ui/src/scooter-ui.scss b/libs/scooter-ui/src/scooter-ui.scss index 5621bf4..849b7f4 100644 --- a/libs/scooter-ui/src/scooter-ui.scss +++ b/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; } \ No newline at end of file