[New UI Feedback] Custom script for embedding videos (Read-Only mode) broken in new rendering logic

[Userwei0418]

Description

Context & Appreciation: First of all, I want to express my support for the new UI direction. I understand that major refactoring (like the removal of the top toolbar) is necessary for the project's evolution. I am actively trying to adapt my workflow to the new system (e.g., migrating my custom toolbar actions to widgets). However, during this transition, I have encountered significant difficulties with compatibility that I cannot solve on my own.

The Issue: I use a custom script that dynamically converts specific video links (e.g., Bilibili) into playable embedded iframes when the note is in Read-Only mode.

In the Old UI: This worked perfectly. The script intercepted the link and rendered the video player inline. (See Image 1)

In the New UI: The script fails to render the iframe. It only displays the standard link button, as if the script isn't running or the DOM manipulation is being blocked. (See Image 2)

Investigation: I verified the underlying source code of the note, and it remains exactly the same as before. The HTML is standard:

<p>
    <a href="https://player.bilibili.com/player.html?bvid=BV1yb421J7oX&amp;high_quality=1&amp;autoplay=0#video-iframe">
        B站视频 BV1yb421J7oX
    </a>
</p>

Since the source is unchanged, I suspect the rendering logic or the DOM sanitization in the new UI has changed, preventing my script from "injecting" the iframe as it used to.

My Request:

Guidance on Customization: Could you provide insights on how to achieve this kind of DOM manipulation in the new UI? I've noticed other users in the Issues section struggling with broken custom tools as well. A guide or "best practice" for migrating legacy scripts to the new architecture would be incredibly helpful for the community.

Feature Request (Video Support): If "hacking" the DOM is no longer recommended, could you consider adding native support for embedding external video links or local videos?

Compatibility: Is there a way to enable backward compatibility for these types of rendering scripts?

Below is the code for the script I am using. I hope this helps in reproducing the issue or suggesting a fix.

Script Code:

class VideoEmbedV14 extends api.NoteContextAwareWidget {
    get parentWidget() { return 'center-pane'; }

    doRender() {
        this.$widget = $(`<style>
            /* ===== 按钮样式 ===== */
            .video-converter-icon.ribbon-tab-title-icon.bx:before { content: "\\e9a6"; }
            .video-converter-icon.loading:before { content: "\\e9f4"; animation: spin 1s linear infinite; display: inline-block; }
            .video-converter-icon.success:before { content: "\\ea52"; color: #4ade80; }
            @keyframes spin { to { transform: rotate(360deg); } }
            
            /* ===== 编辑模式：视频链接样式 ===== */
            a[href*="#video-native"], a[href*="#video-iframe"] {
                display: inline-flex !important;
                align-items: center;
                gap: 6px;
                padding: 10px 16px;
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white !important;
                text-decoration: none !important;
                border-radius: 8px;
                font-weight: 500;
                font-size: 13px;
                margin: 6px 0;
                transition: all 0.2s ease;
                box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
                max-width: 100%;
                overflow: hidden;
            }
            a[href*="#video-native"]:before { content: "🎬"; }
            a[href*="#video-iframe"]:before { content: "📺"; }
            a[href*="#video-native"]:hover, a[href*="#video-iframe"]:hover {
                transform: translateY(-1px);
                box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            }
            
            /* ===== 只读模式：播放器容器 ===== */
            .trilium-video-player {
                position: relative;
                width: 100%;
                margin: 20px 0;
                border-radius: 12px;
                overflow: hidden;
                background: #0a0a0a;
                box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            }
            .trilium-video-player .video-container {
                position: relative;
                width: 100%;
                padding-bottom: 56.25%;
                height: 0;
                background: #000;
            }
            .trilium-video-player iframe,
            .trilium-video-player video {
                position: absolute;
                top: 0; left: 0;
                width: 100%; height: 100%;
                border: 0;
            }
            
            /* 加载状态 */
            .trilium-video-player .video-loading {
                position: absolute;
                top: 50%; left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                font-size: 14px;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 12px;
                z-index: 5;
            }
            .trilium-video-player .video-loading .spinner {
                width: 40px; height: 40px;
                border: 3px solid rgba(255,255,255,0.2);
                border-top-color: #667eea;
                border-radius: 50%;
                animation: spin 1s linear infinite;
            }
            .trilium-video-player.loaded .video-loading { display: none; }
            
            /* 错误状态 */
            .trilium-video-player .video-error {
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                display: none;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: rgba(0,0,0,0.9);
                color: #ef4444;
                gap: 8px;
                z-index: 10;
            }
            .trilium-video-player.error .video-error { display: flex; }
            .trilium-video-player.error .video-loading { display: none; }
            .trilium-video-player .video-error .error-icon { font-size: 32px; }
            .trilium-video-player .video-error .retry-btn {
                margin-top: 8px;
                padding: 6px 16px;
                background: #333;
                border: 1px solid #555;
                color: #fff;
                border-radius: 6px;
                cursor: pointer;
            }
            .trilium-video-player .video-error .retry-btn:hover { background: #444; }
            
            /* 视频信息栏 */
            .trilium-video-player .video-info {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 10px 14px;
                background: linear-gradient(to right, #1a1a2e, #16213e);
                border-top: 1px solid #333;
            }
            .trilium-video-player .video-title {
                color: #ccc;
                font-size: 12px;
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                flex: 1;
            }
            .trilium-video-player .video-actions {
                display: flex;
                gap: 8px;
                margin-left: 12px;
            }
            .trilium-video-player .video-actions button {
                padding: 4px 10px;
                background: rgba(255,255,255,0.1);
                border: none;
                border-radius: 4px;
                color: #aaa;
                font-size: 11px;
                cursor: pointer;
                transition: all 0.2s;
            }
            .trilium-video-player .video-actions button:hover {
                background: rgba(255,255,255,0.2);
                color: #fff;
            }
            
            /* 平台标识 */
            .trilium-video-player .platform-badge {
                display: inline-flex;
                align-items: center;
                gap: 4px;
                padding: 2px 8px;
                background: rgba(255,255,255,0.1);
                border-radius: 4px;
                font-size: 11px;
                color: #888;
                margin-right: 8px;
            }
            .platform-badge.bilibili { color: #00a1d6; }
            .platform-badge.youtube { color: #ff0000; }
            .platform-badge.local { color: #4ade80; }
        </style>`);
        
        return this.$widget;
    }

    async refreshWithNote() {
        setTimeout(() => {
            this.addButton();
            this.renderVideos();
            this.startObserver();
        }, 200);
    }

    /**
     * 监听 DOM 变化，自动渲染新视频
     */
    startObserver() {
        if (this.observer) this.observer.disconnect();
        
        this.observer = new MutationObserver(
            this.debounce(() => this.renderVideos(), 300)
        );
        
        const target = document.querySelector('.note-detail-printable-content');
        if (target) {
            this.observer.observe(target, { childList: true, subtree: true });
        }
    }

    /**
     * 防抖函数
     */
    debounce(fn, delay) {
        let timer = null;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        };
    }

    /**
     * 渲染视频播放器
     */
    renderVideos() {
        const container = document.querySelector(
            '.note-detail-readonly-text-content, .note-detail-book-content, .include-note-content'
        );
        if (!container) return;
        
        // 确保不在编辑模式
        if (container.closest('.ck-editor__editable')) return;

        const videoLinks = container.querySelectorAll(
            'a[href*="#video-native"], a[href*="#video-iframe"]'
        );
        
        videoLinks.forEach(link => {
            if (link.dataset.rendered === 'true') return;
            link.dataset.rendered = 'true';

            const href = link.getAttribute('href');
            const isNative = href.includes('#video-native');
            const url = href.replace(/#video-(native|iframe)$/, '');
            const title = link.textContent || this.extractTitle(url);
            const platform = this.detectPlatform(url);

            // 创建播放器
            const player = this.createPlayer(url, title, platform, isNative);
            
            // 隐藏原链接，插入播放器
            link.style.display = 'none';
            link.parentNode.insertBefore(player, link.nextSibling);
        });
    }

    /**
     * 创建播放器 DOM
     */
    createPlayer(url, title, platform, isNative) {
        const player = document.createElement('div');
        player.className = 'trilium-video-player';
        player.dataset.url = url;

        player.innerHTML = `
            <div class="video-container">
                <div class="video-loading">
                    <div class="spinner"></div>
                    <span>加载中...</span>
                </div>
                <div class="video-error">
                    <span class="error-icon">⚠️</span>
                    <span>视频加载失败</span>
                    <button class="retry-btn">重试</button>
                </div>
            </div>
            <div class="video-info">
                <span class="platform-badge ${platform.class}">${platform.icon} ${platform.name}</span>
                <span class="video-title" title="${title}">${title}</span>
                <div class="video-actions">
                    <button class="copy-url-btn" title="复制链接">📋 复制</button>
                    <button class="open-url-btn" title="新窗口打开">↗️ 打开</button>
                </div>
            </div>
        `;

        const container = player.querySelector('.video-container');
        const retryBtn = player.querySelector('.retry-btn');
        const copyBtn = player.querySelector('.copy-url-btn');
        const openBtn = player.querySelector('.open-url-btn');

        // 加载视频
        this.loadVideo(container, url, isNative, player);

        // 重试按钮
        retryBtn.onclick = () => {
            player.classList.remove('error');
            this.loadVideo(container, url, isNative, player);
        };

        // 复制链接
        copyBtn.onclick = () => {
            navigator.clipboard.writeText(url).then(() => {
                copyBtn.textContent = '✅ 已复制';
                setTimeout(() => copyBtn.textContent = '📋 复制', 1500);
            });
        };

        // 新窗口打开
        openBtn.onclick = () => window.open(url, '_blank');

        return player;
    }

    /**
     * 加载视频元素
     */
    loadVideo(container, url, isNative, player) {
        // 移除旧的视频元素
        const oldMedia = container.querySelector('video, iframe');
        if (oldMedia) oldMedia.remove();

        if (isNative) {
            const video = document.createElement('video');
            video.src = url;
            video.controls = true;
            video.setAttribute('playsinline', '');
            video.preload = 'metadata';
            
            video.onloadeddata = () => player.classList.add('loaded');
            video.onerror = () => player.classList.add('error');
            
            container.appendChild(video);
        } else {
            const iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.allowFullscreen = true;
            iframe.allow = 'autoplay; fullscreen; picture-in-picture';
            
            iframe.onload = () => player.classList.add('loaded');
            iframe.onerror = () => player.classList.add('error');
            
            // iframe 加载超时处理
            setTimeout(() => {
                if (!player.classList.contains('loaded')) {
                    player.classList.add('loaded'); // 假设加载成功
                }
            }, 3000);
            
            container.appendChild(iframe);
        }
    }

    /**
     * 检测视频平台
     */
    detectPlatform(url) {
        if (url.includes('bilibili.com') || url.includes('player.bilibili.com')) {
            return { name: 'Bilibili', icon: '📺', class: 'bilibili' };
        }
        if (url.includes('youtube.com') || url.includes('youtu.be')) {
            return { name: 'YouTube', icon: '▶️', class: 'youtube' };
        }
        if (url.includes('vimeo.com')) {
            return { name: 'Vimeo', icon: '🎬', class: 'vimeo' };
        }
        if (url.includes('youku.com')) {
            return { name: '优酷', icon: '🎯', class: 'youku' };
        }
        if (url.includes('qq.com') || url.includes('v.qq.com')) {
            return { name: '腾讯视频', icon: '📹', class: 'tencent' };
        }
        if (url.includes('douyin.com') || url.includes('tiktok.com')) {
            return { name: '抖音', icon: '🎵', class: 'douyin' };
        }
        if (url.includes('localhost') || url.includes('127.0.0.1') || url.includes('/p/')) {
            return { name: '本地', icon: '💾', class: 'local' };
        }
        return { name: '视频', icon: '🎬', class: 'default' };
    }

    /**
     * 从 URL 提取标题
     */
    extractTitle(url) {
        try {
            const decoded = decodeURIComponent(url);
            const filename = decoded.split('/').pop().split('?')[0].split('#')[0];
            return filename || '未命名视频';
        } catch {
            return '视频';
        }
    }

    /**
     * 添加工具栏按钮
     */
    addButton() {
        // 找到工具栏容器
        const $ribbon = $("div.component.note-split:not(.hidden-ext) div.ribbon-tab-title").parent();
        if ($ribbon.length === 0) return;

        // 1. 检查按钮是否已存在，如果存在则跳过插入，只更新事件
        // 这样可以防止每次刷新笔记时按钮跑到最后面去
        if ($ribbon.find('.video-converter-button').length === 0) {
            
            // 2. 找到当前的最后一个按钮 (通常这会排在“笔记详情”按钮之前)
            const $lastBtn = $ribbon.find('.ribbon-tab-title:not(.backToHis)').last();
            
            // 3. 构建按钮 HTML (包含 spacer 间隔符，这很重要)
            const btnHtml = `
                <div class="video-converter-button ribbon-tab-title">
                    <span class="video-converter-icon ribbon-tab-title-icon bx" title="转换视频链接"></span>
                </div>
                 <div class="video-converter-button ribbon-tab-spacer"></div>
            `;
            
            
            // 4. 插入到最后一个按钮之后
            if ($lastBtn.length > 0) {
                // $lastBtn.after(btnHtml);
                $lastBtn.before(btnHtml);
            } else {
                // $ribbon.prepend(btnHtml);
                $ribbon.append(btnHtml);
            }
        }

        // 绑定点击事件 (先 off 再 on 防止重复)
        // 注意：只绑定到 title 元素，不绑定到 spacer
        const $btn = $ribbon.find('div.video-converter-button.ribbon-tab-title');
        $btn.off('click').on('click', () => this.convertVideos());
    }

    /**
     * 转换视频链接（后端处理）
     */
    async convertVideos() {
        const note = api.getActiveContextNote();
        if (!note) return;

        const $icon = $('.video-converter-icon');
        $icon.removeClass('success').addClass('loading');
        api.showMessage('🔄 正在转换视频链接...');

        try {
            const result = await api.runAsyncOnBackendWithManualTransactionHandling(async (noteId) => {
                const note = await api.getNote(noteId);
                if (!note) return { success: false, error: '笔记不存在' };

                let content = await note.getContent();
                const originalContent = content;
                let count = 0;

                // 生成视频链接 HTML
                const createVideoLink = (url, title, type) => {
                    const hash = type === 'native' ? '#video-native' : '#video-iframe';
                    const safeTitle = (title || '视频').replace(/"/g, '&quot;').replace(/</g, '&lt;');
                    return `<p><a href="${url}${hash}">${safeTitle}</a></p>`;
                };

                // URL 处理器
                const processUrl = (url) => {
                    url = url.trim();
                    if (url.includes('#video-native') || url.includes('#video-iframe')) return null;

                    // 本地/直链视频
                    if (/\.(mp4|webm|ogg|mov|m3u8|mkv|avi|flv)(\?.*)?$/i.test(url) || 
                        url.includes('/p/') || url.includes('localhost') || url.includes('127.0.0.1')) {
                        const filename = decodeURIComponent(url.split('/').pop().split('?')[0].split('#')[0]);
                        return { type: 'native', url, title: filename || '本地视频' };
                    }

                    // Bilibili
                    if (url.includes('bilibili.com')) {
                        const bv = url.match(/(BV[\w]+)/i);
                        if (bv) {
                            return { 
                                type: 'iframe', 
                                url: `https://player.bilibili.com/player.html?bvid=${bv[1]}&high_quality=1&autoplay=0`,
                                title: `B站视频 ${bv[1]}`
                            };
                        }
                    }

                    // YouTube
                    if (url.includes('youtube.com') || url.includes('youtu.be')) {
                        let vid = url.match(/(?:v=|youtu\.be\/)([^&?#]+)/);
                        if (vid) {
                            return { 
                                type: 'iframe', 
                                url: `https://www.youtube.com/embed/${vid[1]}`,
                                title: `YouTube ${vid[1]}`
                            };
                        }
                    }

                    // Vimeo
                    if (url.includes('vimeo.com')) {
                        const vid = url.match(/vimeo\.com\/(\d+)/);
                        if (vid) {
                            return { 
                                type: 'iframe', 
                                url: `https://player.vimeo.com/video/${vid[1]}`,
                                title: `Vimeo ${vid[1]}`
                            };
                        }
                    }

                    // 优酷
                    if (url.includes('youku.com')) {
                        const vid = url.match(/id_([^.]+)/);
                        if (vid) {
                            return { 
                                type: 'iframe', 
                                url: `https://player.youku.com/embed/${vid[1]}`,
                                title: `优酷视频`
                            };
                        }
                    }

                    return null;
                };

                // 处理 <a> 标签
                content = content.replace(/<a\s+[^>]*href=["']([^"']+)["'][^>]*>[\s\S]*?<\/a>/gi, (match, url) => {
                    const result = processUrl(url);
                    if (result) { count++; return createVideoLink(result.url, result.title, result.type); }
                    return match;
                });

                // 处理 <p> 内的纯文本 URL
                content = content.replace(/<p[^>]*>([\s\S]*?)<\/p>/gi, (match, inner) => {
                    const trimmed = inner.replace(/&nbsp;/g, ' ').replace(/<br\s*\/?>/gi, ' ').trim();
                    if (/<a\s/i.test(trimmed)) return match;
                    
                    const urlMatch = trimmed.match(/^(https?:\/\/[^\s<>"]+)$/i);
                    if (urlMatch) {
                        const result = processUrl(urlMatch[1]);
                        if (result) { count++; return createVideoLink(result.url, result.title, result.type); }
                    }
                    return match;
                });

                // 修复旧版 ck-media__wrapper
                content = content.replace(
                    /<div[^>]*class="[^"]*ck-media__wrapper[^"]*"[^>]*data-oembed-url="([^"]+)"[^>]*>[\s\S]*?<\/div>/gi, 
                    (match, url) => {
                        if (url) {
                            count++;
                            const isNative = match.includes('data-is-native="true"');
                            const title = decodeURIComponent(url.split('/').pop().split('?')[0]) || '视频';
                            return createVideoLink(url, title, isNative ? 'native' : 'iframe');
                        }
                        return match;
                    }
                );

                // 清理空结构
                content = content.replace(/<div>\s*<div>\s*(&nbsp;|\s)*<\/div>\s*<\/div>/gi, '');

                if (content !== originalContent) {
                    await note.setContent(content);
                    return { success: true, count };
                }
                return { success: false, count: 0 };

            }, [note.noteId]);

            $icon.removeClass('loading');
            
            if (result.success) {
                $icon.addClass('success');
                api.showMessage(`✅ 已转换 ${result.count} 个视频链接`);
                setTimeout(() => {
                    $icon.removeClass('success');
                    api.activateNote(note.noteId);
                }, 1000);
            } else if (result.error) {
                api.showMessage('❌ ' + result.error);
            } else {
                api.showMessage('ℹ️ 没有找到可转换的视频链接');
            }

        } catch (e) {
            console.error('[VideoEmbed]', e);
            api.showMessage('❌ 转换出错: ' + e.message);
            $('.video-converter-icon').removeClass('loading');
        }
    }

    entitiesReloadedEvent({ loadResults }) {
        if (loadResults.isNoteReloaded(this.noteId)) {
            setTimeout(() => this.renderVideos(), 300);
        }
    }
}

module.exports = new VideoEmbedV14();

TriliumNext Version

0.101.1

What operating system are you using?

Windows

What is your setup?

Local (no sync)

Operating System Version

Windows 11

Error logs

No response

[dosubot[bot]]

Your script stopped working in the new UI because TriliumNext now uses a React-based rendering pipeline, which means DOM elements (like your video links) may not exist yet when your widget runs. Direct DOM manipulation is fragile—React can overwrite changes or re-render at any time, so scripts must wait until the note content is fully rendered before injecting iframes or custom players. The recommended approach is to hook into the "contentElRefreshed" event, which fires after the read-only note content is ready for safe DOM mutation. You can use a MutationObserver or polling to detect when .note-detail-readonly-text-content appears, then run your rendering logic source.

For video embedding, the most robust pattern is to store video URLs as <a> tags with a hash suffix (like #video-iframe or #video-native). In read-only mode, a frontend widget scans for these links and renders them as players. This dual-layer design avoids data loss and works with Trilium's editor and rendering logic source. There’s a migration/converter tool and example widget here: trilium-fast-player.

There is currently no built-in video embedding widget or official extension point for this in TriliumNext v0.101.1, and no recent pull requests add native support or backward compatibility for legacy scripts source. If you want to adapt your script, move your DOM manipulation logic to run after "contentElRefreshed" and ensure it reruns on note/context switches or included note refreshes. For scripts that don’t render a visible widget, use #run=frontendStartup to avoid the parentWidget requirement source.

Local video embedding by reference (e.g., file://) is not supported due to browser and CKEditor restrictions; you must upload files as file notes to display them inline source.

If you need a migration checklist or code example for the new lifecycle, let me know!

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[adoriandoran]

We anticipated that compatibility issues will appear after such major change, that's why the old UI is still available in Options → Appearance. Consider using the old UI until further guidance will become available to fix the problem.