@37signals/lexxy 0.9.11-beta → 0.9.12-beta

package/dist/stylesheets/lexxy-editor.css

@@ -3,6 +3,7 @@
 :where(lexxy-editor) {
   --lexxy-editor-padding: 1ch;
   --lexxy-editor-rows: 8lh;
+  /* eslint-disable-next-line css/no-invalid-properties */
   @supports (min-block-size: attr(rows lh)) {
     --lexxy-editor-rows: attr(rows lh, 8lh);
   }
@@ -12,6 +13,7 @@
   border: 1px solid var(--lexxy-color-ink-lighter);
   border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
   background-color: var(--lexxy-color-canvas);
+  container-type: inline-size;
   display: block;
   overflow: visible;
   position: relative;
@@ -400,6 +402,7 @@
 }
 
 :where(.lexxy-editor__content) {
+  /* eslint-disable-next-line css/no-invalid-properties */
   min-block-size: var(--lexxy-editor-rows);
   outline: 0;
   padding: var(--lexxy-editor-padding);
@@ -447,6 +450,10 @@
   padding: 2px;
   position: relative;
 
+  @container (width < 300px) {
+    font-size: 0.8em;
+  }
+
   &[data-attachments="false"] button[name="image"],
   &[data-attachments="false"] button[name="file"] {
     display: none;
@@ -512,8 +519,8 @@
     }
   }
 
-  .lexxy-editor__toolbar-spacer {
-    flex: 1;
+  .lexxy-editor__toolbar-button--push-right {
+    margin-inline-start: auto;
   }
 }
 
@@ -524,17 +531,24 @@
   user-select: none;
   -webkit-user-select: none;
 
-  &.lexxy-editor__toolbar-dropdown--chevron {
-    summary {
+  .lexxy-editor__toolbar-button {
+    color: currentColor;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.lexxy-editor__toolbar-button--chevron {
       aspect-ratio: unset;
       gap: 0.5ch;
       grid-template-columns: 2fr 1fr;
+      min-inline-size: calc(var(--lexxy-toolbar-button-size) + 1.2ch);
       padding-inline: 0.75ch;
 
       &:after {
         block-size: 0.3ch;
-        border-block-end: 2px solid currentcolor;
-        border-inline-end: 2px solid currentcolor;
+        border-block-end: 2px solid currentColor;
+        border-inline-end: 2px solid currentColor;
         content: "";
         display: inline-block;
         inline-size: 0.3ch;
@@ -543,36 +557,33 @@
     }
   }
 
-  summary ~ * {
+  > .lexxy-editor__toolbar-button[aria-expanded="true"] {
+    background-color: var(--lexxy-color-selected-hover);
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+
+    &:hover {
+      background-color: var(--lexxy-color-selected-hover);
+    }
+  }
+
+  [data-dropdown-panel] {
     background-color: var(--lexxy-color-canvas);
     border: 2px solid var(--lexxy-color-selected-hover);
     border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
     box-sizing: border-box;
     box-shadow: var(--lexxy-shadow);
-    color: var(--lexxy-color-ink);
+    color: var(--lexxy-color-text);
     display: flex;
     gap: var(--lexxy-toolbar-gap);
     margin: 0;
     padding: var(--lexxy-toolbar-spacing);
     position: absolute;
     z-index: 3;
-  }
-
-  &:is([open]) > .lexxy-editor__toolbar-button {
-    background-color: var(--lexxy-color-selected-hover);
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
 
-    &:hover {
-      background-color: var(--lexxy-color-selected-hover);
-    }
-  }
-
-  button {
-    color: var(--lexxy-color-text);
-
-    &:hover {
-      opacity: 0.8;
+    &[hidden],
+    [overflowing] &[hidden] {
+      display: none;
     }
   }
 
@@ -583,6 +594,7 @@
 
     button {
       align-items: center;
+      color: var(--lexxy-color-text);
       display: flex;
       flex-direction: row;
       gap: 1ch;
@@ -603,6 +615,7 @@
 
       svg {
         block-size: 1lh;
+        fill: currentColor;
         inline-size: 1lh;
       }
     }
@@ -634,7 +647,7 @@
     justify-self: flex-end;
     z-index: 1;
 
-    summary ~ * {
+    [data-dropdown-panel] {
       border-start-end-radius: 0;
       display: grid;
       grid-template-columns: repeat(4, 1fr);
@@ -646,127 +659,125 @@
   /* --------------------------------------------------------------------------
   /* Link dropdown */
 
-  lexxy-link-dropdown {
-    font-size: var(--lexxy-text-small);
-    gap: var(--lexxy-toolbar-spacing);
-    inset-inline-start: var(--lexxy-toolbar-spacing);
-    inset-inline-end: var(--lexxy-toolbar-spacing);
+  &.lexxy-editor__toolbar-dropdown--link {
+    [data-dropdown-panel] {
+      font-size: var(--lexxy-text-small);
+      gap: var(--lexxy-toolbar-spacing);
+      inset-inline-start: var(--lexxy-toolbar-spacing);
+      inset-inline-end: var(--lexxy-toolbar-spacing);
 
-    [overflowing] [open] & {
-      display: block;
+      [overflowing] & {
+        flex-wrap: wrap;
+      }
 
       .lexxy-editor__toolbar-dropdown-actions {
-        margin-block-start: var(--lexxy-toolbar-spacing);
+        display: flex;
+        flex: 1;
+        gap: var(--lexxy-toolbar-spacing);
       }
-    }
-
 
-    .lexxy-editor__toolbar-dropdown-actions {
-      display: flex;
-      flex: 1;
-      gap: var(--lexxy-toolbar-spacing);
-    }
+      input[type="url"] {
+        background-color: var(--lexxy-color-canvas);
+        border: 1px solid var(--lexxy-color-ink-lighter);
+        border-radius: var(--lexxy-radius);
+        color: var(--lexxy-color-text);
+        block-size: var(--lexxy-toolbar-button-size);
+        box-sizing: border-box;
+        font-size: var(--lexxy-text-small);
+        flex: 2;
+        inline-size: 100%;
+        line-height: inherit;
+        padding-block: 0;
+        padding-inline: 1ch;
 
-    input[type="url"] {
-      background-color: var(--lexxy-color-canvas);
-      border: 1px solid var(--lexxy-color-ink-lighter);
-      border-radius: var(--lexxy-radius);
-      color: var(--lexxy-color-text);
-      block-size: var(--lexxy-toolbar-button-size);
-      box-sizing: border-box;
-      font-size: var(--lexxy-text-small);
-      flex: 2;
-      inline-size: 100%;
-      line-height: normal;
-      padding-block: 0;
-      padding-inline: 1ch;
-    }
+        [overflowing] & {
+          min-inline-size: 100%;
+        }
+      }
 
-    button {
-      background-color: var(--lexxy-color-ink-lightest);
-      inline-size: 100%;
-      padding-inline: 2ch;
-    }
+      button {
+        background-color: var(--lexxy-color-ink-lightest);
+        inline-size: 100%;
+        padding-inline: 2ch;
+      }
 
-    button[value="link"] {
-      background-color: var(--lexxy-color-accent-dark);
-      color: var(--lexxy-color-ink-inverted);
+      button[value="link"] {
+        background-color: var(--lexxy-color-accent-dark);
+        color: var(--lexxy-color-ink-inverted);
 
-      &:hover {
-        background-color: var(--lexxy-color-accent-medium);
+        &:hover {
+          background-color: var(--lexxy-color-accent-medium);
+        }
       }
     }
   }
 
-
   /* --------------------------------------------------------------------------
   /* Color dropdown */
 
-  &:has(lexxy-highlight-dropdown) {
+  &.lexxy-editor__toolbar-dropdown--highlight {
     position: relative;
 
     [overflowing] & {
       position: static;
     }
-  }
-
-  lexxy-highlight-dropdown {
-    --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
-    border-start-start-radius: 0;
-    display: flex;
-    gap: var(--lexxy-toolbar-spacing);
-    flex-direction: column;
-    font-size: var(--lexxy-text-small);
-    inset-inline-start: 0;
-    max-inline-size: var(--max-inline-size);
-
-    [overflowing] & {
-      inset-inline-end: var(--lexxy-toolbar-spacing);
-      inset-inline-start: var(--lexxy-toolbar-spacing);
-    }
 
-    button {
-      position: relative;
-    }
-
-    .lexxy-highlight-colors {
-      display: grid;
-      gap: var(--lexxy-toolbar-gap);
-      grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
+    [data-dropdown-panel] {
+      --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing)));
+      border-start-start-radius: 0;
+      gap: var(--lexxy-toolbar-spacing);
+      flex-direction: column;
+      font-size: var(--lexxy-text-small);
+      inset-inline-start: 0;
       max-inline-size: var(--max-inline-size);
 
+      [overflowing] & {
+        border-start-start-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));
+        inset-inline-end: var(--lexxy-toolbar-spacing);
+        inset-inline-start: var(--lexxy-toolbar-spacing);
+      }
+
       button {
-        block-size: unset;
-        inline-size: 100%;
+        position: relative;
+      }
 
-        &: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;
-        }
+      .lexxy-highlight-colors {
+        display: grid;
+        gap: var(--lexxy-toolbar-gap);
+        grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
+        max-inline-size: var(--max-inline-size);
 
-        &[aria-pressed="true"] {
-          background-color: transparent;
-          box-shadow: 0 0 0 2px currentColor inset;
+        button {
+          block-size: unset;
+          inline-size: 100%;
 
           &:after {
-            content: "✓";
+            align-items: center;
+            content: "Aa";
+            display: flex;
+            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            inset: 0;
+            justify-content: center;
+            position: absolute;
+          }
+
+          &[aria-pressed="true"] {
+            background-color: transparent;
+            box-shadow: 0 0 0 2px currentColor inset;
+
+            &:after {
+              content: "✓";
+            }
           }
         }
       }
-    }
 
-    .lexxy-editor__toolbar-dropdown-reset {
-      background-color: var(--lexxy-color-ink-lightest);
+      .lexxy-editor__toolbar-dropdown-reset {
+        background-color: var(--lexxy-color-ink-lightest);
 
-      &:is([disabled]) {
-        display: none;
+        &:is([disabled]) {
+          display: none;
+        }
       }
     }
   }
@@ -1102,4 +1113,4 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.11-beta",
+  "version": "0.9.12-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -14,15 +14,22 @@
   "repository": "https://github.com/basecamp/lexxy.git",
   "author": "Jorge Manrubia <jorge@37signals.com>",
   "license": "MIT",
+  "browserslist": [
+    "baseline 2023",
+    "not dead"
+  ],
   "devDependencies": {
-    "@eslint/js": "^9.15.0",
+    "@eslint/css": "^1.2.0",
+    "@eslint/js": "^10.0.1",
     "@playwright/test": "^1.52.0",
     "@rails/activestorage": "^8.1.200",
     "@rollup/plugin-commonjs": "^29.0.0",
     "@rollup/plugin-inject": "^5.0.5",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
-    "eslint": "^9.15.0",
+    "eslint": "^10.3.0",
+    "globals": "^17.6.0",
+    "eslint-plugin-compat": "^7.0.2",
     "jsdom": "^27.3.0",
     "rollup": "^4.44.1",
     "rollup-plugin-copy": "^3.5.0",
@@ -48,21 +55,21 @@
     "release": "yarn build:npm && yarn publish"
   },
   "dependencies": {
-    "@lexical/clipboard": "^0.43.0",
-    "@lexical/code": "^0.43.0",
-    "@lexical/extension": "^0.43.0",
-    "@lexical/history": "^0.43.0",
-    "@lexical/html": "^0.43.0",
-    "@lexical/link": "^0.43.0",
-    "@lexical/list": "^0.43.0",
-    "@lexical/markdown": "^0.43.0",
-    "@lexical/plain-text": "^0.43.0",
-    "@lexical/rich-text": "^0.43.0",
-    "@lexical/selection": "^0.43.0",
-    "@lexical/table": "^0.43.0",
-    "@lexical/utils": "^0.43.0",
+    "@lexical/clipboard": "^0.44.0",
+    "@lexical/code": "^0.44.0",
+    "@lexical/extension": "^0.44.0",
+    "@lexical/history": "^0.44.0",
+    "@lexical/html": "^0.44.0",
+    "@lexical/link": "^0.44.0",
+    "@lexical/list": "^0.44.0",
+    "@lexical/markdown": "^0.44.0",
+    "@lexical/plain-text": "^0.44.0",
+    "@lexical/rich-text": "^0.44.0",
+    "@lexical/selection": "^0.44.0",
+    "@lexical/table": "^0.44.0",
+    "@lexical/utils": "^0.44.0",
     "dompurify": "^3.3.0",
-    "lexical": "^0.43.0",
+    "lexical": "^0.44.0",
     "marked": "^16.4.1",
     "prismjs": "^1.30.0"
   },