Feature: Lexxy support

.rubocop.yml

@@ -13,7 +13,7 @@ AllCops:
     - spec/dummy/config/**/*
     - spec/dummy/db/**/*
     - spec/dummy/tmp/**/*
-  TargetRubyVersion: 3.4
+  TargetRubyVersion: 4.0
 
 Rails/RakeEnvironment:
   Exclude:

Gemfile.lock

@@ -1,6 +1,6 @@
 GIT
   remote: https://github.com/katalyst/thermite.git
-  revision: e031fffc9e6eb91a6f330135c3086b3e2e6c0f27
+  revision: cb7c4970b79d777d17aeb40afc3b8f83e8cf5f62
   specs:
     katalyst-thermite (1.0.0)
       activesupport
@@ -12,11 +12,12 @@ PATH
     katalyst-koi (5.8.0)
       bcrypt
       importmap-rails
-      katalyst-content (>= 3.0.0.alpha.1)
-      katalyst-govuk-formbuilder (< 2)
+      katalyst-content (>= 3.2)
+      katalyst-govuk-formbuilder (>= 1.28.0, < 2)
       katalyst-html-attributes
       katalyst-navigation (>= 2)
       katalyst-tables (>= 3.5)
+      lexxy
       pagy (>= 8.0)
       rails (>= 8.0)
       rotp
@@ -143,8 +144,8 @@ GEM
       xpath (~> 3.2)
     cbor (0.5.10.3)
     chunky_png (1.4.0)
-    compare-xml (0.66)
-      nokogiri (~> 1.8)
+    compare-xml (1.0.0)
+      nokogiri (>= 1.6)
     concurrent-ruby (1.3.7)
     connection_pool (3.0.2)
     cose (1.3.1)
@@ -153,7 +154,7 @@ GEM
     crack (1.0.1)
       bigdecimal
       rexml
-    crass (1.0.6)
+    crass (1.0.7)
     cuprite (0.17)
       capybara (~> 3.0)
       ferrum (~> 0.17.0)
@@ -189,12 +190,12 @@ GEM
     flipper-active_record (1.4.2)
       activerecord (>= 4.2, < 9)
       flipper (~> 1.4.2)
-    fugit (1.12.2)
+    fugit (1.12.3)
       et-orbi (~> 1.4)
       raabro (~> 1.4)
-    globalid (1.3.0)
+    globalid (1.4.0)
       activesupport (>= 6.1)
-    govuk_design_system_formbuilder (6.2.1)
+    govuk_design_system_formbuilder (6.3.0)
       actionview (>= 7.2)
       activemodel (>= 7.2)
       activesupport (>= 7.2)
@@ -215,17 +216,17 @@ GEM
       prism (>= 1.3.0)
       rdoc (>= 4.0.0)
       reline (>= 0.4.2)
-    json (2.19.9)
+    json (2.20.0)
     jwt (3.2.0)
       base64
     katalyst-basic-auth (1.0.0)
-    katalyst-content (3.1.3)
+    katalyst-content (3.2.0)
       active_storage_validations
       activerecord
       katalyst-govuk-formbuilder
       katalyst-html-attributes
       view_component
-    katalyst-govuk-formbuilder (1.27.0)
+    katalyst-govuk-formbuilder (1.28.0)
       govuk_design_system_formbuilder (>= 6.2.0)
     katalyst-html-attributes (1.1.2)
       activesupport
@@ -238,6 +239,8 @@ GEM
       katalyst-html-attributes
       view_component (>= 4.0.0)
     language_server-protocol (3.17.0.5)
+    lexxy (0.9.21)
+      rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)
     loofah (2.25.1)
@@ -300,9 +303,6 @@ GEM
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
       rack
-    psych (5.4.0)
-      date
-      stringio
     public_suffix (7.0.5)
     puma (8.0.2)
       nio4r (~> 2.0)
@@ -355,9 +355,14 @@ GEM
       zeitwerk (~> 2.6)
     rainbow (3.1.1)
     rake (13.4.2)
-    rdoc (7.2.0)
+    rbs (4.0.3)
+      logger
+      prism (>= 1.6.0)
+      tsort
+    rdoc (8.0.0)
       erb
-      psych (>= 4.0.0)
+      prism (>= 1.6.0)
+      rbs (>= 4.0.0)
       tsort
     regexp_parser (2.12.0)
     reline (0.6.3)
@@ -467,7 +472,6 @@ GEM
     sqlite3 (2.9.5-x86_64-linux-musl)
     stimulus-rails (1.3.4)
       railties (>= 6.0.0)
-    stringio (3.2.0)
     thor (1.5.0)
     timeout (0.6.1)
     tpm-key_attestation (0.14.1)
@@ -502,7 +506,7 @@ GEM
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
     webrick (1.9.2)
-    websocket-driver (0.8.1)
+    websocket-driver (0.8.2)
       base64
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -553,4 +557,4 @@ DEPENDENCIES
   webmock
 
 BUNDLED WITH
-  4.0.14
+  4.0.15

app/assets/stylesheets/koi/forms/checkboxes.css

@@ -33,7 +33,7 @@
   margin-block-start: calc(-0.5 * var(--input-size));
   translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
   /* Firefox fix - unable to calculate baseline from dynamic height */
-  min-height: var(--input-size);
+  min-block-size: var(--input-size);
 }
 
 .govuk-checkboxes__item::after {
@@ -57,7 +57,7 @@
   cursor: pointer;
   touch-action: manipulation;
   margin-block-end: 0;
-  min-height: var(--input-size);
+  min-block-size: var(--input-size);
 }
 
 .govuk-checkboxes__hint {

app/assets/stylesheets/koi/forms/combobox.css

@@ -18,7 +18,7 @@
 
   .hw-combobox__main__wrapper {
     display: flex;
-    min-height: var(--input-size);
+    min-block-size: var(--input-size);
     align-items: center;
   }
 
@@ -36,7 +36,7 @@
     width: 100%;
     padding: 0;
     height: unset;
-    min-height: unset;
+    min-block-size: unset;
   }
 
   /* disabled */

app/assets/stylesheets/koi/forms/index.css

@@ -1,3 +1,4 @@
+@import url("/lexxy.css");
 @import url("/trix.css");
 
 @import url("label.css");
@@ -15,6 +16,7 @@
 @import url("file-upload.css");
 @import url("image-field.css");
 @import url("document-field.css");
+@import url("lexxy.css");
 @import url("radios.css");
 @import url("password.css");
 @import url("select.css");

app/assets/stylesheets/koi/forms/input.css

@@ -1,15 +1,15 @@
-:is(
-  input:not([type="checkbox"], [type="radio"], [type="color"], [type="button"])
-),
-:is(select, textarea),
-trix-editor {
+:where(
+  input:not([type="checkbox"], [type="radio"], [type="color"], [type="button"]),
+  select,
+  textarea
+) {
   background: var(--color-light);
   border-radius: var(--input-radius);
   border: var(--stroke-input);
   color: var(--color-dark);
   padding: var(--space-3xs);
   width: 100%;
-  min-height: var(--input-size);
+  min-block-size: var(--input-size);
 
   &::placeholder {
     color: var(--color-mid);
@@ -30,15 +30,13 @@ trix-editor {
   }
 }
 
-:is(input, select, textarea, .govuk-richtextarea),
-trix-editor {
+:where(input, select, textarea) {
   accent-color: var(--color-primary);
 }
 
-:is(textarea),
-trix-editor {
-  resize: vertical;
+:where(textarea) {
   line-height: var(--leading-fine);
+  resize: vertical;
 }
 
 .govuk-input {

app/assets/stylesheets/koi/forms/lexxy.css

@@ -0,0 +1,53 @@
+:root {
+  /* Colors */
+  --lexxy-color-ink: var(--color-dark);
+  --lexxy-color-ink-medium: var(--color-dark-glare);
+  --lexxy-color-ink-light: var(--color-mid);
+  --lexxy-color-ink-lighter: var(--color-tint);
+  --lexxy-color-ink-lightest: var(--color-tint);
+  --lexxy-color-ink-inverted: var(--color-light);
+
+  /* Typography */
+  --lexxy-font-base: var(--font-base);
+  --lexxy-font-mono: var(--font-mono);
+  --lexxy-text-small: var(--size-step--1);
+  --lexxy-content-margin: var(--space-s);
+
+  /* Focus ring */
+  --lexxy-focus-ring-color: var(--focus-color);
+}
+
+:where(lexxy-toolbar) {
+  border: none;
+}
+
+:where(lexxy-editor) {
+  --lexxy-editor-padding: var(--space-2xs);
+  --lexxy-editor-rows: 5lh;
+
+  @supports (min-block-size: attr(rows lh)) {
+    --lexxy-editor-rows: attr(rows lh, 5lh);
+  }
+
+  border: none;
+  margin-block-end: var(--flow-space, var(--space-2xs));
+
+  [role="textbox"] {
+    border-radius: var(--input-radius);
+    border: var(--stroke-input);
+
+    &:focus-visible {
+      outline: var(--focus-outline);
+      outline-offset: 0;
+      box-shadow: var(--focus-shadow);
+    }
+
+    .govuk-rich-textarea--error &:not(:focus-visible) {
+      border-color: var(--govuk-error-color);
+    }
+  }
+}
+
+.govuk-error-message:has(+ lexxy-editor) {
+  margin-block-end: unset;
+}

app/assets/stylesheets/koi/forms/radios.css

@@ -33,7 +33,7 @@
   margin-block-start: calc(-0.5 * var(--input-size));
   translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
   /* Firefox fix - unable to calculate baseline from dynamic height */
-  min-height: var(--input-size);
+  min-block-size: var(--input-size);
 }
 
 .govuk-radios__item::after {
@@ -58,7 +58,7 @@
   cursor: pointer;
   touch-action: manipulation;
   margin-block-end: 0;
-  min-height: var(--input-size);
+  min-block-size: var(--input-size);
 }
 
 .govuk-radios__hint {

app/assets/stylesheets/koi/forms/textarea.css

@@ -3,7 +3,7 @@
 }
 
 .govuk-textarea {
-  min-height: calc(
+  min-block-size: calc(
     var(--size-step-0) * var(--leading-fine) * 5 + var(--space-3xs) * 2
   );
 }

app/assets/stylesheets/koi/forms/trix.css

@@ -13,7 +13,7 @@ trix-toolbar {
   }
 
   .trix-button--dialog {
-    min-height: 2.2rem;
+    min-block-size: 2.2rem;
   }
 
   .trix-button:not(:first-child) {
@@ -26,12 +26,36 @@ trix-toolbar {
   }
 }
 
-.govuk-richtextarea {
-  min-height: calc(
+trix-editor {
+  background: var(--color-light);
+  border-radius: var(--input-radius);
+  border: var(--stroke-input);
+  color: var(--color-dark);
+  padding: var(--space-2xs);
+  min-block-size: calc(
     var(--size-step-0) * var(--leading-fine) * 5 + var(--space-3xs) * 2
   );
-}
 
-.govuk-richtextarea--error:not(:focus-visible) {
-  border-color: var(--govuk-error-color);
+  &::placeholder {
+    color: var(--color-mid);
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    color: inherit;
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: 0;
+    box-shadow: var(--focus-shadow);
+  }
+
+  /* Note: turbo-permanent prevents govuk-rich-textarea--error toggle */
+  .govuk-form-group--error > &:not(:focus-visible) {
+    border-color: var(--govuk-error-color);
+  }
 }

app/assets/stylesheets/koi/index.css

@@ -4,6 +4,7 @@
 @import url("/katalyst/content/editor.css");
 @import url("/katalyst/navigation.css");
 @import url("/katalyst/tables.css");
+@import url("/lexxy-content.css");
 
 @import url("global/variables.css");
 @import url("global/global-styles.css");

app/controllers/admin/active_storage/direct_uploads_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Admin
+  module ActiveStorage
+    class DirectUploadsController < ::ActiveStorage::DirectUploadsController
+      include Koi::Controller
+    end
+  end
+end