Add markdown support in form field errors

[Copilot]

This PR adds markdown support to form field error messages, allowing servers to send formatted error messages with links, bold text, italic text, and other markdown formatting.

Problem

Previously, form components rendered error messages as plain text. When servers sent HTML or markdown in error messages, it would display as literal text rather than formatted content. This made it impossible to include helpful links or emphasize important parts of error messages.

Solution

The implementation leverages the existing markdown infrastructure (remarkable library and renderMarkdown directive) already used in other parts of the codebase. The change is minimal and surgical:

Before:

return html` <div class="alert-error">${error}</div> `;

After:

return html` <div class="alert-error">${renderMarkdown(error)}</div> `;

Features

• ✅ Bold text: **bold** → bold
• ✅ Italic text: *italic* → italic
• ✅ Links: [link](https://example.com) → link
• ✅ Mixed formatting: Combined bold, italic, and links work correctly
• ✅ Backward compatible: Plain text errors work exactly as before
• ✅ Universal: Works with all FormElement-based components (Checkbox, TextInput, Select, etc.)

Example Usage

// Server can now send markdown-formatted errors
const errors = [
  'Please read the **terms and conditions** at [this link](https://example.com/terms)',
  'This field *requires* a valid email address'
];

// These will render with proper formatting in any form component
<temba-textinput .errors=${errors} />
<temba-checkbox .errors=${errors} />

Testing

• Added comprehensive test suite covering plain text, markdown, and integration scenarios
• All 570 existing tests continue to pass (no regressions)
• Visual regression protection with screenshot baselines
• 77.25% code coverage maintained

Changes

• Core: Modified FormField.ts (2 lines added, 1 modified)
• Tests: Added temba-formfield.test.ts and integration tests
• Assets: Added screenshot baselines for visual regression testing

The implementation is backward compatible and ready for production use.

Fixes #554.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• example.com
  • Triggering command: /home/REDACTED/work/temba-components/temba-components/node_modules/puppeteer/.local-chromium/linux-982053/chrome-linux/chrome --disable-REDACTED-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=Translate,BackForwardCache --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --enable-blink-features=IdleDetection --export-tagged-pdf --headless --hide-scrollbars --mute-audio --font-render-hinting=medium --force-color-profile=srgb --hide-scrollbars --disable-web-security --force-device-scale-factor=1 --no-sandbox --disable-gpu --disable-font-subpixel-positioning --disable-lcd-text --force-prefers-reduced-motion --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-renderer-REDACTEDing --disable-gpu-sandbox --disable-software-rasterizer --disable-REDACTED-networking --disable-default-apps --disable-extensions --disable-sync --disable-translate --hide-crash-restore-bubble --metrics-recording-only --no-first-run --safebrowsing-disable-auto-update --use-mock-keychain --disable-ipc-flooding-protection --disable-component-update --disable-domain-reliability --remote-debugging-port=0 --user-data-dir=/tmp/puppeteer_dev_chrome_profile-xx1AZm about:blank (dns block)
  • Triggering command: /home/REDACTED/work/temba-components/temba-components/node_modules/puppeteer/.local-chromium/linux-982053/chrome-linux/chrome --disable-REDACTED-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=Translate,BackForwardCache --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --enable-blink-features=IdleDetection --export-tagged-pdf --headless --hide-scrollbars --mute-audio --font-render-hinting=medium --force-color-profile=srgb --hide-scrollbars --disable-web-security --force-device-scale-factor=1 --no-sandbox --disable-gpu --disable-font-subpixel-positioning --disable-lcd-text --force-prefers-reduced-motion --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-renderer-REDACTEDing --disable-gpu-sandbox --disable-software-rasterizer --disable-REDACTED-networking --disable-default-apps --disable-extensions --disable-sync --disable-translate --hide-crash-restore-bubble --metrics-recording-only --no-first-run --safebrowsing-disable-auto-update --use-mock-keychain --disable-ipc-flooding-protection --disable-component-update --disable-domain-reliability --remote-debugging-port=0 --user-data-dir=/tmp/puppeteer_dev_chrome_profile-yumQyW about:blank (dns block)
  • Triggering command: /home/REDACTED/work/temba-components/temba-components/node_modules/puppeteer/.local-chromium/linux-982053/chrome-linux/chrome --disable-REDACTED-networking --enable-features=NetworkService,NetworkServiceInProcess --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-breakpad --disable-client-side-phishing-detection --disable-component-extensions-with-REDACTED-pages --disable-default-apps --disable-dev-shm-usage --disable-extensions --disable-features=Translate,BackForwardCache --disable-hang-monitor --disable-ipc-flooding-protection --disable-popup-blocking --disable-prompt-on-repost --disable-renderer-REDACTEDing --disable-sync --force-color-profile=srgb --metrics-recording-only --no-first-run --enable-automation --password-store=basic --use-mock-keychain --enable-blink-features=IdleDetection --export-tagged-pdf --headless --hide-scrollbars --mute-audio --font-render-hinting=medium --force-color-profile=srgb --hide-scrollbars --disable-web-security --force-device-scale-factor=1 --no-sandbox --disable-gpu --disable-font-subpixel-positioning --disable-lcd-text --force-prefers-reduced-motion --disable-REDACTED-timer-throttling --disable-REDACTEDing-occluded-windows --disable-renderer-REDACTEDing --disable-gpu-sandbox --disable-software-rasterizer --disable-REDACTED-networking --disable-default-apps --disable-extensions --disable-sync --disable-translate --hide-crash-restore-bubble --metrics-recording-only --no-first-run --safebrowsing-disable-auto-update --use-mock-keychain --disable-ipc-flooding-protection --disable-component-update --disable-domain-reliability --remote-debugging-port=0 --user-data-dir=/tmp/puppeteer_dev_chrome_profile-QlUPm3 about:blank (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.