Trilium Next
Canvas Note Linker( as cards ) for TriliumNext #9666
ricolandia
started this conversation in
Show and tell
Replies: 1 comment
-
|
Version 2.0( with excerpt ) Screenshot
The codeconsole.log("🚀 ALARME: O TRILIUM COMEÇOU A LER O ARQUIVO DO CANVAS LINKER!");
/**
* ╔══════════════════════════════════════════════════════╗
* ║ Canvas Note Linker — TriliumNext ║
* ╚══════════════════════════════════════════════════════╝
*
* Exibe um botão flutuante (🔗) em qualquer nota Canvas.
* Ao clicar, abre um painel de busca para selecionar uma
* nota e inserir um card linkado diretamente no JSON do
* Excalidraw.
*
* ── INSTALAÇÃO ─────────────────────────────────────────
* 1. Crie uma nova nota
* 2. Tipo: JS Frontend
* 3. Adicione o label: #widget
* 4. Cole este código inteiro
* 5. Recarregue o TriliumNext (F5)
*
* ── USO ────────────────────────────────────────────────
* • Abra qualquer nota Canvas
* • Clique no botão 🔗 (canto inferior direito)
* • Digite parte do título da nota que quer inserir
* • Clique no resultado → card é criado e o canvas recarrega
*
* ── NOTAS TÉCNICAS ─────────────────────────────────────
* • O link do card usa o formato interno #root/noteId
* • Ctrl+clique no card dentro do Excalidraw abre a nota
* • Cards novos são posicionados em grade (5 colunas)
* a partir de x=60, y=60. Reposicione livremente após.
* • Cor padrão: #cba6f7 (Catppuccin Mauve). Altere em
* CARD_CONFIG abaixo para personalizar.
*/
/* ── CONFIGURAÇÃO ──────────────────────────────────────── */
const CARD_CONFIG = {
width: 330,
height: 160, // mais alto p/ caber título + trecho
strokeColor: '#5c5f77',
backgroundColor: 'transparent',
fontSize: 24,
fontFamily: 2, // 1=Cartoon, 2=Normal, 3=Monospace
roughness: 0,
cornerRadius: { type: 3 },
cols: 5,
colGap: 280, // gap menor entre cards (era 360)
rowGap: 190, // ajustado para nova altura (era 140)
originX: 60,
originY: 60,
};
/* ─────────────────────────────────────────────────────── */
class CanvasLinkerWidget extends api.NoteContextAwareWidget {
get position() { return 100; }
get parentWidget() { return 'center-pane'; }
isEnabled() { return true; }
doRender() {
this.$widget = $('<div style="display:none;height:0;overflow:hidden;">');
if (!document.getElementById('clw-root')) {
this._injectFloat();
}
window._clw = {
search: (q) => this._onSearch(q),
insert: (id, title, excerpt) => this._insertCard(id, title, excerpt),
};
return this.$widget;
}
/* ── UI ─────────────────────────────────────────────── */
_injectFloat() {
const html = `
<div id="clw-root" style="
position: fixed;
bottom: 100px;
right: 15px;
z-index: 9999;
display: none;
flex-direction: column;
align-items: flex-end;
gap: 10px;
font-family: var(--detail-font-family, 'Segoe UI', sans-serif);
font-size: 13px;
">
<div id="clw-panel" style="
display: none;
background: var(--accented-background-color, #1e1e2e);
border: 1px solid var(--main-border-color, #45475a);
border-radius: 12px;
padding: 14px;
width: 290px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(203,166,247,0.12);
animation: clwSlideIn 0.15s ease;
">
<div style="
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 10px;
">
<span style="font-size:15px; line-height:1;">🔗</span>
<span style="
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted-text-color, #6c7086);
">Inserir nota no Canvas</span>
</div>
<input id="clw-search" type="text"
placeholder="Buscar nota por título…"
autocomplete="off" spellcheck="false"
style="
width: 100%;
padding: 8px 11px;
border: 1px solid var(--main-border-color, #45475a);
border-radius: 7px;
background: var(--main-background-color, #181825);
color: var(--main-text-color, #cdd6f4);
font-size: 13px;
box-sizing: border-box;
outline: none;
transition: border-color 0.15s;
"
/>
<div id="clw-results" style="
margin-top: 8px;
max-height: 230px;
overflow-y: auto;
scrollbar-width: thin;
"></div>
<div id="clw-status" style="
display: none;
margin-top: 8px;
font-size: 11.5px;
color: var(--muted-text-color, #6c7086);
text-align: center;
padding: 4px 0;
"></div>
</div>
<button id="clw-btn" title="Inserir nota no Canvas (Canvas Linker)"
style="
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--button-background-color, #313244);
border: 1px solid var(--main-border-color, #45475a);
color: var(--main-text-color, #cdd6f4);
cursor: pointer;
font-size: 19px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 3px 12px rgba(0,0,0,0.4);
transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
flex-shrink: 0;
"
>🔗</button>
</div>
<style>
@keyframes clwSlideIn {
from { opacity: 0; transform: translateY(8px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
#clw-btn:hover {
transform: scale(1.08);
box-shadow: 0 5px 18px rgba(0,0,0,0.5);
background: var(--hover-item-background-color, #45475a) !important;
}
#clw-search:focus {
border-color: #cba6f7 !important;
box-shadow: 0 0 0 2px rgba(203,166,247,0.2);
}
#clw-results::-webkit-scrollbar { width: 4px; }
#clw-results::-webkit-scrollbar-track { background: transparent; }
#clw-results::-webkit-scrollbar-thumb {
background: var(--main-border-color, #45475a);
border-radius: 4px;
}
</style>`;
document.body.insertAdjacentHTML('beforeend', html);
document.getElementById('clw-btn').addEventListener('click', () => {
this._togglePanel();
});
let _timer;
document.getElementById('clw-search').addEventListener('input', function () {
clearTimeout(_timer);
const q = this.value;
_timer = setTimeout(() => window._clw?.search(q), 280);
});
document.addEventListener('click', (e) => {
const root = document.getElementById('clw-root');
if (root && !root.contains(e.target)) {
document.getElementById('clw-panel').style.display = 'none';
}
});
}
_togglePanel() {
const panel = document.getElementById('clw-panel');
if (!panel) return;
const isOpen = panel.style.display !== 'none';
if (isOpen) {
panel.style.display = 'none';
} else {
panel.style.display = 'block';
const input = document.getElementById('clw-search');
input.value = '';
document.getElementById('clw-results').innerHTML = '';
document.getElementById('clw-status').style.display = 'none';
setTimeout(() => input.focus(), 50);
}
}
/* ── BUSCA ──────────────────────────────────────────── */
async _onSearch(query) {
const $results = document.getElementById('clw-results');
const $status = document.getElementById('clw-status');
$results.innerHTML = '';
if (!query || query.trim().length < 2) {
$status.style.display = 'none';
return;
}
$status.textContent = 'Buscando…';
$status.style.display = 'block';
try {
const notes = await api.runOnBackend((q) => {
return api.searchForNotes(q).slice(0, 15).map(n => {
let excerpt = '';
try {
const raw = n.getContent() || '';
excerpt = raw
// Remove blocos que nunca viram texto útil
.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
// Troca tags de bloco por espaço
.replace(/<\/(p|div|li|h[1-6]|br)>/gi, ' ')
// Remove todas as tags restantes
.replace(/<[^>]+>/g, '')
// Decode das entidades HTML mais comuns
.replace(/ /g, ' ')
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, "'")
.replace(/&[a-z]+;/g, ' ') // qualquer entidade restante
.replace(/&#\d+;/g, ' ') // entidades numéricas (  etc.)
// Normaliza espaços
.replace(/\s+/g, ' ')
.trim()
.slice(0, 145);
} catch (_) {}
return { noteId: n.noteId, title: n.title, excerpt };
});
}, [query.trim()]);
$status.style.display = 'none';
if (!notes || notes.length === 0) {
$status.textContent = 'Nenhuma nota encontrada.';
$status.style.display = 'block';
return;
}
const fragment = document.createDocumentFragment();
for (const note of notes) {
const title = note.title || '(sem título)';
const excerpt = note.excerpt || '';
const item = document.createElement('div');
item.style.cssText = `
padding: 7px 10px;
border-radius: 6px;
cursor: pointer;
color: var(--main-text-color, #cdd6f4);
line-height: 1.4;
transition: background 0.1s;
border: 1px solid transparent;
`;
item.title = title;
item.innerHTML = `
<div style="
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
">${title}</div>
${excerpt ? `<div style="
font-size: 11px;
color: var(--muted-text-color, #6c7086);
margin-top: 2px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.35;
">${excerpt}</div>` : ''}
`;
item.addEventListener('mouseenter', () => {
item.style.background = 'var(--hover-item-background-color, #313244)';
item.style.borderColor = 'var(--main-border-color, #45475a)';
});
item.addEventListener('mouseleave', () => {
item.style.background = 'transparent';
item.style.borderColor = 'transparent';
});
item.addEventListener('click', () => {
window._clw?.insert(note.noteId, title, excerpt);
});
fragment.appendChild(item);
}
$results.appendChild(fragment);
} catch (err) {
$status.textContent = 'Erro na busca: ' + err.message;
$status.style.display = 'block';
console.error('[CanvasLinker] search error', err);
}
}
/* ── INSERÇÃO DO CARD ───────────────────────────────── */
async _insertCard(noteId, title, excerpt) {
const canvasNoteId = this.noteId;
if (!canvasNoteId) {
api.showError('Nenhuma nota Canvas ativa.');
return;
}
const $status = document.getElementById('clw-status');
$status.textContent = 'Inserindo card…';
$status.style.display = 'block';
document.getElementById('clw-results').innerHTML = '';
try {
await api.runOnBackend((canvasNoteId, linkedNoteId, title, excerpt, cfg) => {
const canvasNote = api.getNote(canvasNoteId);
if (!canvasNote) throw new Error('Nota canvas não encontrada: ' + canvasNoteId);
const rawContent = canvasNote.getContent();
let data;
try { data = JSON.parse(rawContent || '{}'); }
catch (_) { data = {}; }
if (!data.type) data.type = 'excalidraw';
if (!data.version) data.version = 2;
if (!data.source) data.source = '';
if (!data.elements) data.elements = [];
if (!data.appState) data.appState = {};
if (!data.files) data.files = {};
const active = data.elements.filter(e => !e.isDeleted).length;
const col = active % cfg.cols;
const row = Math.floor(active / cfg.cols);
const x = cfg.originX + col * cfg.colGap;
const y = cfg.originY + row * cfg.rowGap;
const now = Date.now();
const rectId = 'clw_r_' + Math.random().toString(36).substr(2, 14);
const titleId = 'clw_t_' + Math.random().toString(36).substr(2, 14);
const excrId = 'clw_e_' + Math.random().toString(36).substr(2, 14);
const groupId = 'clw_g_' + Math.random().toString(36).substr(2, 14);
const PAD_X = 18;
const PAD_Y = 14;
// Retângulo
data.elements.push({
id: rectId,
type: 'rectangle',
x, y,
width: cfg.width,
height: cfg.height,
angle: 0,
strokeColor: cfg.strokeColor,
backgroundColor: cfg.backgroundColor,
fillStyle: 'solid',
strokeWidth: 1,
strokeStyle: 'solid',
roughness: cfg.roughness,
opacity: 100,
groupIds: [groupId],
frameId: null,
roundness: cfg.cornerRadius,
seed: Math.floor(Math.random() * 999999),
version: 1,
versionNonce: Math.floor(Math.random() * 999999),
isDeleted: false,
boundElements: [],
updated: now,
link: '#root/' + linkedNoteId,
locked: false,
});
// Texto do título
const titleHeight = 36;
data.elements.push({
id: titleId,
type: 'text',
x: x + PAD_X,
y: y + PAD_Y,
width: cfg.width - PAD_X * 2,
height: titleHeight,
angle: 0,
strokeColor: cfg.strokeColor,
backgroundColor: 'transparent',
fillStyle: 'solid',
strokeWidth: 1,
strokeStyle: 'solid',
roughness: cfg.roughness,
opacity: 100,
groupIds: [groupId],
frameId: null,
roundness: null,
seed: Math.floor(Math.random() * 999999),
version: 1,
versionNonce: Math.floor(Math.random() * 999999),
isDeleted: false,
boundElements: null,
updated: now,
link: null,
locked: false,
text: title,
fontSize: cfg.fontSize,
fontFamily: cfg.fontFamily,
textAlign: 'left',
verticalAlign: 'top',
containerId: null,
originalText: title,
lineHeight: 1.25,
autoResize: true,
});
// Texto do trecho (fonte menor)
if (excerpt) {
data.elements.push({
id: excrId,
type: 'text',
x: x + PAD_X,
y: y + PAD_Y + titleHeight + 6,
width: cfg.width - PAD_X * 2,
height: cfg.height - PAD_Y * 2 - titleHeight - 6,
angle: 0,
strokeColor: '#6c7086',
backgroundColor: 'transparent',
fillStyle: 'solid',
strokeWidth: 1,
strokeStyle: 'solid',
roughness: cfg.roughness,
opacity: 100,
groupIds: [groupId],
frameId: null,
roundness: null,
seed: Math.floor(Math.random() * 999999),
version: 1,
versionNonce: Math.floor(Math.random() * 999999),
isDeleted: false,
boundElements: null,
updated: now,
link: null,
locked: false,
text: excerpt,
fontSize: 14,
fontFamily: cfg.fontFamily,
textAlign: 'left',
verticalAlign: 'top',
containerId: null,
originalText: excerpt,
lineHeight: 1.3,
autoResize: false,
});
}
canvasNote.setContent(JSON.stringify(data));
}, [canvasNoteId, noteId, title, excerpt || '', CARD_CONFIG]);
document.getElementById('clw-panel').style.display = 'none';
api.showMessage(`Card "${title}" inserido!`);
await api.activateNote(canvasNoteId);
} catch (err) {
console.error('[CanvasLinker] insert error', err);
$status.textContent = '✗ Erro: ' + err.message;
$status.style.display = 'block';
api.showError('CanvasLinker: ' + err.message);
}
}
/* ── CICLO DE VIDA ──────────────────────────────────── */
async refreshWithNote(note) {
console.log('[CanvasLinker] Aba atualizada! Título:', note?.title, '| Tipo:', note?.type);
const root = document.getElementById('clw-root');
if (!root) return;
if (note && note.type === 'canvas') {
root.style.display = 'flex';
} else {
root.style.display = 'none';
const panel = document.getElementById('clw-panel');
if (panel) panel.style.display = 'none';
}
}
entitledToRefreshWithNote() { return true; }
}
module.exports = new CanvasLinkerWidget(); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi, Triliumers!
I built( no.. again.. not me, but the thing.. the nInA) a small frontend widget for TriliumNext called Canvas Note Linker.
It adds a floating 🔗 button to every Canvas note.
Clicking it opens a quick search panel where you can find any note and instantly insert it as a linked card directly into the Excalidraw JSON.
Installation
JS Frontend#widgetF5)Usage
Technical Notes
#root/noteIdCtrl + Clickon the Excalidraw card opens the linked notex=60,y=60You can freely customize the card style in
CARD_CONFIG.JavaScript Code
Screenshots
I made this mainly to improve navigation between visual canvases and traditional notes.
Maybe useful for people building knowledge maps, story structures, research boards, or worldbuilding systems inside TriliumNext :)
Beta Was this translation helpful? Give feedback.
All reactions