Extend the embed modal for generated API examples

[Crabcyborg]

Add a frm_embed_modal_options filter so add-ons can add an embed choice with the selected form or View and its content panel. Manual embed examples now support descriptions and asynchronous generation, allowing the API add-on to fetch protected embed code before enabling Copy.

Keep the existing three choices and static examples working. Add Enter/Space activation to option cards and associate example labels with their code fields.

This contains only the Lite integration needed by the API embed work. Token generation, encryption, HTML export, and AJAX submission stay in formidable-api.

Testing

• JavaScript smoke checks passed for the unchanged default choices, an additional filtered choice, keyboard activation, label association, descriptions, and asynchronous generation success/failure.
• ESLint: zero errors and three existing DocumentFragment warnings, matching master. Oxlint passed.
• git diff --check passed. This file is served directly, so no bundle rebuild is required.
• Browser verification remains pending because Playwright cannot launch Chrome in the local execution environment.

Manual verification

1. Open the form or View embed modal without the companion API changes and verify the existing choices and manual examples.
2. With the companion API changes, verify the additional API token choice and generated script example.
3. Verify Copy is unavailable while an asynchronous example loads or fails, and available when generation succeeds. Activate modal choices with Enter and Space.

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: Repository: Strategy11/formidable-forms/.coderabbit.yaml
• Review profile: CHILL
• Plan: Advanced
• Run ID: e9b85984-5a7b-4212-80ef-b48dc978f5ad

📥 Commits

Reviewing files that changed from the base of the PR and between 8d70667 and 5dff4d3.

📒 Files selected for processing: 1

• js/admin/embed.js

+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| In software, we rarely have meaningful requirements. Even if we do, the only measure of success that matters is whether our solution solves the customer's shifting idea of what their problem is. - Jeff Atwood |
+------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
  \
   \     /)/)
        ( '')
        /  |
      o(___)

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[deepsource-io]

DeepSource Code Review

We reviewed changes in 8d70667...5dff4d3 on this pull request. Below is the summary for the review, and you can see the individual issues we found as inline review comments.

See full review on DeepSource ↗

PR Report Card

Overall Grade

Security   Reliability   Complexity   Hygiene

Code Review Summary

Analyzer	Status	Updated (UTC)	Details
PHP		Oct 19, 2026 10:03p.m.	Review ↗
JavaScript		Oct 19, 2026 10:03p.m.	Review ↗

---

Important

AI Review is run only on demand for your team. We're only showing results of static analysis review right now. To trigger AI Review, comment @deepsourcebot review on this thread.

[franky-the-going-merry]

One blocker: the Copy icon is never hidden while an example loads or fails, so Copy can put "Generating script tag…" or the error text on the clipboard. The rest of the change works.

Checked on the PR branch (preview env, Lite at 1c19cd6):

• frm_embed_modal_options adds a fourth card and gets type, objectId, objectKey, content. The three default cards still show.
• A loadExample example uses a textarea and shows the description. The label for matches the field id on every row.
• Loading shows "Generating script tag…". A resolved string fills the field. A rejected promise and an empty string both show the error text.
• Copy icon: svg.hidden reads true on all three loading/failed rows, but there is no hidden attribute and the computed display is block (see the inline comment).

Not exercised: the real API add-on, Enter/Space on the cards by real key presses (read in source only), Copy on a successful example, Views, PHPUnit and Cypress (draft, CI skipped), and the code-review/security-review/simplify skills.

[franky-the-going-merry]

Blocker: this does not hide the icon. getCopyIcon() returns an SVG made with createElementNS, and hidden is not a real property on SVG elements. The assignment only sets a plain JS property. In the preview env the icon had no hidden attribute and its computed display was block while loading, after a failure and after an empty result. A user can click Copy and copy "Generating script tag…" or the error message, which is the case the PR says it prevents.

Use style.display, which works on SVG, and clear it on success.

Suggested change

	copyIcon.hidden = true;
	copyIcon.style.display = 'none';

Then in loadEmbedExample() replace copyIcon.hidden = false; with:

copyIcon.style.display = '';

[franky-the-going-merry]

Approve at fae5306. The Copy icon is now actually hidden while an example loads or fails, so Copy can no longer put the placeholder or the error text on the clipboard. That was the one blocker at 1c19cd6.

Verified this round (preview env, Lite on this head, forms list embed modal, an example row added per state through the frmEmbedFormExamples filter, page-only)

• Pending, rejected and empty examples: the Copy icon computes display: none and has zero width (it was display: block before). The field shows "Generating script tag…" or the error text.
• A resolved example (1.5 s delay): the icon comes back (display: block, 18px wide) and clicking it copies the script tag, not the placeholder. The two default rows (shortcode, PHP) are unchanged and show their icons.
• The delta is two lines in js/admin/embed.js: copyIcon.hidden = true becomes copyIcon.style.display = 'none', and the reveal sets it back to '', so the stylesheet decides the shown state. Nothing else reads copyIcon.hidden.

Not exercised: a screenshot of the modal (the evidence above is computed style and size, not an image), the real API add-on, Enter/Space on the cards by real key presses, Views, PHPUnit and Cypress (draft, CI skipped), and the code-review/security-review/simplify skills. The rest of the PR is unchanged since my 1c19cd6 pass.