@fiduswriter/editor 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiduswriter/editor",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Fidus Writer browser editor",
   "keywords": [
     "fiduswriter",
@@ -91,7 +91,7 @@
   },
   "dependencies": {
     "@fiduswriter/bibliography-manager": "^0.1.31",
-    "@fiduswriter/document": "^0.3.2",
+    "@fiduswriter/document": "^0.3.3",
     "@fiduswriter/image-manager": "^0.1.23",
     "@fortawesome/fontawesome-free": "^7.2.0",
     "cropperjs": "^1.6.2",
@@ -130,6 +130,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@fontsource/jetbrains-mono": "^5.3.0",
+    "@fontsource/source-sans-pro": "^5.3.0",
     "@swc/core": "^1.16.1",
     "@swc/jest": "^0.2.39",
     "@types/jest": "^30.0.0",

package/src/dialogs/html_export.ts

@@ -0,0 +1,58 @@
+import {Dialog} from "fwtoolkit"
+import {htmlExportDialogTemplate} from "./templates.js"
+
+export interface HtmlExportDialogResult {
+    /** Render `equation`/`figure_equation` nodes as SVG images (MathJax)
+        instead of MathML. */
+    svgMath: boolean
+}
+
+export class HtmlExportDialog {
+    dialog: Dialog | false
+
+    constructor() {
+        this.dialog = false
+    }
+
+    init(): Promise<HtmlExportDialogResult | false> {
+        const buttons: Array<Record<string, unknown>> = []
+        const dialogDonePromise = new Promise<HtmlExportDialogResult | false>(
+            resolve => {
+                buttons.push({
+                    text: gettext("Export"),
+                    classes: "fw-dark",
+                    click: () => {
+                        const dialogEl = (this.dialog as Dialog).dialogEl
+                        const svgMath = (
+                            dialogEl.querySelector(
+                                ".html-svg-math"
+                            ) as HTMLInputElement
+                        )?.checked
+                        ;(this.dialog as Dialog).close()
+                        return resolve({svgMath: !!svgMath})
+                    }
+                })
+
+                buttons.push({
+                    type: "cancel" as const,
+                    click: () => {
+                        ;(this.dialog as Dialog).close()
+                        resolve(false)
+                    }
+                })
+            }
+        )
+
+        this.dialog = new Dialog({
+            title: gettext("HTML export options"),
+            body: htmlExportDialogTemplate(),
+            height: 220,
+            width: 420,
+            buttons,
+            restoreActiveElement: false
+        })
+        this.dialog.open()
+
+        return dialogDonePromise
+    }
+}

package/src/dialogs/index.ts

@@ -7,5 +7,6 @@ export {LinkDialog} from "./link.js"
 export {TableDialog, TableConfigurationDialog} from "./table.js"
 export {RevisionDialog} from "./revision.js"
 export {PdfExportDialog} from "./pdf_export.js"
+export {HtmlExportDialog} from "./html_export.js"
 export {OrderedListStartDialog} from "./ordered_list.js"
 export {CodeBlockDialog} from "./code_block.js"

package/src/dialogs/templates.ts

@@ -120,6 +120,18 @@ export const pdfExportDialogTemplate = (): string => `
     </p>
 `
 
+export const htmlExportDialogTemplate = (): string => `
+    <p>
+        <label>
+            <input type="checkbox" class="html-svg-math">
+            ${gettext("Render formulas as SVG images instead of MathML")}
+        </label>
+    </p>
+    <p class="formula-note">${gettext(
+        "SVG renders consistently across browsers and is used in PDF export; MathML keeps formulas as text that can be searched and copied, but only newer browsers support it."
+    )}</p>
+`
+
 export const tableInsertTemplate = (): string => `
     <table class="insert-table-selection">
         <tr>

package/src/menus/headerbar/model.ts

@@ -10,7 +10,12 @@ import {DocumentAccessRightsDialog} from "../../documents/access_rights/index.js
 import {RequestAccessDialog} from "../../documents/access_rights/request_access_dialog.js"
 import {SaveCopy, SaveRevision} from "../../exporter/native/index.js"
 import {ExportFidusFile} from "../../exporter/native/file.js"
-import {LanguageDialog, PdfExportDialog, RevisionDialog} from "../../dialogs/index.js"
+import {
+    LanguageDialog,
+    PdfExportDialog,
+    RevisionDialog,
+    HtmlExportDialog
+} from "../../dialogs/index.js"
 import {E2EEKeyManager} from "fwtoolkit/e2ee/key-manager"
 import {PassphraseManager} from "fwtoolkit/e2ee/passphrase-manager"
 import {changePasswordDialog} from "fwtoolkit/e2ee/password-dialog"
@@ -627,8 +632,13 @@ export const headerbarModel = () => ({
                     action: (editor: Editor) => {
                         import(
                             "@fiduswriter/document/exporter/html/index"
-                        ).then(({HTMLExporter}) => {
+                        ).then(async ({HTMLExporter}) => {
                             const db = getDB(editor)
+                            const dialog = new HtmlExportDialog()
+                            const options = await dialog.init()
+                            if (!options) {
+                                return
+                            }
                             const doc = getExportDoc(editor, {
                                 changes: "acceptAllNoInsertions"
                             })
@@ -638,7 +648,8 @@ export const headerbarModel = () => ({
                                 db.imageDB,
                                 editor.app.csl,
                                 editor.docInfo.updated as Date,
-                                getDocumentTemplate(editor).documentStyles
+                                getDocumentTemplate(editor).documentStyles,
+                                options.svgMath ? {mathOutput: "svg"} : {}
                             )
                             exporter.progressCallback = exportProgress(doc)
                             exporter.init()