Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-06 18:36:39 +02:00
Code Issues Packages Projects Releases Activity

feat(text): add a copy button to bookmarks

Browse Source
This commit is contained in:
Elian Doran
2026-04-18 11:10:01 +03:00
parent 96ddb79d06
commit 8446e98b21
7 changed files with 277 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/client/src/widgets/type_widgets/text/config.ts
View File

@@ -133,6 +133,15 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
defaultProtocol: "https://",
allowedProtocols: ALLOWED_PROTOCOLS
},
bookmark: {
toolbar: [
"bookmarkPreview",
"|",
"editBookmark",
"copyAnchorLink",
"removeBookmark"
]
},
emoji: {
definitionsUrl: window.glob.isDev
? new URL(import.meta.url).origin + emojiDefinitionsUrl

333
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text.html generated vendored
View File

@@ -20,168 +20,171 @@
<p>Fore more information see&nbsp;<a class="reference-link" href="#root/_help_nRhnJkTT8cPs">Formatting toolbar</a>.</p>
<h2>Features and formatting</h2>
<p>Here's a list of various features supported by text notes:</p>
<table>
<thead>
<tr>
<th>Dedicated article</th>
<th>Feature</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="reference-link" href="#root/_help_Gr6xFaF6ioJ5">General formatting</a>
</td>
<td>
<ul>
<li>Headings (section titles, paragraph)</li>
<li>Font size</li>
<li>Bold, italic, underline, strike-through</li>
<li>Superscript, subscript</li>
<li>Font color &amp; background color</li>
<li>Remove formatting</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_S6Xx8QIWTV66">Lists</a>
</td>
<td>
<ul>
<li>Bulleted lists</li>
<li>Numbered lists</li>
<li>To-do lists</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NwBbFdNZ9h7O">Block quotes &amp; admonitions</a>
</td>
<td>
<ul>
<li>Block quotes</li>
<li>Admonitions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NdowYOC1GFKS">Tables</a>
</td>
<td>
<ul>
<li>Basic tables</li>
<li>Merging cells</li>
<li>Styling tables and cells.</li>
<li>Table captions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>
</td>
<td>
<ul>
<li>Inline code</li>
<li>Code blocks</li>
<li>Keyboard shortcuts</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_AgjCISero73a">Footnotes</a>
</td>
<td>
<ul>
<li>Footnotes</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_mT0HEkOsz6i1">Images</a>
</td>
<td>
<ul>
<li>Images</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_QEAPj01N5f7w">Links</a>
</td>
<td>
<ul>
<li>External links</li>
<li>Internal Trilium links</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
</td>
<td>
<ul>
<li>Include note</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>
</td>
<td>
<ul>
<li>Symbols</li>
<li><a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>
</li>
<li>Mermaid diagrams</li>
<li>Horizontal ruler</li>
<li>Page break</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_dEHYtoWWi8ct">Other features</a>
</td>
<td>
<ul>
<li>Indentation
<ul>
<li>Markdown import</li>
</ul>
</li>
<li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_gLt3vA97tMcp">Premium features</a>
</td>
<td>
<ul>
<li><a class="reference-link" href="#root/_help_ZlN4nump6EbW">Slash Commands</a>
</li>
<li><a class="reference-link" href="#root/_help_KC1HB96bqqHX">Templates</a>
</li>
<li><a class="reference-link" href="#root/_help_5wZallV2Qo1t">Format Painter</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<h2>Read-Only vs. Editing Mode</h2>
<p>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&nbsp;<a class="reference-link"
href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
<h2>Keyboard shortcuts</h2>
<p>There are numerous keyboard shortcuts to format the text without having
to use the mouse. For a reference of all the key combinations, see&nbsp;
<a
class="reference-link" href="#root/_help_A9Oc6YKKc65v">Keyboard Shortcuts</a>. In addition, see&nbsp;<a class="reference-link"
href="#root/_help_QrtTYPmdd1qq">Markdown-like formatting</a>&nbsp;as an alternative
to the keyboard shortcuts.</p>
<h2>Technical details</h2>
<p>For the text editing functionality, Trilium uses a commercial product
(with an open-source base) called&nbsp;<a class="reference-link" href="#root/_help_MI26XDLSAlCD">CKEditor</a>.
This brings the benefit of having a powerful WYSIWYG (What You See Is What
You Get) editor.</p>
<figure
class="table">
<table>
<thead>
<tr>
<th>Dedicated article</th>
<th>Feature</th>
</tr>
</thead>
<tbody>
<tr>
<td><a class="reference-link" href="#root/_help_Gr6xFaF6ioJ5">General formatting</a>
</td>
<td>
<ul>
<li>Headings (section titles, paragraph)</li>
<li>Font size</li>
<li>Bold, italic, underline, strike-through</li>
<li>Superscript, subscript</li>
<li>Font color &amp; background color</li>
<li>Remove formatting</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_S6Xx8QIWTV66">Lists</a>
</td>
<td>
<ul>
<li>Bulleted lists</li>
<li>Numbered lists</li>
<li>To-do lists</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NwBbFdNZ9h7O">Block quotes &amp; admonitions</a>
</td>
<td>
<ul>
<li>Block quotes</li>
<li>Admonitions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_NdowYOC1GFKS">Tables</a>
</td>
<td>
<ul>
<li>Basic tables</li>
<li>Merging cells</li>
<li>Styling tables and cells.</li>
<li>Table captions</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_UYuUB1ZekNQU">Developer-specific formatting</a>
</td>
<td>
<ul>
<li>Inline code</li>
<li>Code blocks</li>
<li>Keyboard shortcuts</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_AgjCISero73a">Footnotes</a>
</td>
<td>
<ul>
<li>Footnotes</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_mT0HEkOsz6i1">Images</a>
</td>
<td>
<ul>
<li>Images</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_QEAPj01N5f7w">Links</a>
</td>
<td>
<ul>
<li>External links</li>
<li>Internal Trilium links</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_nBAXQFj20hS1">Include Note</a>
</td>
<td>
<ul>
<li>Include note</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_CohkqWQC1iBv">Insert buttons</a>
</td>
<td>
<ul>
<li>Symbols</li>
<li><a class="reference-link" href="#root/_help_YfYAtQBcfo5V">Math Equations</a>
</li>
<li>Mermaid diagrams</li>
<li>Horizontal ruler</li>
<li>Page break</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_dEHYtoWWi8ct">Other features</a>
</td>
<td>
<ul>
<li>Indentation
<ul>
<li>Markdown import</li>
</ul>
</li>
<li><a class="reference-link" href="#root/_help_2x0ZAX9ePtzV">Cut to subnote</a>
</li>
</ul>
</td>
</tr>
<tr>
<td><a class="reference-link" href="#root/_help_gLt3vA97tMcp">Premium features</a>
</td>
<td>
<ul>
<li><a class="reference-link" href="#root/_help_ZlN4nump6EbW">Slash Commands</a>
</li>
<li><a class="reference-link" href="#root/_help_KC1HB96bqqHX">Templates</a>
</li>
<li><a class="reference-link" href="#root/_help_5wZallV2Qo1t">Format Painter</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</figure>
<h2>Read-Only vs. Editing Mode</h2>
<p>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&nbsp;<a class="reference-link"
href="#root/_help_CoFPLs3dRlXc">Read-Only Notes</a>.</p>
<h2>Keyboard shortcuts</h2>
<p>There are numerous keyboard shortcuts to format the text without having
to use the mouse. For a reference of all the key combinations, see&nbsp;
<a
class="reference-link" href="#root/_help_A9Oc6YKKc65v">Keyboard Shortcuts</a>. In addition, see&nbsp;<a class="reference-link"
href="#root/_help_QrtTYPmdd1qq">Markdown-like formatting</a>&nbsp;as an alternative
to the keyboard shortcuts.</p>
<h2>Technical details</h2>
<p>For the text editing functionality, Trilium uses a commercial product
(with an open-source base) called&nbsp;<a class="reference-link" href="#root/_help_MI26XDLSAlCD">CKEditor</a>.
This brings the benefit of having a powerful WYSIWYG (What You See Is What
You Get) editor.</p>

37
apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Text/Anchors.html generated vendored
View File

@@ -38,9 +38,15 @@
<p>Trilium v0.103.0 introduces cross-note Anchors, which makes it possible
to create&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/QEAPj01N5f7w/_help_hrZ1D00cLbal">Internal (reference) links</a>&nbsp;which
point to a specific anchor in that document.</p>
<p>To do so:</p>
<h3>Compatibility with documents from previous versions</h3>
<p>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.</p>
<p>To fix this, simply go that note and make any change (e.g. inserting a
space), this will trigger the recalculation of the links.</p>
<h3>Linking to anchors through the <em>Add link</em> dialog</h3>
<ol>
<li>First, create a anchor in the target note using the same process as described
<li>Create an anchor in the target note using the same process as described
above.</li>
<li>In another note, press <kbd>Ctrl</kbd>+<kbd>L</kbd> to insert an internal
link. Select the target note containing Anchors.</li>
@@ -50,13 +56,24 @@
</ol>
<p>Clicking on a reference link pointing to a anchor will automatically scroll
to the desired section.</p>
<h3>Linking to anchors through the bookmark toolbar</h3>
<ol>
<li>
<p>Create an anchor in the target note using the same process as described
above.</p>
</li>
<li>
<p>Click on the anchor to reveal the anchor's floating toolbar.</p>
</li>
<li>
<p>Click on the <em>Copy anchor reference link</em> button.</p>
</li>
<li>
<p>Go to the note where to insert the link and press <kbd>Ctrl</kbd>+<kbd>V</kbd>.</p>
</li>
</ol>
<aside class="admonition note">
<p>For notes created prior to Trilium v0.103.0, you might notice that the
Anchors might not be identified:</p>
<ul>
<li>To fix this, simply go that note and make any change (e.g. inserting a
space), this will trigger the recalculation of the links.</li>
<li>This limitation is intentional in order not to have to re-process all
the notes, looking for anchors.</li>
</ul>
<p>Use this method only to insert&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/QEAPj01N5f7w/_help_hrZ1D00cLbal">Internal (reference) links</a>&nbsp;between
two documents. To link to an anchor on the same note, use the <em>Insert link</em> dialog
(<kbd>Ctrl</kbd>+<kbd>K</kbd>) and select the <em>Anchors</em> item instead.</p>
</aside>

10
docs/User Guide/!!!meta.json vendored
View File

@@ -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",

22
docs/User Guide/User Guide/Note Types/Text/Anchors.md vendored
View File

@@ -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 <a class="reference-link" href="Links/Internal%20(reference)%20links.md">Internal (reference) links</a> 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 <kbd>Ctrl</kbd>+<kbd>L</kbd> 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 <kbd>Ctrl</kbd>+<kbd>V</kbd>.
> [!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.
> Use this method only to insert <a class="reference-link" href="Links/Internal%20(reference)%20links.md">Internal (reference) links</a> between two documents. To link to an anchor on the same note, use the _Insert link_ dialog (<kbd>Ctrl</kbd>+<kbd>K</kbd>) and select the _Anchors_ item instead.

2
packages/ckeditor5/src/plugins.ts
View File

@@ -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,
];
/**

50
packages/ckeditor5/src/plugins/copy_anchor_link.ts Normal file
View File

@@ -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 = `<a class="reference-link" href="${href}">${title}</a>`;
navigator.clipboard.write([
new ClipboardItem({
"text/html": new Blob([html], { type: "text/html" }),
"text/plain": new Blob([href], { type: "text/plain" })
})
]);
}
}
});
return button;
});
}
}