logseq-tablerender-plugin icon indicating copy to clipboard operation
logseq-tablerender-plugin copied to clipboard

Feat: Render `iframe` tags and `{{video}}` macros within table cells

Open fishpigbird opened this issue 9 months ago • 0 comments

This PR enhances the table renderer to support rendering <iframe> tags and {{video}} macros directly within table cells, allowing for richer content display.

Problem: Currently, when Logseq blocks containing <iframe> elements or {{video}} macros are used as cell data for the table renderer, they are displayed as plain text instead of being rendered as embedded content. This limits the utility of the table renderer for displaying multimedia or embedded web content.

Solution:

  • Modified the checkCell function in src/helpers/handle-cell-type.tsx.
  • Added logic to detect raw <iframe> tags at the beginning of the cell content. If found, the content is directly rendered using dangerouslySetInnerHTML without further processing.
  • Added logic to detect {{video URL}} macros.
    • It currently parses YouTube video URLs (youtube.com/watch?v= or youtu.be/).
    • If a YouTube URL is found, the macro is replaced with a standard YouTube embed <iframe>.
    • The generated <iframe> uses inline styles (style="width: 382px; height: 215px;") to ensure a 16:9 aspect ratio and prevent layout issues within table cells.
    • Non-YouTube video URLs in the macro will currently fall back to displaying a simple link.
  • These checks are performed before the Markdown conversion (showdown) to avoid corrupting the tags or macros.

How to Test:

  1. Create a Logseq block structure suitable for the table renderer.
  2. In the blocks that will become table cells, add:
    • An <iframe> tag (e.g., <iframe src="https://example.com"></iframe>)
    • A {{video YOUTUBE_URL}} macro (e.g., {{video https://www.youtube.com/watch?v=dQw4w9WgXcQ}})
  3. Render the table using the slash command.
  4. Verify that the iframe and the YouTube video are correctly embedded and displayed within their respective table cells with the specified dimensions (382x215px for the video).

Note: Video macro support is currently limited to YouTube URLs. Other video sources will render as links.

fishpigbird avatar Apr 29 '25 15:04 fishpigbird