lexxy 0.9.0.beta → 0.9.1.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fb166e590d74646ee8cbb992f3dd36774f5cfc84f4552f1ed13b08acad1ad383
-  data.tar.gz: dc6638a1acae7c2ff1289790621f80bab042d9f77fe301df34960010878cc23e
+  metadata.gz: 857d629c986ab28555fc79821525be30888fdfa3083b900dfbc8a1b74f42b1db
+  data.tar.gz: 34c6e06b8a36438eaed68aaf9421a6388b85d1004bf1a8682e3d83bf0d29ed55
 SHA512:
-  metadata.gz: 1056b0125923bf36c8114a01e39295d42de1e26aeb207cac301ee974e7183655e4025ca430a4b40c1d5418f9ce38cd9e7fd2fec549d24eeb49f4c0bed7aa856a
-  data.tar.gz: 3230d626e983c5bff9727515ddf2af0f2037bb2351241821975011601911758721a0aa5df042cf63934ccaaaddabe9609a847c18a1012d5d645b5e900a956600
+  metadata.gz: 0c1ef0dfa8299890c9d165b9e76a254f465f107404fb2c281ad1f830d5f2c9f97641eae0070d88bf24a201f5358448793d00d2cea3f2131edd08bdc56358339f
+  data.tar.gz: c06d85591d104ca856ddcea2cfa5fe00d678eab8eed4455b88bfef8338535bd1d1de4299debb0c873d4790104433ad06f9be18ad964df365817fde8e7d1c6b3d

data/app/assets/javascript/lexxy.js

@@ -5266,13 +5266,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}
@@ -5296,10 +5296,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>
@@ -5309,21 +5309,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}
@@ -5335,7 +5320,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">
@@ -5353,10 +5338,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>
@@ -8240,7 +8232,8 @@ const COMMANDS = [
   "insertQuoteBlock",
   "insertCodeBlock",
   "insertHorizontalDivider",
-  "uploadAttachments",
+  "uploadImage",
+  "uploadFile",
 
   "insertTable",
 
@@ -8424,15 +8417,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);