diff --git a/apps/client/src/services/link.ts b/apps/client/src/services/link.ts index 9af93b3135..a596e71366 100644 --- a/apps/client/src/services/link.ts +++ b/apps/client/src/services/link.ts @@ -467,28 +467,30 @@ function getReferenceLinkTitleSync(href: string) { } } -// TODO: Check why the event is not supported. -//@ts-ignore -$(document).on("click", "a", goToLink); -// TODO: Check why the event is not supported. -//@ts-ignore -$(document).on("auxclick", "a", goToLink); // to handle the middle button -// TODO: Check why the event is not supported. -//@ts-ignore -$(document).on("contextmenu", "a", linkContextMenu); -// TODO: Check why the event is not supported. -//@ts-ignore -$(document).on("dblclick", "a", goToLink); +if (glob.device !== "print") { + // TODO: Check why the event is not supported. + //@ts-ignore + $(document).on("click", "a", goToLink); + // TODO: Check why the event is not supported. + //@ts-ignore + $(document).on("auxclick", "a", goToLink); // to handle the middle button + // TODO: Check why the event is not supported. + //@ts-ignore + $(document).on("contextmenu", "a", linkContextMenu); + // TODO: Check why the event is not supported. + //@ts-ignore + $(document).on("dblclick", "a", goToLink); -$(document).on("mousedown", "a", (e) => { - if (e.which === 2) { - // prevent paste on middle click - // https://github.com/zadam/trilium/issues/2995 - // https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#preventing_default_actions - e.preventDefault(); - return false; - } -}); + $(document).on("mousedown", "a", (e) => { + if (e.which === 2) { + // prevent paste on middle click + // https://github.com/zadam/trilium/issues/2995 + // https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#preventing_default_actions + e.preventDefault(); + return false; + } + }); +} export default { getNotePathFromUrl, diff --git a/apps/client/src/widgets/collections/NoteList.tsx b/apps/client/src/widgets/collections/NoteList.tsx index 1d5a968106..04c03b0e8a 100644 --- a/apps/client/src/widgets/collections/NoteList.tsx +++ b/apps/client/src/widgets/collections/NoteList.tsx @@ -13,6 +13,7 @@ import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } f import { WebSocketMessage } from "@triliumnext/commons"; import froca from "../../services/froca"; import PresentationView from "./presentation"; +import { ListPrintView } from "./legacy/ListPrintView"; interface NoteListProps { note: FNote | null | undefined; @@ -103,7 +104,11 @@ export function CustomNoteList({ note, viewType, isEnabled: shouldEnable, notePa function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps) { switch (viewType) { case "list": - return ; + if (props.media !== "print") { + return ; + } else { + return ; + } case "grid": return ; case "geoMap": diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx index ef37b6685e..749036598c 100644 --- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx +++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx @@ -1,4 +1,4 @@ -import { useEffect, useMemo, useRef, useState } from "preact/hooks"; +import { useEffect, useRef, useState } from "preact/hooks"; import FNote from "../../../entities/fnote"; import Icon from "../../react/Icon"; import { ViewModeProps } from "../interface"; @@ -11,6 +11,7 @@ import tree from "../../../services/tree"; import link from "../../../services/link"; import { t } from "../../../services/i18n"; import attribute_renderer from "../../../services/attribute_renderer"; +import { filterChildNotes, useFilteredNoteIds } from "./utils"; export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) { const [ isExpanded ] = useNoteLabelBoolean(note, "expanded"); @@ -160,30 +161,15 @@ function NoteContent({ note, trim, noChildrenList, highlightedTokens }: { note: } function NoteChildren({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) { - const imageLinks = note.getRelations("imageLink"); const [ childNotes, setChildNotes ] = useState(); useEffect(() => { - note.getChildNotes().then(childNotes => { - const filteredChildNotes = childNotes.filter((childNote) => !imageLinks.find((rel) => rel.value === childNote.noteId)); - setChildNotes(filteredChildNotes); - }); + filterChildNotes(note).then(setChildNotes); }, [ note ]); return childNotes?.map(childNote => ) } -/** - * Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes. - */ -function useFilteredNoteIds(note: FNote, noteIds: string[]) { - return useMemo(() => { - const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : []; - const includedNoteIds = new Set(includedLinks.map((rel) => rel.value)); - return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden"); - }, noteIds); -} - function getNotePath(parentNote: FNote, childNote: FNote) { if (parentNote.type === "search") { // for search note parent, we want to display a non-search path diff --git a/apps/client/src/widgets/collections/legacy/ListPrintView.tsx b/apps/client/src/widgets/collections/legacy/ListPrintView.tsx new file mode 100644 index 0000000000..77a354d0db --- /dev/null +++ b/apps/client/src/widgets/collections/legacy/ListPrintView.tsx @@ -0,0 +1,110 @@ +import { useEffect, useLayoutEffect, useState } from "preact/hooks"; +import froca from "../../../services/froca"; +import type FNote from "../../../entities/fnote"; +import content_renderer from "../../../services/content_renderer"; +import type { ViewModeProps } from "../interface"; +import { filterChildNotes, useFilteredNoteIds } from "./utils"; + +interface NotesWithContent { + note: FNote; + contentEl: HTMLElement; +} + +export function ListPrintView({ note, noteIds: unfilteredNoteIds, onReady }: ViewModeProps<{}>) { + const noteIds = useFilteredNoteIds(note, unfilteredNoteIds); + const [ notesWithContent, setNotesWithContent ] = useState(); + + useLayoutEffect(() => { + const noteIdsSet = new Set(); + + froca.getNotes(noteIds).then(async (notes) => { + const notesWithContent: NotesWithContent[] = []; + + async function processNote(note: FNote, depth: number) { + const content = await content_renderer.getRenderedContent(note, { + trim: false, + noChildrenList: true + }); + + const contentEl = content.$renderedContent[0]; + + insertPageTitle(contentEl, note.title); + rewriteHeadings(contentEl, depth); + noteIdsSet.add(note.noteId); + notesWithContent.push({ note, contentEl }); + + if (note.hasChildren()) { + const filteredChildNotes = await filterChildNotes(note); + for (const childNote of filteredChildNotes) { + await processNote(childNote, depth + 1); + } + } + } + + for (const note of notes) { + await processNote(note, 1); + } + + // After all notes are processed, rewrite links + for (const { contentEl } of notesWithContent) { + rewriteLinks(contentEl, noteIdsSet); + } + + setNotesWithContent(notesWithContent); + }); + }, [noteIds]); + + useEffect(() => { + if (notesWithContent && onReady) { + onReady(); + } + }, [ notesWithContent, onReady ]); + + return ( +
+
+

{note.title}

+ + {notesWithContent?.map(({ note: childNote, contentEl }) => ( +
+ ))} +
+
+ ); +} + +function insertPageTitle(contentEl: HTMLElement, title: string) { + const pageTitleEl = document.createElement("h1"); + pageTitleEl.textContent = title; + contentEl.prepend(pageTitleEl); +} + +function rewriteHeadings(contentEl: HTMLElement, depth: number) { + const headings = contentEl.querySelectorAll("h1, h2, h3, h4, h5, h6"); + for (const headingEl of headings) { + const currentLevel = parseInt(headingEl.tagName.substring(1), 10); + const newLevel = Math.min(currentLevel + depth, 6); + const newHeadingEl = document.createElement(`h${newLevel}`); + newHeadingEl.innerHTML = headingEl.innerHTML; + headingEl.replaceWith(newHeadingEl); + } +} + +function rewriteLinks(contentEl: HTMLElement, noteIdsSet: Set) { + const linkEls = contentEl.querySelectorAll("a"); + for (const linkEl of linkEls) { + const href = linkEl.getAttribute("href"); + if (href && href.startsWith("#root/")) { + const noteId = href.split("/").at(-1); + + if (noteId && noteIdsSet.has(noteId)) { + linkEl.setAttribute("href", `#note-${noteId}`); + } else { + // Link to note not in the print view, remove link but keep text + const spanEl = document.createElement("span"); + spanEl.innerHTML = linkEl.innerHTML; + linkEl.replaceWith(spanEl); + } + } + } +} diff --git a/apps/client/src/widgets/collections/legacy/utils.ts b/apps/client/src/widgets/collections/legacy/utils.ts new file mode 100644 index 0000000000..6432ce1d2f --- /dev/null +++ b/apps/client/src/widgets/collections/legacy/utils.ts @@ -0,0 +1,20 @@ +import { useMemo } from "preact/hooks"; +import FNote from "../../../entities/fnote"; + +/** + * Filters the note IDs for the legacy view to filter out subnotes that are already included in the note content such as images, included notes. + */ +export function useFilteredNoteIds(note: FNote, noteIds: string[]) { + return useMemo(() => { + const includedLinks = note ? note.getRelations().filter((rel) => rel.name === "imageLink" || rel.name === "includeNoteLink") : []; + const includedNoteIds = new Set(includedLinks.map((rel) => rel.value)); + return noteIds.filter((noteId) => !includedNoteIds.has(noteId) && noteId !== "_hidden"); + }, [ note, noteIds ]); +} + +export async function filterChildNotes(note: FNote) { + const imageLinks = note.getRelations("imageLink"); + const imageLinkNoteIds = new Set(imageLinks.map(rel => rel.value)); + const childNotes = await note.getChildNotes(); + return childNotes.filter((childNote) => !imageLinkNoteIds.has(childNote.noteId)); +} diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx index cbd3bf406a..d7e344dd84 100644 --- a/apps/client/src/widgets/ribbon/NoteActions.tsx +++ b/apps/client/src/widgets/ribbon/NoteActions.tsx @@ -49,7 +49,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment(); const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(note.type); const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help"); - const isPrintable = ["text", "code"].includes(note.type) || (note.type === "book" && note.getLabelValue("viewType") === "presentation"); + const isPrintable = ["text", "code"].includes(note.type) || (note.type === "book" && ["presentation", "list"].includes(note.getLabelValue("viewType") ?? "")); const isElectron = getIsElectron(); const isMac = getIsMac(); const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap", "aiChat"].includes(note.type); diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html index c0cf16ba9d..35ae5862b6 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.html @@ -4,7 +4,6 @@
Screenshot of the note contextual menu indicating the “Export as PDF” option.
-

Printing

This feature allows printing of notes. It works on both the desktop client, but also on the web.

@@ -60,9 +59,9 @@ class="admonition note"> orientation, size. However, there are a few Attributes to adjust some of the settings:

    -
  • To print in landscape mode instead of portrait (useful for big diagrams +
  • To print in landscape mode instead of portrait (useful for big diagrams or slides), add #printLandscape.
    • -
  • By default, the resulting PDF will be in Letter format. It is possible +
  • By default, the resulting PDF will be in Letter format. It is possible to adjust it to another page size via the #printPageSize attribute, with one of the following values: A0, A1, A2, A3, A4, A5, A6, Legal, Letter, Tabloid, Ledger.
@@ -70,15 +69,26 @@ class="admonition note">

These options have no effect when used with the printing feature, since the user-defined settings are used instead.

+

Printing multiple notes

+

Since v0.100.0, it is possible to print more than one note at the time + by using Collections:

+
    +
  1. First create a collection.
    2. +
  2. Configure it to use List View.
    3. +
  3. Print the collection note normally.
    4. +
+

The resulting collection will contain all the children of the collection, + while maintaining the hierarchy.

Keyboard shortcut

It's possible to trigger both printing and export as PDF from the keyboard by going to Keyboard shortcuts in Options and assigning a key combination for:

    -
  • Print Active Note +
  • Print Active Note
    • -
  • Export Active Note as PDF +
  • Export Active Note as PDF

Constraints & limitations

@@ -86,24 +96,28 @@ class="admonition note"> supported when printing, in which case the Print and Export as PDF options will be disabled.

    -
  • For Code notes: +
  • For Code notes:
      -
    • Line numbers are not printed.
      • -
    • Syntax highlighting is enabled, however a default theme (Visual Studio) +
    • Line numbers are not printed.
      • +
    • Syntax highlighting is enabled, however a default theme (Visual Studio) is enforced.
    • -
  • For Collections: +
  • For Collections:
      -
    • Only Presentation is - currently supported.
      • -
    • We plan to add support for all the collection types at some point.
      • +
    • List View is + supported, allowing to print multiple notes at once while preserving hierarchy + (similar to a book).
      • +
    • Presentation is + also supported, where each slide/subnote is displayed.
      • +
    • The rest of the collections are not supported, but we plan to add support + for all the collection types at some point.
    • -
  • Using Custom app-wide CSS for +
  • Using Custom app-wide CSS for printing is not longer supported, due to a more stable but isolated mechanism.
      -
    • We plan to introduce a new mechanism specifically for a print CSS.
      • +
    • We plan to introduce a new mechanism specifically for a print CSS.
@@ -114,10 +128,10 @@ class="admonition note"> printing.

To do so:

    -
  • Create a CSS code note.
    • -
  • On the note being printed, apply the ~printCss relation to +
  • Create a CSS code note.
    • +
  • On the note being printed, apply the ~printCss relation to point to the newly created CSS code note.
    • -
  • To apply the CSS to multiple notes, consider using inheritable attributes or  +
  • To apply the CSS to multiple notes, consider using inheritable attributes or  Templates.
@@ -128,12 +142,13 @@ class="admonition note"> }

To remark:

    -
  • Multiple CSS notes can be add by using multiple ~printCss relations.
    • -
  • If the note pointing to the printCss doesn't have the right +
  • Multiple CSS notes can be add by using multiple ~printCss relations.
    • +
  • If the note pointing to the printCss doesn't have the right note type or mime type, it will be ignored.
    • -
  • If migrating from a previous version where Custom app-wide CSS, there's no need for @media print {  since - the style-sheet is used only for printing.
    • +
  • If migrating from a previous version where Custom app-wide CSS, there's no need for @media print {  since + the style-sheet is used only for printing.

Under the hood

Both printing and exporting as PDF use the same mechanism: a note is rendered diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/List View.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/List View.html index f3e4926b46..64c09e0241 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/List View.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Collections/List View.html @@ -12,9 +12,22 @@ as a single continuous document.

Interaction

    -
  • Each note can be expanded or collapsed by clicking on the arrow to the +
  • Each note can be expanded or collapsed by clicking on the arrow to the left of the title.
    • -
  • In the Ribbon, +
  • In the Ribbon, in the Collection tab there are options to expand and to collapse all notes easily.
    • +
+

Printing and exporting to PDF

+

Since v0.100.0, list collections can be printed or exported to PDF.

+

A printed list collection will print all the notes in the collection, + in the right order and preserving the full hierarchy.

+

If exported to PDF within the desktop application, there is additional + functionality:

+
    +
  • The table of contents of the PDF will reflect the structure of the notes.
    • +
  • Reference and inline links to other notes within the same hierarchy will + be functional (will jump to the corresponding page). If a link refers to + a note that is not in the printed hierarchy, it will be unlinked.
\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html index 393a9a60a0..27437786ff 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Right pane widget.html @@ -1,13 +1,12 @@
    -
  • doRender must not be overridden, instead doRenderBody() has +
  • doRender must not be overridden, instead doRenderBody() has to be overridden.
      -
    • doRenderBody can optionally be async.
      • +
    • doRenderBody can optionally be async.
    • -
  • parentWidget() must be set to “rightPane”.
    • -
  • widgetTitle() getter can optionally be overriden, otherwise +
  • parentWidget() must be set to “rightPane”.
    • +
  • widgetTitle() getter can optionally be overriden, otherwise the widget will be displayed as “Untitled widget”.
const template = `<div>Hi</div>`;
 
diff --git a/docs/Developer Guide/Developer Guide/Documentation.md b/docs/Developer Guide/Developer Guide/Documentation.md
index 93ee33d7a9..b8eca125b2 100644
--- a/docs/Developer Guide/Developer Guide/Documentation.md	
+++ b/docs/Developer Guide/Developer Guide/Documentation.md	
@@ -1,5 +1,5 @@
 # Documentation
-There are multiple types of documentation for Trilium:
+There are multiple types of documentation for Trilium:
 
 *   The _User Guide_ represents the user-facing documentation. This documentation can be browsed by users directly from within Trilium, by pressing F1.
 *   The _Developer's Guide_ represents a set of Markdown documents that present the internals of Trilium, for developers.
diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json
index 91af437e1d..7b77cb46aa 100644
--- a/docs/User Guide/!!!meta.json	
+++ b/docs/User Guide/!!!meta.json	
@@ -4135,6 +4135,13 @@
                                             "value": "printing-and-pdf-export",
                                             "isInheritable": false,
                                             "position": 110
+                                        },
+                                        {
+                                            "type": "relation",
+                                            "name": "internalLink",
+                                            "value": "mULW0Q3VojwY",
+                                            "isInheritable": false,
+                                            "position": 130
                                         }
                                     ],
                                     "format": "markdown",
@@ -10478,6 +10485,13 @@
                                     "value": "list",
                                     "isInheritable": false,
                                     "position": 30
+                                },
+                                {
+                                    "type": "relation",
+                                    "name": "internalLink",
+                                    "value": "NRnIZmSMc5sj",
+                                    "isInheritable": false,
+                                    "position": 40
                                 }
                             ],
                             "format": "markdown",
diff --git a/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md b/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md
index 21fbe12e68..083ad6ec78 100644
--- a/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md	
+++ b/docs/User Guide/User Guide/Basic Concepts and Features/Notes/Printing & Exporting as PDF.md	
@@ -49,6 +49,16 @@ When exporting to PDF, there are no customizable settings such as page orientati
 > [!NOTE]
 > These options have no effect when used with the printing feature, since the user-defined settings are used instead.
 
+## Printing multiple notes
+
+Since v0.100.0, it is possible to print more than one note at the time by using Collections:
+
+1.  First create a collection.
+2.  Configure it to use List View.
+3.  Print the collection note normally.
+
+The resulting collection will contain all the children of the collection, while maintaining the hierarchy.
+
 ## Keyboard shortcut
 
 It's possible to trigger both printing and export as PDF from the keyboard by going to _Keyboard shortcuts_ in Options and assigning a key combination for:
@@ -64,8 +74,9 @@ Not all Note Types 
     *   Line numbers are not printed.
     *   Syntax highlighting is enabled, however a default theme (Visual Studio) is enforced.
 *   For Collections:
-    *   Only Presentation is currently supported.
-    *   We plan to add support for all the collection types at some point.
+    *   List View is supported, allowing to print multiple notes at once while preserving hierarchy (similar to a book).
+    *   Presentation is also supported, where each slide/subnote is displayed.
+    *   The rest of the collections are not supported, but we plan to add support for all the collection types at some point.
 *   Using Custom app-wide CSS for printing is not longer supported, due to a more stable but isolated mechanism.
     *   We plan to introduce a new mechanism specifically for a print CSS.
 
diff --git a/docs/User Guide/User Guide/Collections/List View.md b/docs/User Guide/User Guide/Collections/List View.md
index 76fd158205..86cb59806e 100644
--- a/docs/User Guide/User Guide/Collections/List View.md	
+++ b/docs/User Guide/User Guide/Collections/List View.md	
@@ -8,4 +8,15 @@ In the example above, the "Node.js" note on the left panel contains several chil
 ## Interaction
 
 *   Each note can be expanded or collapsed by clicking on the arrow to the left of the title.
-*   In the Ribbon, in the _Collection_ tab there are options to expand and to collapse all notes easily.
\ No newline at end of file
+*   In the Ribbon, in the _Collection_ tab there are options to expand and to collapse all notes easily.
+
+## Printing and exporting to PDF
+
+Since v0.100.0, list collections can be [printed or exported to PDF](../Basic%20Concepts%20and%20Features/Notes/Printing%20%26%20Exporting%20as%20PDF.md).
+
+A printed list collection will print all the notes in the collection, in the right order and preserving the full hierarchy.
+
+If exported to PDF within the desktop application, there is additional functionality:
+
+*   The table of contents of the PDF will reflect the structure of the notes.
+*   Reference and inline links to other notes within the same hierarchy will be functional (will jump to the corresponding page). If a link refers to a note that is not in the printed hierarchy, it will be unlinked.
\ No newline at end of file