silentmode/theseus
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
theseus/bundled-addons/docx-editor/editor.css

258 lines
15 KiB
CSS
Raw Normal View History

feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
/* Word editor — full-tab. Shares the screenshot editor's shell (same
variables, same topbar + toolbar + footer skeleton) with a ribbon-ish
toolbar over a continuous document surface.
"Ribbon-ish" means grouped button sets with labelled groups, not a real
ribbon widget: no tabs, no gallery, no contextual tab strip. It reads as
Office without pretending to be it. */
:root { color-scheme: light dark;
--bg:#0e131c; --panel:#141a24; --panel2:#191f2b; --line:rgba(255,255,255,.09);
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
--danger:#ff5b5b; --warn:#ffb648; --board:#0a0d13;
--paper:#ffffff; --paper-ink:#14161a; --paper-edge:rgba(0,0,0,.4); }
@media (prefers-color-scheme: light) {
:root { --bg:#f8faff; --panel:#ffffff; --panel2:#eff3fb; --line:rgba(0,0,0,.10);
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; --acid:#0AC18E;
--board:#dde3ee; --paper-edge:rgba(0,0,0,.18); }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink);
font: 13px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
display: flex; flex-direction: column; overflow: hidden; }
[hidden] { display: none !important; }
/* ---- top bar --------------------------------------------------------- */
.topbar { display: flex; align-items: center; gap: 4px; padding: 6px 8px;
border-bottom: 1px solid var(--line); background: var(--panel);
user-select: none; flex-wrap: nowrap; }
.topbar .spacer { flex: 1; }
.topbar .docname { color: var(--ink); font-size: 12.5px; font-weight: 600;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
max-width: 42vw; margin: 0 6px; }
.topbar .docname .dirty { color: var(--acid); margin-left: 4px; }
feat(docx-editor): documents are tabs, each with its own close button and menu Opening a second .docx used to mean a second browser tab: a whole ribbon, banner and footer repeated, with one ✕ at the far end of a row that also held the file's name. The name looked like a tab and nothing about it behaved like one. Now the editor holds documents the way the browser holds pages. A strip under the toolbar carries one tab per open document — icon, name, unsaved dot, its own ✕ — plus a + to open another. Middle-click closes, Ctrl+W closes, Ctrl+Tab cycles, and right-click (or the caret on the tab under the pointer) drops a menu: Duplicate, Open in the default app, Show in folder, Close others, Close. The gestures are the browser's because that is the tab strip every user of this editor already knows. Under it, one ProseMirror view is handed a different state per document rather than one view per tab, and the module-level "current document" variables are marshalled in and out on a switch. That keeps the change out of every function that touches the current document, at the price of one list — DOC_FIELDS in captureActive/adoptDoc — that has to stay complete. A variable missed there leaks one document's state into another, which would look like the editor corrupting a file, so it is called out in a comment. Closing the last document closes the editor tab, the way closing a browser's last tab closes the window; an empty ribbon staring at the user is not a state worth having. The add-on hands a newly opened document to the editor that is already up and fronts it, falling back to opening a tab if no editor acknowledges within 900ms — so a crashed or closed editor degrades to exactly the old behaviour rather than swallowing the document.
2026-09-22 08:35:06 +02:00
/* ---- open-document tabs ---------------------------------------------- */
/* Deliberately close to the browser's own strip: same shape, same gestures,
same place for the close button. An editor that invents its own idea of a
tab makes the user learn a second one for no reason. */
.doctabs { display: flex; align-items: stretch; gap: 2px; padding: 4px 6px 0;
background: var(--panel); border-bottom: 1px solid var(--line);
overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.doctabs:empty { display: none; }
.dtab { display: flex; align-items: center; gap: 6px; flex: 0 1 auto;
max-width: 230px; min-width: 96px; padding: 5px 6px 5px 9px;
border: 1px solid transparent; border-bottom: 0;
border-radius: 7px 7px 0 0; background: var(--panel2); color: var(--mut);
cursor: default; user-select: none; font-size: 12px; white-space: nowrap; }
.dtab:hover { color: var(--ink); }
.dtab.active { background: var(--board); color: var(--ink);
border-color: var(--line); box-shadow: inset 0 2px 0 var(--acid); }
.dtab .ico { width: 13px; height: 13px; flex: none; display: block; opacity: .9; }
.dtab .nm { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.dtab .dot { color: var(--acid); flex: none; font-size: 15px; line-height: 0; }
.dtab .x, .dtab .caret {
flex: none; opacity: .55; border: 0; background: transparent; color: inherit;
cursor: pointer; border-radius: 4px; padding: 1px 3px; font: inherit; line-height: 1;
}
.dtab .x:hover { opacity: 1; background: var(--line); color: var(--danger); }
.dtab .caret:hover { opacity: 1; background: var(--line); }
.dtab .caret { display: none; }
.dtab.active .caret, .dtab:hover .caret { display: block; }
.dtab-add { flex: none; align-self: center; border: 0; background: transparent;
color: var(--mut); cursor: pointer; font-size: 16px; line-height: 1;
padding: 3px 8px; border-radius: 6px; margin-left: 2px; }
.dtab-add:hover { background: var(--panel2); color: var(--ink); }
/* The menu a document tab drops. Plain DOM rather than a native popup: it
belongs to the page, so it can carry per-document state. */
.dmenu { position: fixed; z-index: 70; min-width: 190px; padding: 4px;
background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
box-shadow: 0 12px 30px rgba(0,0,0,.42); font-size: 12.5px; }
.dmenu button { display: flex; width: 100%; gap: 8px; align-items: center;
border: 0; background: transparent; color: var(--ink); cursor: pointer;
padding: 7px 10px; border-radius: 6px; font: inherit; text-align: left; }
.dmenu button:hover { background: var(--panel2); }
.dmenu button.danger { color: var(--danger); }
.dmenu button:disabled { opacity: .4; cursor: default; background: transparent; }
.dmenu .sep { height: 1px; background: var(--line); margin: 4px 2px; }
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
/* ---- ribbon ---------------------------------------------------------- */
.ribbon { display: flex; align-items: stretch; gap: 0;
padding: 4px 6px 2px; border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, var(--panel), var(--panel2));
user-select: none; overflow-x: auto; overflow-y: hidden; }
.rgroup { display: flex; flex-direction: column; align-items: center;
gap: 3px; padding: 0 8px; flex: 0 0 auto;
border-right: 1px solid var(--line); }
.rgroup:last-child { border-right: 0; }
.rgroup .rrow { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; }
.rgroup .rlabel { font-size: 10px; color: var(--dim); letter-spacing: .02em;
text-transform: lowercase; }
.rgroup[data-contextual] { opacity: .45; pointer-events: none; }
.rgroup[data-contextual="on"] { opacity: 1; pointer-events: auto; }
.btn {
border: 1px solid transparent; background: transparent; color: var(--ink);
min-width: 26px; height: 26px; border-radius: 5px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
padding: 0 4px; font: inherit; line-height: 0;
transition: background 90ms, border-color 90ms;
}
.btn:hover:not(:disabled) { background: var(--panel2); border-color: var(--line); }
.btn.on { background: rgb(from var(--acid) r g b / .16);
border-color: rgb(from var(--acid) r g b / .55); color: var(--acid); }
.btn:disabled { opacity: .35; cursor: default; }
.btn svg { width: 15px; height: 15px; display: block; }
.btn.wide { min-width: auto; padding: 0 8px; gap: 5px; line-height: 1; }
.btn.wide span { font-size: 12px; }
.btn.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
.btn.primary:hover:not(:disabled) { filter: brightness(1.06); background: var(--acid); }
.btn.danger:hover:not(:disabled) { border-color: rgba(255,91,91,.55); color: var(--danger); }
.btn .caret { width: 8px; height: 8px; opacity: .6; }
select.rsel, input.rnum {
height: 26px; border-radius: 5px; border: 1px solid var(--line);
background: var(--panel2); color: var(--ink); font: inherit; font-size: 12px;
padding: 0 4px; cursor: pointer; max-width: 150px;
}
select.rsel:focus, input.rnum:focus { outline: 1px solid rgb(from var(--acid) r g b / .5); }
input.rnum { width: 52px; cursor: text; text-align: center; }
.swatch-btn { position: relative; }
.swatch-btn .bar { position: absolute; left: 4px; right: 4px; bottom: 3px;
height: 3px; border-radius: 1px; background: #c00; }
/* colour / highlight popovers */
.pop { position: absolute; z-index: 60; background: var(--panel);
border: 1px solid var(--line); border-radius: 8px; padding: 8px;
box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.pop .grid { display: grid; grid-template-columns: repeat(8, 20px); gap: 4px; }
.pop .chip { width: 20px; height: 20px; border-radius: 4px; cursor: pointer;
border: 1px solid var(--line); padding: 0; }
.pop .chip:hover { outline: 2px solid rgb(from var(--acid) r g b / .6); }
.pop .prow { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pop .prow .btn { height: 24px; }
/* ---- banners --------------------------------------------------------- */
.banners { background: var(--board); }
.banner { display: flex; align-items: flex-start; gap: 10px;
padding: 9px 14px; font-size: 12.5px; line-height: 1.45;
border-bottom: 1px solid var(--line); background: var(--panel); }
.banner .ico { flex: 0 0 auto; font-size: 14px; line-height: 1.3; }
.banner .body { flex: 1 1 auto; min-width: 0; }
.banner .body b { font-weight: 600; }
.banner .acts { flex: 0 0 auto; display: flex; gap: 6px; }
.banner.warn { border-left: 3px solid var(--warn); }
.banner.block { border-left: 3px solid var(--danger); }
.banner.info { border-left: 3px solid var(--acid); }
.banner .btn { border-color: var(--line); background: var(--panel2); }
/* ---- document surface ------------------------------------------------ */
feat(docx-editor): the page fills the window, and two fonts ship with it The page sat marooned in the middle of a wide window with dark space either side of it. It is now drawn at the size the document actually claims — A4 stays A4, margins come from its own sectPr — and CSS `zoom` scales that to fit, defaulting to Fit width with a control in the footer and Ctrl +/-/0. Scaling rather than widening is deliberate. A page stretched to the window would break every line somewhere different from where the printed page breaks it, and an editor whose whole claim is that it shows you the document should not lie about where the lines end. `zoom` also beats a transform here: it affects layout, so the board scrolls correctly and ProseMirror's coordinate maths keeps working. Ubuntu and Fraunces now ship in fonts/, because Windows has neither and a font offered in the ribbon that the machine lacks is a font the user picks and then cannot see. Fetched once by `npm run fonts` and committed, never at runtime: an extension in a browser built around not phoning home should not ask a font CDN what a document looks like every time one is opened. Two things had to be worked around. On file:// Chromium registers @font-face rules and then refuses to fetch the files — the family appears in document.fonts and every glyph still renders in the fallback — so the add-on reads the woff2 and hands the page a stylesheet with them inlined as data URLs. The PDF export needed the same treatment for a different reason: its print window runs from a temp folder, where a relative url() resolves to nothing, which would have quietly undone the one-stylesheet-for-both promise that lib/doc-css.js exists to keep. If either path fails, the ribbon labels those families "(not available)" rather than implying otherwise. About 700 KB, most of it Ubuntu's Cyrillic and Greek — kept because the documents this is used on are not all English. Licences ship alongside.
2026-09-22 19:12:56 +02:00
/* The page is drawn at the size the document says it is — A4 stays A4 —
and `zoom` scales the whole thing to fit the window. Scaling rather than
widening is the point: a page stretched to the window would break every
line where the printed page does not. Chromium's `zoom` affects layout,
unlike a transform, so the board scrolls correctly and ProseMirror's
coordinate maths keeps working. */
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
.board { flex: 1; overflow: auto; background: var(--board); padding: 20px 16px 60px; }
feat(docx-editor): the page fills the window, and two fonts ship with it The page sat marooned in the middle of a wide window with dark space either side of it. It is now drawn at the size the document actually claims — A4 stays A4, margins come from its own sectPr — and CSS `zoom` scales that to fit, defaulting to Fit width with a control in the footer and Ctrl +/-/0. Scaling rather than widening is deliberate. A page stretched to the window would break every line somewhere different from where the printed page breaks it, and an editor whose whole claim is that it shows you the document should not lie about where the lines end. `zoom` also beats a transform here: it affects layout, so the board scrolls correctly and ProseMirror's coordinate maths keeps working. Ubuntu and Fraunces now ship in fonts/, because Windows has neither and a font offered in the ribbon that the machine lacks is a font the user picks and then cannot see. Fetched once by `npm run fonts` and committed, never at runtime: an extension in a browser built around not phoning home should not ask a font CDN what a document looks like every time one is opened. Two things had to be worked around. On file:// Chromium registers @font-face rules and then refuses to fetch the files — the family appears in document.fonts and every glyph still renders in the fallback — so the add-on reads the woff2 and hands the page a stylesheet with them inlined as data URLs. The PDF export needed the same treatment for a different reason: its print window runs from a temp folder, where a relative url() resolves to nothing, which would have quietly undone the one-stylesheet-for-both promise that lib/doc-css.js exists to keep. If either path fails, the ribbon labels those families "(not available)" rather than implying otherwise. About 700 KB, most of it Ubuntu's Cyrillic and Greek — kept because the documents this is used on are not all English. Licences ship alongside.
2026-09-22 19:12:56 +02:00
.sheet { width: var(--page-w, 8.27in); margin: 0 auto; background: var(--paper);
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
color: var(--paper-ink); box-shadow: 0 2px 18px var(--paper-edge);
feat(docx-editor): the page fills the window, and two fonts ship with it The page sat marooned in the middle of a wide window with dark space either side of it. It is now drawn at the size the document actually claims — A4 stays A4, margins come from its own sectPr — and CSS `zoom` scales that to fit, defaulting to Fit width with a control in the footer and Ctrl +/-/0. Scaling rather than widening is deliberate. A page stretched to the window would break every line somewhere different from where the printed page breaks it, and an editor whose whole claim is that it shows you the document should not lie about where the lines end. `zoom` also beats a transform here: it affects layout, so the board scrolls correctly and ProseMirror's coordinate maths keeps working. Ubuntu and Fraunces now ship in fonts/, because Windows has neither and a font offered in the ribbon that the machine lacks is a font the user picks and then cannot see. Fetched once by `npm run fonts` and committed, never at runtime: an extension in a browser built around not phoning home should not ask a font CDN what a document looks like every time one is opened. Two things had to be worked around. On file:// Chromium registers @font-face rules and then refuses to fetch the files — the family appears in document.fonts and every glyph still renders in the fallback — so the add-on reads the woff2 and hands the page a stylesheet with them inlined as data URLs. The PDF export needed the same treatment for a different reason: its print window runs from a temp folder, where a relative url() resolves to nothing, which would have quietly undone the one-stylesheet-for-both promise that lib/doc-css.js exists to keep. If either path fails, the ribbon labels those families "(not available)" rather than implying otherwise. About 700 KB, most of it Ubuntu's Cyrillic and Greek — kept because the documents this is used on are not all English. Licences ship alongside.
2026-09-22 19:12:56 +02:00
padding: var(--page-mt, .9in) var(--page-mr, 1in) var(--page-mb, .9in) var(--page-ml, 1in);
min-height: var(--page-h, auto); zoom: var(--zoom, 1); }
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
.sheet:focus { outline: none; }
.sheet .ProseMirror { outline: none; min-height: 50vh; }
feat(docx-editor): Save as…, PDF export, and a mark of our own Three gaps, one theme: the editor could produce a file but not decide where it went, what format it was in, or look like anything in the dock. **Save as…** opens a real file dialog, and the extension typed there picks the format. Save then writes to that file instead of dropping another copy in Downloads every time. The renderer never names a path: the dialog returns an opaque token, and the add-on will only write to a path a dialog actually returned. An extension page is the least trusted thing in the add-on, and "write these bytes anywhere" is not a capability it needs. **PDF** goes through Chromium's own print pipeline in a hidden window — the same engine as Ctrl+P — on the paper size read out of the document's own sectPr. For that to match what the user was looking at, the page's typography had to stop living in editor.css, which the export window can't reach: it moves to lib/doc-css.js and both surfaces read the one string. The result embeds subsetted fonts, keeps images, and turns hyperlinks into real PDF link annotations. **The icon** is ours. Microsoft's Word mark is a trademark and borrowing it to look official is not something a browser that talks about sovereignty should do. icon.svg says "text document" in its own words — a turned corner, a heading rule, body lines, a pilcrow badge in Silent Mode green — and `npm run icons` derives the PNGs and addon.json's copy from it, so there is one drawing rather than several that drift. Also: the scratch folder follows the profile rename to extensions-data/ via the api.dataDir the host now provides, instead of creating a stale addons-data/ beside it.
2026-09-21 03:35:55 +02:00
/* The document's own typography lives in lib/doc-css.js, injected at boot.
It is shared verbatim with the PDF export, which renders in a throwaway
window that can't reach this stylesheet — one copy means the PDF can't
drift away from what the editor showed. Only the "paper on a desk"
framing stays here. */
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
/* prosemirror-tables' own furniture */
.sheet .selectedCell:after {
content: ""; position: absolute; inset: 0; background: rgba(100,150,255,.25);
pointer-events: none; z-index: 2;
}
.sheet .column-resize-handle {
position: absolute; right: -2px; top: 0; bottom: 0; width: 4px;
background: #6ba0ff; pointer-events: none; z-index: 3;
}
.resize-cursor { cursor: col-resize; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; }
.ProseMirror-gapcursor:after {
content: ""; display: block; position: absolute; top: -2px;
width: 20px; border-top: 1px solid var(--paper-ink); animation: pm-blink 1.1s steps(2, start) infinite;
}
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }
@keyframes pm-blink { to { visibility: hidden; } }
.ProseMirror-selectednode { outline: 2px solid #6ba0ff; }
.empty-state { color: var(--dim); text-align: center; padding: 60px 20px; }
/* ---- footer ---------------------------------------------------------- */
.footer { display: flex; align-items: center; gap: 14px;
padding: 5px 12px; border-top: 1px solid var(--line);
background: var(--panel); font-size: 11.5px; color: var(--dim); }
.footer .stat { flex: 0 0 auto; white-space: nowrap; }
.footer .msg { flex: 1 1 auto; min-width: 0; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.footer .msg.err { color: var(--danger); }
.footer .msg.ok { color: var(--acid); }
.footer .fbtn { border: 1px solid var(--line); background: var(--panel2);
color: var(--ink); border-radius: 5px; cursor: pointer;
padding: 3px 7px; font: inherit; font-size: 11px; flex: 0 0 auto; }
.footer .fbtn:hover { border-color: rgb(from var(--acid) r g b / .55); }
feat(docx-editor): the page fills the window, and two fonts ship with it The page sat marooned in the middle of a wide window with dark space either side of it. It is now drawn at the size the document actually claims — A4 stays A4, margins come from its own sectPr — and CSS `zoom` scales that to fit, defaulting to Fit width with a control in the footer and Ctrl +/-/0. Scaling rather than widening is deliberate. A page stretched to the window would break every line somewhere different from where the printed page breaks it, and an editor whose whole claim is that it shows you the document should not lie about where the lines end. `zoom` also beats a transform here: it affects layout, so the board scrolls correctly and ProseMirror's coordinate maths keeps working. Ubuntu and Fraunces now ship in fonts/, because Windows has neither and a font offered in the ribbon that the machine lacks is a font the user picks and then cannot see. Fetched once by `npm run fonts` and committed, never at runtime: an extension in a browser built around not phoning home should not ask a font CDN what a document looks like every time one is opened. Two things had to be worked around. On file:// Chromium registers @font-face rules and then refuses to fetch the files — the family appears in document.fonts and every glyph still renders in the fallback — so the add-on reads the woff2 and hands the page a stylesheet with them inlined as data URLs. The PDF export needed the same treatment for a different reason: its print window runs from a temp folder, where a relative url() resolves to nothing, which would have quietly undone the one-stylesheet-for-both promise that lib/doc-css.js exists to keep. If either path fails, the ribbon labels those families "(not available)" rather than implying otherwise. About 700 KB, most of it Ubuntu's Cyrillic and Greek — kept because the documents this is used on are not all English. Licences ship alongside.
2026-09-22 19:12:56 +02:00
.footer .zoomer { display: inline-flex; align-items: center; gap: 4px; }
.footer .fsel { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
border-radius: 5px; font: inherit; font-size: 11px; padding: 2px 4px;
cursor: pointer; }
.footer .fsel:hover { border-color: rgb(from var(--acid) r g b / .55); }
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
/* ---- dialogs --------------------------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(4,7,12,.6); z-index: 80;
display: flex; align-items: center; justify-content: center; padding: 24px; }
.dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
box-shadow: 0 18px 50px rgba(0,0,0,.45); width: min(560px, 100%);
max-height: 80vh; display: flex; flex-direction: column; }
.dialog h2 { margin: 0; padding: 14px 18px 10px; font-size: 14.5px; font-weight: 600; }
.dialog .dbody { padding: 0 18px 4px; overflow: auto; font-size: 12.5px; line-height: 1.55; color: var(--mut); }
.dialog .dbody h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
color: var(--dim); margin: 14px 0 6px; font-weight: 600; }
.dialog .dbody ul { margin: 0 0 8px; padding-left: 18px; }
.dialog .dbody li { margin: 2px 0; }
.dialog .dbody code { font-family: Consolas, monospace; font-size: 11.5px; color: var(--ink); }
.dialog .dfoot { display: flex; gap: 8px; justify-content: flex-end;
padding: 12px 18px 14px; border-top: 1px solid var(--line); margin-top: 10px; }
.dialog .field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.dialog .field label { font-size: 11.5px; color: var(--dim); }
.dialog .field input {
height: 30px; border-radius: 6px; border: 1px solid var(--line);
background: var(--panel2); color: var(--ink); font: inherit; padding: 0 8px;
}
.dialog .field input:focus { outline: 1px solid rgb(from var(--acid) r g b / .5); }
.dialog .row { display: flex; gap: 12px; }
.dialog .row .field { flex: 1; }
.pill { display: inline-block; font-size: 10.5px; padding: 1px 6px; border-radius: 99px;
border: 1px solid var(--line); margin-right: 6px; }
.pill.keep { color: var(--acid); border-color: rgb(from var(--acid) r g b / .45); }
.pill.lose { color: var(--warn); border-color: rgba(255,182,72,.45); }
.pill.stop { color: var(--danger); border-color: rgba(255,91,91,.45); }
/* ---- drop target ----------------------------------------------------- */
.dropzone { position: fixed; inset: 0; z-index: 90; background: rgba(10,14,20,.82);
display: flex; align-items: center; justify-content: center;
border: 3px dashed var(--acid); font-size: 16px; color: var(--ink); }
/* ---- print ----------------------------------------------------------- */
@media print {
.topbar, .ribbon, .footer, .banners, .pop, .scrim, .dropzone { display: none !important; }
html, body { height: auto; overflow: visible; background: #fff; }
.board { overflow: visible; padding: 0; background: #fff; }
feat(docx-editor): the page fills the window, and two fonts ship with it The page sat marooned in the middle of a wide window with dark space either side of it. It is now drawn at the size the document actually claims — A4 stays A4, margins come from its own sectPr — and CSS `zoom` scales that to fit, defaulting to Fit width with a control in the footer and Ctrl +/-/0. Scaling rather than widening is deliberate. A page stretched to the window would break every line somewhere different from where the printed page breaks it, and an editor whose whole claim is that it shows you the document should not lie about where the lines end. `zoom` also beats a transform here: it affects layout, so the board scrolls correctly and ProseMirror's coordinate maths keeps working. Ubuntu and Fraunces now ship in fonts/, because Windows has neither and a font offered in the ribbon that the machine lacks is a font the user picks and then cannot see. Fetched once by `npm run fonts` and committed, never at runtime: an extension in a browser built around not phoning home should not ask a font CDN what a document looks like every time one is opened. Two things had to be worked around. On file:// Chromium registers @font-face rules and then refuses to fetch the files — the family appears in document.fonts and every glyph still renders in the fallback — so the add-on reads the woff2 and hands the page a stylesheet with them inlined as data URLs. The PDF export needed the same treatment for a different reason: its print window runs from a temp folder, where a relative url() resolves to nothing, which would have quietly undone the one-stylesheet-for-both promise that lib/doc-css.js exists to keep. If either path fails, the ribbon labels those families "(not available)" rather than implying otherwise. About 700 KB, most of it Ubuntu's Cyrillic and Greek — kept because the documents this is used on are not all English. Licences ship alongside.
2026-09-22 19:12:56 +02:00
/* On paper the page box is the paper; zoom and the screen's margins go. */
.sheet { box-shadow: none; width: auto; margin: 0; padding: 0; background: #fff;
color: #000; zoom: 1; min-height: 0; }
feat(docx-editor): Save as…, PDF export, and a mark of our own Three gaps, one theme: the editor could produce a file but not decide where it went, what format it was in, or look like anything in the dock. **Save as…** opens a real file dialog, and the extension typed there picks the format. Save then writes to that file instead of dropping another copy in Downloads every time. The renderer never names a path: the dialog returns an opaque token, and the add-on will only write to a path a dialog actually returned. An extension page is the least trusted thing in the add-on, and "write these bytes anywhere" is not a capability it needs. **PDF** goes through Chromium's own print pipeline in a hidden window — the same engine as Ctrl+P — on the paper size read out of the document's own sectPr. For that to match what the user was looking at, the page's typography had to stop living in editor.css, which the export window can't reach: it moves to lib/doc-css.js and both surfaces read the one string. The result embeds subsetted fonts, keeps images, and turns hyperlinks into real PDF link annotations. **The icon** is ours. Microsoft's Word mark is a trademark and borrowing it to look official is not something a browser that talks about sovereignty should do. icon.svg says "text document" in its own words — a turned corner, a heading rule, body lines, a pilcrow badge in Silent Mode green — and `npm run icons` derives the PNGs and addon.json's copy from it, so there is one drawing rather than several that drift. Also: the scratch folder follows the profile rename to extensions-data/ via the api.dataDir the host now provides, instead of creating a stale addons-data/ beside it.
2026-09-21 03:35:55 +02:00
/* Page breaks and widow control come from lib/doc-css.js, which carries
its own @media print block so Ctrl+P and the PDF export agree. */
feat(docx-editor): edit Word documents without quietly eating what Word put in them A .docx editor is easy to write badly: read the file into HTML, let someone edit it, write a fresh document back, and hand them a file that lost its headers, its page size and half its formatting without ever saying so. Three things keep this one honest. The reader doesn't use mammoth's HTML. mammoth's converter is deliberately semantic, and HTML has nowhere to put a run's colour or a paragraph's line spacing, so it drops them — and those are controls this editor puts in the ribbon. Taking its parsed document model instead means what the ribbon offers is what the file can actually carry. Six properties mammoth's model didn't keep are added by build-time patches, each asserting its anchor so an upgrade that moves the code fails the build rather than shipping a lossy reader. The writer rebuilds the body but carries the rest of the package across: headers, footers, footnotes, endnotes, the document's own style catalogue, its theme and its page setup, with relationship ids and content types re-wired. Word features the editor can't model are still lost, so they are detected when the file opens and named in a banner before anyone edits. Tracked changes get their own gate. mammoth renders insertions as ordinary text and drops deletions, so saving would accept every pending revision without Word ever asking. Such a document opens read-only until the user says that is what they want. Verified over 66 real documents: 65 round-trip with an identical model and a structurally valid package, the one exception being a 7 MB WMF picture, which no browser can display and the writer cannot emit. Also driven end to end through a real Theseus over CDP — sidebar, ribbon, typing, save, reopen.
2026-09-20 20:46:29 +02:00
}
Reference in a new issue Copy permalink