Renders a Monaco (VS Code) editor bound to a form field.

Third-party dependency

Monaco is loaded lazily from a CDN by the PineMonaco hook — nothing is downloaded unless this component is on the page. Register the hooks from priv/static/pine_ui.js:

hooks: { ...PineHooks }

Self-hosting instead is a matter of pointing cdn_base at your own copy.

Progressive enhancement

The field is a real <textarea> that Monaco takes over once it loads. If the CDN is blocked or the script fails, the textarea remains and the form still submits — an editor that silently loses a user's work is worse than a plain text box.

The editor subtree is wrapped in phx-update="ignore" because Monaco owns that DOM entirely; without it, a LiveView patch would destroy the editor mid-edit.

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• value (:string) - Defaults to "".
• language (:string) - Defaults to "html".
• theme (:string) - Defaults to "vs-dark". Must be one of "vs", "vs-dark", or "hc-black".
• height (:string) - Defaults to "h-80".
• label (:string) - Defaults to nil.
• font_size (:integer) - Defaults to 14.
• cdn_base (:string) - Override the Monaco CDN base URL. Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Renders a video player with custom controls.

Accessibility

Custom video chrome is easy to get wrong, so this deliberately keeps the native <video> element's own keyboard behaviour available: the element stays focusable and controls is restored whenever JavaScript has not initialised. Every control is a real button with an accessible name, and the scrubber is an <input type="range"> so it works with a keyboard and a screen reader.

Pass captions_src wherever you can — a video player without captions excludes people.

Attributes

• id (:string) - Defaults to nil.
• src (:string) - Video URL. Use :source slots for multiple formats. Defaults to nil.
• poster (:string) - Defaults to nil.
• autoplay (:boolean) - Defaults to false.
• loop (:boolean) - Defaults to false.
• muted (:boolean) - Defaults to false.
• aspect (:string) - Defaults to "video". Must be one of "video", "square", "wide", or "auto".
• captions_src (:string) - A WebVTT track. Strongly recommended. Defaults to nil.
• captions_label (:string) - Defaults to "English".
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• source - Accepts attributes:
  • src (:string) (required)
  • type (:string) (required) - A MIME type, e.g. "video/webm".