@beyondwork/docx-react-component 1.0.11 → 1.0.13

package/src/runtime/table-commands.ts

@@ -11,6 +11,7 @@
 
 import type { Command as PMCommand, EditorState } from "prosemirror-state";
 import {
+  CellSelection,
   TableMap,
   addColumnAfter as pmAddColumnAfter,
   addColumnBefore as pmAddColumnBefore,
@@ -21,10 +22,13 @@ import {
   deleteTable,
   goToNextCell,
   mergeCells,
+  selectedRect,
+  selectionCell,
   splitCell,
   toggleHeaderCell,
   toggleHeaderColumn,
   toggleHeaderRow,
+  findTable,
 } from "prosemirror-tables";
 
 // prosemirror-tables does not export goToPreviousCell; replicate via direction -1.
@@ -33,6 +37,25 @@ const goToPreviousCell: PMCommand = (state, dispatch, view) =>
 
 export type { Command as TableCommand } from "prosemirror-state";
 
+export interface TableSelectionDescriptor {
+  tableBlockIndex: number;
+  selectionKind: "text" | "cell";
+  anchorCell: {
+    rowIndex: number;
+    columnIndex: number;
+  };
+  headCell: {
+    rowIndex: number;
+    columnIndex: number;
+  };
+  rect: {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+  };
+}
+
 function tableAtSelection(state: EditorState) {
   const { $head } = state.selection;
   for (let depth = $head.depth; depth > 0; depth -= 1) {
@@ -92,3 +115,59 @@ export {
   goToNextCell,
   goToPreviousCell,
 };
+
+export function getTableSelectionDescriptor(
+  state: EditorState,
+): TableSelectionDescriptor | null {
+  const tableInfo = findTable(state.selection.$from);
+  if (!tableInfo) {
+    return null;
+  }
+
+  const tableBlockIndex = resolveTopLevelTableIndex(state, tableInfo.pos);
+  if (tableBlockIndex < 0) {
+    return null;
+  }
+
+  const rect = selectedRect(state);
+  const isCellSelection = state.selection instanceof CellSelection;
+  const anchorCellPos = (
+    isCellSelection ? (state.selection as CellSelection).$anchorCell : selectionCell(state)
+  ).pos - rect.tableStart;
+  const headCellPos = (
+    isCellSelection ? (state.selection as CellSelection).$headCell : selectionCell(state)
+  ).pos - rect.tableStart;
+  const anchorRect = rect.map.findCell(anchorCellPos);
+  const headRect = rect.map.findCell(headCellPos);
+
+  return {
+    tableBlockIndex,
+    selectionKind: isCellSelection ? "cell" : "text",
+    anchorCell: {
+      rowIndex: anchorRect.top,
+      columnIndex: anchorRect.left,
+    },
+    headCell: {
+      rowIndex: headRect.top,
+      columnIndex: headRect.left,
+    },
+    rect: {
+      top: rect.top,
+      left: rect.left,
+      bottom: rect.bottom,
+      right: rect.right,
+    },
+  };
+}
+
+function resolveTopLevelTableIndex(state: EditorState, tablePos: number): number {
+  let index = -1;
+
+  state.doc.forEach((node, offset, currentIndex) => {
+    if (offset === tablePos && node.type.spec.tableRole === "table") {
+      index = currentIndex;
+    }
+  });
+
+  return index;
+}

package/src/runtime/table-schema.ts

@@ -17,6 +17,7 @@ type TableCellAttrs = {
   colwidth?: number[] | null;
   gridSpan?: number | null;
   verticalMerge?: "restart" | "continue" | null;
+  backgroundColor?: string | null;
 };
 
 function resolveRenderedColspan(attrs: {
@@ -52,6 +53,8 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
   const gridSpanAttr = dom.getAttribute("data-grid-span");
   const verticalMergeAttr = dom.getAttribute("data-vertical-merge");
   const gridSpan = gridSpanAttr ? Number.parseInt(gridSpanAttr, 10) : colspan;
+  const backgroundColor =
+    dom.getAttribute("data-cell-background") ?? dom.style.backgroundColor ?? null;
 
   return {
     colspan,
@@ -62,6 +65,7 @@ function getCellAttrs(dom: HTMLElement): TableCellAttrs {
       verticalMergeAttr === "restart" || verticalMergeAttr === "continue"
         ? verticalMergeAttr
         : null,
+    backgroundColor,
   };
 }
 
@@ -85,6 +89,10 @@ function setCellDomAttrs(nodeAttrs: TableCellAttrs, className: string): Record<s
   if (nodeAttrs.verticalMerge) {
     attrs["data-vertical-merge"] = nodeAttrs.verticalMerge;
   }
+  if (nodeAttrs.backgroundColor) {
+    attrs["data-cell-background"] = nodeAttrs.backgroundColor;
+    attrs.style = `background-color: ${nodeAttrs.backgroundColor}`;
+  }
 
   return attrs;
 }
@@ -117,6 +125,7 @@ const tableCellSpecAttrs = {
   colspan: { default: 1, validate: "number" },
   rowspan: { default: 1, validate: "number" },
   colwidth: { default: null, validate: validateColwidth },
+  backgroundColor: { default: null },
 } as const;
 
 export const tableNodeSpec: NodeSpec = {