92ef408ac5
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.
234 lines
13 KiB
CSS
234 lines
13 KiB
CSS
/* 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; }
|
|
|
|
/* ---- 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 ------------------------------------------------ */
|
|
.board { flex: 1; overflow: auto; background: var(--board); padding: 20px 16px 60px; }
|
|
.sheet { max-width: 8.27in; margin: 0 auto; background: var(--paper);
|
|
color: var(--paper-ink); box-shadow: 0 2px 18px var(--paper-edge);
|
|
padding: 0.9in 1in; min-height: 60vh; }
|
|
.sheet:focus { outline: none; }
|
|
.sheet .ProseMirror { outline: none; min-height: 50vh; }
|
|
|
|
/* Word's own defaults are a serif body at 11pt with a little space after
|
|
each paragraph; matching them means what the editor shows is roughly
|
|
what Word will show. */
|
|
.sheet {
|
|
font: 11pt/1.5 Georgia, "Times New Roman", serif;
|
|
}
|
|
.sheet p { margin: 0 0 8pt; }
|
|
.sheet h1, .sheet h2, .sheet h3, .sheet h4, .sheet h5, .sheet h6 {
|
|
font-family: "Segoe UI Semibold", "Segoe UI", Calibri, system-ui, sans-serif;
|
|
color: #1f4e79; font-weight: 600; margin: 14pt 0 6pt; line-height: 1.25;
|
|
}
|
|
.sheet h1 { font-size: 20pt; } .sheet h2 { font-size: 16pt; }
|
|
.sheet h3 { font-size: 13pt; } .sheet h4 { font-size: 12pt; }
|
|
.sheet h5 { font-size: 11pt; } .sheet h6 { font-size: 10.5pt; color: #2e74b5; }
|
|
.sheet blockquote { margin: 8pt 0 8pt 24pt; padding-left: 10pt;
|
|
border-left: 3px solid rgba(0,0,0,.15); color: #404040; font-style: italic; }
|
|
.sheet pre { font: 10pt/1.4 Consolas, "Courier New", monospace;
|
|
background: rgba(0,0,0,.04); border: 1px solid rgba(0,0,0,.08);
|
|
border-radius: 3px; padding: 8pt 10pt; margin: 8pt 0; white-space: pre-wrap; }
|
|
.sheet hr { border: 0; border-top: 1px solid #808080; margin: 10pt 0; }
|
|
.sheet ul, .sheet ol { margin: 0 0 8pt; padding-left: 28pt; }
|
|
.sheet li { margin: 0 0 2pt; }
|
|
.sheet li > p { margin: 0 0 2pt; }
|
|
.sheet a { color: #0563c1; text-decoration: underline; }
|
|
.sheet img { max-width: 100%; height: auto; vertical-align: baseline; }
|
|
.sheet table { border-collapse: collapse; margin: 8pt 0; width: 100%; table-layout: fixed; }
|
|
.sheet td, .sheet th { border: 1px solid #999; padding: 4pt 6pt; vertical-align: top;
|
|
position: relative; min-width: 1em; }
|
|
.sheet th { background: rgba(0,0,0,.04); font-weight: 600; text-align: left; }
|
|
.sheet td > p:last-child, .sheet th > p:last-child { margin-bottom: 0; }
|
|
.sheet .docx-page-break {
|
|
border-top: 1px dashed #b00; margin: 14pt 0; text-align: center;
|
|
user-select: none; position: relative;
|
|
}
|
|
.sheet .docx-page-break span {
|
|
font: 9pt/1 system-ui, sans-serif; color: #b00; background: var(--paper);
|
|
padding: 0 8px; position: relative; top: -6pt; letter-spacing: .04em;
|
|
}
|
|
.sheet .docx-note-ref {
|
|
color: #0563c1; font-size: .7em; padding: 0 1px; cursor: default;
|
|
border-bottom: 1px dotted #0563c1;
|
|
}
|
|
|
|
/* 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); }
|
|
|
|
/* ---- 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; }
|
|
.sheet { box-shadow: none; max-width: none; margin: 0; padding: 0; background: #fff; color: #000; }
|
|
.sheet .docx-page-break { border: 0; margin: 0; break-after: page; page-break-after: always; }
|
|
.sheet .docx-page-break span { display: none; }
|
|
}
|