Preserve QWord subscript superscript in DOCX

This commit is contained in:
Курнат Андрей
2026-06-02 07:24:42 +03:00
parent 7ace47dd2a
commit b8c347142a
4 changed files with 100 additions and 3 deletions
+40
View File
@@ -119,6 +119,25 @@ describe("wordOffice helpers", () => {
]);
});
it("preserves HTML subscript and superscript as inline runs for DOCX", () => {
const blocks = htmlToWordBlocks('<p>H<sub>2</sub>O m<sup>2</sup> <span style="vertical-align: super;">x</span></p>');
expect(blocks).toEqual([
{
type: "paragraph",
text: "H2O m2 x",
runs: [
{ text: "H" },
{ text: "2", subscript: true },
{ text: "O m" },
{ text: "2", superscript: true },
{ text: " " },
{ text: "x", superscript: true }
]
}
]);
});
it("сохраняет выравнивание абзацев и заголовков для DOCX", () => {
const blocks = htmlToWordBlocks(`
<h1 align="right">Итоги</h1>
@@ -405,6 +424,27 @@ describe("wordOffice helpers", () => {
expect(wordInlineRunsToTextRunOptions([{ text: "Deleted", strike: true }])).toEqual([{ text: "Deleted", strike: true }]);
});
it("converts subscript and superscript inline runs into docx parameters", () => {
expect(
wordInlineRunsToTextRunOptions([
{ text: "2", subscript: true },
{ text: "2", superscript: true }
])
).toEqual([
{ text: "2", subScript: true },
{ text: "2", superScript: true }
]);
});
it("writes subscript and superscript to exported DOCX XML", async () => {
const blob = await exportDocxBlob("Indexes.docx", "<p>H<sub>2</sub>O m<sup>2</sup></p>");
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = await zip.file("word/document.xml")?.async("string");
expect(documentXml).toMatch(/<w:vertAlign\b[^>]*w:val="subscript"[^>]*\/>/);
expect(documentXml).toMatch(/<w:vertAlign\b[^>]*w:val="superscript"[^>]*\/>/);
});
it("записывает зачеркнутый текст в XML экспортированного DOCX", async () => {
const blob = await exportDocxBlob("Зачеркнутый.docx", "<p><s>Удаленный текст</s></p>");
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
+35 -1
View File
@@ -11,6 +11,8 @@ export interface WordInlineRun {
italics?: boolean;
underline?: boolean;
strike?: boolean;
subscript?: boolean;
superscript?: boolean;
href?: string;
color?: string;
highlightColor?: string;
@@ -415,6 +417,11 @@ function wordInlineRunToTextRunOption(run: WordInlineRun) {
if (run.strike) {
options.strike = true;
}
if (run.superscript) {
options.superScript = true;
} else if (run.subscript) {
options.subScript = true;
}
if (run.color) {
options.color = run.color;
}
@@ -734,6 +741,11 @@ function cssFontFamilyStyleValue(style: string) {
return normalizedFontFamily(firstFamily);
}
function cssVerticalAlignValue(style: string) {
const raw = /(?:^|;)\s*vertical-align\s*:\s*([^;]+)/i.exec(style)?.[1]?.trim().toLowerCase() ?? "";
return ["sub", "super"].includes(raw) ? raw : "";
}
function normalizedCssColor(value: string) {
const raw = value.trim().toLowerCase();
if (!raw || ["transparent", "inherit", "initial", "currentcolor", "auto"].includes(raw)) {
@@ -1326,7 +1338,10 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR
const fontSize = docxRunFontSize(properties);
const fontFamily = docxRunFontFamily(properties);
const hasStrike = hasDocxBoolean(properties, "w:strike") || hasDocxBoolean(properties, "w:dstrike");
const hasInlineColorOrHighlight = Boolean(color || highlightColor || fontSize || fontFamily || hasStrike);
const verticalAlign = docxRunVerticalAlign(properties);
const hasSubscript = verticalAlign === "subscript";
const hasSuperscript = verticalAlign === "superscript";
const hasInlineColorOrHighlight = Boolean(color || highlightColor || fontSize || fontFamily || hasStrike || hasSubscript || hasSuperscript);
const hasLineBreak = text.includes("\n");
const hasPageBreak = text.includes(pageBreakMarker);
const hasTab = text.includes("\t");
@@ -1360,6 +1375,11 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR
if (styles.length > 0) {
html = `<span style="${styles.join(" ")}">${html}</span>`;
}
if (hasSubscript) {
html = `<sub>${html}</sub>`;
} else if (hasSuperscript) {
html = `<sup>${html}</sup>`;
}
}
return { html: `${imageHtml}${text ? html : ""}`, hasInlineColorOrHighlight, hasImage: Boolean(imageHtml), hasLineBreak, hasPageBreak, hasTab };
@@ -1530,6 +1550,10 @@ function docxRunFontFamily(properties: XmlRecord) {
);
}
function docxRunVerticalAlign(properties: XmlRecord) {
return docxAttribute(childRecord(properties, "w:vertAlign"), "w:val").trim().toLowerCase();
}
function normalizedDocxHexColor(value: string) {
const normalized = value.trim().toUpperCase();
if (!normalized || normalized === "AUTO" || normalized === "NONE") {
@@ -1653,12 +1677,19 @@ function formatForElement(element: Element, inherited: InlineFormat): InlineForm
cssColorValue(style, "background-color") || cssColorValue(style, "background") || inherited.highlightColor;
const fontSize = cssFontSizeValue(style) ?? inherited.fontSize;
const fontFamily = cssFontFamilyStyleValue(style) || inherited.fontFamily;
const verticalAlign = cssVerticalAlignValue(style);
const isSubscript = tagName === "sub" || verticalAlign === "sub";
const isSuperscript = tagName === "sup" || verticalAlign === "super";
const subscript = isSubscript ? true : isSuperscript ? false : inherited.subscript;
const superscript = isSuperscript ? true : isSubscript ? false : inherited.superscript;
return cleanInlineFormat({
bold: inherited.bold || tagName === "b" || tagName === "strong" || /font-weight\s*:\s*(bold|[6-9]00)\b/i.test(style),
italics: inherited.italics || tagName === "i" || tagName === "em" || /font-style\s*:\s*italic\b/i.test(style),
underline: inherited.underline || tagName === "u" || /text-decoration(?:-line)?\s*:[^;]*underline/i.test(style),
strike: inherited.strike || tagName === "s" || tagName === "strike" || tagName === "del" || /text-decoration(?:-line)?\s*:[^;]*line-through/i.test(style),
...(subscript ? { subscript } : {}),
...(superscript ? { superscript } : {}),
...(href ? { href } : {}),
...(color ? { color } : {}),
...(highlightColor ? { highlightColor } : {}),
@@ -1700,6 +1731,8 @@ function sameInlineFormat(first: InlineFormat, second: InlineFormat) {
Boolean(first.italics) === Boolean(second.italics) &&
Boolean(first.underline) === Boolean(second.underline) &&
Boolean(first.strike) === Boolean(second.strike) &&
Boolean(first.subscript) === Boolean(second.subscript) &&
Boolean(first.superscript) === Boolean(second.superscript) &&
(first.href ?? "") === (second.href ?? "") &&
(first.color ?? "") === (second.color ?? "") &&
(first.highlightColor ?? "") === (second.highlightColor ?? "") &&
@@ -1714,6 +1747,7 @@ function cleanInlineFormat(format: InlineFormat): InlineFormat {
...(format.italics ? { italics: true } : {}),
...(format.underline ? { underline: true } : {}),
...(format.strike ? { strike: true } : {}),
...(format.superscript ? { superscript: true } : format.subscript ? { subscript: true } : {}),
...(format.href ? { href: format.href } : {}),
...(format.color ? { color: format.color } : {}),
...(format.highlightColor ? { highlightColor: format.highlightColor } : {}),
+23
View File
@@ -128,6 +128,29 @@ describe("wordOffice DOCX import", () => {
]);
});
it("imports DOCX subscript and superscript from OOXML", async () => {
const blob = await exportDocxBlob("Indexes.docx", "<p>H<sub>2</sub>O m<sup>2</sup></p>");
const file = new File([blob], "Indexes.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(file);
expect(imported.html).toContain("<sub>2</sub>");
expect(imported.html).toContain("<sup>2</sup>");
expect(htmlToWordBlocks(imported.html)).toEqual([
{
type: "paragraph",
text: "H2O m2",
runs: [
{ text: "H" },
{ text: "2", subscript: true },
{ text: "O m" },
{ text: "2", superscript: true }
]
}
]);
});
it("imports DOCX line breaks from OOXML", async () => {
const blob = await exportDocxBlob("LineBreak.docx", "<p>Line 1<br>Line 2</p>");
const file = new File([blob], "LineBreak.docx", {