@itfin/components 1.5.0 → 1.5.2

package/src/components/editor/plugins.js

@@ -0,0 +1,1012 @@
+/**
+ * De-minified (beautified + renamed) single-file version of the provided code.
+ *
+ * Notes:
+ * 1) Original snippet references a helper `ct(this, 'name', fn)` (likely from bundler/Babel).
+ *    Here we implement `ct` as a simple property assignment: obj[name] = fn.
+ * 2) This file is designed to keep behavior equivalent to your snippet, but with readable names.
+ * 3) This looks like an Editor.js tool (toolbox/render/save/renderSettings + sanitize flags).
+ */
+
+// -----------------------------------------------------------------------------
+// Helpers
+// -----------------------------------------------------------------------------
+
+function isNotNull(value) {
+  return value != null;
+}
+
+/**
+ * Create DOM element with classes, attributes, children.
+ * @param {string} tag
+ * @param {string[] | null} classes
+ * @param {Record<string,string> | null} attrs
+ * @param {Node[] | null} children
+ */
+function createElement(tag, classes = null, attrs = null, children = null) {
+  const el = document.createElement(tag);
+
+  if (isNotNull(classes)) {
+    for (let i = 0; i < classes.length; i++) {
+      if (isNotNull(classes[i])) el.classList.add(classes[i]);
+    }
+  }
+
+  if (isNotNull(attrs)) {
+    for (const key in attrs) {
+      el.setAttribute(key, attrs[key]);
+    }
+  }
+
+  if (isNotNull(children)) {
+    for (let i = 0; i < children.length; i++) {
+      if (isNotNull(children[i])) el.appendChild(children[i]);
+    }
+  }
+
+  return el;
+}
+
+/**
+ * Helper used in original minified build to assign methods.
+ * Equivalent to: this[name] = fn;
+ */
+function ct(obj, name, fn) {
+  obj[name] = fn;
+  return fn;
+}
+
+/**
+ * Get absolute page coordinates of an element
+ */
+function getAbsRect(el) {
+  const r = el.getBoundingClientRect();
+  return {
+    y1: Math.floor(r.top + window.pageYOffset),
+    x1: Math.floor(r.left + window.pageXOffset),
+    x2: Math.floor(r.right + window.pageXOffset),
+    y2: Math.floor(r.bottom + window.pageYOffset),
+  };
+}
+
+/**
+ * Detect near-edge side based on pointer coordinates
+ * (within about 11px tolerance as in original)
+ */
+function detectNearSide(rect, pageX, pageY) {
+  let side;
+
+  if (pageX - rect.x1 >= -1 && pageX - rect.x1 <= 11) side = "left";
+  if (rect.x2 - pageX >= -1 && rect.x2 - pageX <= 11) side = "right";
+  if (pageY - rect.y1 >= -1 && pageY - rect.y1 <= 11) side = "top";
+  if (rect.y2 - pageY >= -1 && rect.y2 - pageY <= 11) side = "bottom";
+
+  return side;
+}
+
+// -----------------------------------------------------------------------------
+// Resize columns feature
+// -----------------------------------------------------------------------------
+
+const RESIZE_CSS = {
+  resizedColumnHandle: "tc-table__resize_column",
+};
+
+class ColumnResizer {
+  /**
+   * @param {TableUI} table
+   */
+  constructor(table) {
+    this.table = table;
+
+    this.active = null;
+    this.activeIndex = 0;
+    this.startX = 0;
+    this.width = 0;
+
+    this.widthFirst = 0;
+    this.widthSecond = 0;
+
+    ct(this, "getIndex", (evt) => {
+      const handles = this.table.body.querySelectorAll(`.${RESIZE_CSS.resizedColumnHandle}`);
+      for (let i = 0; i < handles.length; i += 1) {
+        if (handles[i] === evt.target) return i;
+      }
+      return -1;
+    });
+
+    ct(this, "onDragStart", (evt) => {
+      const index = this.getIndex(evt);
+
+      this.startX = evt.pageX;
+      this.active = evt.target;
+      this.activeIndex = index;
+
+      this.width = this.table.body.offsetWidth;
+
+      const [w1, w2] = this.getWidthCols();
+      this.widthFirst = w1;
+      this.widthSecond = w2;
+
+      document.body.style.cursor = "col-resize";
+
+      if (evt.preventDefault) evt.preventDefault();
+      if (evt.stopPropagation) evt.stopPropagation();
+    });
+
+    ct(this, "onDrag", (evt) => {
+      if (this.active) this.move(evt.pageX - this.startX);
+    });
+
+    ct(this, "onDragEnd", () => {
+      this.active = null;
+      document.body.style.cursor = "auto";
+    });
+
+    ct(this, "move", (deltaX) => {
+      const [col1, col2] = this.getCols();
+
+      let w1Percent = (this.widthFirst / this.width + deltaX / this.width) * 100;
+      let w2Percent = (this.widthSecond / this.width - deltaX / this.width) * 100;
+
+      // minimum 5% each as in original
+      if (w1Percent >= 5 && w2Percent >= 5) {
+        col1.style.width = `${w1Percent}%`;
+        col2.style.width = `${w2Percent}%`;
+      }
+    });
+
+    ct(this, "getCols", () => {
+      const cols = this.table.colgroup.children;
+      const col1 = cols[this.activeIndex];
+      const col2 = cols[this.activeIndex + 1];
+      return [col1, col2];
+    });
+
+    ct(this, "parseWidth", (col) => (Number.parseFloat(col.style.width) / 100) * this.width);
+
+    ct(this, "getWidthCols", () => {
+      const [c1, c2] = this.getCols();
+      return [this.parseWidth(c1), this.parseWidth(c2)];
+    });
+
+    this.init();
+  }
+
+  init() {
+    document.addEventListener("mousemove", this.onDrag, false);
+    document.addEventListener("mouseup", this.onDragEnd, false);
+  }
+
+  /**
+   * Adds resize handle into a cell element if absent.
+   */
+  createElem(cellEl) {
+    if (!cellEl.querySelector(`.${RESIZE_CSS.resizedColumnHandle}`)) {
+      const handle = createElement("div", [RESIZE_CSS.resizedColumnHandle]);
+      handle.addEventListener("mousedown", this.onDragStart, false);
+      cellEl.appendChild(handle);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Select line (remove row/column) feature
+// -----------------------------------------------------------------------------
+
+const SELECT_LINE_CSS = {
+  selectLineCol: "tc-table__select_line_col",
+  selectLineRow: "tc-table__select_line_row",
+  trRemove: "tc-table__tr_remove",
+  tdRemove: "tc-table__td_remove",
+};
+
+class SelectLineRemover {
+  /**
+   * @param {TableUI} table
+   */
+  constructor(table) {
+    this.table = table;
+
+    ct(this, "getDirection", (evt) => (evt.target.classList.contains(SELECT_LINE_CSS.selectLineCol) ? 0 : 1));
+
+    ct(this, "getIndex", (evt) => {
+      // original matched by exact className
+      const candidates = this.table.body.querySelectorAll(`.${evt.target.className}`);
+      for (let i = 0; i < candidates.length; i += 1) {
+        if (candidates[i] === evt.target) return i;
+      }
+      return -1;
+    });
+
+    ct(this, "onMouseEnter", (evt) => {
+      if (this.getDirection(evt) === 0) {
+        // column
+        const colIndex = this.getIndex(evt);
+        for (let r = 0; r < this.table.body.rows.length; r += 1) {
+          const cell = this.table.body.rows[r].children[colIndex];
+          if (cell) cell.classList.add(SELECT_LINE_CSS.tdRemove);
+        }
+      } else {
+        // row
+        evt.target.closest("tr").classList.add(SELECT_LINE_CSS.trRemove);
+      }
+    });
+
+    ct(this, "onMouseLeave", (evt) => {
+      if (!evt.target) return;
+
+      if (this.getDirection(evt) === 0) {
+        this.table.body.querySelectorAll(`.${SELECT_LINE_CSS.tdRemove}`).forEach((n) => n.classList.remove(SELECT_LINE_CSS.tdRemove));
+      } else {
+        evt.target.closest("tr").classList.remove(SELECT_LINE_CSS.trRemove);
+      }
+    });
+
+    ct(this, "onClick", (evt) => {
+      const idx = this.getIndex(evt);
+      if (this.getDirection(evt) === 0) this.table.removeColumn(idx);
+      else this.table.removeRow(idx);
+    });
+  }
+
+  /**
+   * @param {HTMLElement} cellEl
+   * @param {0|1} direction 0=col, 1=row
+   */
+  createElem(cellEl, direction = 0) {
+    const cls = direction === 0 ? SELECT_LINE_CSS.selectLineCol : SELECT_LINE_CSS.selectLineRow;
+
+    if (!cellEl.querySelector(`.${cls}`)) {
+      const btn = createElement("div", [cls]);
+      btn.addEventListener("click", this.onClick, false);
+      btn.addEventListener("mouseenter", this.onMouseEnter, false);
+      btn.addEventListener("mouseleave", this.onMouseLeave, false);
+      cellEl.appendChild(btn);
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Add row/column feature
+// -----------------------------------------------------------------------------
+
+const ADD_LINE_CSS = {
+  addColumn: "tc-table__add_column",
+  addRow: "tc-table__add_row",
+};
+
+class AddLineCreator {
+  /**
+   * @param {TableUI} table
+   */
+  constructor(table) {
+    this.table = table;
+
+    ct(this, "createElem", (cellEl, direction = 0) => {
+      const cls = [ADD_LINE_CSS.addColumn, ADD_LINE_CSS.addRow][direction];
+
+      if (!cellEl.querySelector(`.${cls}`)) {
+        const clickable = createElement("div");
+        clickable.addEventListener("click", this.onClick);
+
+        // structure like original: <div class="..."><div></div><div></div></div>
+        const wrapper = createElement("div", [cls], null, [clickable, createElement("div")]);
+        cellEl.appendChild(wrapper);
+        return wrapper;
+      }
+    });
+
+    ct(this, "getDirection", (el) => (el.classList.contains(ADD_LINE_CSS.addColumn) ? 0 : 1));
+
+    ct(this, "getIndex", (el) => {
+      const nodes = this.table.body.querySelectorAll(`.${el.className}`);
+      for (let i = 0; i < nodes.length; i += 1) {
+        if (nodes[i] === el) return i;
+      }
+      return -1;
+    });
+
+    ct(this, "onClick", (evt) => {
+      const container = evt.target.parentNode; // parent of clickable inner div
+      const direction = this.getDirection(container);
+      const index = this.getIndex(container);
+
+      if (direction === 0) this.table.addColumn(index);
+      else this.table.addRow(index);
+    });
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Image upload feature
+// -----------------------------------------------------------------------------
+
+const SVG_IMAGE_ADD = `<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19 5V19H5V5H19ZM19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM14.14 11.86L11.14 15.73L9 13.14L6 17H18L14.14 11.86Z" />
+</svg>`;
+
+const SVG_IMAGE_DELETE = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 5V16.17L21 18.17V5C21 3.9 20.1 3 19 3H5.83L7.83 5H19ZM2.81 2.81L1.39 4.22L3 5.83V19C3 20.1 3.9 21 5 21H18.17L19.78 22.61L21.19 21.2L2.81 2.81ZM5 19V7.83L12.07 14.9L11.25 16L9 13L6 17H14.17L16.17 19H5Z"/>
+</svg>`;
+
+const DEFAULT_UPLOAD_ENDPOINT = "/upload_image";
+
+const IMAGE_CSS = {
+  uploadButton: "tc-table__image_upload_button",
+  uploadButtonVisible: "tc-table__image_upload_button_visible",
+  image: "tc-table__image",
+  wrapper: "tc-table__wrapper_image",
+  buttonDelete: "tc-table__wrapper_image_button",
+};
+
+class ImageUploader {
+  /**
+   * @param {TableUI} table
+   */
+  constructor(table) {
+    this.table = table;
+
+    this.buttonText = "Добавить изображение"; // original had broken encoding
+    this.visible = false;
+
+    this.cell = null;     // selected cell (td)
+    this.Button = null;   // label element
+    this.image = null;    // File
+
+    ct(this, "createElem", (container) => {
+      if (!container.querySelector(`.${IMAGE_CSS.uploadButton}`)) {
+        const fileInput = createElement("input", [], { type: "file" });
+        const icon = createElement("span");
+        icon.innerHTML = SVG_IMAGE_ADD;
+
+        this.Button = createElement(
+          "label",
+          [IMAGE_CSS.uploadButton],
+          { title: this.buttonText },
+          [fileInput, icon]
+        );
+
+        fileInput.addEventListener("change", this.onChange);
+
+        container.appendChild(this.Button);
+        return this.Button;
+      }
+    });
+
+    ct(this, "onToggle", (isVisible) => {
+      this.visible = isVisible;
+
+      if (isVisible) {
+        this.Button.classList.add(IMAGE_CSS.uploadButtonVisible);
+
+        if (this.table._selectedCell) {
+          this.cell = this.table._selectedCell;
+
+          // position button under the selected cell
+          this.Button.style.top = `${this.cell.offsetTop + this.cell.offsetHeight}px`;
+          this.Button.style.left = `${this.cell.offsetLeft}px`;
+        }
+      } else {
+        setTimeout(() => {
+          if (!this.table._selectedCell) {
+            this.Button.classList.remove(IMAGE_CSS.uploadButtonVisible);
+          }
+        }, 200);
+      }
+    });
+
+    ct(this, "createImage", (cell, src) => {
+      // original expects: td -> div.tc-table__area -> (contentEditable div)
+      const [editable] = cell.children[0].children;
+
+      const img = createElement("img", [IMAGE_CSS.image], { src });
+
+      if (this.table.readOnly) {
+        editable.replaceWith(img);
+        return;
+      }
+
+      const deleteIcon = createElement("div");
+      deleteIcon.innerHTML = SVG_IMAGE_DELETE;
+
+      const deleteBtn = createElement("div", [IMAGE_CSS.buttonDelete], null, [deleteIcon]);
+
+      const wrapper = createElement("div", [IMAGE_CSS.wrapper], null, [img, deleteBtn]);
+      deleteBtn.addEventListener("click", this.removeImage);
+
+      editable.replaceWith(wrapper);
+    });
+
+    ct(this, "removeImage", (evt) => {
+      evt.target.closest(`.${IMAGE_CSS.wrapper}`).replaceWith(this.table._createContentEditableArea());
+    });
+
+    ct(this, "onChange", async (evt) => {
+      this.image = evt.target.files[0];
+      const { url } = await this.onUploadImage();
+      if (url) this.createImage(this.cell, url);
+    });
+
+    ct(this, "onUploadImage", async () => {
+      const data = new FormData();
+      data.append("upfile", this.image);
+
+      const res = await fetch(DEFAULT_UPLOAD_ENDPOINT, { method: "POST", body: data });
+      return res.json();
+    });
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Table UI (DOM + interactions)
+// -----------------------------------------------------------------------------
+
+const TABLE_CSS = {
+  table: "tc-table",
+  inputField: "tc-table__inp",
+  cell: "tc-table__cell",
+  container: "tc-table__container",
+  containerReadOnly: "tc-table__container_readonly",
+  wrapper: "tc-table__wrap",
+  area: "tc-table__area",
+
+  addColumn: "tc-table__add_column",
+  addRow: "tc-table__add_row",
+  addColumnButton: "tc-table__add_column_button",
+  addRowButton: "tc-table__add_row_button",
+};
+
+class TableUI {
+  /**
+   * @param {boolean} readOnly
+   */
+  constructor(readOnly) {
+    this.readOnly = readOnly;
+
+    this._numberOfColumns = 0;
+    this._numberOfRows = 0;
+
+    this.resize = new ColumnResizer(this);
+    this.selectLine = new SelectLineRemover(this);
+    this.createLine = new AddLineCreator(this);
+    this.imageUpload = new ImageUploader(this);
+
+    this._element = this._createTableWrapper();
+    this._table = this._element.querySelector("table");
+    this.colgroup = this._table.querySelector("colgroup");
+
+    this._selectedCell = null;
+
+    if (!this.readOnly) this._hangEvents();
+  }
+
+  // ----- layout helpers -----
+
+  columnSizeReCalc() {
+    const cols = this.colgroup.children;
+    for (let i = 0; i < cols.length; i += 1) {
+      cols[i].style.width = `${100 / cols.length}%`;
+    }
+  }
+
+  insertCol(index) {
+    this.colgroup.insertBefore(createElement("col", [], { span: 1 }), this.colgroup.children[index]);
+  }
+
+  removeCol(index) {
+    // original did: this.body.querySelector('colgroup').children[t].remove();
+    this.body.querySelector("colgroup").children[index].remove();
+  }
+
+  // ----- public API -----
+
+  addColumn(index = -1) {
+    this._numberOfColumns++;
+
+    const rows = this._table.rows;
+    if (index === 0) this.removeButtons(1);
+
+    this.insertCol(index);
+
+    for (let r = 0; r < rows.length; r++) {
+      const cell = rows[r].insertCell(index);
+      this._fillCell(cell);
+    }
+
+    if (!this.readOnly) {
+      this.columnSizeReCalc();
+      this.updateButtons();
+    }
+  }
+
+  removeColumn(index) {
+    this._numberOfColumns--;
+
+    for (let r = 0; r < this._table.rows.length; r += 1) {
+      this._table.rows[r].deleteCell(index);
+    }
+
+    if (!this.readOnly) {
+      this.removeCol(index);
+      this.columnSizeReCalc();
+      this.updateButtons();
+    }
+  }
+
+  addRow(index = -1) {
+    this._numberOfRows++;
+
+    const tr = this._table.insertRow(index);
+    if (index === 0) this.removeButtons(0);
+
+    this._fillRow(tr);
+    this.updateButtons();
+
+    return tr;
+  }
+
+  removeRow(index) {
+    this._numberOfRows--;
+    this._table.rows[index].remove();
+    this.updateButtons();
+  }
+
+  get htmlElement() {
+    return this._element;
+  }
+
+  get body() {
+    return this._table;
+  }
+
+  get selectedCell() {
+    return this._selectedCell;
+  }
+
+  // (kept as in original: getter exists but empty)
+  get withBorder() {}
+
+  // ----- buttons (resizer / add / remove) management -----
+
+  fillButtons(cellEl, colIndex, rowIndex) {
+    // rowIndex === 0 => header row style behavior in original
+    if (rowIndex === 0) {
+      this.createLine.createElem(cellEl);
+      if (colIndex !== 0) this.resize.createElem(cellEl);
+    }
+
+    // add select line controls on first row/first col zones
+    if (colIndex === 0 || rowIndex === 0) {
+      this.selectLine.createElem(cellEl, +(colIndex === 0));
+      if (colIndex === 0 && rowIndex === 0) this.selectLine.createElem(cellEl);
+    }
+
+    // row add control on first column cells
+    if (colIndex === 0) {
+      this.createLine.createElem(cellEl, 1);
+    }
+  }
+
+  updateButtons() {
+    for (let r = 0; r < this._table.rows.length; r += 1) {
+      const row = this._table.rows[r];
+      for (let c = 0; c < row.children.length; c += 1) {
+        const cell = row.children[c];
+        this.fillButtons(cell, c, r);
+      }
+    }
+  }
+
+  /**
+   * @param {0|1} axis 0=columns UI, 1=rows UI (as in original)
+   */
+  removeButtons(axis = 0) {
+    const groups = [
+      [TABLE_CSS.addColumn, SELECT_LINE_CSS.selectLineCol],
+      [TABLE_CSS.addRow, SELECT_LINE_CSS.selectLineRow],
+    ][axis];
+
+    groups.forEach((cls) => {
+      const nodes = this._table.querySelectorAll(`.${cls}`);
+      for (let i = 0; i < nodes.length; i += 1) nodes[i].remove();
+    });
+  }
+
+  // ----- DOM build -----
+
+  _createTableWrapper() {
+    const containerClass = this.readOnly ? TABLE_CSS.containerReadOnly : TABLE_CSS.container;
+
+    const container = createElement("div", [containerClass], null, [
+      createElement("div", [TABLE_CSS.wrapper], null, [
+        createElement("table", [TABLE_CSS.table], null, [
+          createElement("colgroup"),
+          createElement("tbody"),
+        ]),
+      ]),
+    ]);
+
+    if (!this.readOnly) {
+      const addRowBtn = createElement("div", [TABLE_CSS.addRowButton]);
+      const addColBtn = createElement("div", [TABLE_CSS.addColumnButton]);
+
+      // NOTE: In original these were swapped: addRowBtn click -> addColumn, addColBtn -> addRow
+      // Keeping original behavior:
+      addRowBtn.addEventListener("click", () => this.addColumn(this._numberOfColumns), true);
+      addColBtn.addEventListener("click", () => this.addRow(this._numberOfRows), true);
+
+      container.appendChild(addRowBtn);
+      container.appendChild(addColBtn);
+    }
+
+    return container;
+  }
+
+  _createContentEditableArea() {
+    return createElement("div", [TABLE_CSS.inputField], { contenteditable: !this.readOnly });
+  }
+
+  _fillCell(td) {
+    td.classList.add(TABLE_CSS.cell);
+    const editable = this._createContentEditableArea();
+    td.appendChild(createElement("div", [TABLE_CSS.area], null, [editable]));
+  }
+
+  _fillRow(tr) {
+    for (let c = 0; c < this._numberOfColumns; c++) {
+      const td = tr.insertCell();
+      this._fillCell(td);
+    }
+  }
+
+  // ----- events -----
+
+  _hangEvents() {
+    this._table.addEventListener(
+      "focus",
+      (evt) => this._focusEditField(evt),
+      true
+    );
+
+    this._table.addEventListener(
+      "blur",
+      (evt) => this._blurEditField(evt),
+      true
+    );
+
+    this._table.addEventListener("keydown", (evt) => this._pressedEnterInEditField(evt));
+    this._table.addEventListener("click", (evt) => this._clickedOnCell(evt));
+
+    this._table.addEventListener(
+      "mouseover",
+      (evt) => {
+        this._mouseEnterInDetectArea(evt);
+        evt.stopPropagation();
+      },
+      true
+    );
+  }
+
+  _focusEditField(evt) {
+    if (evt.target.classList.contains(TABLE_CSS.inputField)) {
+      this._selectedCell = evt.target.closest("." + TABLE_CSS.cell);
+      this.imageUpload.onToggle(true);
+    }
+  }
+
+  _blurEditField(evt) {
+    if (evt.target.classList.contains(TABLE_CSS.inputField)) {
+      this._selectedCell = null;
+      this.imageUpload.onToggle(false);
+    }
+  }
+
+  _pressedEnterInEditField(evt) {
+    if (evt.target.classList.contains(TABLE_CSS.inputField) && evt.keyCode === 13 && !evt.shiftKey) {
+      evt.preventDefault();
+    }
+  }
+
+  _clickedOnCell(evt) {
+    // ignore clicks on delete button wrapper
+    if (evt.target.classList.contains(IMAGE_CSS.buttonDelete) === false) {
+      if (!evt.target.classList.contains(TABLE_CSS.cell)) return;
+      evt.target.querySelector("." + TABLE_CSS.inputField).focus();
+    }
+  }
+
+  _mouseEnterInDetectArea(evt) {
+    if (!evt.target.classList.contains(TABLE_CSS.area)) return;
+
+    const rect = getAbsRect(evt.target.closest("TD"));
+    const side = detectNearSide(rect, evt.pageX, evt.pageY);
+
+    evt.target.dispatchEvent(
+      new CustomEvent("mouseInActivatingArea", {
+        detail: { side },
+        bubbles: true,
+      })
+    );
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Table constructor used by the Editor.js tool wrapper
+// -----------------------------------------------------------------------------
+
+class TableConstructor {
+  /**
+   * @param {{content?: any[][], settings?: any}} data
+   * @param {{rows: string|number, cols: string|number}} config
+   * @param {any} api
+   * @param {boolean} readOnly
+   */
+  constructor(data, config, api, readOnly) {
+    this.readOnly = readOnly;
+
+    this._CSS = {
+      editor: "tc-editor",
+      inputField: "tc-table__inp",
+      withBorder: "tc-table__with_border",
+    };
+
+    try {
+      this._table = new TableUI(readOnly);
+      const { rows, cols } = this._resizeTable(data, config);
+      this._fillTable(data, { rows, cols });
+    } catch (e) {
+      console.log(e);
+    }
+
+    // container: <div class="tc-editor {api.styles.block}"> {tableUI} </div>
+    this._container = createElement("div", [this._CSS.editor, api.styles.block], null, [
+      this._table.htmlElement,
+    ]);
+
+    // add image upload floating button
+    this._table.imageUpload.createElem(this._container);
+
+    this._hoveredCell = null;
+    this._hoveredCellSide = null;
+
+    if (!this.readOnly) this._hangEvents();
+  }
+
+  get htmlElement() {
+    return this._container;
+  }
+
+  _fillTable(data, tableSize) {
+    if (data.content !== void 0) {
+      for (let r = 0; r < tableSize.rows && r < data.content.length; r++) {
+        for (let c = 0; c < tableSize.cols && c < data.content[r].length; c++) {
+          const cellData = data.content[r][c];
+          const td = this._table.body.rows[r].cells[c];
+
+          if (typeof cellData === "string") {
+            const editable = td.querySelector("." + this._CSS.inputField);
+            editable.innerHTML = cellData;
+          } else {
+            if ((cellData?.type) === "image") {
+              this._table.imageUpload.createImage(td, cellData.src);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  _resizeTable(data, config) {
+    const hasContentArray = Array.isArray(data.content);
+    const contentRows = hasContentArray ? data.content.length : false;
+    const contentRowsCount = hasContentArray ? data.content.length : void 0;
+    const contentColsCount = contentRows ? data.content[0].length : void 0;
+
+    const rowsCfg = Number.parseInt(config.rows);
+    const colsCfg = Number.parseInt(config.cols);
+
+    const rowsFromCfg = !isNaN(rowsCfg) && rowsCfg > 0 ? rowsCfg : void 0;
+    const colsFromCfg = !isNaN(colsCfg) && colsCfg > 0 ? colsCfg : void 0;
+
+    const settings = data.settings;
+
+    // defaults from original
+    const defaultRows = 3;
+    const defaultCols = 2;
+
+    const rows = contentRowsCount || rowsFromCfg || defaultRows;
+    const cols = contentColsCount || colsFromCfg || defaultCols;
+
+    for (let r = 0; r < rows; r++) this._table.addRow(r);
+    for (let c = 0; c < cols; c++) this._table.addColumn(c);
+
+    // restore col widths if exist (values are ratios)
+    if (settings && settings.sizes) {
+      settings.sizes.forEach((ratio, idx) => {
+        if (this._table.colgroup.children[idx]) {
+          this._table.colgroup.children[idx].style.width = `${ratio * 100}%`;
+        }
+      });
+    }
+
+    // border toggle (default true if undefined)
+    const withBorder =
+      (settings?.withBorder) === void 0 ? true : settings?.withBorder;
+
+    this._table.htmlElement.classList.toggle(this._CSS.withBorder, withBorder);
+
+    return { rows, cols };
+  }
+
+  _hangEvents() {
+    this._container.addEventListener("keydown", (evt) => this._containerKeydown(evt));
+  }
+
+  _containerKeydown(evt) {
+    if (evt.keyCode === 13) this._containerEnterPressed(evt);
+  }
+
+  _getHoveredSideOfContainer() {
+    return this._hoveredCell === this._container ? (this._isBottomOrRight() ? 0 : -1) : 1;
+  }
+
+  _isBottomOrRight() {
+    return this._hoveredCellSide === "bottom" || this._hoveredCellSide === "right";
+  }
+
+  _containerEnterPressed(evt) {
+    if (!(this._table.selectedCell !== null && !evt.shiftKey)) return;
+
+    const tr = this._table.selectedCell.closest("TR");
+    let insertIndex = this._getHoveredSideOfContainer();
+
+    if (insertIndex === 1) insertIndex = tr.sectionRowIndex + 1;
+
+    this._table.addRow(insertIndex).cells[0].click();
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Editor.js tool wrapper class (Table tool)
+// -----------------------------------------------------------------------------
+
+const TOOLBOX_ICON = `<svg width="18" height="14"><path d="M2.833 8v1.95a1.7 1.7 0 0 0 1.7 1.7h3.45V8h-5.15zm0-2h5.15V2.35h-3.45a1.7 1.7 0 0 0-1.7 1.7V6zm12.3 2h-5.15v3.65h3.45a1.7 1.7 0 0 0 1.7-1.7V8zm0-2V4.05a1.7 1.7 0 0 0-1.7-1.7h-3.45V6h5.15zM4.533.1h8.9a3.95 3.95 0 0 1 3.95 3.95v5.9a3.95 3.95 0 0 1-3.95 3.95h-8.9a3.95 3.95 0 0 1-3.95-3.95v-5.9A3.95 3.95 0 0 1 4.533.1z"/></svg>`;
+
+const BORDER_ICON = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2V8V10V16V18H2H8H10H16H18V16V10V8V2V0H16H10H8H2H0V2ZM8 2L2 2V8H8L8 2ZM8 10H2V16H8L8 10ZM10 16V10H16V16H10ZM10 8V2L16 2V8H10Z"/>
+</svg>`;
+
+class TableTool {
+  /**
+   * Editor.js Tool constructor signature
+   * @param {{data:any, config:any, api:any, readOnly:boolean}} param0
+   */
+  constructor({ data, config, api, readOnly }) {
+    this.api = api;
+    this.readOnly = readOnly;
+
+    this._tableConstructor = new TableConstructor(data, config, api, readOnly);
+
+    this._CSS = {
+      input: "tc-table__inp",
+      settingsButton: this.api.styles.settingsButton,
+      settingsButtonActive: this.api.styles.settingsButtonActive,
+    };
+
+    this.borderActive = data.settings?.withBorder;
+    this.toggleBorderButton = null;
+
+    ct(this, "toggleBorder", () => {
+      this.borderActive = !this.borderActive;
+      this.toggleBorderButton.classList.toggle(this._CSS.settingsButtonActive, this.borderActive);
+      this._tableConstructor._table._element.classList.toggle(
+        this._tableConstructor._CSS.withBorder,
+        this.borderActive
+      );
+    });
+  }
+
+  static get isReadOnlySupported() {
+    return true;
+  }
+
+  static get enableLineBreaks() {
+    return true;
+  }
+
+  static get sanitize() {
+    return { br: true, mark: true };
+  }
+
+  static get toolbox() {
+    return { icon: TOOLBOX_ICON, title: "Table" };
+  }
+
+  render() {
+    return this._tableConstructor.htmlElement;
+  }
+
+  /**
+   * Editor.js save(output)
+   */
+  save(container) {
+    const tableEl = container.querySelector("table");
+
+    const content = [];
+    const rows = tableEl.rows;
+
+    const colSizeRatios = [];
+    const tableWidth = tableEl.offsetWidth;
+
+    for (let r = 0; r < rows.length; r++) {
+      const row = rows[r];
+      const tds = Array.from(row.cells);
+
+      const editableAreas = tds.map((td) => td.querySelector("." + this._CSS.input));
+      const images = tds.map((td) => td.querySelector("." + IMAGE_CSS.image));
+
+      const rowCells = tds.map((td, idx) => {
+        if (editableAreas[idx]) {
+          return { type: "input", text: editableAreas[idx].innerHTML };
+        }
+        if (images[idx]) {
+          return { type: "image", src: images[idx].getAttribute("src") };
+        }
+        return undefined;
+      });
+
+      if (r === 0) {
+        tds.forEach((td) => colSizeRatios.push(td.offsetWidth / tableWidth));
+      }
+
+      content.push(
+        rowCells.map((cell) => {
+          if (!cell) return "";
+
+          switch (cell.type) {
+          case "input":
+            return cell.text;
+          case "image":
+            return cell;
+          default:
+            return "";
+          }
+        })
+      );
+    }
+
+    return {
+      settings: {
+        sizes: colSizeRatios,
+        withBorder: this.borderActive === void 0 ? true : this.borderActive,
+      },
+      content,
+    };
+  }
+
+  _isEmpty(container) {
+    return !container.textContent.trim();
+  }
+
+  renderSettings() {
+    const wrapper = document.createElement("DIV");
+    const btn = document.createElement("SPAN");
+
+    btn.classList.add(this._CSS.settingsButton);
+    if (this.borderActive) btn.classList.add(this._CSS.settingsButtonActive);
+
+    btn.innerHTML = BORDER_ICON;
+    btn.dataset.active = this.borderActive;
+
+    btn.addEventListener("click", () => this.toggleBorder());
+
+    wrapper.appendChild(btn);
+    this.toggleBorderButton = btn;
+
+    return wrapper;
+  }
+}
+
+// If you want it as default export (optional):
+export default TableTool;