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

package/dist/lexxy_helpers.esm.js

@@ -36,6 +36,15 @@ 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}`
@@ -64,4 +73,4 @@ function highlightElement(preElement) {
   preElement.replaceWith(codeElement);
 }
 
-export { createAttachmentFigure, createElement, dispatch, generateDomId, highlightCode, isPreviewableImage, parseHtml };
+export { addBlockSpacing, createAttachmentFigure, createElement, dispatch, generateDomId, highlightCode, isPreviewableImage, parseHtml };

package/dist/stylesheets/lexxy-content.css

@@ -28,8 +28,10 @@
   dl,
   blockquote,
   figure,
-  .attachment {
+  .attachment,
+  .attachment-gallery {
     margin-block: 0 var(--lexxy-content-margin);
+    position: relative;
 
     &:not(lexxy-editor &) {
       overflow-wrap: break-word;
@@ -85,6 +87,7 @@
   object {
     inline-size: auto;
     margin-inline: auto;
+    min-block-size: 3em;
     max-block-size: 32rem;
     object-fit: contain;
 
@@ -137,6 +140,26 @@
     }
   }
 
+  hr {
+    border: 0;
+    border-block-end: 1px solid currentColor;
+    inline-size: 20%;
+    margin: calc(0.5em + var(--lexxy-content-margin)) 0;
+  }
+
+  .horizontal-divider {
+    margin: 0;
+    padding: calc(0.5em + var(--lexxy-content-margin)) 0;
+
+    hr {
+      margin: 0;
+    }
+  }
+
+  *:has(+ .horizontal-divider) {
+    margin-block-end: 0;
+  }
+
   > :last-child {
     margin-block-end: 0;
   }
@@ -254,111 +277,97 @@
       }
     }
   }
-}
-
-/* Attachments
-/* ------------------------------------------------------------------------ */
-
-:where(.attachment) {
-  block-size: auto;
-  display: block;
-  inline-size: fit-content;
-  position: relative;
-  margin-inline: auto;
-  max-inline-size: 100%;
-  text-align: center;
 
-  :where(progress) {
-    inline-size: 100%;
-    margin: auto;
-  }
-}
 
-:where(.attachment__caption) {
-  color: var(--lexxy-color-text-subtle);
-  font-size: var(--lexxy-text-small);
+  /* Attachments
+  /* ------------------------------------------------------------------------ */
 
-  textarea {
-    background: var(--lexxy-color-canvas);
-    border: none;
-    color: inherit;
-    font-family: inherit;
-    inline-size: 100%;
-    max-inline-size: 100%;
-    resize: none;
+  p:has(.attachment) {
     text-align: center;
-
-    &:focus {
-      outline: none;
-    }
-
-    @supports (field-sizing: content) {
-      field-sizing: content;
-      inline-size: auto;
-      min-inline-size: 20ch;
-    }
   }
-}
-
-:where(.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-radius: var(--lexxy-radius);
-  box-sizing: border-box;
-  color: var(--lexxy-attachment-icon-color);
-  display: grid;
-  font-size: var(--lexxy-text-small);
-  font-weight: bold;
-  inline-size: auto;
-  place-content: center;
-  text-transform: uppercase;
-}
-
-:where(.attachment--preview) {
-  border-radius: var(--lexxy-radius);
 
-  img, video {
+  .attachment {
+    --lexxy-attachment-gap: 0.75ch;
+    
     block-size: auto;
-    display: block;
+    box-sizing: border-box;
+    border-radius: var(--lexxy-radius);
+    display: table; /* Using table to wrap the caption to fit the attachment's width */
+    inline-size: fit-content;
     margin-inline: auto;
     max-inline-size: 100%;
-    user-select: none;
-  }
+    min-inline-size: 10ch;
+    padding: var(--lexxy-attachment-gap);
+    position: relative;
+    text-align: center;
 
-  > a {
-    display: block;
+    :where(progress) {
+      inline-size: 100%;
+      margin: auto;
+    }
   }
 
   .attachment__caption {
-    margin-block-start: 1ch;
+    caption-side: bottom;
+    color: var(--lexxy-color-text-subtle);
+    display: table-caption;
+    font-size: var(--lexxy-text-small);
+  }
+
+  .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-radius: var(--lexxy-radius);
+    box-sizing: border-box;
+    color: var(--lexxy-attachment-icon-color);
+    display: grid;
+    font-size: var(--lexxy-text-small);
+    font-weight: bold;
+    inline-size: auto;
+    place-content: center;
+    text-transform: uppercase;
   }
-}
 
-:where(.attachment--file) {
-  --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
+  .attachment--preview {
 
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1ch;
-  inline-size: auto;
+    img, video {
+      border-radius: var(--lexxy-radius);
+      block-size: auto;
+      display: block;
+      margin-inline: auto;
+      max-inline-size: 100%;
+      user-select: none;
+    }
 
-  .attachment__caption {
-    display: grid;
-    flex: 1;
-    text-align: start;
+    > a {
+      display: block;
+    }
   }
 
-  .attachment__name {
-    color: var(--lexxy-color-ink);
-    font-weight: bold;
+  .attachment--file {
+    --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle);
+
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0;
+    inline-size: auto;
+
+    .attachment__caption {
+      display: grid;
+      flex: 1;
+      text-align: start;
+    }
+
+    .attachment__name {
+      color: var(--lexxy-color-ink);
+      font-weight: bold;
+    }
   }
-}
 
-:where(
   .attachment--psd,
   .attachment--key,
   .attachment--sketch,
@@ -367,12 +376,10 @@
   .attachment--indd,
   .attachment--svg,
   .attachment--ppt,
-  .attachment--pptx
-) {
-  --lexxy-attachment-icon-color: var(--lexxy-color-red);
-}
+  .attachment--pptx {
+    --lexxy-attachment-icon-color: var(--lexxy-color-red);
+  }
 
-:where(
   .attachment--css,
   .attachment--php,
   .attachment--json,
@@ -381,71 +388,95 @@
   .attachment--rb,
   .attachment--erb,
   .attachment--ts,
-  .attachment--js
-) {
-  --lexxy-attachment-icon-color: var(--lexxy-color-purple);
-}
+  .attachment--js {
+    --lexxy-attachment-icon-color: var(--lexxy-color-purple);
+  }
 
-:where(
   .attachment--txt,
   .attachment--pages,
   .attachment--rtf,
   .attachment--md,
   .attachment--doc,
-  .attachment--docx
-) {
-  --lexxy-attachment-icon-color: var(--lexxy-color-blue);
-}
+  .attachment--docx {
+    --lexxy-attachment-icon-color: var(--lexxy-color-blue);
+  }
 
-:where(
   .attachment--csv,
   .attachment--numbers,
   .attachment--xls,
-  .attachment--xlsx
-) {
-  --lexxy-attachment-icon-color: var(--lexxy-color-green);
-}
+  .attachment--xlsx {
+    --lexxy-attachment-icon-color: var(--lexxy-color-green);
+  }
 
-/* Horizontal divider */
-:where(.horizontal-divider) {
-  margin: 0;
-  margin-block-end: .5em;
-  padding: 1.5em 0 .5em;
 
-  hr {
-    border: 0;
-    border-block-end: 1px solid currentColor;
-    inline-size: 20%;
+  /* Image galleries */
+  /* ------------------------------------------------------------------------ */
+
+  .attachment-gallery {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+
+    .attachment {
+      display: flex;
+      flex-direction: column;
+      gap: 1ch;
+      inline-size: 100%;
+    }
+
+    &:has(> :nth-child(2):last-child),
+    &:has(> :nth-child(4):last-child) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+
+  /* Custom attachments such as mentions, etc. */
+  /* ------------------------------------------------------------------------ */
+
+  action-text-attachment[content-type^="application/vnd.actiontext"] {
+    --lexxy-attachment-bg-color: transparent;
+    --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;
     margin: 0;
+    padding: 0;
+    position: relative;
+    white-space: normal;
+
+    img {
+      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);
+    }
   }
-}
 
-/* Custom attachments such as mentions, etc. */
-:where(action-text-attachment[content-type^="application/vnd.actiontext"]) {
-  --lexxy-attachment-bg-color: transparent;
-  --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;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  white-space: normal;
-
-  img {
-    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);
+
+  /* Horizontal divider */
+  /* ------------------------------------------------------------------------ */
+
+  .horizontal-divider {
+    margin: 0;
+    margin-block-end: .5em;
+    padding: 1.5em 0 .5em;
+
+    hr {
+      border: 0;
+      border-block-end: 1px solid currentColor;
+      inline-size: 20%;
+      margin: 0;
+    }
   }
+
 }