@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-node/table-node/styles/prosemirror-table.css

@@ -0,0 +1,35 @@
+@import "tailwindcss";
+
+.ProseMirror .tableWrapper {
+  @apply overflow-x-auto;
+}
+
+.ProseMirror table {
+  @apply border-collapse table-fixed w-full overflow-hidden;
+}
+
+.ProseMirror td,
+.ProseMirror th {
+  @apply align-top box-border relative;
+}
+
+.ProseMirror td:not([data-colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([data-colwidth]):not(.column-resize-dragging) {
+  /* if there's no explicit width set and the column is not being resized, set a default width */
+  min-width: var(--default-cell-min-width);
+}
+
+.ProseMirror .column-resize-handle {
+  @apply absolute -right-0.5 top-0 bottom-0 w-1 z-20 bg-sky-300 pointer-events-none;
+}
+
+.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+/* Give selected cells a blue overlay */
+.ProseMirror .selectedCell:after {
+  @apply z-[2] absolute inset-0 bg-indigo-300/40 pointer-events-none;
+  content: "";
+}

package/src/components/tiptap-node/table-node/styles/table-node.css

@@ -0,0 +1,158 @@
+@import "tailwindcss";
+
+.tiptap [data-content-type="table"] .tableWrapper {
+  @apply overflow-y-hidden p-4;
+}
+
+.tiptap [data-content-type="table"] .tableWrapper table {
+  @apply relative overflow-visible;
+}
+
+.tiptap [data-content-type="table"] .tableWrapper table::before,
+.tiptap [data-content-type="table"] .tableWrapper table::after {
+  content: " ";
+  @apply absolute top-0 h-full w-3 bg-gray-100 dark:bg-gray-800 rounded-lg pointer-events-none;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+  z-index: 1;
+}
+
+.tiptap [data-content-type="table"] .tableWrapper table::before {
+  left: -4px;
+  transform: translateX(-100%);
+}
+
+.tiptap [data-content-type="table"] .tableWrapper table::after {
+  right: -4px;
+  transform: translateX(100%);
+}
+
+.tiptap [data-content-type="table"] .tableWrapper:hover table::before,
+.tiptap [data-content-type="table"] .tableWrapper:hover table::after {
+  opacity: 0.3;
+}
+
+.tiptap table {
+  @apply break-words;
+  width: auto !important;
+}
+
+.tiptap th,
+.tiptap td {
+  @apply border border-gray-300 dark:border-gray-700 p-2;
+}
+.tiptap.ProseMirror .table-container td > * {
+  @apply !mt-4;
+}
+.tiptap.ProseMirror .table-container td > *:first-child {
+  @apply !mt-0;
+}
+
+.tiptap table th {
+  @apply bg-gray-100 dark:bg-gray-800 font-bold text-left;
+}
+
+.ProseMirror .column-resize-handle {
+  @apply absolute right-0 w-0.5 bg-indigo-500 cursor-col-resize z-[1] pointer-events-auto transition-colors duration-150 delay-50;
+  top: 0;
+  bottom: 0;
+  height: 100%;
+}
+
+.tiptap [data-content-type="table"] .tableWrapper td .column-resize-handle {
+  top: -16px;
+  height: 100%;
+}
+
+/* ================================================================================================
+ * TABLE CELL ALIGNMENT STYLES
+ * ================================================================================================ */
+
+.tiptap td[data-text-align="left"],
+.tiptap th[data-text-align="left"] {
+  @apply text-left;
+}
+
+.tiptap td[data-text-align="center"],
+.tiptap th[data-text-align="center"] {
+  @apply text-center;
+}
+
+.tiptap td[data-text-align="right"],
+.tiptap th[data-text-align="right"] {
+  @apply text-right;
+}
+
+.tiptap td[data-text-align="justify"],
+.tiptap th[data-text-align="justify"] {
+  @apply text-justify;
+}
+
+.tiptap td[data-vertical-align="top"],
+.tiptap th[data-vertical-align="top"] {
+  @apply align-top;
+}
+
+.tiptap td[data-vertical-align="middle"],
+.tiptap th[data-vertical-align="middle"] {
+  @apply align-middle;
+}
+
+.tiptap td[data-vertical-align="bottom"],
+.tiptap th[data-vertical-align="bottom"] {
+  @apply align-bottom;
+}
+
+.tiptap [data-content-type="table"] td[data-text-align="left"],
+.tiptap [data-content-type="table"] th[data-text-align="left"] {
+  @apply text-left;
+}
+
+.tiptap [data-content-type="table"] td[data-text-align="center"],
+.tiptap [data-content-type="table"] th[data-text-align="center"] {
+  @apply text-center;
+}
+
+.tiptap [data-content-type="table"] td[data-text-align="right"],
+.tiptap [data-content-type="table"] th[data-text-align="right"] {
+  @apply text-right;
+}
+
+.tiptap [data-content-type="table"] td[data-text-align="justify"],
+.tiptap [data-content-type="table"] th[data-text-align="justify"] {
+  @apply text-justify;
+}
+
+.tiptap [data-content-type="table"] td[data-vertical-align="top"],
+.tiptap [data-content-type="table"] th[data-vertical-align="top"] {
+  @apply align-top;
+}
+
+.tiptap [data-content-type="table"] td[data-vertical-align="middle"],
+.tiptap [data-content-type="table"] th[data-vertical-align="middle"] {
+  @apply align-middle;
+}
+
+.tiptap [data-content-type="table"] td[data-vertical-align="bottom"],
+.tiptap [data-content-type="table"] th[data-vertical-align="bottom"] {
+  @apply align-bottom;
+}
+
+/* tiptap uses colwidth instead of data-colwidth, se we need to adjust this style from prosemirror-tables */
+.ProseMirror td,
+.ProseMirror th {
+  min-width: auto !important;
+}
+.ProseMirror td:not([colwidth]):not(.column-resize-dragging),
+.ProseMirror th:not([colwidth]):not(.column-resize-dragging) {
+  /* if there's no explicit width set and the column is not being resized, set a default width */
+  min-width: var(--default-cell-min-width) !important;
+}
+
+.tiptap-table-dropcursor {
+  @apply absolute z-20 bg-indigo-500 pointer-events-none;
+}
+
+.table-cell-dragging-source {
+  @apply z-[2] absolute inset-0 bg-indigo-300/40;
+}

package/src/components/tiptap-node/table-node/ui/table-add-row-column-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-add-row-column-button"
+export * from "./use-table-add-row-column"

package/src/components/tiptap-node/table-node/ui/table-add-row-column-button/table-add-row-column-button.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { forwardRef, useCallback } from "react";
+
+// --- UI Primitives ---
+import type { ButtonProps } from "../../../../tiptap-ui-primitive/button";
+import { Button } from "../../../../tiptap-ui-primitive/button";
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+// --- Tiptap UI ---
+import type { UseTableAddRowColumnConfig } from "./index";
+import { useTableAddRowColumn } from "./index";
+
+export interface TableAddRowColumnButtonProps extends Omit<ButtonProps, "type">, UseTableAddRowColumnConfig {
+  /**
+   * Optional text to display alongside the icon.
+   */
+  text?: string;
+}
+
+/**
+ * Button component for adding a table row/column in a Tiptap editor.
+ *
+ * For custom button implementations, use the `useTableAddRowColumn` hook instead.
+ */
+export const TableAddRowColumnButton = forwardRef<HTMLButtonElement, TableAddRowColumnButtonProps>(
+  (
+    {
+      editor: providedEditor,
+      index,
+      orientation,
+      side,
+      tablePos,
+      hideWhenUnavailable = false,
+      onAdded,
+      text,
+      onClick,
+      children,
+      ...buttonProps
+    },
+    ref,
+  ) => {
+    const { editor } = useTiptapEditor(providedEditor);
+    const { isVisible, handleAdd, label, canAddRowColumn, Icon } = useTableAddRowColumn({
+      editor,
+      index,
+      orientation,
+      side,
+      tablePos,
+      hideWhenUnavailable,
+      onAdded,
+    });
+
+    const handleClick = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (event.defaultPrevented) return;
+        handleAdd();
+      },
+      [handleAdd, onClick],
+    );
+
+    if (!isVisible) {
+      return null;
+    }
+
+    return (
+      <Button
+        aria-label={label}
+        aria-pressed={false}
+        data-active-state="off"
+        data-disabled={!canAddRowColumn}
+        data-style="ghost"
+        disabled={!canAddRowColumn}
+        onClick={handleClick}
+        role="button"
+        tabIndex={-1}
+        tooltip={label}
+        type="button"
+        {...buttonProps}
+        ref={ref}
+      >
+        {children ?? (
+          <>
+            <Icon className="tiptap-button-icon" />
+            {text && <span className="tiptap-button-text">{text}</span>}
+          </>
+        )}
+      </Button>
+    );
+  },
+);
+
+TableAddRowColumnButton.displayName = "TableAddRowColumnButton";

package/src/components/tiptap-node/table-node/ui/table-add-row-column-button/use-table-add-row-column.ts

@@ -0,0 +1,325 @@
+"use client";
+
+import { useCallback } from "react";
+import type { Node } from "@tiptap/pm/model";
+import type { Transaction } from "@tiptap/pm/state";
+import type { TableMap } from "@tiptap/pm/tables";
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  CellSelection,
+  columnIsHeader,
+  rowIsHeader,
+} from "@tiptap/pm/tables";
+import type { Editor } from "@tiptap/react";
+import { useTranslation } from "react-i18next";
+
+// --- Hooks ---
+import { useTiptapEditor } from "../../../../../hooks/use-tiptap-editor";
+// --- Lib ---
+import { isExtensionAvailable } from "../../../../../lib/tiptap-utils";
+// --- Icons ---
+import { AddColLeftIcon } from "../../../../tiptap-icons/add-col-left-icon";
+import { AddColRightIcon } from "../../../../tiptap-icons/add-col-right-icon";
+import { AddRowBottomIcon } from "../../../../tiptap-icons/add-row-bottom-icon";
+import { AddRowTopIcon } from "../../../../tiptap-icons/add-row-top-icon";
+import type { Orientation } from "../../lib/tiptap-table-utils";
+import {
+  getTable,
+  getTableSelectionType,
+  selectCellsByCoords,
+  updateSelectionAfterAction,
+} from "../../lib/tiptap-table-utils";
+
+export type RowSide = "above" | "below";
+export type ColSide = "left" | "right";
+
+export interface UseTableAddRowColumnConfig {
+  /**
+   * The Tiptap editor instance. If omitted, the hook will use
+   * the context/editor from `useTiptapEditor`.
+   */
+  editor?: Editor | null;
+  /**
+   * The index of the row or column to add relative to.
+   * If omitted, will use the current selection.
+   */
+  index?: number;
+  /**
+   * Whether you're adding a row or a column.
+   * If omitted, will use the current selection.
+   */
+  orientation?: Orientation;
+  /**
+   * The side to add on - above/below for rows, left/right for columns.
+   */
+  side: RowSide | ColSide;
+  /**
+   * The position of the table in the document.
+   */
+  tablePos?: number;
+  /**
+   * Hide the button when addition isn't currently possible.
+   * @default false
+   */
+  hideWhenUnavailable?: boolean;
+  /**
+   * Callback function called after a successful addition.
+   */
+  onAdded?: () => void;
+}
+
+const REQUIRED_EXTENSIONS = ["table"];
+
+export const tableAddRowColumnLabels = {
+  row: {
+    above: "Insert row above",
+    below: "Insert row below",
+  } as Record<RowSide, string>,
+  column: {
+    left: "Insert column left",
+    right: "Insert column right",
+  } as Record<ColSide, string>,
+} as const;
+
+function safeColumnIsHeader(map: TableMap, node: Node, index: number): boolean {
+  try {
+    return columnIsHeader(map, node, index);
+  } catch {
+    return false;
+  }
+}
+
+function safeRowIsHeader(map: TableMap, node: Node, index: number): boolean {
+  try {
+    return rowIsHeader(map, node, index);
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Checks if a table row/column addition can be performed
+ * in the current editor state.
+ */
+function canAddRowColumn({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  side,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+  side: RowSide | ColSide;
+}): boolean {
+  if (!editor || !editor.isEditable || !isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) {
+    return false;
+  }
+
+  const table = getTable(editor, tablePos);
+  if (!table) return false;
+
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  if (!selectionType) return false;
+
+  const { map, node } = table;
+  const selIndex = selectionType.index;
+  const selOrient = selectionType.orientation;
+
+  // Bounds check
+  if (typeof selIndex !== "number" || selIndex < 0) return false;
+  if (selOrient === "column" && selIndex >= map.width) return false;
+  if (selOrient === "row" && selIndex >= map.height) return false;
+
+  // Block inserting to the LEFT of a header column
+  if (side === "left" && selOrient === "column") {
+    if (safeColumnIsHeader(map, node, selIndex)) return false;
+  }
+
+  // Block inserting ABOVE a header row
+  if (side === "above" && selOrient === "row") {
+    if (safeRowIsHeader(map, node, selIndex)) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Calculates the index of the newly added row or column.
+ */
+function calculateNewIndex(index: number, orientation: Orientation, side: RowSide | ColSide): number {
+  if (orientation === "row") {
+    // For rows: above means the new row is at the same index (pushes original down)
+    // below means the new row is at index + 1
+    return side === "above" ? index : index + 1;
+  } else {
+    // For columns: left means the new column is at the same index (pushes original right)
+    // right means the new column is at index + 1
+    return side === "left" ? index : index + 1;
+  }
+}
+
+/**
+ * Executes the row/column addition in the editor.
+ */
+function tableAddRowColumn({
+  editor,
+  index,
+  orientation,
+  side,
+  tablePos,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  side: RowSide | ColSide;
+  tablePos: number | undefined;
+}): boolean {
+  if (!canAddRowColumn({ editor, index, orientation, tablePos, side }) || !editor) {
+    return false;
+  }
+
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  if (!selectionType) return false;
+
+  const { orientation: finalOrientation, index: finalIndex } = selectionType;
+
+  const isRow = finalOrientation === "row";
+  const dispatch = (tr: Transaction) => editor.view.dispatch(tr);
+  const addOperation = isRow
+    ? side === "above"
+      ? addRowBefore
+      : addRowAfter
+    : side === "left"
+      ? addColumnBefore
+      : addColumnAfter;
+
+  try {
+    let success = false;
+
+    if (editor.state.selection instanceof CellSelection) {
+      success = addOperation(editor.state, dispatch);
+    } else {
+      const table = getTable(editor, tablePos);
+      if (!table) return false;
+
+      const cellCoords = finalOrientation === "row" ? { row: finalIndex, col: 0 } : { row: 0, col: finalIndex };
+
+      const cellState = selectCellsByCoords(editor, table.pos, [cellCoords], {
+        mode: "state",
+      });
+
+      if (!cellState) return false;
+
+      success = addOperation(cellState, dispatch);
+    }
+
+    if (success) {
+      const newIndex = calculateNewIndex(finalIndex, finalOrientation, side);
+      updateSelectionAfterAction(editor, finalOrientation, newIndex, tablePos);
+    }
+
+    return success;
+  } catch (error) {
+    console.error("Error adding row/column:", error);
+    return false;
+  }
+}
+
+/**
+ * Determines if the add button should be shown
+ * based on editor state and config.
+ */
+function shouldShowButton({
+  editor,
+  index,
+  orientation,
+  tablePos,
+  side,
+  hideWhenUnavailable,
+}: {
+  editor: Editor | null;
+  index?: number;
+  orientation?: Orientation;
+  tablePos?: number;
+  side: RowSide | ColSide;
+  hideWhenUnavailable: boolean;
+}): boolean {
+  if (!editor || !editor.isEditable) return false;
+  if (!isExtensionAvailable(editor, REQUIRED_EXTENSIONS)) return false;
+
+  if (hideWhenUnavailable) {
+    return canAddRowColumn({ editor, index, orientation, tablePos, side });
+  }
+
+  const selectionType = getTableSelectionType(editor, index, orientation);
+  return Boolean(selectionType);
+}
+
+/**
+ * Custom hook that provides **table row/column addition**
+ * functionality for the Tiptap editor.
+ */
+export function useTableAddRowColumn(config: UseTableAddRowColumnConfig) {
+  const { editor: providedEditor, index, orientation, side, tablePos, hideWhenUnavailable = false, onAdded } = config;
+
+  const { editor } = useTiptapEditor(providedEditor);
+  const { t } = useTranslation();
+  const selectionType = getTableSelectionType(editor, index, orientation);
+
+  const isVisible = shouldShowButton({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    side,
+    hideWhenUnavailable,
+  });
+
+  const canPerformAdd = canAddRowColumn({
+    editor,
+    index,
+    orientation,
+    tablePos,
+    side,
+  });
+
+  const handleAdd = useCallback(() => {
+    const success = tableAddRowColumn({
+      editor,
+      index,
+      orientation,
+      tablePos,
+      side,
+    });
+    if (success) onAdded?.();
+    return success;
+  }, [editor, index, orientation, tablePos, side, onAdded]);
+
+  const label =
+    selectionType?.orientation === "row"
+      ? tableAddRowColumnLabels.row[side as RowSide]
+      : tableAddRowColumnLabels.column[side as ColSide];
+
+  const Icon =
+    selectionType?.orientation === "row"
+      ? side === "above"
+        ? AddRowTopIcon
+        : AddRowBottomIcon
+      : side === "left"
+        ? AddColLeftIcon
+        : AddColRightIcon;
+
+  return {
+    isVisible,
+    canAddRowColumn: canPerformAdd,
+    handleAdd,
+    label: t(label),
+    Icon,
+  };
+}

package/src/components/tiptap-node/table-node/ui/table-align-cell-button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./table-align-cell-button"
+export * from "./use-table-align-cell"