@kopexa/tiptap 1.0.0 → 2.0.0

package/dist/chunk-AC22DSDA.mjs

@@ -1,540 +0,0 @@
-"use client";
-import {
-  getColStyleDeclaration
-} from "./chunk-LKOQAQPZ.mjs";
-import {
-  icons
-} from "./chunk-HYDS6H67.mjs";
-import {
-  __publicField
-} from "./chunk-WKV76XOR.mjs";
-
-// src/extensions/table/table/table-view.tsx
-import {
-  autoUpdate,
-  computePosition,
-  flip,
-  offset,
-  shift
-} from "@floating-ui/dom";
-import {
-  CellSelection,
-  TableMap,
-  updateColumnsOnResize
-} from "@tiptap/pm/tables";
-import { h } from "jsx-dom-cjs";
-var Popover = class {
-  constructor(content, opts) {
-    __publicField(this, "reference");
-    __publicField(this, "floating");
-    __publicField(this, "cleanupAutoUpdate", null);
-    __publicField(this, "onDocClick", (e) => {
-      if (!this.floating.contains(e.target) && !this.reference.contains(e.target)) {
-        this.hide();
-      }
-    });
-    __publicField(this, "onEsc", (e) => {
-      if (e.key === "Escape") this.hide();
-    });
-    __publicField(this, "_placement");
-    __publicField(this, "_offsetPx");
-    // biome-ignore lint/correctness/noUnusedPrivateClassMembers: backwards. will be used later
-    __publicField(this, "_interactive");
-    var _a, _b, _c, _d;
-    this.reference = opts.reference;
-    this.floating = document.createElement("div");
-    this.floating.setAttribute("role", "dialog");
-    this.floating.setAttribute("aria-modal", "false");
-    this.floating.style.position = "fixed";
-    this.floating.style.zIndex = "9999";
-    this.floating.style.display = "none";
-    this.floating.className = "rounded-md border bg-background px-2 py-2.5 text-xs shadow-sm min-w-[12rem] whitespace-nowrap";
-    this.floating.appendChild(content);
-    const host = (_a = opts.container) != null ? _a : document.body;
-    host.appendChild(this.floating);
-    this._placement = (_b = opts.placement) != null ? _b : "right";
-    this._offsetPx = (_c = opts.offsetPx) != null ? _c : 6;
-    this._interactive = (_d = opts.interactive) != null ? _d : true;
-  }
-  async _updatePosition() {
-    const { x, y } = await computePosition(this.reference, this.floating, {
-      placement: this._placement,
-      middleware: [offset(this._offsetPx), flip(), shift({ padding: 8 })]
-    });
-    Object.assign(this.floating.style, { left: `${x}px`, top: `${y}px` });
-  }
-  show() {
-    if (this.floating.style.display !== "none") return;
-    this.floating.style.display = "block";
-    this.cleanupAutoUpdate = autoUpdate(
-      this.reference,
-      this.floating,
-      () => this._updatePosition()
-    );
-    document.addEventListener("keydown", this.onEsc, { passive: true });
-    document.addEventListener("mousedown", this.onDocClick, { capture: true });
-    requestAnimationFrame(() => this._updatePosition());
-  }
-  hide() {
-    var _a;
-    if (this.floating.style.display === "none") return;
-    this.floating.style.display = "none";
-    (_a = this.cleanupAutoUpdate) == null ? void 0 : _a.call(this);
-    this.cleanupAutoUpdate = null;
-    document.removeEventListener("keydown", this.onEsc);
-    document.removeEventListener("mousedown", this.onDocClick, {
-      capture: true
-    });
-  }
-  toggle() {
-    if (this.floating.style.display === "none") this.show();
-    else this.hide();
-  }
-  destroy() {
-    this.hide();
-    this.floating.remove();
-  }
-  get el() {
-    return this.floating;
-  }
-};
-function updateColumns(node, colgroup, table, cellMinWidth, overrideCol, overrideValue) {
-  var _a;
-  let totalWidth = 0;
-  let fixedWidth = true;
-  let nextDOM = colgroup.firstChild;
-  const row = node.firstChild;
-  if (row !== null) {
-    for (let i = 0, col = 0; i < row.childCount; i += 1) {
-      const { colspan, colwidth } = row.child(i).attrs;
-      for (let j = 0; j < colspan; j += 1, col += 1) {
-        const hasWidth = overrideCol === col ? overrideValue : colwidth == null ? void 0 : colwidth[j];
-        const cssWidth = hasWidth ? `${hasWidth}px` : "";
-        totalWidth += hasWidth || cellMinWidth;
-        if (!hasWidth) fixedWidth = false;
-        if (!nextDOM) {
-          const colElement = document.createElement("col");
-          const [key, val] = getColStyleDeclaration(cellMinWidth, hasWidth);
-          colElement.style.setProperty(key, val);
-          colgroup.appendChild(colElement);
-        } else {
-          const colEl = nextDOM;
-          if (colEl.style.width !== cssWidth) {
-            const [key, val] = getColStyleDeclaration(cellMinWidth, hasWidth);
-            colEl.style.setProperty(key, val);
-          }
-          nextDOM = nextDOM.nextSibling;
-        }
-      }
-    }
-  }
-  while (nextDOM) {
-    const after = nextDOM.nextSibling;
-    (_a = nextDOM.parentNode) == null ? void 0 : _a.removeChild(nextDOM);
-    nextDOM = after;
-  }
-  if (fixedWidth) {
-    table.style.width = `${totalWidth}px`;
-    table.style.minWidth = "";
-  } else {
-    table.style.width = "";
-    table.style.minWidth = `${totalWidth}px`;
-  }
-}
-function setCellsBackgroundColor(editor, color) {
-  return editor.chain().focus().updateAttributes("tableCell", {
-    background: color.backgroundColor,
-    textColor: color.textColor
-  }).run();
-}
-function setTableRowBackgroundColor(editor, color) {
-  const { state, dispatch } = editor.view;
-  const { selection } = state;
-  if (!(selection instanceof CellSelection)) return false;
-  const hoveredCell = selection.$headCell || selection.$anchorCell;
-  let rowDepth = hoveredCell.depth;
-  while (rowDepth > 0 && hoveredCell.node(rowDepth).type.name !== "tableRow") {
-    rowDepth--;
-  }
-  if (hoveredCell.node(rowDepth).type.name !== "tableRow") return false;
-  const rowStartPos = hoveredCell.start(rowDepth);
-  const tr = state.tr.setNodeMarkup(rowStartPos - 1, null, {
-    ...hoveredCell.node(rowDepth).attrs,
-    background: color.backgroundColor,
-    textColor: color.textColor
-  });
-  dispatch(tr);
-  return true;
-}
-var columnsToolboxItems = [
-  {
-    label: "Toggle column header",
-    icon: icons.toggleColumnHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderColumn().run()
-  },
-  {
-    label: "Add column before",
-    icon: icons.insertLeftTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnBefore().run()
-  },
-  {
-    label: "Add column after",
-    icon: icons.insertRightTableIcon,
-    action: ({ editor }) => editor.chain().focus().addColumnAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete column",
-    icon: icons.deleteColumn,
-    action: ({ editor }) => editor.chain().focus().deleteColumn().run()
-  }
-];
-var rowsToolboxItems = [
-  {
-    label: "Toggle row header",
-    icon: icons.toggleRowHeader,
-    action: ({ editor }) => editor.chain().focus().toggleHeaderRow().run()
-  },
-  {
-    label: "Add row above",
-    icon: icons.insertTopTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowBefore().run()
-  },
-  {
-    label: "Add row below",
-    icon: icons.insertBottomTableIcon,
-    action: ({ editor }) => editor.chain().focus().addRowAfter().run()
-  },
-  { label: "Pick color", icon: "", action: () => {
-  } },
-  {
-    label: "Delete row",
-    icon: icons.deleteRow,
-    action: ({ editor }) => editor.chain().focus().deleteRow().run()
-  }
-];
-function buildToolboxContent({
-  items,
-  onClickItem,
-  onSelectColor,
-  colors
-}) {
-  return h(
-    "div",
-    { className: "space-y-2" },
-    items.map((item) => {
-      if (item.label === "Pick color") {
-        return h("div", { className: "flex flex-col" }, [
-          h("hr", { className: "!my-2 border" }),
-          h("div", { className: "text-foreground text-sm" }, item.label),
-          h(
-            "div",
-            { className: "grid grid-cols-6 gap-x-1 gap-y-2.5 mt-2" },
-            Object.entries(colors).map(
-              ([_, colorValue]) => {
-                var _a;
-                return h("button", {
-                  // @ts-expect-error JSX
-                  type: "button",
-                  className: "grid place-items-center size-6 rounded outline-none ring-offset-2 focus-visible:ring",
-                  style: `background-color:${colorValue.backgroundColor};color:${colorValue.textColor || "inherit"};`,
-                  innerHTML: (_a = colorValue.icon) != null ? _a : `<span class="text-md" style="color:${colorValue.textColor || "inherit"}">A</span>`,
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    onSelectColor(colorValue);
-                  }
-                });
-              }
-            )
-          ),
-          h("hr", { className: "!my-2 border" })
-        ]);
-      }
-      return h(
-        "button",
-        {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "w-full flex items-center gap-2 px-1 py-1.5 bg-background hover:bg-muted text-sm text-foreground rounded",
-          onClick: (e) => {
-            e.stopPropagation();
-            onClickItem(item);
-          }
-        },
-        [
-          h("span", { className: "h-3 w-3 shrink-0", innerHTML: item.icon }),
-          h("div", { className: "label" }, item.label)
-        ]
-      );
-    })
-  );
-}
-function createToolbox({
-  triggerButton,
-  items,
-  onSelectColor,
-  onClickItem,
-  colors,
-  appendTo
-}) {
-  if (!triggerButton) {
-    return null;
-  }
-  const content = buildToolboxContent({
-    items,
-    onClickItem,
-    onSelectColor,
-    colors
-  });
-  const pop = new Popover(content, {
-    reference: triggerButton,
-    container: appendTo != null ? appendTo : void 0,
-    placement: "right",
-    offsetPx: 6,
-    interactive: true
-  });
-  const onTrigger = (e) => {
-    e.stopPropagation();
-    pop.toggle();
-  };
-  triggerButton.addEventListener("click", onTrigger);
-  return {
-    show: () => pop.show(),
-    hide: () => pop.hide(),
-    destroy: () => {
-      pop.destroy();
-      triggerButton.removeEventListener("click", onTrigger);
-    }
-  };
-}
-var TableView = class {
-  constructor(node, cellMinWidth, decorations, editor, getPos) {
-    __publicField(this, "node");
-    __publicField(this, "cellMinWidth");
-    __publicField(this, "decorations");
-    __publicField(this, "editor");
-    __publicField(this, "getPos");
-    __publicField(this, "hoveredCell", null);
-    __publicField(this, "map");
-    __publicField(this, "root");
-    __publicField(this, "table");
-    __publicField(this, "colgroup");
-    __publicField(this, "tbody");
-    __publicField(this, "rowsControl");
-    __publicField(this, "columnsControl");
-    __publicField(this, "columnsToolbox");
-    __publicField(this, "rowsToolbox");
-    __publicField(this, "controls");
-    var _a, _b, _c, _d;
-    this.node = node;
-    this.cellMinWidth = cellMinWidth;
-    this.decorations = decorations.slice();
-    this.editor = editor;
-    this.getPos = getPos;
-    this.hoveredCell = null;
-    this.map = TableMap.get(node);
-    if (editor.isEditable) {
-      this.rowsControl = h(
-        "div",
-        { className: "rows-control" },
-        h("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "rows-control-div",
-          onClick: () => this.selectRow(),
-          "aria-label": "Row actions"
-        })
-      );
-      this.columnsControl = h(
-        "div",
-        { className: "columns-control" },
-        h("button", {
-          // @ts-expect-error JSX
-          type: "button",
-          className: "columns-control-div",
-          onClick: () => this.selectColumn(),
-          "aria-label": "Column actions"
-        })
-      );
-      this.controls = h(
-        "div",
-        { className: "table-controls", contentEditable: "false" },
-        this.rowsControl,
-        this.columnsControl
-      );
-      const palette = {
-        Blue: { backgroundColor: "#D9E4FF", textColor: "#171717" },
-        Orange: { backgroundColor: "#FFEDD5", textColor: "#171717" },
-        Grey: { backgroundColor: "#F1F1F1", textColor: "#171717" },
-        Yellow: { backgroundColor: "#FEF3C7", textColor: "#171717" },
-        Green: { backgroundColor: "#DCFCE7", textColor: "#171717" },
-        Red: { backgroundColor: "#FFDDDD", textColor: "#171717" },
-        Pink: { backgroundColor: "#FFE8FA", textColor: "#171717" },
-        Purple: { backgroundColor: "#E8DAFB", textColor: "#171717" },
-        None: {
-          backgroundColor: "transparent",
-          textColor: "inherit",
-          icon: `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ban"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>`
-        }
-      };
-      this.columnsToolbox = createToolbox({
-        triggerButton: (_a = this.columnsControl) == null ? void 0 : _a.querySelector(
-          ".columns-control-div"
-        ),
-        items: columnsToolboxItems,
-        colors: palette,
-        appendTo: (_b = this.controls) != null ? _b : null,
-        onSelectColor: (color) => setCellsBackgroundColor(this.editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.columnsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.columnsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
-      this.rowsToolbox = createToolbox({
-        triggerButton: (_c = this.rowsControl) == null ? void 0 : _c.querySelector(
-          ".rows-control-div"
-        ),
-        items: rowsToolboxItems,
-        colors: palette,
-        appendTo: (_d = this.controls) != null ? _d : null,
-        onSelectColor: (color) => setTableRowBackgroundColor(editor, color),
-        onClickItem: (item) => {
-          var _a2, _b2;
-          item.action({
-            editor: this.editor,
-            triggerButton: (_a2 = this.rowsControl) == null ? void 0 : _a2.firstElementChild,
-            controlsContainer: this.controls
-          });
-          (_b2 = this.rowsToolbox) == null ? void 0 : _b2.hide();
-        }
-      });
-    }
-    this.colgroup = h(
-      "colgroup",
-      null,
-      Array.from({ length: this.map.width }, () => 1).map(() => h("col"))
-    );
-    this.tbody = h("tbody");
-    this.table = h(
-      "table",
-      null,
-      this.colgroup,
-      this.tbody
-    );
-    this.root = h(
-      "div",
-      {
-        className: "table-wrapper horizontal-scrollbar scrollbar-md controls--disabled"
-      },
-      this.controls,
-      this.table
-    );
-    this.render();
-  }
-  get dom() {
-    return this.root;
-  }
-  get contentDOM() {
-    return this.tbody;
-  }
-  update(node, decorations) {
-    if (node.type !== this.node.type) return false;
-    this.node = node;
-    this.decorations = [...decorations];
-    this.map = TableMap.get(this.node);
-    if (this.editor.isEditable) this.updateControls();
-    this.render();
-    return true;
-  }
-  render() {
-    if (this.colgroup.children.length !== this.map.width) {
-      const cols = Array.from({ length: this.map.width }, () => 1).map(
-        () => h("col")
-      );
-      this.colgroup.replaceChildren(...cols);
-    }
-    updateColumnsOnResize(
-      this.node,
-      this.colgroup,
-      this.table,
-      this.cellMinWidth
-    );
-  }
-  ignoreMutation() {
-    return true;
-  }
-  updateControls() {
-    var _a;
-    const { hoveredTable: table, hoveredCell: cell } = Object.values(
-      this.decorations
-    ).reduce(
-      (acc, curr) => {
-        if (curr.spec.hoveredCell !== void 0)
-          acc.hoveredCell = curr.spec.hoveredCell;
-        if (curr.spec.hoveredTable !== void 0)
-          acc.hoveredTable = curr.spec.hoveredTable;
-        return acc;
-      },
-      {}
-    );
-    if (table === void 0 || cell === void 0) {
-      this.root.classList.add("controls--disabled");
-      return;
-    }
-    this.root.classList.remove("controls--disabled");
-    this.hoveredCell = cell;
-    const cellDom = this.editor.view.nodeDOM(cell.pos);
-    if (!this.table || !cellDom) return;
-    const tableRect = this.table.getBoundingClientRect();
-    const cellRect = cellDom.getBoundingClientRect();
-    if (this.columnsControl) {
-      this.columnsControl.style.left = `${cellRect.left - tableRect.left - (((_a = this.table.parentElement) == null ? void 0 : _a.scrollLeft) || 0)}px`;
-      this.columnsControl.style.width = `${cellRect.width}px`;
-    }
-    if (this.rowsControl) {
-      this.rowsControl.style.top = `${cellRect.top - tableRect.top}px`;
-      this.rowsControl.style.height = `${cellRect.height}px`;
-    }
-  }
-  selectColumn() {
-    if (!this.hoveredCell) return;
-    const colIndex = this.map.colCount(
-      this.hoveredCell.pos - (this.getPos() + 1)
-    );
-    const anchorCellPos = this.hoveredCell.pos;
-    const headCellPos = this.map.map[colIndex + this.map.width * (this.map.height - 1)] + (this.getPos() + 1);
-    const cellSelection = CellSelection.create(
-      this.editor.view.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(this.editor.state.tr.setSelection(cellSelection));
-  }
-  selectRow() {
-    if (!this.hoveredCell) return;
-    const anchorCellPos = this.hoveredCell.pos;
-    const anchorCellIndex = this.map.map.indexOf(
-      anchorCellPos - (this.getPos() + 1)
-    );
-    const headCellPos = this.map.map[anchorCellIndex + (this.map.width - 1)] + (this.getPos() + 1);
-    const cellSelection = CellSelection.create(
-      this.editor.state.doc,
-      anchorCellPos,
-      headCellPos
-    );
-    this.editor.view.dispatch(
-      this.editor.view.state.tr.setSelection(cellSelection)
-    );
-  }
-};
-
-export {
-  updateColumns,
-  TableView
-};

package/dist/chunk-AGOMESFC.mjs

@@ -1 +0,0 @@
-"use client";

package/dist/chunk-BXPGSCTT.mjs

@@ -1,39 +0,0 @@
-"use client";
-import {
-  Table
-} from "./chunk-7HC7D256.mjs";
-import {
-  TableCell
-} from "./chunk-KRLE4MMD.mjs";
-import {
-  TableHeader
-} from "./chunk-4IIGLBTD.mjs";
-import {
-  TableRow
-} from "./chunk-EN3J5AMF.mjs";
-
-// src/extensions/table/kit.ts
-import { Extension } from "@tiptap/react";
-var TableKit = Extension.create({
-  name: "tableKit",
-  addExtensions() {
-    const extensions = [];
-    if (this.options.table !== false) {
-      extensions.push(Table.configure(this.options.table));
-    }
-    if (this.options.tableCell !== false) {
-      extensions.push(TableCell.configure(this.options.tableCell));
-    }
-    if (this.options.tableHeader !== false) {
-      extensions.push(TableHeader.configure(this.options.tableHeader));
-    }
-    if (this.options.tableRow !== false) {
-      extensions.push(TableRow.configure(this.options.tableRow));
-    }
-    return extensions;
-  }
-});
-
-export {
-  TableKit
-};