lexxy 0.1.20.beta → 0.1.22.beta

data/app/assets/stylesheets/lexxy-content.css

@@ -44,7 +44,7 @@
   .lexxy-content__bold {
     font-weight: bold;
   }
-  
+
   .lexxy-content__strikethrough {
     text-decoration: line-through;
   }
@@ -53,6 +53,12 @@
     text-decoration: underline;
   }
 
+  mark,
+  .lexxy-content__highlight {
+    background-color: transparent;
+    color: inherit;
+  }
+
   blockquote {
     border-inline-start: 0.25em solid var(--lexxy-color-ink-lighter);
     font-style: italic;
@@ -105,6 +111,14 @@
     }
   }
 
+  li.lexxy-nested-listitem {
+    list-style-type: none;
+
+    ol, ul {
+      margin: 0;
+    }
+  }
+
   > :last-child {
     margin-block-end: 0;
   }
@@ -121,7 +135,6 @@
   .code-token__property,
   .token.boolean,
   .token.constant,
-  .token.deleted,
   .token.number,
   .token.property,
   .token.symbol,
@@ -134,6 +147,7 @@
   .token.builtin,
   .token.char,
   .token.inserted,
+  .token.line,
   .token.selector,
   .token.string {
     color: var(--lexxy-color-code-token-selector);
@@ -151,9 +165,11 @@
 
   /* Operators and symbolic entities */
   .code-token__operator,
+  .token.deleted,
   .token.entity,
   .token.operator,
-  .token.url {
+  .token.url,
+  code[data-language="diff"] .code-token__operator + .code-token__selector {
     color: var(--lexxy-color-code-token-operator);
   }
 
@@ -211,12 +227,14 @@
   color: var(--lexxy-color-text-subtle);
   font-size: var(--lexxy-text-small);
 
-  input {
+  textarea {
     background: var(--lexxy-color-canvas);
-    color: var(--lexxy-color-text);
     border: none;
+    color: inherit;
+    font-family: inherit;
     inline-size: 100%;
     max-inline-size: 100%;
+    resize: none;
     text-align: center;
 
     &:focus {

data/app/assets/stylesheets/lexxy-editor.css

@@ -163,29 +163,64 @@
   background-color: var(--lexxy-color-canvas);
   border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
   box-shadow: var(--lexxy-shadow);
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--lexxy-toolbar-gap);
   inset-inline-end: 0;
   padding: var(--lexxy-toolbar-gap);
   position: absolute;
+
+  .lexxy-editor__toolbar-spacer {
+    display: none;
+  }
+
+  * + .lexxy-editor__toolbar-spacer + button {
+    margin-left: 0.5lh;
+  }
 }
 
-/* Link dialog
+/* Dialog
 /* -------------------------------------------------------------------------- */
 
-:where(.lexxy-link-dialog) {
+:where(.lexxy-dialog) {
   display: contents;
+  position: relative;
 
   dialog {
     background-color: var(--lexxy-color-canvas);
-    border: 1px solid var(--lexxy-color-ink-lighter);
+    border: 2px solid var(--lexxy-color-selected-hover);
     border-radius: var(--lexxy-radius);
-    box-shadow: var(--lexxy-shadow);
+    border-start-start-radius: 0;
+    box-sizing: border-box;
     color: var(--lexxy-color-ink);
+    inset-block-start: 2lh;
+    inline-size: 100%;
+    max-inline-size: 38ch;
+    margin: 0;
     padding: 1ch;
     position: absolute;
-    z-index: 1;
+    z-index: 3;
   }
 
+  &:has(dialog[open]) + .lexxy-editor__toolbar-button {
+    background-color: var(--lexxy-color-selected-hover);
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+  }
+}
+
+:where(lexxy-toolbar[overflowing]) .lexxy-dialog dialog {
+  --dialog-padding: 0.5ch;
+  inset-inline-end: var(--dialog-padding);
+  inset-inline-start: var(--dialog-padding) !important;
+  inline-size: calc(100% - 2 * var(--dialog-padding));
+  margin: auto;
+}
+
+/* Link dialog
+/* -------------------------------------------------------------------------- */
+
+:where(.lexxy-link-dialog) {
   .lexxy-dialog-actions {
     display: flex;
     font-size: var(--lexxy-text-small);
@@ -205,7 +240,8 @@
     border: 1px solid var(--lexxy-color-ink-lighter);
     border-radius: var(--lexxy-radius);
     color: var(--lexxy-color-text);
-    min-inline-size: 30ch;
+    box-sizing: border-box;
+    inline-size: 100%;
   }
 
   button {
@@ -221,6 +257,66 @@
   }
 }
 
+/* Color dialog
+/* -------------------------------------------------------------------------- */
+
+: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 {
+      block-size: 3.5ch;
+      color: var(--lexxy-color-text);
+      inline-size: 3.5ch;
+      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(--lexxy-color-canvas), 0 0 0 3px var(--lexxy-color-accent-dark);
+
+        &:after {
+          content: "✓";
+        }
+      }
+    }
+
+    .lexxy-highlight-dialog-reset {
+      inline-size: 100%;
+
+      &[disabled] {
+        display: none;
+      }
+
+      &:after { display: none; }
+    }
+  }
+}
+
 /* Language picker
 /* -------------------------------------------------------------------------- */
 

data/app/assets/stylesheets/lexxy-variables.css

@@ -35,6 +35,26 @@
   --lexxy-color-selected-dark: var(--lexxy-color-blue);
   --lexxy-color-code-bg: var(--lexxy-color-ink-lightest);
 
+  --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);
+
   /* Typography */
   --lexxy-font-base: system-ui, sans-serif;
   --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;

data/config/ci.rb

@@ -0,0 +1,13 @@
+# Run using bin/ci
+
+CI.run do
+  step "Style: Ruby", "bin/rubocop -f github"
+  step "Style: JavaScript", "yarn lint"
+
+  step "Tests: prepare", "env RAILS_ENV=test bin/rails db:test:prepare"
+  step "Tests: run", "env RAILS_ENV=test bin/rails test:all -d"
+
+  unless success?
+    failure "Signoff: CI failed.", "Fix the issues and try again."
+  end
+end

data/lib/lexxy/version.rb

@@ -1,3 +1,3 @@
 module Lexxy
-  VERSION = "0.1.20.beta"
+  VERSION = "0.1.22.beta"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: lexxy
 version: !ruby/object:Gem::Version
-  version: 0.1.20.beta
+  version: 0.1.22.beta
 platform: ruby
 authors:
 - Jorge Manrubia
 bindir: bin
 cert_chain: []
-date: 2025-11-07 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -136,6 +136,7 @@ files:
 - app/views/people/_person.html.erb
 - app/views/people/_prompt_item.html.erb
 - app/views/people/index.html.erb
+- config/ci.rb
 - config/routes.rb
 - lib/action_text/attachables/remote_video.rb
 - lib/active_storage/blob_with_preview_url.rb
@@ -169,7 +170,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.2
+rubygems_version: 3.6.9
 specification_version: 4
 summary: A new editor for Action Text based on Meta's Lexical framework.
 test_files: []