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

package/dist/lexxy_helpers.esm.js

@@ -28,64 +28,6 @@ import 'prismjs/components/prism-kotlin';
 window.Prism ||= {};
 window.Prism.manual = true;
 
-function createElement(name, properties, content = "") {
-  const element = document.createElement(name);
-  for (const [ key, value ] of Object.entries(properties || {})) {
-    if (key in element) {
-      element[key] = value;
-    } else if (value !== null && value !== undefined) {
-      element.setAttribute(key, value);
-    }
-  }
-  if (content) {
-    element.innerHTML = content;
-  }
-  return element
-}
-
-function parseHtml(html) {
-  const parser = new DOMParser();
-  return parser.parseFromString(html, "text/html")
-}
-
-function createAttachmentFigure(contentType, isPreviewable, fileName) {
-  const extension = fileName ? fileName.split(".").pop().toLowerCase() : "unknown";
-  return createElement("figure", {
-    className: `attachment attachment--${isPreviewable ? "preview" : "file"} attachment--${extension}`,
-    "data-content-type": contentType
-  })
-}
-
-function isPreviewableImage(contentType) {
-  return contentType.startsWith("image/") && !contentType.includes("svg")
-}
-
-function dispatch(element, eventName, detail = null, cancelable = false) {
-  return element.dispatchEvent(new CustomEvent(eventName, { bubbles: true, detail, cancelable }))
-}
-
-function addBlockSpacing(doc) {
-  const blocks = doc.querySelectorAll("body > :not(h1, h2, h3, h4, h5, h6) + *");
-  for (const block of blocks) {
-    const spacer = doc.createElement("p");
-    spacer.appendChild(doc.createElement("br"));
-    block.before(spacer);
-  }
-}
-
-function generateDomId(prefix) {
-  const randomPart = Math.random().toString(36).slice(2, 10);
-  return `${prefix}-${randomPart}`
-}
-
-function extractPlainTextFromHtml(innerHtml = "") {
-  return parseHtml(innerHtml).body.textContent.trim()
-}
-
-function isActiveAndVisible(element) {
-  return element && !element.disabled && element.checkVisibility()
-}
-
 function highlightCode() {
   const elements = document.querySelectorAll("pre[data-language]");
 
@@ -108,13 +50,11 @@ function highlightElement(preElement) {
   code = new DOMParser().parseFromString(code, "text/html").body.textContent || "";
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
-  const codeElement = createElement("code", { "data-language": language, innerHTML: highlightedHtml });
+  preElement.innerHTML = highlightedHtml;
 
   if (highlights.length > 0) {
-    applyHighlightRanges(codeElement, highlights);
+    applyHighlightRanges(preElement, highlights);
   }
-
-  preElement.replaceChildren(codeElement);
 }
 
 // Walk the DOM tree inside a <pre> element and build a list of
@@ -220,4 +160,4 @@ function collectTextNodes(root) {
   return nodes
 }
 
-export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, extractPlainTextFromHtml, generateDomId, highlightCode, isActiveAndVisible, isPreviewableImage, parseHtml };
+export { highlightCode };

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.10-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"
   },