@underverse-ui/underverse 2.0.28 → 2.0.29

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "2.0.28",
+  "version": "2.0.29",
   "sourceEntry": "src/index.ts",
   "totalExports": 263,
   "exports": [

package/dist/{chunk-KTOXCD6J.js → chunk-5QWYO527.js}

@@ -1198,6 +1198,166 @@ function sanitizeUEditorUrl(raw, kind) {
 import { Extension } from "@tiptap/core";
 import { Plugin } from "@tiptap/pm/state";
 
+// src/components/UEditor/table-width-model.ts
+var TABLE_WIDTH_BASIS_POINTS = 1e4;
+var DEFAULT_RESPONSIVE_TABLE_WIDTH_BP = TABLE_WIDTH_BASIS_POINTS;
+var MAX_RESPONSIVE_TABLE_WIDTH_BP = 1e5;
+function positiveNumber(value, fallback) {
+  const number = Number(value);
+  return Number.isFinite(number) && number > 0 ? number : fallback;
+}
+function clampTableBasisPoints(value, fallback = TABLE_WIDTH_BASIS_POINTS, maximum = TABLE_WIDTH_BASIS_POINTS) {
+  const number = Number(value);
+  if (!Number.isFinite(number)) return fallback;
+  return Math.min(maximum, Math.max(0, Math.round(number)));
+}
+function clampResponsiveTableWidthBp(value, fallback = DEFAULT_RESPONSIVE_TABLE_WIDTH_BP) {
+  return Math.max(1, clampTableBasisPoints(value, fallback, MAX_RESPONSIVE_TABLE_WIDTH_BP));
+}
+function normalizeTableWidthMode(value) {
+  return value === "responsive" || value === "full" ? "responsive" : "fixed";
+}
+function parsePercentageToBasisPoints(value, maximum = MAX_RESPONSIVE_TABLE_WIDTH_BP) {
+  if (!value) return null;
+  const match = value.trim().match(/^(-?\d+(?:\.\d+)?)%$/);
+  if (!match) return null;
+  const percentage = Number.parseFloat(match[1]);
+  if (!Number.isFinite(percentage)) return null;
+  return clampTableBasisPoints(percentage * 100, TABLE_WIDTH_BASIS_POINTS, maximum);
+}
+function formatBasisPointsAsPercentage(value) {
+  const percentage = clampTableBasisPoints(value, 0, MAX_RESPONSIVE_TABLE_WIDTH_BP) / 100;
+  return `${Number.parseFloat(percentage.toFixed(2))}%`;
+}
+function parseColumnRatios(value) {
+  const parts = Array.isArray(value) ? value : typeof value === "string" ? value.split(",") : [];
+  const ratios = parts.map((part) => Number(part));
+  return ratios.length > 0 && ratios.every((ratio) => Number.isFinite(ratio) && ratio > 0) ? ratios : null;
+}
+function normalizeColumnRatios(values, columnCount) {
+  if (columnCount <= 0) return [];
+  const source = values?.length === columnCount ? values.map((value) => positiveNumber(value, 1)) : Array.from({ length: columnCount }, () => 1);
+  const sourceTotal = source.reduce((sum, value) => sum + value, 0);
+  const normalized = source.map((value) => Math.max(1, Math.round(value / sourceTotal * TABLE_WIDTH_BASIS_POINTS)));
+  let difference = TABLE_WIDTH_BASIS_POINTS - normalized.reduce((sum, value) => sum + value, 0);
+  while (difference !== 0) {
+    let changed = false;
+    for (let index = normalized.length - 1; index >= 0 && difference !== 0; index -= 1) {
+      if (difference < 0 && normalized[index] <= 1) continue;
+      normalized[index] += difference > 0 ? 1 : -1;
+      difference += difference > 0 ? -1 : 1;
+      changed = true;
+    }
+    if (!changed) break;
+  }
+  return normalized;
+}
+function getLogicalTableColumnCount(table) {
+  const firstRow = table.firstChild;
+  if (!firstRow) return 0;
+  let count = 0;
+  firstRow.forEach((cell) => {
+    count += Math.max(1, Number(cell.attrs.colspan) || 1);
+  });
+  return count;
+}
+function getLegacyTableColumnWeights(table, fallback = 100) {
+  const weights = [];
+  const firstRow = table.firstChild;
+  if (!firstRow) return weights;
+  firstRow.forEach((cell) => {
+    const colspan = Math.max(1, Number(cell.attrs.colspan) || 1);
+    const colwidth = Array.isArray(cell.attrs.colwidth) ? cell.attrs.colwidth : [];
+    for (let index = 0; index < colspan; index += 1) {
+      weights.push(positiveNumber(colwidth[index], fallback));
+    }
+  });
+  return weights;
+}
+function getTableColumnRatios(table) {
+  const columnCount = getLogicalTableColumnCount(table);
+  const stored = parseColumnRatios(table.attrs.columnRatios);
+  return normalizeColumnRatios(
+    stored?.length === columnCount ? stored : getLegacyTableColumnWeights(table),
+    columnCount
+  );
+}
+function getResponsiveTableWidthBp(table) {
+  return clampResponsiveTableWidthBp(table.attrs.widthBp);
+}
+function getResponsiveTableOffsetBp(table) {
+  const width = getResponsiveTableWidthBp(table);
+  return resolveResponsiveTableOffsetBp(width, null, table.attrs.offsetBp);
+}
+function resolveResponsiveTableOffsetBp(widthBp, tableAlign, fallbackOffsetBp = 0) {
+  const availableGap = Math.max(
+    0,
+    TABLE_WIDTH_BASIS_POINTS - clampResponsiveTableWidthBp(widthBp)
+  );
+  if (tableAlign === "center") return Math.round(availableGap / 2);
+  if (tableAlign === "right") return availableGap;
+  if (tableAlign === "left") return 0;
+  return Math.min(availableGap, clampTableBasisPoints(fallbackOffsetBp, 0));
+}
+function insertResponsiveColumnRatio(ratios, insertIndex, sourceIndex) {
+  if (ratios.length === 0) return [TABLE_WIDTH_BASIS_POINTS];
+  const safeSourceIndex = Math.max(0, Math.min(sourceIndex, ratios.length - 1));
+  const next = [...ratios];
+  const sourceRatio = next[safeSourceIndex];
+  next.splice(Math.max(0, Math.min(insertIndex, next.length)), 0, sourceRatio);
+  return normalizeColumnRatios(next, next.length);
+}
+function deleteResponsiveColumnRatio(ratios, deleteIndex) {
+  if (ratios.length <= 1) return [];
+  const next = ratios.filter((_, index) => index !== deleteIndex);
+  return normalizeColumnRatios(next, next.length);
+}
+function moveResponsiveColumnRatio(ratios, from, to) {
+  if (from === to || from < 0 || from >= ratios.length || to < 0 || to >= ratios.length) return [...ratios];
+  const next = [...ratios];
+  const [moved] = next.splice(from, 1);
+  next.splice(to, 0, moved);
+  return normalizeColumnRatios(next, next.length);
+}
+function insertResponsiveColumnLayout(widthBp, ratios, insertIndex, sourceIndex) {
+  if (ratios.length === 0) {
+    return {
+      widthBp: clampResponsiveTableWidthBp(widthBp),
+      columnRatios: [TABLE_WIDTH_BASIS_POINTS]
+    };
+  }
+  const normalized = normalizeColumnRatios(ratios, ratios.length);
+  const safeSourceIndex = Math.max(0, Math.min(sourceIndex, normalized.length - 1));
+  const sourceRatio = normalized[safeSourceIndex];
+  return {
+    // Growing by the source column's share preserves every existing column's
+    // rendered width instead of squeezing the whole table back into 100%.
+    widthBp: clampResponsiveTableWidthBp(
+      clampResponsiveTableWidthBp(widthBp) * (TABLE_WIDTH_BASIS_POINTS + sourceRatio) / TABLE_WIDTH_BASIS_POINTS
+    ),
+    columnRatios: insertResponsiveColumnRatio(normalized, insertIndex, safeSourceIndex)
+  };
+}
+function deleteResponsiveColumnLayout(widthBp, ratios, deleteIndex) {
+  const normalized = normalizeColumnRatios(ratios, ratios.length);
+  if (normalized.length <= 1 || deleteIndex < 0 || deleteIndex >= normalized.length) {
+    return {
+      widthBp: clampResponsiveTableWidthBp(widthBp),
+      columnRatios: normalized.length <= 1 ? [] : normalized
+    };
+  }
+  const remainingRatio = TABLE_WIDTH_BASIS_POINTS - normalized[deleteIndex];
+  const nextWidthBp = clampResponsiveTableWidthBp(
+    clampResponsiveTableWidthBp(widthBp) * remainingRatio / TABLE_WIDTH_BASIS_POINTS
+  );
+  return {
+    // Deletion is the inverse operation: remaining columns keep their rendered
+    // widths while the table gives the removed column's space back.
+    widthBp: Math.abs(nextWidthBp - DEFAULT_RESPONSIVE_TABLE_WIDTH_BP) <= 1 ? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP : nextWidthBp,
+    columnRatios: deleteResponsiveColumnRatio(normalized, deleteIndex)
+  };
+}
+
 // src/components/UEditor/clipboard-tables.ts
 var DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR = "#ffffff";
 var DEFAULT_HTML_TABLE_TEXT_COLOR = "#000000";
@@ -1829,13 +1989,34 @@ function createNormalizedRowContent(row, columnCount, fillerCellAttrs) {
   }
   return content;
 }
-function createTableContent(rows, minColumnCount = 1, fillerCellAttrs) {
+function createTableContent(rows, minColumnCount = 1, fillerCellAttrs, layout) {
   const tableRows = rows.filter((row) => row.cells.length > 0);
   if (tableRows.length === 0) return null;
   const { positionedRows, columnCount } = normalizeTableRows(tableRows);
   if (columnCount < minColumnCount) return null;
+  const inferredColumnWeights = Array.from({ length: columnCount }, () => 100);
+  positionedRows.forEach((row) => {
+    row.cells.forEach(({ cell, colspan, startColumn }) => {
+      const width = colspan === 1 ? cell.attrs?.colwidth?.[0] : null;
+      if (typeof width === "number" && Number.isFinite(width) && width > 0) {
+        inferredColumnWeights[startColumn] = width;
+      }
+    });
+  });
+  const columnRatios = normalizeColumnRatios(
+    layout?.columnRatios?.length === columnCount ? layout.columnRatios : inferredColumnWeights,
+    columnCount
+  );
+  const widthBp = clampResponsiveTableWidthBp(layout?.widthBp, DEFAULT_RESPONSIVE_TABLE_WIDTH_BP);
+  const offsetBp = resolveResponsiveTableOffsetBp(widthBp, null, layout?.offsetBp);
   return {
     type: "table",
+    attrs: {
+      widthMode: "responsive",
+      widthBp,
+      offsetBp,
+      columnRatios
+    },
     content: positionedRows.map((row) => ({
       type: "tableRow",
       ...row.attrs ? { attrs: row.attrs } : {},
@@ -1856,9 +2037,22 @@ function getClipboardTableContent(dataTransfer) {
   if (tables.length !== 1 || hasMeaningfulContentOutsideTable(sourceBody)) return null;
   const table = tables[0];
   if (!(table instanceof HTMLTableElement)) return null;
-  return createTableContent(getHtmlTableRows(table, styleMap), 1, {
-    backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR
-  });
+  const storedWidthValue = table.getAttribute("data-table-width-bp");
+  const storedOffsetValue = table.getAttribute("data-table-offset-bp");
+  const storedWidthBp = Number(storedWidthValue);
+  const storedOffsetBp = Number(storedOffsetValue);
+  const widthBp = storedWidthValue !== null && Number.isFinite(storedWidthBp) && storedWidthBp > 0 ? storedWidthBp : parsePercentageToBasisPoints(table.getAttribute("data-table-width") ?? table.style.width) ?? DEFAULT_RESPONSIVE_TABLE_WIDTH_BP;
+  const offsetBp = storedOffsetValue !== null && Number.isFinite(storedOffsetBp) && storedOffsetBp >= 0 ? storedOffsetBp : parsePercentageToBasisPoints(table.getAttribute("data-table-offset") ?? table.style.marginLeft) ?? 0;
+  return createTableContent(
+    getHtmlTableRows(table, styleMap),
+    1,
+    { backgroundColor: DEFAULT_HTML_TABLE_CELL_BACKGROUND_COLOR },
+    {
+      widthBp,
+      offsetBp,
+      columnRatios: parseColumnRatios(table.getAttribute("data-table-column-ratios"))
+    }
+  );
 }
 function parseClipboardTsvRows(text) {
   const rows = [];
@@ -2986,10 +3180,14 @@ function findTableNodeInfoFromState(state, anchorPos) {
 function applyTableAlignment(editor, tableAlign, anchorPos) {
   const tableInfo = findTableNodeInfoFromState(editor.state, anchorPos);
   if (!tableInfo) return false;
+  const responsive = normalizeTableWidthMode(tableInfo.node.attrs.widthMode) === "responsive";
+  const widthBp = getResponsiveTableWidthBp(tableInfo.node);
+  const offsetBp = resolveResponsiveTableOffsetBp(widthBp, tableAlign);
   editor.view.dispatch(
     editor.state.tr.setNodeMarkup(tableInfo.pos, tableInfo.node.type, {
       ...tableInfo.node.attrs,
-      textAlign: tableAlign
+      textAlign: tableAlign,
+      ...responsive ? { offsetBp } : null
     })
   );
   const domAtTable = editor.view.domAtPos(Math.min(tableInfo.pos + 1, editor.state.doc.content.size)).node;
@@ -3006,8 +3204,8 @@ function applyTableAlignment(editor, tableAlign, anchorPos) {
     }
     if (tableAlign) {
       tableElement.setAttribute("data-table-align", tableAlign);
-      tableElement.style.marginLeft = tableAlign === "center" || tableAlign === "right" ? "auto" : "0";
-      tableElement.style.marginRight = tableAlign === "center" ? "auto" : tableAlign === "right" ? "0" : "auto";
+      tableElement.style.marginLeft = responsive ? formatBasisPointsAsPercentage(offsetBp) : tableAlign === "center" || tableAlign === "right" ? "auto" : "0";
+      tableElement.style.marginRight = responsive ? "auto" : tableAlign === "center" ? "auto" : tableAlign === "right" ? "0" : "auto";
     } else {
       tableElement.removeAttribute("data-table-align");
       tableElement.style.removeProperty("margin-left");
@@ -3264,7 +3462,24 @@ function duplicateTableColumnAt(editor, columnIndex, cellPos) {
       cells.splice(sourceCell.index + 1, 0, createCellCopyForColumnDuplicate(sourceCell.node));
       return rowInfo.node.type.create(rowInfo.node.attrs, cells);
     });
-    return tableNode.type.create(tableNode.attrs, rows);
+    const responsiveLayout = normalizeTableWidthMode(tableNode.attrs.widthMode) === "responsive" ? insertResponsiveColumnLayout(
+      getResponsiveTableWidthBp(tableNode),
+      getTableColumnRatios(tableNode),
+      columnIndex + 1,
+      columnIndex
+    ) : null;
+    const tableAttrs = responsiveLayout ? {
+      ...tableNode.attrs,
+      widthMode: "responsive",
+      widthBp: responsiveLayout.widthBp,
+      offsetBp: resolveResponsiveTableOffsetBp(
+        responsiveLayout.widthBp,
+        tableNode.attrs.textAlign,
+        tableNode.attrs.offsetBp
+      ),
+      columnRatios: responsiveLayout.columnRatios
+    } : tableNode.attrs;
+    return tableNode.type.create(tableAttrs, rows);
   });
 }
 function clearTableColumnAt(editor, columnIndex, cellPos) {
@@ -4769,6 +4984,23 @@ export {
   DropdownMenu_default,
   isSafeUEditorUrl,
   sanitizeUEditorUrl,
+  TABLE_WIDTH_BASIS_POINTS,
+  DEFAULT_RESPONSIVE_TABLE_WIDTH_BP,
+  clampResponsiveTableWidthBp,
+  normalizeTableWidthMode,
+  parsePercentageToBasisPoints,
+  formatBasisPointsAsPercentage,
+  parseColumnRatios,
+  normalizeColumnRatios,
+  getLogicalTableColumnCount,
+  getLegacyTableColumnWeights,
+  getTableColumnRatios,
+  getResponsiveTableWidthBp,
+  getResponsiveTableOffsetBp,
+  resolveResponsiveTableOffsetBp,
+  moveResponsiveColumnRatio,
+  insertResponsiveColumnLayout,
+  deleteResponsiveColumnLayout,
   DEFAULT_UEDITOR_IMAGE_MAX_FILE_SIZE,
   DEFAULT_UEDITOR_IMAGE_MIME_TYPES,
   ClipboardImages,
@@ -4829,4 +5061,4 @@ export {
   EditorToolbar,
   UEDITOR_PROSEMIRROR_CLASS_NAME
 };
-//# sourceMappingURL=chunk-KTOXCD6J.js.map
+//# sourceMappingURL=chunk-5QWYO527.js.map