lexxy 1.0.0 → 1.0.2

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

@@ -5,6 +5,7 @@
 
 :where(.lexxy-content) {
   color: var(--lexxy-color-ink);
+  font-size: var(--lexxy-text-size);
 
   h1, h2, h3, h4, h5, h6 {
     display: block;
@@ -18,12 +19,12 @@
     }
   }
 
-  h1 { font-size: 2rem; }
-  h2 { font-size: 1.5rem; }
-  h3 { font-size: 1.25rem; }
-  h4 { font-size: 1rem; }
-  h5 { font-size: 0.875rem; }
-  h6 { font-size: 0.75rem; }
+  h1 { font-size: 2em; }
+  h2 { font-size: 1.5em; }
+  h3 { font-size: 1.25em; }
+  h4 { font-size: 1em; }
+  h5 { font-size: 0.875em; }
+  h6 { font-size: 0.75em; }
 
   p,
   ul,
@@ -31,8 +32,8 @@
   dl,
   blockquote,
   figure,
-  .attachment,
-  .attachment-gallery {
+  :where(.attachment),
+  :where(.attachment-gallery) {
     margin-block: 0 var(--lexxy-content-margin);
     position: relative;
 
@@ -45,28 +46,28 @@
     }
   }
 
-  .lexxy-content__italic {
+  :where(.lexxy-content__italic) {
     font-style: italic;
   }
 
-  .lexxy-content__bold {
+  :where(.lexxy-content__bold) {
     font-weight: bold;
   }
 
-  .lexxy-content__strikethrough {
+  :where(.lexxy-content__strikethrough) {
     text-decoration: line-through;
   }
 
-  .lexxy-content__underline {
+  :where(.lexxy-content__underline) {
     text-decoration: underline;
   }
 
-  .lexxy-content__strikethrough.lexxy-content__underline {
+  :where(.lexxy-content__strikethrough.lexxy-content__underline) {
     text-decoration: line-through underline;
   }
 
   mark,
-  .lexxy-content__highlight {
+  :where(.lexxy-content__highlight) {
     background-color: transparent;
     color: inherit;
   }
@@ -77,6 +78,12 @@
     margin: var(--lexxy-content-margin) 0;
     padding: 0.5lh 2ch;
 
+    em,
+    i,
+    :where(.lexxy-content__italic) {
+      font-style: normal;
+    }
+
     p:last-child {
       margin-block-end: 0;
     }
@@ -131,7 +138,7 @@
     }
   }
 
-  ol, ul:not(.lexxy-prompt-menu) {
+  ol, ul:not(:where(.lexxy-prompt-menu)) {
     margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
     padding: 0;
   }
@@ -144,7 +151,7 @@
     list-style-type: decimal;
   }
 
-  li.lexxy-nested-listitem {
+  li:where(.lexxy-nested-listitem) {
     list-style-type: none;
 
     ol, ul {
@@ -168,6 +175,7 @@
     }
   }
 
+  /* Kept at class specificity so it still outweighs the element margin rules above. */
   *:has(+ .horizontal-divider) {
     margin-block-end: 0;
   }
@@ -177,77 +185,77 @@
   }
 
   /* Keywords and attributes */
-  .code-token__attr,
-  .token.attr-name,
-  .token.atrule,
-  .token.attr,
-  .token.keyword {
+  :where(.code-token__attr),
+  :where(.token.attr-name),
+  :where(.token.atrule),
+  :where(.token.attr),
+  :where(.token.keyword) {
     color: var(--lexxy-color-code-token-att);
   }
 
   /* Constants, booleans, numbers, properties, tags */
-  .code-token__property,
-  .token.boolean,
-  .token.constant,
-  .token.number,
-  .token.property,
-  .token.symbol,
-  .token.tag {
+  :where(.code-token__property),
+  :where(.token.boolean),
+  :where(.token.constant),
+  :where(.token.number),
+  :where(.token.property),
+  :where(.token.symbol),
+  :where(.token.tag) {
     color: var(--lexxy-color-code-token-property);
   }
 
   /* Strings, selectors, and built-in constructs */
-  .code-token__selector,
-  .token.attr-value,
-  .token.builtin,
-  .token.char,
-  .token.inserted,
-  .token.line,
-  .token.selector,
-  .token.string {
+  :where(.code-token__selector),
+  :where(.token.attr-value),
+  :where(.token.builtin),
+  :where(.token.char),
+  :where(.token.inserted),
+  :where(.token.line),
+  :where(.token.selector),
+  :where(.token.string) {
     color: var(--lexxy-color-code-token-selector);
   }
 
   /* Comments and meta information */
-  .code-token__comment,
-  .token.cdata,
-  .token.comment,
-  .token.doctype,
-  .token.prolog {
+  :where(.code-token__comment),
+  :where(.token.cdata),
+  :where(.token.comment),
+  :where(.token.doctype),
+  :where(.token.prolog) {
     color: var(--lexxy-color-code-token-comment);
     font-style: italic;
   }
 
   /* Operators and symbolic entities */
-  .code-token__operator,
-  .token.deleted,
-  .token.entity,
-  .token.operator,
-  .token.url,
-  code[data-language="diff"] .code-token__operator + .code-token__selector {
+  :where(.code-token__operator),
+  :where(.token.deleted),
+  :where(.token.entity),
+  :where(.token.operator),
+  :where(.token.url),
+  code[data-language="diff"] :where(.code-token__operator) + :where(.code-token__selector) {
     color: var(--lexxy-color-code-token-operator);
   }
 
   /* Functions and class names */
-  .code-token__function,
-  .token.class,
-  .token.class-name,
-  .token.function {
+  :where(.code-token__function),
+  :where(.token.class),
+  :where(.token.class-name),
+  :where(.token.function) {
     color: var(--lexxy-color-code-token-function);
   }
 
   /* Variables, regex, namespaces, important */
-  .code-token__variable,
-  .token.important,
-  .token.namespace,
-  .token.regex,
-  .token.variable {
+  :where(.code-token__variable),
+  :where(.token.important),
+  :where(.token.namespace),
+  :where(.token.regex),
+  :where(.token.variable) {
     color: var(--lexxy-color-code-token-variable);
   }
 
   /* Punctuation */
-  .code-token__punctuation,
-  .token.punctuation {
+  :where(.code-token__punctuation),
+  :where(.token.punctuation) {
     color: var(--lexxy-color-code-token-punctuation);
   }
 
@@ -277,7 +285,7 @@
         margin-block-end: 0;
       }
 
-      &.lexxy-content__table-cell--header {
+      &:where(.lexxy-content__table-cell--header) {
         background-color: var(--lexxy-color-table-header-bg);
         font-weight: bold;
       }
@@ -297,11 +305,11 @@
   /* Attachments
   /* ------------------------------------------------------------------------ */
 
-  p:has(.attachment) {
+  p:has(:where(.attachment)) {
     text-align: center;
   }
 
-  .attachment {
+  :where(.attachment) {
     --lexxy-attachment-gap: 0.75ch;
 
     block-size: auto;
@@ -317,14 +325,19 @@
     text-align: center;
   }
 
-  .attachment__caption {
+  /* Element weight, so a bare `figure { margin: 0 }` reset loaded before Lexxy doesn't uncenter attachments. */
+  figure:where(.attachment) {
+    margin-inline: auto;
+  }
+
+  :where(.attachment__caption) {
     color: var(--lexxy-color-text-subtle);
     display: block;
     font-size: var(--lexxy-text-small);
     padding: 1ch;
   }
 
-  .attachment__icon {
+  :where(.attachment__icon) {
     aspect-ratio: 4/5;
     background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
     block-size: 3lh;
@@ -343,7 +356,12 @@
     white-space: nowrap;
   }
 
-  .attachment--preview {
+  /* Kept at class specificity so it still outweighs the `a:has(img)` rule above. */
+  .attachment--preview > a {
+    display: block;
+  }
+
+  :where(.attachment--preview) {
     img, video {
       border-radius: var(--lexxy-radius);
       block-size: auto;
@@ -357,16 +375,12 @@
       }
     }
 
-    > a {
-      display: block;
-    }
-
-    .attachment__caption {
+    :where(.attachment__caption) {
       padding-block-end: 0.5ch;
     }
   }
 
-  .attachment--file {
+  :where(.attachment--file) {
     --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
 
     align-items: center;
@@ -374,59 +388,59 @@
     flex-wrap: wrap;
     inline-size: auto;
 
-    .attachment__caption {
+    :where(.attachment__caption) {
       display: grid;
       flex: 1;
       text-align: start;
     }
 
-    .attachment__name {
+    :where(.attachment__name) {
       color: var(--lexxy-color-ink);
       font-weight: bold;
     }
   }
 
-  .attachment--psd,
-  .attachment--key,
-  .attachment--sketch,
-  .attachment--ai,
-  .attachment--eps,
-  .attachment--indd,
-  .attachment--svg,
-  .attachment--ppt,
-  .attachment--pptx {
+  :where(.attachment--psd),
+  :where(.attachment--key),
+  :where(.attachment--sketch),
+  :where(.attachment--ai),
+  :where(.attachment--eps),
+  :where(.attachment--indd),
+  :where(.attachment--svg),
+  :where(.attachment--ppt),
+  :where(.attachment--pptx) {
     --lexxy-attachment-icon-color: var(--lexxy-color-red);
   }
 
-  .attachment--css,
-  .attachment--php,
-  .attachment--json,
-  .attachment--htm,
-  .attachment--html,
-  .attachment--rb,
-  .attachment--erb,
-  .attachment--ts,
-  .attachment--js {
+  :where(.attachment--css),
+  :where(.attachment--php),
+  :where(.attachment--json),
+  :where(.attachment--htm),
+  :where(.attachment--html),
+  :where(.attachment--rb),
+  :where(.attachment--erb),
+  :where(.attachment--ts),
+  :where(.attachment--js) {
     --lexxy-attachment-icon-color: var(--lexxy-color-purple);
   }
 
-  .attachment--txt,
-  .attachment--pages,
-  .attachment--rtf,
-  .attachment--md,
-  .attachment--doc,
-  .attachment--docx {
+  :where(.attachment--txt),
+  :where(.attachment--pages),
+  :where(.attachment--rtf),
+  :where(.attachment--md),
+  :where(.attachment--doc),
+  :where(.attachment--docx) {
     --lexxy-attachment-icon-color: var(--lexxy-color-blue);
   }
 
-  .attachment--csv,
-  .attachment--numbers,
-  .attachment--xls,
-  .attachment--xlsx {
+  :where(.attachment--csv),
+  :where(.attachment--numbers),
+  :where(.attachment--xls),
+  :where(.attachment--xlsx) {
     --lexxy-attachment-icon-color: var(--lexxy-color-green);
   }
 
-  .attachment--error {
+  :where(.attachment--error) {
     padding-block: 2ch;
   }
 
@@ -434,25 +448,25 @@
   /* Image galleries */
   /* ------------------------------------------------------------------------ */
 
-  .attachment-gallery {
+  :where(.attachment-gallery) {
     display: block;
     text-align: center;
 
-    .attachment {
+    :where(.attachment) {
       display: inline-flex;
       flex-direction: column;
       gap: 0;
       inline-size: calc(33.333% - 0.8ch);
       vertical-align: top;
 
-      .attachment__caption {
+      :where(.attachment__caption) {
         padding-block-end: 1ch;
       }
     }
 
-    &.attachment-gallery--2,
-    &.attachment-gallery--4 {
-      .attachment {
+    &:where(.attachment-gallery--2),
+    &:where(.attachment-gallery--4) {
+      :where(.attachment) {
         inline-size: calc(50% - 0.8ch);
       }
     }
@@ -478,6 +492,17 @@
     position: relative;
     white-space: normal;
 
+    /* Gecko drops the whole selection when a drag crosses a contenteditable="false"
+       island unless it is selectable as a single unit. Editor-only: the rendered
+       view has no contenteditable and must keep normal text selection. */
+    lexxy-editor & {
+      -webkit-user-select: all;
+
+      @supports (user-select: all) {
+        user-select: all;
+      }
+    }
+
     img {
       block-size: var(--lexxy-attachment-image-size);
       border-radius: 50%;
@@ -489,6 +514,7 @@
   /* Horizontal divider */
   /* ------------------------------------------------------------------------ */
 
+  /* Kept at class specificity: the editor renders the divider as a figure, and this must outweigh the figure margin rule above. */
   .horizontal-divider {
     margin: 0;
     margin-block-end: .5em;

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

@@ -457,6 +457,14 @@
     display: none;
   }
 
+  &[data-tables="false"] button[name="table"] {
+    display: none;
+  }
+
+  &[data-code-blocks="false"][data-inline-code="false"] button[name="code"] {
+    display: none;
+  }
+
   &[data-upload="file"] button[name="image"] {
     display: none;
   }
@@ -681,7 +689,7 @@
         gap: var(--lexxy-toolbar-spacing);
       }
 
-      input[type="url"] {
+      input {
         background-color: var(--lexxy-color-canvas);
         border: 1px solid var(--lexxy-color-ink-lighter);
         border-radius: var(--lexxy-radius);
@@ -1105,6 +1113,11 @@
   overflow: auto;
   padding: var(--lexxy-prompt-padding);
   position: absolute;
+  scroll-padding-block: calc(var(--lexxy-prompt-avatar-size) + var(--lexxy-prompt-padding) * 3);
+  /* eslint-disable-next-line css/use-baseline */
+  scrollbar-color: var(--lexxy-color-ink-light) transparent;
+  /* eslint-disable-next-line css/use-baseline */
+  scrollbar-width: thin;
   visibility: hidden;
   z-index: var(--lexxy-z-popup);
 

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

@@ -72,6 +72,7 @@
   /* Typography */
   --lexxy-font-base: system-ui, sans-serif;
   --lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;
+  --lexxy-text-size: 1em;
   --lexxy-text-small: 0.875rem;
   --lexxy-content-margin: 1rem;
 

data/config/ci.rb

@@ -10,7 +10,10 @@ CI.run do
   step "Tests: Rails (prepare)", "env RAILS_ENV=test bin/rails db:test:prepare"
   step "Tests: Rails (run)", "env RAILS_ENV=test bin/rails test:all -d"
 
-  step "Tests: Playwright (install)", "npx playwright install --with-deps chromium"
+  # --with-deps installs the browser's system libraries with apt-get, so it fails on
+  # Linux distributions without it, like Arch. Skip it there.
+  apt_less_linux = RUBY_PLATFORM.include?("linux") && !system("command -v apt-get > /dev/null")
+  step "Tests: Playwright (install)", "npx playwright install #{"--with-deps " unless apt_less_linux}chromium"
   step "Tests: Playwright (run)", "yarn test:browser:chromium"
 
   unless success?

data/lib/active_storage/blob_with_preview_url.rb

@@ -3,16 +3,37 @@ module ActiveStorage
     PREVIEW_SIZE = [ 1024, 768 ]
 
     def as_json(options = nil)
-      json = super(options)
+      json = super
+      options ||= {}
 
-      if previewable?
-        json["previewable"] = true
-        json["url"] = Rails.application.routes.url_helpers.rails_representation_path(
-          preview(resize_to_limit: PREVIEW_SIZE), ActiveStorage::Current.url_options.merge(only_path: true)
-        )
+      if previewable? && ActiveStorage::Current.url_options
+        attributes = (root = preview_json_root(options)) ? json[root] : json
+        attributes["previewable"] = true if serializes_preview_field?("previewable", options)
+        attributes["url"] = preview_url_path if serializes_preview_field?("url", options)
       end
 
       json
     end
+
+    private
+      def preview_json_root(options)
+        root = options.key?(:root) ? options[:root] : include_root_in_json
+        root == true ? model_name.element : root
+      end
+
+      # Mirrors Active Model: only takes precedence over except.
+      def serializes_preview_field?(field, options)
+        if only = options[:only]
+          Array(only).map(&:to_s).include?(field)
+        else
+          Array(options[:except]).map(&:to_s).exclude?(field)
+        end
+      end
+
+      def preview_url_path
+        Rails.application.routes.url_helpers.rails_representation_path(
+          preview(resize_to_limit: PREVIEW_SIZE), ActiveStorage::Current.url_options.merge(only_path: true)
+        )
+      end
   end
 end

data/lib/lexxy/engine.rb

@@ -7,13 +7,38 @@ module Lexxy
     isolate_namespace Lexxy
 
     config.lexxy = ActiveSupport::OrderedOptions.new
+    config.lexxy.override_action_text_defaults = true
+
+    # Rails versions that include Lexxy register it as an editor and allow its markup in
+    # Action Text content themselves, so sanitizer lists are left to the application there.
+    # This runs before Lexxy registers itself as an editor.
+    initializer "lexxy.sanitization", before: "lexxy.action_text_editor" do |app|
+      next if app.config.action_text.editors&.key?(:lexxy)
+
+      ActiveSupport.on_load(:action_text_content) do
+        default_allowed_tags = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_tags
+        ActionText::ContentHelper.allowed_tags = default_allowed_tags + %w[ s u video audio source embed table tbody tr th td ]
+
+        default_allowed_attributes = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_attributes
+        ActionText::ContentHelper.allowed_attributes = default_allowed_attributes + %w[ controls poster data-language style value start ]
+
+        Loofah::HTML5::SafeList::ALLOWED_CSS_FUNCTIONS << "var"
+      end
+    end
 
     if Lexxy.supports_editor_adapter?
       require_relative "../action_text/editor/lexxy_editor"
 
       initializer "lexxy.action_text_editor", before: "action_text.editors" do |app|
-        app.config.action_text.editors[:lexxy] = {}
-        app.config.action_text.editor = :lexxy
+        action_text = app.config.action_text
+
+        # Rails versions that include Lexxy register it themselves and choose the
+        # default editor with config.load_defaults. When Lexxy is already registered,
+        # config.action_text.editor is left to the application.
+        unless action_text.editors.key?(:lexxy)
+          action_text.editors[:lexxy] = {}
+          action_text.editor = :lexxy if app.config.lexxy.override_action_text_defaults
+        end
       end
     else
       # Rails 8.0/8.1 fallback: monkey-patch Action Text helpers
@@ -22,12 +47,12 @@ module Lexxy
       require_relative "form_builder"
       require_relative "action_text_tag"
 
-      config.lexxy.override_action_text_defaults = true
-
       initializer "lexxy.initialize" do |app|
         app.config.to_prepare do
-          ActionText::TagHelper.prepend(Lexxy::TagHelper)
-          ActionView::Helpers::FormHelper.prepend(Lexxy::FormHelper)
+          # This runs again on every reload, and on recent Rubies prepending a module into a
+          # module again adds another copy to the classes that include it.
+          ActionText::TagHelper.prepend(Lexxy::TagHelper) unless ActionText::TagHelper.include?(Lexxy::TagHelper)
+          ActionView::Helpers::FormHelper.prepend(Lexxy::FormHelper) unless ActionView::Helpers::FormHelper.include?(Lexxy::FormHelper)
           ActionView::Helpers::FormBuilder.prepend(Lexxy::FormBuilder)
           ActionView::Helpers::Tags::ActionText.prepend(Lexxy::ActionTextTag)
 
@@ -42,25 +67,6 @@ module Lexxy
       end
     end
 
-    initializer "lexxy.assets" do |app|
-      if Rails.application.config.respond_to?(:assets)
-        app.config.assets.paths << root.join("app/assets/stylesheets")
-        app.config.assets.paths << root.join("app/javascript")
-      end
-    end
-
-    initializer "lexxy.sanitization" do |app|
-      ActiveSupport.on_load(:action_text_content) do
-        default_allowed_tags = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_tags
-        ActionText::ContentHelper.allowed_tags = default_allowed_tags + %w[ video audio source embed table tbody tr th td ]
-
-        default_allowed_attributes = Class.new.include(ActionText::ContentHelper).new.sanitizer_allowed_attributes
-        ActionText::ContentHelper.allowed_attributes = default_allowed_attributes + %w[ controls poster data-language style value start ]
-
-        Loofah::HTML5::SafeList::ALLOWED_CSS_FUNCTIONS << "var"
-      end
-    end
-
     initializer "lexxy.blob_with_preview" do |app|
       ActiveSupport.on_load(:active_storage_blob) do
         prepend ActiveStorage::BlobWithPreviewUrl

data/lib/lexxy/rich_text_area_tag.rb

@@ -25,7 +25,7 @@ module Lexxy
       # Temporary: we need to *adaptarize* action text
       def render_custom_attachments_in(value)
         if value.respond_to?(:body)
-          if html = value.body_before_type_cast.presence
+          if html = value.body&.to_html.presence
             self.prefix_partial_path_with_controller_namespace = false if respond_to?(:prefix_partial_path_with_controller_namespace=)
             ActionText::Fragment.wrap(html).replace(ActionText::Attachment.tag_name) do |node|
               if node["url"].blank?
@@ -33,6 +33,7 @@ module Lexxy
                 node["content"] = render_action_text_attachment(attachment).to_json
                 node["content-type"] ||= attachment.content_type
               end
+
               node
             end
           end

data/lib/lexxy/version.rb

@@ -1,3 +1,3 @@
 module Lexxy
-  VERSION = "1.0.0"
+  VERSION = "1.0.2"
 end