From 8446e98b21d462784be46c68bcdc426cf3954aea Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Sat, 18 Apr 2026 11:10:01 +0300 Subject: [PATCH] feat(text): add a copy button to bookmarks --- .../src/widgets/type_widgets/text/config.ts | 9 + .../User Guide/Note Types/Text.html | 333 +++++++++--------- .../User Guide/Note Types/Text/Anchors.html | 37 +- docs/User Guide/!!!meta.json | 10 +- .../User Guide/Note Types/Text/Anchors.md | 22 +- packages/ckeditor5/src/plugins.ts | 2 + .../ckeditor5/src/plugins/copy_anchor_link.ts | 50 +++ 7 files changed, 277 insertions(+), 186 deletions(-) create mode 100644 packages/ckeditor5/src/plugins/copy_anchor_link.ts diff --git a/apps/client/src/widgets/type_widgets/text/config.ts b/apps/client/src/widgets/type_widgets/text/config.ts index e4812156e4..c54dbc09c2 100644 --- a/apps/client/src/widgets/type_widgets/text/config.ts +++ b/apps/client/src/widgets/type_widgets/text/config.ts @@ -133,6 +133,15 @@ export async function buildConfig(opts: BuildEditorOptions): PromiseFore more information see Formatting toolbar.

Features and formatting

Here's a list of various features supported by text notes:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Dedicated articleFeature
General formatting - -
    -
  • Headings (section titles, paragraph)
    • -
  • Font size
    • -
  • Bold, italic, underline, strike-through
    • -
  • Superscript, subscript
    • -
  • Font color & background color
    • -
  • Remove formatting
    • -
-
Lists - -
    -
  • Bulleted lists
    • -
  • Numbered lists
    • -
  • To-do lists
    • -
-
Block quotes & admonitions - -
    -
  • Block quotes
    • -
  • Admonitions
    • -
-
Tables - -
    -
  • Basic tables
    • -
  • Merging cells
    • -
  • Styling tables and cells.
    • -
  • Table captions
    • -
-
Developer-specific formatting - -
    -
  • Inline code
    • -
  • Code blocks
    • -
  • Keyboard shortcuts
    • -
-
Footnotes - -
    -
  • Footnotes
    • -
-
Images - -
    -
  • Images
    • -
-
Links - -
    -
  • External links
    • -
  • Internal Trilium links
    • -
-
Include Note - -
    -
  • Include note
    • -
-
Insert buttons - -
    -
  • Symbols
    • -
  • Math Equations -
    • -
  • Mermaid diagrams
    • -
  • Horizontal ruler
    • -
  • Page break
    • -
-
Other features - - -
Premium features - - -
-

Read-Only vs. Editing Mode

-

Text notes are usually opened in edit mode. However, they may open in - read-only mode if the note is too big or the note is explicitly marked - as read-only. For more information, see Read-Only Notes.

-

Keyboard shortcuts

-

There are numerous keyboard shortcuts to format the text without having - to use the mouse. For a reference of all the key combinations, see  - Keyboard Shortcuts. In addition, see Markdown-like formatting as an alternative - to the keyboard shortcuts.

-

Technical details

-

For the text editing functionality, Trilium uses a commercial product - (with an open-source base) called CKEditor. - This brings the benefit of having a powerful WYSIWYG (What You See Is What - You Get) editor.

\ No newline at end of file +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Dedicated articleFeature
General formatting + +
    +
  • Headings (section titles, paragraph)
    • +
  • Font size
    • +
  • Bold, italic, underline, strike-through
    • +
  • Superscript, subscript
    • +
  • Font color & background color
    • +
  • Remove formatting
    • +
+
Lists + +
    +
  • Bulleted lists
    • +
  • Numbered lists
    • +
  • To-do lists
    • +
+
Block quotes & admonitions + +
    +
  • Block quotes
    • +
  • Admonitions
    • +
+
Tables + +
    +
  • Basic tables
    • +
  • Merging cells
    • +
  • Styling tables and cells.
    • +
  • Table captions
    • +
+
Developer-specific formatting + +
    +
  • Inline code
    • +
  • Code blocks
    • +
  • Keyboard shortcuts
    • +
+
Footnotes + +
    +
  • Footnotes
    • +
+
Images + +
    +
  • Images
    • +
+
Links + +
    +
  • External links
    • +
  • Internal Trilium links
    • +
+
Include Note + +
    +
  • Include note
    • +
+
Insert buttons + +
    +
  • Symbols
    • +
  • Math Equations +
    • +
  • Mermaid diagrams
    • +
  • Horizontal ruler
    • +
  • Page break
    • +
+
Other features + + +
Premium features + + +
+
+

Read-Only vs. Editing Mode

+

Text notes are usually opened in edit mode. However, they may open in + read-only mode if the note is too big or the note is explicitly marked + as read-only. For more information, see Read-Only Notes.

+

Keyboard shortcuts

+

There are numerous keyboard shortcuts to format the text without having + to use the mouse. For a reference of all the key combinations, see  + Keyboard Shortcuts. In addition, see Markdown-like formatting as an alternative + to the keyboard shortcuts.

+

Technical details

+

For the text editing functionality, Trilium uses a commercial product + (with an open-source base) called CKEditor. + This brings the benefit of having a powerful WYSIWYG (What You See Is What + You Get) editor.

\ No newline at end of file diff --git a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Anchors.html b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Anchors.html index d2001e8819..80dbdc9a93 100644 --- a/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Anchors.html +++ b/apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Anchors.html @@ -38,9 +38,15 @@

Trilium v0.103.0 introduces cross-note Anchors, which makes it possible to create Internal (reference) links which point to a specific anchor in that document.

-

To do so:

+

Compatibility with documents from previous versions

+

For notes created prior to Trilium v0.103.0, you might notice that the + Anchors might not be identified. This limitation is intentional in order + not to have to re-process all the notes, looking for anchors.

+

To fix this, simply go that note and make any change (e.g. inserting a + space), this will trigger the recalculation of the links.

+

Linking to anchors through the Add link dialog

    -
  1. First, create a anchor in the target note using the same process as described +
  2. Create an anchor in the target note using the same process as described above.
  3. In another note, press Ctrl+L to insert an internal link. Select the target note containing Anchors.
    4. @@ -50,13 +56,24 @@

Clicking on a reference link pointing to a anchor will automatically scroll to the desired section.

+

Linking to anchors through the bookmark toolbar

+
    +
  1. +

    Create an anchor in the target note using the same process as described + above.

    +
    2. +
  2. +

    Click on the anchor to reveal the anchor's floating toolbar.

    +
    3. +
  3. +

    Click on the Copy anchor reference link button.

    +
    4. +
  4. +

    Go to the note where to insert the link and press Ctrl+V.

    +
    5. +
\ No newline at end of file diff --git a/docs/User Guide/!!!meta.json b/docs/User Guide/!!!meta.json index 62827b9714..e7dadd05b5 100644 --- a/docs/User Guide/!!!meta.json +++ b/docs/User Guide/!!!meta.json @@ -9016,7 +9016,7 @@ "dEHYtoWWi8ct" ], "title": "Other features", - "notePosition": 180, + "notePosition": 190, "prefix": null, "isExpanded": false, "type": "text", @@ -9136,7 +9136,7 @@ "gLt3vA97tMcp" ], "title": "Premium features", - "notePosition": 190, + "notePosition": 200, "prefix": null, "isExpanded": false, "type": "text", @@ -9459,7 +9459,7 @@ "oBo3iHIZnbG2" ], "title": "Spell Check", - "notePosition": 200, + "notePosition": 210, "prefix": null, "isExpanded": false, "type": "text", @@ -9494,7 +9494,7 @@ "BFvAtE74rbP6" ], "title": "Table of contents", - "notePosition": 210, + "notePosition": 220, "prefix": null, "isExpanded": false, "type": "text", @@ -9566,7 +9566,7 @@ "NdowYOC1GFKS" ], "title": "Tables", - "notePosition": 220, + "notePosition": 230, "prefix": null, "isExpanded": false, "type": "text", diff --git a/docs/User Guide/User Guide/Note Types/Text/Anchors.md b/docs/User Guide/User Guide/Note Types/Text/Anchors.md index 9b1e4e5b60..00667b7f1c 100644 --- a/docs/User Guide/User Guide/Note Types/Text/Anchors.md +++ b/docs/User Guide/User Guide/Note Types/Text/Anchors.md @@ -20,17 +20,27 @@ This feature was introduced in TriliumNext v0.94.0 and augmented in v0.130.0 to Trilium v0.103.0 introduces cross-note Anchors, which makes it possible to create Internal (reference) links which point to a specific anchor in that document. -To do so: +### Compatibility with documents from previous versions -1. First, create a anchor in the target note using the same process as described above. +For notes created prior to Trilium v0.103.0, you might notice that the Anchors might not be identified. This limitation is intentional in order not to have to re-process all the notes, looking for anchors. + +To fix this, simply go that note and make any change (e.g. inserting a space), this will trigger the recalculation of the links. + +### Linking to anchors through the _Add link_ dialog + +1. Create an anchor in the target note using the same process as described above. 2. In another note, press Ctrl+L to insert an internal link. Select the target note containing Anchors. 3. If the target note contains Anchors, a section will appear underneath the note selector with the list of Anchors. 4. Add the link normally. Clicking on a reference link pointing to a anchor will automatically scroll to the desired section. +### Linking to anchors through the bookmark toolbar + +1. Create an anchor in the target note using the same process as described above. +2. Click on the anchor to reveal the anchor's floating toolbar. +3. Click on the _Copy anchor reference link_ button. +4. Go to the note where to insert the link and press Ctrl+V. + > [!NOTE] -> For notes created prior to Trilium v0.103.0, you might notice that the Anchors might not be identified: -> -> * To fix this, simply go that note and make any change (e.g. inserting a space), this will trigger the recalculation of the links. -> * This limitation is intentional in order not to have to re-process all the notes, looking for anchors. \ No newline at end of file +> Use this method only to insert Internal (reference) links between two documents. To link to an anchor on the same note, use the _Insert link_ dialog (Ctrl+K) and select the _Anchors_ item instead. \ No newline at end of file diff --git a/packages/ckeditor5/src/plugins.ts b/packages/ckeditor5/src/plugins.ts index 8407bd7026..939a284ea7 100644 --- a/packages/ckeditor5/src/plugins.ts +++ b/packages/ckeditor5/src/plugins.ts @@ -21,6 +21,7 @@ import { Mermaid } from "@triliumnext/ckeditor5-mermaid"; import { Admonition } from "@triliumnext/ckeditor5-admonition"; import { Footnotes } from "@triliumnext/ckeditor5-footnotes"; import { Math, AutoformatMath } from "@triliumnext/ckeditor5-math"; +import CopyAnchorLinkButton from "./plugins/copy_anchor_link.js"; // import "@triliumnext/ckeditor5-mermaid/index.css"; // import "@triliumnext/ckeditor5-admonition/index.css"; @@ -63,6 +64,7 @@ const TRILIUM_PLUGINS: typeof Plugin[] = [ AdmonitionToolbar, IncludeNoteBoxSizeDropdown, IncludeNoteToolbar, + CopyAnchorLinkButton, ]; /** diff --git a/packages/ckeditor5/src/plugins/copy_anchor_link.ts b/packages/ckeditor5/src/plugins/copy_anchor_link.ts new file mode 100644 index 0000000000..60dc8fa8b6 --- /dev/null +++ b/packages/ckeditor5/src/plugins/copy_anchor_link.ts @@ -0,0 +1,50 @@ +import { ButtonView, Plugin, isWidget } from "ckeditor5"; +import copyIcon from "../icons/copy.svg?raw"; + +/** + * Adds a "Copy anchor link" button to the bookmark/anchor widget toolbar. + * When clicked, copies a reference link href (e.g. `#root/noteId?bookmark=anchorName`) + * to the clipboard. + */ +export default class CopyAnchorLinkButton extends Plugin { + + public init() { + const editor = this.editor; + + editor.ui.componentFactory.add("copyAnchorLink", (locale) => { + const button = new ButtonView(locale); + const t = locale.t; + + button.set({ + label: t("Copy anchor reference link"), + icon: copyIcon, + tooltip: true + }); + + this.listenTo(button, "execute", () => { + const selection = editor.model.document.selection; + const selectedElement = selection.getSelectedElement(); + + if (selectedElement?.name === "bookmark") { + const bookmarkId = selectedElement.getAttribute("bookmarkId") as string; + const noteId = glob.getActiveContextNote()?.noteId; + + if (noteId && bookmarkId) { + const href = `#root/${noteId}?bookmark=${encodeURIComponent(bookmarkId)}`; + const title = glob.getReferenceLinkTitleSync(href); + const html = `${title}`; + navigator.clipboard.write([ + new ClipboardItem({ + "text/html": new Blob([html], { type: "text/html" }), + "text/plain": new Blob([href], { type: "text/plain" }) + }) + ]); + } + } + }); + + return button; + }); + } + +}