@ebl-vue/editor-full 1.0.13 → 1.1.2

package/src/plugins/imageResizeCrop/index.css

@@ -0,0 +1,234 @@
+.cdx-image-tool-tune--floatLeft .cdx-block,
+.cdx-image-tool-tune--center .cdx-block,
+.cdx-image-tool-tune--floatRight .cdx-block,
+.cdx-image-tool-tune--floatLeft .image-tool__image,
+.cdx-image-tool-tune--center .image-tool__image,
+.cdx-image-tool-tune--floatRight .image-tool__image,
+.cdx-image-tool-tune--floatLeft .cdx-block,
+.cdx-image-tool-tune--center .cdx-block,
+.cdx-image-tool-tune--floatRight .cdx-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+:root {
+  --primary: #2492F5;
+  --primary-content: #E9F4FE;
+}
+
+.cdx-settings-button--active {
+  background: var(--primary-content);
+  color: var(--primary);
+}
+
+.cdx-settings-button:hover {
+  background: var(--primary-content);
+}
+
+.cdx-image-tool-tune--center {
+  display: flex;
+  justify-content: center;
+}
+
+@media all and (min-width: 470px) {
+  .codex-editor:not(.read-only)
+    .cdx-image-tool-tune--floatLeft.ce-block__content,
+  .codex-editor:not(.read-only)
+    .cdx-image-tool-tune--floatRight.ce-block__content {
+    min-height: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image,
+  .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
+    margin-top: 40px;
+  }
+  .cdx-image-tool-tune--floatLeft.ce-block__content .image-tool__image {
+    margin-left: 20px;
+  }
+  .cdx-image-tool-tune--floatRight.ce-block__content .image-tool__image {
+    margin-right: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input,
+  .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input {
+    width: calc(100% - 20px);
+  }
+  .cdx-image-tool-tune--floatLeft.ce-block__content .cdx-input {
+    margin-left: 20px;
+  }
+  .cdx-image-tool-tune--floatRight.ce-block__content .cdx-input {
+    margin-right: 20px;
+  }
+
+  .cdx-image-tool-tune--floatLeft .cdx-block {
+    float: left;
+    margin-right: 10px;
+  }
+
+  .cdx-image-tool-tune--floatRight .cdx-block {
+    float: right;
+    margin-left: 10px;
+  }
+
+  .cdx-image-tool-tune--sizeSmall .cdx-block {
+    max-width: 25% !important;
+  }
+  .cdx-image-tool-tune--sizeMiddle .cdx-block {
+    max-width: 50% !important;
+  }
+  .cdx-image-tool-tune--sizeLarge .cdx-block {
+    max-width: 75% !important;
+  }
+}
+
+.cdx-image-tool-tune--sizeLarge img {
+  object-fit: cover;
+  max-width: 100%;
+}
+.cdx-image-tool-tune--sizeSmall img {
+  object-fit: cover;
+  max-width: 100%;
+}
+.cdx-image-tool-tune--sizeMiddle img {
+  object-fit: cover;
+  max-width: 100%;
+}
+
+.codex-editor.read-only .cdx-input.image-tool__caption:empty,
+.read-only > .codex-editor .cdx-input.image-tool__caption:empty {
+  display: none;
+}
+
+.cdx-image-tool-tune--resize .cdx-block {
+  position: relative;
+  overflow: visible;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable {
+  display: none;
+}
+
+.cdx-image-tool-tune--resize .image-tool__image-picture {
+  width: 100% !important;
+}
+.cdx-image-tool-tune--resize .cdx-block:hover .resizable {
+  display: block;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--primary-content);
+  border: 3px solid var(--primary);
+  position: absolute;
+}
+
+.cdx-image-tool-tune--resize .cdx-block .resizable .resizers .resizer.top-left {
+  left: -5px;
+  top: -5px;
+  cursor: nwse-resize;
+  /*resizer cursor*/
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.top-right {
+  right: -5px;
+  top: -5px;
+  cursor: nesw-resize;
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.bottom-left {
+  left: -5px;
+  bottom: -5px;
+  cursor: nesw-resize;
+}
+
+.cdx-image-tool-tune--resize
+  .cdx-block
+  .resizable
+  .resizers
+  .resizer.bottom-right {
+  right: -5px;
+  bottom: -5px;
+  cursor: nwse-resize;
+}
+
+.cdx-image-tool-tune--crop:hover,
+.cdx-image-tool-tune--crop.isCropping,
+.cdx-image-tool-tune--resize:hover {
+  z-index: 2;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image {
+  position: relative;
+}
+
+.cdx-image-tool-tune--crop .isCropping .image-tool__image {
+  min-height: 600px;
+  min-width: 100%;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image .crop-btn,
+.cdx-image-tool-tune--crop .image-tool__image .crop-save {
+  position: absolute;
+  top: 0;
+  left: 0;
+  padding: 7px;
+  background: var(--primary);
+  color: var(--primary-content);
+  text-align: center;
+  line-height: 20px;
+  cursor: pointer;
+  display: none;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image:hover .crop-btn,
+.cdx-image-tool-tune--crop .image-tool__image:hover .crop-save {
+  display: block;
+}
+
+.cdx-image-tool-tune--crop .image-tool__image img.isCropped {
+  position: absolute;
+  min-width: unset;
+  max-width: unset;
+  min-height: unset;
+  max-height: unset;
+}
+
+.cdx-image-tool-tune--crop .cdx-block.image-tool.isCropping {
+  min-width: unset !important;
+  max-width: unset !important;
+  min-height: unset !important;
+  max-height: unset !important;
+}
+
+.ce-block {
+  margin: 0.8em 0;
+}
+.ce-toolbar {
+  z-index: 3;
+}
+
+.image-tool__caption {
+  background-color: white;
+}
+.image-tool {
+  position: relative;
+  z-index: 1;
+}
+
+.cdx-image-tool-tune {
+  display: flex;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 100%;
+}

package/src/plugins/imageResizeCrop/index.ts

@@ -0,0 +1,5 @@
+import './index.css';
+
+export { default as ImageToolTune } from './ImageTune';
+export type { ImageToolTuneData } from './ImageTune';
+export type { ImageToolTuneConfig } from './ImageTune';

package/src/plugins/imageResizeCrop/types.d.ts

@@ -0,0 +1,23 @@
+declare module '*.css' {
+  const content: unknown;
+  export default content;
+}
+
+declare module '@editorjs/editorjs' {
+  export interface API {
+    i18n: {
+      t(key: string): string;
+    };
+    tooltip: {
+      onHover(element: HTMLElement, text: string): void;
+    };
+    readOnly: {
+      isEnabled: boolean;
+    };
+  }
+
+  export interface BlockAPI {
+    holder: HTMLElement;
+    dispatchChange(): void;
+  }
+}

package/src/plugins/imageTool/index.css

@@ -81,7 +81,7 @@
 }
 
 .image-tool .cdx-button {
-  display: flex;
+  display: none;
   align-items: center;
   justify-content: center
 }

package/src/plugins/imageTool/index.ts

@@ -74,6 +74,9 @@ export default class ImageTool implements BlockTool {
    */
   private _data: ImageToolData;
 
+  private userStore:any;
+
+
   /**
    * Caption enabled state
    * Null when user has not toggled the caption tune
@@ -93,6 +96,8 @@ export default class ImageTool implements BlockTool {
   constructor({ data, config, api, readOnly, block }: ImageToolConstructorOptions) {
     this.api = api;
     this.block = block;
+    this.userStore=config?.userStore;
+    
     /**
      * Tool's initial config
      */
@@ -107,7 +112,9 @@ export default class ImageTool implements BlockTool {
       uploader: config.uploader,
       actions: config.actions,
       features: config.features || {},
+      userStore: config.userStore,
     };
+    
 
     /**
      * Module for file uploading
@@ -129,6 +136,9 @@ export default class ImageTool implements BlockTool {
           onPreview: (src: string) => {
             this.ui.showPreloader(src);
           },
+          noSelectedFile:()=>{
+            this.noSelectedFile();
+          }
         });
       },
       readOnly,
@@ -149,6 +159,12 @@ export default class ImageTool implements BlockTool {
     this.data = data;
   }
 
+  private noSelectedFile(): void {
+    this.api.blocks.delete(this.api.blocks.getCurrentBlockIndex());
+  }
+  private deleteCurrentBlock() {
+    this.api.blocks.delete(this.api.blocks.getCurrentBlockIndex());
+  }
   /**
    * Notify core that read-only mode is supported
    */
@@ -328,9 +344,9 @@ export default class ImageTool implements BlockTool {
       /**
        * Paste URL of image into the Editor
        */
-      patterns: {
-        image: /https?:\/\/\S+\.(gif|jpe?g|tiff|png|svg|webp)(\?[a-z0-9=]*)?$/i,
-      },
+      // patterns: {
+      //   image: /https?:\/\/\S+\.(gif|jpe?g|png|webp)(\?[a-z0-9=]*)?$/i,
+      // },
 
       /**
        * Drag n drop file from into the Editor
@@ -365,12 +381,12 @@ export default class ImageTool implements BlockTool {
         this.uploadUrl(image.src);
         break;
       }
-      case 'pattern': {
-        const url = (event.detail as PatternPasteEventDetail).data;
+      // case 'pattern': {
+      //   const url = (event.detail as PatternPasteEventDetail).data;
 
-        this.uploadUrl(url);
-        break;
-      }
+      //   this.uploadUrl(url);
+      //   break;
+      // }
       case 'file': {
         const file = (event.detail as FilePasteEventDetail).file;
 
@@ -444,13 +460,16 @@ export default class ImageTool implements BlockTool {
    */
   private uploadingFailed(errorText: string): void {
     console.log('Image Tool: uploading failed because of', errorText);
-    
-   
+    let errorMessage = this.api.i18n.t('Couldn’t upload image. Please try another.');
+    if (errorText) {
+        errorMessage = this.api.i18n.t(errorText);
+      }
     this.api.notifier.show({
-      message: this.api.i18n.t('Couldn’t upload image. Please try another.'),
+      message: errorMessage,
       style: 'error',
     });
     this.ui.hidePreloader();
+    this.deleteCurrentBlock();
   }
 
   /**

package/src/plugins/imageTool/types/types.ts

@@ -10,6 +10,7 @@ export interface UploadOptions {
    * @returns void
    */
   onPreview: (src: string) => void;
+  noSelectedFile:()=>void;
 }
 
 /**
@@ -134,6 +135,7 @@ export type FeaturesConfig = {
  * @description Config supported by Tool
  */
 export interface ImageConfig {
+  userStore?: any;
   /**
    * Endpoints for upload, whether using file or URL.
    */

package/src/plugins/imageTool/ui.ts

@@ -1,4 +1,4 @@
-import { IconPicture } from '@codexteam/icons';
+import { IconPicture } from '../../icons';
 import { make } from './utils/dom';
 import type { API } from '@editorjs/editorjs';
 import type { ImageConfig } from './types/types';
@@ -178,8 +178,9 @@ export default class Ui {
   public showPreloader(src: string): void {
     this.nodes.imagePreloader.style.backgroundImage = `url(${src})`;
 
-    this.toggleStatus(UiState.Uploading);
+    //this.toggleStatus(UiState.Uploading);
   }
+ 
 
   /**
    * Hide uploading preloader