Skip to content

Comments

feat: add embed block node for iframes and JSX components in blog editor#4083

Open
devin-ai-integration[bot] wants to merge 3 commits intomainfrom
devin/1771475411-embed-block-node
Open

feat: add embed block node for iframes and JSX components in blog editor#4083
devin-ai-integration[bot] wants to merge 3 commits intomainfrom
devin/1771475411-embed-block-node

Conversation

@devin-ai-integration
Copy link
Contributor

@devin-ai-integration devin-ai-integration bot commented Feb 19, 2026

feat: add embed block node for iframes and JSX components in blog editor

Summary

Adds a new "Embed Block" node to the blog editor, inspired by Vrite's Element block pattern. This is an opaque atom node that stores arbitrary iframe, JSX, or HTML code as a raw string — allowing blog authors to embed <iframe>, <Callout>, <CtaCard>, or any other component markup directly in the editor.

New files:

  • packages/tiptap/src/shared/embed-block.ts — base tiptap Node definition with paste detection (looksLikeEmbedCode), parseHTML/renderHTML, and markdown serialization hooks
  • apps/web/src/components/admin/blog-editor/embed-block.tsx — React node view with edit mode (textarea for pasting code) and preview mode (shows code + detected type label)

Modified files:

  • Blog editor index.tsx — registers EmbedBlockNode extension
  • toolbar.tsx — adds <CodeXml> toolbar button to insert an embed block
  • packages/tiptap/src/shared/index.ts — re-exports the new module

Behavior:

  • Toolbar button inserts an empty embed block (opens in edit mode)
  • Pasting iframe/JSX/HTML code auto-creates an embed block via handlePaste plugin
  • Cmd/Ctrl+Enter saves, Escape cancels, Backspace on empty deletes the node
  • Preview mode shows a type label (e.g. "iframe — youtube.com", "JSX Component — <Callout />") with hover-to-edit pencil button

Review & Testing Checklist for Human

  • Paste handler greediness: looksLikeEmbedCode matches any <Tag>...</Tag> or <iframe ...> pattern. Pasting normal HTML (e.g. <div>hello</div>) will be intercepted. Verify this doesn't break normal paste workflows. Also check interaction with the existing ClipNode YouTube paste handler — plugin ordering determines which handler fires first.
  • Markdown roundtrip: parseMarkdown unconditionally returns an embedBlock for any token routed to it (the looksLikeEmbedCode guard was removed to satisfy the MarkdownParseResult type). Load existing blog posts containing JSX (e.g. <Callout>, <Clip>) and verify they survive a full save → reload cycle without data loss or unexpected embed block creation.
  • Manual smoke test: This was not tested in a browser — only CI (typecheck + fmt) passes. Open the blog editor, insert an embed block via toolbar, paste an <iframe src="..."> and a JSX snippet like <Callout type="note">text</Callout>, save, and verify the markdown output is correct.
  • Edge cases in regex detection: Test with multi-line JSX, deeply nested components, and self-closing tags with unusual attribute formatting. The [\s\S]* in JSX_BLOCK_REGEX could be slow on very large clipboard payloads.

Notes

  • CI passes: both ci (typecheck) and fmt (dprint) checks are green.
  • navigator.platform (used for keyboard shortcut hint display) is deprecated but functional; non-blocking.
  • Requested by @goranmoomin
  • Devin session

Co-Authored-By: Sungbin Jo <goranmoomin@daum.net>
@devin-ai-integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR that start with 'DevinAI' or '@devin'.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@netlify
Copy link

netlify bot commented Feb 19, 2026

Deploy Preview for hyprnote-storybook canceled.

Name Link
🔨 Latest commit 42a498c
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote-storybook/deploys/6996965cd2c1de0008de1698

@netlify
Copy link

netlify bot commented Feb 19, 2026

Deploy Preview for hyprnote ready!

Name Link
🔨 Latest commit 42a498c
🔍 Latest deploy log https://app.netlify.com/projects/hyprnote/deploys/6996965c0a4c790008c57541
😎 Deploy Preview https://deploy-preview-4083--hyprnote.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

devin-ai-integration bot and others added 2 commits February 19, 2026 04:42
…ult type

Co-Authored-By: Sungbin Jo <goranmoomin@daum.net>
Co-Authored-By: Sungbin Jo <goranmoomin@daum.net>
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