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
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>Word editor</title>
|
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
|
|
|
<link rel="icon" href="icon.svg">
|
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
|
|
|
<style>
|
|
|
|
|
: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; }
|
|
|
|
|
@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; }
|
|
|
|
|
}
|
|
|
|
|
* { 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; }
|
|
|
|
|
h1 { font-size: 13px; font-weight: 600; margin: 0; }
|
|
|
|
|
.head { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
|
|
|
|
|
border-bottom: 1px solid var(--line); background: var(--panel); }
|
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
|
|
|
.head .ico { width: 18px; height: 18px; display: block; }
|
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
|
|
|
.body { flex: 1; overflow: auto; padding: 12px; }
|
|
|
|
|
.lede { color: var(--mut); font-size: 12px; margin: 0 0 12px; }
|
|
|
|
|
.btn { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
|
|
|
|
border-radius: 7px; cursor: pointer; padding: 8px 10px; font: inherit;
|
|
|
|
|
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
|
|
|
|
|
.btn:hover { border-color: rgb(from var(--acid) r g b / .55); }
|
|
|
|
|
.btn.primary { background: var(--acid); color: #101418; border-color: transparent; font-weight: 600; }
|
|
|
|
|
.btn.primary:hover { filter: brightness(1.06); }
|
|
|
|
|
.btn + .btn { margin-top: 8px; }
|
|
|
|
|
.btn .sub { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }
|
|
|
|
|
.btn.primary .sub { color: rgba(16,20,24,.7); }
|
|
|
|
|
.drop { border: 1.5px dashed var(--line); border-radius: 8px; padding: 18px 12px;
|
|
|
|
|
text-align: center; color: var(--dim); font-size: 12px; margin: 12px 0; }
|
|
|
|
|
.drop.over { border-color: var(--acid); color: var(--ink); }
|
|
|
|
|
h2 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
|
|
|
|
|
color: var(--dim); margin: 18px 0 8px; font-weight: 600; }
|
|
|
|
|
.doc { display: flex; align-items: center; gap: 8px; padding: 7px 8px;
|
|
|
|
|
border: 1px solid var(--line); border-radius: 7px; background: var(--panel);
|
|
|
|
|
margin-bottom: 6px; cursor: pointer; }
|
|
|
|
|
.doc:hover { border-color: rgb(from var(--acid) r g b / .5); }
|
|
|
|
|
.doc .meta { flex: 1; min-width: 0; }
|
|
|
|
|
.doc .name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
|
|
|
.doc .when { font-size: 10.5px; color: var(--dim); }
|
|
|
|
|
.doc .x { border: 0; background: transparent; color: var(--dim); cursor: pointer;
|
|
|
|
|
font: inherit; padding: 2px 5px; border-radius: 5px; }
|
|
|
|
|
.doc .x:hover { color: var(--danger); background: var(--panel2); }
|
|
|
|
|
.tag { font-size: 9.5px; padding: 1px 5px; border-radius: 99px; border: 1px solid var(--line); color: var(--dim); }
|
|
|
|
|
.empty { color: var(--dim); font-size: 12px; padding: 6px 0; }
|
|
|
|
|
.foot { border-top: 1px solid var(--line); padding: 8px 12px; background: var(--panel);
|
|
|
|
|
font-size: 11px; color: var(--dim); display: flex; gap: 8px; align-items: center; }
|
|
|
|
|
.foot button { border: 1px solid var(--line); background: var(--panel2); color: var(--ink);
|
|
|
|
|
border-radius: 5px; cursor: pointer; padding: 3px 7px; font: inherit; font-size: 11px; }
|
|
|
|
|
.foot button:hover { border-color: rgb(from var(--acid) r g b / .55); }
|
|
|
|
|
.msg { min-height: 16px; font-size: 11.5px; color: var(--mut); margin-top: 8px; }
|
|
|
|
|
.msg.err { color: var(--danger); }
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
|
2026-09-21 02:41:16 +02:00
|
|
|
<div class="head"><span class="ico" aria-hidden="true"><svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M6 2h8l6 6v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z" fill="#2563eb"/><path d="M14 2v6h6z" fill="#1e40af"/><text x="12" y="17" text-anchor="middle" font-family="system-ui,-apple-system,sans-serif" font-size="5.5" font-weight="800" fill="#fff">DOC</text></svg></span><h1>Word editor</h1></div>
|
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
|
|
|
|
|
|
|
|
<div class="body">
|
|
|
|
|
<p class="lede">Open a .docx in a full tab. Headers, footers, footnotes, page setup and
|
|
|
|
|
the document's own styles survive a save; a few Word features don't, and the editor says
|
|
|
|
|
which before you start.</p>
|
|
|
|
|
|
|
|
|
|
<button class="btn primary" id="new">
|
|
|
|
|
<span>📄</span><span>New document<span class="sub">A blank page</span></span>
|
|
|
|
|
</button>
|
|
|
|
|
<button class="btn" id="open">
|
|
|
|
|
<span>📂</span><span>Open a .docx…<span class="sub">From this computer</span></span>
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<div class="drop" id="drop">or drop a .docx here</div>
|
|
|
|
|
|
|
|
|
|
<h2>Recent</h2>
|
|
|
|
|
<div id="recent"><div class="empty">Nothing yet.</div></div>
|
|
|
|
|
|
|
|
|
|
<div class="msg" id="msg"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="foot">
|
|
|
|
|
<span style="flex:1">Documents are kept in a scratch folder.</span>
|
|
|
|
|
<button id="folder">Folder</button>
|
|
|
|
|
<button id="clear">Clear</button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<input type="file" id="file" accept=".docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document" hidden>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
const $ = (id) => document.getElementById(id);
|
|
|
|
|
const SM = () => window.silentmode;
|
|
|
|
|
|
|
|
|
|
function say(text, err) {
|
|
|
|
|
const el = $("msg");
|
|
|
|
|
el.textContent = text || "";
|
|
|
|
|
el.classList.toggle("err", !!err);
|
|
|
|
|
clearTimeout(say._t);
|
|
|
|
|
if (text) say._t = setTimeout(() => { el.textContent = ""; el.classList.remove("err"); }, 6000);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function ago(ts) {
|
|
|
|
|
const s = Math.max(0, Math.round((Date.now() - ts) / 1000));
|
|
|
|
|
if (s < 60) return "just now";
|
|
|
|
|
if (s < 3600) return `${Math.round(s / 60)} min ago`;
|
|
|
|
|
if (s < 86400) return `${Math.round(s / 3600)} h ago`;
|
|
|
|
|
return new Date(ts).toLocaleDateString();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function bytesLabel(n) {
|
|
|
|
|
return n > 1048576 ? `${(n / 1048576).toFixed(1)} MB` : `${Math.max(1, Math.round(n / 1024))} KB`;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function toBase64(file) {
|
|
|
|
|
const buf = new Uint8Array(await file.arrayBuffer());
|
|
|
|
|
let s = "";
|
|
|
|
|
for (let i = 0; i < buf.length; i += 0x8000) {
|
|
|
|
|
s += String.fromCharCode.apply(null, buf.subarray(i, i + 0x8000));
|
|
|
|
|
}
|
|
|
|
|
return btoa(s);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function refresh() {
|
|
|
|
|
let list = [];
|
|
|
|
|
try { list = await SM().invoke("listRecent", {}); }
|
|
|
|
|
catch (e) { say("Couldn't read the recent list.", true); return; }
|
|
|
|
|
const host = $("recent");
|
|
|
|
|
host.innerHTML = "";
|
|
|
|
|
if (!list.length) {
|
|
|
|
|
host.innerHTML = '<div class="empty">Nothing yet.</div>';
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
for (const d of list) {
|
|
|
|
|
const row = document.createElement("div");
|
|
|
|
|
row.className = "doc";
|
|
|
|
|
row.title = "Open in the editor";
|
|
|
|
|
const meta = document.createElement("div");
|
|
|
|
|
meta.className = "meta";
|
|
|
|
|
const name = document.createElement("div");
|
|
|
|
|
name.className = "name";
|
|
|
|
|
name.textContent = d.name;
|
|
|
|
|
const when = document.createElement("div");
|
|
|
|
|
when.className = "when";
|
|
|
|
|
when.textContent = `${ago(d.at)} · ${bytesLabel(d.bytes)}`;
|
|
|
|
|
if (d.kind === "saved") {
|
|
|
|
|
const tag = document.createElement("span");
|
|
|
|
|
tag.className = "tag";
|
|
|
|
|
tag.textContent = "autosaved";
|
|
|
|
|
when.append(" ", tag);
|
|
|
|
|
}
|
|
|
|
|
meta.append(name, when);
|
|
|
|
|
const x = document.createElement("button");
|
|
|
|
|
x.className = "x";
|
|
|
|
|
x.textContent = "✕";
|
|
|
|
|
x.title = "Forget this document";
|
|
|
|
|
x.addEventListener("click", async (e) => {
|
|
|
|
|
e.stopPropagation();
|
|
|
|
|
try { await SM().invoke("clearRecent", { id: d.id }); await refresh(); }
|
|
|
|
|
catch (err) { say("Couldn't remove it.", true); }
|
|
|
|
|
});
|
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
|
|
|
const thumb = document.createElement("img");
|
|
|
|
|
thumb.src = "icon.svg"; thumb.width = 16; thumb.height = 16; thumb.alt = "";
|
|
|
|
|
row.append(thumb, meta, x);
|
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
|
|
|
row.addEventListener("click", () => openEditor(d.id));
|
|
|
|
|
host.append(row);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function openEditor(id) {
|
|
|
|
|
try { await SM().invoke("openEditor", id ? { id } : {}); }
|
|
|
|
|
catch (e) { say("Couldn't open the editor: " + (e && e.message || e), true); }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function handleFile(file) {
|
|
|
|
|
if (!/\.docx$/i.test(file.name)) { say("That isn't a .docx file.", true); return; }
|
|
|
|
|
say("Opening…");
|
|
|
|
|
try {
|
|
|
|
|
const res = await SM().invoke("stash", { name: file.name, base64: await toBase64(file), kind: "opened" });
|
|
|
|
|
await openEditor(res.id);
|
|
|
|
|
await refresh();
|
|
|
|
|
say("");
|
|
|
|
|
} catch (e) {
|
|
|
|
|
say((e && e.message || e).toString(), true);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$("new").addEventListener("click", () => openEditor(""));
|
|
|
|
|
$("open").addEventListener("click", () => $("file").click());
|
|
|
|
|
$("file").addEventListener("change", async (e) => {
|
|
|
|
|
const f = e.target.files && e.target.files[0];
|
|
|
|
|
e.target.value = "";
|
|
|
|
|
if (f) await handleFile(f);
|
|
|
|
|
});
|
|
|
|
|
$("folder").addEventListener("click", async () => {
|
|
|
|
|
try { await SM().invoke("openFolder", {}); } catch (e) { say("Couldn't open the folder.", true); }
|
|
|
|
|
});
|
|
|
|
|
$("clear").addEventListener("click", async () => {
|
|
|
|
|
try { await SM().invoke("clearRecent", {}); await refresh(); say("Cleared."); }
|
|
|
|
|
catch (e) { say("Couldn't clear the list.", true); }
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const drop = $("drop");
|
|
|
|
|
for (const type of ["dragenter", "dragover"]) {
|
|
|
|
|
drop.addEventListener(type, (e) => { e.preventDefault(); drop.classList.add("over"); });
|
|
|
|
|
}
|
|
|
|
|
for (const type of ["dragleave", "drop"]) {
|
|
|
|
|
drop.addEventListener(type, () => drop.classList.remove("over"));
|
|
|
|
|
}
|
|
|
|
|
drop.addEventListener("drop", async (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const f = Array.from(e.dataTransfer?.files || [])[0];
|
|
|
|
|
if (f) await handleFile(f);
|
|
|
|
|
});
|
|
|
|
|
window.addEventListener("dragover", (e) => e.preventDefault());
|
|
|
|
|
window.addEventListener("drop", (e) => e.preventDefault());
|
|
|
|
|
|
|
|
|
|
document.addEventListener("visibilitychange", () => { if (!document.hidden) refresh(); });
|
|
|
|
|
refresh();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|