Class: PhlexKit::Codeblock

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/codeblock/codeblock.rb

Overview

Preformatted code block. Ported from ruby_ui's RubyUI::Codeblock, minus the server-side syntax highlighting (ruby_ui uses the rouge gem). Ships a plain styled 

; add rouge yourself and pass pre-highlighted HTML if wanted.

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(code = nil, syntax: nil, **attrs) ⇒ Codeblock

Returns a new instance of Codeblock.



6
7
8
9
10
 
# File 'app/components/phlex_kit/codeblock/codeblock.rb', line 6

def initialize(code = nil, syntax: nil, **attrs)
  @code = code
  @syntax = syntax
  @attrs = attrs
end

Instance Method Details

#view_template(&block) ⇒ Object 



11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
# File 'app/components/phlex_kit/codeblock/codeblock.rb', line 11

def view_template(&block)
  # tabindex=0 + role=region: the block scrolls (overflow:auto), so it must
  # be keyboard-focusable (WCAG 2.1.1 scrollable-region-focusable). Pass
  # `aria: { label: ... }` to name the region for AT.
  base = { class: "pk-codeblock", tabindex: "0", role: "region", data: { syntax: @syntax } }
  # A region landmark without a name is an axe violation — default one
  # from the syntax; a caller aria: { label: } replaces it (never fused).
  unless aria_labelled?
    base[:aria] = { label: @syntax ? "#{@syntax} code" : "Code" }
  end
  div(**mix(base, @attrs)) do
    pre do
      if block
        code(&block)
      else
        code { @code }
      end
    end
  end
end