@37signals/lexxy 0.9.0-beta → 0.9.1-beta

package/dist/lexxy.esm.js

@@ -696,13 +696,13 @@ class LexicalToolbarElement extends HTMLElement {
 
   static get defaultTemplate() {
     return `
-    <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadAttachments" data-prevent-overflow="true" title="Add images">
-      ${ToolbarIcons.image}
-    </button>
+      <button class="lexxy-editor__toolbar-button" type="button" name="image" data-command="uploadImage" data-prevent-overflow="true" title="Add images and video">
+        ${ToolbarIcons.image}
+      </button>
 
-    <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="file" data-command="uploadAttachments" title="Upload files">
-      ${ToolbarIcons.attachment}
-    </button>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="file" data-command="uploadFile" title="Upload files">
+        ${ToolbarIcons.attachment}
+      </button>
 
       <button class="lexxy-editor__toolbar-button" type="button" name="bold" data-command="bold" title="Bold">
         ${ToolbarIcons.bold}
@@ -726,10 +726,10 @@ class LexicalToolbarElement extends HTMLElement {
           <button type="button" name="heading-medium" data-command="setFormatHeadingMedium" title="Medium heading">
             ${ToolbarIcons.h3} <span>Medium Heading</span>
           </button>
-          <button type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
+          <button class="lexxy-editor__toolbar-group-end" type="button" name="heading-small" data-command="setFormatHeadingSmall" title="Small heading">
             ${ToolbarIcons.h4} <span>Small Heading</span>
           </button>
-          <div class="separator" role="separator"></div>
+          <div class="lexxy-editor__toolbar-separator" role="separator"></div>
           <button type="button" name="strikethrough" data-command="strikethrough" title="Strikethrough">
             ${ToolbarIcons.strikethrough} <span>Strikethrough</span>
           </button>
@@ -739,21 +739,6 @@ class LexicalToolbarElement extends HTMLElement {
         </div>
       </details>
 
-
-      <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" name="lists" title="Lists">
-          ${ToolbarIcons.ul}
-        </summary>
-        <div class="lexxy-editor__toolbar-dropdown-list">
-          <button type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
-            ${ToolbarIcons.ul} <span>Bullets</span>
-          </button>
-          <button type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
-            ${ToolbarIcons.ol} <span>Numbers</span>
-          </button>
-        </div>
-      </details>
-
       <details class="lexxy-editor__toolbar-dropdown lexxy-editor__toolbar-dropdown--chevron" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
           ${ToolbarIcons.highlight}
@@ -765,7 +750,7 @@ class LexicalToolbarElement extends HTMLElement {
       </details>
 
       <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
-        <summary class="lexxy-editor__toolbar-button" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
+        <summary class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" name="link" title="Link" data-hotkey="cmd+k ctrl+k">
           ${ToolbarIcons.link}
         </summary>
         <lexxy-link-dropdown class="lexxy-editor__toolbar-dropdown-content">
@@ -783,10 +768,17 @@ class LexicalToolbarElement extends HTMLElement {
         ${ToolbarIcons.quote}
       </button>
 
-      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="code" data-command="insertCodeBlock" title="Code">
+      <button class="lexxy-editor__toolbar-button" type="button" name="code" data-command="insertCodeBlock" title="Code">
         ${ToolbarIcons.code}
       </button>
 
+      <button class="lexxy-editor__toolbar-button" type="button" name="unordered-list" data-command="insertUnorderedList" title="Bullet list">
+        ${ToolbarIcons.ul}
+      </button>
+      <button class="lexxy-editor__toolbar-button lexxy-editor__toolbar-group-end" type="button" name="ordered-list" data-command="insertOrderedList" title="Numbered list">
+        ${ToolbarIcons.ol}
+      </button>
+
       <button class="lexxy-editor__toolbar-button" type="button" name="table" data-command="insertTable" title="Insert a table">
         ${ToolbarIcons.table}
       </button>
@@ -1961,7 +1953,8 @@ const COMMANDS = [
   "insertQuoteBlock",
   "insertCodeBlock",
   "insertHorizontalDivider",
-  "uploadAttachments",
+  "uploadImage",
+  "uploadFile",
 
   "insertTable",
 
@@ -2145,15 +2138,27 @@ class CommandDispatcher {
     this.contents.applyParagraphFormat();
   }
 
-  dispatchUploadAttachments() {
-    const input = createElement("input", {
+  dispatchUploadImage() {
+    this.#dispatchUploadAttachment("image/*,video/*");
+  }
+
+  dispatchUploadFile() {
+    this.#dispatchUploadAttachment();
+  }
+
+  #dispatchUploadAttachment(accept = null) {
+    const attributes = {
       type: "file",
       multiple: true,
       style: "display: none;",
       onchange: ({ target: { files } }) => {
         this.contents.uploadFiles(files, { selectLast: true });
       }
-    });
+    };
+
+    if (accept) attributes.accept = accept;
+
+    const input = createElement("input", attributes);
 
     // Append and remove to make testable
     this.editorElement.appendChild(input);

package/dist/stylesheets/lexxy-editor.css

@@ -488,14 +488,15 @@
 
       &:after {
         background-color: var(--lexxy-color-ink-lighter);
+        block-size: var(--lexxy-toolbar-icon-size);
         content: "";
         display: block;
-        width: 1px;
-        height: 60%;
+        inline-size: 1px;
         inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing));
-        inset-block-start: 20%;
-        position: absolute;
+        inset-block: 0;
+        margin: auto;
         pointer-events: none;
+        position: absolute;
       }
     }
   }
@@ -556,11 +557,6 @@
     }
   }
 
-  [overflowing] &:not(.lexxy-editor__toolbar-overflow) summary ~ * {
-    inset-inline-end: var(--lexxy-toolbar-spacing);
-    inset-inline-start: var(--lexxy-toolbar-spacing);
-  }
-
   button {
     color: var(--lexxy-color-text);
 
@@ -572,7 +568,6 @@
   .lexxy-editor__toolbar-dropdown-list {
     border-start-start-radius: 0;
     flex-direction: column;
-    gap: 0.1ch;
     padding: 0.1ch;
 
     button {
@@ -581,6 +576,7 @@
       flex-direction: row;
       gap: 1ch;
       padding: 1ch;
+      position: relative;
 
       &[aria-pressed="true"] {
         background-color: var(--lexxy-color-selected);
@@ -600,11 +596,22 @@
       }
     }
 
-    .separator {
+    .lexxy-editor__toolbar-separator {
       background: var(--lexxy-color-ink-lighter);
       block-size: 1px;
       inline-size: 100%;
     }
+
+    [overflowing] & {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+
+      button span { display: none; }
+
+      .lexxy-editor__toolbar-separator {
+        grid-column: 1 / -1;
+      }
+    }
   }
 
 
@@ -706,6 +713,11 @@
     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;
     }

package/package.json

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