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

package/dist/lexxy_helpers.esm.js

@@ -50,6 +50,10 @@ function generateDomId(prefix) {
   return `${prefix}-${randomPart}`
 }
 
+function extractPlainTextFromHtml(innerHtml = "") {
+  return parseHtml(innerHtml).body.textContent.trim()
+}
+
 function highlightCode() {
   const elements = document.querySelectorAll("pre[data-language]");
 
@@ -65,12 +69,123 @@ function highlightElement(preElement) {
   const grammar = Prism.languages?.[language];
   if (!grammar) return
 
+  // Extract highlight ranges before Prism destroys <mark> elements
+  const highlights = extractHighlightRanges(preElement);
+
   // unescape HTML entities in the code block
   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 });
+
+  if (highlights.length > 0) {
+    applyHighlightRanges(codeElement, highlights);
+  }
+
   preElement.replaceWith(codeElement);
 }
 
-export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, generateDomId, highlightCode, isPreviewableImage, parseHtml };
+// Walk the DOM tree inside a <pre> element and build a list of
+// { start, end, style } ranges for every <mark> element found.
+function extractHighlightRanges(preElement) {
+  const ranges = [];
+  const root = preElement.querySelector("code") || preElement;
+
+  let offset = 0;
+
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      offset += node.textContent.length;
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.tagName === "BR") {
+        offset += 1;
+        return
+      }
+
+      const isMark = node.tagName === "MARK";
+      const start = offset;
+
+      for (const child of node.childNodes) {
+        walk(child);
+      }
+
+      if (isMark) {
+        const style = extractStyle(node);
+        if (style) {
+          ranges.push({ start, end: offset, style });
+        }
+      }
+    }
+  }
+
+  for (const child of root.childNodes) {
+    walk(child);
+  }
+
+  return ranges
+}
+
+function extractStyle(element) {
+  const parts = [];
+  if (element.style?.color) parts.push(`color: ${element.style.color};`);
+  if (element.style?.backgroundColor) parts.push(`background-color: ${element.style.backgroundColor};`);
+  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.
+function applyHighlightRanges(element, highlights) {
+  for (const { start, end, style } of highlights) {
+    wrapRange(element, start, end, style);
+  }
+}
+
+function wrapRange(container, rangeStart, rangeEnd, style) {
+  const textNodes = collectTextNodes(container);
+
+  // Process in reverse so DOM mutations don't shift earlier text node offsets
+  for (let i = textNodes.length - 1; i >= 0; i--) {
+    const { node, start: nodeStart, end: nodeEnd } = textNodes[i];
+    const overlapStart = Math.max(rangeStart, nodeStart);
+    const overlapEnd = Math.min(rangeEnd, nodeEnd);
+    if (overlapStart >= overlapEnd) continue
+
+    const relStart = overlapStart - nodeStart;
+    const relEnd = overlapEnd - nodeStart;
+    const text = node.textContent;
+    const parent = node.parentNode;
+
+    const mark = document.createElement("mark");
+    mark.setAttribute("style", style);
+    mark.textContent = text.slice(relStart, relEnd);
+
+    if (relEnd < text.length) {
+      parent.insertBefore(document.createTextNode(text.slice(relEnd)), node.nextSibling);
+    }
+    parent.insertBefore(mark, node.nextSibling);
+
+    if (relStart > 0) {
+      node.textContent = text.slice(0, relStart);
+    } else {
+      parent.removeChild(node);
+    }
+  }
+}
+
+function collectTextNodes(root) {
+  const nodes = [];
+  let offset = 0;
+  const walker = document.createTreeWalker(root, 4 /* NodeFilter.SHOW_TEXT */);
+
+  let node;
+  while ((node = walker.nextNode())) {
+    const length = node.textContent.length;
+    nodes.push({ node, start: offset, end: offset + length });
+    offset += length;
+  }
+
+  return nodes
+}
+
+export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, extractPlainTextFromHtml, generateDomId, highlightCode, isPreviewableImage, parseHtml };

package/dist/stylesheets/lexxy-content.css

@@ -55,6 +55,10 @@
     text-decoration: underline;
   }
 
+  .lexxy-content__strikethrough.lexxy-content__underline {
+    text-decoration: line-through underline;
+  }
+
   mark,
   .lexxy-content__highlight {
     background-color: transparent;
@@ -419,16 +423,12 @@
     text-align: center;
 
     .attachment {
-      display: inline-block;
+      display: inline-flex;
+      flex-direction: column;
+      gap: 0;
       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;
       }
@@ -451,10 +451,12 @@
     --lexxy-attachment-image-size: 1em;
     --lexxy-attachment-text-color: currentColor;
 
+    align-items: center;
     background: var(--lexxy-attachment-bg-color);
     border-radius: var(--lexxy-radius);
     color: var(--lexxy-attachment-text-color);
-    display: inline;
+    display: inline-flex;
+    gap: 0.25ch;
     margin: 0;
     padding: 0;
     position: relative;
@@ -464,8 +466,6 @@
       block-size: var(--lexxy-attachment-image-size);
       border-radius: 50%;
       inline-size: var(--lexxy-attachment-image-size);
-      margin-inline-end: 0.25ch;
-      vertical-align: middle;
     }
   }
 

package/dist/stylesheets/lexxy-editor.css

@@ -186,6 +186,8 @@
   }
 
   .attachment {
+    background-color: var(--lexxy-color-canvas);
+
     progress {
       max-inline-size: 10ch;
       margin: auto;
@@ -205,6 +207,93 @@
         inset-inline-start: unset;
       }
     }
+
+    &.attachment--error {
+      background: color-mix(var(--lexxy-color-red) 10%, transparent);
+      padding: 2ch;
+
+      &:before {
+        align-items: center;
+        aspect-ratio: 1;
+        background: var(--lexxy-color-red);
+        block-size: 1.5lh;
+        border-radius: 50%;
+        color: white;
+        content: "!";
+        display: flex;
+        justify-content: center;
+        margin: auto;
+      }
+
+      > div {
+        flex: 1;
+        font-size: 0.85em;
+        padding: 1ch;
+        text-align: start;
+      }
+    }
+  }
+
+  .attachment[draggable] {
+    cursor: grab;
+  }
+
+  .attachment.lexxy-dragging {
+    opacity: 0.4;
+  }
+
+  [class*="lexxy-drop-target--"] {
+    position: relative;
+  }
+
+  /* Horizontal line indicator for block and list drops */
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-before::before,
+  .lexxy-drop-target--list-after::after {
+    background-color: var(--lexxy-focus-ring-color);
+    block-size: 3px;
+    border-radius: 1px;
+    content: "";
+    inset-inline: 0;
+    pointer-events: none;
+    position: absolute;
+    transform: translate(0, 0.5ch);
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--list-before::before {
+    transform: translate(0, -0.5ch);
+  }
+
+  .lexxy-drop-target--block-before::before,
+  .lexxy-drop-target--list-before::before {
+    inset-block-start: -2px;
+  }
+
+  .lexxy-drop-target--block-after::after,
+  .lexxy-drop-target--list-after::after {
+    inset-block-end: -2px;
+  }
+
+  /* Vertical line indicator for gallery merge and reorder */
+  .lexxy-drop-target--gallery-before::before,
+  .lexxy-drop-target--gallery-after::after {
+    background-color: var(--lexxy-focus-ring-color);
+    border-radius: 1px;
+    content: "";
+    inset-block: 0;
+    inline-size: 3px;
+    pointer-events: none;
+    position: absolute;
+  }
+
+  .lexxy-drop-target--gallery-before::before {
+    inset-inline-start: -4px;
+  }
+
+  .lexxy-drop-target--gallery-after::after {
+    inset-inline-end: -4px;
   }
 
   .attachment:hover:not(.node--selected) {
@@ -225,27 +314,35 @@
   /* ------------------------------------------------------------------------ */
 
   .attachment-gallery {
+    --lexxy-attachment-gallery-columns: 3;
     --lexxy-attachment-gallery-gap: 0.4ch;
     --lexxy-focus-ring-offset: -6px;
 
-    display: block;
     padding: 0;
 
     .attachment {
+      background: transparent;
+      box-sizing: border-box;
       margin: var(--lexxy-attachment-gallery-gap);
       padding: 0;
       padding-block-end: var(--lexxy-attachment-gap);
       vertical-align: top;
 
-      &.attachment--error {
-        padding: 2ch;
-      }
-
       img {
         box-sizing: border-box;
         padding: 1ch;
         padding-block-end: 0;
       }
+
+
+      &.attachment--error {
+        background: color-mix(var(--lexxy-color-red) 10%, transparent);
+        padding: 2ch;
+
+        > div {
+          text-align: center;
+        }
+      }
     }
   }
 
@@ -339,7 +436,16 @@
   padding: 2px;
   position: relative;
 
-  &[data-attachments="false"] button[name="upload"]{
+  &[data-attachments="false"] button[name="image"],
+  &[data-attachments="false"] button[name="file"] {
+    display: none;
+  }
+
+  &[data-upload="file"] button[name="image"] {
+    display: none;
+  }
+
+  &[data-upload="image"] button[name="file"] {
     display: none;
   }
 
@@ -406,6 +512,25 @@
   user-select: none;
   -webkit-user-select: none;
 
+  &.lexxy-editor__toolbar-dropdown--chevron {
+    summary {
+      aspect-ratio: unset;
+      gap: 0.5ch;
+      grid-template-columns: 2fr 1fr;
+      padding-inline: 0.75ch;
+
+      &:after {
+        block-size: 0.3ch;
+        border-block-end: 2px solid currentcolor;
+        border-inline-end: 2px solid currentcolor;
+        content: "";
+        display: inline-block;
+        inline-size: 0.3ch;
+        transform: rotate(45deg);
+      }
+    }
+  }
+
   summary ~ * {
     background-color: var(--lexxy-color-canvas);
     border: 2px solid var(--lexxy-color-selected-hover);
@@ -444,6 +569,44 @@
     }
   }
 
+  .lexxy-editor__toolbar-dropdown-list {
+    border-start-start-radius: 0;
+    flex-direction: column;
+    gap: 0.1ch;
+    padding: 0.1ch;
+
+    button {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: 1ch;
+      padding: 1ch;
+
+      &[aria-pressed="true"] {
+        background-color: var(--lexxy-color-selected);
+
+        &:hover {
+          background-color: var(--lexxy-color-selected-hover);
+        }
+      }
+
+      span {
+        font-size: var(--lexxy-text-small);
+      }
+
+      svg {
+        block-size: 1lh;
+        inline-size: 1lh;
+      }
+    }
+
+    .separator {
+      background: var(--lexxy-color-ink-lighter);
+      block-size: 1px;
+      inline-size: 100%;
+    }
+  }
+
 
   /* --------------------------------------------------------------------------
   /* Overflow menu */
@@ -905,7 +1068,6 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
   }
 
   lexxy-node-delete-button {
-    display: none;
     inset-inline-start: 0;
     line-height: 1lh;
 
@@ -920,8 +1082,4 @@ action-text-attachment[content-type^="application/vnd.actiontext"] {
       }
     }
   }
-
-  &.node--selected lexxy-node-delete-button {
-    display: block;
-  }
 }

package/package.json

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