RandomizeScript() — ui Function Reference

Architecture documentation for the RandomizeScript() function in random-button.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ RandomizeScript() — ui Function Reference

Dependency Diagram

graph TD
  ae914292_f5e7_ca7d_e33b_cca8f0bfa79f["RandomizeScript()"]
  931e1cb0_2628_a62b_0d12_e2b8414505dc["random-button.tsx"]
  ae914292_f5e7_ca7d_e33b_cca8f0bfa79f -->|defined in| 931e1cb0_2628_a62b_0d12_e2b8414505dc
  style ae914292_f5e7_ca7d_e33b_cca8f0bfa79f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/random-button.tsx lines 147–181

export function RandomizeScript() {
  return (
    <Script
      id="randomize-listener"
      strategy="beforeInteractive"
      dangerouslySetInnerHTML={{
        __html: `
            (function() {
              // Forward R key
              document.addEventListener('keydown', function(e) {
                if ((e.key === 'r' || e.key === 'R') && !e.metaKey && !e.ctrlKey) {
                  if (
                    (e.target instanceof HTMLElement && e.target.isContentEditable) ||
                    e.target instanceof HTMLInputElement ||
                    e.target instanceof HTMLTextAreaElement ||
                    e.target instanceof HTMLSelectElement
                  ) {
                    return;
                  }
                  e.preventDefault();
                  if (window.parent && window.parent !== window) {
                    window.parent.postMessage({
                      type: '${RANDOMIZE_FORWARD_TYPE}',
                      key: e.key
                    }, '*');
                  }
                }
              });

            })();
          `,
      }}
    />
  )
}