CodeEditor

A syntax-highlighting code editor with line folding, autocomplete, and an optional gutter. Backed by the Flet CodeEditor extension, so the code_editor extension must be enabled in ruflet.yaml:

extensions:
  - code_editor

Example

CODE = <<~RUBY
  class App < Ruflet::App
    def view(page)
      page.add(text(value: "Hello from Ruflet!"))
    end
  end
RUBY

editor = code_editor(
  CODE,
  language: "ruby",
  code_theme: "atom-one-dark",
  read_only: false,
  expand: true,
  on_change: ->(event) { @length = event.data.to_s.length }
)

The first positional argument is the editor value (the code), so code_editor("puts 1", language: "ruby") and code_editor(value: "puts 1", language: "ruby") are equivalent.

Properties

• value — the full text of the editor, including folded sections.
• language — a highlight.js language id used for

syntax highlighting (e.g. "ruby", "python", "javascript", "json", "yaml"). When omitted, no highlighting is applied.

• code_theme — a highlight.js theme name shared with Markdown

(e.g. "atom-one-light", "atom-one-dark", "monokai-sublime", "github").

• text_style — a text style map for the editor content (size, weight,

font_family, …).

• padding — padding around the editor content.
• read_only — when true, the text cannot be edited (default false).
• autofocus — focus the editor on mount (default false).
• autocomplete — enable the autocomplete popup (default false).
• autocomplete_words — an array of words offered by autocomplete.
• selection — the current text selection / caret position

({ base_offset:, extent_offset: }).

• gutter_style — styling for the line-number gutter.
• expand — fill the available space in a row/column.
• width / height — fixed size when not expanding.
• tooltip, visible, opacity, rtl, disabled — the usual layout

properties.

Events

• on_change — the text changed (data: the new value).
• on_selection_change — the selection or caret position changed.
• on_focus — the editor gained focus.
• on_blur — the editor lost focus.

Reference

• Family: materials
• Widget type: codeeditor
• Helper: code_editor

Complete API

Helpers

• code_editor(value = ..., **props)
• codeeditor(value = ..., **props)

Accepted properties

• align — Alignment of the control within its parent.
• animate_align — Animates alignment changes.
• animate_margin — Animates margin changes.
• animate_offset — Animates offset changes.
• animate_opacity — Animates opacity changes.
• animate_position — Animates position changes.
• animate_rotation — Animates rotation changes.
• animate_scale — Animates scale changes.
• animate_size — Animates size changes.
• aspect_ratio — Width-to-height ratio to maintain.
• autocomplete — Sets the autocomplete property.
• autocomplete_words — Sets the autocomplete words property.
• autofocus — Requests focus when first shown.
• badge — Badge drawn on the corner of the control.
• bottom — Bottom offset when positioned inside a stack.
• code_theme — Sets the code theme property.
• col — Responsive column span (1-12) per breakpoint.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• gutter_style — Gutter style.
• height — Fixed height in logical pixels.
• key — Stable identity used to preserve state across rebuilds.
• language — Sets the language property.
• left — Left offset when positioned inside a stack.
• margin — Outer spacing around the control.
• offset — Translation offset applied to the control.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• padding — Inner spacing between the border and the content.
• read_only — Prevents editing while still allowing selection.
• right — Right offset when positioned inside a stack.
• rotate — Rotation applied to the control.
• rtl — Renders right-to-left when true.
• scale — Scale transform applied to the control.
• selection — Sets the selection property.
• size_change_interval — Throttle interval for on_size_change, in ms.
• text_style — Text style.
• tooltip — Text shown on hover/long-press.
• top — Top offset when positioned inside a stack.
• value — The control's current value.
• visible — Hides the control when false.
• width — Fixed width in logical pixels.

Events

• on_animation_end — Fired when an animation completes.
• on_blur — Fired when the control loses focus.
• on_change — Fired when the value changes.
• on_focus — Fired when the control gains focus.
• on_selection_change — Fired when the selection range changes.
• on_size_change — Fired when the control's size changes.

Wire reference

• Family: materials
• Widget type: codeeditor