Indented paragraph
+ `); + + expect(blocks).toEqual([ + { type: "heading", level: 1, text: "Title", runs: [{ text: "Title" }], indent: { left: 720, firstLine: 360 } }, + { type: "paragraph", text: "Indented paragraph", runs: [{ text: "Indented paragraph" }], indent: { left: 720, hanging: 240 } } + ]); + }); + + it("записывает отступы абзацев в w:ind экспортированного DOCX", async () => { + const blob = await exportDocxBlob( + "Indent.docx", + 'Indented
Hanging
' + ); + const zip = await JSZip.loadAsync(await blob.arrayBuffer()); + const documentXml = await zip.file("word/document.xml")?.async("string"); + + expect(documentXml).toMatch(/Готово
\n")).toBe("Готово
"); }); diff --git a/src/io/wordOffice.ts b/src/io/wordOffice.ts index c7147b8..bf4a96b 100644 --- a/src/io/wordOffice.ts +++ b/src/io/wordOffice.ts @@ -33,9 +33,15 @@ export interface WordImageBlock { export type WordParagraphAlignment = "left" | "center" | "right" | "both"; +export interface WordParagraphIndent { + left?: number; + firstLine?: number; + hanging?: number; +} + export type WordBlock = - | { type: "heading"; level: 1 | 2; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; bookmark?: string } - | { type: "paragraph"; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; bookmark?: string } + | { type: "heading"; level: 1 | 2; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; indent?: WordParagraphIndent; bookmark?: string } + | { type: "paragraph"; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; indent?: WordParagraphIndent; bookmark?: string } | { type: "list"; ordered: boolean; items: WordListItem[] } | { type: "table"; rows: string[][] } | WordImageBlock; @@ -234,6 +240,7 @@ export function htmlToWordBlocks(html: string): WordBlock[] { const runs = elementInlineRuns(node); const text = inlineRunsText(runs); const alignment = paragraphAlignmentFromElement(node); + const indent = paragraphIndentFromElement(node); const bookmark = bookmarkFromElement(node); if (text) { blocks.push({ @@ -242,6 +249,7 @@ export function htmlToWordBlocks(html: string): WordBlock[] { text, runs, ...(alignment ? { alignment } : {}), + ...(indent ? { indent } : {}), ...(bookmark ? { bookmark } : {}) }); } @@ -292,6 +300,7 @@ function wordBlockToDocxChildren(block: WordBlock, docx: DocxModule) { heading: block.level === 1 ? docx.HeadingLevel.HEADING_1 : docx.HeadingLevel.HEADING_2, spacing: { after: 160 }, ...docxAlignmentOption(block.alignment, docx), + ...docxIndentOption(block.indent), children: bookmarkDocxChildren(block.bookmark, children, docx) }) ]; @@ -303,6 +312,7 @@ function wordBlockToDocxChildren(block: WordBlock, docx: DocxModule) { new docx.Paragraph({ spacing: { after: 160 }, ...docxAlignmentOption(block.alignment, docx), + ...docxIndentOption(block.indent), children: bookmarkDocxChildren(block.bookmark, children, docx) }) ]; @@ -481,6 +491,22 @@ function docxAlignmentOption(alignment: WordParagraphAlignment | undefined, docx return value ? { alignment: value } : {}; } +function docxIndentOption(indent: WordParagraphIndent | undefined) { + const normalized = normalizedParagraphIndent(indent); + return Object.keys(normalized).length > 0 ? { indent: normalized } : {}; +} + +function normalizedParagraphIndent(indent: WordParagraphIndent | undefined) { + const left = normalizedTwips(indent?.left); + const firstLine = normalizedTwips(indent?.firstLine); + const hanging = normalizedTwips(indent?.hanging); + return { + ...(left ? { left } : {}), + ...(firstLine ? { firstLine } : {}), + ...(!firstLine && hanging ? { hanging } : {}) + }; +} + function docxAlignmentValue(alignment: WordParagraphAlignment | undefined, docx: DocxModule) { if (!alignment) { return ""; @@ -546,6 +572,7 @@ function tableRows(table: Element) { function paragraphElementToBlocks(element: Element): WordBlock[] { const segments = collectInlineSegments(Array.from(element.childNodes), {}); const alignment = paragraphAlignmentFromElement(element); + const indent = paragraphIndentFromElement(element); const bookmark = bookmarkFromElement(element); const blocks: WordBlock[] = []; let pendingRuns: WordInlineRun[] = []; @@ -561,6 +588,7 @@ function paragraphElementToBlocks(element: Element): WordBlock[] { text, runs, ...(alignment ? { alignment } : {}), + ...(indent ? { indent } : {}), ...(bookmark && !bookmarkApplied ? { bookmark } : {}) }); bookmarkApplied = true; @@ -596,6 +624,18 @@ function paragraphAlignmentFromElement(element: Element): WordParagraphAlignment return normalized === "justify" ? "both" : undefined; } +function paragraphIndentFromElement(element: Element): WordParagraphIndent | undefined { + const style = element.getAttribute("style") ?? ""; + const left = cssTwipsValue(style, "margin-left"); + const textIndent = cssTwipsValue(style, "text-indent"); + const indent = { + ...(left && left > 0 ? { left } : {}), + ...(textIndent && textIndent > 0 ? { firstLine: textIndent } : {}), + ...(textIndent && textIndent < 0 ? { hanging: Math.abs(textIndent) } : {}) + }; + return Object.keys(indent).length > 0 ? indent : undefined; +} + function bookmarkFromElement(element: Element) { return normalizedDocxAnchor(element.getAttribute("id") || element.getAttribute("name")); } @@ -604,6 +644,40 @@ function cssTextAlignValue(style: string) { return /(?:^|;)\s*text-align\s*:\s*([^;]+)/i.exec(style)?.[1] ?? ""; } +function cssTwipsValue(style: string, property: "margin-left" | "text-indent") { + const raw = new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1]?.trim().toLowerCase() ?? ""; + return cssLengthToTwips(raw); +} + +function cssLengthToTwips(raw: string) { + if (!raw || ["inherit", "initial", "unset", "revert", "auto"].includes(raw)) { + return undefined; + } + + const match = /^(-?[0-9]+(?:\.[0-9]+)?)(pt|px|in|cm|mm)$/i.exec(raw); + if (!match) { + return undefined; + } + + const value = Number.parseFloat(match[1]); + if (!Number.isFinite(value) || value === 0) { + return undefined; + } + + const unit = match[2].toLowerCase(); + const twips = + unit === "pt" + ? value * 20 + : unit === "px" + ? value * 15 + : unit === "in" + ? value * 1440 + : unit === "cm" + ? (value * 1440) / 2.54 + : (value * 1440) / 25.4; + return Math.round(twips); +} + function cssColorValue(style: string, property: "color" | "background" | "background-color") { const value = new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1] ?? ""; return normalizedCssColor(value); @@ -877,7 +951,23 @@ function docxParagraphTagName(properties: XmlRecord) { function docxParagraphStyleAttribute(properties: XmlRecord) { const alignment = docxAttribute(childRecord(properties, "w:jc"), "w:val"); const htmlAlignment = alignment === "both" ? "justify" : alignment; - return ["left", "center", "right", "justify"].includes(htmlAlignment) ? `text-align: ${htmlAlignment};` : ""; + const styles = [ + ["left", "center", "right", "justify"].includes(htmlAlignment) ? `text-align: ${htmlAlignment};` : "", + ...docxParagraphIndentStyles(properties) + ].filter(Boolean); + return styles.join(" "); +} + +function docxParagraphIndentStyles(properties: XmlRecord) { + const indent = childRecord(properties, "w:ind"); + const left = docxTwipsAttribute(indent, ["w:left", "w:start"]); + const firstLine = docxTwipsAttribute(indent, ["w:firstLine"]); + const hanging = docxTwipsAttribute(indent, ["w:hanging"]); + return [ + left ? `margin-left: ${formatPointSize(left / 20)}pt;` : "", + firstLine ? `text-indent: ${formatPointSize(firstLine / 20)}pt;` : "", + !firstLine && hanging ? `text-indent: -${formatPointSize(hanging / 20)}pt;` : "" + ].filter(Boolean); } function orderedDocxParagraphBookmark(paragraph: unknown) { @@ -1321,6 +1411,17 @@ function docxAttribute(record: XmlRecord, name: string) { return typeof value === "string" || typeof value === "number" ? String(value) : ""; } +function docxTwipsAttribute(record: XmlRecord, names: string[]) { + for (const name of names) { + const value = normalizedTwips(docxAttribute(record, name)); + if (value) { + return value; + } + } + + return undefined; +} + function xmlNodeText(value: unknown): string { if (typeof value === "string" || typeof value === "number") { return String(value); @@ -1467,6 +1568,15 @@ function normalizedPointSize(value: unknown) { return Math.round(numeric * 2) / 2; } +function normalizedTwips(value: unknown) { + const numeric = typeof value === "number" ? value : Number.parseFloat(String(value ?? "")); + if (!Number.isFinite(numeric) || numeric <= 0) { + return undefined; + } + + return Math.min(31680, Math.round(numeric)); +} + function formatPointSize(value: number) { return Number.isInteger(value) ? String(value) : value.toFixed(1); } diff --git a/src/io/wordOfficeImport.test.ts b/src/io/wordOfficeImport.test.ts index 7f0d771..eb3648c 100644 --- a/src/io/wordOfficeImport.test.ts +++ b/src/io/wordOfficeImport.test.ts @@ -256,4 +256,22 @@ describe("wordOffice DOCX import", () => { rows: [["Stage", "Done"]] }); }); + + it("imports DOCX paragraph indentation from OOXML", async () => { + const blob = await exportDocxBlob( + "Indent.docx", + 'Indented
Hanging
' + ); + const file = new File([blob], "Indent.docx", { + type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document" + }); + const imported = await importDocxFile(file); + + expect(imported.html).toContain("margin-left: 36pt; text-indent: 18pt;"); + expect(imported.html).toContain("margin-left: 36pt; text-indent: -12pt;"); + expect(htmlToWordBlocks(imported.html)).toEqual([ + { type: "paragraph", text: "Indented", runs: [{ text: "Indented" }], indent: { left: 720, firstLine: 360 } }, + { type: "paragraph", text: "Hanging", runs: [{ text: "Hanging" }], indent: { left: 720, hanging: 240 } } + ]); + }); });