reactjs-tiptap-editor-pro 0.2.30 → 0.2.32

package/src/extensions/Table/cell-background.ts

@@ -1,112 +0,0 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-import type { Command } from '@tiptap/core';
-import { Extension } from '@tiptap/core';
-import type { Transaction } from '@tiptap/pm/state';
-import { CellSelection } from '@tiptap/pm/tables';
-
-export interface TableCellBackgroundOptions {
-  HTMLAttributes: Record<string, any>
-  types?: any
-}
-
-declare module '@tiptap/core' {
-  interface Commands<ReturnType> {
-    tableCellBackground: {
-      setTableCellBackground: (color: string) => ReturnType
-      unsetTableCellBackground: () => ReturnType
-    }
-  }
-}
-
-export function setCellBackgroundMarkup(tr: Transaction, pos: number, backgroundColor: string): Transaction {
-  if (!tr.doc) {
-    return tr;
-  }
-
-  const node = tr.doc.nodeAt(pos);
-  if (!node) {
-    return tr;
-  }
-
-  if (backgroundColor === node.attrs.backgroundColor) {
-    return tr;
-  }
-
-  const nodeAttrs = {
-    ...node.attrs,
-    backgroundColor,
-  };
-
-  return tr.setNodeMarkup(pos, node.type, nodeAttrs, node.marks);
-}
-
-export function updateCellBackground(tr: Transaction, options: TableCellBackgroundOptions, backgroundColor: string): Transaction {
-  const { doc, selection } = tr;
-
-  if (!doc || !selection || !(selection instanceof CellSelection)) {
-    return tr;
-  }
-
-  selection.forEachCell((node, pos) => {
-    tr = setCellBackgroundMarkup(tr, pos, backgroundColor);
-  });
-
-  return tr;
-}
-
-export function createCellBackgroundCommand(backgroundColor: string, options: TableCellBackgroundOptions): Command {
-  return ({ tr, state, dispatch }) => {
-    const { selection } = state;
-    tr = tr.setSelection(selection);
-    tr = updateCellBackground(tr, options, backgroundColor);
-
-    if (tr.docChanged) {
-      dispatch?.(tr);
-      return true;
-    }
-
-    return false;
-  };
-}
-
-// @ts-ignore
-export const TableCellBackground = Extension.create<TableCellBackgroundOptions>({
-  name: 'tableCellBackground',
-  addOptions() {
-    return {
-      types: ['tableCell'],
-      HTMLAttributes: {},
-    };
-  },
-
-  addGlobalAttributes() {
-    return [
-      {
-        types: this.options.types,
-        attributes: {
-          backgroundColor: {
-            parseHTML: (element) => {
-              return element.style.backgroundColor || '';
-            },
-            renderHTML: (attributes) => {
-              if (!attributes.backgroundColor || attributes.backgroundColor === '') {
-                return {};
-              } else {
-                return {
-                  style: `background-color: ${attributes.backgroundColor}`,
-                };
-              }
-            },
-          },
-        },
-      },
-    ];
-  },
-  addCommands() {
-    return {
-      setTableCellBackground: (backgroundColor: string) =>
-        createCellBackgroundCommand(backgroundColor, this.options),
-      unsetTableCellBackground: () => createCellBackgroundCommand('', this.options),
-    };
-  },
-});

package/src/extensions/Table/components/CreateTablePopover.tsx

@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-
-import { Popover, PopoverContent, PopoverTrigger } from '@/components';
-import {
-  TABLE_DEFAULT_SELECTED_GRID_SIZE,
-  TABLE_INIT_GRID_SIZE,
-  TABLE_MAX_GRID_SIZE,
-} from '@/constants';
-import { isMobile } from '@/utils/is-mobile';
-
-const createArray = (length: number) => Array.from({ length }).map((_, index) => index + 1);
-
-interface IPropsCreateTablePopover {
-  createTable: any
-  children: any
-}
-
-export interface GridSize {
-  rows: number
-  cols: number
-}
-
-export interface CreateTablePayload extends GridSize {
-  withHeaderRow: boolean
-}
-
-function CreateTablePopover(props: IPropsCreateTablePopover) {
-  const [withHeaderRow, setWithHeaderRow] = useState<boolean>(true);
-  const [tableGridSize, setTableGridSize] = useState<GridSize>({
-    rows: isMobile() ? TABLE_MAX_GRID_SIZE : TABLE_INIT_GRID_SIZE,
-    cols: isMobile() ? TABLE_MAX_GRID_SIZE : TABLE_INIT_GRID_SIZE,
-  });
-
-  const [selectedTableGridSize, setSelectedTableGridSize] = useState<GridSize>({
-    rows: TABLE_DEFAULT_SELECTED_GRID_SIZE,
-    cols: TABLE_DEFAULT_SELECTED_GRID_SIZE,
-  });
-
-  function selectTableGridSize(rows: number, cols: number): void {
-    if (rows === tableGridSize.rows) {
-      setTableGridSize((prev) => {
-        return {
-          ...prev,
-          rows: Math.min(rows + 1, TABLE_MAX_GRID_SIZE),
-        };
-      });
-    }
-
-    if (cols === tableGridSize.cols) {
-      setTableGridSize((prev) => {
-        return {
-          ...prev,
-          cols: Math.min(cols + 1, TABLE_MAX_GRID_SIZE),
-        };
-      });
-    }
-
-    setSelectedTableGridSize({
-      rows,
-      cols,
-    });
-  }
-
-  function onMouseDown(rows: number, cols: number) {
-    props?.createTable({ rows, cols, withHeaderRow });
-    resetTableGridSize();
-  }
-
-  function resetTableGridSize(): void {
-    setWithHeaderRow(false);
-
-    setTableGridSize({
-      rows: TABLE_INIT_GRID_SIZE,
-      cols: TABLE_INIT_GRID_SIZE,
-    });
-
-    setSelectedTableGridSize({
-      rows: TABLE_DEFAULT_SELECTED_GRID_SIZE,
-      cols: TABLE_DEFAULT_SELECTED_GRID_SIZE,
-    });
-  }
-
-  return (
-    <Popover modal>
-      <PopoverTrigger asChild>
-        {props?.children}
-      </PopoverTrigger>
-
-      <PopoverContent align="start"
-        className="w-full !p-2"
-        side="bottom"
-      >
-        <div className="table-grid-size-editor p-0">
-          <div className="flex flex-col flex-wrap justify-between gap-1">
-            {createArray(tableGridSize?.rows)?.map((row: any) => {
-              return (
-                <div className="flex gap-1"
-                  key={`r-${row}`}
-                >
-                  {createArray(tableGridSize?.cols)?.map((col: any) => {
-                    return (
-                      <div
-                        key={`c-${col}`}
-                        onMouseDown={() => onMouseDown(row, col)}
-                        onMouseOver={() => selectTableGridSize(row, col)}
-                        className={`cursor-pointer border-border ${
-                          col <= selectedTableGridSize.cols
-                          && row <= selectedTableGridSize.rows
-                          && 'tableCellActive !bg-foreground'
-                        }`}
-                      >
-                        <div className="box-border size-4 rounded-[2px] !border border-solid !border-border p-1"></div>
-                      </div>
-                    );
-                  })}
-                </div>
-              );
-            })}
-          </div>
-
-          <div className="mt-2 text-center text-sm text-zinc-600">
-            {selectedTableGridSize.rows}
-            x
-            {selectedTableGridSize.cols}
-          </div>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export default CreateTablePopover;

package/src/extensions/Table/components/TableActionButton.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-import { ActionButton } from '@/components';
-import CreateTablePopover from '@/extensions/Table/components/CreateTablePopover';
-import type { ButtonViewReturnComponentProps } from '@/types';
-
-interface IPropsTableActionButton {
-  editor: any
-  icon?: any
-  tooltip?: string
-  disabled?: boolean
-  color?: string
-  action?: ButtonViewReturnComponentProps['action']
-  isActive?: ButtonViewReturnComponentProps['isActive']
-}
-
-function TableActionButton(props: IPropsTableActionButton) {
-  function createTable(options: any) {
-    if (!props.disabled) {
-      props.editor
-        .chain()
-        .focus()
-        .insertTable({ ...options, withHeaderRow: false })
-        .run();
-    }
-  }
-
-  return (
-    <CreateTablePopover createTable={createTable}>
-      <ActionButton
-        icon={props?.icon}
-        tooltip={props?.tooltip}
-        disabled={props?.disabled}
-        color={props?.color}
-        action={props?.action}
-        isActive={props?.isActive}
-      />
-    </CreateTablePopover>
-  );
-}
-
-export default TableActionButton;

package/src/extensions/Table/index.ts

@@ -1,6 +0,0 @@
-export { type TableRowOptions, TableRow } from '@tiptap/extension-table-row';
-export { Table, type TableOptions } from './Table';
-export { TableCell, type TableCellOptions } from '@tiptap/extension-table-cell';
-export { TableHeader, type TableHeaderOptions } from '@tiptap/extension-table-header';
-
-export { TableCellBackground, type TableCellBackgroundOptions } from './cell-background';

package/src/extensions/Table/utils.ts

@@ -1,352 +0,0 @@
-import { type Editor, findParentNode } from '@tiptap/core';
-import { type Node, type ResolvedPos } from '@tiptap/pm/model';
-import { type EditorState, type Selection, type Transaction } from '@tiptap/pm/state';
-import { CellSelection, TableMap } from '@tiptap/pm/tables';
-import { type EditorView } from '@tiptap/pm/view';
-
-import Table from './Table';
-
-export function isRectSelected (rect: any) {
-  return (selection: CellSelection) => {
-    const map = TableMap.get(selection.$anchorCell.node(-1));
-    const start = selection.$anchorCell.start(-1);
-    const cells = map.cellsInRect(rect);
-    const selectedCells = map.cellsInRect(
-      map.rectBetween(
-        selection.$anchorCell.pos - start,
-        selection.$headCell.pos - start,
-      ),
-    );
-
-    for (let i = 0, count = cells.length; i < count; i += 1) {
-      if (!selectedCells.includes(cells[i])) {
-        return false;
-      }
-    }
-
-    return true;
-  };
-}
-
-export function findTable (selection: Selection) {
-  return findParentNode(
-    (node) => node.type.spec.tableRole && node.type.spec.tableRole === 'table',
-  )(selection);
-}
-
-export function isCellSelection (selection: any) {
-  return selection instanceof CellSelection;
-}
-
-export function isColumnSelected (columnIndex: number) {
-  return (selection: any) => {
-    if (isCellSelection(selection)) {
-      const map = TableMap.get(selection.$anchorCell.node(-1));
-
-      return isRectSelected({
-        left: columnIndex,
-        right: columnIndex + 1,
-        top: 0,
-        bottom: map.height,
-      })(selection);
-    }
-
-    return false;
-  };
-}
-
-export function isRowSelected (rowIndex: number) {
-  return (selection: any) => {
-    if (isCellSelection(selection)) {
-      const map = TableMap.get(selection.$anchorCell.node(-1));
-
-      return isRectSelected({
-        left: 0,
-        right: map.width,
-        top: rowIndex,
-        bottom: rowIndex + 1,
-      })(selection);
-    }
-
-    return false;
-  };
-}
-
-export function isTableSelected (selection: any) {
-  if (isCellSelection(selection)) {
-    const map = TableMap.get(selection.$anchorCell.node(-1));
-
-    return isRectSelected({
-      left: 0,
-      right: map.width,
-      top: 0,
-      bottom: map.height,
-    })(selection);
-  }
-
-  return false;
-}
-
-export function getCellsInColumn (columnIndex: number | number[]) {
-  return (selection: Selection) => {
-    const table = findTable(selection);
-    if (table) {
-      const map = TableMap.get(table.node);
-      const indexes = Array.isArray(columnIndex)
-        ? columnIndex
-        : Array.from([columnIndex]);
-
-      return indexes.reduce(
-        (acc, index) => {
-          if (index >= 0 && index <= map.width - 1) {
-            const cells = map.cellsInRect({
-              left: index,
-              right: index + 1,
-              top: 0,
-              bottom: map.height,
-            });
-
-            return acc.concat(
-              cells.map((nodePos) => {
-                const node = table.node.nodeAt(nodePos);
-                const pos = nodePos + table.start;
-
-                return { pos, start: pos + 1, node };
-              }),
-            );
-          }
-
-          return acc;
-        },
-        [] as { pos: number; start: number; node: Node | null | undefined }[],
-      );
-    }
-    return null;
-  };
-}
-
-export function getCellsInRow (rowIndex: number | number[]) {
-  return (selection: Selection) => {
-    const table = findTable(selection);
-
-    if (table) {
-      const map = TableMap.get(table.node);
-      const indexes = Array.isArray(rowIndex)
-        ? rowIndex
-        : Array.from([rowIndex]);
-
-      return indexes.reduce(
-        (acc, index) => {
-          if (index >= 0 && index <= map.height - 1) {
-            const cells = map.cellsInRect({
-              left: 0,
-              right: map.width,
-              top: index,
-              bottom: index + 1,
-            });
-
-            return acc.concat(
-              cells.map((nodePos) => {
-                const node = table.node.nodeAt(nodePos);
-                const pos = nodePos + table.start;
-                return { pos, start: pos + 1, node };
-              }),
-            );
-          }
-
-          return acc;
-        },
-        [] as { pos: number; start: number; node: Node | null | undefined }[],
-      );
-    }
-
-    return null;
-  };
-}
-
-export function getCellsInTable (selection: Selection) {
-  const table = findTable(selection);
-
-  if (table) {
-    const map = TableMap.get(table.node);
-    const cells = map.cellsInRect({
-      left: 0,
-      right: map.width,
-      top: 0,
-      bottom: map.height,
-    });
-
-    return cells.map((nodePos) => {
-      const node = table.node.nodeAt(nodePos);
-      const pos = nodePos + table.start;
-
-      return { pos, start: pos + 1, node };
-    });
-  }
-
-  return null;
-}
-
-export function findParentNodeClosestToPos ($pos: ResolvedPos,
-  predicate: (node: Node) => boolean) {
-  for (let i = $pos.depth; i > 0; i -= 1) {
-    const node = $pos.node(i);
-
-    if (predicate(node)) {
-      return {
-        pos: i > 0 ? $pos.before(i) : 0,
-        start: $pos.start(i),
-        depth: i,
-        node,
-      };
-    }
-  }
-
-  return null;
-}
-
-export function findCellClosestToPos ($pos: ResolvedPos) {
-  const predicate = (node: Node) =>
-    node.type.spec.tableRole && /cell/i.test(node.type.spec.tableRole);
-
-  return findParentNodeClosestToPos($pos, predicate);
-}
-
-function select (type: 'row' | 'column') {
-  return (index: number) => (tr: Transaction) => {
-    const table = findTable(tr.selection);
-    const isRowSelection = type === 'row';
-
-    if (table) {
-      const map = TableMap.get(table.node);
-
-      // Check if the index is valid
-      if (index >= 0 && index < (isRowSelection ? map.height : map.width)) {
-        const left = isRowSelection ? 0 : index;
-        const top = isRowSelection ? index : 0;
-        const right = isRowSelection ? map.width : index + 1;
-        const bottom = isRowSelection ? index + 1 : map.height;
-
-        const cellsInFirstRow = map.cellsInRect({
-          left,
-          top,
-          right: isRowSelection ? right : left + 1,
-          bottom: isRowSelection ? top + 1 : bottom,
-        });
-
-        const cellsInLastRow =
-          bottom - top === 1
-            ? cellsInFirstRow
-            : map.cellsInRect({
-              left: isRowSelection ? left : right - 1,
-              top: isRowSelection ? bottom - 1 : top,
-              right,
-              bottom,
-            });
-
-        const head = table.start + cellsInFirstRow[0];
-        const anchor = table.start + cellsInLastRow[cellsInLastRow.length - 1];
-        const $head = tr.doc.resolve(head);
-        const $anchor = tr.doc.resolve(anchor);
-        return tr.setSelection(new CellSelection($anchor, $head));
-      }
-    }
-    return tr;
-  };
-}
-
-export const selectColumn = select('column');
-
-export const selectRow = select('row');
-
-export function selectTable (tr: Transaction) {
-  const table = findTable(tr.selection);
-
-  if (table) {
-    const { map } = TableMap.get(table.node);
-
-    if (map && map.length > 0) {
-      const head = table.start + map[0];
-      const anchor = table.start + map[map.length - 1];
-      const $head = tr.doc.resolve(head);
-      const $anchor = tr.doc.resolve(anchor);
-      return tr.setSelection(new CellSelection($anchor, $head));
-    }
-  }
-
-  return tr;
-}
-
-export function isColumnGripSelected ({
-  editor,
-  view,
-  state,
-  from,
-}: {
-  editor: Editor;
-  view: EditorView;
-  state: EditorState;
-  from: number;
-}) {
-  const domAtPos = view.domAtPos(from).node as HTMLElement;
-  const nodeDOM = view.nodeDOM(from) as HTMLElement;
-  const node = nodeDOM || domAtPos;
-
-  if (
-    !editor.isActive(Table.name) ||
-    !node ||
-    isTableSelected(state.selection)
-  ) {
-    return false;
-  }
-
-  let container = node;
-
-  while (container && !['TD', 'TH'].includes(container.tagName)) {
-    container = container.parentElement!;
-  }
-
-  const gripColumn =
-    container &&
-    container.querySelector &&
-    container.querySelector('a.grip-column.selected');
-
-  return !!gripColumn;
-}
-
-export function isRowGripSelected ({
-  editor,
-  view,
-  state,
-  from,
-}: {
-  editor: Editor;
-  view: EditorView;
-  state: EditorState;
-  from: number;
-}) {
-  const domAtPos = view.domAtPos(from).node as HTMLElement;
-  const nodeDOM = view.nodeDOM(from) as HTMLElement;
-  const node = nodeDOM || domAtPos;
-
-  if (
-    !editor.isActive(Table.name) ||
-    !node ||
-    isTableSelected(state.selection)
-  ) {
-    return false;
-  }
-
-  let container = node;
-
-  while (container && !['TD', 'TH'].includes(container.tagName)) {
-    container = container.parentElement!;
-  }
-
-  const gripRow =
-    container &&
-    container.querySelector &&
-    container.querySelector('a.grip-row.selected');
-
-  return !!gripRow;
-}