Cusotm View | Preview for Markdown assets file (or other links)

[frostime]

const custom = {
    assetPreview: {
        use: (dv) => {
            return {
                render: async (container, fileUrl, options) => {
                    try {
                        const response = await fetch(fileUrl);
                        const contentType = response.headers.get('content-type');
                        const fileContent = await response.text();

                        let element;

                        // 如果是 html，那么就放入 iframe 中
                        if (contentType.startsWith('application/')) {
                            const codeType = contentType.split('/')[1];
                            element = dv.md(`\`\`\`${codeType}\n${fileContent}\n\`\`\``);
                        } 
                        else if (contentType.startsWith('text/html')) {
                            element = document.createElement('iframe');
                            element.src = fileUrl;
                            element.style.width = '100%';
                        } else if (contentType.startsWith('image/')) {
                            element = document.createElement('img');
                            element.src = fileUrl;
                            element.style.maxWidth = '100%';
                        } else if (contentType.startsWith('text/')) {
                            element = dv.md(fileContent);
                        } else {
                            element = document.createElement('div');
                            element.innerText = '无法预览';
                        }
                        const title = document.createElement('p');
                        title.innerText = `预览: ${fileUrl}`;
                        Object.assign(title.style, {
                            backgroundColor: 'var(--b3-theme-primary-light)',
                            color: 'var(--b3-theme-on-primary)',
                            borderRadius: '4px',
                            fontWeight: 'bold',
                            padding: '4px 8px',
                        });
                        if (options?.maxHeight) {
                            Object.assign(element.style, {
                                maxHeight: options.maxHeight,
                                overflowY: 'auto',
                            });
                        }
                        container.appendChild(title);
                        container.appendChild(element);
                    } catch (error) {
                        console.error('Error fetching file:', error);
                        const errorElement = document.createElement('div');
                        errorElement.innerText = '无法预览';
                        container.appendChild(errorElement);
                    }
                }
            }
        },
        alias: ['Preview', 'Asset']
    },
}

Use:

//!js
const query = async () => {
  let dv = Query.DataView(protyle, item, top);
  dv.render();
  dv.addPreview('assets/User/Markdown/DST vs 主观逻辑-20250313181613-d26lmq9.md', {maxHeight: '800px'});
}

return query();