Compare commits

..

30 Commits

Author SHA1 Message Date
Курнат Андрей 74b81341e6 Add Ollama Gemma QWord task prompt 2026-06-10 19:57:58 +03:00
Курнат Андрей 5487d04cca Add QPowerPoint slide size support 2026-06-04 22:24:33 +03:00
Курнат Андрей 5dfe97013d Add QExcell XLSX page setup support 2026-06-04 22:08:58 +03:00
Курнат Андрей 96aff5b76e Import DOCX page setup into QWord 2026-06-04 21:58:24 +03:00
Курнат Андрей 217dafb760 Preserve QWord caret during input 2026-06-04 21:53:31 +03:00
Курнат Андрей 3719cb7ec8 Export QWord page setup to DOCX 2026-06-04 21:40:17 +03:00
Курнат Андрей e5cd922f7d Persist QWord page setup in documents 2026-06-04 21:35:37 +03:00
Курнат Андрей c1f8162afd Add QWord page setup controls 2026-06-04 21:30:19 +03:00
Курнат Андрей 0b993b7709 Respect QWord page breaks in page layout 2026-06-04 21:24:43 +03:00
Курнат Андрей 500d368af4 Sync QWord statusbar view modes 2026-06-04 21:20:29 +03:00
Курнат Андрей 5def87e738 Preserve DOCX table column spans 2026-06-04 21:14:53 +03:00
Курнат Андрей 74db17e348 Sync app window title with active file 2026-06-04 21:06:02 +03:00
Курнат Андрей 626576e156 Preserve QWord caret while typing 2026-06-04 21:00:40 +03:00
Курнат Андрей c16df37c95 Wire quick access commands 2026-06-02 20:39:30 +03:00
Курнат Андрей 231bb6c076 Support XLSX 1904 date imports 2026-06-02 19:42:51 +03:00
Курнат Андрей 6251c70ddc Normalize QExcell sheet names for XLSX export 2026-06-02 19:13:50 +03:00
Курнат Андрей e857beabd0 Respect DOCX underline none on import 2026-06-02 12:53:58 +03:00
Курнат Андрей 81a0de2ba9 Export QOutlook inline images as related CID parts 2026-06-02 12:26:58 +03:00
Курнат Андрей d86e0470c2 Embed QOutlook inline CID images 2026-06-02 12:22:22 +03:00
Курнат Андрей be7a0e5c98 Render QWord print pages as separate sheets 2026-06-02 09:27:13 +03:00
Курнат Андрей c72e78ac82 Keep QWord ribbon above document viewport 2026-06-02 09:19:05 +03:00
Курнат Андрей ddb04c32a4 Preserve QWord table cell inline formatting 2026-06-02 09:12:40 +03:00
Курнат Андрей e5537b726e Preserve empty QWord tables in DOCX export 2026-06-02 09:06:22 +03:00
Курнат Андрей a9f9aa6cca Add QWord table structure commands 2026-06-02 09:01:20 +03:00
Курнат Андрей 26bf4b5873 Add QWord table insertion command 2026-06-02 08:32:09 +03:00
Курнат Андрей 06c6a99e6d Add functional QWord ribbon tabs 2026-06-02 08:25:50 +03:00
Курнат Андрей 24fbae8a01 Tighten QWord ribbon layout 2026-06-02 08:15:45 +03:00
Курнат Андрей c9b09565b3 Preserve QWord line spacing in DOCX 2026-06-02 08:11:00 +03:00
Курнат Андрей f15467b8a1 Preserve QWord paragraph spacing in DOCX 2026-06-02 08:03:03 +03:00
Курнат Андрей f5ab0448c7 Preserve QPowerPoint text alignment in PPTX 2026-06-02 07:54:06 +03:00
26 changed files with 3486 additions and 200 deletions
+3 -3
View File
@@ -44,9 +44,9 @@ npm run build
## Поддержка форматов
- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает заголовки Word `Heading 1``Heading 6`, стиль Word `Quote` как HTML `blockquote`, выравнивание, отступы `w:ind`, переносы строк, разрывы страниц, табуляцию, закладки, внешние и внутренние гиперссылки-якоря, маркированные и нумерованные списки через `w:numPr`/`numbering.xml`, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, нижний и верхний индекс через `w:vertAlign`, а при экспорте DOCX сохраняются заголовки HTML `h1``h6`, цитаты HTML `blockquote` как стиль Word `Quote`, абзацы, переносы строк, разрывы страниц, табуляция, выравнивание и отступы абзацев из HTML `margin-left`/`text-indent`, закладки из HTML `id`, списки, простые таблицы, внешние и внутренние гиперссылки-якоря, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, нижний и верхний индекс, цвет текста, подсветка, размер и семейство шрифта.
- QWord открывает `.docx` и сохраняет `.docx`; при импорте базовых DOCX-абзацев читает заголовки Word `Heading 1``Heading 6`, стиль Word `Quote` как HTML `blockquote`, выравнивание, отступы `w:ind`, интервалы абзацев `w:spacing` `before`/`after` и межстрочный интервал `w:spacing` `line`/`lineRule`, переносы строк, разрывы страниц, табуляцию, закладки, внешние и внутренние гиперссылки-якоря, маркированные и нумерованные списки через `w:numPr`/`numbering.xml`, простые таблицы, базовые растровые изображения, явные цвета текста, подсветку, размер и семейство шрифта из OOXML, нижний и верхний индекс через `w:vertAlign`, а при экспорте DOCX сохраняются заголовки HTML `h1``h6`, цитаты HTML `blockquote` как стиль Word `Quote`, абзацы, переносы строк, разрывы страниц, табуляция, выравнивание, отступы абзацев из HTML `margin-left`/`text-indent`, интервалы из HTML `margin-top`/`margin-bottom` и межстрочный интервал из HTML `line-height`, закладки из HTML `id`, списки, простые таблицы, внешние и внутренние гиперссылки-якоря, базовые растровые изображения и базовое inline-форматирование текста: полужирный, курсив, подчеркивание, зачеркивание, нижний и верхний индекс, цвет текста, подсветка, размер и семейство шрифта.
- QExcell открывает `.xlsx` и сохраняет `.xlsx`; сетка расширяется по фактически заполненным ячейкам, поддерживает несколько листов, скрытые и veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, область печати через `_xlnm.Print_Area`, цвет вкладки листа через `sheetPr tabColor`, ширину и скрытие колонок через `cols/col width` и `col hidden`, высоту и скрытие строк через `row ht/customHeight` и `row hidden`, управление скрытием выбранной строки и столбца в интерфейсе, активный лист через `workbookView activeTab`, формулы за пределами стартового диапазона A-H, shared formulas XLSX с относительными ссылками, базовые merged cells, внешние и внутренние гиперссылки ячеек, legacy-заметки ячеек через `comments.xml` и VML `legacyDrawing`, базовые диаграммы листа и базовое форматирование ячеек: полужирный, курсив, подчеркивание, зачеркивание, размер и семейство шрифта, прямые RGB/theme/indexed цвета текста с учетом `xl/theme/theme1.xml`, заливку, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы XLSX для дат, процентов, денежных и дробных значений.
- QPowerPoint открывает `.pptx` и сохраняет `.pptx`; импорт учитывает порядок слайдов из `presentation.xml`, переносы абзацев и ручные переносы строк `a:br` внутри текстовых блоков, маркированные и нумерованные списки подзаголовка через `a:buChar`/`a:buAutoNum`, внешние ссылки текста заголовка/подзаголовка и изображений через `a:hlinkClick` и hyperlink relationships, скрытые слайды через атрибут `show`, переходы `p:transition` для `fade`/`push`/`wipe`, а также заметки докладчика через relationships слайда, сохраняет скрытые слайды, переходы слайдов, заметки докладчика, внешние ссылки текста заголовка/подзаголовка и изображений, базовые растровые изображения слайдов, пользовательский цвет фона слайда, списки подзаголовка, а также цвет, размер, семейство шрифта и начертание `b`/`i`/`u`/`strike` текста заголовка/подзаголовка.
- QPowerPoint открывает `.pptx` и сохраняет `.pptx`; импорт учитывает порядок слайдов из `presentation.xml`, переносы абзацев и ручные переносы строк `a:br` внутри текстовых блоков, маркированные и нумерованные списки подзаголовка через `a:buChar`/`a:buAutoNum`, внешние ссылки текста заголовка/подзаголовка и изображений через `a:hlinkClick` и hyperlink relationships, скрытые слайды через атрибут `show`, переходы `p:transition` для `fade`/`push`/`wipe`, а также заметки докладчика через relationships слайда, сохраняет скрытые слайды, переходы слайдов, заметки докладчика, внешние ссылки текста заголовка/подзаголовка и изображений, базовые растровые изображения слайдов, пользовательский цвет фона слайда, списки подзаголовка, а также цвет, размер, семейство шрифта, начертание `b`/`i`/`u`/`strike` и выравнивание `a:pPr algn` текста заголовка/подзаголовка.
- QOutlook открывает `.eml` и одиночные сообщения Outlook `.msg`, сохраняет письма в `.eml`; импорт EML поддерживает простые текстовые письма, `multipart/alternative`, `multipart/mixed`, `multipart/related`, `text/plain`, fallback из `text/html` в читаемый текст, base64, quoted-printable, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения и inline-вложения с `Content-ID`, `To`, `Cc`, `Bcc`, `Reply-To`, `Message-ID`, `In-Reply-To`, `References`, `Importance`, `X-Priority` и `Priority`. Импорт MSG читает тему, отправителя, получателей `To/Cc/Bcc`, `Reply-To`, `Message-ID`, `In-Reply-To`, `References`, `Importance`, `X-Priority` и `Priority` из транспортных заголовков, текст/HTML body и вложения, если эти поля доступны в MSG-файле. Новые письма можно адресовать через `To/Cc/Bcc`, задавать `Reply-To` и сохранять в EML вместе с добавленными файлами. `.pst` и экспорт в `.msg` пока не реализованы.
- QOutlook сохраняет HTML-тело импортированных EML/MSG писем в модели письма, показывает его в панели чтения через ограниченный HTML-preview без скриптов и экспортирует письма с HTML-телом в EML как `multipart/alternative`; при наличии вложений HTML и текстовая версии вкладываются внутрь `multipart/mixed`.
@@ -60,7 +60,7 @@ Desktop-меню поддерживает системные команды дл
- `Ctrl/Cmd+Shift+E`: экспортировать текущую рабочую область в PDF.
- `Ctrl/Cmd+P`: печать текущей рабочей области.
Импорт и экспорт реализуют базовую совместимость с Office Open XML, EML и чтением MSG: текст, базовое inline-форматирование, явные `w:br`, `w:br w:type="page"`, `w:tab`, `w:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts`, `w:strike` и `w:vertAlign` для переносов строк/разрывов страниц/табуляции/цвета/подсветки/размера/семейства/зачеркивания/нижнего и верхнего индекса текста DOCX, выравнивание и отступы абзацев DOCX через `w:jc`/`w:ind`, закладки DOCX через `w:bookmarkStart`/`w:bookmarkEnd`, внешние `w:hyperlink r:id` и внутренние `w:hyperlink w:anchor` гиперссылки DOCX, маркированные и нумерованные списки DOCX через `w:numPr` и `numbering.xml`, внешние и внутренние гиперссылки XLSX, legacy-заметки ячеек XLSX через `comments.xml`, relationship `comments`, VML `vmlDrawing` и `legacyDrawing`, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов, скрытые/veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, область печати XLSX через `_xlnm.Print_Area`, цвет вкладки листа через `sheetPr tabColor`, ширину и скрытие колонок через `cols/col width`/`col hidden`, высоту и скрытие строк через `row ht/customHeight`/`row hidden` и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, внешние ссылки текста заголовка/подзаголовка и изображений PPTX через `a:hlinkClick` и hyperlink relationships, скрытые слайды PPTX через атрибут `show`, переходы PPTX через `p:transition` для `fade`/`push`/`wipe`, пользовательский фон слайдов PPTX, цвет, размер, семейство шрифта и начертание `b`/`i`/`u`/`strike` текста заголовка/подзаголовка PPTX, импорт и экспорт заметок докладчика, адресацию `To/Cc/Bcc/Reply-To`, заголовки цепочки писем `Message-ID`/`In-Reply-To`/`References`, заголовки приоритета `Importance`/`X-Priority`/`Priority`, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения EML, inline-вложения EML с `Content-ID` и базовые поля одиночных MSG-писем. Сложные стили, макросы, сложные диаграммы, сложное позиционирование и обтекание изображений, PST, экспорт MSG и полная fidelity документов Microsoft Office в текущем инкременте не заявлены.
Импорт и экспорт реализуют базовую совместимость с Office Open XML, EML и чтением MSG: текст, базовое inline-форматирование, явные `w:br`, `w:br w:type="page"`, `w:tab`, `w:color`, `w:shd`, `w:highlight`, `w:sz`, `w:rFonts`, `w:strike` и `w:vertAlign` для переносов строк/разрывов страниц/табуляции/цвета/подсветки/размера/семейства/зачеркивания/нижнего и верхнего индекса текста DOCX, выравнивание, отступы и интервалы абзацев DOCX через `w:jc`/`w:ind`/`w:spacing`, включая `line`/`lineRule`, закладки DOCX через `w:bookmarkStart`/`w:bookmarkEnd`, внешние `w:hyperlink r:id` и внутренние `w:hyperlink w:anchor` гиперссылки DOCX, маркированные и нумерованные списки DOCX через `w:numPr` и `numbering.xml`, внешние и внутренние гиперссылки XLSX, legacy-заметки ячеек XLSX через `comments.xml`, relationship `comments`, VML `vmlDrawing` и `legacyDrawing`, базовые растровые изображения DOCX/PPTX, простые таблицы, несколько листов, скрытые/veryHidden листы через `sheet state`, закрепленные области через `sheetViews pane`, скрытие сетки через `sheetView showGridLines`, масштаб листа через `sheetView zoomScale`, автофильтр через `autoFilter ref`, область печати XLSX через `_xlnm.Print_Area`, цвет вкладки листа через `sheetPr tabColor`, ширину и скрытие колонок через `cols/col width`/`col hidden`, высоту и скрытие строк через `row ht/customHeight`/`row hidden` и активный лист XLSX через `workbookView activeTab`, ячейки, формулы, shared formulas XLSX с относительными ссылками, базовые merged cells, базовые стили, RGB/theme/indexed цвета XLSX с учетом `xl/theme/theme1.xml`, размеры и семейства шрифта, зачеркивание ячеек, горизонтальное и вертикальное выравнивание, перенос текста, границы и цвет границ ячеек, числовые форматы и простые bar/line/pie диаграммы ячеек XLSX, текстовые слайды PPTX с переносами абзацев и ручными переносами строк `a:br` при импорте, внешние ссылки текста заголовка/подзаголовка и изображений PPTX через `a:hlinkClick` и hyperlink relationships, скрытые слайды PPTX через атрибут `show`, переходы PPTX через `p:transition` для `fade`/`push`/`wipe`, пользовательский фон слайдов PPTX, цвет, размер, семейство шрифта, начертание `b`/`i`/`u`/`strike` и выравнивание `a:pPr algn` текста заголовка/подзаголовка PPTX, импорт и экспорт заметок докладчика, адресацию `To/Cc/Bcc/Reply-To`, заголовки цепочки писем `Message-ID`/`In-Reply-To`/`References`, заголовки приоритета `Importance`/`X-Priority`/`Priority`, MIME encoded-word заголовки UTF-8/windows-1251, MIME-вложения EML, inline-вложения EML с `Content-ID` и базовые поля одиночных MSG-писем. Сложные стили, макросы, сложные диаграммы, сложное позиционирование и обтекание изображений, PST, экспорт MSG и полная fidelity документов Microsoft Office в текущем инкременте не заявлены.
Для QOutlook EML round-trip дополнительно покрывает HTML body через `multipart/alternative` без вложений и с вложениями внутри `multipart/mixed`.
+108
View File
@@ -0,0 +1,108 @@
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { initialState } from "./data/sampleData";
import type { QOfficeState } from "./types";
import { App, qofficeWindowTitle } from "./App";
afterEach(() => {
cleanup();
window.localStorage.clear();
window.history.pushState({}, "", "/");
window.document.title = "";
});
describe("qofficeWindowTitle", () => {
it("uses the current artifact name for standalone application title bars", () => {
expect(qofficeWindowTitle(initialState, "word")).toBe(`${initialState.word.title} - QWord`);
expect(qofficeWindowTitle(initialState, "sheets")).toBe(`${initialState.workbook.title} - QExcell`);
expect(qofficeWindowTitle(initialState, "slides")).toBe(`${initialState.deck.title} - QPowerPoint`);
const activeMessage = initialState.mail.messages.find((message) => message.id === initialState.mail.activeMessageId);
expect(qofficeWindowTitle(initialState, "mail")).toBe(`${activeMessage?.subject} - QOutlook`);
});
it("falls back to default standalone titles when names are blank", () => {
const state: QOfficeState = {
...initialState,
word: { ...initialState.word, title: " " },
workbook: { ...initialState.workbook, title: "" },
deck: { ...initialState.deck, title: "\n\t" },
mail: {
...initialState.mail,
messages: initialState.mail.messages.map((message) =>
message.id === initialState.mail.activeMessageId ? { ...message, subject: "" } : message
)
}
};
expect(qofficeWindowTitle(state, "word")).toBe("Документ1 - QWord");
expect(qofficeWindowTitle(state, "sheets")).toBe("Книга1 - QExcell");
expect(qofficeWindowTitle(state, "slides")).toBe("Презентация1 - QPowerPoint");
expect(qofficeWindowTitle(state, "mail")).toBe("Почта - QOutlook");
});
it("syncs the browser document title with the active standalone application", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
window.history.pushState({}, "", "/qword");
try {
render(<App />);
await waitFor(() => expect(window.document.title).toBe(qofficeWindowTitle(initialState, "word")));
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("syncs QWord statusbar view buttons with the active document view mode", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
window.history.pushState({}, "", "/qword");
try {
render(<App />);
const stage = screen.getByLabelText("Редактор QWord");
const printButton = screen.getByRole("button", { name: "Разметка страницы" });
const webButton = screen.getByRole("button", { name: "Веб-документ" });
expect(stage).toHaveClass("qword-view-print");
expect(printButton).toHaveAttribute("aria-pressed", "true");
expect(screen.queryByRole("button", { name: "Черновик" })).not.toBeInTheDocument();
fireEvent.click(webButton);
expect(stage).toHaveClass("qword-view-web");
expect(webButton).toHaveAttribute("aria-pressed", "true");
expect(printButton).toHaveAttribute("aria-pressed", "false");
fireEvent.click(screen.getByRole("tab", { name: "Вид" }));
fireEvent.click(screen.getByRole("button", { name: "Чтение" }));
expect(stage).toHaveClass("qword-view-read");
expect(screen.getByRole("button", { name: "Режим чтения" })).toHaveAttribute("aria-pressed", "true");
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
});
+67 -17
View File
@@ -1,9 +1,9 @@
import { useCallback, useMemo, useState } from "react";
import { BookOpen, Columns2, FileText, Minus, Plus, Rows3 } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { BookOpen, Columns2, FileText, Minus, Plus } from "lucide-react";
import { AppShell } from "./components/AppShell";
import { QOutlook } from "./features/qoutlook/QOutlook";
import { QPowerPoint } from "./features/qpowerpoint/QPowerPoint";
import { QWord, type QWordStatus } from "./features/qword/QWord";
import { QWord, type QWordStatus, type WordViewMode } from "./features/qword/QWord";
import { QExcell } from "./features/qexcell/QExcell";
import { initialState } from "./data/sampleData";
import { usePersistentState } from "./hooks/usePersistentState";
@@ -12,11 +12,38 @@ import type { MailMessage, QOfficeState, SlideDeck, WordDocument, Workbook } fro
const STORAGE_KEY = "qoffice-state-v1";
const defaultQWordStatus: QWordStatus = { currentPage: 1, pageCount: 1, wordCount: 0 };
const wordStatusbarViewModes = [
{ id: "print", label: "Разметка страницы", Icon: FileText },
{ id: "read", label: "Режим чтения", Icon: BookOpen },
{ id: "web", label: "Веб-документ", Icon: Columns2 }
] as const;
function clampedWordZoom(value: number) {
return Math.min(200, Math.max(50, value));
}
function normalizedWindowTitlePart(value: string | undefined, fallback: string) {
const normalized = value?.replace(/\s+/g, " ").trim();
return normalized || fallback;
}
export function qofficeWindowTitle(state: QOfficeState, activeApp: QOfficeState["activeApp"]) {
if (activeApp === "word") {
return `${normalizedWindowTitlePart(state.word.title, "Документ1")} - QWord`;
}
if (activeApp === "sheets") {
return `${normalizedWindowTitlePart(state.workbook.title, "Книга1")} - QExcell`;
}
if (activeApp === "slides") {
return `${normalizedWindowTitlePart(state.deck.title, "Презентация1")} - QPowerPoint`;
}
const activeMessage = state.mail.messages.find((message) => message.id === state.mail.activeMessageId);
return `${normalizedWindowTitlePart(activeMessage?.subject, "Почта")} - QOutlook`;
}
function migrateQOfficeState(state: QOfficeState): QOfficeState {
const launchChecklistAttachments = initialState.mail.messages.find((message) => message.id === "mail-1")?.attachments;
const sampleSheet = initialState.workbook.sheets.find((sheet) => sheet.id === "sheet-1");
@@ -26,11 +53,15 @@ function migrateQOfficeState(state: QOfficeState): QOfficeState {
state.word.id === initialState.word.id &&
sampleWordHtml.includes("Ключевой результат") &&
!state.word.html.includes("Ключевой результат");
const needsDeckSlideSize = !state.deck.slideSize;
let changed = false;
if (needsSampleWordColor) {
changed = true;
}
if (needsDeckSlideSize) {
changed = true;
}
const messages = state.mail.messages.map((message) => {
if (!launchChecklistAttachments || message.id !== "mail-1" || (message.attachments?.length ?? 0) > 0) {
return message;
@@ -90,7 +121,7 @@ function migrateQOfficeState(state: QOfficeState): QOfficeState {
...state,
word: needsSampleWordColor ? { ...state.word, html: sampleWordHtml } : state.word,
workbook: { ...state.workbook, sheets },
deck: { ...state.deck, slides },
deck: { ...state.deck, slideSize: state.deck.slideSize ?? initialState.deck.slideSize ?? "wide", slides },
mail: { ...state.mail, messages }
}
: state;
@@ -100,7 +131,13 @@ export function App() {
const [state, setState] = usePersistentState<QOfficeState>(STORAGE_KEY, initialState, migrateQOfficeState);
const [wordStatus, setWordStatus] = useState<QWordStatus>(defaultQWordStatus);
const [wordZoom, setWordZoom] = useState(100);
const [wordViewMode, setWordViewMode] = useState<WordViewMode>("print");
const activeApp = activeAppFromLocation(window.location);
const windowTitle = qofficeWindowTitle(state, activeApp);
useEffect(() => {
window.document.title = windowTitle;
}, [windowTitle]);
const updateWordStatus = useCallback((nextStatus: QWordStatus) => {
setWordStatus((current) =>
@@ -137,18 +174,23 @@ export function App() {
trailing: (
<div className="word-statusbar-tools" aria-label="Режимы просмотра и масштаб QWord">
<div className="word-view-buttons" aria-label="Режимы просмотра">
<button className="is-active" type="button" title="Разметка страницы" aria-label="Разметка страницы" aria-pressed="true">
<FileText size={15} />
</button>
<button type="button" title="Режим чтения" aria-label="Режим чтения">
<BookOpen size={15} />
</button>
<button type="button" title="Веб-документ" aria-label="Веб-документ">
<Columns2 size={15} />
</button>
<button type="button" title="Черновик" aria-label="Черновик">
<Rows3 size={15} />
{wordStatusbarViewModes.map((mode) => {
const Icon = mode.Icon;
const isActive = wordViewMode === mode.id;
return (
<button
key={mode.id}
className={isActive ? "is-active" : undefined}
type="button"
title={mode.label}
aria-label={mode.label}
aria-pressed={isActive}
onClick={() => setWordViewMode(mode.id)}
>
<Icon size={15} />
</button>
);
})}
</div>
<button type="button" title="Уменьшить масштаб" aria-label="Уменьшить масштаб" onClick={() => adjustWordZoom(-10)}>
<Minus size={14} />
@@ -185,6 +227,7 @@ export function App() {
wordStatus.currentPage,
wordStatus.pageCount,
wordStatus.wordCount,
wordViewMode,
wordZoom
]);
@@ -217,7 +260,14 @@ export function App() {
const activeSurface =
activeApp === "word" ? (
<QWord document={state.word} zoom={wordZoom} onChange={updateWord} onStatusChange={updateWordStatus} />
<QWord
document={state.word}
zoom={wordZoom}
viewMode={wordViewMode}
onChange={updateWord}
onStatusChange={updateWordStatus}
onViewModeChange={setWordViewMode}
/>
) : activeApp === "sheets" ? (
<QExcell workbook={state.workbook} onChange={updateWorkbook} />
) : activeApp === "slides" ? (
@@ -227,7 +277,7 @@ export function App() {
);
return (
<AppShell activeApp={activeApp} status={status}>
<AppShell activeApp={activeApp} windowTitle={windowTitle} status={status}>
{activeSurface}
</AppShell>
);
+41 -2
View File
@@ -1,8 +1,12 @@
import { render, screen } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { cleanup, fireEvent, render, screen } from "@testing-library/react";
import { afterEach, describe, expect, it } from "vitest";
import { AppShell } from "./AppShell";
describe("AppShell", () => {
afterEach(() => {
cleanup();
});
it("не показывает общую ленту навигации между приложениями", () => {
const view = render(
<AppShell activeApp="word" status={{ savedLabel: "Сохранено локально" }}>
@@ -37,4 +41,39 @@ describe("AppShell", () => {
expect(screen.getByText("Число слов: 42")).toBeInTheDocument();
expect(screen.getByText("125%")).toBeInTheDocument();
});
it("показывает заголовок текущего файла активного приложения", () => {
render(
<AppShell activeApp="word" windowTitle="Отчет.docx - QWord" status={{ savedLabel: "Сохранено локально" }}>
<div>Рабочая область QWord</div>
</AppShell>
);
expect(screen.getByText("Отчет.docx - QWord")).toBeInTheDocument();
});
it("отправляет команды панели быстрого доступа активному приложению", () => {
const commands: string[] = [];
function onCommand(event: WindowEventMap["qoffice-command"]) {
commands.push(event.detail.command);
}
window.addEventListener("qoffice-command", onCommand);
try {
const view = render(
<AppShell activeApp="word" status={{ savedLabel: "Сохранено локально" }}>
<div>Рабочая область QWord</div>
</AppShell>
);
const quickAccessButtons = view.container.querySelectorAll(".quick-access button");
fireEvent.click(quickAccessButtons[0]);
fireEvent.click(quickAccessButtons[1]);
fireEvent.click(quickAccessButtons[2]);
expect(commands).toEqual(["save", "undo", "redo"]);
} finally {
window.removeEventListener("qoffice-command", onCommand);
}
});
});
+17 -6
View File
@@ -6,11 +6,13 @@ import {
Share2,
Undo2
} from "lucide-react";
import type { ReactNode } from "react";
import type { MouseEvent, ReactNode } from "react";
import type { QOfficeCommand } from "../hooks/useQOfficeCommand";
import type { AppId } from "../types";
interface AppShellProps {
activeApp: AppId;
windowTitle?: string;
status: {
savedLabel: string;
updatedAt?: string;
@@ -28,28 +30,37 @@ const appTitles: Record<AppId, string> = {
mail: "Почта - QOutlook"
};
export function AppShell({ activeApp, status, children }: AppShellProps) {
function dispatchQOfficeCommand(command: QOfficeCommand) {
window.dispatchEvent(new CustomEvent("qoffice-command", { detail: { command } }));
}
function keepActiveEditorFocus(event: MouseEvent<HTMLButtonElement>) {
event.preventDefault();
}
export function AppShell({ activeApp, windowTitle, status, children }: AppShellProps) {
const statusClassName = ["statusbar", status.className].filter(Boolean).join(" ");
const displayWindowTitle = windowTitle?.trim() || appTitles[activeApp];
return (
<div className="qoffice-shell">
<main className="workspace">
<header className="titlebar">
<div className="quick-access" aria-label="Панель быстрого доступа">
<button type="button" title="Сохранить" aria-label="Сохранить">
<button type="button" title="Сохранить" aria-label="Сохранить" onMouseDown={keepActiveEditorFocus} onClick={() => dispatchQOfficeCommand("save")}>
<Save size={16} />
</button>
<button type="button" title="Отменить" aria-label="Отменить">
<button type="button" title="Отменить" aria-label="Отменить" onMouseDown={keepActiveEditorFocus} onClick={() => dispatchQOfficeCommand("undo")}>
<Undo2 size={16} />
</button>
<button type="button" title="Повторить" aria-label="Повторить">
<button type="button" title="Повторить" aria-label="Повторить" onMouseDown={keepActiveEditorFocus} onClick={() => dispatchQOfficeCommand("redo")}>
<Redo2 size={16} />
</button>
<button type="button" title="Настроить панель" aria-label="Настроить панель">
<ChevronDown size={14} />
</button>
</div>
<strong className="window-title">{appTitles[activeApp]}</strong>
<strong className="window-title">{displayWindowTitle}</strong>
<div className="titlebar-actions">
<label className="command-search">
<Search size={16} />
+3 -1
View File
@@ -31,7 +31,8 @@ export const initialState: QOfficeState = {
<tr><td>Поставка</td><td>Разработка и контроль качества</td><td>Карина М.</td></tr>
</tbody>
</table>
`
`,
pageSetup: { size: "a4", orientation: "portrait", marginPreset: "normal" }
},
workbook: {
id: "qexcell-quarter-plan",
@@ -108,6 +109,7 @@ export const initialState: QOfficeState = {
title: "Дорожная карта.qpptx",
updatedAt: new Date().toISOString(),
activeSlideId: "slide-1",
slideSize: "wide",
slides: [
{
id: "slide-1",
+70 -1
View File
@@ -32,7 +32,7 @@ import {
Underline,
WrapText
} from "lucide-react";
import type { CellFormat, SheetChart, SheetChartType, Workbook } from "../../types";
import type { CellFormat, SheetChart, SheetChartType, SheetPageMarginPreset, SheetPageOrientation, SheetPageSetup, SheetPageSizeId, Workbook } from "../../types";
import { cellId, columnLabel, columnLabelsForCount, evaluateCell, formatCellValueForDisplay, mergedCellInfo, parseCellId, summarizeColumn, usedSheetBounds } from "../../utils/spreadsheet";
import { downloadBlobFile, downloadTextFile } from "../../utils/download";
import { chartDataPoints, exportXlsxBlob, importXlsxFile } from "../../io/excellOffice";
@@ -95,6 +95,20 @@ const chartTypeOptions: Array<{ value: SheetChartType; label: string }> = [
{ value: "line", label: "Линейная" },
{ value: "pie", label: "Круговая" }
];
const sheetPageSizeOptions: Array<{ id: SheetPageSizeId; label: string }> = [
{ id: "a4", label: "A4" },
{ id: "letter", label: "Letter" }
];
const sheetPageOrientationOptions: Array<{ id: SheetPageOrientation; label: string }> = [
{ id: "portrait", label: "Книжная" },
{ id: "landscape", label: "Альбомная" }
];
const sheetPageMarginOptions: Array<{ id: SheetPageMarginPreset; label: string }> = [
{ id: "normal", label: "Обычные" },
{ id: "narrow", label: "Узкие" },
{ id: "wide", label: "Широкие" }
];
const defaultSheetPageSetup: SheetPageSetup = { size: "a4", orientation: "portrait", marginPreset: "normal" };
const horizontalAlignOptions = [
{ value: "left", label: "По левому краю", icon: AlignLeft },
@@ -159,6 +173,18 @@ function normalizedCellFormat(format: CellFormat): CellFormat | undefined {
return Object.keys(normalized).length > 0 ? normalized : undefined;
}
function normalizedSheetPageSetup(setup?: SheetPageSetup): SheetPageSetup {
const candidateSize = setup?.size;
const candidateOrientation = setup?.orientation;
const candidateMarginPreset = setup?.marginPreset;
const size = candidateSize && sheetPageSizeOptions.some((option) => option.id === candidateSize) ? candidateSize : defaultSheetPageSetup.size;
const orientation =
candidateOrientation && sheetPageOrientationOptions.some((option) => option.id === candidateOrientation) ? candidateOrientation : defaultSheetPageSetup.orientation;
const marginPreset =
candidateMarginPreset && sheetPageMarginOptions.some((option) => option.id === candidateMarginPreset) ? candidateMarginPreset : defaultSheetPageSetup.marginPreset;
return { size, orientation, marginPreset };
}
function cellInputStyle(format?: CellFormat): CSSProperties {
const textDecoration = [format?.underline ? "underline" : "", format?.strike ? "line-through" : ""].filter(Boolean).join(" ");
return {
@@ -276,6 +302,7 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
const activeHiddenColumns = activeSheet.hiddenColumns ?? emptyHiddenItems;
const activeHiddenRows = activeSheet.hiddenRows ?? emptyHiddenItems;
const activeCharts = activeSheet.charts ?? emptyCharts;
const activeSheetPageSetup = normalizedSheetPageSetup(activeSheet.pageSetup);
const selectedRawValue = activeSheet.cells[selectedCell] ?? "";
const selectedHyperlink = activeHyperlinks[selectedCell] ?? "";
const selectedComment = activeComments[selectedCell] ?? "";
@@ -418,6 +445,15 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
});
}
function updateActiveSheetPageSetup(pageSetupPatch: Partial<SheetPageSetup>) {
onChange({
...workbook,
sheets: workbook.sheets.map((sheet) =>
sheet.id === activeSheet.id ? { ...sheet, pageSetup: normalizedSheetPageSetup({ ...activeSheetPageSetup, ...pageSetupPatch }) } : sheet
)
});
}
function addSheet() {
const id = `sheet-${workbook.sheets.length + 1}`;
onChange({
@@ -854,6 +890,39 @@ export function QExcell({ workbook, onChange }: QExcellProps) {
onBlur={(event) => updateActiveSheetPrintArea(normalizedPrintAreaInput(event.target.value))}
/>
</label>
<label className="office-field">
<span>Размер</span>
<select value={activeSheetPageSetup.size} onChange={(event) => updateActiveSheetPageSetup({ size: event.target.value as SheetPageSizeId })}>
{sheetPageSizeOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
<label className="office-field">
<span>Ориентация</span>
<select
value={activeSheetPageSetup.orientation}
onChange={(event) => updateActiveSheetPageSetup({ orientation: event.target.value as SheetPageOrientation })}
>
{sheetPageOrientationOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
<label className="office-field">
<span>Поля</span>
<select value={activeSheetPageSetup.marginPreset} onChange={(event) => updateActiveSheetPageSetup({ marginPreset: event.target.value as SheetPageMarginPreset })}>
{sheetPageMarginOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
</div>
<div className="office-tool-section">
@@ -55,6 +55,21 @@ describe("QPowerPoint", () => {
expect(nextDeck.slides[0].images?.[0].hyperlink).toBe("https://example.com/updated-logo");
});
it("переключает размер слайда презентации", () => {
const onChange = vi.fn();
const view = render(<QPowerPoint deck={deckWithLinkedImage()} onChange={onChange} />);
const slideSizeSelect = view.container.querySelector('select[aria-label="Размер слайда"]') as HTMLSelectElement;
const canvas = view.container.querySelector(".slide-canvas") as HTMLElement;
expect(slideSizeSelect).toHaveValue("wide");
expect(canvas.style.aspectRatio).toBe("13.333 / 7.5");
fireEvent.change(slideSizeSelect, { target: { value: "standard" } });
const nextDeck = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as SlideDeck;
expect(nextDeck.slideSize).toBe("standard");
});
it("переключает начертание текста слайда", () => {
const onChange = vi.fn();
const view = render(<QPowerPoint deck={deckWithLinkedImage()} onChange={onChange} />);
@@ -69,4 +84,17 @@ describe("QPowerPoint", () => {
expect(onChange).toHaveBeenCalledTimes(1);
expect(nextDeck.slides[0].titleBold).toBe(false);
});
it("переключает выравнивание текста слайда", () => {
const onChange = vi.fn();
const view = render(<QPowerPoint deck={deckWithLinkedImage()} onChange={onChange} />);
const centerTitleButton = view.container.querySelector('button[aria-label="Заголовок по центру"]');
expect(centerTitleButton).toBeTruthy();
fireEvent.click(centerTitleButton as Element);
const nextDeck = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as SlideDeck;
expect(onChange).toHaveBeenCalledTimes(1);
expect(nextDeck.slides[0].titleAlign).toBe("center");
});
});
+123 -26
View File
@@ -1,7 +1,7 @@
import { useRef, useState } from "react";
import type { CSSProperties } from "react";
import { Bold, Copy, Download, EyeOff, FileText, FileUp, Image as ImageIcon, Italic, Link, List, ListOrdered, ListX, Palette, Plus, Save, Strikethrough, Trash2, Underline } from "lucide-react";
import type { Slide, SlideDeck, SlideImage, SlideListStyle, SlideTransition } from "../../types";
import { AlignCenter, AlignLeft, AlignRight, Bold, Copy, Download, EyeOff, FileText, FileUp, Image as ImageIcon, Italic, Link, List, ListOrdered, ListX, Palette, Plus, Save, Strikethrough, Trash2, Underline } from "lucide-react";
import type { Slide, SlideDeck, SlideImage, SlideListStyle, SlideSizeId, SlideTextAlign, SlideTransition } from "../../types";
import { downloadBlobFile, downloadTextFile } from "../../utils/download";
import { exportPptxBlob, importPptxFile } from "../../io/powerPointOffice";
import { replaceFileExtension } from "../../io/fileHelpers";
@@ -23,6 +23,7 @@ type SlideTextFormatField =
| "subtitleItalics"
| "subtitleUnderline"
| "subtitleStrike";
type SlideTextAlignField = "titleAlign" | "subtitleAlign";
const themeLabels: Record<Slide["theme"], string> = {
classic: "Классическая",
@@ -57,8 +58,20 @@ const slideTransitionOptions: Array<{ value: SlideTransition | ""; label: string
{ value: "wipe", label: "Шторка" }
];
const slideWidthInches = 13.333;
const slideHeightInches = 7.5;
const slideSizeOptions: Array<{ id: SlideSizeId; label: string; width: number; height: number }> = [
{ id: "wide", label: "Широкий 16:9", width: 13.333, height: 7.5 },
{ id: "standard", label: "Стандартный 4:3", width: 10, height: 7.5 }
];
type SlideDimensions = { width: number; height: number };
function normalizedSlideSizeId(value?: SlideSizeId): SlideSizeId {
return value === "standard" ? "standard" : "wide";
}
function slideDimensions(value?: SlideSizeId): SlideDimensions {
return slideSizeOptions.find((option) => option.id === normalizedSlideSizeId(value)) ?? slideSizeOptions[0];
}
function readFileAsDataUrl(file: File) {
return new Promise<string>((resolve, reject) => {
@@ -98,25 +111,28 @@ function roundSlideNumber(value: number) {
return Math.round(value * 10) / 10;
}
function slideImageStyle(image: SlideImage) {
function slideImageStyle(image: SlideImage, dimensions: SlideDimensions) {
return {
left: `${(image.x / slideWidthInches) * 100}%`,
top: `${(image.y / slideHeightInches) * 100}%`,
width: `${(image.width / slideWidthInches) * 100}%`,
height: `${(image.height / slideHeightInches) * 100}%`
left: `${(image.x / dimensions.width) * 100}%`,
top: `${(image.y / dimensions.height) * 100}%`,
width: `${(image.width / dimensions.width) * 100}%`,
height: `${(image.height / dimensions.height) * 100}%`
};
}
function slideCanvasStyle(slide: Slide) {
function slideCanvasStyle(slide: Slide, dimensions: SlideDimensions): CSSProperties {
const backgroundColor = normalizedHexColor(slide.backgroundColor);
return backgroundColor ? { background: `#${backgroundColor}` } : undefined;
return {
aspectRatio: `${dimensions.width} / ${dimensions.height}`,
...(backgroundColor ? { background: `#${backgroundColor}` } : {})
};
}
function slideTextStyle(
color?: string,
fontSize?: number,
fontFamily?: string,
textFormat: { bold?: boolean; italics?: boolean; underline?: boolean; strike?: boolean; defaultBold?: boolean } = {}
textFormat: { bold?: boolean; italics?: boolean; underline?: boolean; strike?: boolean; align?: SlideTextAlign; defaultBold?: boolean } = {}
): CSSProperties | undefined {
const textColor = normalizedHexColor(color);
const normalizedFontSize = normalizeFontSize(fontSize);
@@ -129,7 +145,8 @@ function slideTextStyle(
...(normalizedFamily ? { fontFamily: normalizedFamily } : {}),
...(effectiveBold !== undefined ? { fontWeight: effectiveBold ? 780 : 400 } : {}),
...(textFormat.italics ? { fontStyle: "italic" } : {}),
...(textDecoration ? { textDecoration } : {})
...(textDecoration ? { textDecoration } : {}),
...(textFormat.align ? { textAlign: textFormat.align } : {})
};
return Object.keys(style).length > 0 ? style : undefined;
@@ -165,6 +182,7 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
const activeSlide = deck.slides.find((slide) => slide.id === deck.activeSlideId) ?? deck.slides[0];
const activeImages = activeSlide.images ?? [];
const selectedImage = activeImages.find((image) => image.id === selectedImageId);
const activeSlideSize = slideDimensions(deck.slideSize);
function updateSlide(nextSlide: Slide) {
onChange({
@@ -178,6 +196,10 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
updateSlide({ ...activeSlide, [field]: !enabled });
}
function setSlideTextAlign(field: SlideTextAlignField, align: SlideTextAlign) {
updateSlide({ ...activeSlide, [field]: align });
}
function updateImages(images: SlideImage[]) {
updateSlide({ ...activeSlide, images });
}
@@ -260,6 +282,7 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
...deck,
title: imported.title,
activeSlideId: imported.slides[0]?.id ?? "slide-1",
slideSize: imported.slideSize ?? deck.slideSize ?? "wide",
slides: imported.slides.length > 0 ? imported.slides : deck.slides
});
} catch (error) {
@@ -283,8 +306,8 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
id: `slide-image-${Date.now()}`,
src,
alt: file.name,
x: roundSlideNumber(Math.max(0.4, slideWidthInches - size.width - 0.9)),
y: roundSlideNumber(Math.max(1.4, slideHeightInches - size.height - 0.8)),
x: roundSlideNumber(Math.max(0.4, activeSlideSize.width - size.width - 0.9)),
y: roundSlideNumber(Math.max(1.4, activeSlideSize.height - size.height - 0.8)),
...size
};
@@ -460,6 +483,20 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
))}
</select>
</label>
<label className="office-field">
<span>Размер</span>
<select
value={normalizedSlideSizeId(deck.slideSize)}
onChange={(event) => onChange({ ...deck, slideSize: event.target.value as SlideSizeId })}
aria-label="Размер слайда"
>
{slideSizeOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
<div className="slide-background-swatches" aria-label="Фон слайда">
<Palette size={16} aria-hidden="true" />
{backgroundColorSwatches.map((swatch) => (
@@ -560,6 +597,35 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<Strikethrough size={16} />
</button>
</div>
<div className="cell-format-tools slide-format-tools" aria-label="Выравнивание заголовка">
<button
className={`icon-button format-toggle ${(activeSlide.titleAlign ?? "left") === "left" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("titleAlign", "left")}
title="Заголовок по левому краю"
aria-label="Заголовок по левому краю"
>
<AlignLeft size={16} />
</button>
<button
className={`icon-button format-toggle ${activeSlide.titleAlign === "center" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("titleAlign", "center")}
title="Заголовок по центру"
aria-label="Заголовок по центру"
>
<AlignCenter size={16} />
</button>
<button
className={`icon-button format-toggle ${activeSlide.titleAlign === "right" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("titleAlign", "right")}
title="Заголовок по правому краю"
aria-label="Заголовок по правому краю"
>
<AlignRight size={16} />
</button>
</div>
<label className="office-field office-field-wide">
<span>
<Link size={14} />
@@ -654,6 +720,35 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<Strikethrough size={16} />
</button>
</div>
<div className="cell-format-tools slide-format-tools" aria-label="Выравнивание подзаголовка">
<button
className={`icon-button format-toggle ${(activeSlide.subtitleAlign ?? "left") === "left" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("subtitleAlign", "left")}
title="Подзаголовок по левому краю"
aria-label="Подзаголовок по левому краю"
>
<AlignLeft size={16} />
</button>
<button
className={`icon-button format-toggle ${activeSlide.subtitleAlign === "center" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("subtitleAlign", "center")}
title="Подзаголовок по центру"
aria-label="Подзаголовок по центру"
>
<AlignCenter size={16} />
</button>
<button
className={`icon-button format-toggle ${activeSlide.subtitleAlign === "right" ? "is-active" : ""}`.trim()}
type="button"
onClick={() => setSlideTextAlign("subtitleAlign", "right")}
title="Подзаголовок по правому краю"
aria-label="Подзаголовок по правому краю"
>
<AlignRight size={16} />
</button>
</div>
<label className="office-field office-field-wide">
<span>
<Link size={14} />
@@ -719,10 +814,10 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<input
type="number"
min="0"
max={slideWidthInches}
max={activeSlideSize.width}
step="0.1"
value={selectedImage.x}
onChange={(event) => updateSelectedImageNumber("x", event.target.value, slideWidthInches)}
onChange={(event) => updateSelectedImageNumber("x", event.target.value, activeSlideSize.width)}
/>
</label>
<label>
@@ -730,10 +825,10 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<input
type="number"
min="0"
max={slideHeightInches}
max={activeSlideSize.height}
step="0.1"
value={selectedImage.y}
onChange={(event) => updateSelectedImageNumber("y", event.target.value, slideHeightInches)}
onChange={(event) => updateSelectedImageNumber("y", event.target.value, activeSlideSize.height)}
/>
</label>
<label>
@@ -741,10 +836,10 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<input
type="number"
min="0.1"
max={slideWidthInches}
max={activeSlideSize.width}
step="0.1"
value={selectedImage.width}
onChange={(event) => updateSelectedImageNumber("width", event.target.value, slideWidthInches)}
onChange={(event) => updateSelectedImageNumber("width", event.target.value, activeSlideSize.width)}
/>
</label>
<label>
@@ -752,10 +847,10 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
<input
type="number"
min="0.1"
max={slideHeightInches}
max={activeSlideSize.height}
step="0.1"
value={selectedImage.height}
onChange={(event) => updateSelectedImageNumber("height", event.target.value, slideHeightInches)}
onChange={(event) => updateSelectedImageNumber("height", event.target.value, activeSlideSize.height)}
/>
</label>
</div>
@@ -790,13 +885,13 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
</label>
</div>
<div className={`slide-canvas theme-${activeSlide.theme}`} style={slideCanvasStyle(activeSlide)}>
<div className={`slide-canvas theme-${activeSlide.theme}`} style={slideCanvasStyle(activeSlide, activeSlideSize)}>
{activeImages.map((image) => (
<button
key={image.id}
type="button"
className={`slide-image-object ${image.id === selectedImageId ? "is-selected" : ""}`}
style={slideImageStyle(image)}
style={slideImageStyle(image, activeSlideSize)}
onClick={() => setSelectedImageId(image.id)}
title={image.alt || "Изображение"}
aria-label={image.alt || "Изображение слайда"}
@@ -813,6 +908,7 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
italics: activeSlide.titleItalics,
underline: activeSlide.titleUnderline,
strike: activeSlide.titleStrike,
align: activeSlide.titleAlign,
defaultBold: true
})}
onChange={(event) => updateSlide({ ...activeSlide, title: event.target.value })}
@@ -825,7 +921,8 @@ export function QPowerPoint({ deck, onChange }: QPowerPointProps) {
bold: activeSlide.subtitleBold,
italics: activeSlide.subtitleItalics,
underline: activeSlide.subtitleUnderline,
strike: activeSlide.subtitleStrike
strike: activeSlide.subtitleStrike,
align: activeSlide.subtitleAlign
})}
onChange={(event) => updateSlide({ ...activeSlide, subtitle: event.target.value })}
/>
+608 -3
View File
@@ -1,8 +1,13 @@
import { fireEvent, render, waitFor } from "@testing-library/react";
import { describe, expect, it } from "vitest";
import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
import { useState } from "react";
import { afterEach, describe, expect, it } from "vitest";
import { vi } from "vitest";
import type { WordDocument } from "../../types";
import { QWord, qwordCurrentPageFromViewport } from "./QWord";
import { QWord, qwordCurrentPageFromViewport, qwordPageCountFromContent } from "./QWord";
afterEach(() => {
cleanup();
});
describe("qwordCurrentPageFromViewport", () => {
it("вычисляет текущую страницу по положению листа в области просмотра", () => {
@@ -15,9 +20,609 @@ describe("qwordCurrentPageFromViewport", () => {
expect(qwordCurrentPageFromViewport({ stageTop: 34, paperTop: -1200, pageHeight: 1123, pageCount: 3, zoom: 1 })).toBe(2);
expect(qwordCurrentPageFromViewport({ stageTop: 34, paperTop: -1200, pageHeight: 1123, pageCount: 3, zoom: 1.2 })).toBe(1);
});
it("does not advance the current page while the viewport is inside the inter-page gap", () => {
expect(qwordCurrentPageFromViewport({ stageTop: 0, paperTop: -110, pageHeight: 100, pageGap: 20, pageCount: 3, zoom: 1 })).toBe(1);
expect(qwordCurrentPageFromViewport({ stageTop: 0, paperTop: -125, pageHeight: 100, pageGap: 20, pageCount: 3, zoom: 1 })).toBe(2);
});
});
describe("qwordPageCountFromContent", () => {
it("keeps manual page breaks as a minimum page count even when content height is short", () => {
expect(qwordPageCountFromContent({ scrollHeight: 300, pageHeight: 1123, manualPageBreakCount: 2 })).toBe(3);
});
it("keeps content height page count when it exceeds manual page breaks", () => {
expect(qwordPageCountFromContent({ scrollHeight: 2400, pageHeight: 1123, manualPageBreakCount: 1 })).toBe(3);
});
});
describe("QWord", () => {
it("держит ленту QWord вне прокручиваемой области документа", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-ribbon-layout-test",
title: "Лента.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Текст</p>"
};
try {
const view = render(<QWord document={document} onChange={vi.fn()} />);
const toolbar = view.container.querySelector(".word-module-toolbar") as HTMLElement;
const stage = view.container.querySelector(".document-stage") as HTMLElement;
expect(toolbar).toBeInTheDocument();
expect(stage).toBeInTheDocument();
expect(stage).not.toContainElement(toolbar);
expect(toolbar.querySelector(".word-ribbon-tabs")).toBeInTheDocument();
expect(stage.querySelector(".page-ruler")).toBeInTheDocument();
expect(stage.querySelector(".paper-frame")).toBeInTheDocument();
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("показывает отдельные листы печатной разметки по расчетному числу страниц", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-print-pages-test",
title: "Страницы.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Первая страница</p><p>Вторая страница</p>"
};
try {
const view = render(<QWord document={document} onChange={vi.fn()} />);
const stage = view.getByLabelText("Редактор QWord");
const paper = view.getByLabelText("Содержимое документа");
const frame = view.container.querySelector(".paper-frame") as HTMLElement;
paper.style.setProperty("--qword-page-height", "1123px");
Object.defineProperty(paper, "scrollHeight", { configurable: true, value: 2400 });
fireEvent.scroll(stage);
await waitFor(() => expect(view.container.querySelectorAll(".page-sheet")).toHaveLength(3));
expect(frame.style.getPropertyValue("--qword-page-count")).toBe("3");
expect(frame.style.minHeight).toBe("3425px");
expect(frame.style.paddingBottom).toBe("56px");
expect(view.container.querySelectorAll(".page-break-guides span")).toHaveLength(2);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("показывает отдельный лист для ручного разрыва страницы даже при коротком содержимом", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-manual-break-pages-test",
title: "Разрыв.docx",
updatedAt: "2026-06-04T00:00:00.000Z",
html: '<p>Первая страница</p><span data-qoffice-page-break="true" contenteditable="false"></span><p>Вторая страница</p>'
};
try {
const view = render(<QWord document={document} onChange={vi.fn()} />);
const stage = view.getByLabelText("Редактор QWord");
const paper = view.getByLabelText("Содержимое документа");
const frame = view.container.querySelector(".paper-frame") as HTMLElement;
paper.style.setProperty("--qword-page-height", "1123px");
Object.defineProperty(paper, "scrollHeight", { configurable: true, value: 300 });
fireEvent.scroll(stage);
await waitFor(() => expect(view.container.querySelectorAll(".page-sheet")).toHaveLength(2));
expect(frame.style.getPropertyValue("--qword-page-count")).toBe("2");
expect(frame.style.minHeight).toBe("2274px");
expect(view.container.querySelectorAll(".page-break-guides span")).toHaveLength(1);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("меняет поля, размер и ориентацию страницы на вкладке Макет", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-page-setup-test",
title: "Макет.docx",
updatedAt: "2026-06-04T00:00:00.000Z",
html: "<p>Текст страницы</p>"
};
function StatefulQWord() {
const [currentDocument, setCurrentDocument] = useState(document);
return (
<QWord
document={currentDocument}
onChange={(nextDocument) => {
onChange(nextDocument);
setCurrentDocument(nextDocument);
}}
/>
);
}
try {
const view = render(<StatefulQWord />);
const frame = view.container.querySelector(".paper-frame") as HTMLElement;
expect(frame.style.getPropertyValue("--qword-page-width")).toBe("794px");
expect(frame.style.getPropertyValue("--qword-page-height")).toBe("1123px");
expect(frame.style.getPropertyValue("--qword-page-margin-left")).toBe("86px");
fireEvent.click(screen.getByRole("tab", { name: "Макет" }));
fireEvent.change(screen.getByLabelText("Поля страницы"), { target: { value: "narrow" } });
fireEvent.change(screen.getByLabelText("Размер страницы"), { target: { value: "letter" } });
fireEvent.change(screen.getByLabelText("Ориентация страницы"), { target: { value: "landscape" } });
await waitFor(() => expect(frame.style.getPropertyValue("--qword-page-height")).toBe("816px"));
expect(frame.style.getPropertyValue("--qword-page-width")).toBe("1056px");
expect(frame.style.getPropertyValue("--qword-page-margin-top")).toBe("48px");
expect(frame.style.getPropertyValue("--qword-page-margin-right")).toBe("48px");
expect(frame.style.minHeight).toBe("816px");
expect(onChange).toHaveBeenLastCalledWith(expect.objectContaining({ pageSetup: { size: "letter", orientation: "landscape", marginPreset: "narrow" } }));
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("применяет сохраненные в документе параметры страницы при открытии QWord", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-saved-page-setup-test",
title: "Сохраненный макет.docx",
updatedAt: "2026-06-04T00:00:00.000Z",
html: "<p>Текст страницы</p>",
pageSetup: { size: "letter", orientation: "landscape", marginPreset: "wide" }
};
try {
const view = render(<QWord document={document} onChange={vi.fn()} />);
const frame = view.container.querySelector(".paper-frame") as HTMLElement;
expect(frame.style.getPropertyValue("--qword-page-width")).toBe("1056px");
expect(frame.style.getPropertyValue("--qword-page-height")).toBe("816px");
expect(frame.style.getPropertyValue("--qword-page-margin-left")).toBe("116px");
expect(frame.style.getPropertyValue("--qword-page-margin-top")).toBe("92px");
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("переключает вкладки ленты и показывает команды выбранной вкладки", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-ribbon-tabs-test",
title: "Лента.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Текст</p>"
};
try {
render(<QWord document={document} onChange={vi.fn()} />);
expect(screen.getByRole("tab", { name: "Главная" })).toHaveAttribute("aria-selected", "true");
expect(screen.getByRole("region", { name: "Шрифт" })).toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Вставка" }));
expect(screen.getByRole("tab", { name: "Вставка" })).toHaveAttribute("aria-selected", "true");
expect(screen.getByRole("region", { name: "Вставка" })).toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Шрифт" })).not.toBeInTheDocument();
fireEvent.click(screen.getByRole("tab", { name: "Файл" }));
expect(screen.getByRole("tab", { name: "Файл" })).toHaveAttribute("aria-selected", "true");
expect(screen.getByRole("region", { name: "Файл" })).toBeInTheDocument();
expect(screen.queryByRole("region", { name: "Вставка" })).not.toBeInTheDocument();
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("переключает режим просмотра документа на вкладке Вид", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-view-mode-test",
title: "Вид.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Текст</p>"
};
try {
render(<QWord document={document} onChange={vi.fn()} />);
const stage = screen.getByLabelText("Редактор QWord");
expect(stage).toHaveClass("qword-view-print");
fireEvent.click(screen.getByRole("tab", { name: "Вид" }));
fireEvent.click(screen.getByRole("button", { name: "Веб-документ" }));
expect(stage).toHaveClass("qword-view-web");
expect(screen.getByRole("button", { name: "Веб-документ" })).toHaveAttribute("aria-pressed", "true");
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("сохраняет позицию курсора при наборе текста в документе", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-caret-input-test",
title: "Курсор.docx",
updatedAt: "2026-06-04T00:00:00.000Z",
html: "<p>Начало</p>"
};
function StatefulQWord() {
const [currentDocument, setCurrentDocument] = useState(document);
return (
<QWord
document={currentDocument}
onChange={(nextDocument) => {
onChange(nextDocument);
setCurrentDocument(nextDocument);
}}
/>
);
}
try {
render(<StatefulQWord />);
const paper = screen.getByLabelText("Содержимое документа");
const textNode = paper.querySelector("p")?.firstChild;
expect(textNode).toBeInstanceOf(Text);
const typedText = "Начало текст";
textNode!.textContent = typedText;
const range = window.document.createRange();
range.setStart(textNode!, typedText.length);
range.collapse(true);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
fireEvent.input(paper);
await waitFor(() => expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ html: `<p>${typedText}</p>` })));
const selection = window.getSelection();
expect(selection?.anchorNode).toBe(textNode);
expect(selection?.anchorOffset).toBe(typedText.length);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("сохраняет позицию курсора после нормализации HTML родительским состоянием", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-caret-normalized-input-test",
title: "Курсор.docx",
updatedAt: "2026-06-04T00:00:00.000Z",
html: "<p>Начало</p>"
};
function StatefulQWord() {
const [currentDocument, setCurrentDocument] = useState(document);
return (
<QWord
document={currentDocument}
onChange={(nextDocument) => {
const normalizedDocument = {
...nextDocument,
html: nextDocument.html.replace("<p>", '<p data-normalized="true">')
};
onChange(normalizedDocument);
setCurrentDocument(normalizedDocument);
}}
/>
);
}
try {
render(<StatefulQWord />);
const paper = screen.getByLabelText("Содержимое документа");
const textNode = paper.querySelector("p")?.firstChild;
expect(textNode).toBeInstanceOf(Text);
const typedText = "Начало текст";
textNode!.textContent = typedText;
const range = window.document.createRange();
range.setStart(textNode!, typedText.length);
range.collapse(true);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
fireEvent.input(paper);
await waitFor(() =>
expect(onChange).toHaveBeenCalledWith(expect.objectContaining({ html: `<p data-normalized="true">${typedText}</p>` }))
);
await waitFor(() => {
const normalizedTextNode = paper.querySelector("p")?.firstChild;
const selection = window.getSelection();
expect(selection?.anchorNode).toBe(normalizedTextNode);
expect(selection?.anchorOffset).toBe(typedText.length);
});
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("вставляет таблицу выбранного размера через вкладку Вставка", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-insert-table-test",
title: "Таблица.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Перед таблицей</p>"
};
try {
render(<QWord document={document} onChange={onChange} />);
fireEvent.click(screen.getByRole("tab", { name: "Вставка" }));
fireEvent.change(screen.getByLabelText("Строки таблицы"), { target: { value: "2" } });
fireEvent.change(screen.getByLabelText("Столбцы таблицы"), { target: { value: "3" } });
fireEvent.click(screen.getByRole("button", { name: "Таблица" }));
const updatedDocument = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as WordDocument | undefined;
expect(updatedDocument?.html).toContain("<table>");
expect(updatedDocument?.html.match(/<tr/g)).toHaveLength(2);
expect(updatedDocument?.html.match(/<td/g)).toHaveLength(6);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("сохраняет активную ячейку после вставки таблицы и перерендера", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-insert-table-restore-test",
title: "Активная таблица.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<p>Перед таблицей</p>"
};
function StatefulQWord() {
const [currentDocument, setCurrentDocument] = useState(document);
return (
<QWord
document={currentDocument}
onChange={(nextDocument) => {
onChange(nextDocument);
setCurrentDocument(nextDocument);
}}
/>
);
}
try {
render(<StatefulQWord />);
fireEvent.click(screen.getByRole("tab", { name: "Вставка" }));
const tableButton = screen.getByRole("button", { name: "Таблица" });
expect(fireEvent.mouseDown(tableButton)).toBe(false);
fireEvent.click(tableButton);
const rowButton = screen.getByRole("button", { name: "Строка ниже" });
expect(fireEvent.mouseDown(rowButton)).toBe(false);
fireEvent.click(rowButton);
const updatedDocument = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as WordDocument | undefined;
expect(updatedDocument?.html.match(/<tr/g)).toHaveLength(4);
expect(updatedDocument?.html.match(/<td/g)).toHaveLength(12);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("добавляет строку и столбец к выбранной таблице", () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
const onChange = vi.fn();
globalThis.ResizeObserver = class {
observe() {}
disconnect() {}
} as unknown as typeof ResizeObserver;
window.requestAnimationFrame = ((callback: FrameRequestCallback) => {
callback(0);
return 1;
}) as typeof window.requestAnimationFrame;
const document: WordDocument = {
id: "word-table-structure-test",
title: "Структура таблицы.docx",
updatedAt: "2026-06-02T00:00:00.000Z",
html: "<table><tbody><tr><td>A</td><td>B</td></tr></tbody></table>"
};
function selectCell(text: string) {
const cell = screen.getByText(text).closest("td");
expect(cell).toBeInTheDocument();
const range = window.document.createRange();
range.selectNodeContents(cell as HTMLTableCellElement);
window.getSelection()?.removeAllRanges();
window.getSelection()?.addRange(range);
}
function StatefulQWord() {
const [currentDocument, setCurrentDocument] = useState(document);
return (
<QWord
document={currentDocument}
onChange={(nextDocument) => {
onChange(nextDocument);
setCurrentDocument(nextDocument);
}}
/>
);
}
try {
render(<StatefulQWord />);
fireEvent.click(screen.getByRole("tab", { name: "Вставка" }));
selectCell("A");
const rowButton = screen.getByRole("button", { name: "Строка ниже" });
expect(fireEvent.mouseDown(rowButton)).toBe(false);
fireEvent.click(rowButton);
let updatedDocument = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as WordDocument | undefined;
expect(updatedDocument?.html.match(/<tr/g)).toHaveLength(2);
expect(updatedDocument?.html.match(/<td/g)).toHaveLength(4);
selectCell("A");
const columnButton = screen.getByRole("button", { name: "Столбец справа" });
expect(fireEvent.mouseDown(columnButton)).toBe(false);
fireEvent.click(columnButton);
updatedDocument = onChange.mock.calls[onChange.mock.calls.length - 1]?.[0] as WordDocument | undefined;
expect(updatedDocument?.html.match(/<tr/g)).toHaveLength(2);
expect(updatedDocument?.html.match(/<td/g)).toHaveLength(6);
} finally {
globalThis.ResizeObserver = originalResizeObserver;
window.requestAnimationFrame = originalRequestAnimationFrame;
}
});
it("обновляет текущую страницу в статусе при прокрутке документа", async () => {
const originalResizeObserver = globalThis.ResizeObserver;
const originalRequestAnimationFrame = window.requestAnimationFrame;
+654 -31
View File
@@ -1,5 +1,5 @@
import { useLayoutEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties } from "react";
import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties, MouseEvent } from "react";
import {
AlignCenter,
AlignJustify,
@@ -7,6 +7,7 @@ import {
AlignRight,
Bold,
ClipboardPaste,
Columns2,
Copy,
Download,
FileText,
@@ -26,10 +27,12 @@ import {
Strikethrough,
Subscript,
Superscript,
Table2,
Type,
Rows3,
Underline
} from "lucide-react";
import type { WordDocument } from "../../types";
import type { WordDocument, WordPageMarginPreset, WordPageOrientation, WordPageSetup, WordPageSizeId } from "../../types";
import { downloadBlobFile, downloadTextFile } from "../../utils/download";
import { exportDocxBlob, importDocxFile } from "../../io/wordOffice";
import { replaceFileExtension } from "../../io/fileHelpers";
@@ -40,8 +43,23 @@ import { useQOfficeCommand } from "../../hooks/useQOfficeCommand";
interface QWordProps {
document: WordDocument;
zoom?: number;
viewMode?: WordViewMode;
onChange: (document: WordDocument) => void;
onStatusChange?: (status: QWordStatus) => void;
onViewModeChange?: (viewMode: WordViewMode) => void;
}
interface TableCellLocation {
tableIndex: number;
rowIndex: number;
cellIndex: number;
}
interface EditorSelectionBookmark {
anchorOffset: number;
anchorPath: number[];
focusOffset: number;
focusPath: number[];
}
export interface QWordStatus {
@@ -143,35 +161,309 @@ const styleGalleryOptions = [
{ value: "h6", label: "Заголовок 6" },
{ value: "blockquote", label: "Цитата" }
];
const wordRibbonTabs = ["Файл", "Главная", "Вставка", "Конструктор", "Макет", "Ссылки", "Рассылки", "Рецензирование", "Вид", "Справка"];
type WordRibbonTabId = "file" | "home" | "insert" | "design" | "layout" | "references" | "mailings" | "review" | "view" | "help";
export type WordViewMode = "print" | "read" | "web";
const wordRibbonTabs: Array<{ id: WordRibbonTabId; label: string }> = [
{ id: "file", label: "Файл" },
{ id: "home", label: "Главная" },
{ id: "insert", label: "Вставка" },
{ id: "design", label: "Конструктор" },
{ id: "layout", label: "Макет" },
{ id: "references", label: "Ссылки" },
{ id: "mailings", label: "Рассылки" },
{ id: "review", label: "Рецензирование" },
{ id: "view", label: "Вид" },
{ id: "help", label: "Справка" }
];
const wordViewModes: Array<{ id: WordViewMode; label: string }> = [
{ id: "print", label: "Разметка" },
{ id: "read", label: "Чтение" },
{ id: "web", label: "Веб-документ" }
];
const wordPageSizeOptions: Array<{ id: WordPageSizeId; label: string; width: number; height: number }> = [
{ id: "a4", label: "A4", width: 794, height: 1123 },
{ id: "letter", label: "Letter", width: 816, height: 1056 }
];
const wordPageOrientationOptions: Array<{ id: WordPageOrientation; label: string }> = [
{ id: "portrait", label: "Книжная" },
{ id: "landscape", label: "Альбомная" }
];
const wordPageMarginOptions: Array<{ id: WordPageMarginPreset; label: string; margins: { top: number; right: number; bottom: number; left: number } }> = [
{ id: "normal", label: "Обычные", margins: { top: 72, right: 86, bottom: 72, left: 86 } },
{ id: "narrow", label: "Узкие", margins: { top: 48, right: 48, bottom: 48, left: 48 } },
{ id: "wide", label: "Широкие", margins: { top: 92, right: 116, bottom: 92, left: 116 } }
];
const defaultWordPageSetup: WordPageSetup = { size: "a4", orientation: "portrait", marginPreset: "normal" };
const tableSizeOptions = [1, 2, 3, 4, 5, 6, 7, 8];
function findInPage(query: string) {
return (window as PageSearchWindow).find?.(query) ?? false;
}
const defaultPageViewHeight = 1180;
const defaultPageGap = 28;
function pageHeightFromStyles(element: HTMLElement) {
const pageHeight = Number.parseFloat(window.getComputedStyle(element).getPropertyValue("--qword-page-height"));
return Number.isFinite(pageHeight) && pageHeight > 0 ? pageHeight : defaultPageViewHeight;
}
export function qwordCurrentPageFromViewport(input: { stageTop: number; paperTop: number; pageHeight: number; pageCount: number; zoom: number }) {
const pageCount = Math.max(1, input.pageCount);
const zoom = Number.isFinite(input.zoom) && input.zoom > 0 ? input.zoom : 1;
const visualPageHeight = Math.max(1, input.pageHeight * zoom);
const visiblePaperOffset = Math.max(0, input.stageTop - input.paperTop);
return Math.min(pageCount, Math.max(1, Math.floor(visiblePaperOffset / visualPageHeight) + 1));
function qwordPageDimensions(setup: WordPageSetup) {
const size = wordPageSizeOptions.find((option) => option.id === setup.size) ?? wordPageSizeOptions[0];
return setup.orientation === "landscape" ? { width: size.height, height: size.width } : { width: size.width, height: size.height };
}
export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordProps) {
function qwordPageMargins(setup: WordPageSetup) {
return (wordPageMarginOptions.find((option) => option.id === setup.marginPreset) ?? wordPageMarginOptions[0]).margins;
}
function normalizedWordPageSetup(setup?: WordDocument["pageSetup"]): WordPageSetup {
const candidateSize = setup?.size;
const candidateOrientation = setup?.orientation;
const candidateMarginPreset = setup?.marginPreset;
const size = candidateSize && wordPageSizeOptions.some((option) => option.id === candidateSize) ? candidateSize : defaultWordPageSetup.size;
const orientation =
candidateOrientation && wordPageOrientationOptions.some((option) => option.id === candidateOrientation) ? candidateOrientation : defaultWordPageSetup.orientation;
const marginPreset =
candidateMarginPreset && wordPageMarginOptions.some((option) => option.id === candidateMarginPreset) ? candidateMarginPreset : defaultWordPageSetup.marginPreset;
return { size, orientation, marginPreset };
}
function clampedTableSize(value: number) {
return Number.isFinite(value) ? Math.min(8, Math.max(1, Math.trunc(value))) : 3;
}
function qwordTableHtml(rows: number, columns: number) {
const rowCount = clampedTableSize(rows);
const columnCount = clampedTableSize(columns);
const cells = Array.from({ length: columnCount }, () => "<td><br></td>").join("");
const tableRows = Array.from({ length: rowCount }, () => `<tr>${cells}</tr>`).join("");
return `<table><tbody>${tableRows}</tbody></table>`;
}
function createBlankTableCell(tagName: "td" | "th" = "td") {
const cell = globalThis.document.createElement(tagName);
cell.append(globalThis.document.createElement("br"));
return cell;
}
function tableCellFromSelection(editor: HTMLElement): HTMLTableCellElement | undefined {
const node = window.getSelection()?.anchorNode;
const element = node instanceof Element ? node : node?.parentElement;
const cell = element?.closest("td,th");
return cell instanceof HTMLTableCellElement && editor.contains(cell) ? cell : undefined;
}
function tableCellLocation(editor: HTMLElement, cell: HTMLTableCellElement): TableCellLocation | undefined {
const table = cell.closest("table");
const row = cell.parentElement;
if (!(table instanceof HTMLTableElement) || !(row instanceof HTMLTableRowElement) || !editor.contains(table)) {
return undefined;
}
const tableIndex = Array.from(editor.querySelectorAll("table")).indexOf(table);
const rowIndex = Array.from(table.rows).indexOf(row);
const cellIndex = cell.cellIndex;
return tableIndex >= 0 && rowIndex >= 0 && cellIndex >= 0 ? { cellIndex, rowIndex, tableIndex } : undefined;
}
function tableCellFromLocation(editor: HTMLElement, location: TableCellLocation): HTMLTableCellElement | undefined {
const table = Array.from(editor.querySelectorAll("table"))[location.tableIndex];
const cell = table?.rows[location.rowIndex]?.cells[location.cellIndex];
return cell instanceof HTMLTableCellElement ? cell : undefined;
}
function editorContainsNode(editor: HTMLElement, node: Node) {
return node === editor || editor.contains(node);
}
function editorNodePath(editor: HTMLElement, node: Node): number[] | undefined {
if (node === editor) {
return [];
}
const path: number[] = [];
let current: Node | null = node;
while (current && current !== editor) {
const parent: Node | null = current.parentNode;
if (!parent) {
return undefined;
}
const siblings = Array.from(parent.childNodes) as Node[];
const index = siblings.indexOf(current);
if (index < 0) {
return undefined;
}
path.unshift(index);
current = parent;
}
return current === editor ? path : undefined;
}
function editorNodeFromPath(editor: HTMLElement, path: number[]): Node | undefined {
let current: Node = editor;
for (const index of path) {
const child = current.childNodes[index];
if (!child) {
return undefined;
}
current = child;
}
return current;
}
function clampedSelectionOffset(node: Node, offset: number) {
const maxOffset = node.nodeType === Node.TEXT_NODE ? (node.textContent ?? "").length : node.childNodes.length;
return Math.min(Math.max(0, offset), maxOffset);
}
function editorSelectionBookmark(editor: HTMLElement): EditorSelectionBookmark | undefined {
const selection = window.getSelection();
const anchorNode = selection?.anchorNode;
const focusNode = selection?.focusNode;
if (!selection || selection.rangeCount === 0 || !anchorNode || !focusNode || !editorContainsNode(editor, anchorNode) || !editorContainsNode(editor, focusNode)) {
return undefined;
}
const anchorPath = editorNodePath(editor, anchorNode);
const focusPath = editorNodePath(editor, focusNode);
if (!anchorPath || !focusPath) {
return undefined;
}
return {
anchorOffset: selection.anchorOffset,
anchorPath,
focusOffset: selection.focusOffset,
focusPath
};
}
function restoreEditorSelection(editor: HTMLElement, bookmark: EditorSelectionBookmark) {
const anchorNode = editorNodeFromPath(editor, bookmark.anchorPath);
const focusNode = editorNodeFromPath(editor, bookmark.focusPath);
const selection = window.getSelection();
if (!anchorNode || !focusNode || !selection) {
return;
}
const anchorOffset = clampedSelectionOffset(anchorNode, bookmark.anchorOffset);
const focusOffset = clampedSelectionOffset(focusNode, bookmark.focusOffset);
selection.removeAllRanges();
if (typeof selection.setBaseAndExtent === "function") {
selection.setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
return;
}
const range = globalThis.document.createRange();
range.setStart(anchorNode, anchorOffset);
range.setEnd(focusNode, focusOffset);
selection.addRange(range);
}
function placeCaretInTableCell(cell: HTMLTableCellElement) {
if (cell.childNodes.length === 0) {
cell.append(globalThis.document.createElement("br"));
}
const range = globalThis.document.createRange();
range.selectNodeContents(cell);
range.collapse(true);
const selection = window.getSelection();
selection?.removeAllRanges();
selection?.addRange(range);
}
function keepEditorSelection(event: MouseEvent<HTMLButtonElement>) {
event.preventDefault();
}
export function qwordCurrentPageFromViewport(input: { stageTop: number; paperTop: number; pageHeight: number; pageCount: number; zoom: number; pageGap?: number }) {
const pageCount = Math.max(1, input.pageCount);
const zoom = Number.isFinite(input.zoom) && input.zoom > 0 ? input.zoom : 1;
const pageGap = Number.isFinite(input.pageGap) && input.pageGap ? Math.max(0, input.pageGap) : 0;
const visualPageStride = Math.max(1, (input.pageHeight + pageGap) * zoom);
const visiblePaperOffset = Math.max(0, input.stageTop - input.paperTop);
return Math.min(pageCount, Math.max(1, Math.floor(visiblePaperOffset / visualPageStride) + 1));
}
export function qwordPageCountFromContent(input: { scrollHeight: number; pageHeight: number; manualPageBreakCount?: number }) {
const pageHeight = Number.isFinite(input.pageHeight) && input.pageHeight > 0 ? input.pageHeight : defaultPageViewHeight;
const scrollHeight = Number.isFinite(input.scrollHeight) && input.scrollHeight > 0 ? input.scrollHeight : 0;
const manualPageBreakCount =
Number.isFinite(input.manualPageBreakCount) && input.manualPageBreakCount ? Math.max(0, Math.trunc(input.manualPageBreakCount)) : 0;
return Math.max(1, Math.ceil(scrollHeight / pageHeight), manualPageBreakCount + 1);
}
export function QWord({ document, zoom = 100, viewMode, onChange, onStatusChange, onViewModeChange }: QWordProps) {
const stageRef = useRef<HTMLElement>(null);
const editorRef = useRef<HTMLDivElement>(null);
const activeTableCellRef = useRef<HTMLTableCellElement | null>(null);
const activeTableCellLocationRef = useRef<TableCellLocation | null>(null);
const restoreActiveTableCellAfterRenderRef = useRef(false);
const pendingEditorSelectionRestoreRef = useRef<EditorSelectionBookmark | null>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const imageInputRef = useRef<HTMLInputElement>(null);
const [activeRibbonTab, setActiveRibbonTab] = useState<WordRibbonTabId>("home");
const [internalViewMode, setInternalViewMode] = useState<WordViewMode>("print");
const [tableRowCount, setTableRowCount] = useState(3);
const [tableColumnCount, setTableColumnCount] = useState(3);
const [pageView, setPageView] = useState({ count: 1, current: 1, height: defaultPageViewHeight });
const wordCount = useMemo(() => countWords(document.html), [document.html]);
const pageSetup = useMemo(() => normalizedWordPageSetup(document.pageSetup), [document.pageSetup]);
const stageStyle = { "--qword-zoom": String(zoom / 100) } as CSSProperties;
const pageDimensions = qwordPageDimensions(pageSetup);
const pageMargins = qwordPageMargins(pageSetup);
const pageFrameStyle = {
"--qword-page-count": String(pageView.count),
"--qword-page-gap": `${defaultPageGap}px`,
"--qword-page-width": `${pageDimensions.width}px`,
"--qword-page-height": `${pageDimensions.height}px`,
"--qword-page-margin-top": `${pageMargins.top}px`,
"--qword-page-margin-right": `${pageMargins.right}px`,
"--qword-page-margin-bottom": `${pageMargins.bottom}px`,
"--qword-page-margin-left": `${pageMargins.left}px`,
minHeight: `${pageView.count * pageView.height + Math.max(0, pageView.count - 1) * defaultPageGap}px`,
paddingBottom: pageView.count > 1 ? `${(pageView.count - 1) * defaultPageGap}px` : undefined
} as CSSProperties;
const activeRibbonTabLabel = wordRibbonTabs.find((tab) => tab.id === activeRibbonTab)?.label ?? "Главная";
const activeViewMode = viewMode ?? internalViewMode;
const stageClassName = ["document-stage", `qword-view-${activeViewMode}`].join(" ");
const changeViewMode = useCallback(
(nextViewMode: WordViewMode) => {
setInternalViewMode(nextViewMode);
onViewModeChange?.(nextViewMode);
},
[onViewModeChange]
);
const changePageSetup = useCallback(
(nextPageSetup: Partial<WordPageSetup>) => {
onChange({ ...document, pageSetup: normalizedWordPageSetup({ ...pageSetup, ...nextPageSetup }) });
refreshPageView();
},
[document, onChange, pageSetup]
);
useLayoutEffect(() => {
const editor = editorRef.current;
if (!editor || editor.innerHTML === document.html) {
pendingEditorSelectionRestoreRef.current = null;
return;
}
const pendingSelection = pendingEditorSelectionRestoreRef.current;
pendingEditorSelectionRestoreRef.current = null;
editor.innerHTML = document.html;
if (pendingSelection) {
restoreEditorSelection(editor, pendingSelection);
}
}, [document.html]);
function currentPageFromStage(pageCount: number, pageHeight: number) {
const stage = stageRef.current;
@@ -188,7 +480,8 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
paperTop: paperRect.top,
pageHeight,
pageCount,
zoom: Number.isFinite(currentZoom) ? currentZoom : 1
zoom: Number.isFinite(currentZoom) ? currentZoom : 1,
pageGap: defaultPageGap
});
}
@@ -200,7 +493,8 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
}
const height = pageHeightFromStyles(editor);
const count = Math.max(1, Math.ceil(editor.scrollHeight / height));
const manualPageBreakCount = editor.querySelectorAll('[data-qoffice-page-break="true"]').length;
const count = qwordPageCountFromContent({ scrollHeight: editor.scrollHeight, pageHeight: height, manualPageBreakCount });
const currentPage = currentPageFromStage(count, height);
setPageView((current) =>
current.count === count && current.height === height && current.current === currentPage ? current : { count, current: currentPage, height }
@@ -218,7 +512,26 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
const observer = new ResizeObserver(refreshPageView);
observer.observe(editor);
return () => observer.disconnect();
}, [document.html, zoom]);
}, [document.html, pageDimensions.height, pageDimensions.width, pageMargins.bottom, pageMargins.left, pageMargins.right, pageMargins.top, zoom]);
useLayoutEffect(() => {
if (!restoreActiveTableCellAfterRenderRef.current) {
return;
}
restoreActiveTableCellAfterRenderRef.current = false;
const editor = editorRef.current;
const location = activeTableCellLocationRef.current;
if (!editor || !location) {
return;
}
const restoredCell = tableCellFromLocation(editor, location);
if (restoredCell) {
activeTableCellRef.current = restoredCell;
placeCaretInTableCell(restoredCell);
}
}, [document.html]);
useLayoutEffect(() => {
onStatusChange?.({ currentPage: pageView.current, pageCount: pageView.count, wordCount });
@@ -227,9 +540,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
function runCommand(command: string, value?: string) {
editorRef.current?.focus();
globalThis.document.execCommand(command, false, value);
if (editorRef.current) {
onChange({ ...document, html: editorRef.current.innerHTML });
}
updateHtml();
}
function applyTextColor(color: string) {
@@ -311,6 +622,169 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
runCommand("insertHTML", '<span data-qoffice-page-break="true" contenteditable="false"></span><p><br></p>');
}
function setActiveTableCell(cell: HTMLTableCellElement) {
const editor = editorRef.current;
activeTableCellRef.current = cell;
if (editor) {
activeTableCellLocationRef.current = tableCellLocation(editor, cell) ?? activeTableCellLocationRef.current;
}
}
function queueActiveTableCellRestore(cell: HTMLTableCellElement) {
setActiveTableCell(cell);
restoreActiveTableCellAfterRenderRef.current = true;
}
function rememberActiveTableCell(): HTMLTableCellElement | undefined {
const editor = editorRef.current;
if (!editor) {
return undefined;
}
const cell = tableCellFromSelection(editor);
if (cell) {
setActiveTableCell(cell);
}
return cell;
}
function rememberActiveTableCellFromEvent(event: MouseEvent<HTMLElement>) {
const editor = editorRef.current;
const target = event.target;
const cell = target instanceof Element ? target.closest("td,th") : undefined;
if (editor && cell instanceof HTMLTableCellElement && editor.contains(cell)) {
setActiveTableCell(cell);
return;
}
rememberActiveTableCell();
}
function activeTableCell(): HTMLTableCellElement | undefined {
const editor = editorRef.current;
if (!editor) {
return undefined;
}
const selectedCell = rememberActiveTableCell();
if (selectedCell) {
return selectedCell;
}
const rememberedCell = activeTableCellRef.current;
if (rememberedCell && editor.contains(rememberedCell)) {
return rememberedCell;
}
const rememberedLocation = activeTableCellLocationRef.current;
if (!rememberedLocation) {
return undefined;
}
const restoredCell = tableCellFromLocation(editor, rememberedLocation);
if (restoredCell) {
activeTableCellRef.current = restoredCell;
}
return restoredCell;
}
function insertTable() {
const editor = editorRef.current;
if (!editor) {
return;
}
editor.focus();
const html = `${qwordTableHtml(tableRowCount, tableColumnCount)}<p><br></p>`;
const selection = window.getSelection();
const range = selection?.rangeCount ? selection.getRangeAt(0) : undefined;
if (range && (range.commonAncestorContainer === editor || editor.contains(range.commonAncestorContainer))) {
range.deleteContents();
const fragment = globalThis.document.createRange().createContextualFragment(html);
const firstCell = fragment.querySelector("td,th") as HTMLTableCellElement | null;
const lastNode = fragment.lastChild;
range.insertNode(fragment);
if (firstCell) {
queueActiveTableCellRestore(firstCell);
placeCaretInTableCell(firstCell);
} else if (lastNode) {
range.setStartAfter(lastNode);
range.collapse(true);
selection?.removeAllRanges();
selection?.addRange(range);
}
} else {
editor.insertAdjacentHTML("beforeend", html);
const tables = editor.querySelectorAll("table");
const firstCell = tables[tables.length - 1]?.querySelector("td,th") as HTMLTableCellElement | null;
if (firstCell) {
queueActiveTableCellRestore(firstCell);
placeCaretInTableCell(firstCell);
}
}
updateHtml();
}
function insertTableRowBelow() {
const editor = editorRef.current;
if (!editor) {
return;
}
const cell = activeTableCell();
const row = cell?.parentElement;
if (!cell || !(row instanceof HTMLTableRowElement)) {
window.alert("Поместите курсор в ячейку таблицы.");
return;
}
const newRow = globalThis.document.createElement("tr");
Array.from({ length: Math.max(1, row.cells.length) }, () => createBlankTableCell()).forEach((newCell) => newRow.append(newCell));
row.after(newRow);
const nextCell = newRow.cells[Math.min(cell.cellIndex, newRow.cells.length - 1)] ?? newRow.cells[0];
queueActiveTableCellRestore(nextCell);
placeCaretInTableCell(nextCell);
updateHtml();
}
function insertTableColumnRight() {
const editor = editorRef.current;
if (!editor) {
return;
}
const cell = activeTableCell();
const row = cell?.parentElement;
const table = cell?.closest("table");
if (!cell || !(row instanceof HTMLTableRowElement) || !(table instanceof HTMLTableElement)) {
window.alert("Поместите курсор в ячейку таблицы.");
return;
}
const columnIndex = cell.cellIndex;
let selectedNewCell: HTMLTableCellElement | undefined;
Array.from(table.rows).forEach((tableRow) => {
const referenceCell = tableRow.cells[Math.min(columnIndex, Math.max(0, tableRow.cells.length - 1))];
const tagName = referenceCell?.tagName.toLowerCase() === "th" ? "th" : "td";
const newCell = createBlankTableCell(tagName);
if (referenceCell?.nextSibling) {
tableRow.insertBefore(newCell, referenceCell.nextSibling);
} else {
tableRow.append(newCell);
}
if (tableRow === row) {
selectedNewCell = newCell;
}
});
if (selectedNewCell) {
queueActiveTableCellRestore(selectedNewCell);
placeCaretInTableCell(selectedNewCell);
}
updateHtml();
}
async function insertImage(file: File | undefined) {
if (!file) {
return;
@@ -338,8 +812,11 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
}
function updateHtml() {
if (editorRef.current) {
onChange({ ...document, html: editorRef.current.innerHTML });
rememberActiveTableCell();
const editor = editorRef.current;
if (editor) {
pendingEditorSelectionRestoreRef.current = editorSelectionBookmark(editor) ?? null;
onChange({ ...document, html: editor.innerHTML });
refreshPageView();
}
}
@@ -351,7 +828,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
try {
const imported = await importDocxFile(file);
onChange({ ...document, title: imported.title, html: imported.html });
onChange({ ...document, title: imported.title, html: imported.html, ...(imported.pageSetup ? { pageSetup: imported.pageSetup } : {}) });
} catch (error) {
window.alert(error instanceof Error ? error.message : "Не удалось открыть DOCX.");
} finally {
@@ -364,7 +841,7 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
async function saveDocx() {
try {
const fileName = replaceFileExtension(document.title, ".docx");
const blob = await exportDocxBlob(document.title, editorRef.current?.innerHTML ?? document.html);
const blob = await exportDocxBlob(document.title, editorRef.current?.innerHTML ?? document.html, { pageSetup: document.pageSetup });
if (isDesktopOfficeBridgeAvailable()) {
await saveDesktopOfficeFile("docx", fileName, blob);
return;
@@ -403,7 +880,6 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
return (
<div className="editor-layout qword-layout">
<section ref={stageRef} className="document-stage" style={stageStyle} onScroll={refreshPageView} aria-label="Редактор QWord">
<div className="module-toolbar word-module-toolbar">
<input
ref={fileInputRef}
@@ -422,13 +898,29 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
aria-label="Вставить изображение"
/>
<div className="word-ribbon-tabs" role="tablist" aria-label="Вкладки QWord">
{wordRibbonTabs.map((tab, index) => (
<button key={tab} className={index === 1 ? "is-active" : ""} type="button" role="tab" aria-selected={index === 1}>
{tab}
{wordRibbonTabs.map((tab) => (
<button
key={tab.id}
id={`qword-ribbon-tab-${tab.id}`}
className={activeRibbonTab === tab.id ? "is-active" : ""}
type="button"
role="tab"
aria-controls="qword-ribbon-panel"
aria-selected={activeRibbonTab === tab.id}
onClick={() => setActiveRibbonTab(tab.id)}
>
{tab.label}
</button>
))}
</div>
<div className="word-ribbon" aria-label="Лента команд QWord">
<div
id="qword-ribbon-panel"
className={`word-ribbon word-ribbon-${activeRibbonTab}`}
role="tabpanel"
aria-label={`Лента команд QWord: ${activeRibbonTabLabel}`}
aria-labelledby={`qword-ribbon-tab-${activeRibbonTab}`}
>
{activeRibbonTab === "file" ? (
<section className="word-ribbon-group word-file-group" aria-label="Файл">
<div className="word-file-actions">
<button className="word-icon-command" type="button" onClick={() => void chooseDocx()} title="Открыть" aria-label="Открыть">
@@ -452,7 +944,9 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</div>
<span className="word-ribbon-title">Файл</span>
</section>
) : null}
{activeRibbonTab === "home" ? (
<section className="word-ribbon-group word-clipboard-group" aria-label="Буфер обмена">
<button className="word-large-command" type="button" onClick={() => runCommand("paste")} title="Вставить">
<ClipboardPaste size={22} />
@@ -474,7 +968,9 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</div>
<span className="word-ribbon-title">Буфер обмена</span>
</section>
) : null}
{activeRibbonTab === "home" || activeRibbonTab === "design" ? (
<section className="word-ribbon-group word-font-group" aria-label="Шрифт">
<div className="word-select-row">
<select className="word-font-select" aria-label="Шрифт" defaultValue="Calibri" onChange={(event) => applyFontFamily(event.target.value)}>
@@ -544,7 +1040,59 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</div>
<span className="word-ribbon-title">Шрифт</span>
</section>
) : null}
{activeRibbonTab === "layout" ? (
<section className="word-ribbon-group word-page-setup-group" aria-label="Параметры страницы">
<div className="word-page-setup-controls">
<label className="word-mini-field">
<span>Поля</span>
<select
aria-label="Поля страницы"
value={pageSetup.marginPreset}
onChange={(event) => changePageSetup({ marginPreset: event.target.value as WordPageMarginPreset })}
>
{wordPageMarginOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
<label className="word-mini-field">
<span>Размер</span>
<select
aria-label="Размер страницы"
value={pageSetup.size}
onChange={(event) => changePageSetup({ size: event.target.value as WordPageSizeId })}
>
{wordPageSizeOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
<label className="word-mini-field">
<span>Ориентация</span>
<select
aria-label="Ориентация страницы"
value={pageSetup.orientation}
onChange={(event) => changePageSetup({ orientation: event.target.value as WordPageOrientation })}
>
{wordPageOrientationOptions.map((option) => (
<option key={option.id} value={option.id}>
{option.label}
</option>
))}
</select>
</label>
</div>
<span className="word-ribbon-title">Параметры страницы</span>
</section>
) : null}
{activeRibbonTab === "home" || activeRibbonTab === "layout" ? (
<section className="word-ribbon-group word-paragraph-group" aria-label="Абзац">
<div className="segmented-tools" aria-label="Списки">
<button type="button" onClick={() => runCommand("insertUnorderedList")} title="Маркированный список">
@@ -574,7 +1122,9 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</button>
<span className="word-ribbon-title">Абзац</span>
</section>
) : null}
{activeRibbonTab === "home" || activeRibbonTab === "design" ? (
<section className="word-ribbon-group word-styles-group" aria-label="Стили">
<div className="word-style-gallery">
{styleGalleryOptions.map((style) => (
@@ -586,7 +1136,9 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</div>
<span className="word-ribbon-title">Стили</span>
</section>
) : null}
{activeRibbonTab === "insert" || activeRibbonTab === "references" ? (
<section className="word-ribbon-group word-insert-group" aria-label="Вставка">
<button className="compact-command" type="button" onClick={insertLink}>
<Link size={16} />
@@ -598,7 +1150,70 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</button>
<span className="word-ribbon-title">Вставка</span>
</section>
) : null}
{activeRibbonTab === "insert" ? (
<section className="word-ribbon-group word-table-group" aria-label="Таблица">
<div className="word-table-controls">
<label className="word-mini-field">
<span>Строки</span>
<select aria-label="Строки таблицы" value={tableRowCount} onChange={(event) => setTableRowCount(clampedTableSize(Number(event.target.value)))}>
{tableSizeOptions.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</label>
<label className="word-mini-field">
<span>Столбцы</span>
<select aria-label="Столбцы таблицы" value={tableColumnCount} onChange={(event) => setTableColumnCount(clampedTableSize(Number(event.target.value)))}>
{tableSizeOptions.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
</label>
<button className="compact-command" type="button" onMouseDown={keepEditorSelection} onClick={insertTable}>
<Table2 size={16} />
Таблица
</button>
<button className="compact-command word-table-structure-command" type="button" onMouseDown={keepEditorSelection} onClick={insertTableRowBelow}>
<Rows3 size={16} />
Строка ниже
</button>
<button className="compact-command word-table-structure-command" type="button" onMouseDown={keepEditorSelection} onClick={insertTableColumnRight}>
<Columns2 size={16} />
Столбец справа
</button>
</div>
<span className="word-ribbon-title">Таблица</span>
</section>
) : null}
{activeRibbonTab === "view" ? (
<section className="word-ribbon-group word-view-group" aria-label="Режимы просмотра">
<div className="word-view-mode-row">
{wordViewModes.map((mode) => (
<button
key={mode.id}
className={`compact-command${activeViewMode === mode.id ? " is-active" : ""}`}
type="button"
aria-label={mode.label}
aria-pressed={activeViewMode === mode.id}
onClick={() => changeViewMode(mode.id)}
>
<FileText size={16} />
{mode.label}
</button>
))}
</div>
<span className="word-ribbon-title">Вид</span>
</section>
) : null}
{activeRibbonTab === "home" || activeRibbonTab === "review" ? (
<section className="word-ribbon-group word-edit-group" aria-label="Редактирование">
<button className="compact-command" type="button" onClick={findText}>
<Search size={16} />
@@ -610,9 +1225,11 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
</button>
<span className="word-ribbon-title">Редактирование</span>
</section>
) : null}
</div>
</div>
<section ref={stageRef} className={stageClassName} style={stageStyle} onScroll={refreshPageView} aria-label="Редактор QWord">
<div className="page-ruler" aria-hidden="true">
{Array.from({ length: 9 }, (_, index) => (
<span key={index}>{index + 1}</span>
@@ -625,22 +1242,28 @@ export function QWord({ document, zoom = 100, onChange, onStatusChange }: QWordP
))}
</div>
<div className="paper-frame">
<div className="paper-frame" style={pageFrameStyle}>
<div className="page-sheets" aria-hidden="true">
{Array.from({ length: pageView.count }, (_, index) => (
<span key={index} className="page-sheet" />
))}
</div>
<article
ref={editorRef}
className="paper document-content"
contentEditable
suppressContentEditableWarning
onInput={updateHtml}
dangerouslySetInnerHTML={{ __html: document.html }}
onFocus={rememberActiveTableCell}
onKeyUp={rememberActiveTableCell}
onMouseDown={rememberActiveTableCellFromEvent}
onMouseUp={rememberActiveTableCellFromEvent}
aria-label="Содержимое документа"
/>
{pageView.count > 1 ? (
<div className="page-break-guides" aria-hidden="true">
{Array.from({ length: pageView.count - 1 }, (_, index) => (
<span key={index} style={{ top: `${(index + 1) * pageView.height}px` }}>
Страница {index + 2}
</span>
<span key={index} style={{ top: `${(index + 1) * pageView.height + index * defaultPageGap}px` }} />
))}
</div>
) : null}
+1 -1
View File
@@ -1,7 +1,7 @@
export {};
type DesktopOfficeFileKind = "docx" | "xlsx" | "pptx" | "eml" | "mail";
type QOfficeDesktopCommand = "open" | "save" | "export-pdf" | "print";
type QOfficeDesktopCommand = "open" | "save" | "export-pdf" | "print" | "undo" | "redo";
interface DesktopOpenOfficeFileResult {
canceled: boolean;
+25 -2
View File
@@ -1,5 +1,5 @@
import { render, waitFor } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
import { cleanup, render, waitFor } from "@testing-library/react";
import { afterEach, describe, expect, it, vi } from "vitest";
import { useQOfficeCommand } from "./useQOfficeCommand";
function CommandProbe({ onSave, onExportPdf }: { onSave: () => void; onExportPdf?: () => void }) {
@@ -8,6 +8,10 @@ function CommandProbe({ onSave, onExportPdf }: { onSave: () => void; onExportPdf
}
describe("useQOfficeCommand", () => {
afterEach(() => {
cleanup();
});
it("вызывает обработчик команды QOffice", async () => {
const onSave = vi.fn();
render(<CommandProbe onSave={onSave} />);
@@ -39,4 +43,23 @@ describe("useQOfficeCommand", () => {
await waitFor(() => expect(onExportPdf).toHaveBeenCalledTimes(1));
expect(onSave).not.toHaveBeenCalled();
});
it("использует команду документа для undo и redo без обработчика приложения", async () => {
const originalExecCommand = document.execCommand;
const execCommand = vi.fn();
Object.defineProperty(document, "execCommand", { configurable: true, value: execCommand });
try {
render(<CommandProbe onSave={vi.fn()} />);
window.dispatchEvent(new CustomEvent("qoffice-command", { detail: { command: "undo" } }));
window.dispatchEvent(new CustomEvent("qoffice-command", { detail: { command: "redo" } }));
await waitFor(() => expect(execCommand).toHaveBeenCalledWith("redo"));
expect(execCommand).toHaveBeenNthCalledWith(1, "undo");
expect(execCommand).toHaveBeenNthCalledWith(2, "redo");
} finally {
Object.defineProperty(document, "execCommand", { configurable: true, value: originalExecCommand });
}
});
});
+6 -1
View File
@@ -1,6 +1,6 @@
import { useEffect, useRef } from "react";
export type QOfficeCommand = "open" | "save" | "export-pdf" | "print";
export type QOfficeCommand = "open" | "save" | "export-pdf" | "print" | "undo" | "redo";
export type QOfficeCommandHandlers = Partial<Record<QOfficeCommand, () => void | Promise<void>>>;
export function useQOfficeCommand(handlers: QOfficeCommandHandlers) {
@@ -16,6 +16,11 @@ export function useQOfficeCommand(handlers: QOfficeCommandHandlers) {
const handler = handlersRef.current[command];
if (handler) {
void handler();
return;
}
if (command === "undo" || command === "redo") {
globalThis.document.execCommand?.(command);
}
}
+108
View File
@@ -8,6 +8,8 @@ import {
buildColumnWidthsXml,
buildHyperlinksXml,
buildMergeCellsXml,
buildPageMarginsXml,
buildPageSetupXml,
buildSheetPrXml,
buildSheetViewsXml,
createCellStyleRegistry,
@@ -21,6 +23,7 @@ import {
workbookPrintAreas,
workbookRelationshipTargets,
workbookSheetRefs,
workbookUsesDate1904,
worksheetXmlToAutoFilter,
worksheetXmlToCells,
worksheetXmlToCellFormats,
@@ -31,12 +34,14 @@ import {
worksheetXmlToHyperlinks,
worksheetCommentsXmlToComments,
worksheetXmlToMergedCells,
worksheetXmlToPageSetup,
worksheetXmlToRowHeights,
worksheetXmlToShowGridLines,
worksheetXmlToTabColor,
worksheetXmlToZoomScale,
xlsxStylesXmlToCellFormatTable,
xlsxThemeXmlToColors,
xlsxSafeSheetNames,
xlsxCellToText
} from "./excellOffice";
@@ -614,6 +619,38 @@ describe("excellOffice OOXML helpers", () => {
).toBe("sheet-7");
});
it("detects the XLSX 1904 date system flag from workbook properties", () => {
expect(workbookUsesDate1904({ workbook: { workbookPr: { date1904: "1" } } })).toBe(true);
expect(workbookUsesDate1904({ workbook: { workbookPr: { date1904: "true" } } })).toBe(true);
expect(workbookUsesDate1904({ workbook: { workbookPr: { date1904: "0" } } })).toBe(false);
});
it("converts imported XLSX 1904 date serials to the QExcell 1900 serial system", async () => {
const zip = new JSZip();
zip.file(
"xl/workbook.xml",
`<workbook><workbookPr date1904="1"/><sheets><sheet name="Dates" sheetId="1" r:id="rId1"/></sheets></workbook>`
);
zip.file(
"xl/_rels/workbook.xml.rels",
`<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Target="worksheets/sheet1.xml"/></Relationships>`
);
zip.file("xl/styles.xml", `<styleSheet><cellXfs count="3"><xf numFmtId="0"/><xf numFmtId="14"/><xf numFmtId="20"/></cellXfs></styleSheet>`);
zip.file(
"xl/worksheets/sheet1.xml",
`<worksheet><sheetData><row r="1"><c r="A1" s="1"><v>43465</v></c><c r="B1"><v>5</v></c><c r="C1" s="2"><v>0.5</v></c></row></sheetData></worksheet>`
);
const blob = await zip.generateAsync({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
});
const imported = await importXlsxFile(new File([blob], "Date1904.xlsx", { type: blob.type }));
expect(imported.sheets[0].cells).toEqual({ A1: "44927", B1: "5", C1: "0.5" });
expect(imported.sheets[0].cellFormats).toEqual({ A1: { numberFormat: "m/d/yy" }, C1: { numberFormat: "h:mm" } });
});
it("сохраняет и импортирует активный лист XLSX через workbookView activeTab", async () => {
const blob = await exportXlsxBlob({
id: "book-1",
@@ -633,6 +670,38 @@ describe("excellOffice OOXML helpers", () => {
expect(imported.activeSheet).toBe("sheet-2");
});
it("normalizes XLSX sheet names to Excel-safe unique names on export", async () => {
expect(
xlsxSafeSheetNames([
{ name: "Sales/2026:Q1*?" },
{ name: "'Very long worksheet name that exceeds thirty one characters'" },
{ name: "Sales 2026 Q1" },
{ name: "'[]:*?/\\'" },
{ name: "History" }
])
).toEqual(["Sales 2026 Q1", "Very long worksheet name that e", "Sales 2026 Q1 (2)", "Лист 4", "History 1"]);
const blob = await exportXlsxBlob({
id: "book-1",
title: "Safe sheet names.xlsx",
updatedAt: "2026-06-01T00:00:00.000Z",
activeSheet: "sheet-1",
sheets: [
{ id: "sheet-1", name: "Sales/2026:Q1*?", printArea: "A1:B2", cells: { A1: "Sales" } },
{ id: "sheet-2", name: "Sales 2026 Q1", cells: { A1: "Duplicate" } }
]
});
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const workbookXml = await zip.file("xl/workbook.xml")?.async("string");
const imported = await importXlsxFile(new File([blob], "Safe sheet names.xlsx", { type: blob.type }));
expect(workbookXml).toContain('<sheet name="Sales 2026 Q1" sheetId="1" r:id="rId1"/>');
expect(workbookXml).toContain('<sheet name="Sales 2026 Q1 (2)" sheetId="2" r:id="rId2"/>');
expect(workbookXml).toContain('<definedName name="_xlnm.Print_Area" localSheetId="0">\'Sales 2026 Q1\'!$A$1:$B$2</definedName>');
expect(imported.sheets.map((sheet) => sheet.name)).toEqual(["Sales 2026 Q1", "Sales 2026 Q1 (2)"]);
expect(imported.sheets[0].printArea).toBe("A1:B2");
});
it("сохраняет и импортирует область печати XLSX через definedName _xlnm.Print_Area", async () => {
expect(
workbookPrintAreas(
@@ -673,6 +742,45 @@ describe("excellOffice OOXML helpers", () => {
expect(imported.sheets[1].printArea).toBe("B2:C4,E1:E3");
});
it("сохраняет и импортирует параметры страницы XLSX через pageMargins и pageSetup", async () => {
expect(
worksheetXmlToPageSetup({
worksheet: {
pageMargins: { left: "0.25", right: "0.25", top: "0.75", bottom: "0.75", header: "0.3", footer: "0.3" },
pageSetup: { paperSize: "1", orientation: "landscape" }
}
})
).toEqual({ size: "letter", orientation: "landscape", marginPreset: "narrow" });
expect(buildPageMarginsXml({ size: "a4", orientation: "portrait", marginPreset: "wide" })).toBe(
'<pageMargins left="1" right="1" top="1" bottom="1" header="0.5" footer="0.5"/>'
);
expect(buildPageSetupXml({ size: "letter", orientation: "landscape", marginPreset: "normal" })).toBe(
'<pageSetup paperSize="1" orientation="landscape"/>'
);
const blob = await exportXlsxBlob({
id: "book-1",
title: "Page setup.xlsx",
updatedAt: "2026-06-01T00:00:00.000Z",
activeSheet: "sheet-1",
sheets: [
{
id: "sheet-1",
name: "Layout",
pageSetup: { size: "letter", orientation: "landscape", marginPreset: "narrow" },
cells: { A1: "Layout" }
}
]
});
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const sheetXml = (await zip.file("xl/worksheets/sheet1.xml")?.async("string")) ?? "";
const imported = await importXlsxFile(new File([blob], "Page setup.xlsx", { type: blob.type }));
expect(sheetXml).toContain('<pageMargins left="0.25" right="0.25" top="0.75" bottom="0.75" header="0.3" footer="0.3"/>');
expect(sheetXml).toContain('<pageSetup paperSize="1" orientation="landscape"/>');
expect(imported.sheets[0].pageSetup).toEqual({ size: "letter", orientation: "landscape", marginPreset: "narrow" });
});
it("сохраняет и импортирует скрытые листы XLSX через sheet state", async () => {
const blob = await exportXlsxBlob({
id: "book-1",
+209 -17
View File
@@ -1,4 +1,15 @@
import type { CellFormat, MergedCellRange, SheetChart, SheetChartType, SheetFrozenPane, Workbook } from "../types";
import type {
CellFormat,
MergedCellRange,
SheetChart,
SheetChartType,
SheetFrozenPane,
SheetPageMarginPreset,
SheetPageOrientation,
SheetPageSetup,
SheetPageSizeId,
Workbook
} from "../types";
import { evaluateCell, expandRange } from "../utils/spreadsheet";
import { officeTitleFromFileName, readOfficeFileAsArrayBuffer, XLSX_MIME_TYPE } from "./fileHelpers";
@@ -19,6 +30,7 @@ export interface ImportedExcellWorkbook {
showGridLines?: boolean;
zoomScale?: number;
printArea?: string;
pageSetup?: SheetPageSetup;
cells: Record<string, string>;
mergedCells?: MergedCellRange[];
hyperlinks?: Record<string, string>;
@@ -77,6 +89,7 @@ interface ParsedSheet {
showGridLines?: boolean;
zoomScale?: number;
printArea?: string;
pageSetup?: SheetPageSetup;
cells: Record<string, string>;
mergedCells?: MergedCellRange[];
hyperlinks?: Record<string, string>;
@@ -210,6 +223,16 @@ const builtinNumberFormats: Record<number, string> = {
48: "##0.0E+0",
49: "@"
};
const defaultSheetPageSetup: SheetPageSetup = { size: "a4", orientation: "portrait", marginPreset: "normal" };
const xlsxPageSizePaperIds: Record<SheetPageSizeId, number> = {
letter: 1,
a4: 9
};
const xlsxPageMargins: Record<SheetPageMarginPreset, { left: number; right: number; top: number; bottom: number; header: number; footer: number }> = {
normal: { left: 0.7, right: 0.7, top: 0.75, bottom: 0.75, header: 0.3, footer: 0.3 },
narrow: { left: 0.25, right: 0.25, top: 0.75, bottom: 0.75, header: 0.3, footer: 0.3 },
wide: { left: 1, right: 1, top: 1, bottom: 1, header: 0.5, footer: 0.5 }
};
export async function importXlsxFile(file: File): Promise<ImportedExcellWorkbook> {
if (!file.name.toLowerCase().endsWith(".xlsx")) {
@@ -226,6 +249,7 @@ export async function importXlsxFile(file: File): Promise<ImportedExcellWorkbook
const themeColors = await readOptionalWorkbookThemeColors(zip, parser);
const styleTable = xlsxStylesXmlToCellFormatTable(await readOptionalWorkbookStyles(zip, parser), themeColors);
const sheetRefs = workbookSheetRefs(workbookXml);
const date1904 = workbookUsesDate1904(workbookXml);
const printAreas = workbookPrintAreas(workbookXml, sheetRefs);
const relationshipTargets = workbookRelationshipTargets(relationshipsXml);
const sheets = await Promise.all(
@@ -249,7 +273,7 @@ export async function importXlsxFile(file: File): Promise<ImportedExcellWorkbook
const sheetRelationshipsXml = await readOptionalSheetRelationships(zip, parser, sheetPath);
const commentsPath = worksheetCommentsPath(sheetRelationshipsXml, sheetPath);
const commentsXml = commentsPath ? await readOptionalParsedXml(zip, parser, commentsPath) : undefined;
const parsedSheet = parsedWorksheetToSheet(sheetXml, sheet, index, sharedStrings, sheetRelationshipsXml, styleTable, themeColors, commentsXml);
const parsedSheet = parsedWorksheetToSheet(sheetXml, sheet, index, sharedStrings, sheetRelationshipsXml, styleTable, themeColors, commentsXml, date1904);
const charts = await worksheetXmlToCharts(zip, parser, sheetXml, sheetRelationshipsXml, sheetPath, parsedSheet.name);
return { ...parsedSheet, ...(printAreas[sheet.id] ? { printArea: printAreas[sheet.id] } : {}), charts };
})
@@ -267,11 +291,13 @@ export async function exportXlsxBlob(workbook: Workbook): Promise<Blob> {
const JSZip = await loadJsZip();
const zip = new JSZip();
const sheets = workbook.sheets.length > 0 ? workbook.sheets : [{ id: "sheet-1", name: "Лист 1", cells: {}, mergedCells: [], hyperlinks: {} }];
const safeSheetNames = xlsxSafeSheetNames(sheets);
const safeSheets = sheets.map((sheet, index) => ({ ...sheet, name: safeSheetNames[index] }));
const styleRegistry = createCellStyleRegistry(sheets.map((sheet) => sheet.cellFormats));
const chartParts = chartPartRefsForSheets(sheets);
const commentParts = commentPartRefsForSheets(sheets);
const activeSheetIndex = Math.max(0, sheets.findIndex((sheet) => sheet.id === workbook.activeSheet));
const styleRegistry = createCellStyleRegistry(safeSheets.map((sheet) => sheet.cellFormats));
const chartParts = chartPartRefsForSheets(safeSheets);
const commentParts = commentPartRefsForSheets(safeSheets);
const activeSheetIndex = Math.max(0, safeSheets.findIndex((sheet) => sheet.id === workbook.activeSheet));
zip.file("[Content_Types].xml", buildContentTypesXml(sheets.length, chartParts, commentParts));
zip.file("_rels/.rels", buildRootRelationshipsXml());
@@ -280,8 +306,8 @@ export async function exportXlsxBlob(workbook: Workbook): Promise<Blob> {
zip.file(
"xl/workbook.xml",
buildWorkbookXml(
sheets.map((sheet, index) => ({
name: sheet.name.trim() || `Лист ${index + 1}`,
safeSheets.map((sheet) => ({
name: sheet.name,
...(sheet.visibility ? { visibility: sheet.visibility } : {}),
...(sheet.printArea ? { printArea: sheet.printArea } : {})
})),
@@ -291,7 +317,7 @@ export async function exportXlsxBlob(workbook: Workbook): Promise<Blob> {
zip.file("xl/_rels/workbook.xml.rels", buildWorkbookRelationshipsXml(sheets.length));
zip.file("xl/styles.xml", buildStylesXml(styleRegistry));
sheets.forEach((sheet, index) => {
safeSheets.forEach((sheet, index) => {
const sheetChartParts = chartParts.filter((part) => part.sheetIndex === index);
const sheetCommentPart = commentParts.find((part) => part.sheetIndex === index);
const externalHyperlinkCount = sortedExternalHyperlinkEntries(sheet.hyperlinks).length;
@@ -317,7 +343,8 @@ export async function exportXlsxBlob(workbook: Workbook): Promise<Blob> {
sheet.hiddenRows,
sheet.showGridLines,
sheet.zoomScale,
legacyDrawingRelationshipId
legacyDrawingRelationshipId,
sheet.pageSetup
)
);
const relationshipsXml = buildWorksheetRelationshipsXml(
@@ -356,7 +383,8 @@ export function parsedWorksheetToSheet(
relationshipsXml?: unknown,
styleTable: Array<CellFormat | undefined> = [],
themeColors: string[] = defaultXlsxThemeColors,
commentsXml?: unknown
commentsXml?: unknown,
date1904 = false
): ParsedSheet {
const frozenPane = worksheetXmlToFrozenPane(worksheetXml);
const autoFilter = worksheetXmlToAutoFilter(worksheetXml);
@@ -367,6 +395,7 @@ export function parsedWorksheetToSheet(
const hiddenRows = worksheetXmlToHiddenRows(worksheetXml);
const showGridLines = worksheetXmlToShowGridLines(worksheetXml);
const zoomScale = worksheetXmlToZoomScale(worksheetXml);
const pageSetup = worksheetXmlToPageSetup(worksheetXml);
return {
id: sheet.id || `sheet-${index + 1}`,
@@ -381,7 +410,8 @@ export function parsedWorksheetToSheet(
...(Object.keys(hiddenRows).length > 0 ? { hiddenRows } : {}),
...(showGridLines === false ? { showGridLines } : {}),
...(zoomScale ? { zoomScale } : {}),
cells: worksheetXmlToCells(worksheetXml, sharedStrings),
...(pageSetup ? { pageSetup } : {}),
cells: worksheetXmlToCells(worksheetXml, sharedStrings, styleTable, date1904),
mergedCells: worksheetXmlToMergedCells(worksheetXml),
hyperlinks: worksheetXmlToHyperlinks(worksheetXml, relationshipsXml),
comments: worksheetCommentsXmlToComments(commentsXml),
@@ -390,7 +420,7 @@ export function parsedWorksheetToSheet(
};
}
export function worksheetXmlToCells(worksheetXml: unknown, sharedStrings: string[]) {
export function worksheetXmlToCells(worksheetXml: unknown, sharedStrings: string[], styleTable: Array<CellFormat | undefined> = [], date1904 = false) {
const cells: Record<string, string> = {};
const sharedFormulas: SharedFormulaMap = {};
const parsedCells = worksheetCellRecords(worksheetXml);
@@ -406,9 +436,10 @@ export function worksheetXmlToCells(worksheetXml: unknown, sharedStrings: string
parsedCells.forEach(({ address, cell }) => {
const text = xlsxCellToText(cell, sharedStrings, sharedFormulas, address);
const importedText = date1904 ? date1904AdjustedCellText(cell, text, styleTable[numberAttribute(cell.s)]) : text;
if (text !== "") {
cells[address] = text;
if (importedText !== "") {
cells[address] = importedText;
}
});
@@ -535,6 +566,18 @@ export function worksheetXmlToZoomScale(worksheetXml: unknown) {
return normalizedSheetZoomScale(sheetView.zoomScale);
}
export function worksheetXmlToPageSetup(worksheetXml: unknown): SheetPageSetup | undefined {
const worksheet = childRecord(worksheetXml, "worksheet");
const pageSetup = childRecord(worksheet, "pageSetup");
const pageMargins = childRecord(worksheet, "pageMargins");
const size = sheetPageSizeFromPaperId(pageSetup.paperSize) ?? defaultSheetPageSetup.size;
const orientation = normalizedSheetPageOrientation(pageSetup.orientation) ?? defaultSheetPageSetup.orientation;
const marginPreset = sheetPageMarginPresetFromRecord(pageMargins) ?? defaultSheetPageSetup.marginPreset;
const hasPageSetup = Object.keys(pageSetup).length > 0;
const hasPageMargins = Object.keys(pageMargins).length > 0;
return hasPageSetup || hasPageMargins ? { size, orientation, marginPreset } : undefined;
}
export function worksheetXmlToAutoFilter(worksheetXml: unknown) {
const worksheet = childRecord(worksheetXml, "worksheet");
const autoFilter = childRecord(worksheet, "autoFilter");
@@ -799,7 +842,8 @@ export function buildWorksheetXml(
hiddenRows: Record<string, boolean> = {},
showGridLines?: boolean,
zoomScale?: number,
legacyDrawingRelationshipId = ""
legacyDrawingRelationshipId = "",
pageSetup?: SheetPageSetup
) {
const normalizedRowHeights = normalizedSheetRowHeights(rowHeights);
const normalizedHiddenRows = normalizedSheetHiddenRows(hiddenRows);
@@ -840,9 +884,11 @@ export function buildWorksheetXml(
const sheetPrXml = buildSheetPrXml(tabColor);
const sheetViewsXml = buildSheetViewsXml(frozenPane, showGridLines, zoomScale);
const colsXml = buildColumnWidthsXml(columnWidths, hiddenColumns);
const pageMarginsXml = buildPageMarginsXml(pageSetup);
const pageSetupXml = buildPageSetupXml(pageSetup);
return xmlDeclaration(
`<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">${sheetPrXml}${sheetViewsXml}${colsXml}<sheetData>${rowXml}</sheetData>${autoFilterXml}${mergeCellsXml}${hyperlinksXml}${drawingXml}${legacyDrawingXml}</worksheet>`
`<worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships">${sheetPrXml}${sheetViewsXml}${colsXml}<sheetData>${rowXml}</sheetData>${autoFilterXml}${mergeCellsXml}${hyperlinksXml}${pageMarginsXml}${pageSetupXml}${drawingXml}${legacyDrawingXml}</worksheet>`
);
}
@@ -935,6 +981,24 @@ export function buildSheetPrXml(tabColor?: string) {
return color ? `<sheetPr><tabColor rgb="FF${color}"/></sheetPr>` : "";
}
export function buildPageMarginsXml(pageSetup?: SheetPageSetup) {
if (!pageSetup) {
return "";
}
const margins = xlsxPageMargins[normalizedSheetPageSetup(pageSetup).marginPreset];
return `<pageMargins left="${formatSheetDimension(margins.left)}" right="${formatSheetDimension(margins.right)}" top="${formatSheetDimension(margins.top)}" bottom="${formatSheetDimension(margins.bottom)}" header="${formatSheetDimension(margins.header)}" footer="${formatSheetDimension(margins.footer)}"/>`;
}
export function buildPageSetupXml(pageSetup?: SheetPageSetup) {
if (!pageSetup) {
return "";
}
const normalized = normalizedSheetPageSetup(pageSetup);
return `<pageSetup paperSize="${xlsxPageSizePaperIds[normalized.size]}" orientation="${normalized.orientation}"/>`;
}
export function buildColumnWidthsXml(columnWidths: Record<string, number> = {}, hiddenColumns: Record<string, boolean> = {}) {
const columnsByNumber = new Map<number, { width?: number; hidden?: boolean }>();
normalizedSheetColumnWidths(columnWidths).forEach(({ column, width }) => {
@@ -1030,6 +1094,12 @@ export function workbookActiveSheetId(workbookXml: unknown, sheets: Array<{ id:
return sheets[activeTab]?.id ?? "";
}
export function workbookUsesDate1904(workbookXml: unknown) {
const workbook = childRecord(workbookXml, "workbook");
const workbookPr = childRecord(workbook, "workbookPr");
return booleanAttribute(workbookPr.date1904 ?? workbookPr["@_date1904"]);
}
export function workbookPrintAreas(workbookXml: unknown, sheets: Array<{ id: string; name: string }>): Record<string, string> {
const workbook = childRecord(workbookXml, "workbook");
const definedNames = childRecord(workbook, "definedNames");
@@ -1109,6 +1179,45 @@ function buildRootRelationshipsXml() {
);
}
export function xlsxSafeSheetNames(sheets: Array<{ name: string }>) {
const usedNames = new Set<string>();
return sheets.map((sheet, index) => uniqueXlsxSheetName(sheet.name, index, usedNames));
}
function uniqueXlsxSheetName(value: string, index: number, usedNames: Set<string>) {
const fallback = `Лист ${index + 1}`;
const normalizedName = normalizedXlsxSheetName(value);
const baseName = xlsxReservedSheetName(normalizedName) ? `${normalizedName} 1` : normalizedName || fallback;
let suffixNumber = 1;
let candidate = truncateXlsxSheetName(baseName);
while (usedNames.has(candidate.toLowerCase())) {
suffixNumber += 1;
const suffix = ` (${suffixNumber})`;
candidate = `${truncateXlsxSheetName(baseName, 31 - suffix.length)}${suffix}`;
}
usedNames.add(candidate.toLowerCase());
return candidate;
}
function normalizedXlsxSheetName(value: string) {
return value
.replace(/[\u0000-\u001f\\/?*:[\]]+/g, " ")
.replace(/\s+/g, " ")
.trim()
.replace(/^'+|'+$/g, "")
.trim();
}
function xlsxReservedSheetName(value: string) {
return value.trim().toLowerCase() === "history";
}
function truncateXlsxSheetName(value: string, maxLength = 31) {
return Array.from(value).slice(0, Math.max(1, maxLength)).join("");
}
function buildWorkbookXml(sheets: Array<{ name: string; visibility?: WorkbookSheetRef["visibility"]; printArea?: string }>, activeSheetIndex = 0) {
const activeTab = Math.min(Math.max(0, activeSheetIndex), Math.max(0, sheets.length - 1));
const bookViews = `<bookViews><workbookView activeTab="${activeTab}"/></bookViews>`;
@@ -1748,6 +1857,37 @@ function normalizedNumberFormat(value?: string) {
return raw.slice(0, 255);
}
function date1904AdjustedCellText(cell: XmlRecord, text: string, format?: CellFormat) {
if (!isNumericXlsxCell(cell) || !isDateSerialXlsxNumberFormat(format?.numberFormat)) {
return text;
}
const serial = Number(text);
if (!Number.isFinite(serial) || serial < 0) {
return text;
}
return normalizedXlsxNumberText(serial + 1462);
}
function isNumericXlsxCell(cell: XmlRecord) {
const type = typeof cell.t === "string" ? cell.t.trim() : "";
return type === "" || type === "n";
}
function isDateSerialXlsxNumberFormat(value?: string) {
const pattern = normalizedNumberFormat(value)
.replace(/"[^"]*"/g, "")
.replace(/\\./g, "")
.replace(/\[[^\]]+]/g, "")
.toLowerCase();
return /[dy]/.test(pattern) || (pattern.includes("m") && !/[hs]/.test(pattern));
}
function normalizedXlsxNumberText(value: number) {
return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(10)));
}
function xlsxNumberFormats(styleSheet: XmlRecord) {
const formats = { ...builtinNumberFormats };
toArray(childRecord(styleSheet, "numFmts").numFmt).forEach((numFmt) => {
@@ -1833,6 +1973,58 @@ function normalizedSheetZoomScale(value: unknown) {
return zoomScale >= 10 && zoomScale <= 400 && zoomScale !== 100 ? zoomScale : 0;
}
function normalizedSheetPageSetup(pageSetup?: SheetPageSetup): SheetPageSetup {
const size = isSheetPageSizeId(pageSetup?.size) ? pageSetup.size : defaultSheetPageSetup.size;
const orientation = normalizedSheetPageOrientation(pageSetup?.orientation) ?? defaultSheetPageSetup.orientation;
const marginPreset = isSheetPageMarginPreset(pageSetup?.marginPreset) ? pageSetup.marginPreset : defaultSheetPageSetup.marginPreset;
return { size, orientation, marginPreset };
}
function normalizedSheetPageOrientation(value: unknown): SheetPageOrientation | undefined {
return value === "portrait" || value === "landscape" ? value : undefined;
}
function isSheetPageSizeId(value: unknown): value is SheetPageSizeId {
return value === "a4" || value === "letter";
}
function isSheetPageMarginPreset(value: unknown): value is SheetPageMarginPreset {
return value === "normal" || value === "narrow" || value === "wide";
}
function sheetPageSizeFromPaperId(value: unknown): SheetPageSizeId | undefined {
const paperSize = positiveIntegerAttribute(value);
return (Object.keys(xlsxPageSizePaperIds) as SheetPageSizeId[]).find((sizeId) => xlsxPageSizePaperIds[sizeId] === paperSize);
}
function sheetPageMarginPresetFromRecord(record: XmlRecord): SheetPageMarginPreset | undefined {
const left = positiveNumberAttribute(record.left);
const right = positiveNumberAttribute(record.right);
const top = positiveNumberAttribute(record.top);
const bottom = positiveNumberAttribute(record.bottom);
const header = positiveNumberAttribute(record.header);
const footer = positiveNumberAttribute(record.footer);
if (!left || !right || !top || !bottom || !header || !footer) {
return undefined;
}
return (Object.keys(xlsxPageMargins) as SheetPageMarginPreset[]).find((preset) => {
const margins = xlsxPageMargins[preset];
return (
isCloseDimension(left, margins.left) &&
isCloseDimension(right, margins.right) &&
isCloseDimension(top, margins.top) &&
isCloseDimension(bottom, margins.bottom) &&
isCloseDimension(header, margins.header) &&
isCloseDimension(footer, margins.footer)
);
});
}
function isCloseDimension(actual: number, expected: number) {
return Math.abs(actual - expected) <= 0.01;
}
function buildRowAttributes(height?: number, hidden?: boolean) {
return `${height ? ` ht="${formatSheetDimension(height)}" customHeight="1"` : ""}${hidden ? ' hidden="1"' : ""}`;
}
+120
View File
@@ -254,6 +254,82 @@ describe("outlookMail helpers", () => {
]);
});
it("embeds inline CID images in imported EML HTML body", async () => {
const imageBase64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=";
const eml = [
"From: sender@example.com",
"To: reader@example.com",
"Subject: Inline logo",
"Date: Mon, 01 Jun 2026 10:00:00 +0300",
'Content-Type: multipart/related; boundary="related"',
"",
"--related",
"Content-Type: text/html; charset=utf-8",
"",
'<p>Logo</p><img alt="logo" src="cid:Logo%40Example.com">',
"--related",
'Content-Type: image/png; name="logo.png"',
'Content-Disposition: inline; filename="logo.png"',
"Content-ID: <logo@example.com>",
"Content-Transfer-Encoding: base64",
"",
imageBase64,
"--related--"
].join("\r\n");
const imported = await importEmlFile(new File([eml], "inline.eml", { type: "message/rfc822" }));
expect(imported.body).toBe("Logo");
expect(imported.bodyHtml).toContain(`src="data:image/png;base64,${imageBase64}"`);
expect(imported.bodyHtml).not.toContain("cid:");
expect(imported.attachments).toEqual([
{
id: "attachment-logo-png-1",
fileName: "logo.png",
contentType: "image/png",
size: 68,
contentBase64: imageBase64,
disposition: "inline",
contentId: "logo@example.com"
}
]);
});
it("keeps non-image CID references in imported EML HTML body", async () => {
const eml = [
"From: sender@example.com",
"To: reader@example.com",
"Subject: Inline document",
"Date: Mon, 01 Jun 2026 10:00:00 +0300",
'Content-Type: multipart/related; boundary="related"',
"",
"--related",
"Content-Type: text/html; charset=utf-8",
"",
'<p>Document</p><img src="cid:document">',
"--related",
'Content-Type: text/plain; name="document.txt"',
'Content-Disposition: inline; filename="document.txt"',
"Content-ID: <document>",
"Content-Transfer-Encoding: base64",
"",
"SGVsbG8=",
"--related--"
].join("\r\n");
const imported = await importEmlFile(new File([eml], "inline.eml", { type: "message/rfc822" }));
expect(imported.bodyHtml).toContain('src="cid:document"');
expect(imported.bodyHtml).not.toContain("data:text/plain");
expect(imported.attachments?.[0]).toMatchObject({
fileName: "document.txt",
contentType: "text/plain",
contentBase64: "SGVsbG8=",
disposition: "inline",
contentId: "document"
});
});
it("преобразует данные Outlook MSG в письмо QOutlook с вложениями", async () => {
const message = msgDataToMailMessage(
{
@@ -381,6 +457,50 @@ describe("outlookMail helpers", () => {
expect(extractMessageHtmlBody(parsed.headers, parsed.body)).toBe("<p><strong>HTML text</strong></p>");
});
it("exports inline data images as CID references in related EML", () => {
const imageBase64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=";
const message: MailMessage = {
id: "inline-image",
folder: "sent",
from: "sender@example.com",
to: "reader@example.com",
subject: "Inline image",
body: "Logo",
bodyHtml: `<p>Logo</p><img alt="logo" src="data:image/png;base64,${imageBase64}">`,
time: "Mon, 01 Jan 2024 10:00:00 +0000",
read: true,
flagged: false,
attachments: [
{
id: "logo",
fileName: "logo.png",
contentType: "image/png",
size: 68,
contentBase64: imageBase64,
disposition: "inline",
contentId: "logo@example.com"
}
]
};
const eml = buildEmlSource(message);
const parsed = parseEmlSource(eml);
const attachments = extractMessageAttachments(parsed.headers, parsed.body);
expect(eml).toContain("Content-Type: multipart/related");
expect(eml).toContain("Content-ID: <logo@example.com>");
expect(eml).toContain('Content-Disposition: inline; filename="logo.png"');
expect(extractMessageHtmlBody(parsed.headers, parsed.body)).toBe('<p>Logo</p><img alt="logo" src="cid:logo@example.com">');
expect(extractMessageHtmlBody(parsed.headers, parsed.body)).not.toContain("data:image/png;base64");
expect(attachments[0]).toMatchObject({
fileName: "logo.png",
contentType: "image/png",
contentBase64: imageBase64,
disposition: "inline",
contentId: "logo@example.com"
});
});
it("собирает multipart/mixed EML с вложениями и RFC 2231 filename", () => {
const message: MailMessage = {
id: "1",
+166 -5
View File
@@ -81,7 +81,8 @@ export async function importEmlFile(file: File): Promise<ImportedMailMessage> {
const raw = await file.text();
const parsed = parseEmlSource(raw);
const bodyHtml = extractMessageHtmlBody(parsed.headers, parsed.body);
const attachments = extractMessageAttachments(parsed.headers, parsed.body);
const bodyHtml = htmlWithEmbeddedCidAttachments(extractMessageHtmlBody(parsed.headers, parsed.body), attachments);
return {
id: `eml-${Date.now()}`,
@@ -99,7 +100,7 @@ export async function importEmlFile(file: File): Promise<ImportedMailMessage> {
time: parsed.headers.date || new Date().toLocaleString("ru-RU"),
read: false,
flagged: false,
attachments: extractMessageAttachments(parsed.headers, parsed.body)
attachments
};
}
@@ -262,6 +263,81 @@ export function extractMessageAttachments(headers: MailHeaders, body: string): M
return collectAttachmentParts(headers, body).map((part, index) => attachmentFromPart(part, index));
}
export function htmlWithEmbeddedCidAttachments(html: string, attachments: MailAttachment[] = []): string {
if (!html.trim() || attachments.length === 0) {
return html;
}
const inlineImagesByContentId = new Map<string, { contentBase64: string; contentType: string }>();
attachments.forEach((attachment) => {
const contentId = normalizedContentId(attachment.contentId);
const contentType = sanitizeMimeType(attachment.contentType);
const contentBase64 = attachment.contentBase64.trim();
if (!contentId || attachment.disposition !== "inline" || !contentBase64 || !isEmbeddableCidImageContentType(contentType)) {
return;
}
if (!inlineImagesByContentId.has(contentId)) {
inlineImagesByContentId.set(contentId, { contentBase64, contentType });
}
});
if (inlineImagesByContentId.size === 0) {
return html;
}
return html.replace(/\bsrc\s*=\s*(?:(["'])\s*cid:([^"'>\s]+)\1|cid:([^\s"'<>]+))/gi, (match, quote: string | undefined, quotedCid: string | undefined, unquotedCid: string | undefined) => {
const contentId = normalizedContentId(decodeUriComponentSafe(quotedCid ?? unquotedCid ?? ""));
const attachment = inlineImagesByContentId.get(contentId);
if (!attachment) {
return match;
}
const dataUri = `data:${attachment.contentType};base64,${attachment.contentBase64}`;
return quote ? `src=${quote}${dataUri}${quote}` : `src="${dataUri}"`;
});
}
function htmlWithCidReferencesForInlineAttachments(html: string, attachments: MailAttachment[] = []): string {
if (!html.trim() || attachments.length === 0) {
return html;
}
const contentIdsByDataUri = new Map<string, string>();
attachments.forEach((attachment) => {
const contentId = cleanContentId(attachment.contentId);
const contentType = sanitizeMimeType(attachment.contentType);
const contentBase64 = attachment.contentBase64.trim();
if (!contentId || attachment.disposition !== "inline" || !contentBase64 || !isEmbeddableCidImageContentType(contentType)) {
return;
}
const key = cidImageDataUriKey(contentType, contentBase64);
if (!contentIdsByDataUri.has(key)) {
contentIdsByDataUri.set(key, contentId);
}
});
if (contentIdsByDataUri.size === 0) {
return html;
}
return html.replace(
/\bsrc\s*=\s*(?:(["'])\s*data:(image\/(?:png|jpe?g|gif|bmp|webp));base64,([^"'>\s]+)\1|data:(image\/(?:png|jpe?g|gif|bmp|webp));base64,([^\s"'<>]+))/gi,
(match, quote: string | undefined, quotedType: string | undefined, quotedBase64: string | undefined, unquotedType: string | undefined, unquotedBase64: string | undefined) => {
const contentType = quotedType ?? unquotedType ?? "";
const contentBase64 = (quotedBase64 ?? unquotedBase64 ?? "").trim();
const contentId = contentIdsByDataUri.get(cidImageDataUriKey(contentType, contentBase64));
if (!contentId) {
return match;
}
const cidReference = escapeHtmlAttribute(`cid:${contentId}`);
return quote ? `src=${quote}${cidReference}${quote}` : `src="${cidReference}"`;
}
);
}
export async function createMailAttachmentFromFile(file: File): Promise<MailAttachment> {
return {
id: createAttachmentId(file.name),
@@ -463,6 +539,28 @@ export function buildEmlSource(message: MailMessage): string {
if (attachments.length > 0) {
const boundary = createMultipartBoundary(message);
const alternativeBoundary = createAlternativeBoundary(message);
const inlineRelatedAttachments = hasHtmlBody ? attachments.filter(isInlineRelatedAttachment) : [];
const mixedAttachments = inlineRelatedAttachments.length > 0 ? attachments.filter((attachment) => !isInlineRelatedAttachment(attachment)) : attachments;
if (hasHtmlBody && inlineRelatedAttachments.length > 0 && mixedAttachments.length === 0) {
const relatedBoundary = createRelatedBoundary(message);
const lines = [
`From: ${sanitizeHeaderValue(message.from)}`,
`To: ${sanitizeHeaderValue(message.to)}`,
...optionalAddressHeaders(message),
`Subject: ${encodeHeaderValue(message.subject || "Без темы")}`,
`Date: ${sanitizeHeaderValue(message.time || new Date().toUTCString())}`,
...optionalThreadHeaders(message),
...optionalPriorityHeaders(message),
"MIME-Version: 1.0",
`Content-Type: multipart/related; boundary="${relatedBoundary}"`,
"",
...buildRelatedBodyLines(relatedBoundary, alternativeBoundary, message, inlineRelatedAttachments),
""
];
return lines.join("\r\n");
}
const lines = [
`From: ${sanitizeHeaderValue(message.from)}`,
`To: ${sanitizeHeaderValue(message.to)}`,
@@ -475,8 +573,12 @@ export function buildEmlSource(message: MailMessage): string {
`Content-Type: multipart/mixed; boundary="${boundary}"`,
"",
`--${boundary}`,
...(hasHtmlBody ? buildAlternativePartLines(alternativeBoundary, message) : buildPlainTextPartLines(message)),
...attachments.flatMap((attachment) => buildAttachmentPartLines(boundary, attachment)),
...(inlineRelatedAttachments.length > 0
? buildRelatedPartLines(createRelatedBoundary(message), alternativeBoundary, message, inlineRelatedAttachments)
: hasHtmlBody
? buildAlternativePartLines(alternativeBoundary, message)
: buildPlainTextPartLines(message)),
...mixedAttachments.flatMap((attachment) => buildAttachmentPartLines(boundary, attachment)),
`--${boundary}--`,
""
];
@@ -531,7 +633,12 @@ function buildPlainTextPartLines(message: MailMessage): string[] {
}
function buildHtmlPartLines(message: MailMessage): string[] {
return ["Content-Type: text/html; charset=utf-8", "Content-Transfer-Encoding: 8bit", "", normalizeMailNewlines(message.bodyHtml || "")];
return [
"Content-Type: text/html; charset=utf-8",
"Content-Transfer-Encoding: 8bit",
"",
normalizeMailNewlines(htmlWithCidReferencesForInlineAttachments(message.bodyHtml || "", message.attachments ?? []))
];
}
function buildAlternativePartLines(boundary: string, message: MailMessage): string[] {
@@ -546,6 +653,18 @@ function buildAlternativePartLines(boundary: string, message: MailMessage): stri
];
}
function buildRelatedPartLines(boundary: string, alternativeBoundary: string, message: MailMessage, inlineAttachments: MailAttachment[]): string[] {
return [`Content-Type: multipart/related; boundary="${boundary}"`, "", ...buildRelatedBodyLines(boundary, alternativeBoundary, message, inlineAttachments)];
}
function buildRelatedBodyLines(boundary: string, alternativeBoundary: string, message: MailMessage, inlineAttachments: MailAttachment[]): string[] {
return [`--${boundary}`, ...buildAlternativePartLines(alternativeBoundary, message), ...inlineAttachments.flatMap((attachment) => buildAttachmentPartLines(boundary, attachment)), `--${boundary}--`];
}
function isInlineRelatedAttachment(attachment: MailAttachment): boolean {
return attachment.disposition === "inline" && Boolean(cleanContentId(attachment.contentId));
}
function optionalAddressHeaders(message: MailMessage): string[] {
return [
...(message.cc?.trim() ? [`Cc: ${sanitizeHeaderValue(message.cc)}`] : []),
@@ -748,6 +867,10 @@ function createAlternativeBoundary(message: MailMessage): string {
return `${createMultipartBoundary(message)}-alternative`;
}
function createRelatedBoundary(message: MailMessage): string {
return `${createMultipartBoundary(message)}-related`;
}
function buildAttachmentPartLines(boundary: string, attachment: MailAttachment): string[] {
const safeContentType = sanitizeMimeType(attachment.contentType);
const disposition = attachment.disposition === "inline" ? "inline" : "attachment";
@@ -783,6 +906,44 @@ function sanitizeMimeType(value = "application/octet-stream"): string {
return /^[a-z0-9!#$&^_.+-]+\/[a-z0-9!#$&^_.+-]+$/i.test(mediaType) ? mediaType : "application/octet-stream";
}
function isEmbeddableCidImageContentType(value: string): boolean {
return ["image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp"].includes(normalizedCidImageContentType(value));
}
function normalizedCidImageContentType(value: string): string {
const contentType = value.toLowerCase();
return contentType === "image/jpg" ? "image/jpeg" : contentType;
}
function cidImageDataUriKey(contentType: string, contentBase64: string): string {
return `${normalizedCidImageContentType(contentType)}:${contentBase64.trim()}`;
}
function cleanContentId(value = ""): string {
return value.trim().replace(/^<|>$/g, "");
}
function normalizedContentId(value = ""): string {
return cleanContentId(value).toLowerCase();
}
function decodeUriComponentSafe(value: string): string {
try {
return decodeURIComponent(value);
} catch {
return value;
}
}
function escapeHtmlAttribute(value: string): string {
return value
.replace(/&/g, "&amp;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;");
}
function wrapBase64(value: string): string {
return (value.match(/.{1,76}/g) ?? [""]).join("\r\n");
}
+103 -1
View File
@@ -7,6 +7,7 @@ import {
listSlidePaths,
normalizeWhitespace,
presentationSlidePaths,
presentationSlideSize,
relationshipTargetByType,
resolvePptTarget
} from "./powerPointOffice";
@@ -81,6 +82,30 @@ describe("powerPointOffice helpers", () => {
]);
});
it("читает размер слайда из presentation.xml", () => {
expect(
presentationSlideSize({
presentation: {
sldSz: { cx: "12192000", cy: "6858000" }
}
})
).toBe("wide");
expect(
presentationSlideSize({
presentation: {
sldSz: { "@_cx": "9144000", "@_cy": "6858000" }
}
})
).toBe("standard");
expect(
presentationSlideSize({
presentation: {
sldSz: { cx: "9144000", cy: "5143500" }
}
})
).toBeUndefined();
});
it("разрешает относительные targets заметок от части слайда", () => {
expect(resolvePptTarget("ppt/slides", "../notesSlides/notesSlide7.xml")).toBe("ppt/notesSlides/notesSlide7.xml");
expect(
@@ -104,7 +129,7 @@ describe("powerPointOffice helpers", () => {
const zip = new JSZip();
zip.file(
"ppt/presentation.xml",
`<p:presentation xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:sldIdLst><p:sldId id="256" r:id="rId2"/><p:sldId id="255" r:id="rId1"/></p:sldIdLst></p:presentation>`
`<p:presentation xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:sldSz cx="9144000" cy="6858000"/><p:sldIdLst><p:sldId id="256" r:id="rId2"/><p:sldId id="255" r:id="rId1"/></p:sldIdLst></p:presentation>`
);
zip.file(
"ppt/_rels/presentation.xml.rels",
@@ -125,6 +150,7 @@ describe("powerPointOffice helpers", () => {
const imported = await importPptxFile(new File([blob], "Дорожная карта.pptx", { type: blob.type }));
expect(imported.slides.map((slide) => slide.title)).toEqual(["Первый по порядку", "Первый файл"]);
expect(imported.slideSize).toBe("standard");
expect(imported.slides[0].subtitle).toBe("Содержимое первого слайда");
expect(imported.slides[0].notes).toBe("Заметка докладчика");
});
@@ -662,6 +688,56 @@ describe("powerPointOffice helpers", () => {
});
});
it("импортирует и экспортирует выравнивание текста слайда PPTX", async () => {
const zip = new JSZip();
zip.file(
"ppt/presentation.xml",
`<p:presentation xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:sldIdLst><p:sldId id="256" r:id="rId1"/></p:sldIdLst></p:presentation>`
);
zip.file(
"ppt/_rels/presentation.xml.rels",
`<Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/slide" Target="slides/slide1.xml"/></Relationships>`
);
zip.file("ppt/slides/slide1.xml", slideXmlWithTextAlignment("Заголовок", "Подзаголовок"));
const importedBlob = await zip.generateAsync({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.presentationml.presentation"
});
const imported = await importPptxFile(new File([importedBlob], "Выравнивание.pptx", { type: importedBlob.type }));
expect(imported.slides[0]).toMatchObject({
titleAlign: "center",
subtitleAlign: "right"
});
const exportedBlob = await exportPptxBlob({
title: "Выравнивание.pptx",
slides: [
{
id: "slide-1",
title: "Заголовок",
subtitle: "Подзаголовок",
notes: "",
theme: "classic",
titleAlign: "center",
subtitleAlign: "right"
}
]
});
const exportedZip = await JSZip.loadAsync(await exportedBlob.arrayBuffer());
const exportedSlideXml = (await exportedZip.file("ppt/slides/slide1.xml")?.async("string")) ?? "";
expect(exportedSlideXml).toContain('algn="ctr"');
expect(exportedSlideXml).toContain('algn="r"');
const reimported = await importPptxFile(new File([exportedBlob], "Выравнивание.pptx", { type: exportedBlob.type }));
expect(reimported.slides[0]).toMatchObject({
titleAlign: "center",
subtitleAlign: "right"
});
});
it("импортирует внешние ссылки текста PPTX через hlinkClick relationships", async () => {
const zip = new JSZip();
zip.file(
@@ -722,6 +798,28 @@ describe("powerPointOffice helpers", () => {
});
});
it("экспортирует и переимпортирует стандартный размер слайда PPTX 4:3", async () => {
const blob = await exportPptxBlob({
title: "Standard.pptx",
slideSize: "standard",
slides: [
{
id: "slide-1",
title: "Standard",
subtitle: "4:3",
notes: "",
theme: "classic"
}
]
});
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const presentationXml = (await zip.file("ppt/presentation.xml")?.async("string")) ?? "";
const reimported = await importPptxFile(new File([blob], "Standard.pptx", { type: blob.type }));
expect(presentationXml).toContain('<p:sldSz cx="9144000" cy="6858000"/>');
expect(reimported.slideSize).toBe("standard");
});
it("нормализует пробелы в импортированном тексте", () => {
expect(normalizeWhitespace(" Строка\tс \n пробелами ")).toBe("Строка с пробелами");
});
@@ -753,6 +851,10 @@ function slideXmlWithTextRunStyles(title: string, subtitle: string) {
return `<p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"><p:cSld><p:spTree><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng" strike="sngStrike"/><a:t>${title}</a:t></a:r></a:p></p:txBody></p:sp><p:sp><p:txBody><a:p><a:r><a:rPr b="1" i="1" u="sng" strike="sngStrike"/><a:t>${subtitle}</a:t></a:r></a:p></p:txBody></p:sp></p:spTree></p:cSld></p:sld>`;
}
function slideXmlWithTextAlignment(title: string, subtitle: string) {
return `<p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main"><p:cSld><p:spTree><p:sp><p:txBody><a:p><a:pPr algn="ctr"/><a:r><a:t>${title}</a:t></a:r></a:p></p:txBody></p:sp><p:sp><p:txBody><a:p><a:pPr algn="r"/><a:r><a:t>${subtitle}</a:t></a:r></a:p></p:txBody></p:sp></p:spTree></p:cSld></p:sld>`;
}
function slideXmlWithTextHyperlinks(title: string, subtitle: string) {
return `<p:sld xmlns:p="http://schemas.openxmlformats.org/presentationml/2006/main" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><p:cSld><p:spTree><p:sp><p:txBody><a:p><a:r><a:rPr><a:hlinkClick r:id="rIdTitleLink"/></a:rPr><a:t>${title}</a:t></a:r></a:p></p:txBody></p:sp><p:sp><p:txBody><a:p><a:r><a:rPr><a:hlinkClick r:id="rIdSubtitleLink"/></a:rPr><a:t>${subtitle}</a:t></a:r></a:p></p:txBody></p:sp></p:spTree></p:cSld></p:sld>`;
}
+70 -6
View File
@@ -1,13 +1,15 @@
import type { Slide, SlideImage, SlideListStyle } from "../types";
import type { Slide, SlideImage, SlideListStyle, SlideSizeId, SlideTextAlign } from "../types";
import { officeTitleFromFileName, PPTX_MIME_TYPE, readOfficeFileAsArrayBuffer } from "./fileHelpers";
export interface ImportedPowerPointDeck {
title: string;
slideSize?: SlideSizeId;
slides: Slide[];
}
export interface ExportablePowerPointDeck {
title: string;
slideSize?: SlideSizeId;
slides: Slide[];
}
@@ -19,6 +21,7 @@ interface SlideTextBlock {
italics?: boolean;
underline?: boolean;
strike?: boolean;
align?: SlideTextAlign;
color?: string;
fontSize?: number;
fontFamily?: string;
@@ -46,6 +49,10 @@ const imageRelationshipType = "http://schemas.openxmlformats.org/officeDocument/
const hyperlinkRelationshipType = "http://schemas.openxmlformats.org/officeDocument/2006/relationships/hyperlink";
const emuPerInch = 914400;
const slideTransitions = ["fade", "push", "wipe"] as const;
const slideSizeLayouts: Record<SlideSizeId, { width: number; height: number; cx: number; cy: number; pptxLayout: string }> = {
wide: { width: 13.333, height: 7.5, cx: 12192000, cy: 6858000, pptxLayout: "LAYOUT_WIDE" },
standard: { width: 10, height: 7.5, cx: 9144000, cy: 6858000, pptxLayout: "LAYOUT_4x3" }
};
const themeColors: Record<Slide["theme"], { background: string; title: string; subtitle: string }> = {
classic: { background: "FFFFFF", title: "202124", subtitle: "3C4043" },
ocean: { background: "EAF6FF", title: "075985", subtitle: "0F766E" },
@@ -64,6 +71,7 @@ export async function importPptxFile(file: File): Promise<ImportedPowerPointDeck
const presentationXml = await readOptionalParsedXml(zip, parser, "ppt/presentation.xml");
const presentationRelationshipsXml = await readOptionalParsedXml(zip, parser, "ppt/_rels/presentation.xml.rels");
const slidePaths = listSlidePaths(zip, presentationXml, presentationRelationshipsXml);
const slideSize = presentationSlideSize(presentationXml);
if (slidePaths.length === 0) {
throw new Error("В файле PowerPoint не найдены слайды.");
@@ -107,6 +115,7 @@ export async function importPptxFile(file: File): Promise<ImportedPowerPointDeck
...(slideTextBlocks[0]?.italics ? { titleItalics: true } : {}),
...(slideTextBlocks[0]?.underline ? { titleUnderline: true } : {}),
...(slideTextBlocks[0]?.strike ? { titleStrike: true } : {}),
...(slideTextBlocks[0]?.align ? { titleAlign: slideTextBlocks[0].align } : {}),
...(slideTextBlocks[0]?.color ? { titleColor: slideTextBlocks[0].color } : {}),
...(slideTextBlocks[0]?.fontSize ? { titleFontSize: slideTextBlocks[0].fontSize } : {}),
...(slideTextBlocks[0]?.fontFamily ? { titleFontFamily: slideTextBlocks[0].fontFamily } : {}),
@@ -114,6 +123,7 @@ export async function importPptxFile(file: File): Promise<ImportedPowerPointDeck
...(slideTextBlocks[1]?.italics ? { subtitleItalics: true } : {}),
...(slideTextBlocks[1]?.underline ? { subtitleUnderline: true } : {}),
...(slideTextBlocks[1]?.strike ? { subtitleStrike: true } : {}),
...(slideTextBlocks[1]?.align ? { subtitleAlign: slideTextBlocks[1].align } : {}),
...(slideTextBlocks[1]?.color ? { subtitleColor: slideTextBlocks[1].color } : {}),
...(slideTextBlocks[1]?.fontSize ? { subtitleFontSize: slideTextBlocks[1].fontSize } : {}),
...(slideTextBlocks[1]?.fontFamily ? { subtitleFontFamily: slideTextBlocks[1].fontFamily } : {}),
@@ -123,7 +133,7 @@ export async function importPptxFile(file: File): Promise<ImportedPowerPointDeck
})
);
return { title, slides };
return { title, ...(slideSize ? { slideSize } : {}), slides };
}
export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Blob> {
@@ -144,8 +154,10 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
};
write: (options: { outputType: "blob" | "arraybuffer" }) => Promise<Blob | ArrayBuffer>;
};
const slideSize = normalizedSlideSizeId(deck.slideSize);
const slideLayout = slideSizeLayouts[slideSize];
pptx.layout = "LAYOUT_WIDE";
pptx.layout = slideLayout.pptxLayout;
pptx.author = "QOffice";
pptx.company = "QOffice";
pptx.subject = "Экспорт QPowerPoint";
@@ -163,10 +175,12 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
const titleItalics = Boolean(sourceSlide.titleItalics);
const titleUnderline = Boolean(sourceSlide.titleUnderline);
const titleStrike = Boolean(sourceSlide.titleStrike);
const titleAlign = normalizedSlideTextAlign(sourceSlide.titleAlign);
const subtitleBold = Boolean(sourceSlide.subtitleBold);
const subtitleItalics = Boolean(sourceSlide.subtitleItalics);
const subtitleUnderline = Boolean(sourceSlide.subtitleUnderline);
const subtitleStrike = Boolean(sourceSlide.subtitleStrike);
const subtitleAlign = normalizedSlideTextAlign(sourceSlide.subtitleAlign);
const titleHyperlink = normalizedExternalHyperlinkTarget(sourceSlide.titleHyperlink);
const subtitleHyperlink = normalizedExternalHyperlinkTarget(sourceSlide.subtitleHyperlink);
const slide = pptx.addSlide();
@@ -191,10 +205,11 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
slide.addText(sourceSlide.title || "Без заголовка", {
x: 0.7,
y: 0.65,
w: 11.9,
w: Math.max(1, slideLayout.width - 1.4),
h: 0.75,
fontFace: titleFontFamily,
fontSize: titleFontSize,
...(titleAlign ? { align: titleAlign } : {}),
bold: titleBold,
italic: titleItalics,
...(titleUnderline ? { underline: { style: "sng" } } : {}),
@@ -207,10 +222,11 @@ export async function exportPptxBlob(deck: ExportablePowerPointDeck): Promise<Bl
slide.addText(sourceSlide.subtitle || "", {
x: 0.75,
y: 1.65,
w: 11.5,
h: 4.35,
w: Math.max(1, slideLayout.width - 1.5),
h: Math.max(1, slideLayout.height - 3.15),
fontFace: subtitleFontFamily,
fontSize: subtitleFontSize,
...(subtitleAlign ? { align: subtitleAlign } : {}),
bold: subtitleBold,
italic: subtitleItalics,
...(subtitleUnderline ? { underline: { style: "sng" } } : {}),
@@ -256,6 +272,7 @@ function extractSlideTextBlocks(slideXml: unknown, hyperlinkTargets: Record<stri
const italics = runTextItalics(runProperties);
const underline = runTextUnderline(runProperties);
const strike = runTextStrike(runProperties);
const align = textBodyAlign(textBody);
const color = runTextColor(runProperties);
const fontSize = runTextFontSize(runProperties);
const fontFamily = runTextFontFamily(runProperties);
@@ -267,6 +284,7 @@ function extractSlideTextBlocks(slideXml: unknown, hyperlinkTargets: Record<stri
italics,
underline,
strike,
...(align ? { align } : {}),
...(color ? { color } : {}),
...(fontSize ? { fontSize } : {}),
...(fontFamily ? { fontFamily } : {})
@@ -318,6 +336,15 @@ function textBodyListStyle(textBody: Record<string, unknown>): SlideListStyle |
return paragraphStyles.includes("number") ? "number" : paragraphStyles[0];
}
function textBodyAlign(textBody: Record<string, unknown>): SlideTextAlign | undefined {
return toArray(textBody.p).map(paragraphAlign).find((align): align is SlideTextAlign => Boolean(align));
}
function paragraphAlign(paragraph: unknown): SlideTextAlign | undefined {
const paragraphProperties = childRecord(asRecord(paragraph), "pPr");
return slideTextAlignFromXml(stringValue(paragraphProperties.algn ?? paragraphProperties["@_algn"]));
}
function paragraphListStyle(paragraph: unknown): SlideListStyle | undefined {
const paragraphProperties = childRecord(asRecord(paragraph), "pPr");
if (Object.keys(childRecord(paragraphProperties, "buAutoNum")).length > 0) {
@@ -393,6 +420,19 @@ export function presentationSlidePaths(presentationXml: unknown, presentationRel
return slideIds.map((id) => relationshipTargets[id]).filter((target): target is string => Boolean(target));
}
export function presentationSlideSize(presentationXml: unknown): SlideSizeId | undefined {
const slideSize = childRecord(childRecord(presentationXml, "presentation"), "sldSz");
const cx = numberAttribute(slideSize, "cx");
const cy = numberAttribute(slideSize, "cy");
if (!cx || !cy) {
return undefined;
}
return Object.entries(slideSizeLayouts).find(([, layout]) => Math.abs(cx - layout.cx) <= 5000 && Math.abs(cy - layout.cy) <= 5000)?.[0] as
| SlideSizeId
| undefined;
}
export function relationshipTargetsById(relationshipsXml: unknown, type?: string, sourcePartPath = "ppt/presentation.xml"): Record<string, string> {
const relationships = childRecord(relationshipsXml, "Relationships");
const targets: Record<string, string> = {};
@@ -449,6 +489,10 @@ export function normalizeWhitespace(value: string): string {
return value.replace(/\s+/g, " ").trim();
}
function normalizedSlideSizeId(value?: SlideSizeId): SlideSizeId {
return value === "standard" ? "standard" : "wide";
}
function normalizeTextWithLineBreaks(value: string): string {
return value
.split("\n")
@@ -746,6 +790,26 @@ function normalizeFontFamily(value?: string) {
return normalized && normalized.toLowerCase() !== "arial" ? normalized : "";
}
function normalizedSlideTextAlign(value?: string) {
return value === "left" || value === "center" || value === "right" ? value : undefined;
}
function slideTextAlignFromXml(value: string): SlideTextAlign | undefined {
switch (value.trim().toLowerCase()) {
case "l":
case "left":
return "left";
case "ctr":
case "center":
return "center";
case "r":
case "right":
return "right";
default:
return undefined;
}
}
function numberAttribute(record: Record<string, unknown>, name: string) {
const value = Number.parseFloat(stringValue(record[name] ?? record[`@_${name}`]));
return Number.isFinite(value) ? value : undefined;
+135
View File
@@ -279,6 +279,17 @@ describe("wordOffice helpers", () => {
expect(documentXml).toContain('<w:jc w:val="right"/>');
});
it("writes QWord page setup to exported DOCX section properties", async () => {
const blob = await exportDocxBlob("Макет.docx", "<p>Landscape letter</p>", {
pageSetup: { size: "letter", orientation: "landscape", marginPreset: "narrow" }
});
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = await zip.file("word/document.xml")?.async("string");
expect(documentXml).toMatch(/<w:pgSz\b[^>]*w:w="15840"[^>]*w:h="12240"[^>]*w:orient="landscape"[^>]*\/>/);
expect(documentXml).toMatch(/<w:pgMar\b[^>]*w:top="720"[^>]*w:right="720"[^>]*w:bottom="720"[^>]*w:left="720"[^>]*\/>/);
});
it("записывает внешние гиперссылки в DOCX relationships", async () => {
const blob = await exportDocxBlob(
"Ссылки.docx",
@@ -349,6 +360,82 @@ describe("wordOffice helpers", () => {
]);
});
it("preserves HTML table colspan as DOCX gridSpan", async () => {
const html = '<table><tr><td colspan="2">Merged</td><td>Tail</td></tr></table>';
const blocks = htmlToWordBlocks(html);
const blob = await exportDocxBlob("Table colspan.docx", html);
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = (await zip.file("word/document.xml")?.async("string")) ?? "";
expect(blocks).toEqual([
{
type: "table",
rows: [[{ text: "Merged", runs: [{ text: "Merged" }], colSpan: 2 }, "Tail"]]
}
]);
expect(documentXml).toMatch(/<w:gridSpan\b[^>]*w:val="2"[^>]*\/>/);
});
it("сохраняет пустые ячейки и строки таблицы для DOCX", async () => {
const html = `
<table>
<tr><td><br></td><td></td><td>Итог</td></tr>
<tr><td></td><td>&nbsp;</td><td><br></td></tr>
</table>
`;
const blocks = htmlToWordBlocks(html);
const blob = await exportDocxBlob("Пустая таблица.docx", html);
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = (await zip.file("word/document.xml")?.async("string")) ?? "";
expect(blocks).toEqual([
{
type: "table",
rows: [
["", "", "Итог"],
["", "", ""]
]
}
]);
expect(documentXml).toContain("<w:tbl>");
expect(documentXml.match(/<w:tr>/g)).toHaveLength(2);
expect(documentXml.match(/<w:tc>/g)).toHaveLength(6);
expect(documentXml).toContain("Итог");
});
it("сохраняет inline-форматирование ячеек таблицы для DOCX", async () => {
const html = `
<table>
<tr>
<td><strong>Итог</strong> <em>готов</em></td>
<td><a href="https://example.com/report">Отчет</a></td>
</tr>
</table>
`;
const blocks = htmlToWordBlocks(html);
const blob = await exportDocxBlob("Формат таблицы.docx", html);
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = (await zip.file("word/document.xml")?.async("string")) ?? "";
const relationshipsXml = (await zip.file("word/_rels/document.xml.rels")?.async("string")) ?? "";
expect(blocks).toEqual([
{
type: "table",
rows: [
[
{ text: "Итог готов", runs: [{ text: "Итог", bold: true }, { text: " " }, { text: "готов", italics: true }] },
{ text: "Отчет", runs: [{ text: "Отчет", href: "https://example.com/report" }] }
]
]
}
]);
expect(documentXml).toContain("<w:tbl>");
expect(documentXml).toContain("<w:b/>");
expect(documentXml).toContain("<w:i/>");
expect(documentXml).toContain("<w:hyperlink");
expect(relationshipsXml).toContain('Target="https://example.com/report"');
});
it("сохраняет размер шрифта из HTML inline-стилей для DOCX", () => {
const blocks = htmlToWordBlocks(`
<p>Normal <span style="font-size: 18pt;">Large</span> <span style="font-size: 24px;">Pixel size</span></p>
@@ -465,6 +552,30 @@ describe("wordOffice helpers", () => {
]);
});
it("сохраняет HTML-интервалы абзацев и заголовков для DOCX", () => {
const blocks = htmlToWordBlocks(`
<h2 style="margin-top: 6pt; margin-bottom: 10pt;">Title spacing</h2>
<p style="margin-top: 12pt; margin-bottom: 18pt;">Paragraph spacing</p>
`);
expect(blocks).toEqual([
{ type: "heading", level: 2, text: "Title spacing", runs: [{ text: "Title spacing" }], spacing: { before: 120, after: 200 } },
{ type: "paragraph", text: "Paragraph spacing", runs: [{ text: "Paragraph spacing" }], spacing: { before: 240, after: 360 } }
]);
});
it("сохраняет HTML-межстрочный интервал абзацев для DOCX", () => {
const blocks = htmlToWordBlocks(`
<p style="line-height: 1.5;">Auto line height</p>
<p style="line-height: 24pt;">Exact line height</p>
`);
expect(blocks).toEqual([
{ type: "paragraph", text: "Auto line height", runs: [{ text: "Auto line height" }], spacing: { line: 360, lineRule: "auto" } },
{ type: "paragraph", text: "Exact line height", runs: [{ text: "Exact line height" }], spacing: { line: 480, lineRule: "exact" } }
]);
});
it("записывает отступы абзацев в w:ind экспортированного DOCX", async () => {
const blob = await exportDocxBlob(
"Indent.docx",
@@ -477,6 +588,30 @@ describe("wordOffice helpers", () => {
expect(documentXml).toMatch(/<w:ind\b(?=[^>]*w:left="720")(?=[^>]*w:hanging="240")[^>]*\/>/);
});
it("записывает интервалы абзацев в w:spacing экспортированного DOCX", async () => {
const blob = await exportDocxBlob(
"Spacing.docx",
'<h2 style="margin-top: 6pt; margin-bottom: 10pt;">Title spacing</h2><p style="margin-top: 12pt; margin-bottom: 18pt;">Paragraph spacing</p>'
);
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = await zip.file("word/document.xml")?.async("string");
expect(documentXml).toMatch(/<w:spacing\b(?=[^>]*w:before="120")(?=[^>]*w:after="200")[^>]*\/>/);
expect(documentXml).toMatch(/<w:spacing\b(?=[^>]*w:before="240")(?=[^>]*w:after="360")[^>]*\/>/);
});
it("записывает межстрочный интервал абзацев в w:spacing экспортированного DOCX", async () => {
const blob = await exportDocxBlob(
"LineSpacing.docx",
'<p style="line-height: 1.5;">Auto line height</p><p style="line-height: 24pt;">Exact line height</p>'
);
const zip = await JSZip.loadAsync(await blob.arrayBuffer());
const documentXml = await zip.file("word/document.xml")?.async("string");
expect(documentXml).toMatch(/<w:spacing\b(?=[^>]*w:line="360")(?=[^>]*w:lineRule="auto")[^>]*\/>/);
expect(documentXml).toMatch(/<w:spacing\b(?=[^>]*w:line="480")(?=[^>]*w:lineRule="exact")[^>]*\/>/);
});
it("нормализует HTML после импорта DOCX", () => {
expect(normalizeImportedDocxHtml(" <p>Готово</p>\n")).toBe("<p>Готово</p>");
});
+371 -28
View File
@@ -1,8 +1,10 @@
import { DOCX_MIME_TYPE, officeTitleFromFileName, readOfficeFileAsArrayBuffer } from "./fileHelpers";
import type { WordPageMarginPreset, WordPageOrientation, WordPageSetup, WordPageSizeId } from "../types";
export interface ImportedWordDocument {
title: string;
html: string;
pageSetup?: WordPageSetup;
}
export interface WordInlineRun {
@@ -25,6 +27,8 @@ export interface WordListItem {
runs: WordInlineRun[];
}
export type WordTableCell = string | { text: string; runs: WordInlineRun[]; colSpan?: number };
export interface WordImageBlock {
type: "image";
src: string;
@@ -41,13 +45,40 @@ export interface WordParagraphIndent {
hanging?: number;
}
export interface WordParagraphSpacing {
before?: number;
after?: number;
line?: number;
lineRule?: WordParagraphLineRule;
}
export type WordParagraphLineRule = "auto" | "exact" | "atLeast";
export type WordHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
export type WordBlock =
| { type: "heading"; level: WordHeadingLevel; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; indent?: WordParagraphIndent; bookmark?: string }
| { type: "paragraph"; text: string; runs: WordInlineRun[]; alignment?: WordParagraphAlignment; indent?: WordParagraphIndent; bookmark?: string; quote?: boolean }
| {
type: "heading";
level: WordHeadingLevel;
text: string;
runs: WordInlineRun[];
alignment?: WordParagraphAlignment;
indent?: WordParagraphIndent;
spacing?: WordParagraphSpacing;
bookmark?: string;
}
| {
type: "paragraph";
text: string;
runs: WordInlineRun[];
alignment?: WordParagraphAlignment;
indent?: WordParagraphIndent;
spacing?: WordParagraphSpacing;
bookmark?: string;
quote?: boolean;
}
| { type: "list"; ordered: boolean; items: WordListItem[] }
| { type: "table"; rows: string[][] }
| { type: "table"; rows: WordTableCell[][] }
| WordImageBlock;
type MammothModule = {
@@ -86,6 +117,8 @@ type DocxModule = {
AlignmentType?: Record<string, string>;
Document: new (options: Record<string, unknown>) => unknown;
HeadingLevel: Record<string, string>;
LineRuleType?: Record<string, string>;
PageOrientation?: Record<string, string>;
Packer: {
toBlob?: (document: unknown) => Promise<Blob>;
toBuffer?: (document: unknown) => Promise<ArrayBuffer | Uint8Array>;
@@ -104,6 +137,8 @@ type DocxModule = {
ImageRun?: new (options: Record<string, unknown>) => unknown;
};
const defaultParagraphSpacingAfterTwips = 160;
type InlineFormat = Omit<WordInlineRun, "text">;
type InlineSegment = { type: "runs"; runs: WordInlineRun[] } | { type: "image"; image: WordImageBlock };
type DocxInlineRecord = { run: unknown; text: string; href?: string };
@@ -133,6 +168,16 @@ const wordImageRelationshipType = "http://schemas.openxmlformats.org/officeDocum
const emptyDocxRelationshipTargets = { hyperlinks: {}, images: {} };
const pageBreakMarker = "\f";
const pageBreakHtml = '<span data-qoffice-page-break="true"></span>';
const defaultWordPageSetup: WordPageSetup = { size: "a4", orientation: "portrait", marginPreset: "normal" };
const wordPageSizes: Record<WordPageSizeId, { width: number; height: number }> = {
a4: { width: 794, height: 1123 },
letter: { width: 816, height: 1056 }
};
const wordPageMargins: Record<WordPageMarginPreset, { top: number; right: number; bottom: number; left: number }> = {
normal: { top: 72, right: 86, bottom: 72, left: 86 },
narrow: { top: 48, right: 48, bottom: 48, left: 48 },
wide: { top: 92, right: 116, bottom: 92, left: 116 }
};
export async function importDocxFile(file: File): Promise<ImportedWordDocument> {
if (!file.name.toLowerCase().endsWith(".docx")) {
@@ -141,7 +186,7 @@ export async function importDocxFile(file: File): Promise<ImportedWordDocument>
const mammoth = await loadMammoth();
const arrayBuffer = await readOfficeFileAsArrayBuffer(file);
const [result, styledHtml] = await Promise.all([
const [result, styledHtml, pageSetup] = await Promise.all([
mammoth.convertToHtml(
{ arrayBuffer, buffer: arrayBuffer },
{
@@ -149,20 +194,23 @@ export async function importDocxFile(file: File): Promise<ImportedWordDocument>
...(mammoth.images?.dataUri ? { convertImage: mammoth.images.dataUri } : {})
}
),
styledDocxHtmlFromArrayBuffer(arrayBuffer)
styledDocxHtmlFromArrayBuffer(arrayBuffer),
docxPageSetupFromArrayBuffer(arrayBuffer)
]);
return {
title: officeTitleFromFileName(file.name, "Документ QWord.docx"),
html: normalizeImportedDocxHtml(styledHtml || result.value)
html: normalizeImportedDocxHtml(styledHtml || result.value),
...(pageSetup ? { pageSetup } : {})
};
}
export async function exportDocxBlob(title: string, html: string): Promise<Blob> {
export async function exportDocxBlob(title: string, html: string, options: { pageSetup?: WordPageSetup } = {}): Promise<Blob> {
const docx = await loadDocx();
const blocks = htmlToWordBlocks(html);
const children = blocks.flatMap((block) => wordBlockToDocxChildren(block, docx));
const documentTitle = title.trim() || "Документ QWord";
const sectionProperties = wordSectionProperties(options.pageSetup, docx);
const document = new docx.Document({
creator: "QOffice",
@@ -189,7 +237,7 @@ export async function exportDocxBlob(title: string, html: string): Promise<Blob>
},
sections: [
{
properties: {},
properties: sectionProperties,
children:
children.length > 0
? children
@@ -214,6 +262,62 @@ export async function exportDocxBlob(title: string, html: string): Promise<Blob>
throw new Error("Не удалось создать DOCX: библиотека docx не вернула поддерживаемый упаковщик.");
}
function wordSectionProperties(pageSetup: WordPageSetup | undefined, docx: DocxModule) {
const normalizedPageSetup = normalizedWordPageSetup(pageSetup);
const size = wordPageSizeInTwips(normalizedPageSetup);
const margins = wordPageMargins[normalizedPageSetup.marginPreset];
return {
page: {
size: {
width: size.width,
height: size.height,
orientation:
normalizedPageSetup.orientation === "landscape"
? (docx.PageOrientation?.LANDSCAPE ?? "landscape")
: (docx.PageOrientation?.PORTRAIT ?? "portrait")
},
margin: {
top: pxToTwips(margins.top),
right: pxToTwips(margins.right),
bottom: pxToTwips(margins.bottom),
left: pxToTwips(margins.left)
}
}
};
}
function normalizedWordPageSetup(pageSetup?: WordPageSetup): WordPageSetup {
const size = isWordPageSizeId(pageSetup?.size) ? pageSetup.size : defaultWordPageSetup.size;
const orientation = isWordPageOrientation(pageSetup?.orientation) ? pageSetup.orientation : defaultWordPageSetup.orientation;
const marginPreset = isWordPageMarginPreset(pageSetup?.marginPreset) ? pageSetup.marginPreset : defaultWordPageSetup.marginPreset;
return { size, orientation, marginPreset };
}
function wordPageSizeInTwips(pageSetup: WordPageSetup) {
const size = wordPageSizes[pageSetup.size];
return {
width: pxToTwips(size.width),
height: pxToTwips(size.height)
};
}
function pxToTwips(value: number) {
return Math.round(value * 15);
}
function isWordPageSizeId(value: unknown): value is WordPageSizeId {
return value === "a4" || value === "letter";
}
function isWordPageOrientation(value: unknown): value is WordPageOrientation {
return value === "portrait" || value === "landscape";
}
function isWordPageMarginPreset(value: unknown): value is WordPageMarginPreset {
return value === "normal" || value === "narrow" || value === "wide";
}
export function normalizeImportedDocxHtml(html: string) {
return html.trim();
}
@@ -251,6 +355,7 @@ export function htmlToWordBlocks(html: string): WordBlock[] {
const text = inlineRunsText(runs);
const alignment = paragraphAlignmentFromElement(node);
const indent = paragraphIndentFromElement(node);
const spacing = paragraphSpacingFromElement(node);
const bookmark = bookmarkFromElement(node);
if (text) {
blocks.push({
@@ -260,6 +365,7 @@ export function htmlToWordBlocks(html: string): WordBlock[] {
runs,
...(alignment ? { alignment } : {}),
...(indent ? { indent } : {}),
...(spacing ? { spacing } : {}),
...(bookmark ? { bookmark } : {})
});
}
@@ -308,7 +414,7 @@ function wordBlockToDocxChildren(block: WordBlock, docx: DocxModule) {
return [
new docx.Paragraph({
heading: docxHeadingLevel(block.level, docx),
spacing: { after: 160 },
spacing: docxParagraphSpacing(block.spacing, defaultParagraphSpacingAfterTwips),
...docxAlignmentOption(block.alignment, docx),
...docxIndentOption(block.indent),
children: bookmarkDocxChildren(block.bookmark, children, docx)
@@ -321,7 +427,7 @@ function wordBlockToDocxChildren(block: WordBlock, docx: DocxModule) {
return [
new docx.Paragraph({
...(block.quote ? { style: "Quote" } : {}),
spacing: { after: 160 },
spacing: docxParagraphSpacing(block.spacing, defaultParagraphSpacingAfterTwips),
...docxAlignmentOption(block.alignment, docx),
...docxIndentOption(block.indent),
children: bookmarkDocxChildren(block.bookmark, children, docx)
@@ -372,16 +478,27 @@ function wordBlockToDocxChildren(block: WordBlock, docx: DocxModule) {
new docx.TableRow({
children: row.map(
(cell) =>
new docx.TableCell({
children: [
new docx.TableCell(wordTableCellToDocxOptions(cell, docx))
)
})
)
})
];
}
function wordTableCellToDocxOptions(cell: WordTableCell, docx: DocxModule) {
const colSpan = typeof cell === "string" ? undefined : cell.colSpan;
return {
children: wordTableCellToDocxParagraphs(cell, docx),
...(colSpan ? { columnSpan: colSpan } : {})
};
}
function wordTableCellToDocxParagraphs(cell: WordTableCell, docx: DocxModule) {
const runs = typeof cell === "string" ? [{ text: cell }] : cell.runs;
return [
new docx.Paragraph({
children: [new docx.TextRun(cell)]
})
]
})
)
})
)
children: wordInlineRunsToTextRuns(runs, docx)
})
];
}
@@ -525,6 +642,31 @@ function docxIndentOption(indent: WordParagraphIndent | undefined) {
return Object.keys(normalized).length > 0 ? { indent: normalized } : {};
}
function docxParagraphSpacing(spacing: WordParagraphSpacing | undefined, defaultAfter: number) {
const normalized = normalizedParagraphSpacing(spacing);
return {
after: normalized.after ?? defaultAfter,
...(normalized.before ? { before: normalized.before } : {}),
...(normalized.line ? { line: normalized.line, lineRule: normalized.lineRule } : {})
};
}
function normalizedParagraphSpacing(spacing: WordParagraphSpacing | undefined) {
const before = normalizedTwips(spacing?.before);
const after = normalizedTwips(spacing?.after);
const line = normalizedTwips(spacing?.line);
const lineRule = normalizedParagraphLineRule(spacing?.lineRule);
return {
...(before ? { before } : {}),
...(after !== undefined ? { after } : {}),
...(line ? { line, lineRule } : {})
};
}
function normalizedParagraphLineRule(lineRule: WordParagraphLineRule | undefined) {
return lineRule === "exact" || lineRule === "atLeast" ? lineRule : "auto";
}
function normalizedParagraphIndent(indent: WordParagraphIndent | undefined) {
const left = normalizedTwips(indent?.left);
const firstLine = normalizedTwips(indent?.firstLine);
@@ -590,18 +732,23 @@ function parseHtmlFragment(html: string) {
function tableRows(table: Element) {
return Array.from(table.querySelectorAll("tr"))
.map((row) =>
Array.from(row.querySelectorAll("th,td"))
.map(elementText)
.filter((cell) => cell.length > 0)
)
.map((row) => Array.from(row.querySelectorAll("th,td")).map(tableCellValue))
.filter((row) => row.length > 0);
}
function tableCellValue(cell: Element): WordTableCell {
const runs = elementInlineRuns(cell);
const text = inlineRunsText(runs);
const hasFormattedRuns = runs.some((run) => Object.keys(cleanInlineFormat(run)).length > 0);
const colSpan = normalizedTableSpan(cell.getAttribute("colspan"));
return hasFormattedRuns || colSpan ? { text, runs, ...(colSpan ? { colSpan } : {}) } : text;
}
function paragraphElementToBlocks(element: Element, options: { quote?: boolean } = {}): WordBlock[] {
const segments = collectInlineSegments(Array.from(element.childNodes), {});
const alignment = paragraphAlignmentFromElement(element);
const indent = paragraphIndentFromElement(element);
const spacing = paragraphSpacingFromElement(element);
const bookmark = bookmarkFromElement(element);
const blocks: WordBlock[] = [];
let pendingRuns: WordInlineRun[] = [];
@@ -618,6 +765,7 @@ function paragraphElementToBlocks(element: Element, options: { quote?: boolean }
runs,
...(alignment ? { alignment } : {}),
...(indent ? { indent } : {}),
...(spacing ? { spacing } : {}),
...(bookmark && !bookmarkApplied ? { bookmark } : {}),
...(options.quote ? { quote: true } : {})
});
@@ -666,6 +814,19 @@ function paragraphIndentFromElement(element: Element): WordParagraphIndent | und
return Object.keys(indent).length > 0 ? indent : undefined;
}
function paragraphSpacingFromElement(element: Element): WordParagraphSpacing | undefined {
const style = element.getAttribute("style") ?? "";
const before = cssTwipsValue(style, "margin-top");
const after = cssTwipsValue(style, "margin-bottom");
const lineHeight = cssLineHeightValue(style);
const spacing = {
...(before && before > 0 ? { before } : {}),
...(after && after > 0 ? { after } : {}),
...(lineHeight ? lineHeight : {})
};
return Object.keys(spacing).length > 0 ? spacing : undefined;
}
function bookmarkFromElement(element: Element) {
return normalizedDocxAnchor(element.getAttribute("id") || element.getAttribute("name"));
}
@@ -674,11 +835,33 @@ function cssTextAlignValue(style: string) {
return /(?:^|;)\s*text-align\s*:\s*([^;]+)/i.exec(style)?.[1] ?? "";
}
function cssTwipsValue(style: string, property: "margin-left" | "text-indent") {
function cssTwipsValue(style: string, property: "margin-left" | "margin-top" | "margin-bottom" | "text-indent") {
const raw = new RegExp(`(?:^|;)\\s*${property}\\s*:\\s*([^;]+)`, "i").exec(style)?.[1]?.trim().toLowerCase() ?? "";
return cssLengthToTwips(raw);
}
function cssLineHeightValue(style: string): WordParagraphSpacing | undefined {
const raw = /(?:^|;)\s*line-height\s*:\s*([^;]+)/i.exec(style)?.[1]?.trim().toLowerCase() ?? "";
if (!raw || ["inherit", "initial", "unset", "revert", "normal"].includes(raw)) {
return undefined;
}
const ratioMatch = /^([0-9]+(?:\.[0-9]+)?)$/.exec(raw);
if (ratioMatch) {
const ratio = Number.parseFloat(ratioMatch[1]);
return Number.isFinite(ratio) && ratio > 0 ? { line: Math.round(ratio * 240), lineRule: "auto" } : undefined;
}
const percentMatch = /^([0-9]+(?:\.[0-9]+)?)%$/.exec(raw);
if (percentMatch) {
const ratio = Number.parseFloat(percentMatch[1]) / 100;
return Number.isFinite(ratio) && ratio > 0 ? { line: Math.round(ratio * 240), lineRule: "auto" } : undefined;
}
const line = cssLengthToTwips(raw);
return line && line > 0 ? { line, lineRule: "exact" } : undefined;
}
function cssLengthToTwips(raw: string) {
if (!raw || ["inherit", "initial", "unset", "revert", "auto"].includes(raw)) {
return undefined;
@@ -828,6 +1011,108 @@ async function styledDocxHtmlFromArrayBuffer(arrayBuffer: ArrayBuffer) {
}
}
async function docxPageSetupFromArrayBuffer(arrayBuffer: ArrayBuffer): Promise<WordPageSetup | undefined> {
try {
const [JSZip, XMLParser] = await Promise.all([loadJsZip(), loadXmlParser()]);
const zip = await JSZip.loadAsync(arrayBuffer);
const documentXml = await zip.file("word/document.xml")?.async("string");
if (!documentXml) {
return undefined;
}
const parser = new XMLParser(xmlParserOptions);
return docxPageSetupFromDocumentXml(parser.parse(documentXml));
} catch {
return undefined;
}
}
function docxPageSetupFromDocumentXml(documentXml: unknown): WordPageSetup | undefined {
const body = childRecord(childRecord(documentXml, "w:document"), "w:body");
const sectionProperties = lastDocxSectionProperties(body);
if (!hasXmlRecord(sectionProperties)) {
return undefined;
}
return docxPageSetupFromSectionProperties(sectionProperties);
}
function lastDocxSectionProperties(body: XmlRecord): XmlRecord {
const paragraphSectionProperties = toArray(asRecord(body)["w:p"])
.map((paragraph) => childRecord(childRecord(paragraph, "w:pPr"), "w:sectPr"))
.filter(hasXmlRecord);
const bodySectionProperties = childRecord(body, "w:sectPr");
const sections = hasXmlRecord(bodySectionProperties) ? [...paragraphSectionProperties, bodySectionProperties] : paragraphSectionProperties;
return sections[sections.length - 1] ?? {};
}
function docxPageSetupFromSectionProperties(sectionProperties: XmlRecord): WordPageSetup | undefined {
const pageSize = childRecord(sectionProperties, "w:pgSz");
const pageMargins = childRecord(sectionProperties, "w:pgMar");
const width = docxTwipsAttribute(pageSize, ["w:w"]);
const height = docxTwipsAttribute(pageSize, ["w:h"]);
if (!width || !height) {
return undefined;
}
const orientation = docxPageOrientation(pageSize, width, height);
const baseWidth = orientation === "landscape" ? height : width;
const baseHeight = orientation === "landscape" ? width : height;
const size = wordPageSizeIdFromTwips(baseWidth, baseHeight);
if (!size) {
return undefined;
}
const marginPreset = hasXmlRecord(pageMargins) ? (wordPageMarginPresetFromTwips(pageMargins) ?? defaultWordPageSetup.marginPreset) : defaultWordPageSetup.marginPreset;
return { size, orientation, marginPreset };
}
function docxPageOrientation(pageSize: XmlRecord, width: number, height: number): WordPageOrientation {
const value = docxAttribute(pageSize, "w:orient").trim().toLowerCase();
if (value === "landscape") {
return "landscape";
}
if (value === "portrait") {
return "portrait";
}
return width > height ? "landscape" : "portrait";
}
function wordPageSizeIdFromTwips(width: number, height: number): WordPageSizeId | undefined {
return (Object.keys(wordPageSizes) as WordPageSizeId[]).find((sizeId) => {
const size = wordPageSizes[sizeId];
return isCloseTwips(width, pxToTwips(size.width)) && isCloseTwips(height, pxToTwips(size.height));
});
}
function wordPageMarginPresetFromTwips(pageMargins: XmlRecord): WordPageMarginPreset | undefined {
const top = docxTwipsAttribute(pageMargins, ["w:top"]);
const right = docxTwipsAttribute(pageMargins, ["w:right"]);
const bottom = docxTwipsAttribute(pageMargins, ["w:bottom"]);
const left = docxTwipsAttribute(pageMargins, ["w:left"]);
if (!top || !right || !bottom || !left) {
return undefined;
}
return (Object.keys(wordPageMargins) as WordPageMarginPreset[]).find((preset) => {
const margins = wordPageMargins[preset];
return (
isCloseTwips(top, pxToTwips(margins.top)) &&
isCloseTwips(right, pxToTwips(margins.right)) &&
isCloseTwips(bottom, pxToTwips(margins.bottom)) &&
isCloseTwips(left, pxToTwips(margins.left))
);
});
}
function isCloseTwips(actual: number, expected: number) {
return Math.abs(actual - expected) <= 40;
}
function hasXmlRecord(record: XmlRecord) {
return Object.keys(record).length > 0;
}
function isSimpleStyledDocxDocument(documentXml: string) {
return !/<w:(pict|sdt)\b/i.test(documentXml);
}
@@ -1018,7 +1303,9 @@ function orderedDocxTableToHtml(
})
.filter(Boolean);
const content = paragraphs.length > 0 ? paragraphs.join("") : escapeHtml(orderedDocxCellText(cell));
return content ? `<td>${content}</td>` : "<td></td>";
const colSpan = orderedDocxTableCellColspan(cell);
const attributes = colSpan ? ` colspan="${colSpan}"` : "";
return content ? `<td${attributes}>${content}</td>` : `<td${attributes}></td>`;
})
.join("");
@@ -1029,6 +1316,12 @@ function orderedDocxTableToHtml(
return { html: rows.length > 0 ? `<table><tbody>${rows.join("")}</tbody></table>` : "", hasImage, hasLineBreak, hasPageBreak, hasTab };
}
function orderedDocxTableCellColspan(cell: unknown) {
const properties = firstOrderedElement(orderedElementChildren(cell), "w:tcPr");
const gridSpan = firstOrderedElement(orderedElementChildren(properties), "w:gridSpan");
return normalizedTableSpan(docxAttribute(orderedElementAttributes(gridSpan), "w:val") || docxAttribute(orderedElementAttributes(gridSpan), "val"));
}
function orderedDocxCellText(cell: unknown) {
return orderedDirectElements(cell, "w:p")
.flatMap((paragraph) => orderedDocxParagraphInlineRecords(paragraph, {}))
@@ -1069,7 +1362,8 @@ function docxParagraphStyleAttribute(properties: XmlRecord) {
const htmlAlignment = alignment === "both" ? "justify" : alignment;
const styles = [
["left", "center", "right", "justify"].includes(htmlAlignment) ? `text-align: ${htmlAlignment};` : "",
...docxParagraphIndentStyles(properties)
...docxParagraphIndentStyles(properties),
...docxParagraphSpacingStyles(properties)
].filter(Boolean);
return styles.join(" ");
}
@@ -1086,6 +1380,36 @@ function docxParagraphIndentStyles(properties: XmlRecord) {
].filter(Boolean);
}
function docxParagraphSpacingStyles(properties: XmlRecord) {
const spacing = childRecord(properties, "w:spacing");
const before = docxTwipsAttribute(spacing, ["w:before"]);
const after = docxTwipsAttribute(spacing, ["w:after"]);
const line = docxTwipsAttribute(spacing, ["w:line"]);
const lineRule = docxAttribute(spacing, "w:lineRule");
return [
before ? `margin-top: ${formatPointSize(before / 20)}pt;` : "",
after && after !== defaultParagraphSpacingAfterTwips ? `margin-bottom: ${formatPointSize(after / 20)}pt;` : "",
docxLineHeightStyle(line, lineRule)
].filter(Boolean);
}
function docxLineHeightStyle(line: number | undefined, lineRule: string) {
if (!line || line <= 0) {
return "";
}
const normalizedRule = lineRule.trim().toLowerCase();
if (!normalizedRule || normalizedRule === "auto") {
return `line-height: ${formatLineHeightRatio(line / 240)};`;
}
return `line-height: ${formatPointSize(line / 20)}pt;`;
}
function formatLineHeightRatio(value: number) {
return Number.isInteger(value) ? String(value) : value.toFixed(2).replace(/0+$/, "").replace(/\.$/, "");
}
function docxParagraphListInfo(properties: XmlRecord, numberingDefinitions: DocxNumberingDefinitions): DocxListInfo | undefined {
const numbering = childRecord(properties, "w:numPr");
const numId = docxAttribute(childRecord(numbering, "w:numId"), "w:val");
@@ -1358,7 +1682,7 @@ function docxRunToHtml(run: unknown, imageDataByRelationshipId: DocxImageDataByR
if (hasDocxBoolean(properties, "w:i")) {
html = `<em>${html}</em>`;
}
if (hasDocxBoolean(properties, "w:u")) {
if (hasDocxUnderline(properties)) {
html = `<u>${html}</u>`;
}
if (hasStrike) {
@@ -1572,6 +1896,15 @@ function hasDocxBoolean(properties: XmlRecord, key: string) {
return !["0", "false", "off"].includes(value.toLowerCase());
}
function hasDocxUnderline(properties: XmlRecord) {
if (!Object.prototype.hasOwnProperty.call(properties, "w:u")) {
return false;
}
const value = (docxAttribute(childRecord(properties, "w:u"), "w:val") || docxAttribute(childRecord(properties, "w:u"), "val")).trim().toLowerCase();
return !["0", "false", "off", "none"].includes(value);
}
function childRecord(value: unknown, key: string): XmlRecord {
const child = asRecord(value)[key];
if (Array.isArray(child)) {
@@ -1854,6 +2187,16 @@ function numericAttribute(element: Element, name: string) {
return Number.isFinite(value) && value > 0 ? Math.round(value) : undefined;
}
function normalizedTableSpan(value?: string | null) {
const raw = value?.trim() ?? "";
if (!/^\d+$/.test(raw)) {
return undefined;
}
const span = Number.parseInt(raw, 10);
return Number.isSafeInteger(span) && span > 1 ? Math.min(span, 63) : undefined;
}
function cssPixelValue(style: string, property: "width" | "height") {
const match = new RegExp(`${property}\\s*:\\s*(\\d+(?:\\.\\d+)?)px`, "i").exec(style);
if (!match) {
+98
View File
@@ -1,4 +1,5 @@
import { describe, expect, it } from "vitest";
import JSZip from "jszip";
import { exportDocxBlob, htmlToWordBlocks, importDocxFile } from "./wordOffice";
const tinyPngBase64 = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+/p9sAAAAASUVORK5CYII=";
@@ -128,6 +129,36 @@ describe("wordOffice DOCX import", () => {
]);
});
it("does not import DOCX underline when w:u val is none", async () => {
const sourceBlob = await exportDocxBlob("UnderlineNone.docx", '<p><span style="color: #0f5fae;">Not underlined</span></p>');
const zip = await JSZip.loadAsync(await sourceBlob.arrayBuffer());
const documentXml = (await zip.file("word/document.xml")?.async("string")) ?? "";
const patchedDocumentXml = documentXml.replace(/(<w:rPr\b[^>]*>[\s\S]*?)(<\/w:rPr>)/, '$1<w:u w:val="none"/>$2');
expect(patchedDocumentXml).toContain('<w:u w:val="none"/>');
zip.file("word/document.xml", patchedDocumentXml);
const patchedBlob = await zip.generateAsync({
type: "blob",
mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(
new File([patchedBlob], "UnderlineNone.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
})
);
expect(imported.html).not.toContain("<u>Not underlined</u>");
expect(imported.html).not.toContain("<u>");
expect(imported.html).toContain("color: #0F5FAE;");
expect(htmlToWordBlocks(imported.html)).toEqual([
{
type: "paragraph",
text: "Not underlined",
runs: [{ text: "Not underlined", color: "0F5FAE" }]
}
]);
});
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", {
@@ -281,6 +312,25 @@ describe("wordOffice DOCX import", () => {
]);
});
it("imports DOCX horizontal merged table cells as HTML colspan", async () => {
const blob = await exportDocxBlob(
"Table colspan.docx",
'<table><tr><td colspan="2">Merged</td><td>Tail</td></tr></table>'
);
const file = new File([blob], "Table colspan.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(file);
expect(imported.html).toContain('<td colspan="2"><p>Merged</p></td>');
expect(htmlToWordBlocks(imported.html)).toEqual([
{
type: "table",
rows: [[{ text: "Merged", runs: [{ text: "Merged" }], colSpan: 2 }, "Tail"]]
}
]);
});
it("imports DOCX bullet and numbered lists from OOXML numbering", async () => {
const blob = await exportDocxBlob(
"Lists.docx",
@@ -363,4 +413,52 @@ describe("wordOffice DOCX import", () => {
{ type: "paragraph", text: "Hanging", runs: [{ text: "Hanging" }], indent: { left: 720, hanging: 240 } }
]);
});
it("imports DOCX paragraph spacing from OOXML", async () => {
const blob = await exportDocxBlob(
"Spacing.docx",
'<h2 style="margin-top: 6pt; margin-bottom: 10pt;">Title spacing</h2><p style="margin-top: 12pt; margin-bottom: 18pt;">Paragraph spacing</p>'
);
const file = new File([blob], "Spacing.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(file);
expect(imported.html).toContain("margin-top: 6pt; margin-bottom: 10pt;");
expect(imported.html).toContain("margin-top: 12pt; margin-bottom: 18pt;");
expect(htmlToWordBlocks(imported.html)).toEqual([
{ type: "heading", level: 2, text: "Title spacing", runs: [{ text: "Title spacing" }], spacing: { before: 120, after: 200 } },
{ type: "paragraph", text: "Paragraph spacing", runs: [{ text: "Paragraph spacing" }], spacing: { before: 240, after: 360 } }
]);
});
it("imports DOCX paragraph line spacing from OOXML", async () => {
const blob = await exportDocxBlob(
"LineSpacing.docx",
'<p style="line-height: 1.5;">Auto line height</p><p style="line-height: 24pt;">Exact line height</p>'
);
const file = new File([blob], "LineSpacing.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(file);
expect(imported.html).toContain("line-height: 1.5;");
expect(imported.html).toContain("line-height: 24pt;");
expect(htmlToWordBlocks(imported.html)).toEqual([
{ type: "paragraph", text: "Auto line height", runs: [{ text: "Auto line height" }], spacing: { line: 360, lineRule: "auto" } },
{ type: "paragraph", text: "Exact line height", runs: [{ text: "Exact line height" }], spacing: { line: 480, lineRule: "exact" } }
]);
});
it("imports DOCX page setup from OOXML section properties", async () => {
const blob = await exportDocxBlob("PageSetup.docx", "<p>Layout</p>", {
pageSetup: { size: "letter", orientation: "landscape", marginPreset: "narrow" }
});
const file = new File([blob], "PageSetup.docx", {
type: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
});
const imported = await importDocxFile(file);
expect(imported.pageSetup).toEqual({ size: "letter", orientation: "landscape", marginPreset: "narrow" });
});
});
+185 -48
View File
@@ -365,6 +365,10 @@ button {
min-height: 0;
}
.qword-layout {
grid-template-rows: auto minmax(0, 1fr);
}
.document-stage,
.spreadsheet-stage,
.slide-stage {
@@ -393,6 +397,9 @@ button {
}
.word-module-toolbar {
position: relative;
top: auto;
z-index: 3;
display: block;
min-height: 154px;
padding: 0;
@@ -439,8 +446,7 @@ button {
min-width: 100%;
height: 118px;
min-height: 118px;
overflow-x: auto;
overflow-y: hidden;
overflow: hidden;
background: #ffffff;
}
@@ -452,7 +458,7 @@ button {
height: 118px;
min-height: 118px;
min-width: 0;
padding: 8px 10px 4px;
padding: 7px 8px 4px;
border-right: 1px solid #d6dde8;
}
@@ -474,23 +480,23 @@ button {
}
.word-file-group {
flex: 0 0 76px;
flex: 0 0 68px;
grid-template-columns: minmax(0, 1fr);
}
.word-file-actions {
display: grid;
grid-template-columns: repeat(2, 28px);
grid-template-columns: repeat(2, 26px);
align-content: start;
justify-content: center;
gap: 6px;
gap: 5px;
}
.word-icon-command {
display: grid;
place-items: center;
width: 28px;
height: 28px;
width: 26px;
height: 26px;
border: 1px solid transparent;
border-radius: 4px;
background: #ffffff;
@@ -504,12 +510,13 @@ button {
}
.word-clipboard-group {
flex: 0 0 150px;
flex: 0 1 136px;
grid-template-columns: auto auto;
}
.word-clipboard-group .word-ribbon-title,
.word-font-group .word-ribbon-title,
.word-page-setup-group .word-ribbon-title,
.word-paragraph-group .word-ribbon-title,
.word-styles-group .word-ribbon-title,
.word-insert-group .word-ribbon-title,
@@ -522,7 +529,7 @@ button {
place-items: center;
align-content: center;
gap: 4px;
min-width: 66px;
min-width: 58px;
min-height: 70px;
border: 1px solid transparent;
border-radius: 4px;
@@ -549,6 +556,7 @@ button {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
min-height: 22px;
border: 1px solid transparent;
border-radius: 4px;
@@ -556,11 +564,14 @@ button {
color: var(--text);
cursor: pointer;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.word-font-group {
flex: 0 0 266px;
flex: 1 1 226px;
min-width: 214px;
grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
grid-template-columns: minmax(0, 1fr);
}
@@ -573,7 +584,7 @@ button {
.word-font-select {
min-width: 0;
flex: 1 1 170px;
flex: 1 1 132px;
}
.word-font-size-select {
@@ -606,11 +617,24 @@ button {
}
.word-paragraph-group {
flex: 0 0 170px;
flex: 0 1 154px;
grid-template-rows: 28px 28px minmax(0, 1fr) 18px;
grid-template-columns: minmax(0, 1fr);
}
.word-page-setup-group {
flex: 0 0 272px;
grid-template-columns: minmax(0, 1fr);
}
.word-page-setup-controls {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-content: start;
gap: 7px;
min-width: 0;
}
.word-paragraph-group > .segmented-tools,
.word-paragraph-group > .compact-command {
align-self: start;
@@ -621,7 +645,8 @@ button {
}
.word-styles-group {
flex: 0 0 360px;
flex: 1 1 238px;
min-width: 190px;
grid-template-columns: minmax(0, 1fr);
}
@@ -636,7 +661,7 @@ button {
.word-style-gallery button {
display: grid;
align-content: center;
flex: 0 0 82px;
flex: 0 0 78px;
min-height: 64px;
padding: 6px 8px;
border: 1px solid #d6dde8;
@@ -645,17 +670,23 @@ button {
color: #334155;
cursor: pointer;
font-size: 12px;
overflow: hidden;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
.word-style-gallery button span {
color: #1e5fa7;
font-size: 20px;
font-size: 18px;
line-height: 1.1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.word-insert-group {
flex: 0 0 96px;
flex: 0 0 86px;
grid-template-columns: minmax(0, 1fr);
}
@@ -664,11 +695,69 @@ button {
justify-content: flex-start;
}
.word-edit-group {
flex: 0 0 132px;
.word-table-group {
flex: 0 0 236px;
grid-template-columns: minmax(0, 1fr);
}
.word-table-controls {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
gap: 5px 7px;
min-width: 0;
}
.word-mini-field {
display: grid;
gap: 2px;
min-width: 0;
color: #69778a;
font-size: 11px;
line-height: 1.1;
}
.word-mini-field select {
min-width: 0;
width: 100%;
}
.word-table-controls .compact-command:not(.word-table-structure-command) {
grid-column: 1 / -1;
justify-content: center;
width: 100%;
}
.word-table-structure-command {
justify-content: flex-start;
width: 100%;
}
.word-edit-group {
flex: 0 0 118px;
grid-template-columns: minmax(0, 1fr);
}
.word-view-group {
flex: 0 0 320px;
grid-template-columns: minmax(0, 1fr);
}
.word-view-mode-row {
display: flex;
align-items: start;
gap: 6px;
min-width: 0;
}
.word-view-mode-row .compact-command {
flex: 1 1 0;
height: 58px;
flex-direction: column;
gap: 4px;
white-space: normal;
}
.word-edit-group .toolbar-status {
min-height: 26px;
padding: 0;
@@ -683,8 +772,12 @@ button {
.word-ribbon .compact-command {
height: 28px;
min-width: 0;
padding: 0 8px;
font-size: 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hidden-file-input {
@@ -974,27 +1067,88 @@ button {
}
.paper-frame {
--qword-page-gap: 28px;
--qword-page-height: 1123px;
position: relative;
width: var(--qword-page-width, 794px);
zoom: var(--qword-zoom, 1);
margin: 0 auto 38px;
}
.paper {
--qword-page-height: 1123px;
min-height: var(--qword-page-height);
.page-sheets {
position: absolute;
inset: 0 0 auto;
z-index: 0;
display: flex;
flex-direction: column;
gap: var(--qword-page-gap);
pointer-events: none;
}
.page-sheet {
display: block;
width: 100%;
margin: 0;
padding: 72px 86px;
height: var(--qword-page-height);
border: 1px solid #c7d1dd;
background: #ffffff;
box-shadow: var(--shadow);
}
.paper {
min-height: var(--qword-page-height);
position: relative;
z-index: 1;
width: 100%;
margin: 0;
padding: var(--qword-page-margin-top, 72px) var(--qword-page-margin-right, 86px) var(--qword-page-margin-bottom, 72px) var(--qword-page-margin-left, 86px);
border: 0;
background: transparent;
box-shadow: none;
outline: 0;
}
.qword-view-read .page-ruler,
.qword-view-read .vertical-page-ruler,
.qword-view-read .page-sheets,
.qword-view-read .page-break-guides,
.qword-view-web .page-ruler,
.qword-view-web .vertical-page-ruler,
.qword-view-web .page-sheets,
.qword-view-web .page-break-guides {
display: none;
}
.qword-view-read .paper-frame {
width: min(920px, calc(100% - 96px));
margin-top: 34px;
}
.qword-view-read .paper {
min-height: auto;
padding: 56px 72px;
border: 1px solid #c7d1dd;
background: #ffffff;
box-shadow: var(--shadow);
}
.qword-view-web .paper-frame {
width: min(1040px, calc(100% - 64px));
margin-top: 24px;
}
.qword-view-web .paper {
min-height: auto;
padding: 36px 48px;
background: #ffffff;
border-right: 0;
border-left: 0;
box-shadow: none;
}
.page-break-guides {
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
}
@@ -1002,30 +1156,8 @@ button {
position: absolute;
left: 0;
right: 0;
display: grid;
place-items: center;
height: 24px;
border-top: 1px dashed #94a3b8;
color: #64748b;
font-size: 11px;
transform: translateY(-12px);
}
.page-break-guides span::before,
.page-break-guides span::after {
content: "";
position: absolute;
top: 11px;
width: calc(50% - 58px);
border-top: 1px dashed #94a3b8;
}
.page-break-guides span::before {
left: 0;
}
.page-break-guides span::after {
right: 0;
height: var(--qword-page-gap);
background: #dedede;
}
.document-content h1 {
@@ -2125,6 +2257,11 @@ button {
overflow-y: auto;
}
.word-module-toolbar {
max-height: none;
overflow: hidden;
}
.file-title-input {
min-width: 0;
flex: 1 1 220px;
+27
View File
@@ -1,10 +1,30 @@
export type AppId = "word" | "sheets" | "slides" | "mail";
export type WordPageSizeId = "a4" | "letter";
export type WordPageOrientation = "portrait" | "landscape";
export type WordPageMarginPreset = "normal" | "narrow" | "wide";
export type SheetPageSizeId = "a4" | "letter";
export type SheetPageOrientation = "portrait" | "landscape";
export type SheetPageMarginPreset = "normal" | "narrow" | "wide";
export interface WordPageSetup {
size: WordPageSizeId;
orientation: WordPageOrientation;
marginPreset: WordPageMarginPreset;
}
export interface SheetPageSetup {
size: SheetPageSizeId;
orientation: SheetPageOrientation;
marginPreset: SheetPageMarginPreset;
}
export interface WordDocument {
id: string;
title: string;
updatedAt: string;
html: string;
pageSetup?: WordPageSetup;
}
export interface Workbook {
@@ -29,6 +49,7 @@ export interface Sheet {
showGridLines?: boolean;
zoomScale?: number;
printArea?: string;
pageSetup?: SheetPageSetup;
cells: Record<string, string>;
mergedCells?: MergedCellRange[];
hyperlinks?: Record<string, string>;
@@ -76,11 +97,14 @@ export interface SheetChart {
valueRange: string;
}
export type SlideSizeId = "wide" | "standard";
export interface SlideDeck {
id: string;
title: string;
updatedAt: string;
activeSlideId: string;
slideSize?: SlideSizeId;
slides: Slide[];
}
@@ -100,6 +124,7 @@ export interface Slide {
titleItalics?: boolean;
titleUnderline?: boolean;
titleStrike?: boolean;
titleAlign?: SlideTextAlign;
titleColor?: string;
titleFontSize?: number;
titleFontFamily?: string;
@@ -107,6 +132,7 @@ export interface Slide {
subtitleItalics?: boolean;
subtitleUnderline?: boolean;
subtitleStrike?: boolean;
subtitleAlign?: SlideTextAlign;
subtitleColor?: string;
subtitleFontSize?: number;
subtitleFontFamily?: string;
@@ -114,6 +140,7 @@ export interface Slide {
}
export type SlideListStyle = "bullet" | "number";
export type SlideTextAlign = "left" | "center" | "right";
export type SlideTransition = "fade" | "push" | "wipe";
export interface SlideImage {
+139
View File
@@ -0,0 +1,139 @@
# Ollama/Gemma Task: QOffice Next Iteration
You are Gemma running through Ollama. Work on the local repository:
```text
G:\Repos\QOffice
```
Project objective: QOffice is a cross-platform Russian-language office suite intended to move toward Microsoft Office-like functionality. It contains separate applications: QWord, QExcell, QPowerPoint, and QOutlook. Microsoft Office file compatibility is a core requirement.
Current verified repository state:
- `git status --short --branch` returned `## main...origin/main`.
- Latest commit before this task: `5487d04 Add QPowerPoint slide size support`.
- QWord already has DOCX import/export, page setup controls, and a Microsoft Word-like ribbon.
- QWord does not yet implement DOCX header/footer support.
## Iteration Goal
Implement QWord support for Microsoft Word / DOCX headers and footers.
The feature must be real DOCX compatibility work. Do not implement this only as internal JSON state. Import and export must read and write actual DOCX header/footer parts or clearly explain why that is impossible after inspecting the local `docx` package API.
## Files To Inspect First
First check for local project instructions:
```powershell
rg --files -g AGENTS.md
```
Then inspect these files before editing:
- `src/types.ts`
- `src/data/sampleData.ts`
- `src/App.tsx`
- `src/io/wordOffice.ts`
- `src/io/wordOffice.test.ts`
- `src/io/wordOfficeImport.test.ts`
- `src/features/qword/QWord.tsx`
- `src/features/qword/QWord.test.tsx`
## Verified Starting Points
- `src/types.ts`: `WordDocument` currently has `id`, `title`, `updatedAt`, `html`, and optional `pageSetup`.
- `src/io/wordOffice.ts`: `importDocxFile` imports DOCX through `mammoth`, `styledDocxHtmlFromArrayBuffer`, and `docxPageSetupFromArrayBuffer`.
- `src/io/wordOffice.ts`: `exportDocxBlob` currently accepts only `pageSetup` in its options object.
- `src/io/wordOffice.ts`: `lastDocxSectionProperties` already finds the final `w:sectPr`.
- `src/features/qword/QWord.tsx`: `openDocx` applies imported `title`, `html`, and `pageSetup`.
- `src/features/qword/QWord.tsx`: `saveDocx` passes only `pageSetup` into `exportDocxBlob`.
- QWord's `layout` ribbon tab already contains page setup controls.
## Implementation Requirements
1. Data model:
Add optional QWord document fields. Preferred names:
```ts
headerHtml?: string;
footerHtml?: string;
```
Existing saved documents without these fields must remain valid.
2. DOCX import:
- Read `word/document.xml`.
- Find the final applicable `w:sectPr`.
- Read `w:headerReference` and `w:footerReference`.
- Resolve their relationship ids through `word/_rels/document.xml.rels`.
- Read the corresponding `word/header*.xml` and `word/footer*.xml` parts.
- For this first iteration, support the `default` reference type.
- Do not break documents that also contain `first` or `even` references; those can be ignored for now.
- Convert header/footer content into HTML using the existing `wordOffice.ts` helper patterns. Preserve at least paragraphs and basic inline text styling.
3. DOCX export:
- Extend `exportDocxBlob` options to accept `headerHtml` and `footerHtml`.
- Use the local `docx` package API to create real DOCX header/footer parts if available.
- Reuse the existing HTML-to-DOCX block pipeline where practical.
- Preserve existing `pageSetup` behavior.
- Generated DOCX must contain real header/footer parts and relationships.
4. QWord UI:
- Add Russian-language controls for header and footer.
- Preferred location: QWord `layout` ribbon tab near page setup.
- Do not add a right sidebar.
- Use clear Russian labels, for example:
- `Верхний колонтитул`
- `Нижний колонтитул`
- Editing these fields must call `onChange` with updated `document.headerHtml` and `document.footerHtml`.
- `openDocx` must apply imported header/footer fields.
- `saveDocx` must pass header/footer fields to `exportDocxBlob`.
5. Tests:
Add focused regression tests:
- Import DOCX with `headerReference` and `footerReference`; assert imported `headerHtml` and `footerHtml`.
- Export DOCX with header/footer; assert header/footer parts and relationships exist.
- Roundtrip export -> import; assert header/footer values survive.
- QWord UI test: changing header/footer controls calls `onChange` with `headerHtml` and `footerHtml`.
## Verification Commands
Run the narrow test set first:
```powershell
npx vitest run src\io\wordOffice.test.ts src\io\wordOfficeImport.test.ts src\features\qword\QWord.test.tsx
```
If the narrow tests pass, run:
```powershell
npm run build
npm test
npm audit --audit-level=high
```
## Constraints
- Do not touch unrelated files.
- Do not revert user changes.
- Do not run destructive git commands.
- Do not add dependencies unless necessary.
- Follow the existing project patterns.
- If you are only an LLM without filesystem access, return a unified diff patch and verification commands.
- If you are running inside an agent with filesystem access, edit the files directly but do not commit or push.
## Final Response Required
Report:
- changed files;
- tests and command results;
- exactly how DOCX import/export was implemented;
- any remaining risks or unverified behavior.