HTML Live Preview for Code Blocks#2231
Open
ryoiki-tokuiten wants to merge 1 commit into
Open
Conversation
Adds a real-time HTML preview panel to code blocks when the language is set to HTML. The preview renders user HTML/CSS/JS in a sandboxed iframe using a CSP-bypassed embed proxy (dist/embed/iframe.html), supporting external CDN scripts (e.g. Tailwind CSS, Babel for React JSX). Key changes: - src/ts/component/block/text.tsx: Added preview toggle logic with ReactDOM.createPortal for a fixed right-side preview panel. Uses postMessage to send raw HTML to embed/iframe.html. Includes fullscreen toggle and proper cleanup on unmount. - dist/embed/iframe.html: Added rawHtmlPreview handler that creates a Blob URL iframe to render arbitrary HTML without CSP restrictions. - electron/ts/main.ts: Excluded /embed/iframe.html from CSP header injection so the preview iframe can load external scripts. - electron/json/cors.json: Added blob: and about: to frame-src for nested iframe support. - src/scss/block/text.scss: Added .htmlPreviewPanel styles (fixed position, header bar with expand/close buttons, fullscreen mode). - src/scss/common.scss: Added body.html-preview-split-active rule to resize #appContainer to 50vw for true side-by-side layout. The preview uses Anytype's existing embed/iframe.html infrastructure and Icon components (common/eye0, common/eye1, common/expand, common/close) for a consistent, production-ready UI.
|
CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅ |
Author
|
I have read the CLA Document and I hereby sign the CLA |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a real-time HTML preview panel to code blocks when the language is set to HTML. The preview renders user HTML/CSS/JS in a sandboxed iframe using a CSP-bypassed embed proxy (dist/embed/iframe.html), supporting external CDN scripts (e.g. Tailwind CSS, Babel for React JSX).
Just like markdown, HTML format is becoming popular again for learning visually with the help of LLMs. I personally find myself making and storing lots of HTML in my anytype notes these days. We don't currently have preview HTML option inside the app itself so it's very frustrating to always download and open it in a separate web browser. I have integrated the preview support with this PR.
Clicking on "Show Preview" opens the side panel with the preview. Close and Full Screen option always visible to the user.