@37signals/lexxy 0.8.5-beta → 0.9.0-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;

package/dist/stylesheets/lexxy-editor.css

@@ -436,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;
   }
 
@@ -503,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);
@@ -541,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 */

package/package.json

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