Крупный текст
'); const zip = await JSZip.loadAsync(await blob.arrayBuffer()); @@ -224,6 +228,26 @@ describe("wordOffice helpers", () => { expect(documentXml).toContain('w:sz w:val="36"'); }); + it("сохраняет семейство шрифта из HTML inline-стилей для DOCX", () => { + const blocks = htmlToWordBlocks('Arial text
'); + + expect(blocks).toEqual([ + { + type: "paragraph", + text: "Arial text", + runs: [{ text: "Arial text", fontFamily: "Arial" }] + } + ]); + }); + + it("записывает семейство шрифта в XML экспортированного DOCX", async () => { + const blob = await exportDocxBlob("Шрифт.docx", 'Текст Arial
'); + const zip = await JSZip.loadAsync(await blob.arrayBuffer()); + const documentXml = await zip.file("word/document.xml")?.async("string"); + + expect(documentXml).toContain('w:ascii="Arial"'); + }); + it("нормализует HTML после импорта DOCX", () => { expect(normalizeImportedDocxHtml("Готово
\n")).toBe("Готово
"); }); diff --git a/src/io/wordOffice.ts b/src/io/wordOffice.ts index 48babad..2c2e951 100644 --- a/src/io/wordOffice.ts +++ b/src/io/wordOffice.ts @@ -14,6 +14,7 @@ export interface WordInlineRun { color?: string; highlightColor?: string; fontSize?: number; + fontFamily?: string; } export interface WordListItem { @@ -362,6 +363,9 @@ function wordInlineRunToTextRunOption(run: WordInlineRun) { if (fontSize) { options.size = Math.round(fontSize * 2); } + if (run.fontFamily) { + options.font = run.fontFamily; + } return options; } @@ -520,6 +524,15 @@ function cssFontSizeValue(style: string) { return normalizedPointSize(match[2].toLowerCase() === "px" ? value * 0.75 : value); } +function cssFontFamilyStyleValue(style: string) { + const raw = /(?:^|;)\s*font-family\s*:\s*([^;]+)/i.exec(style)?.[1] ?? ""; + const firstFamily = raw + .split(",") + .map((value) => value.trim().replace(/^["']|["']$/g, "")) + .find(Boolean); + return normalizedFontFamily(firstFamily); +} + function normalizedCssColor(value: string) { const raw = value.trim().toLowerCase(); if (!raw || ["transparent", "inherit", "initial", "currentcolor", "auto"].includes(raw)) { @@ -667,7 +680,8 @@ function docxRunToHtml(run: unknown) { const color = docxRunColor(properties); const highlightColor = docxRunHighlightColor(properties); const fontSize = docxRunFontSize(properties); - const hasInlineColorOrHighlight = Boolean(color || highlightColor || fontSize); + const fontFamily = docxRunFontFamily(properties); + const hasInlineColorOrHighlight = Boolean(color || highlightColor || fontSize || fontFamily); let html = escapeHtml(text); if (!text) { @@ -687,7 +701,8 @@ function docxRunToHtml(run: unknown) { const styles = [ color ? `color: #${color};` : "", highlightColor ? `background-color: #${highlightColor};` : "", - fontSize ? `font-size: ${formatPointSize(fontSize)}pt;` : "" + fontSize ? `font-size: ${formatPointSize(fontSize)}pt;` : "", + fontFamily ? `font-family: ${cssFontFamilyValue(fontFamily)};` : "" ].filter(Boolean); if (styles.length > 0) { @@ -747,6 +762,13 @@ function docxRunFontSize(properties: XmlRecord) { return normalizedPointSize(value / 2); } +function docxRunFontFamily(properties: XmlRecord) { + const fonts = childRecord(properties, "w:rFonts"); + return normalizedFontFamily( + docxAttribute(fonts, "w:ascii") || docxAttribute(fonts, "w:hAnsi") || docxAttribute(fonts, "w:eastAsia") || docxAttribute(fonts, "w:cs") + ); +} + function normalizedDocxHexColor(value: string) { const normalized = value.trim().toUpperCase(); if (!normalized || normalized === "AUTO" || normalized === "NONE") { @@ -842,6 +864,7 @@ function formatForElement(element: Element, inherited: InlineFormat): InlineForm const highlightColor = cssColorValue(style, "background-color") || cssColorValue(style, "background") || inherited.highlightColor; const fontSize = cssFontSizeValue(style) ?? inherited.fontSize; + const fontFamily = cssFontFamilyStyleValue(style) || inherited.fontFamily; return cleanInlineFormat({ bold: inherited.bold || tagName === "b" || tagName === "strong" || /font-weight\s*:\s*(bold|[6-9]00)\b/i.test(style), @@ -850,7 +873,8 @@ function formatForElement(element: Element, inherited: InlineFormat): InlineForm ...(href ? { href } : {}), ...(color ? { color } : {}), ...(highlightColor ? { highlightColor } : {}), - ...(fontSize ? { fontSize } : {}) + ...(fontSize ? { fontSize } : {}), + ...(fontFamily ? { fontFamily } : {}) }); } @@ -889,7 +913,8 @@ function sameInlineFormat(first: InlineFormat, second: InlineFormat) { (first.href ?? "") === (second.href ?? "") && (first.color ?? "") === (second.color ?? "") && (first.highlightColor ?? "") === (second.highlightColor ?? "") && - (first.fontSize ?? 0) === (second.fontSize ?? 0) + (first.fontSize ?? 0) === (second.fontSize ?? 0) && + (first.fontFamily ?? "") === (second.fontFamily ?? "") ); } @@ -901,7 +926,8 @@ function cleanInlineFormat(format: InlineFormat): InlineFormat { ...(format.href ? { href: format.href } : {}), ...(format.color ? { color: format.color } : {}), ...(format.highlightColor ? { highlightColor: format.highlightColor } : {}), - ...(format.fontSize ? { fontSize: format.fontSize } : {}) + ...(format.fontSize ? { fontSize: format.fontSize } : {}), + ...(format.fontFamily ? { fontFamily: format.fontFamily } : {}) }; } @@ -918,6 +944,19 @@ function formatPointSize(value: number) { return Number.isInteger(value) ? String(value) : value.toFixed(1); } +function normalizedFontFamily(value?: string) { + const normalized = value?.trim().replace(/^["']|["']$/g, "") ?? ""; + if (!normalized || normalized.length > 80 || /[<>;]/.test(normalized)) { + return ""; + } + + return normalized; +} + +function cssFontFamilyValue(value: string) { + return `'${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}'`; +} + function normalizedHyperlinkTarget(value?: string | null) { const raw = value?.trim(); if (!raw) { diff --git a/src/io/wordOfficeImport.test.ts b/src/io/wordOfficeImport.test.ts index 53f3c65..19a0650 100644 --- a/src/io/wordOfficeImport.test.ts +++ b/src/io/wordOfficeImport.test.ts @@ -57,4 +57,21 @@ describe("wordOffice DOCX import", () => { } ]); }); + + it("imports DOCX font family from OOXML", async () => { + const blob = await exportDocxBlob("FontFamily.docx", 'Arial text
'); + const file = new File([blob], "FontFamily.docx", { + type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" + }); + const imported = await importDocxFile(file); + + expect(imported.html).toContain("font-family: 'Arial';"); + expect(htmlToWordBlocks(imported.html)).toEqual([ + { + type: "paragraph", + text: "Arial text", + runs: [{ text: "Arial text", fontFamily: "Arial" }] + } + ]); + }); });