@ebl-vue/editor-full 1.0.12 → 1.0.13

package/src/plugins/imageTool/uploader.ts

@@ -0,0 +1,234 @@
+import ajax from '@codexteam/ajax';
+import type { AjaxResponse } from '@codexteam/ajax';
+import isPromise from './utils/isPromise';
+import type { IUploadResponseFormat, UploadOptions } from './types/types';
+import type { UploadResponseFormat, ImageConfig } from './types/types';
+import axios, { AxiosInstance, InternalAxiosRequestConfig } from "axios";
+/**
+ * Params interface for Uploader constructor
+ */
+interface UploaderParams {
+  /**
+   * Configuration for the uploader
+   */
+  config: ImageConfig;
+
+  /**
+   * Handles the upload response.
+   * @param {UploadResponseFormat} response - Response format expected from the backend on file uploading.
+   * @returns {void}
+   */
+  onUpload: (response: UploadResponseFormat) => void;
+
+  /**
+   *
+   * @param error : error type
+   * @returns void
+   */
+  onError: (error: string) => void;
+}
+
+/**
+ * Module for file uploading. Handle 3 scenarios:
+ *  1. Select file from device and upload
+ *  2. Upload by pasting URL
+ *  3. Upload by pasting file from Clipboard or by Drag'n'Drop
+ */
+export default class Uploader {
+  private config: ImageConfig;
+  private onUpload: (response: UploadResponseFormat) => void;
+  private onError: (error: string) => void;
+  /**
+   * @param params - uploader module params
+   * @param params.config - image tool config
+   * @param params.onUpload - one callback for all uploading (file, url, d-n-d, pasting)
+   * @param params.onError - callback for uploading errors
+   */
+  constructor({ config, onUpload, onError }: UploaderParams) {
+    this.config = config;
+    this.onUpload = onUpload;
+    this.onError = onError;
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.transport()
+   * @param onPreview - callback fired when preview is ready
+   */
+  public async uploadSelectedFile({ onPreview }: UploadOptions) {
+    
+    const preparePreview = function (file: File): void {
+      const reader = new FileReader();
+
+      reader.readAsDataURL(file);
+      reader.onload = (e) => {
+        onPreview((e.target as FileReader).result as string);
+      };
+    };
+
+    /**
+     * Custom uploading
+     * or default uploading
+     */
+    let upload: Promise<UploadResponseFormat>;
+    let cdn: string = "";
+    let objectKey: string = "";
+
+    // custom uploading
+    if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
+      const uploadByFile = this.config.uploader.uploadByFile;
+
+      upload = ajax.selectFiles({ accept: this.config.types ?? 'image/*' }).then((files: File[]) => {
+        preparePreview(files[0]);
+
+        const customUpload = uploadByFile(files[0]);
+
+        if (!isPromise(customUpload)) {
+          console.warn('Custom uploader method uploadByFile should return a Promise');
+        }
+
+        return customUpload;
+      });
+
+      // default uploading
+    } else {
+      //选获取上传文件的地址
+      const files = await ajax.selectFiles({ accept: this.config.types ?? 'image/*' });
+      if (files && files.length > 0) {
+        preparePreview(files[0]);
+      }
+      const file = files[0];
+      const uploadBodyRes = await ajax.post({
+        url: this.config.endpoints.byFile,
+        data: Object.assign({
+          "fileName": file.name,
+          "contentType": file.type
+        }, this.config.additionalRequestData),
+        type: ajax.contentType.JSON,
+        
+      });
+      const uploadRes = uploadBodyRes.body as IUploadResponseFormat;
+      if (!uploadRes.success) {
+        this.onError(uploadRes.message!);
+        return;
+      }
+      console.log(uploadRes);
+      cdn = uploadRes.data.cdn;
+      objectKey = uploadRes.data.objectKey;
+      const axiosInstance: AxiosInstance = axios.create({
+        timeout: 1800000,
+        headers: { "Content-Type": file.type },
+      });
+      upload = axiosInstance.put(uploadRes.data.presignedUrl, file);
+
+
+    }
+
+    upload.then((response) => {
+      if (response.status === 200) {
+        response = {
+          success: 1,
+          file: { url: cdn + objectKey }
+        }
+      }
+      this.onUpload(response);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param url - image source url
+   */
+  public uploadByUrl(url: string): void {
+    let upload;
+
+    /**
+     * Custom uploading
+     */
+    if (this.config.uploader && typeof this.config.uploader.uploadByUrl === 'function') {
+      upload = this.config.uploader.uploadByUrl(url);
+
+      if (!isPromise(upload)) {
+        console.warn('Custom uploader method uploadByUrl should return a Promise');
+      }
+    } else {
+      /**
+       * Default uploading
+       */
+      upload = ajax.post({
+        url: this.config.endpoints.byUrl,
+        data: Object.assign({
+          url: url,
+        }, this.config.additionalRequestData),
+        type: ajax.contentType.JSON,
+        headers: this.config.additionalRequestHeaders as Record<string, string>,
+      }).then((response: AjaxResponse) => response.body as UploadResponseFormat);
+    }
+
+    upload.then((response: UploadResponseFormat) => {
+      this.onUpload(response);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+
+  /**
+   * Handle clicks on the upload file button
+   * Fires ajax.post()
+   * @param file - file pasted by drag-n-drop
+   * @param onPreview - file pasted by drag-n-drop
+   */
+  public uploadByFile(file: Blob, { onPreview }: UploadOptions): void {
+    /**
+     * Load file for preview
+     */
+    const reader = new FileReader();
+
+    reader.readAsDataURL(file);
+    reader.onload = (e) => {
+      onPreview((e.target as FileReader).result as string);
+    };
+
+    let upload: Promise<UploadResponseFormat>;
+
+    /**
+     * Custom uploading
+     */
+    if (this.config.uploader && typeof this.config.uploader.uploadByFile === 'function') {
+      upload = this.config.uploader.uploadByFile(file);
+
+      if (!isPromise(upload)) {
+        console.warn('Custom uploader method uploadByFile should return a Promise');
+      }
+    } else {
+      /**
+       * Default uploading
+       */
+      const formData = new FormData();
+
+      formData.append(this.config.field ?? 'image', file);
+
+      if (this.config.additionalRequestData && Object.keys(this.config.additionalRequestData).length) {
+        Object.entries(this.config.additionalRequestData).forEach(([name, value]: [string, string | Blob]) => {
+          formData.append(name, value);
+        });
+      }
+
+      upload = ajax.post({
+        url: this.config.endpoints.byFile,
+        data: formData,
+        type: ajax.contentType.JSON,
+        headers: this.config.additionalRequestHeaders as Record<string, string>,
+      }).then((response: AjaxResponse) => response.body as UploadResponseFormat);
+    }
+
+    upload.then((response) => {
+      this.onUpload(response);
+    }).catch((error: string) => {
+      this.onError(error);
+    });
+  }
+}

package/src/plugins/imageTool/utils/dom.ts

@@ -0,0 +1,24 @@
+/**
+ * Helper for making Elements with attributes
+ * @param tagName           - new Element tag name
+ * @param classNames  - list or name of CSS class
+ * @param attributes        - any attributes
+ * @returns
+ */
+export function make(tagName: string, classNames: string[] | string | null = null, attributes: { [key: string]: string | boolean } = {}): HTMLElement {
+  const el = document.createElement(tagName);
+
+  if (Array.isArray(classNames)) {
+    el.classList.add(...classNames);
+  } else if (classNames !== null) {
+    el.classList.add(classNames);
+  }
+
+  for (const attrName in attributes) {
+    if (attributes.hasOwnProperty(attrName)) {
+      (el as unknown as { [key: string]: string | boolean })[attrName] = attributes[attrName];
+    }
+  }
+
+  return el;
+}

package/src/plugins/imageTool/utils/isPromise.ts

@@ -0,0 +1,10 @@
+import type { UploadResponseFormat } from '../types/types';
+
+/**
+ * Check if passed object is a Promise
+ * @param  object - object to check
+ * @returns
+ */
+export default function isPromise(object: Promise<UploadResponseFormat>): object is Promise<UploadResponseFormat> {
+  return object !== undefined && typeof object.then === 'function';
+}

package/src/plugins/indent/index.ts

@@ -1,13 +1,11 @@
 import  type {  BlockTune,  API,  BlockAPI,  BlockAddedEvent,ToolConfig } from '@ebl-vue/editorjs/types'
 
 import type { MenuConfig } from '@ebl-vue/editorjs/types/tools'
-
+import { IconIndentLeft,IconIndentRight } from '../../icons';
 
 import './index.css'
 
-const IconChevronLeft = `<svg t="1763708081701" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2604" width="24" height="24"><path d="M469.3330000000001 725.333H896V640H469.3330000000001v85.333zM128 512l170.667 170.667V341.3330000000001L128 512z m0 384h768v-85.333H128V896z m0-768v85.333h768V128H128z m341.333 256H896v-85.333H469.3330000000001V384z m0 170.667H896v-85.334H469.3330000000001v85.334z" p-id="2605" fill="#000000"></path></svg>`;
 
-const IconChevronRight = `<svg t="1763708124227" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2788" width="24" height="24"><path d="M128 896h768v-85.333H128V896z m0-554.667v341.334L298.667 512 128 341.333z m341.333 384H896V640H469.333v85.333zM128 128v85.333h768V128H128z m341.333 256H896v-85.333H469.333V384z m0 170.667H896v-85.334H469.333v85.334z" p-id="2789" fill="#000000"></path></svg>`;
 
 interface ConstructorArgs {
   data: IndentData;
@@ -196,7 +194,7 @@ export default class IndentTune implements BlockTune {
             //@ts-ignore
             item.title = this.rightText;
           },
-          icon: IconChevronRight,
+          icon: IconIndentRight,
           name: rightElementName,
         },
         {
@@ -209,7 +207,7 @@ export default class IndentTune implements BlockTune {
             //@ts-ignore
             item.title = this.leftText;
           },
-          icon: IconChevronLeft,
+          icon: IconIndentLeft,
           name: leftElementName,
         },
       ]
@@ -217,9 +215,9 @@ export default class IndentTune implements BlockTune {
 
     const html = /*html*/ `
 			<div class="${this.CSS.popoverItem} ${this.CSS.customPopoverItem}" data-item-name='indent' version=${this.config.version}>
-				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentLeft}>${IconChevronLeft}</button>
+				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentLeft}>${IconIndentLeft}</button>
 				<span class="${this.CSS.popoverItemTitle}">${this.api.sanitizer.clean(this.api.i18n.t('Indent'), {})}</span>
-				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentRight} style="margin-left:10px;">${IconChevronRight}</button>
+				<button type="button" class="${this.CSS.popoverItemIcon}" data-${this.TuneNames.indentRight} style="margin-left:10px;">${IconIndentRight}</button>
 			</div>
 		`
 

package/src/plugins/inline-code/index.ts

@@ -2,11 +2,8 @@
  * Build styles
  */
 import './index.css';
-const IconBrackets = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 8L5 12L9 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M15 8L19 12L15 16" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+import {IconBrackets} from '../../icons';
+
 import { API, InlineTool, InlineToolConstructorOptions, SanitizerConfig } from "@editorjs/editorjs";
 
 interface IconClasses {

package/src/plugins/list/ListRenderer/ChecklistRenderer.ts

@@ -4,10 +4,7 @@ import { isEmpty, make } from '@editorjs/dom';
 import { DefaultListCssClasses } from './ListRenderer';
 import type { ListCssClasses, ListRendererInterface } from './ListRenderer';
 import { CssPrefix } from '../styles/CssPrefix';
-const IconCheck = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7 12L10.4884 15.8372C10.5677 15.9245 10.705 15.9245 10.7844 15.8372L17 9" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
+import { IconCheck } from "../../../icons"; 
 
 /**
  * Interface that represents all list used only in unordered list rendering

package/src/plugins/list/index.ts

@@ -1,46 +1,28 @@
 import type { API, BlockAPI, PasteConfig, ToolboxConfig } from '@ebl-vue/editorjs';
 import type {
   BlockToolConstructorOptions,
-  MenuConfigItem,
+  
   ToolConfig
 } from '@editorjs/editorjs/types/tools';
 
-import { IconStartWith } from './styles/icons/index.js';
+
 import type { ListConfig, ListData, ListDataStyle, ListItem, OldListData } from './types/ListParams';
 import ListTabulator from './ListTabulator';
 import { CheckListRenderer, OrderedListRenderer, UnorderedListRenderer } from './ListRenderer';
 import type { ListRenderer } from './types/ListRenderer';
-import { renderToolboxInput } from './utils/renderToolboxInput';
-import { OlCounterIconsMap, type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
-
-const IconListBulleted = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="9" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="9" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="9" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 17H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 12H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M5.00001 7H4.99002" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
-const IconListNumbered = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<line x1="12" y1="7" x2="19" y2="7" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="12" y1="12" x2="19" y2="12" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<line x1="12" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<path d="M7.79999 14L7.79999 7.2135C7.79999 7.12872 7.7011 7.0824 7.63597 7.13668L4.79999 9.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
-</svg>
-`;
-const IconChecklist = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.2 12L11.0586 13.8586C11.1367 13.9367 11.2633 13.9367 11.3414 13.8586L14.7 10.5" stroke="black" stroke-width="2" stroke-linecap="round"/>
-<rect x="5" y="5" width="14" height="14" rx="4" stroke="black" stroke-width="2"/>
-</svg>
-`;
+
+import {  type OlCounterType, OlCounterTypesMap } from './types/OlCounterType';
+
+import { IconListBulleted, IconListNumbered, IconChecklist } from "../../icons"; 
+
+
 
 /**
  * Build styles
  */
 import './styles/list.css';
 import './styles/input.css';
-import stripNumbers from './utils/stripNumbers';
+
 import normalizeData from './utils/normalizeData';
 import type { PasteEvent } from './types';
 import type { OrderedListItemMeta } from './types/ItemMeta';
@@ -54,6 +36,7 @@ export type ListParams = BlockToolConstructorOptions<ListData | OldListData, Lis
  * Default class of the component used in editor
  */
 export default class EditorjsList {
+  defaultCounterTypes: OlCounterType[];
   /**
    * Notify core that read-only mode is supported
    */
@@ -196,7 +179,7 @@ export default class EditorjsList {
   /**
    * Default Counter type of the ordered list
    */
-  private defaultCounterTypes: OlCounterType[];
+  //private defaultCounterTypes: OlCounterType[];
 
   /**
    * Tool's data
@@ -438,21 +421,21 @@ export default class EditorjsList {
    * Changes ordered list counterType property value
    * @param counterType - new value of the counterType value
    */
-  private changeCounters(counterType: OlCounterType): void {
-    this.list?.changeCounters(counterType);
+  // private changeCounters(counterType: OlCounterType): void {
+  //   this.list?.changeCounters(counterType);
 
-    (this.data.meta as OrderedListItemMeta).counterType = counterType;
-  }
+  //   (this.data.meta as OrderedListItemMeta).counterType = counterType;
+  // }
 
   /**
    * Changes ordered list start property value
    * @param index - new value of the start property
-   */
-  private changeStartWith(index: number): void {
-    this.list?.changeStartWith(index);
+  //  */
+  // private changeStartWith(index: number): void {
+  //   this.list?.changeStartWith(index);
 
-    (this.data.meta as OrderedListItemMeta).start = index;
-  }
+  //   (this.data.meta as OrderedListItemMeta).start = index;
+  // }
 
   /**
    * This method allows changing tabulator respectfully to passed style

package/src/plugins/list/types/OlCounterType.ts

@@ -1,4 +1,4 @@
-import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../styles/icons/index.js';
+import { IconNumber, IconLowerRoman, IconUpperRoman, IconLowerAlpha, IconUpperAlpha } from '../../../icons';
 
 export type OlCounterType = 'numeric' | 'upper-roman' | 'lower-roman' | 'upper-alpha' | 'lower-alpha';
 

package/src/plugins/marker/index.ts

@@ -2,15 +2,23 @@
  * Build styles
  */
 import './index.css';
-
-const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3535 9.31802L12.7678 7.90381C13.5488 7.12276 14.8151 7.12276 15.5962 7.90381C16.3772 8.68486 16.3772 9.95119 15.5962 10.7322L14.182 12.1464M11.3535 9.31802L7.96729 12.7043C7.40889 13.2627 7.02826 13.9739 6.87339 14.7482L6.69798 15.6253C6.55803 16.325 7.17495 16.942 7.87467 16.802L8.75175 16.6266C9.52612 16.4717 10.2373 16.0911 10.7957 15.5327L14.182 12.1464M11.3535 9.31802L14.182 12.1464" stroke="black" stroke-width="2"/><line x1="15" y1="17" x2="19" y2="17" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>`;
+import type { API } from '@ebl-vue/editorjs';
+import { IconMarker } from '../../icons';
 
 /**
  * Marker Tool for the Editor.js
  *
  * Allows to wrap inline fragment and style it somehow.
  */
- export default class Marker {
+export default class Marker {
+  private api: API;
+  private button: HTMLElement | null;
+  private tag: string;
+  private iconClasses: {base: string; active: string};
+
+  static get toolboxIcon() {
+    return IconMarker;
+  }
   /**
    * Class name for term-tag
    *
@@ -23,7 +31,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
   /**
    * @param {{api: object}}  - Editor.js API
    */
-  constructor({api}) {
+  constructor({api}: {api: any}) {
     this.api = api;
 
     /**
@@ -65,7 +73,8 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    */
   render() {
     this.button = document.createElement('button');
-    this.button.type = 'button';
+    //this.button.type = 'button';
+    this.button.setAttribute("type", "button");
     this.button.classList.add(this.iconClasses.base);
     this.button.innerHTML = this.toolboxIcon;
 
@@ -77,7 +86,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {Range} range - selected fragment
    */
-  surround(range) {
+  surround(range:Range) {
     if (!range) {
       return;
     }
@@ -99,7 +108,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {Range} range - selected fragment
    */
-  wrap(range) {
+  wrap(range:Range) {
     /**
      * Create a wrapper for highlighting
      */
@@ -127,32 +136,35 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
    *
    * @param {HTMLElement} termWrapper - term wrapper tag
    */
-  unwrap(termWrapper) {
+  unwrap(termWrapper: HTMLElement) {
     /**
      * Expand selection to all term-tag
      */
     this.api.selection.expandToTag(termWrapper);
 
     let sel = window.getSelection();
-    let range = sel.getRangeAt(0);
+    let range = sel?.getRangeAt(0);
 
-    let unwrappedContent = range.extractContents();
+    let unwrappedContent = range?.extractContents();
 
     /**
      * Remove empty term-tag
      */
-    termWrapper.parentNode.removeChild(termWrapper);
+    termWrapper?.parentNode?.removeChild(termWrapper);
 
     /**
      * Insert extracted content
      */
-    range.insertNode(unwrappedContent);
-
+    if (unwrappedContent) {
+      range?.insertNode(unwrappedContent);
+    }
     /**
      * Restore selection
      */
-    sel.removeAllRanges();
-    sel.addRange(range);
+    sel?.removeAllRanges();
+    if (range) {
+      sel?.addRange(range);
+    }
   }
 
   /**
@@ -161,7 +173,7 @@ const IconMarker = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
   checkState() {
     const termTag = this.api.selection.findParentTag(this.tag, Marker.CSS);
 
-    this.button.classList.toggle(this.iconClasses.active, !!termTag);
+    this.button?.classList.toggle(this.iconClasses.active, !!termTag);
   }
 
   /**

package/src/plugins/paragraph/index.ts

@@ -4,7 +4,8 @@
 import './index.css';
 
 import makeFragment from './utils/makeFragment';
-import type {  BlockToolConstructorOptions } from '@ebl-vue/editorjs';
+import type { BlockToolConstructorOptions } from '@ebl-vue/editorjs';
+import {IconText} from "../../icons";
 export type ToolConstructorOptions = BlockToolConstructorOptions<ParagraphData>;
 
 
@@ -372,7 +373,7 @@ export default class Paragraph {
    */
   static get toolbox(): ToolboxConfig {
     return {
-      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M8 9V7.2C8 7.08954 8.08954 7 8.2 7L12 7M16 9V7.2C16 7.08954 15.9105 7 15.8 7L12 7M12 7L12 17M12 17H10M12 17H14"/></svg>`,
+      icon: IconText,
       title: 'Text',
 
     };

package/src/plugins/quote/index.ts

@@ -3,12 +3,9 @@ import "./index.css";
 
 import { make } from "@editorjs/dom";
 import type { API, BlockAPI, BlockTool } from "@ebl-vue/editorjs";
+import { IconQuote } from "../../icons";
 
 
-const IconQuote = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10 10.8182L9 10.8182C8.80222 10.8182 8.60888 10.7649 8.44443 10.665C8.27998 10.5651 8.15181 10.4231 8.07612 10.257C8.00043 10.0909 7.98063 9.90808 8.01922 9.73174C8.0578 9.55539 8.15304 9.39341 8.29289 9.26627C8.43275 9.13913 8.61093 9.05255 8.80491 9.01747C8.99889 8.98239 9.19996 9.00039 9.38268 9.0692C9.56541 9.13801 9.72159 9.25453 9.83147 9.40403C9.94135 9.55353 10 9.72929 10 9.90909L10 12.1818C10 12.664 9.78929 13.1265 9.41421 13.4675C9.03914 13.8084 8.53043 14 8 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M16 10.8182L15 10.8182C14.8022 10.8182 14.6089 10.7649 14.4444 10.665C14.28 10.5651 14.1518 10.4231 14.0761 10.257C14.0004 10.0909 13.9806 9.90808 14.0192 9.73174C14.0578 9.55539 14.153 9.39341 14.2929 9.26627C14.4327 9.13913 14.6109 9.05255 14.8049 9.01747C14.9989 8.98239 15.2 9.00039 15.3827 9.0692C15.5654 9.13801 15.7216 9.25453 15.8315 9.40403C15.9414 9.55353 16 9.72929 16 9.90909L16 12.1818C16 12.664 15.7893 13.1265 15.4142 13.4675C15.0391 13.8084 14.5304 14 14 14" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;
 
 
 

package/src/plugins/table/plugin.ts

@@ -1,7 +1,7 @@
 import Table from './table';
 import * as $ from './utils/dom';
 
-import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings, IconStretch, IconCollapse } from '../../icons';
+import { IconTable, IconTableWithHeadings, IconTableWithoutHeadings } from '../../icons';
 import type { BlockTool, BlockToolConstructorOptions,PasteEvent } from '@ebl-vue/editorjs';
 
 /**