@ebl-vue/editor-full 1.0.11 → 1.0.13

package/src/plugins/table/table.ts

@@ -8,7 +8,7 @@ import {
   IconDirectionUpRight,
   IconDirectionDownRight,
   IconCross,
-  IconPlus
+
 } from '../../icons';
 type TableData = {
     /**
@@ -76,12 +76,12 @@ export default class Table {
   private selectedColumn: any;
   private tunes: any;
   private focusedCell: any;
-  private numberOfColumns: number;
+
   private hoveredCell: any;
   private isDragging: boolean;
-  private draggingRow: number;
+  //private draggingRow: number;
   private draggingColumn: number;
-  private draggingColArr: any[];
+  //private draggingColArr: any[];
   private startWidth: number;
   private mouseStartX: number;
   private colWidthArr:any[];
@@ -110,8 +110,8 @@ export default class Table {
     this.hoveredCell = null;
 
     this.isDragging = false;
-    this.draggingColArr = [];
-    this.draggingRow = 0;
+    //this.draggingColArr = [];
+    //this.draggingRow = 0;
     this.draggingColumn = 0;
     this.startWidth = 0;
     this.mouseStartX = 0;
@@ -176,17 +176,18 @@ export default class Table {
     /**
      * Global click listener allows to delegate clicks on some elements
      */
-    this.documentClicked = (event:MouseEvent) => {
-      const clickedInsideTable = event.target.closest(`.${CSS.table}`) !== null;
-      const outsideTableClicked = event.target.closest(`.${CSS.wrapper}`) === null;
+    this.documentClicked = (event: MouseEvent) => {
+      let target = event.target as HTMLElement;
+      const clickedInsideTable = target.closest(`.${CSS.table}`) !== null;
+      const outsideTableClicked = target.closest(`.${CSS.wrapper}`) === null;
       const clickedOutsideToolboxes = clickedInsideTable || outsideTableClicked;
 
       if (clickedOutsideToolboxes) {
         this.hideToolboxes();
       }
 
-      const clickedOnAddRowButton = event.target.closest(`.${CSS.addRow}`);
-      const clickedOnAddColumnButton = event.target.closest(`.${CSS.addColumn}`);
+      const clickedOnAddRowButton = target.closest(`.${CSS.addRow}`);
+      const clickedOnAddColumnButton = target.closest(`.${CSS.addColumn}`);
 
       /**
        * Also, check if clicked in current table, not other (because documentClicked bound to the whole document)
@@ -247,9 +248,9 @@ handleDocumentMousedown = (e:MouseEvent) => {
         this.table.classList.add("table-resizing"); //为整个表格添加光标样式
         document.addEventListener("mousemove", this.handleDocumentMousemove);
         document.addEventListener("mouseup", this.handleDocumentMouseup);
-        this.draggingRow = this.hoveredRow;
+        //this.draggingRow = this.hoveredRow;
         this.draggingColumn = this.hoveredColumn;
-        this.draggingColArr = this.getCellInCol(this.draggingColumn);
+        //this.draggingColArr = this.getCellInCol(this.draggingColumn);
         this.startWidth = this.colWidthArr[this.draggingColumn - 1]; //获取初始宽度
         this.mouseStartX = e.clientX;
       }
@@ -268,7 +269,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
     return cells;
   }
    // mousemove事件
-  handleDocumentMousemove = (e) => {
+  handleDocumentMousemove = (e:MouseEvent) => {
     if (!this.isDragging) return;
     const currentMouseX = e.clientX;
     const deltaX = currentMouseX - this.mouseStartX;
@@ -278,7 +279,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
     this.updateColWidth();
   };
   // mouseup事件
-  handleDocumentMouseup = (e) => {
+  handleDocumentMouseup = () => {
     //this.showToolbox(); // 拖拽结束时重新显示工具栏
     //this.updateToolboxPosition();
     this.updateToolboxesPosition();
@@ -445,7 +446,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    * @param {HTMLElement} cell - cell element
    * @returns {HTMLElement}
    */
-  getRowByCell(cell:Element) {
+  getRowByCell(cell:HTMLElement) {
     return cell.parentElement;
   }
 
@@ -549,7 +550,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
       * Check if the number of rows has reached the maximum allowed rows specified in the configuration,
       * and if so, exit the function to prevent adding more columns beyond the limit.
       */  
-    if (this.config && this.config.maxrows && this.numberOfRows >= this.config.maxrows && addRowButton) {
+    if (this.config && this.config.maxrows && this.numberOfRows >= this.config.maxrows ) {
       return;
     }
 
@@ -570,7 +571,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
     const insertedRowFirstCell = this.getRowFirstCell(insertedRow);
 
     if (insertedRowFirstCell && setFocus) {
-      $.focus(insertedRowFirstCell);
+      $.focus(insertedRowFirstCell as HTMLElement);
     }
 
     const addRowButton = this.wrapper.querySelector(`.${CSS.addRow}`);
@@ -607,7 +608,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {number} index
    */
-  deleteRow(index) {
+  deleteRow(index: number) {
     this.getRow(index).remove();
     const addRowButton = this.wrapper.querySelector(`.${CSS.addRow}`);
     if (addRowButton) {
@@ -731,10 +732,10 @@ handleDocumentMousedown = (e:MouseEvent) => {
    * Fills a row with cells
    *
    * @param {HTMLElement} row - row to fill
-   * @param {number} numberOfColumns - how many cells should be in a row
+   * @param {number} numOfColumns - how many cells should be in a row
    */
-  fillRow(row, numberOfColumns) {
-    for (let i = 1; i <= numberOfColumns; i++) {
+  fillRow(row:HTMLElement, numOfColumns:number) {
+    for (let i = 1; i <= numOfColumns; i++) {
       const newCell = this.createCell();
 
       row.appendChild(newCell);
@@ -793,8 +794,8 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {Event} event - mouse move event
    */
-  onMouseMoveInTable(event) {
-    const { row, column, deltaXCell, deltaYCell } = this.getHoveredCell(event);
+  onMouseMoveInTable(event:MouseEvent) {
+    const { row, column, deltaXCell } = this.getHoveredCell(event);
 
     this.hoveredColumn = column;
     this.hoveredRow = row;
@@ -825,7 +826,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {KeyboardEvent} event - keypress event
    */
-  onKeyPressListener(event) {
+  onKeyPressListener(event: KeyboardEvent) {
     if (event.key === 'Enter') {
       if (event.shiftKey) {
         return true;
@@ -843,7 +844,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {KeyboardEvent} event - keydown event
    */
-  onKeyDownListener(event) {
+  onKeyDownListener(event: KeyboardEvent) {
     if (event.key === 'Tab') {
       event.stopPropagation();
     }
@@ -854,9 +855,10 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {FocusEvent} event - focusin event
    */
-  focusInTableListener(event) {
-    const cell = event.target;
+  focusInTableListener(event: FocusEvent) {
+    const cell = event.target as HTMLElement;
     const row = this.getRowByCell(cell);
+    if(!row) return;
 
     this.focusedCell = {
       row: Array.from(this.table.querySelectorAll(`.${CSS.row}`)).indexOf(row) + 1,
@@ -954,7 +956,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {boolean} withHeadings - use headings row or not
    */
-  setHeadingsSetting(withHeadings) {
+  setHeadingsSetting(withHeadings: boolean) {
     this.tunes.withHeadings = withHeadings;
 
     if (withHeadings) {
@@ -997,7 +999,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {number} index
    */
-  selectRow(index) {
+  selectRow(index: number) {
     const row = this.getRow(index);
 
     if (row) {
@@ -1028,7 +1030,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    *
    * @param {number} index
    */
-  selectColumn(index) {
+  selectColumn(index: number) {
     for (let i = 1; i <= this.numberOfRows; i++) {
       const cell = this.getCell(i, index);
 
@@ -1048,9 +1050,9 @@ handleDocumentMousedown = (e:MouseEvent) => {
       return;
     }
 
-    let cells = this.table.querySelectorAll(`.${CSS.cellSelected}`);
+    let cells = this.table.querySelectorAll(`.${CSS.cellSelected}`) as HTMLElement[];
 
-    Array.from(cells).forEach(column => {
+    Array.from(cells).forEach((column: HTMLElement) => {
       column.classList.remove(CSS.cellSelected);
     });
 
@@ -1077,7 +1079,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
     const afterTheRightBorder1 = ({ fromRightBorder }: { fromRightBorder: number }) => x > (width - fromRightBorder);
       hoveredColumn = this.binSearch(
         this.numberOfColumns,
-        (mid) => this.getCell(1, mid),
+        (mid: number) => this.getCell(1, mid),
         beforeTheLeftBorder1,
         afterTheRightBorder1
       );
@@ -1089,7 +1091,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
       const afterTheRightBorder2 = ({ fromBottomBorder }: { fromBottomBorder: number }) => y > (height - fromBottomBorder);
       hoveredRow = this.binSearch(
         this.numberOfRows,
-        (mid) => this.getCell(mid, 1),
+        (mid: number) => this.getCell(mid, 1),
         beforeTheLeftBorder2,
         afterTheRightBorder2
       );
@@ -1134,7 +1136,7 @@ handleDocumentMousedown = (e:MouseEvent) => {
    * @param {function} afterTheRightBorder - determines the cursor position, to the right of the cell or not
    * @returns {number}
    */
-  binSearch(numberOfCells, getCell, beforeTheLeftBorder, afterTheRightBorder) {
+  binSearch(numberOfCells: number, getCell: Function, beforeTheLeftBorder: Function, afterTheRightBorder: Function) {
     let leftBorder = 0;
     let rightBorder = numberOfCells + 1;
     let totalIterations = 0;
@@ -1171,13 +1173,13 @@ handleDocumentMousedown = (e:MouseEvent) => {
     for (let i = 1; i <= this.numberOfRows; i++) {
       const row = this.table.querySelector(`.${CSS.row}:nth-child(${i})`);
       const cells = Array.from(row.querySelectorAll(`.${CSS.cell}`));
-      const isEmptyRow = cells.every(cell => !cell.textContent.trim());
+      const isEmptyRow = cells.every((cell:any)=>!cell.textContent.trim());
 
       if (isEmptyRow) {
         continue;
       }
 
-      data.push(cells.map(cell => cell.innerHTML));
+      data.push(cells.map((cell:any) => cell.innerHTML));
     }
 
     return data;

package/src/plugins/table/toolbox.ts

@@ -21,7 +21,7 @@ import { IconMenuSmall } from "../../icons";
  *   <toolbox>
  */
 export default class Toolbox {
-  private api: any;
+
   private items: any;
   private onOpen: any;
   private onClose: any;
@@ -38,8 +38,8 @@ export default class Toolbox {
    * @param {function} config.onClose - callback fired when the Popover is closing
    * @param {string} config.cssModifier - the modifier for the Toolbox. Allows to add some specific styles.
    */
-  constructor({ api, items, onOpen, onClose, cssModifier = "" }: any) {
-    this.api = api;
+  constructor({  items, onOpen, onClose, cssModifier = "" }: any) {
+   
 
     this.items = items;
     this.onOpen = onOpen;
@@ -147,7 +147,8 @@ export default class Toolbox {
      * Set 'top' or 'left' style
      */
     Object.entries(position).forEach(([prop, value]) => {
-      this.wrapper.style[prop] = value;
+      //this.wrapper.style[prop] = value;
+      this.wrapper.style.setProperty(prop, value as string);
     });
 
     this.wrapper.classList.add(Toolbox.CSS.toolboxShowed);

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

@@ -7,9 +7,9 @@
  * @returns {Element}
  */
 export function make(
-  tagName,
-  classNames,
-  attributes = {}
+  tagName: string,
+  classNames: string | string[],
+  attributes:Record<string, any> = {}
 ) {
   const el = document.createElement(tagName);
 
@@ -24,7 +24,8 @@ export function make(
       continue;
     }
 
-    el[attrName] = attributes[attrName];
+    //el[attrName] = attributes[attrName];
+    el.setAttribute(attrName, attributes[attrName]);
   }
 
   return el;
@@ -36,7 +37,7 @@ export function make(
  * @param {HTMLElement} elem - item
  * @returns {{x1: number, y1: number, x2: number, y2: number}} coordinates of the upper left (x1,y1) and lower right(x2,y2) corners
  */
-export function getCoords(elem) {
+export function getCoords(elem: HTMLElement) {
   const rect = elem.getBoundingClientRect();
 
   return {
@@ -54,7 +55,7 @@ export function getCoords(elem) {
  * @param {HTMLElement} secondElem - inner element, if its borders go beyond the first, then the paddings will be considered negative
  * @returns {{fromTopBorder: number, fromLeftBorder: number, fromRightBorder: number, fromBottomBorder: number}}
  */
-export function getRelativeCoordsOfTwoElems(firstElem, secondElem) {
+export function getRelativeCoordsOfTwoElems(firstElem: HTMLElement, secondElem: HTMLElement) {
   const firstCoords = getCoords(firstElem);
   const secondCoords = getCoords(secondElem);
 
@@ -72,7 +73,7 @@ export function getRelativeCoordsOfTwoElems(firstElem, secondElem) {
  * @param {HTMLElement} elem - element relative to which the coordinates will be calculated
  * @param {Event} event - mouse event
  */
-export function getCursorPositionRelativeToElement(elem, event) {
+export function getCursorPositionRelativeToElement(elem: HTMLElement, event: MouseEvent) {
   const rect = elem.getBoundingClientRect();
   const { width, height, x, y } = rect;
   const { clientX, clientY } = event;
@@ -92,8 +93,8 @@ export function getCursorPositionRelativeToElement(elem, event) {
  * @param {HTMLElement} referenceNode
  * @returns {HTMLElement}
  */
-export function insertAfter(newNode, referenceNode) {
-  return referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
+export function insertAfter(newNode: HTMLElement, referenceNode: HTMLElement) {
+  return referenceNode?.parentNode?.insertBefore(newNode, referenceNode.nextSibling);
 }
 
 /**
@@ -103,8 +104,8 @@ export function insertAfter(newNode, referenceNode) {
  * @param {HTMLElement} referenceNode
  * @returns {HTMLElement}
  */
-export function insertBefore(newNode, referenceNode) {
-  return referenceNode.parentNode.insertBefore(newNode, referenceNode);
+export function insertBefore(newNode: HTMLElement, referenceNode: HTMLElement) {
+  return referenceNode?.parentNode?.insertBefore(newNode, referenceNode);
 }
 
 
@@ -116,13 +117,13 @@ export function insertBefore(newNode, referenceNode) {
  *
  * @returns {void}
  */
-export function focus(element, atStart = true) {
+export function focus(element: HTMLElement, atStart = true) {
   const range = document.createRange();
   const selection = window.getSelection();
 
   range.selectNodeContents(element);
   range.collapse(atStart);
 
-  selection.removeAllRanges();
-  selection.addRange(range);
+  selection?.removeAllRanges();
+  selection?.addRange(range);
 }

package/src/plugins/table/utils/popover.ts

@@ -8,16 +8,25 @@ import * as $ from './dom';
  * @property {function} hideIf - if provided, item will be hid, if this method returns true
  * @property {function} onClick - click callback
  */
-
+interface IPopoverItem {
+  label: string;
+  icon?: string;
+  confirmationRequired?: boolean;
+  hideIf?: () => boolean;
+  onClick: () => void;
+}
 /**
  * This cass provides a popover rendering
  */
 export default class Popover {
+  private wrapper: HTMLElement|null|undefined;
+  private items: IPopoverItem[];
+  private itemEls: HTMLElement[];
   /**
    * @param {object} options - constructor options
    * @param {PopoverItem[]} options.items - constructor options
    */
-  constructor({items}) {
+  constructor({items}: {items: any}) {
     this.items = items;
     this.wrapper = undefined;
     this.itemEls = [];
@@ -48,7 +57,7 @@ export default class Popover {
   render() {
     this.wrapper = $.make('div', Popover.CSS.popover);
 
-    this.items.forEach((item, index) => {
+    this.items.forEach((item:IPopoverItem, index:number) => {
       const itemEl = $.make('div', Popover.CSS.item);
       const icon = $.make('div', Popover.CSS.itemIcon, {
         innerHTML: item.icon
@@ -57,12 +66,13 @@ export default class Popover {
         textContent: item.label
       });
 
-      itemEl.dataset.index = index;
+      itemEl.dataset.index = index + '';
+ 
 
       itemEl.appendChild(icon);
       itemEl.appendChild(label);
 
-      this.wrapper.appendChild(itemEl);
+      this.wrapper?.appendChild(itemEl);
       this.itemEls.push(itemEl);
     });
 
@@ -82,8 +92,9 @@ export default class Popover {
    *
    * @returns {void}
    */
-  popoverClicked(event) {
-    const clickedItem = event.target.closest(`.${Popover.CSS.item}`);
+  popoverClicked(event: MouseEvent) {
+    const target = event.target as HTMLElement;
+    const clickedItem = target.closest(`.${Popover.CSS.item}`) as HTMLElement;
 
     /**
      * Clicks outside or between item
@@ -92,8 +103,10 @@ export default class Popover {
       return;
     }
 
-    const clickedItemIndex = clickedItem.dataset.index;
-    const item = this.items[clickedItemIndex];
+    const clickedItemIndex:string|undefined = clickedItem.dataset.index;
+    if(!clickedItemIndex) return;
+
+    const item = this.items[parseInt(clickedItemIndex)];
 
     if (item.confirmationRequired && !this.hasConfirmationState(clickedItem)) {
       this.setConfirmationState(clickedItem);
@@ -109,7 +122,7 @@ export default class Popover {
    *
    * @returns {void}
    */
-  setConfirmationState(itemEl) {
+  setConfirmationState(itemEl: HTMLElement) {
     itemEl.classList.add(Popover.CSS.itemConfirmState);
   }
 
@@ -118,7 +131,7 @@ export default class Popover {
    *
    * @returns {void}
    */
-  clearConfirmationState(itemEl) {
+  clearConfirmationState(itemEl: HTMLElement) {
     itemEl.classList.remove(Popover.CSS.itemConfirmState);
   }
 
@@ -127,7 +140,7 @@ export default class Popover {
    *
    * @returns {boolean}
    */
-  hasConfirmationState(itemEl) {
+  hasConfirmationState(itemEl: HTMLElement) {
     return itemEl.classList.contains(Popover.CSS.itemConfirmState);
   }
 
@@ -137,7 +150,7 @@ export default class Popover {
    * @returns {boolean}
    */
   get opened() {
-    return this.wrapper.classList.contains(Popover.CSS.popoverOpened);
+    return this.wrapper?.classList.contains(Popover.CSS.popoverOpened) || false;
   }
 
   /**
@@ -155,7 +168,7 @@ export default class Popover {
       }
     });
 
-    this.wrapper.classList.add(Popover.CSS.popoverOpened);
+    this.wrapper?.classList.add(Popover.CSS.popoverOpened);
   }
 
   /**
@@ -164,7 +177,7 @@ export default class Popover {
    * @returns {void}
    */
   close() {
-    this.wrapper.classList.remove(Popover.CSS.popoverOpened);
+    this.wrapper?.classList.remove(Popover.CSS.popoverOpened);
     this.itemEls.forEach(el => {
       this.clearConfirmationState(el);
     });

package/src/plugins/underline/index.ts

@@ -2,10 +2,8 @@
  * Build styles
  */
 import './index.css';
-const IconUnderline = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M9 7.5V11.5C9 12.2956 9.31607 13.0587 9.87868 13.6213C10.4413 14.1839 11.2044 14.5 12 14.5C12.7956 14.5 13.5587 14.1839 14.1213 13.6213C14.6839 13.0587 15 12.2956 15 11.5V7.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M7.71429 18H16.2857" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>`;
+import { IconUnderline } from '../../icons';
+
 import {type API, type InlineTool, type SanitizerConfig} from "@ebl-vue/editorjs";
 import {type InlineToolConstructorOptions} from "@ebl-vue/editorjs/types/tools/inline-tool";