Update lexxy to latest

Gemfile.lock

@@ -237,7 +237,7 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    lexxy (0.1.20.beta)
+    lexxy (0.1.23.beta)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)

Gemfile.saas.lock

@@ -313,7 +313,7 @@ GEM
       logger (~> 1.6)
     letter_opener (1.10.0)
       launchy (>= 2.2, < 4)
-    lexxy (0.1.20.beta)
+    lexxy (0.1.23.beta)
       rails (>= 8.0.2)
     lint_roller (1.1.0)
     logger (1.7.0)

app/assets/stylesheets/_global.css

@@ -219,6 +219,27 @@
   --color-card-7: oklch(var(--lch-purple-medium));
   --color-card-8: oklch(var(--lch-pink-medium));
 
+  /* Colors: Highlighter */
+  --highlight-1: rgb(136, 118, 38);
+  --highlight-2: rgb(185, 94, 6);
+  --highlight-3: rgb(207, 0, 0);
+  --highlight-4: rgb(216, 28, 170);
+  --highlight-5: rgb(144, 19, 254);
+  --highlight-6: rgb(5, 98, 185);
+  --highlight-7: rgb(17, 138, 15);
+  --highlight-8: rgb(148, 82, 22);
+  --highlight-9: rgb(102, 102, 102);
+
+  --highlight-bg-1: rgba(229, 223, 6, 0.3);
+  --highlight-bg-2: rgba(255, 185, 87, 0.3);
+  --highlight-bg-3: rgba(255, 118, 118, 0.3);
+  --highlight-bg-4: rgba(248, 137, 216, 0.3);
+  --highlight-bg-5: rgba(190, 165, 255, 0.3);
+  --highlight-bg-6: rgba(124, 192, 252, 0.3);
+  --highlight-bg-7: rgba(140, 255, 129, 0.3);
+  --highlight-bg-8: rgba(221, 170, 123, 0.3);
+  --highlight-bg-9: rgba(200, 200, 200, 0.3);
+
   /* Colors: Syntax highlighting */
   --color-code-token__att: oklch(var(--lch-blue-dark));
   --color-code-token__comment: oklch(var(--lch-ink-medium));

app/assets/stylesheets/lexxy.css

@@ -152,6 +152,11 @@
     }
   }
 
+  /* Temporarily hide the highlighter button until we tackle the styles */
+  [name="strikethrough"] + .lexxy-editor__toolbar-dropdown {
+    display: none;
+  }
+
   .lexxy-editor__toolbar-overflow-menu {
     background-color: var(--color-canvas);
     border-radius: 0.5ch;
@@ -167,6 +172,86 @@
     flex: 1;
   }
 
+  :where(.lexxy-highlight-dialog) {
+    .lexxy-highlight-dialog-content {
+      display: flex;
+      flex-direction: column;
+      gap: 0.75ch;
+
+      [data-button-group] {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+        gap: 0.5ch;
+      }
+
+      button {
+        appearance: none;
+        background: var(--color-canvas);
+        block-size: 3.5ch;
+        border: none;
+        border-radius: 0.5ch;
+        color: var(--color-ink);
+        cursor: pointer;
+        display: grid;
+        font-size: inherit;
+        inline-size: 3.5ch;
+        place-items: center;
+        position: relative;
+        outline: none;
+
+        &:after {
+          align-self: center;
+          content: "Aa";
+          display: inline-block;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          position: absolute;
+          inset-block-start: 0;
+          inset-block-end: 0;
+          inset-inline-end: 0;
+          inset-inline-start: 0;
+        }
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        &[aria-pressed="true"] {
+          box-shadow: 0 0 0 1px var(--color-canvas), 0 0 0 3px var(--color-link);
+
+          &:after {
+            content: "✓";
+          }
+        }
+      }
+
+      .lexxy-highlight-dialog-reset {
+        inline-size: 100%;
+
+        &[disabled] {
+          display: none;
+        }
+
+        &:after { display: none; }
+      }
+    }
+  }
+
+  .attachment__caption {
+    textarea {
+      background-color: var(--input-background, transparent);
+      border-radius: var(--input-border-radius, 0.5em);
+      border: var(--input-border-size, 1px) solid var(--input-border-color, var(--color-ink-medium));
+      color: var(--input-color, var(--color-ink));
+      font-size: max(16px, 1em);
+      inline-size: 100%;
+      line-height: inherit;
+      max-inline-size: 100%;
+      padding: var(--input-padding, 0.5em 0.8em);
+      resize: none;
+    }
+  }
+
   /* Based on .input, .input--select */
   .lexxy-code-language-picker {
     -webkit-appearance: none;

app/assets/stylesheets/rich-text-content.css

@@ -40,6 +40,10 @@
       text-decoration: line-through;
     }
 
+    :where(mark, .lexxy-content__highlight) {
+      background-color: transparent;
+      color: inherit;
+    }
 
     :where(p, blockquote) {
       letter-spacing: -0.005ch;
@@ -201,7 +205,7 @@
     color: color-mix(in oklch, var(--color-ink) 66%, transparent);
     font-size: var(--text-small);
 
-    .input {
+    textarea {
       --input-border-radius: 0.3em;
       --input-border-size: 0;
       --input-padding: 0;

test/system/smoke_test.rb

@@ -24,7 +24,7 @@ class SmokeTest < ApplicationSystemTestCase
 
     within("form lexxy-editor figure.attachment[data-content-type='image/jpeg']") do
       assert_selector "img[src*='/rails/active_storage']"
-      assert_selector "figcaption input[placeholder='moon.jpg']"
+      assert_selector "figcaption textarea[placeholder='moon.jpg']"
     end
 
     click_on "Post"