Improve inputs for headers, query params, to stretch when focused (like HTTPie)

[brettimus]

TODO

• Press ESC to blur input
• Investigate why newlines are possible in FireFox
• Test safari.... 🙈

Summary

This PR introduces a new input-like component that we can use for adding query/path parameters and headers in their respective forms.

It also factors out the codemirror editor components into their own module in the components directory

httpie-inputs.mp4

[pkg-pr-new]

Open in Stackblitz

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/studio@234

pnpm add https://pkg.pr.new/fiberplane/fpx/@fiberplane/hono-otel@234

commit: 2e0b67b

[brettimus]

Hmmm one annoying thing that came up is that the codemirror inputs swallow our keyboard shortcuts (cmd+g and cmd+b) when they have focus

[keturiosakys]

Looks good! Ideally we'd "blur" the text input when you hit Escape so that it would unblock using the cmd+b and other keyboard shortcuts.

[brettimus]

Looks good! Ideally we'd "blur" the text input when you hit Escape so that it would unblock using the cmd+b and other keyboard shortcuts.

did it!

[flenter]

nice!