Add Markdown formatting toolbar and editor shortcuts

This commit is contained in:
avi 2026-08-17 12:28:49 -05:00
commit c09f4adc30
8 changed files with 718 additions and 2 deletions

View file

@ -109,6 +109,43 @@ const BOOK_DIR = __BOOKDIR_VALUE__;
typedContent.includes("[link](https://example.com)") &&
typedContent.includes("`inline code`");
// --- formatting toolbar + keyboard shortcuts ---
if (cm) {
cm.dispatch({ changes: { from: 0, to: cm.state.doc.length, insert: "" }, selection: { anchor: 0 } });
cm.focus();
cm.dispatch({ changes: { from: 0, to: 0, insert: "Hello World" }, selection: { anchor: 0, head: 5 } });
document.querySelector('[data-cmd="bold"]').click();
await new Promise((r) => setTimeout(r, 50));
out.toolbarBoldOk = cm.state.doc.toString() === "**Hello** World";
out.focusAfterBold = document.activeElement === cm.contentDOM;
cm.dispatch({ selection: { anchor: 10, head: 15 } }); // "World"
cm.contentDOM.dispatchEvent(
new KeyboardEvent("keydown", { key: "b", ctrlKey: true, bubbles: true, cancelable: true })
);
await new Promise((r) => setTimeout(r, 50));
out.shortcutBoldOk = cm.state.doc.toString() === "**Hello** **World**";
const headingSel = document.getElementById("headingSelect");
headingSel.value = "2";
headingSel.dispatchEvent(new Event("change", { bubbles: true }));
await new Promise((r) => setTimeout(r, 50));
out.headingOk = cm.state.doc.toString().startsWith("## ");
document.querySelector('[data-cmd="undo"]').click();
await new Promise((r) => setTimeout(r, 50));
out.undoOk = cm.state.doc.toString() === "**Hello** **World**";
document.querySelector('[data-cmd="redo"]').click();
await new Promise((r) => setTimeout(r, 50));
out.redoOk = cm.state.doc.toString().startsWith("## ");
await new Promise((r) => setTimeout(r, 1200)); // wait for autosave debounce
out.formattingAutosaved =
(await window.folio.getChapterContent(typedId)).includes("**Hello**");
}
out.all = true;
} catch (e) {
out.error = String((e && e.message) || e);