@37signals/lexxy 0.8.0-beta → 0.8.2-beta

package/dist/stylesheets/lexxy-content.css

@@ -87,7 +87,6 @@
   object {
     inline-size: auto;
     margin-inline: auto;
-    min-block-size: 3em;
     max-block-size: 32rem;
     object-fit: contain;
 
@@ -119,7 +118,7 @@
     }
   }
 
-  ol, ul {
+  ol, ul:not(.lexxy-prompt-menu) {
     margin-inline-start: calc(var(--lexxy-content-margin) * 1.5);
     padding: 0;
   }
@@ -260,7 +259,7 @@
       padding: 1ch;
       text-align: start;
       word-break: normal;
-      
+
       *:last-child {
         margin-block-end: 0;
       }
@@ -288,11 +287,11 @@
 
   .attachment {
     --lexxy-attachment-gap: 0.75ch;
-    
+
     block-size: auto;
     box-sizing: border-box;
     border-radius: var(--lexxy-radius);
-    display: table; /* Using table to wrap the caption to fit the attachment's width */
+    display: block;
     inline-size: fit-content;
     margin-inline: auto;
     max-inline-size: 100%;
@@ -300,26 +299,21 @@
     padding: var(--lexxy-attachment-gap);
     position: relative;
     text-align: center;
-
-    :where(progress) {
-      inline-size: 100%;
-      margin: auto;
-    }
   }
 
   .attachment__caption {
-    caption-side: bottom;
     color: var(--lexxy-color-text-subtle);
-    display: table-caption;
+    display: block;
     font-size: var(--lexxy-text-small);
+    padding: 1ch;
   }
 
   .attachment__icon {
     aspect-ratio: 4/5;
     background-color: color-mix(var(--lexxy-attachment-icon-color), transparent 90%);
     block-size: 3lh;
-    border: 2px solid var(--lexxy-attachment-icon-color);
-    border-block-start-width: 1ch;
+    border: 1px solid var(--lexxy-attachment-icon-color);
+    border-block-start-width: 1.5ch;
     border-radius: var(--lexxy-radius);
     box-sizing: border-box;
     color: var(--lexxy-attachment-icon-color);
@@ -327,12 +321,13 @@
     font-size: var(--lexxy-text-small);
     font-weight: bold;
     inline-size: auto;
+    overflow: hidden;
     place-content: center;
     text-transform: uppercase;
+    white-space: nowrap;
   }
 
   .attachment--preview {
-
     img, video {
       border-radius: var(--lexxy-radius);
       block-size: auto;
@@ -345,6 +340,10 @@
     > a {
       display: block;
     }
+
+    .attachment__caption {
+      padding-block-end: 0.5ch;
+    }
   }
 
   .attachment--file {
@@ -353,7 +352,6 @@
     align-items: center;
     display: flex;
     flex-wrap: wrap;
-    gap: 0;
     inline-size: auto;
 
     .attachment__caption {
@@ -408,24 +406,39 @@
     --lexxy-attachment-icon-color: var(--lexxy-color-green);
   }
 
+  .attachment--error {
+    padding-block: 2ch;
+  }
+
 
   /* Image galleries */
   /* ------------------------------------------------------------------------ */
 
   .attachment-gallery {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    display: block;
+    text-align: center;
 
     .attachment {
-      display: flex;
-      flex-direction: column;
-      gap: 1ch;
-      inline-size: 100%;
+      display: inline-block;
+      inline-size: calc(33.333% - 0.8ch);
+      vertical-align: top;
+
+      img {
+        margin: auto;
+        max-block-size: 50rem;
+        object-fit: contain;
+      }
+
+      .attachment__caption {
+        padding-block-end: 1ch;
+      }
     }
 
-    &:has(> :nth-child(2):last-child),
-    &:has(> :nth-child(4):last-child) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      .attachment {
+        inline-size: calc(50% - 0.8ch);
+      }
     }
   }
 
@@ -438,13 +451,10 @@
     --lexxy-attachment-image-size: 1em;
     --lexxy-attachment-text-color: currentColor;
 
-    align-items: center;
     background: var(--lexxy-attachment-bg-color);
     border-radius: var(--lexxy-radius);
-    box-shadow: -0.25ch 0 0 var(--lexxy-attachment-bg-color), 0.5ch 0 0 var(--lexxy-attachment-bg-color);
     color: var(--lexxy-attachment-text-color);
-    display: inline-flex;
-    gap: 0.25ch;
+    display: inline;
     margin: 0;
     padding: 0;
     position: relative;
@@ -454,11 +464,8 @@
       block-size: var(--lexxy-attachment-image-size);
       border-radius: 50%;
       inline-size: var(--lexxy-attachment-image-size);
-    }
-
-    &.node--selected {
-      --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
-      --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
+      margin-inline-end: 0.25ch;
+      vertical-align: middle;
     }
   }
 
@@ -478,5 +485,4 @@
       margin: 0;
     }
   }
-
 }

package/dist/stylesheets/lexxy-editor.css

@@ -76,7 +76,7 @@
       position: relative;
       transition: all 0.1s ease-in-out;
 
-      /* Used for column and row adding visualisations */
+      /* Used for column and row adding visualizations */
       &:after {
         box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
         content: "";
@@ -185,16 +185,46 @@
     cursor: pointer;
   }
 
+  .attachment {
+    progress {
+      max-inline-size: 10ch;
+      margin: auto;
+    }
+
+    &.attachment--preview {
+      progress {
+        inset-block-start: 2ch;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        position: absolute;
+      }
+
+      lexxy-node-delete-button {
+        inset-block-start: 1.5ch;
+        inset-inline-end: 1.5ch;
+        inset-inline-start: unset;
+      }
+    }
+  }
+
   .attachment:hover:not(.node--selected) {
     outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch, var(--lexxy-focus-ring-color) 30%, transparent);
     outline-offset: var(--lexxy-focus-ring-offset);
   }
 
+  .attachment--file {
+    lexxy-node-delete-button {
+      inset-block-start: 50%;
+      inset-inline-end: 1ch;
+      inset-inline-start: unset;
+      transform: translate(0, -50%);
+    }
+  }
+
   /* Image galleries */
   /* ------------------------------------------------------------------------ */
 
   .attachment-gallery {
-    --lexxy-attachment-gallery-columns: 3;
     --lexxy-attachment-gallery-gap: 0.4ch;
     --lexxy-focus-ring-offset: -6px;
 
@@ -202,43 +232,24 @@
     padding: 0;
 
     .attachment {
-      box-sizing: border-box;
-      display: inline-flex;
-      flex-direction: column;
-      gap: 0;
-      inline-size: calc(100% / var(--lexxy-attachment-gallery-columns) - var(--lexxy-attachment-gallery-gap) * 2);
       margin: var(--lexxy-attachment-gallery-gap);
       padding: 0;
       padding-block-end: var(--lexxy-attachment-gap);
       vertical-align: top;
 
-      .attachment__container {
-        display: block;
-        margin: 0;
-        padding: 1ch;
-        padding-block-end: 0;
+      &.attachment--error {
+        padding: 2ch;
       }
 
       img {
-        block-size: auto;
         box-sizing: border-box;
-        inline-size: auto;
-        margin: auto;
-        max-block-size: 50rem;
-        max-inline-size: 100%;
-        object-fit: contain;
+        padding: 1ch;
+        padding-block-end: 0;
       }
     }
-
-    &:has(> .attachment:nth-child(2):last-of-type),
-    &:has(> .attachment:nth-child(4):last-of-type) {
-      --lexxy-attachment-gallery-columns: 2;
-    }
   }
 
   .attachment__caption {
-    padding: 0 1ch;
-
     textarea {
       background: transparent;
       block-size: fit-content;
@@ -251,9 +262,9 @@
       font-family: inherit;
       inline-size: 100%;
       max-inline-size: 100%;
+      padding: 0;
       resize: none;
       text-align: center;
-      padding: 1ch 0;
 
       &:focus {
         background: var(--lexxy-color-canvas);
@@ -276,7 +287,7 @@
 
 /* Placeholder */
 :where(.lexxy-editor--empty) {
-  .lexxy-editor__content:not(:has(ul, ol))::before {
+  .lexxy-editor__content:not(:has(h1, h2, h3, h4, h5, h6, table, ul, ol, figure, .attachment-gallery))::before {
     content: attr(placeholder);
     color: currentColor;
     cursor: text;
@@ -331,7 +342,7 @@
   &[data-attachments="false"] button[name="upload"]{
     display: none;
   }
-  
+
   .lexxy-editor__toolbar-button {
     aspect-ratio: 1;
     block-size: var(--lexxy-toolbar-button-size);
@@ -583,7 +594,7 @@
 /* Floating controls */
 :where(.lexxy-floating-controls) {
   --button-size: 2.3lh;
-  --table-tools-radius: calc(var(--lexxy-radius) * 1.5);
+  --floating-tools-radius: calc(var(--lexxy-radius) * 1.5);
 
   color: var(--lexxy-color-ink-inverted);
   font-size: var(--lexxy-text-small);
@@ -599,7 +610,7 @@
     color: var(--lexxy-color-ink-inverted);
     display: flex;
     justify-content: center;
-    line-height: 1;
+    line-height: inherit;
     min-block-size: var(--button-size);
     min-inline-size: var(--button-size);
     user-select: none;
@@ -645,7 +656,7 @@
 
   .lexxy-floating-controls__group {
     background-color: var(--lexxy-color-ink);
-    border-radius: var(--table-tools-radius);
+    border-radius: var(--floating-tools-radius);
     padding: 0.25ch;
   }
 
@@ -672,7 +683,7 @@
 
         .lexxy-table-control__more-menu-details {
           background: var(--lexxy-color-ink);
-          border-radius: var(--table-tools-radius);
+          border-radius: var(--floating-tools-radius);
           display: flex;
           flex-direction: column;
           gap: 0.25ch;
@@ -721,7 +732,7 @@
         span {
           align-items: center;
           background: var(--lexxy-color-ink);
-          border-radius: var(--table-tools-radius);
+          border-radius: var(--floating-tools-radius);
           color: color-mix(in srgb, var(--lexxy-color-ink-inverted) 80%, transparent);
           display: flex;
           inset-inline-end: calc(var(--button-size) + 1ch);
@@ -755,11 +766,10 @@
   /* Attachment delete button */
 
   &:is(lexxy-node-delete-button) {
-    inset-block-start: 0.5ch;
-    inset-inline-end: 0.5ch;
+    inset-block-start: 0;
+    inset-inline-start: 100%;
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.1s ease-in-out;
 
     .node--selected & {
       opacity: 1;
@@ -810,9 +820,11 @@
 
 :where(.lexxy-prompt-menu) {
   --lexxy-prompt-avatar-size: 24px;
-  --lexxy-prompt-min-width: 20ch;
   --lexxy-prompt-padding: 0.5ch;
 
+  --lexxy-prompt-offset-x: 0;
+  --lexxy-prompt-offset-y: 0;
+
   background-color: var(--lexxy-color-canvas);
   border-radius: calc(var(--lexxy-prompt-padding) * 2);
   box-shadow: var(--lexxy-shadow);
@@ -820,13 +832,27 @@
   font-family: var(--lexxy-font-base);
   font-size: var(--lexxy-text-small);
   list-style: none;
+  inset-block-start: var(--lexxy-prompt-offset-y);
+  inset-inline-start: var(--lexxy-prompt-offset-x);
   margin: 0;
   max-block-size: 200px;
-  min-inline-size: var(--lexxy-prompt-min-width);
+  max-inline-size: min(20ch, calc(100% - var(--lexxy-prompt-offset-x)));
+  min-inline-size: 20ch;
   overflow: auto;
   padding: var(--lexxy-prompt-padding);
+  position: absolute;
   visibility: hidden;
   z-index: var(--lexxy-z-popup);
+
+  &[data-clipped-at-right] {
+    inset-inline-start: unset;
+    inset-inline-end: 1ch;
+  }
+
+  &[data-clipped-at-bottom] {
+    inset-block-start: unset;
+    inset-block-end: var(--lexxy-prompt-offset-y);
+  }
 }
 
 :where(.lexxy-prompt-menu--visible) {
@@ -840,7 +866,6 @@
   display: flex;
   gap: var(--lexxy-prompt-padding);
   padding: var(--lexxy-prompt-padding);
-  white-space: nowrap;
 
   &:hover {
     background-color: var(--lexxy-color-ink-lightest);
@@ -867,3 +892,36 @@
   color: var(--lexxy-color-ink-medium);
   padding: var(--lexxy-prompt-padding);
 }
+
+
+/* --------------------------------------------------------------------------
+/* Custom attachments */
+action-text-attachment[content-type^="application/vnd.actiontext"] {
+  &.node--selected {
+    --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark);
+    --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted);
+
+    outline: none;
+  }
+
+  lexxy-node-delete-button {
+    display: none;
+    inset-inline-start: 0;
+    line-height: 1lh;
+
+    .lexxy-floating-controls__group {
+      --button-size: 1lh;
+
+      background-color: var(--lexxy-color-accent-dark);
+      padding: 0;
+
+      button {
+        border-radius: 50%;
+      }
+    }
+  }
+
+  &.node--selected lexxy-node-delete-button {
+    display: block;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.8.0-beta",
+  "version": "0.8.2-beta",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",
@@ -16,6 +16,8 @@
   "license": "MIT",
   "devDependencies": {
     "@eslint/js": "^9.15.0",
+    "@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",
@@ -25,33 +27,42 @@
     "rollup": "^4.44.1",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-gzip": "^4.1.1",
+    "vite": "^7.3.1",
     "vitest": "^4.0.16"
   },
   "scripts": {
     "build": "rollup -c",
     "build:npm": "rollup -c rollup.config.npm.mjs",
+    "benchmark:browser": "node scripts/benchmarks/run-browser-benchmarks.js",
+    "benchmark:browser:compare": "node scripts/benchmarks/compare-browser-benchmarks.js",
     "watch": "rollup -wc --watch.onEnd=\"rails restart\"",
     "lint": "eslint",
-    "test": "vitest --environment=jsdom",
+    "test": "vitest",
+    "test:browser": "npx playwright test --config test/browser/playwright.config.js",
+    "test:browser:chromium": "npx playwright test --config test/browser/playwright.config.js --project=chromium",
+    "test:browser:firefox": "npx playwright test --config test/browser/playwright.config.js --project=firefox",
+    "test:browser:webkit": "npx playwright test --config test/browser/playwright.config.js --project=webkit",
+    "test:browser:headed": "npx playwright test --config test/browser/playwright.config.js --headed",
+    "test:browser:debug": "npx playwright test --config test/browser/playwright.config.js --debug",
     "prerelease": "yarn build:npm",
     "release": "yarn build:npm && yarn publish"
   },
   "dependencies": {
-    "@lexical/extension": "^0.38.2",
-    "@lexical/clipboard": "^0.38.2",
-    "@lexical/code": "^0.38.2",
-    "@lexical/history": "^0.38.2",
-    "@lexical/html": "^0.38.2",
-    "@lexical/link": "^0.38.2",
-    "@lexical/list": "^0.38.2",
-    "@lexical/markdown": "^0.38.2",
-    "@lexical/plain-text": "^0.38.2",
-    "@lexical/rich-text": "^0.38.2",
-    "@lexical/selection": "^0.38.2",
-    "@lexical/table": "^0.38.2",
-    "@lexical/utils": "^0.38.2",
-    "lexical": "^0.38.2",
+    "@lexical/clipboard": "^0.41.0",
+    "@lexical/code": "^0.41.0",
+    "@lexical/extension": "^0.41.0",
+    "@lexical/history": "^0.41.0",
+    "@lexical/html": "^0.41.0",
+    "@lexical/link": "^0.41.0",
+    "@lexical/list": "^0.41.0",
+    "@lexical/markdown": "^0.41.0",
+    "@lexical/plain-text": "^0.41.0",
+    "@lexical/rich-text": "^0.41.0",
+    "@lexical/selection": "^0.41.0",
+    "@lexical/table": "^0.41.0",
+    "@lexical/utils": "^0.41.0",
     "dompurify": "^3.3.0",
+    "lexical": "^0.41.0",
     "marked": "^16.4.1",
     "prismjs": "^1.30.0"
   },