🪄 Trilium Magic Toolbox (Trilium 魔法工具箱)

Turn your Trilium into a lightweight OS, and your scripts into floating Apps. 将你的 Trilium 变成一个轻量级操作系统，让脚本像“小程序”一样运行。

---

📖 Background / 起因

With the removal of the custom toolbar in the new Trilium UI, I found myself struggling to find a home for my custom scripts. Crowding the sidebar with too many launcher buttons not only ruins the aesthetic but also disrupts the workflow.

This led me to discover a powerful architectural pattern: Launcher + Global Widget + Backend API. This approach allows me to manage my "cheats" and extensions much better. I found this idea fascinating and decided to open source it, hoping to inspire others or perhaps catch the attention of the Trilium maintainers for potential native integration in the future.

起因是 Trilium 新版 UI 移除了原有的工具栏，使得我不得不寻找兼容的方式来重写我的小组件。而侧边栏的按钮数量终归有限，太多的按钮堆积在一起非常影响工作心情。

于是我发现了这种 Launcher + Global Widget + Backend API 的形式。它能将我的加强“外挂”进行更好的管理。我觉得这种思路非常有意思，决定开源出来。也希望仓库主人能注意到这样的一种思路，或许有一天可以集成进入原生支持。

---

💡 The Philosophy / 设计理念

This architecture transforms my custom functions into "Mini-programs" that float above Trilium. They can run independently while retaining the ability to deeply manipulate the current note context.

In this metaphor, Trilium acts as a lightweight Operating System, and each sub-note functions as an individual App.

这让我的一些自定义功能像一个悬浮在 Trilium 之上的“小程序”，既可以独立运行，又能深度操作当前笔记。如此一来，Trilium 就像是一个轻量级的操作系统，而子笔记就是一个个 App。

---

✨ Features / 功能列表

Currently implemented modules / 目前已实现模块：

1. 🧰 Note Enhancement Toolbox / 笔记增强工具箱

A centralized panel containing various utilities to boost your note-taking efficiency. 一个集成了多种实用工具的控制面板，旨在提升笔记效率。

• Note Management: Merge or Split notes with ease.
  • 笔记管理：轻松合并或拆分笔记。

default.mp4

default.mp4

• Smart TOC: Generate a Table of Contents at the top of the note. Fully clickable and retains jump links even when exported to PDF.
  • 智能目录：在头部生成笔记目录，支持点击跳转，且导出为 PDF 后跳转依然有效。

default.mp4

• LaTeX Rendering: Convert content wrapped in $ symbols into renderable math formulas.
  • 公式转换：将 $ 包裹的内容转换成可渲染的 LaTeX 公式。

default.mp4

• Format Cleaning: Clean up formatting from pasted text (remove styles, unify fonts).
  • 格式清洗：一键清洗粘贴文本的格式。

default.mp4

• Video Widget: Convert video links into a read-only, renderable video player mode.
  • 视频转换：将视频链接转换成只读模式可渲染的视频卡片。

default.mp4

• 🤖 AI Capabilities:
  • AI Summary: Generate intelligent summaries for your notes.
    • AI 摘要：为笔记生成智能摘要。

AI.mp4

• AI Translation: Translate selected text while keeping the original. The translation is displayed below in gray for easy contrast.
  • AI 翻译：选中文本进行 AI 翻译，同时保留原文与译文，译文以灰度显示在下方。

AI.mp4

• AI Polishing: Polish selected text to improve grammar and flow. Configurable to either append or overwrite the original text.
  • AI 润色：选中文本进行润色，支持配置“追加模式”或“覆盖模式”。

AI.mp4

2. 🎙️ AI Transcription / AI 转写

• Support for real-time audio recording or uploading audio files for text transcription.
• 支持录音或上传音频文件进行文字转写。

AI.mp4

3. 🔖 Quick Bookmarks / 快速书签

• Navigate to your most frequently used notes quickly using Trilium's native search functionality.
• 利用原生搜索功能，实现常用笔记的快速导航。

default.mp4

4. ⚡ Flash Thoughts / 闪念

• Quickly append fleeting ideas or inspirations to today's "Daily Note" without switching contexts or leaving your current note.
• 将灵感快速追加到“当日日记”中，而无需切换笔记，保持心流。

default.mp4

🛠️ How to Create Your Own Widget / 如何开发自定义小组件

The beauty of this architecture is its extensibility. You don't need to modify the core code of the Toolbox. Just add a child note!

这个架构最大的魅力在于它的扩展性。你完全不需要修改工具箱的核心代码，只需添加一个子笔记即可！

Step 1: Create a Note / 创建笔记

Create a new child note under the "Magic Toolbox" note. 在 “笔记增强工具箱” 笔记下新建一个子笔记。

• Title: The name of your tool (e.g., "Insert Date").
  • 标题：你的工具名称（例如：“插入日期”）。
• Type: Code: Plain text.
  • Note: Do not use JS Frontend/Backend to avoid Trilium's native compilation errors.
  • 类型：推荐使用 Code: Plain text。
  • 注意：不要使用 JS Frontend/Backend，以避免 Trilium 原生的自动编译报错。

Step 2: Add Attributes / 添加属性

Configure your tool using attributes (Label): 通过属性（Label）配置你的工具：

• #iconClass (Required): The CSS class for the icon (e.g., bx bx-calendar).
  • 必填：按钮图标样式（例如 bx bx-calendar）。
• #description (Optional): Tooltip text when hovering over the button.
  • 可选：鼠标悬停时显示的提示文本。
• #shortcut (Optional): Global shortcut key (e.g., alt+d). The framework handles conflict prevention automatically.
  • 可选：全局快捷键（例如 alt+d）。框架会自动处理拦截，支持浏览器保留键。

Step 3: Write Logic / 编写逻辑

Write standard JavaScript code in the note content. You have access to: 在笔记内容中编写标准的 JavaScript 代码。你可以使用：

1. api: The standard Trilium Frontend API.
   • Trilium 原生前端 API。
2. context: The framework context.
   • 框架提供的上下文对象。
   • context.pluginId: The note ID of the current script (useful for reading self-attributes). / 当前脚本的笔记 ID（用于读取自身配置）。
   • context.widget: The host instance. / 宿主实例。

🧩 Code Example / 代码示例

Here is a simple example: "Insert Current Time". 这是一个简单的示例：“插入当前时间”。

// 1. Get the editor instance / 获取编辑器实例
const editor = await api.getActiveContextTextEditor();

if (!editor) {
    api.showMessage("⚠️ Please click inside a text note first.");
    return;
}

// 2. Use the beautiful confirmation dialog provided by the Host
// 2. 使用 Host 提供的美观确认框
const confirmed = await context.widget.confirm("Do you want to insert the current time?");

if (confirmed) {
    const now = new Date().toLocaleString();
    
    // 3. Operate on the note content / 3. 操作笔记内容
    editor.insertText(`🕒 ${now}`);
    
    api.showMessage("✅ Time inserted!");
}

🚀 Installation & Configuration / 安装与配置

No complex coding required. Just import the package and you are ready to go! 无需编写复杂代码，只需导入压缩包即可直接使用！

1. Download & Import / 下载与导入

default.mp4

1. Download the latest Trilium_Magic_Toolbox.zip.
   • 下载最新的 Trilium_Magic_Toolbox.zip。
2. Right-click on the root (or any folder) in your Trilium note tree and select Import.
   • 在 Trilium 笔记树的根目录（或任意文件夹）上点击右键，选择 导入 (Import)。
3. ⚠️ IMPORTANT: Uncheck "Safe Import" (or check "Allow unsafe scripts").
   • Reason: This toolbox relies on JavaScript execution. Safe import disables scripts.
   • ⚠️ 重要提示：请务必取消勾选 “安全导入 (Safe Import)”（或者勾选“允许不安全脚本”）。
   • 原因：本工具箱依赖 JavaScript 运行，安全模式会禁用所有脚本。

2. Configuration / 配置

Select the specific plugin note (e.g., "AI Text Polishing") and add attributes in the Attributes Panel on the right side. 选中具体的插件笔记（例如“AI 文本润色”），在右侧的 属性面板 (Attributes) 中添加配置。

Example for AI Plugins / AI 插件配置示例:

#OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxxx
#OPENAI_API_URL=https://api.siliconflow.cn/v1/chat/completions
#AI_MODEL=Qwen/Qwen2.5-7B-Instruct

🔮 Future Outlook / 未来展望

This project is an exploration of the possibilities within Trilium. I hope to evolve it into a true "OS within an OS". 本项目是对 Trilium 可能性的一次探索，我希望它能进化成一个真正的“系统中的系统”。

• 📦 Community Ecosystem: Just like an "App Store", users can share their own .zip or code snippets, allowing others to install new functions with one click.
  • 社区生态：就像“应用商店”一样，用户可以分享自己的 .zip 或代码片段，让其他人一键安装新功能。
• 🎨 UI Evolution: Moving towards a more desktop-like experience—draggable windows, resizable panels, and a persistent taskbar.
  • UI 进化：向更像桌面的体验靠拢——支持可拖拽的窗口、可调整大小的面板以及常驻任务栏。
• 🔗 Deep Integration: Better interaction with Trilium's backend events (e.g., auto-trigger scripts on note creation or modification).
  • 深度集成：与 Trilium 后端事件进行更好的交互（例如：创建或修改笔记时自动触发特定脚本）。
• 🌟 Native Adoption: The ultimate goal is to demonstrate the utility of this "Global Widget + Plugin" architecture to the Trilium maintainers, hoping for native support in future versions.
  • 官方采纳：最终目标是向 Trilium 维护者展示这种“全局挂件 + 插件”架构的实用性，期盼在未来的版本中能获得原生支持。

---

🤝 Contribution / 贡献

Ideas and Pull Requests are welcome! Let's make Trilium even more powerful. 欢迎提交想法和代码！让我们把 Trilium 变得更强大。

---

Made with ❤️ for Trilium Notes.