avi/Folio
avi/Folio
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

Match the editor's spacing in PDF/DOCX/ODT and fix the toolbar dropdown

Browse source 
Exports now use the same typography as the Full Book editor — Georgia
serif at 12pt, 1.7 line spacing, and a blank-line gap between paragraphs -
so the on-screen editor and every exported format look consistent. DOCX/
ODT also gain a chapter break before each chapter after the first.
This commit is contained in:
avi 2026-08-18 18:39:21 -05:00
commit 0df26d4ce6
6 changed files with 143 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

34
tests/selftest-scenario.js
View file

@ -204,6 +204,36 @@ const BOOK3_DIR = __BOOKDIR3_VALUE__;
await new Promise((r) => setTimeout(r, 50));
out.painterOk = cm.state.doc.toString() === "**src** **dst**";
// text color via the toolbar dropdown.
cm.dispatch({ changes: { from: 0, to: cm.state.doc.length, insert: "" } });
cm.dispatch({ changes: { from: 0, to: 0, insert: "color me" }, selection: { anchor: 0, head: 5 } });
cm.focus();
const colorToggle = document.querySelector('[data-dropdown="colorMenu"]');
colorToggle?.click();
await new Promise((r) => setTimeout(r, 50));
const colorMenuEl = document.getElementById("colorMenu");
const colorRect = colorMenuEl?.getBoundingClientRect();
out.colorMenuOpens =
!!colorRect && !colorMenuEl?.classList.contains("hidden") && colorRect.bottom <= window.innerHeight + 1;
// the dropdown is pinned to the viewport, so it must stay on screen even
// though the toolbar itself is a horizontal scroll container
out.colorMenuOnScreen = !!colorRect && colorRect.top >= 0 && colorRect.bottom <= window.innerHeight;
document.querySelector('[data-cmd="color:#e11d48"]').click();
await new Promise((r) => setTimeout(r, 50));
out.colorApplied = cm.state.doc.toString() === '<span style="color:#e11d48">color</span> me';
// custom color picker works
cm.dispatch({ changes: { from: 0, to: cm.state.doc.length, insert: "" } });
cm.dispatch({ changes: { from: 0, to: 0, insert: "pick me" }, selection: { anchor: 0, head: 4 } });
cm.focus();
colorToggle?.click();
await new Promise((r) => setTimeout(r, 50));
const customInput = document.getElementById("customTextColor");
customInput.value = "#0066cc";
customInput.dispatchEvent(new Event("change", { bubbles: true }));
await new Promise((r) => setTimeout(r, 50));
out.customColorApplied = cm.state.doc.toString() === '<span style="color:#0066cc">pick</span> me';
// leave some formatted content on disk for the autosave check
cm.dispatch({
changes: { from: 0, to: cm.state.doc.length, insert: "**Hello** World" },
@ -859,6 +889,10 @@ const BOOK3_DIR = __BOOKDIR3_VALUE__;
"highlightOk",
"tableOk",
"painterOk",
"colorMenuOpens",
"colorMenuOnScreen",
"colorApplied",
"customColorApplied",
"formattingAutosaved",
"fullBookShown",
"assembledOk",