Skip to content

feat(portable-text): support interactive SVG/JS htmlBlocks in Astro preview and Sanity Studio - #744

Open
codercatdev wants to merge 1 commit into
devfrom
feat/situation-to-canon-wheel-html-block
Open

codercatdev wants to merge 1 commit into
devfrom
feat/situation-to-canon-wheel-html-block

Conversation

@codercatdev

Copy link
Copy Markdown
Contributor

Summary

Supports interactive HTML/SVG + JS htmlBlock embeds (such as the Five Layers of Agentic Context: Situation -> Canon Wheel in Sanity draft drafts.12da09be-f4cd-4fd4-be7e-0333dace2024) across both Astro draft preview and Sanity Studio:

  • apps/site/src/components/portable-text/PtHtml.astro: Strips invisible zero-width Unicode Stega watermark characters ([\u200B-\u200F\u202A-\u202E\u2060-\u206F\uFEFF]|\uDB40[\uDC20-\uDC7F]) from node.html before passing to set:html so inline <script>, <style>, and <svg> blocks execute cleanly in draft/preview mode without syntax errors while preserving 100% of author markup.
  • apps/sanity/components/HTMLPreview.tsx: Re-hydrates inline <script> elements inside HTMLPreview via useEffect and strips Stega characters so interactive HTML/SVG widgets animate and respond to clicks directly inside the Sanity Studio Portable Text editor preview.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant