13a6e3ca1c
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.
220 lines
12 KiB
HTML
220 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Word editor</title>
|
||
<link rel="icon" href="icon.svg">
|
||
<link rel="stylesheet" href="editor.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div class="topbar">
|
||
<button class="btn wide" id="file-new" title="Start a blank document">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M4 1.5h5l3 3V14.5H4z"/><path d="M9 1.5v3h3"/></svg>
|
||
<span>New</span>
|
||
</button>
|
||
<button class="btn wide" id="file-open" title="Open a .docx file (Ctrl+O)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M1.5 4h4l1.5 2h7.5v7.5h-13z"/><path d="M1.5 4V2.5h5"/></svg>
|
||
<span>Open</span>
|
||
</button>
|
||
<button class="btn wide primary" id="file-save" title="Save as .docx (Ctrl+S)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M8 2v8M4.5 6.5L8 10l3.5-3.5M2.5 13.5h11"/></svg>
|
||
<span>Save</span>
|
||
</button>
|
||
<button class="btn wide" id="file-saveas" title="Save as… — choose a name, a folder, and .docx or .pdf (Ctrl+Shift+S)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M2.5 3.5h7l4 4v6.5a1 1 0 0 1-1 1h-10a1 1 0 0 1-1-1v-9.5a1 1 0 0 1 1-1z"/><path d="M5 3.5v3.5h5"/><path d="M5 14.5v-4h6v4"/></svg>
|
||
<span>Save as…</span>
|
||
</button>
|
||
<button class="btn wide" id="file-pdf" title="Save a PDF to your downloads">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M4 1.5h5l3 3v10H4z"/><path d="M9 1.5v3h3"/></svg>
|
||
<span>PDF</span>
|
||
</button>
|
||
<button class="btn" id="file-print" title="Print (Ctrl+P)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M4.5 6V2.5h7V6"/><rect x="2.5" y="6" width="11" height="5"/><path d="M4.5 11v2.5h7V11"/></svg>
|
||
</button>
|
||
|
||
<span class="docname" id="docname">Untitled document</span>
|
||
<span class="spacer"></span>
|
||
|
||
<button class="btn" id="about" title="About this editor, and what it can't do yet">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><circle cx="8" cy="8" r="6.2"/><path d="M8 7.2v4M8 4.9v.9" stroke-linecap="round"/></svg>
|
||
</button>
|
||
<button class="btn danger" id="discard" title="Close this tab">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M4 4l8 8M12 4l-8 8"/></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Ribbon. Grouped button sets with a caption under each group — the
|
||
Office 2007 shape without the tab strip, which would hide half the
|
||
controls behind a click for no gain at this feature count. -->
|
||
<div class="ribbon" id="ribbon">
|
||
|
||
<div class="rgroup">
|
||
<div class="rrow">
|
||
<button class="btn" id="undo" title="Undo (Ctrl+Z)" disabled>
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 8c0-3 2-5 5-5s5 2 5 5-2 5-5 5"/><path d="M6 5L3 8l3 3"/></svg>
|
||
</button>
|
||
<button class="btn" id="redo" title="Redo (Ctrl+Y)" disabled>
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M13 8c0-3-2-5-5-5S3 5 3 8s2 5 5 5"/><path d="M10 5l3 3-3 3"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="rlabel">undo</div>
|
||
</div>
|
||
|
||
<div class="rgroup">
|
||
<div class="rrow">
|
||
<select class="rsel" id="style-select" title="Paragraph style">
|
||
<option value="paragraph">Normal</option>
|
||
<option value="h1">Heading 1</option>
|
||
<option value="h2">Heading 2</option>
|
||
<option value="h3">Heading 3</option>
|
||
<option value="h4">Heading 4</option>
|
||
<option value="h5">Heading 5</option>
|
||
<option value="h6">Heading 6</option>
|
||
<option value="blockquote">Quote</option>
|
||
<option value="code_block">Code</option>
|
||
</select>
|
||
</div>
|
||
<div class="rlabel">style</div>
|
||
</div>
|
||
|
||
<div class="rgroup">
|
||
<div class="rrow">
|
||
<select class="rsel" id="font-family" title="Font">
|
||
<option value="">(document font)</option>
|
||
</select>
|
||
<input class="rnum" id="font-size" type="number" min="4" max="400" step="0.5" title="Size in points" placeholder="11">
|
||
</div>
|
||
<div class="rrow">
|
||
<button class="btn" id="m-strong" title="Bold (Ctrl+B)"><b style="font:600 13px/1 Georgia,serif">B</b></button>
|
||
<button class="btn" id="m-em" title="Italic (Ctrl+I)"><i style="font:italic 13px/1 Georgia,serif">I</i></button>
|
||
<button class="btn" id="m-underline" title="Underline (Ctrl+U)"><span style="font:13px/1 Georgia,serif;text-decoration:underline">U</span></button>
|
||
<button class="btn" id="m-strike" title="Strikethrough"><span style="font:13px/1 Georgia,serif;text-decoration:line-through">S</span></button>
|
||
<button class="btn" id="m-sup" title="Superscript"><span style="font:12px/1 Georgia,serif">x<sup>2</sup></span></button>
|
||
<button class="btn" id="m-sub" title="Subscript"><span style="font:12px/1 Georgia,serif">x<sub>2</sub></span></button>
|
||
<button class="btn swatch-btn" id="m-color" title="Text colour">
|
||
<span style="font:600 12px/1 Georgia,serif">A</span><span class="bar" id="color-bar"></span>
|
||
</button>
|
||
<button class="btn swatch-btn" id="m-highlight" title="Highlight">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><path d="M3 11l5-5 2 2-5 5H3z"/><path d="M9 5l2-2 2 2-2 2z"/></svg>
|
||
<span class="bar" id="hl-bar" style="background:#ffff00"></span>
|
||
</button>
|
||
<button class="btn" id="m-clear" title="Clear formatting">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M4 3h8M7 3l-2 9M9.5 9.5l3.5 3.5M13 9.5L9.5 13"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="rlabel">font</div>
|
||
</div>
|
||
|
||
<div class="rgroup">
|
||
<div class="rrow">
|
||
<button class="btn" id="a-left" title="Align left">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 4h12M2 7h8M2 10h12M2 13h7"/></svg>
|
||
</button>
|
||
<button class="btn" id="a-center" title="Centre">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 4h12M4 7h8M2 10h12M4.5 13h7"/></svg>
|
||
</button>
|
||
<button class="btn" id="a-right" title="Align right">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 4h12M6 7h8M2 10h12M7 13h7"/></svg>
|
||
</button>
|
||
<button class="btn" id="a-justify" title="Justify">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 4h12M2 7h12M2 10h12M2 13h12"/></svg>
|
||
</button>
|
||
<select class="rsel" id="line-height" title="Line spacing">
|
||
<option value="">Spacing</option>
|
||
<option value="1">Single</option>
|
||
<option value="1.15">1.15</option>
|
||
<option value="1.5">1.5</option>
|
||
<option value="2">Double</option>
|
||
</select>
|
||
</div>
|
||
<div class="rrow">
|
||
<button class="btn" id="indent-out" title="Decrease indent">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" fill="none"><path d="M7 4h7M7 8h7M7 12h7M2 4v8M5 6L3 8l2 2"/></svg>
|
||
</button>
|
||
<button class="btn" id="indent-in" title="Increase indent">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" fill="none"><path d="M7 4h7M7 8h7M7 12h7M2 4v8M3 6l2 2-2 2"/></svg>
|
||
</button>
|
||
<button class="btn" id="l-bullet" title="Bulleted list">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M6 4h8M6 8h8M6 12h8"/><circle cx="3" cy="4" r="1" fill="currentColor" stroke="none"/><circle cx="3" cy="8" r="1" fill="currentColor" stroke="none"/><circle cx="3" cy="12" r="1" fill="currentColor" stroke="none"/></svg>
|
||
</button>
|
||
<button class="btn" id="l-ordered" title="Numbered list">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" fill="none"><path d="M6 4h8M6 8h8M6 12h8"/><text x="1" y="5.5" font-size="5" fill="currentColor" stroke="none">1</text><text x="1" y="9.5" font-size="5" fill="currentColor" stroke="none">2</text><text x="1" y="13.5" font-size="5" fill="currentColor" stroke="none">3</text></svg>
|
||
</button>
|
||
<select class="rsel" id="list-format" title="Numbering format" style="max-width:96px">
|
||
<option value="decimal">1. 2. 3.</option>
|
||
<option value="lowerLetter">a. b. c.</option>
|
||
<option value="upperLetter">A. B. C.</option>
|
||
<option value="lowerRoman">i. ii. iii.</option>
|
||
<option value="upperRoman">I. II. III.</option>
|
||
</select>
|
||
</div>
|
||
<div class="rlabel">paragraph</div>
|
||
</div>
|
||
|
||
<div class="rgroup">
|
||
<div class="rrow">
|
||
<button class="btn" id="i-link" title="Link (Ctrl+K)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M6.5 9.5l3-3M7 4.5l1.5-1.5a2.5 2.5 0 013.5 3.5L10.5 8"/><path d="M9 11.5L7.5 13a2.5 2.5 0 01-3.5-3.5L5.5 8"/></svg>
|
||
</button>
|
||
<button class="btn" id="i-image" title="Insert a picture">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><rect x="2" y="3" width="12" height="10" rx="1"/><circle cx="5.7" cy="6.3" r="1.1"/><path d="M2.6 11.6L6 8.6l2.3 2 2.2-2.2 2.9 3"/></svg>
|
||
</button>
|
||
<button class="btn" id="i-table" title="Insert a table">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><rect x="2" y="3" width="12" height="10"/><path d="M2 6.3h12M2 9.7h12M6 3v10M10 3v10"/></svg>
|
||
</button>
|
||
<button class="btn" id="i-rule" title="Horizontal rule">
|
||
<svg viewBox="0 0 16 16" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"><path d="M2 8h12"/><path d="M4 4.5h8M4 11.5h8" opacity=".35"/></svg>
|
||
</button>
|
||
<button class="btn" id="i-pagebreak" title="Page break (Ctrl+Enter)">
|
||
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.3"><path d="M4 2h8M4 14h8M2 8h12" stroke-dasharray="2 1.6"/><path d="M4 2v3M12 2v3M4 14v-3M12 14v-3"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="rlabel">insert</div>
|
||
</div>
|
||
|
||
<div class="rgroup" id="table-group" data-contextual="off">
|
||
<div class="rrow">
|
||
<button class="btn wide" id="t-row-after" title="Insert a row below"><span>+ Row</span></button>
|
||
<button class="btn wide" id="t-col-after" title="Insert a column to the right"><span>+ Col</span></button>
|
||
<button class="btn wide" id="t-merge" title="Merge the selected cells"><span>Merge</span></button>
|
||
<button class="btn wide" id="t-split" title="Split the selected cell"><span>Split</span></button>
|
||
</div>
|
||
<div class="rrow">
|
||
<button class="btn wide" id="t-row-del" title="Delete this row"><span>− Row</span></button>
|
||
<button class="btn wide" id="t-col-del" title="Delete this column"><span>− Col</span></button>
|
||
<button class="btn wide" id="t-header" title="Toggle the header row"><span>Header</span></button>
|
||
<button class="btn wide danger" id="t-del" title="Delete the whole table"><span>Delete</span></button>
|
||
</div>
|
||
<div class="rlabel">table</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="banners" id="banners"></div>
|
||
|
||
<div class="board" id="board">
|
||
<div class="sheet" id="sheet">
|
||
<div class="empty-state" id="empty">Loading document…</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<span class="stat" id="stat-words">0 words</span>
|
||
<span class="stat" id="stat-pages">1 page</span>
|
||
<span class="stat"><button class="fbtn" id="open-folder">Open folder</button></span>
|
||
<span class="msg" id="msg"></span>
|
||
</div>
|
||
|
||
<input type="file" id="file-input" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden>
|
||
<input type="file" id="image-input" accept="image/png,image/jpeg,image/gif,image/bmp" hidden>
|
||
<a id="download-link" style="display:none"></a>
|
||
|
||
<script src="vendor/docx-vendor.js"></script>
|
||
<script src="lib/doc-css.js"></script>
|
||
<script src="lib/pkg.js"></script>
|
||
<script src="lib/schema.js"></script>
|
||
<script src="lib/read.js"></script>
|
||
<script src="lib/write.js"></script>
|
||
<script src="editor.js"></script>
|
||
</body>
|
||
</html>
|