lexxy 0.8.6.beta → 0.9.1.beta

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8294fbf164b9b8fb87be2f8025cc8fd563e3fd5bb61daaf1415ff93f39a588bc
-  data.tar.gz: f40f1aa544f74bf7e0c2fb5fdd7b6a0850426eeb30861d2631f08c4bfefe7ec9
+  metadata.gz: 857d629c986ab28555fc79821525be30888fdfa3083b900dfbc8a1b74f42b1db
+  data.tar.gz: 34c6e06b8a36438eaed68aaf9421a6388b85d1004bf1a8682e3d83bf0d29ed55
 SHA512:
-  metadata.gz: 5d032f3f71e366385c22ce4cfbd0e5c48d3af49aa28001d6c7d13a931e62d9df57c9549728ccbd4bf105c1cb3d24e21e0693754726887f7c8db248677b2de23f
-  data.tar.gz: 1877815c54a4436a398f471eb0277e7fc68526e0f24ad6680902fd2ebdde198cc450889d279d17bbea7811524ea9716eaea750f0560063f03ed1d50226e3510b
+  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);
@@ -10711,7 +10716,8 @@ class Contents {
   }
 
   #splitParagraphsAtLineBreaks(selection) {
-    const selectedNodeKeys = new Set(selection.getNodes().map(n => n.getKey()));
+    const anchorKey = selection.anchor.getNode().getKey();
+    const focusKey = selection.focus.getNode().getKey();
     const topLevelElements = this.#topLevelElementsInSelection(selection);
 
     for (const element of topLevelElements) {
@@ -10720,6 +10726,14 @@ class Contents {
       const children = element.getChildren();
       if (!children.some(Zn)) continue
 
+      // Check whether this paragraph needs splitting: skip only if neither
+      // selection endpoint is inside it (meaning it's a middle paragraph
+      // fully between anchor and focus with no partial lines to split off).
+      const hasEndpoint = children.some(child =>
+        child.getKey() === anchorKey || child.getKey() === focusKey
+      );
+      if (!hasEndpoint) continue
+
       const groups = [ [] ];
       for (const child of children) {
         if (Zn(child)) {
@@ -10730,8 +10744,6 @@ class Contents {
         }
       }
 
-      if (groups.every(group => group.some(child => selectedNodeKeys.has(child.getKey())))) continue
-
       for (const group of groups) {
         if (group.length === 0) continue
         const paragraph = Vi();
@@ -11019,7 +11031,9 @@ class Clipboard {
       return true
     }
 
-    return this.#handlePastedFiles(clipboardData)
+    const handled = this.#handlePastedFiles(clipboardData);
+    if (handled) event.preventDefault();
+    return handled
   }
 
   #isPlainTextOrURLPasted(clipboardData) {
@@ -11117,14 +11131,21 @@ class Clipboard {
       return true
     }
 
-    if (html) {
+    if (html && !this.#isLexicalClipboardData(clipboardData)) {
       this.contents.insertHtml(html, { tag: Jn });
       return true
     }
 
-    this.#uploadFilesPreservingScroll(files);
+    if (files.length) {
+      this.#uploadFilesPreservingScroll(files);
+      return true
+    }
+
+    return false
+  }
 
-    return true
+  #isLexicalClipboardData(clipboardData) {
+    return Array.from(clipboardData.types).includes("application/x-lexical-editor")
   }
 
   #isCopiedImageHTML(html) {