@portone/docx-editor 0.1.0

package/dist/table/rows.js

@@ -0,0 +1,89 @@
+// src/table/rows.ts
+import {
+  TextSelection
+} from "prosemirror-state";
+import {
+  deleteRow as pmDeleteRow,
+  isInTable as pmIsInTable,
+  selectedRect,
+  tableNodeTypes
+} from "prosemirror-tables";
+import { spanCount } from "../model/format.js";
+import {
+  colwidthOf,
+  inheritCellAttrs,
+  inheritRowAttrs
+} from "./format.js";
+function isCoveredFromAbove(map, row, index) {
+  return row > 0 && row < map.height && map.map[index] === map.map[index - map.width];
+}
+function growRowspan(tr, rect, index) {
+  const { map, table, tableStart } = rect;
+  const pos = map.map[index];
+  const cell = table.nodeAt(pos);
+  if (!cell) return 1;
+  tr.setNodeMarkup(tableStart + pos, null, {
+    ...cell.attrs,
+    rowspan: spanCount(cell.attrs.rowspan) + 1
+  });
+  return spanCount(cell.attrs.colspan);
+}
+function inheritedCell(rect, index, referenceRowOffset) {
+  const { map, table } = rect;
+  const referencePos = map.map[index + referenceRowOffset * map.width];
+  const referenceCell = referencePos != null ? table.nodeAt(referencePos) : null;
+  const type = referenceCell ? referenceCell.type : tableNodeTypes(table.type.schema).cell;
+  const colspan = referenceCell ? spanCount(referenceCell.attrs.colspan) : 1;
+  const attrs = referenceCell ? inheritCellAttrs(referenceCell, {
+    colspan,
+    rowspan: 1,
+    colwidth: colwidthOf(referenceCell)
+  }) : null;
+  return { node: type.createAndFill(attrs), colspan };
+}
+function insertRowWithFormat(tr, rect, row) {
+  const { map, table, tableStart } = rect;
+  let rowPos = tableStart;
+  for (let i = 0; i < row; i++) rowPos += table.child(i).nodeSize;
+  const referenceRowOffset = row > 0 ? -1 : 0;
+  const referenceRow = table.childCount > 0 ? table.child(row + referenceRowOffset) : null;
+  const cells = [];
+  for (let col = 0; col < map.width; ) {
+    const index = map.width * row + col;
+    if (isCoveredFromAbove(map, row, index)) {
+      col += growRowspan(tr, rect, index);
+      continue;
+    }
+    const { node, colspan } = inheritedCell(rect, index, referenceRowOffset);
+    if (node) cells.push(node);
+    col += colspan;
+  }
+  const rowType = tableNodeTypes(table.type.schema).row;
+  tr.insert(rowPos, rowType.create(inheritRowAttrs(referenceRow), cells));
+  return rowPos;
+}
+function buildAddRowTransaction(state, row) {
+  if (!pmIsInTable(state)) return null;
+  const rect = selectedRect(state);
+  const tr = state.tr;
+  const rowPos = insertRowWithFormat(tr, rect, row(rect));
+  tr.setSelection(TextSelection.near(tr.doc.resolve(rowPos + 1)));
+  return tr.scrollIntoView();
+}
+function buildAddRowAfterTransaction(state) {
+  return buildAddRowTransaction(state, (rect) => rect.bottom);
+}
+function buildAddRowBeforeTransaction(state) {
+  return buildAddRowTransaction(state, (rect) => rect.top);
+}
+function buildDeleteRowTransaction(state) {
+  if (!pmIsInTable(state)) return null;
+  const captured = [];
+  pmDeleteRow(state, (tr) => captured.push(tr));
+  return captured[0] ?? null;
+}
+export {
+  buildAddRowAfterTransaction,
+  buildAddRowBeforeTransaction,
+  buildDeleteRowTransaction
+};

package/dist/table/widths.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Grid widths (`gridCols`) are always in dxa (1/20 of a point).
+ * Cell widths (`tcW`) and table widths (`tblW`) carry a value together with a unit,
+ * so a width taken from the grid has to be converted into the unit that cell uses.
+ */
+import type { Node as PMNode } from "prosemirror-model";
+import type { Transaction } from "prosemirror-state";
+import { type TableWidth, type TableWidthType } from "../model/format";
+/**
+ * The grid column widths the table remembers, read from docx `w:gridCol`.
+ * An empty list means the grid is unknown, so it is treated the same as an absent one
+ * (no zero-width columns are created).
+ */
+export declare function tableGridCols(table: PMNode): number[] | null;
+/** The sum of the grid column widths, which is the dxa width the table occupies */
+export declare function gridTotal(gridCols: number[]): number;
+/**
+ * Redistributes the grid column widths proportionally so that they sum to `total`.
+ *
+ * Widths are integer dxa, so scaling them proportionally leaves a rounding error
+ * behind. The leftover error is absorbed by the last column, making the sum exactly
+ * `total`. When there is no width to distribute (the sum is 0), they are left as they
+ * are.
+ */
+export declare function gridColsScaledTo(gridCols: number[], total: number): number[];
+/**
+ * Converts the width of one grid column into the unit the cell uses. A percentage is
+ * a ratio of the grid total
+ */
+export declare function gridWidthInCellUnit(gridWidth: number, gridCols: number[], type: TableWidthType): number;
+/**
+ * The width of a new cell that occupies a single grid column.
+ *
+ * When the grid is known, one grid column is converted into the reference cell's unit;
+ * when it is not, the reference cell's width is divided by its span count (using the
+ * full width of a merged cell as is would make the new cell several columns wide).
+ * If the reference cell records no width, none is created for the new cell either.
+ */
+export declare function cellWidthForGridCol(gridCols: number[] | null, gridCol: number, reference: TableWidth | null, referenceColspan: number): TableWidth | null;
+/**
+ * The width of a single cell covering several grid columns.
+ * It is null when the grid is unknown or the range falls outside the grid, leaving the
+ * caller to pick another value.
+ */
+export declare function gridSpanWidth(gridCols: number[] | null, from: number, to: number, type: TableWidthType): number | null;
+/**
+ * The table width shifted by however much the grid total moved.
+ * Only dxa shares its unit with the grid. A percentage is a ratio of the page width,
+ * so it is left as it is.
+ */
+export declare function shiftedTableWidth(table: PMNode, gridCols: number[]): TableWidth | null;
+/**
+ * Writes the grid column widths back onto the table and brings the table width in line
+ * with the grid total.
+ *
+ * `tableStart - 1` is the position of the table itself. Cell insertions and deletions
+ * all happen after it, so that position never changes, but it is mapped once anyway to
+ * stay safe regardless of call order.
+ */
+export declare function writeGridCols(tr: Transaction, tableStart: number, gridCols: number[]): void;
+/**
+ * Fits the cell widths to the changed grid. Every cell records the new sum of the grid
+ * columns it covers.
+ *
+ * Only widths recorded in dxa are touched. A percentage is a ratio of the table width,
+ * so it stays the same even when the grid moves, and a cell with no width (null) gets
+ * none created because its original XML has to be written back as it is.
+ */
+export declare function rescaleCellWidths(tr: Transaction, tableStart: number, gridCols: number[]): void;

package/dist/table/widths.js

@@ -0,0 +1,97 @@
+// src/table/widths.ts
+import { TableMap } from "prosemirror-tables";
+import {
+  spanCount,
+  toTableWidth,
+  widthNumber,
+  withWidthNumber
+} from "../model/format.js";
+var PCT_FULL = 5e3;
+function isNumberArray(value) {
+  return Array.isArray(value) && value.every((entry) => typeof entry === "number");
+}
+function tableGridCols(table) {
+  const value = table.attrs.gridCols;
+  return isNumberArray(value) && value.length > 0 ? value : null;
+}
+function gridTotal(gridCols) {
+  return gridCols.reduce((sum, width) => sum + width, 0);
+}
+function gridColsScaledTo(gridCols, total) {
+  const current = gridTotal(gridCols);
+  if (current <= 0 || total <= 0) return gridCols;
+  const scaled = gridCols.map((width) => Math.round(width * total / current));
+  const drift = total - gridTotal(scaled);
+  const last = scaled.length - 1;
+  return scaled.map((width, at) => at === last ? width + drift : width);
+}
+function gridWidthInCellUnit(gridWidth, gridCols, type) {
+  if (type !== "pct") return gridWidth;
+  const total = gridTotal(gridCols);
+  return total > 0 ? Math.round(gridWidth / total * PCT_FULL) : gridWidth;
+}
+function cellWidthForGridCol(gridCols, gridCol, reference, referenceColspan) {
+  if (!reference) return null;
+  const gridWidth = gridCols?.[gridCol];
+  if (gridCols && typeof gridWidth === "number") {
+    return withWidthNumber(
+      reference,
+      gridWidthInCellUnit(gridWidth, gridCols, reference.type)
+    );
+  }
+  const own = widthNumber(reference);
+  return own === null ? reference : withWidthNumber(reference, Math.round(own / referenceColspan));
+}
+function gridSpanWidth(gridCols, from, to, type) {
+  if (!gridCols) return null;
+  const covered = gridCols.slice(from, to);
+  if (covered.length === 0) return null;
+  return gridWidthInCellUnit(gridTotal(covered), gridCols, type);
+}
+function shiftedTableWidth(table, gridCols) {
+  const width = toTableWidth(table.attrs.tblW);
+  const previous = tableGridCols(table);
+  if (!width || width.type !== "dxa" || !previous) return width;
+  const shifted = width.twips + gridTotal(gridCols) - gridTotal(previous);
+  return { type: "dxa", twips: shifted };
+}
+function writeGridCols(tr, tableStart, gridCols) {
+  const tablePos = tr.mapping.map(tableStart - 1);
+  const table = tr.doc.nodeAt(tablePos);
+  if (!table) return;
+  tr.setNodeMarkup(tablePos, null, {
+    ...table.attrs,
+    gridCols,
+    tblW: shiftedTableWidth(table, gridCols)
+  });
+}
+function rescaleCellWidths(tr, tableStart, gridCols) {
+  const tablePos = tr.mapping.map(tableStart - 1);
+  const table = tr.doc.nodeAt(tablePos);
+  if (!table) return;
+  const map = TableMap.get(table);
+  for (const pos of new Set(map.map)) {
+    const cell = table.nodeAt(pos);
+    const width = cell ? toTableWidth(cell.attrs.tcW) : null;
+    if (!cell || !width || width.type !== "dxa") continue;
+    const from = map.colCount(pos);
+    const to = from + spanCount(cell.attrs.colspan);
+    const spanned = gridSpanWidth(gridCols, from, to, width.type);
+    if (spanned === null || spanned === width.twips) continue;
+    tr.setNodeMarkup(tablePos + 1 + pos, null, {
+      ...cell.attrs,
+      tcW: { type: "dxa", twips: spanned }
+    });
+  }
+}
+export {
+  cellWidthForGridCol,
+  gridColsScaledTo,
+  gridSpanWidth,
+  gridTotal,
+  gridWidthInCellUnit,
+  rescaleCellWidths,
+  shiftedTableWidth,
+  tableGridCols,
+  writeGridCols
+};

package/dist/ui/AlignMenu.d.ts

@@ -0,0 +1,15 @@
+/** Menu for choosing the current paragraph alignment. */
+import { type LucideIcon } from "lucide-react";
+import type { EditorState } from "prosemirror-state";
+import { type ReactElement } from "react";
+import { type ActiveParagraphAlign } from "../editor/commands/paragraphCommands";
+import type { RunCommand } from "./runCommand";
+/** Uses the left-align icon when the selection has no shared alignment. */
+export declare function alignIcon(current: ActiveParagraphAlign): LucideIcon;
+export interface AlignMenuProps {
+    state: EditorState;
+    run: RunCommand;
+    close: () => void;
+    takeFocus: boolean;
+}
+export declare function AlignMenu({ state, run, close, takeFocus, }: AlignMenuProps): ReactElement;

package/dist/ui/AlignMenu.js

@@ -0,0 +1,64 @@
+// src/ui/AlignMenu.tsx
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight
+} from "lucide-react";
+import { useRef } from "react";
+import {
+  activeParagraphAlign,
+  setParagraphAlign
+} from "../editor/commands/paragraphCommands.js";
+import { editorClassNames } from "../styles/classNames.js";
+import { MenuChoice } from "./MenuChoice.js";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+import { jsx } from "react/jsx-runtime";
+var ALIGNMENTS = [
+  { label: "Align left", icon: AlignLeft, align: "left" },
+  { label: "Align center", icon: AlignCenter, align: "center" },
+  { label: "Align right", icon: AlignRight, align: "right" },
+  { label: "Justify", icon: AlignJustify, align: "justify" }
+];
+function alignIcon(current) {
+  const align = current.kind === "shared" ? current.align : null;
+  return ALIGNMENTS.find((choice) => choice.align === align)?.icon ?? AlignLeft;
+}
+function AlignMenu({
+  state,
+  run,
+  close,
+  takeFocus
+}) {
+  const current = activeParagraphAlign(state);
+  const menu = useRef(null);
+  const keys = useMenuKeyboard({ menu, onClose: close, takeFocus });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menu,
+      className: editorClassNames.menuList,
+      role: "menu",
+      "aria-label": "Paragraph alignment",
+      ...keys,
+      children: ALIGNMENTS.map((choice) => /* @__PURE__ */ jsx(
+        MenuChoice,
+        {
+          label: choice.label,
+          icon: choice.icon,
+          role: "menuitemradio",
+          checked: current.kind === "shared" && current.align === choice.align,
+          onChoose: () => {
+            run(setParagraphAlign(choice.align));
+            close();
+          }
+        },
+        choice.align
+      ))
+    }
+  );
+}
+export {
+  AlignMenu,
+  alignIcon
+};

package/dist/ui/CellStyleGroup.d.ts

@@ -0,0 +1,15 @@
+/** Toolbar controls for formatting the current table cell selection. */
+import type { EditorState } from "prosemirror-state";
+import { type ReactElement } from "react";
+import type { ColorRow } from "../styles/colors";
+import { type CellBorderOption } from "../table/cellBorders";
+import type { RunCommand } from "./runCommand";
+export interface CellStyleGroupProps {
+    state: EditorState;
+    /** The border choices the menu offers. The built-in list when none is given */
+    cellBorders?: readonly CellBorderOption[];
+    /** The swatches both color buttons offer. The built-in palette when none is given */
+    colors?: readonly ColorRow[];
+    run: RunCommand;
+}
+export declare function CellStyleGroup({ state, cellBorders, colors, run, }: CellStyleGroupProps): ReactElement;

package/dist/ui/CellStyleGroup.js

@@ -0,0 +1,232 @@
+// src/ui/CellStyleGroup.tsx
+import {
+  AlignVerticalJustifyCenter,
+  AlignVerticalJustifyEnd,
+  AlignVerticalJustifyStart,
+  Grid2x2,
+  PaintBucket,
+  Palette,
+  Square,
+  SquareDashed
+} from "lucide-react";
+import { useRef } from "react";
+import { editorClassNames } from "../styles/classNames.js";
+import {
+  activeCellBackground,
+  activeCellBorderColor,
+  activeCellVerticalAlign,
+  canSetCellBorderColor,
+  canSetCellFormatting,
+  setCellBackground,
+  setCellBorderColor,
+  setCellBorders,
+  setCellVerticalAlign
+} from "../table/index.js";
+import {
+  DEFAULT_CELL_BORDERS
+} from "../table/cellBorders.js";
+import { ColorPicker } from "./ColorPicker.js";
+import { MenuChoice } from "./MenuChoice.js";
+import { Popover } from "./Popover.js";
+import { ICON_SIZE } from "./ToolbarButton.js";
+import { useMenuKeyboard } from "./useMenuKeyboard.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BORDER_ICONS = {
+  all: Grid2x2,
+  outer: Square,
+  none: SquareDashed
+};
+var ALIGNMENTS = [
+  { value: "top", label: "Align cell top", icon: AlignVerticalJustifyStart },
+  {
+    value: "center",
+    label: "Align cell center",
+    icon: AlignVerticalJustifyCenter
+  },
+  {
+    value: "bottom",
+    label: "Align cell bottom",
+    icon: AlignVerticalJustifyEnd
+  }
+];
+function CellVerticalAlignMenu({
+  state,
+  run,
+  close,
+  takeFocus
+}) {
+  const current = activeCellVerticalAlign(state);
+  const menu = useRef(null);
+  const keys = useMenuKeyboard({ menu, onClose: close, takeFocus });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menu,
+      className: editorClassNames.menuList,
+      role: "menu",
+      "aria-label": "Cell vertical alignment",
+      ...keys,
+      children: ALIGNMENTS.map((option) => /* @__PURE__ */ jsx(
+        MenuChoice,
+        {
+          label: option.label,
+          icon: option.icon,
+          role: "menuitemradio",
+          checked: current === option.value,
+          onChoose: () => {
+            run(setCellVerticalAlign(option.value));
+            close();
+          }
+        },
+        option.value
+      ))
+    }
+  );
+}
+function cellVerticalAlignIcon(current) {
+  return ALIGNMENTS.find((option) => option.value === current)?.icon ?? AlignVerticalJustifyStart;
+}
+function BorderPresetMenu({
+  state,
+  cellBorders,
+  run,
+  close,
+  takeFocus
+}) {
+  const menu = useRef(null);
+  const keys = useMenuKeyboard({ menu, onClose: close, takeFocus });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: menu,
+      className: editorClassNames.menuList,
+      role: "menu",
+      "aria-label": "Cell borders",
+      ...keys,
+      children: cellBorders.map((option) => {
+        const command = setCellBorders(option.preset);
+        const Icon = BORDER_ICONS[option.preset];
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: editorClassNames.menuItem,
+            "aria-disabled": !command(state),
+            onMouseDown: (event) => event.preventDefault(),
+            onClick: () => {
+              if (!command(state)) return;
+              run(command);
+              close();
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { className: editorClassNames.menuCheck }),
+              /* @__PURE__ */ jsx(Icon, { size: ICON_SIZE, "aria-hidden": "true" }),
+              option.label
+            ]
+          },
+          option.preset
+        );
+      })
+    }
+  );
+}
+function CellStyleGroup({
+  state,
+  cellBorders = DEFAULT_CELL_BORDERS,
+  colors,
+  run
+}) {
+  const activeAlignment = activeCellVerticalAlign(state);
+  const layoutEditable = canSetCellFormatting(state);
+  return /* @__PURE__ */ jsxs("div", { className: editorClassNames.toolbarGroup, children: [
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Cell vertical alignment",
+        icon: cellVerticalAlignIcon(activeAlignment),
+        panel: "menu",
+        disabled: !layoutEditable,
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          CellVerticalAlignMenu,
+          {
+            state,
+            run,
+            close,
+            takeFocus
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Cell borders",
+        icon: Grid2x2,
+        panel: "menu",
+        disabled: !layoutEditable,
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          BorderPresetMenu,
+          {
+            state,
+            cellBorders,
+            run,
+            close,
+            takeFocus
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Border color",
+        icon: Palette,
+        indicatorColor: activeCellBorderColor(state) ?? "#000000",
+        panel: "dialog",
+        disabled: !layoutEditable || !canSetCellBorderColor(state),
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            current: activeCellBorderColor(state),
+            colors,
+            clearLabel: "Automatic",
+            close,
+            takeFocus,
+            onPick: (hex) => {
+              run(setCellBorderColor(hex));
+              close();
+            }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        label: "Cell fill",
+        icon: PaintBucket,
+        indicatorColor: activeCellBackground(state) ?? "transparent",
+        panel: "dialog",
+        disabled: !layoutEditable,
+        children: ({ close, takeFocus }) => /* @__PURE__ */ jsx(
+          ColorPicker,
+          {
+            current: activeCellBackground(state),
+            colors,
+            clearLabel: "No fill",
+            close,
+            takeFocus,
+            onPick: (hex) => {
+              run(setCellBackground(hex));
+              close();
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  CellStyleGroup
+};

package/dist/ui/ColorPicker.d.ts

@@ -0,0 +1,13 @@
+/** Preset and custom colors shared by text, background, border, and cell formatting. */
+import { type ReactElement } from "react";
+import { type ColorRow } from "../styles/colors";
+export interface ColorPickerProps {
+    current: string | null;
+    colors?: readonly ColorRow[];
+    /** Label for the entry that clears the color. */
+    clearLabel?: string;
+    close: () => void;
+    takeFocus: boolean;
+    onPick: (hex: string | null) => void;
+}
+export declare function ColorPicker({ current, colors, clearLabel, close, takeFocus, onPick, }: ColorPickerProps): ReactElement;