Merge pull request #1091 from TriliumNext/feature/different_printing_mechanism

Export as PDF

Author: eliandoran

bin/copy-dist.ts

@@ -81,7 +81,6 @@ const copy = async () => {
         "node_modules/mermaid/dist/",
         "node_modules/jquery/dist/",
         "node_modules/jquery-hotkeys/",
-        "node_modules/print-this/",
         "node_modules/split.js/dist/",
         "node_modules/panzoom/dist/",
         "node_modules/i18next/",

package-lock.json

@@ -123,7 +123,6 @@
     "normalize-strings": "1.1.1",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "print-this": "2.0.0",
     "rand-token": "1.0.1",
     "react": "18.3.1",
     "react-dom": "18.3.1",

package.json

@@ -81,6 +81,10 @@ export type CommandMappings = {
     showOptions: CommandData & {
         section: string;
     };
+    showExportDialog: CommandData & {
+        notePath: string;
+        defaultType: "single";
+    };
     showDeleteNotesDialog: CommandData & {
         branchIdsToDelete: string[];
         callback: (value: ResolveOptions) => void;

src/public/app/components/app_context.ts

@@ -51,10 +51,6 @@ const RELATION_MAP: Library = {
     css: ["stylesheets/relation_map.css"]
 };
 
-const PRINT_THIS: Library = {
-    js: ["node_modules/print-this/printThis.js"]
-};
-
 const CALENDAR_WIDGET: Library = {
     css: ["stylesheets/calendar.css"]
 };
@@ -193,7 +189,6 @@ export default {
     CODE_MIRROR,
     ESLINT,
     RELATION_MAP,
-    PRINT_THIS,
     CALENDAR_WIDGET,
     KATEX,
     WHEEL_ZOOM,

src/public/app/services/library_loader.ts

@@ -5,8 +5,15 @@ import dialogService from "../../services/dialog.js";
 import server from "../../services/server.js";
 import toastService from "../../services/toast.js";
 import ws from "../../services/ws.js";
-import appContext from "../../components/app_context.js";
+import appContext, { type EventData } from "../../components/app_context.js";
 import { t } from "../../services/i18n.js";
+import type FNote from "../../entities/fnote.js";
+import type { FAttachmentRow } from "../../entities/fattachment.js";
+
+// TODO: Deduplicate with server
+interface ConvertToAttachmentResponse {
+    attachment: FAttachmentRow;
+}
 
 const TPL = `
 <div class="dropdown note-actions">
@@ -52,8 +59,12 @@ const TPL = `
         </li>
 
         <li data-trigger-command="printActiveNote" class="dropdown-item print-active-note-button">
-            <span class="bx bx-printer"></span> ${t("note_actions.print_note")}<kbd data-command="printActiveNote"></kbd></li>
+            <span class="bx bx-printer"></span> ${t("note_actions.print_note")}<kbd data-command="printActiveNote"></kbd>
+        </li>
 
+        <li data-trigger-command="exportAsPdf" class="dropdown-item export-as-pdf-button">
+            <span class="bx bxs-file-pdf"></span> ${t("note_actions.print_pdf")}<kbd data-command="exportAsPdf"></kbd>
+        </li>
 
         <div class="dropdown-divider"></div>
 
@@ -100,25 +111,45 @@ const TPL = `
 </div>`;
 
 export default class NoteActionsWidget extends NoteContextAwareWidget {
+
+    private $convertNoteIntoAttachmentButton!: JQuery<HTMLElement>;
+    private $findInTextButton!: JQuery<HTMLElement>;
+    private $printActiveNoteButton!: JQuery<HTMLElement>;
+    private $exportAsPdfButton!: JQuery<HTMLElement>;
+    private $showSourceButton!: JQuery<HTMLElement>;
+    private $showAttachmentsButton!: JQuery<HTMLElement>;
+    private $renderNoteButton!: JQuery<HTMLElement>;
+    private $saveRevisionButton!: JQuery<HTMLElement>;
+    private $exportNoteButton!: JQuery<HTMLElement>;
+    private $importNoteButton!: JQuery<HTMLElement>;
+    private $openNoteExternallyButton!: JQuery<HTMLElement>;
+    private $openNoteCustomButton!: JQuery<HTMLElement>;
+    private $deleteNoteButton!: JQuery<HTMLElement>;
+
     isEnabled() {
         return this.note?.type !== "launcher";
     }
 
     doRender() {
         this.$widget = $(TPL);
-        this.$widget.on("show.bs.dropdown", () => this.refreshVisibility(this.note));
+        this.$widget.on("show.bs.dropdown", () => {
+            if (this.note) {
+                this.refreshVisibility(this.note);
+            }
+        });
 
         this.$convertNoteIntoAttachmentButton = this.$widget.find("[data-trigger-command='convertNoteIntoAttachment']");
         this.$findInTextButton = this.$widget.find(".find-in-text-button");
         this.$printActiveNoteButton = this.$widget.find(".print-active-note-button");
+        this.$exportAsPdfButton = this.$widget.find(".export-as-pdf-button");
         this.$showSourceButton = this.$widget.find(".show-source-button");
         this.$showAttachmentsButton = this.$widget.find(".show-attachments-button");
         this.$renderNoteButton = this.$widget.find(".render-note-button");
         this.$saveRevisionButton = this.$widget.find(".save-revision-button");
 
         this.$exportNoteButton = this.$widget.find(".export-note-button");
         this.$exportNoteButton.on("click", () => {
-            if (this.$exportNoteButton.hasClass("disabled")) {
+            if (this.$exportNoteButton.hasClass("disabled") || !this.noteContext?.notePath) {
                 return;
             }
 
@@ -129,7 +160,11 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         });
 
         this.$importNoteButton = this.$widget.find(".import-files-button");
-        this.$importNoteButton.on("click", () => this.triggerCommand("showImportDialog", { noteId: this.noteId }));
+        this.$importNoteButton.on("click", () => {
+            if (this.noteId) {
+                this.triggerCommand("showImportDialog", { noteId: this.noteId });
+            }
+        });
 
         this.$widget.on("click", ".dropdown-item", () => this.$widget.find("[data-bs-toggle='dropdown']").dropdown("toggle"));
 
@@ -138,15 +173,15 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
 
         this.$deleteNoteButton = this.$widget.find(".delete-note-button");
         this.$deleteNoteButton.on("click", () => {
-            if (this.note.noteId === "root") {
+            if (!this.note || this.note.noteId === "root") {
                 return;
             }
 
             branchService.deleteNotes([this.note.getParentBranches()[0].branchId], true);
         });
     }
 
-    async refreshVisibility(note) {
+    async refreshVisibility(note: FNote) {
         const isInOptions = note.noteId.startsWith("_options");
 
         this.$convertNoteIntoAttachmentButton.toggle(note.isEligibleForConversionToAttachment());
@@ -156,7 +191,10 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         this.toggleDisabled(this.$showAttachmentsButton, !isInOptions);
         this.toggleDisabled(this.$showSourceButton, ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "geoMap"].includes(note.type));
 
-        this.toggleDisabled(this.$printActiveNoteButton, ["text", "code"].includes(note.type));
+        const canPrint = ["text", "code"].includes(note.type);
+        this.toggleDisabled(this.$printActiveNoteButton, canPrint);
+        this.toggleDisabled(this.$exportAsPdfButton, canPrint);
+        this.$exportAsPdfButton.toggleClass("hidden-ext", !utils.isElectron());
 
         this.$renderNoteButton.toggle(note.type === "render");
 
@@ -177,11 +215,11 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
     }
 
     async convertNoteIntoAttachmentCommand() {
-        if (!(await dialogService.confirm(t("note_actions.convert_into_attachment_prompt", { title: this.note.title })))) {
+        if (!this.note || !(await dialogService.confirm(t("note_actions.convert_into_attachment_prompt", { title: this.note.title })))) {
             return;
         }
 
-        const { attachment: newAttachment } = await server.post(`notes/${this.noteId}/convert-to-attachment`);
+        const { attachment: newAttachment } = await server.post<ConvertToAttachmentResponse>(`notes/${this.noteId}/convert-to-attachment`);
 
         if (!newAttachment) {
             toastService.showMessage(t("note_actions.convert_into_attachment_failed", { title: this.note.title }));
@@ -198,15 +236,15 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         });
     }
 
-    toggleDisabled($el, enable) {
+    toggleDisabled($el: JQuery<HTMLElement>, enable: boolean) {
         if (enable) {
             $el.removeAttr("disabled");
         } else {
             $el.attr("disabled", "disabled");
         }
     }
 
-    entitiesReloadedEvent({ loadResults }) {
+    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isNoteReloaded(this.noteId)) {
             this.refresh();
         }

src/public/app/widgets/buttons/note_actions.js src/public/app/widgets/buttons/note_actions.ts

@@ -32,6 +32,7 @@ import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js";
 import MindMapWidget from "./type_widgets/mind_map.js";
 import { getStylesheetUrl, isSyntaxHighlightEnabled } from "../services/syntax_highlight.js";
 import GeoMapTypeWidget from "./type_widgets/geo_map.js";
+import utils from "../services/utils.js";
 
 const TPL = `
 <div class="note-detail">
@@ -249,45 +250,18 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             return;
         }
 
-        await libraryLoader.requireLibrary(libraryLoader.PRINT_THIS);
-
-        let $promotedAttributes = $("");
-
-        if (this.note.getPromotedDefinitionAttributes().length > 0) {
-            $promotedAttributes = (await attributeRenderer.renderNormalAttributes(this.note)).$renderedAttributes;
-        }
+        window.print();
+    }
 
-        const { assetPath } = window.glob;
-        const cssToLoad = [
-            `${assetPath}/node_modules/codemirror/lib/codemirror.css`,
-            `${assetPath}/libraries/ckeditor/ckeditor-content.css`,
-            `${assetPath}/node_modules/bootstrap/dist/css/bootstrap.min.css`,
-            `${assetPath}/node_modules/katex/dist/katex.min.css`,
-            `${assetPath}/stylesheets/print.css`,
-            `${assetPath}/stylesheets/relation_map.css`,
-            `${assetPath}/stylesheets/ckeditor-theme.css`
-        ];
-
-        if (isSyntaxHighlightEnabled()) {
-            cssToLoad.push(getStylesheetUrl("default:vs"));
+    async exportAsPdfEvent() {
+        if (!this.noteContext.isActive()) {
+            return;
         }
 
-        this.$widget.find(".note-detail-printable:visible").printThis({
-            header: $("<div>").append($("<h2>").text(this.note.title)).append($promotedAttributes).prop("outerHTML"),
-
-            footer: `
-<script src="${assetPath}/node_modules/katex/dist/katex.min.js"></script>
-<script src="${assetPath}/node_modules/katex/dist/contrib/mhchem.min.js"></script>
-<script src="${assetPath}/node_modules/katex/dist/contrib/auto-render.min.js"></script>
-<script>
-    document.body.className += ' ck-content printed-content';
-
-    renderMathInElement(document.body, {trust: true});
-</script>
-`,
-            importCSS: false,
-            loadCSS: cssToLoad,
-            debug: true
+        const { ipcRenderer } = utils.dynamicRequire("electron");
+        ipcRenderer.send("export-as-pdf", {
+            title: this.note.title,
+            landscape: this.note.hasAttribute("label", "printLandscape")
         });
     }