@37signals/lexxy 0.9.31 → 0.9.33

package/dist/lexxy_helpers.esm.js

@@ -44,12 +44,13 @@ function highlightElement(preElement) {
   const grammar = Prism.languages?.[language];
   if (!grammar) return
 
-  // Read the source text and <mark> ranges in a single walk, before Prism
-  // rewrites the element. Sharing one traversal keeps the highlight offsets
-  // aligned with the code string and preserves leading whitespace — deriving
-  // either of them separately (e.g. textContent through DOMParser) collapses
-  // leading whitespace and shifts every range, re-indenting the rendered block.
-  const { code, highlights } = extractCodeAndHighlights(preElement);
+  // Read the source text and the <mark> and <a> ranges in a single walk,
+  // before Prism rewrites the element. Sharing one traversal keeps the range
+  // offsets aligned with the code string and preserves leading whitespace —
+  // deriving either of them separately (e.g. textContent through DOMParser)
+  // collapses leading whitespace and shifts every range, re-indenting the
+  // rendered block.
+  const { code, highlights, links } = extractCodeAndMarkup(preElement);
 
   const highlightedHtml = Prism.highlight(code, grammar, language);
   preElement.innerHTML = highlightedHtml;
@@ -58,18 +59,24 @@ function highlightElement(preElement) {
     applyHighlightRanges(preElement, highlights);
   }
 
+  if (links.length > 0) {
+    applyLinkRanges(preElement, links);
+  }
+
   preElement.dataset.highlighted = "true";
 }
 
-// Walk the <pre> once, building Prism's source text and the <mark> ranges
-// together: a text node contributes its text verbatim, a <br> contributes a
-// newline, and a <mark> records the slice of code it covers. Because both
-// outputs come from the same walk, every range offset is just a position in
-// `code` — so the highlights can't drift out of sync with the source, and the
-// block's leading whitespace survives (HTML parsing would collapse it).
-function extractCodeAndHighlights(preElement) {
+// Walk the <pre> once, building Prism's source text and the <mark> and <a>
+// ranges together: a text node contributes its text verbatim, a <br>
+// contributes a newline, and a <mark> or <a> records the slice of code it
+// covers. Because all outputs come from the same walk, every range offset is
+// just a position in `code` — so the markup can't drift out of sync with the
+// source, and the block's leading whitespace survives (HTML parsing would
+// collapse it).
+function extractCodeAndMarkup(preElement) {
   const root = preElement.querySelector("code") || preElement;
   const highlights = [];
+  const links = [];
   let code = "";
 
   function walk(node) {
@@ -87,6 +94,12 @@ function extractCodeAndHighlights(preElement) {
         if (style) {
           highlights.push({ start, end: code.length, style });
         }
+      } else if (node.tagName === "A" && node.getAttribute("href")) {
+        const start = code.length;
+        for (const child of node.childNodes) {
+          walk(child);
+        }
+        links.push({ start, end: code.length, attributes: linkAttributes(node) });
       } else {
         for (const child of node.childNodes) {
           walk(child);
@@ -99,7 +112,17 @@ function extractCodeAndHighlights(preElement) {
     walk(child);
   }
 
-  return { code, highlights }
+  return { code, highlights, links }
+}
+
+function linkAttributes(element) {
+  const attributes = { href: element.getAttribute("href") };
+  for (const name of [ "target", "rel", "title" ]) {
+    if (element.getAttribute(name)) {
+      attributes[name] = element.getAttribute(name);
+    }
+  }
+  return attributes
 }
 
 function extractStyle(element) {
@@ -109,16 +132,32 @@ function extractStyle(element) {
   return parts.length > 0 ? parts.join(" ") : null
 }
 
-// Wrap character ranges in <mark> elements within a Prism-highlighted DOM tree.
-// Each range is applied independently, re-collecting text nodes each time to
-// account for splits from previous ranges.
+// Wrap character ranges in <mark> or <a> elements within a Prism-highlighted
+// DOM tree. Each range is applied independently, re-collecting text nodes
+// each time to account for splits from previous ranges.
 function applyHighlightRanges(element, highlights) {
   for (const { start, end, style } of highlights) {
-    wrapRange(element, start, end, style);
+    wrapRange(element, start, end, () => {
+      const mark = document.createElement("mark");
+      mark.setAttribute("style", style);
+      return mark
+    });
+  }
+}
+
+function applyLinkRanges(element, links) {
+  for (const { start, end, attributes } of links) {
+    wrapRange(element, start, end, () => {
+      const anchor = document.createElement("a");
+      for (const [ name, value ] of Object.entries(attributes)) {
+        anchor.setAttribute(name, value);
+      }
+      return anchor
+    });
   }
 }
 
-function wrapRange(container, rangeStart, rangeEnd, style) {
+function wrapRange(container, rangeStart, rangeEnd, createWrapper) {
   const textNodes = collectTextNodes(container);
 
   // Process in reverse so DOM mutations don't shift earlier text node offsets
@@ -133,14 +172,13 @@ function wrapRange(container, rangeStart, rangeEnd, style) {
     const text = node.textContent;
     const parent = node.parentNode;
 
-    const mark = document.createElement("mark");
-    mark.setAttribute("style", style);
-    mark.textContent = text.slice(relStart, relEnd);
+    const wrapper = createWrapper();
+    wrapper.textContent = text.slice(relStart, relEnd);
 
     if (relEnd < text.length) {
       parent.insertBefore(document.createTextNode(text.slice(relEnd)), node.nextSibling);
     }
-    parent.insertBefore(mark, node.nextSibling);
+    parent.insertBefore(wrapper, node.nextSibling);
 
     if (relStart > 0) {
       node.textContent = text.slice(0, relStart);

package/dist/stylesheets/lexxy-editor.css

@@ -210,12 +210,6 @@
         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--error {
@@ -327,15 +321,6 @@
     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 */
   /* ------------------------------------------------------------------------ */
 
@@ -372,43 +357,28 @@
     }
   }
 
-  .attachment__caption {
-    textarea {
-      background: transparent;
-      block-size: fit-content;
-      border: 0;
-      border-radius: var(--lexxy-radius);
-      box-sizing: border-box;
-      color: inherit;
+  .attachment__caption--editable {
+    box-sizing: border-box;
+    cursor: text;
+
+    .attachment__caption-text {
       display: block;
-      font-size: inherit;
-      font-family: inherit;
-      inline-size: 100%;
-      max-inline-size: 100%;
-      padding: 0;
+      min-block-size: 1lh;
+      overflow-wrap: anywhere;
+      white-space: pre-wrap;
       text-align: center;
+    }
 
-      @supports (resize: none) {
-        resize: none;
-      }
-
-      &:focus {
-        background: var(--lexxy-color-canvas);
-        outline: 0;
-      }
-
-      &:placeholder-shown {
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      @supports (field-sizing: content) {
-        field-sizing: content;
-        inline-size: 100%;
-      }
+    &[data-placeholder] .attachment__caption-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
+
+  .attachment__caption--editing .attachment__caption-text {
+    display: none;
+  }
 }
 
 /* Reserve the mounted height before upgrade so it doesn't shift layout on mount. */
@@ -636,7 +606,7 @@
       padding: 1ch;
       position: relative;
 
-      &[aria-pressed="true"] {
+      &[aria-checked="true"] {
         background-color: var(--lexxy-color-selected);
 
         &:hover {
@@ -782,6 +752,10 @@
         grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr));
         max-inline-size: var(--max-inline-size);
 
+        .lexxy-highlight-colors__group {
+          display: contents;
+        }
+
         button {
           block-size: unset;
           inline-size: 100%;
@@ -796,7 +770,7 @@
             position: absolute;
           }
 
-          &[aria-pressed="true"] {
+          &[aria-checked="true"] {
             background-color: transparent;
             box-shadow: 0 0 0 2px currentColor inset;
 
@@ -830,8 +804,7 @@
   position: absolute;
   z-index: 2;
 
-  button,
-  summary {
+  button {
     align-items: center;
     background: transparent;
     block-size: var(--button-size);
@@ -849,7 +822,7 @@
 
     @media(any-hover: hover) {
       &:hover:not([aria-disabled="true"]),
-      [open] &:is(summary) {
+      &.lexxy-table-control__more-menu-trigger[aria-expanded="true"] {
         background: var(--lexxy-color-ink-medium);
 
         svg {
@@ -880,8 +853,10 @@
     }
   }
 
-  summary {
+  .lexxy-table-control__more-menu-trigger {
+    aspect-ratio: auto;
     box-shadow: 0 0 0 1px inset rgba(128, 128, 128, 0.3);
+    font-weight: normal;
     padding: 0 1.25ch;
   }
 
@@ -909,6 +884,7 @@
       white-space: nowrap;
 
       .lexxy-table-control__more-menu {
+        display: flex;
         gap: 0;
         position: relative;
 
@@ -924,6 +900,10 @@
           position: absolute;
           transform: translateX(-50%);
 
+          &[hidden] {
+            display: none;
+          }
+
           button {
             aspect-ratio: unset;
             flex-direction: row;
@@ -994,20 +974,40 @@
 
 
   /* --------------------------------------------------------------------------
-  /* Attachment delete button */
+  /* Attachment toolbar */
 
-  &:is(lexxy-node-delete-button) {
-    inset-block-start: 0;
-    inset-inline-start: 100%;
-    opacity: 0;
-    pointer-events: none;
+  &:is(lexxy-attachment-toolbar) {
+    display: flex;
+    /* The anchor is measured in px from the editor's top-left, so these stay physical. */
+    left: calc(var(--lexxy-anchor-left) + var(--lexxy-anchor-width));
+    top: var(--lexxy-anchor-top);
+    transform: translate(-100%, 0);
 
-    .node--selected & {
-      opacity: 1;
-      pointer-events: auto;
+    &[hidden] {
+      display: none;
     }
 
-    .lexxy-node-delete:hover {
+    /* The divider is thinner than the button. */
+    &[data-node-type="horizontal_divider"] {
+      --button-size: 1.8lh;
+
+      top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
+      transform: translate(calc(-100% - 0.5ch), -50%);
+    }
+
+    &[data-presentation="inline"] {
+      --button-size: 1.6lh;
+
+      top: calc(var(--lexxy-anchor-top) + var(--lexxy-anchor-height) / 2);
+      transform: translate(0.5ch, -50%);
+
+      &[data-overflow] {
+        transform: translate(-100%, -50%);
+      }
+    }
+
+    .lexxy-attachment-toolbar__remove:hover,
+    .lexxy-attachment-toolbar__remove:focus-visible {
       background-color: var(--lexxy-color-red);
     }
   }
@@ -1135,20 +1135,49 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
 
     outline: none;
   }
+}
 
-  lexxy-node-delete-button {
-    inset-inline-start: 0;
-    line-height: 1lh;
+/* --------------------------------------------------------------------------
+/* Screen readers need access to announcements and selection labels. */
+:where(lexxy-live-region, .lexxy-fake-selection) {
+  block-size: 1px;
+  border: 0;
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
 
-    .lexxy-floating-controls__group {
-      --button-size: 1lh;
+/* The DOM Selection API requires selectable text. */
+.lexxy-fake-selection {
+  -webkit-user-select: text;
 
-      background-color: var(--lexxy-color-accent-dark);
-      padding: 0;
+  @supports (user-select: text) {
+    user-select: text;
+  }
+}
 
-      button {
-        border-radius: 50%;
-      }
-    }
+
+/* Screen readers need the caption field outside the editor's textbox. */
+:where(.lexxy-caption-editor) {
+  position: absolute;
+  z-index: 2;
+  box-sizing: border-box;
+  background: var(--lexxy-color-canvas);
+  border: 0;
+  border-radius: var(--lexxy-radius);
+  outline: 0;
+  padding: 0;
+  overflow: hidden;
+
+  @supports (resize: none) {
+    resize: none;
+  }
+
+  &[hidden] {
+    display: none;
   }
 }

package/dist/stylesheets/lexxy-variables.css

@@ -49,11 +49,11 @@
 
   --highlight-bg-1: rgba(229, 223, 6, 0.3);
   --highlight-bg-2: rgba(255, 185, 87, 0.3);
-  --highlight-bg-3: rgba(255, 118, 118, 0.3); 
+  --highlight-bg-3: rgba(255, 118, 118, 0.3);
   --highlight-bg-4: rgba(248, 137, 216, 0.3);
-  --highlight-bg-5: rgba(190, 165, 255, 0.3); 
+  --highlight-bg-5: rgba(190, 165, 255, 0.3);
   --highlight-bg-6: rgba(124, 192, 252, 0.3);
-  --highlight-bg-7: rgba(140, 255, 129, 0.3); 
+  --highlight-bg-7: rgba(140, 255, 129, 0.3);
   --highlight-bg-8: rgba(221, 170, 123, 0.3);
   --highlight-bg-9: rgba(200, 200, 200, 0.3);
 
@@ -84,4 +84,4 @@
   --lexxy-radius: 0.5ch;
   --lexxy-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   --lexxy-z-popup: 1000;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@37signals/lexxy",
-  "version": "0.9.31",
+  "version": "0.9.33",
   "description": "Lexxy - A modern rich text editor for Rails.",
   "module": "dist/lexxy.esm.js",
   "type": "module",