reactjs-tiptap-editor-pro 0.2.29 → 0.2.31

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

@@ -0,0 +1,112 @@
+/* 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

@@ -0,0 +1,132 @@
+import React, { useState } from 'react';
+
+import { Popover, PopoverContent, PopoverTrigger } from 'reactjs-tiptap-editor-pro/components';
+import {
+  TABLE_DEFAULT_SELECTED_GRID_SIZE,
+  TABLE_INIT_GRID_SIZE,
+  TABLE_MAX_GRID_SIZE,
+} from 'reactjs-tiptap-editor-pro/constants';
+import { isMobile } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ActionButton } from 'reactjs-tiptap-editor-pro/components';
+import CreateTablePopover from 'reactjs-tiptap-editor-pro/extensions/Table/components/CreateTablePopover';
+import type { ButtonViewReturnComponentProps } from 'reactjs-tiptap-editor-pro/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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,352 @@
+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;
+}