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

package/dist/stylesheets/lexxy-content.css

@@ -12,7 +12,10 @@
     hyphens: auto;
     margin-block: 0 var(--lexxy-content-margin);
     overflow-wrap: break-word;
-    text-wrap: balance;
+
+    @supports (text-wrap: balance) {
+      text-wrap: balance;
+    }
   }
 
   h1 { font-size: 2rem; }
@@ -35,7 +38,10 @@
 
     &:not(lexxy-editor &) {
       overflow-wrap: break-word;
-      text-wrap: pretty;
+
+      @supports (text-wrap: pretty) {
+        text-wrap: pretty;
+      }
     }
   }
 
@@ -114,11 +120,14 @@
       hyphens: none;
       margin-block: 0 var(--lexxy-content-margin);
       overflow-x: auto;
+      overflow-wrap: break-word;
       padding: 1ch;
       tab-size: 2;
-      text-wrap: nowrap;
       white-space: pre;
-      word-break: break-word;
+
+      @supports (text-wrap: nowrap) {
+        text-wrap: nowrap;
+      }
     }
   }
 
@@ -275,8 +284,11 @@
 
       *:is(code, pre) {
         hyphens: auto;
-        text-wrap: wrap;
         white-space: pre-wrap;
+
+        @supports (text-wrap: wrap) {
+          text-wrap: wrap;
+        }
       }
     }
   }
@@ -338,7 +350,11 @@
       display: block;
       margin-inline: auto;
       max-inline-size: 100%;
-      user-select: none;
+      -webkit-user-select: none;
+
+      @supports (user-select: none) {
+        user-select: none;
+      }
     }
 
     > a {

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;
@@ -164,6 +166,7 @@
     }
 
     &.lexxy-content__table--selection {
+      /* eslint-disable-next-line css/use-baseline */
       ::selection {
         background: transparent;
       }
@@ -364,9 +367,12 @@
       inline-size: 100%;
       max-inline-size: 100%;
       padding: 0;
-      resize: none;
       text-align: center;
 
+      @supports (resize: none) {
+        resize: none;
+      }
+
       &:focus {
         background: var(--lexxy-color-canvas);
         outline: 0;
@@ -400,6 +406,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 +454,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;
@@ -490,7 +501,11 @@
       fill: currentColor;
       grid-area: 1/1;
       inline-size: var(--lexxy-toolbar-icon-size);
-      user-select: none;
+      -webkit-user-select: none;
+
+      @supports (user-select: none) {
+        user-select: none;
+      }
     }
 
     &.lexxy-editor__toolbar-group-end {
@@ -512,8 +527,8 @@
     }
   }
 
-  .lexxy-editor__toolbar-spacer {
-    flex: 1;
+  .lexxy-editor__toolbar-button--push-right {
+    margin-inline-start: auto;
   }
 }
 
@@ -521,20 +536,30 @@
 /* Dropdowns */
 
 :where(.lexxy-editor__toolbar-dropdown) {
-  user-select: none;
   -webkit-user-select: none;
 
-  &.lexxy-editor__toolbar-dropdown--chevron {
-    summary {
+  @supports (user-select: none) {
+    user-select: none;
+  }
+
+  .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 +568,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 +605,7 @@
 
     button {
       align-items: center;
+      color: var(--lexxy-color-text);
       display: flex;
       flex-direction: row;
       gap: 1ch;
@@ -603,6 +626,7 @@
 
       svg {
         block-size: 1lh;
+        fill: currentColor;
         inline-size: 1lh;
       }
     }
@@ -634,7 +658,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 +670,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;
+        }
       }
     }
   }
@@ -795,9 +817,12 @@
     line-height: inherit;
     min-block-size: var(--button-size);
     min-inline-size: var(--button-size);
-    user-select: none;
     -webkit-user-select: none;
 
+    @supports (user-select: none) {
+      user-select: none;
+    }
+
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]),
       [open] &:is(summary) {
@@ -1102,4 +1127,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.13-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"
   },