Preserve QExcell text wrapping

2026-06-01 07:34:23 +03:00
parent a4314be285
commit 4822ba84a0
6 changed files with 105 additions and 24 deletions
@@ -22,7 +22,8 @@ import {
  Strikethrough,
  Trash2,
  Type,
-  Underline
+  Underline,
+  WrapText
 } from "lucide-react";
 import type { CellFormat, SheetChart, SheetChartType, Workbook } from "../../types";
 import { cellId, columnLabelsForCount, evaluateCell, formatCellValueForDisplay, mergedCellInfo, summarizeColumn, usedSheetBounds } from "../../utils/spreadsheet";
@@ -123,6 +124,7 @@ function normalizedCellFormat(format: CellFormat): CellFormat | undefined {
    ...(textColor ? { textColor } : {}),
    ...(fillColor ? { fillColor } : {}),
    ...(horizontalAlign ? { horizontalAlign } : {}),
+    ...(format.wrapText ? { wrapText: true } : {}),
    ...(numberFormat ? { numberFormat } : {})
  };

@@ -139,7 +141,8 @@ function cellInputStyle(format?: CellFormat): CSSProperties {
    ...(format?.fontFamily ? { fontFamily: format.fontFamily } : {}),
    ...(format?.textColor ? { color: `#${format.textColor}` } : {}),
    ...(format?.fillColor ? { backgroundColor: `#${format.fillColor}` } : {}),
-    ...(format?.horizontalAlign ? { textAlign: format.horizontalAlign } : {})
+    ...(format?.horizontalAlign ? { textAlign: format.horizontalAlign } : {}),
+    ...(format?.wrapText ? { whiteSpace: "pre-wrap", overflowWrap: "anywhere" } : {})
  };
 }

@@ -261,7 +264,7 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
    });
  }

-  function toggleSelectedFormat(key: "bold" | "italics" | "underline" | "strike") {
+  function toggleSelectedFormat(key: "bold" | "italics" | "underline" | "strike" | "wrapText") {
    updateCellFormat(selectedCell, { [key]: !selectedCellFormat[key] });
  }

@@ -527,6 +530,15 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
                </button>
              );
            })}
+            <button
+              className={`icon-button format-toggle ${selectedCellFormat.wrapText ? "is-active" : ""}`.trim()}
+              type="button"
+              onClick={() => toggleSelectedFormat("wrapText")}
+              title="Перенос текста"
+              aria-label="Перенос текста"
+            >
+              <WrapText size={16} />
+            </button>
            <select
              value={selectedCellFormat.fontFamily ?? ""}
              onChange={(event) => updateCellFormat(selectedCell, { fontFamily: event.target.value || undefined })}
@@ -641,18 +653,29 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
                    return (
                      <td
                        key={id}
-                        className={`${selectedCell === id ? "is-selected" : ""} ${merge ? "is-merged" : ""} ${hyperlink ? "is-linked" : ""} ${cellFormat ? "is-formatted" : ""}`.trim()}
+                        className={`${selectedCell === id ? "is-selected" : ""} ${merge ? "is-merged" : ""} ${hyperlink ? "is-linked" : ""} ${cellFormat ? "is-formatted" : ""} ${cellFormat?.wrapText ? "is-wrapped" : ""}`.trim()}
                        colSpan={merge?.columnSpan}
                        rowSpan={merge?.rowSpan}
                      >
-                        <input
-                          value={selectedCell === id ? raw : display}
-                          aria-label={`Ячейка ${id}`}
-                          title={hyperlink || undefined}
-                          style={cellInputStyle(cellFormat)}
-                          onFocus={() => setSelectedCell(id)}
-                          onChange={(event) => updateCell(id, event.target.value)}
-                        />
+                        {cellFormat?.wrapText ? (
+                          <textarea
+                            value={selectedCell === id ? raw : display}
+                            aria-label={`Ячейка ${id}`}
+                            title={hyperlink || undefined}
+                            style={cellInputStyle(cellFormat)}
+                            onFocus={() => setSelectedCell(id)}
+                            onChange={(event) => updateCell(id, event.target.value)}
+                          />
+                        ) : (
+                          <input
+                            value={selectedCell === id ? raw : display}
+                            aria-label={`Ячейка ${id}`}
+                            title={hyperlink || undefined}
+                            style={cellInputStyle(cellFormat)}
+                            onFocus={() => setSelectedCell(id)}
+                            onChange={(event) => updateCell(id, event.target.value)}
+                          />
+                        )}
                      </td>
                    );
                  })}