feat: enable headings to be configurable

app/assets/javascript/lexxy.js

@@ -4652,6 +4652,7 @@ const presets = new Configuration({
     multiLine: true,
     richText: true,
     toolbar: true,
+    headings: [ "h1", "h2", "h3", "h4", "h5", "h6" ],
     highlight: {
       buttons: {
         color: range(1, 9).map(n => `var(--highlight-${n})`),
@@ -5182,10 +5183,10 @@ class LexicalToolbarElement extends HTMLElement {
   }
 
   #closeDropdowns() {
-   this.#dropdowns.forEach((details) => {
-     details.open = false;
-   });
- }
+    this.#dropdowns.forEach((details) => {
+      details.open = false;
+    });
+  }
 
   get #dropdowns() {
     return this.querySelectorAll("details")
@@ -5225,9 +5226,14 @@ class LexicalToolbarElement extends HTMLElement {
       ${ToolbarIcons.strikethrough}
       </button>
 
-      <button class="lexxy-editor__toolbar-button" type="button" name="heading" data-command="rotateHeadingFormat" title="Heading">
-        ${ToolbarIcons.heading}
-      </button>
+      <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
+        <summary class="lexxy-editor__toolbar-button" name="heading" title="Heading">
+          ${ToolbarIcons.heading}
+        </summary>
+        <lexxy-heading-dropdown class="lexxy-editor__toolbar-dropdown-content">
+          <div class="lexxy-heading-options"></div>
+        </lexxy-heading-dropdown>
+      </details>
 
       <details class="lexxy-editor__toolbar-dropdown" name="lexxy-dropdown">
         <summary class="lexxy-editor__toolbar-button" name="highlight" title="Color highlight">
@@ -7923,6 +7929,7 @@ const COMMANDS = [
   "toggleHighlight",
   "removeHighlight",
   "rotateHeadingFormat",
+  "setHeading",
   "insertUnorderedList",
   "insertOrderedList",
   "insertQuoteBlock",
@@ -8042,27 +8049,35 @@ class CommandDispatcher {
     this.editor.focus();
   }
 
+  get #configuredHeadings() {
+    const configured = this.editorElement.config.get("headings") || [ "h1", "h2", "h3", "h4", "h5", "h6" ];
+    return configured.filter((h) => /^h[1-6]$/.test(h))
+  }
+
+  // TODO: If the heading dropdown is sufficient, this method can be removed as it's no longer used in the toolbar
   dispatchRotateHeadingFormat() {
     const selection = Lr();
     if (!yr(selection)) return
 
+    const headings = this.#configuredHeadings;
+    if (headings.length === 0) return
+
     if (as(selection.anchor.getNode())) {
-      selection.insertNodes([ St$3("h2") ]);
+      selection.insertNodes([ St$3(headings[0]) ]);
       return
     }
 
     const topLevelElement = selection.anchor.getNode().getTopLevelElementOrThrow();
-    let nextTag = "h2";
+    let nextTag = headings[0];
     if (It$2(topLevelElement)) {
       const currentTag = topLevelElement.getTag();
-      if (currentTag === "h2") {
-        nextTag = "h3";
-      } else if (currentTag === "h3") {
-        nextTag = "h4";
-      } else if (currentTag === "h4") {
+      const currentIndex = headings.indexOf(currentTag);
+      if (currentIndex >= 0 && currentIndex < headings.length - 1) {
+        nextTag = headings[currentIndex + 1];
+      } else if (currentIndex === headings.length - 1) {
         nextTag = null;
       } else {
-        nextTag = "h2";
+        nextTag = headings[0];
       }
     }
 
@@ -8073,6 +8088,23 @@ class CommandDispatcher {
     }
   }
 
+  dispatchSetHeading(tag) {
+    const selection = Lr();
+    if (!yr(selection)) return
+
+    if (!tag) {
+      this.contents.removeFormattingFromSelectedLines();
+      return
+    }
+
+    if (as(selection.anchor.getNode())) {
+      selection.insertNodes([ St$3(tag) ]);
+      return
+    }
+
+    this.contents.insertNodeWrappingEachSelectedLine(() => St$3(tag));
+  }
+
   dispatchUploadAttachments() {
     const input = createElement("input", {
       type: "file",
@@ -8348,6 +8380,9 @@ class Selection {
       isInLink: wt$5(anchorNode, y$2) !== null,
       isInQuote: Ot$2(topLevelElement),
       isInHeading: It$2(topLevelElement),
+      headingTag: It$2(topLevelElement)
+        ? topLevelElement.getTag()
+        : null,
       isInCode: selection.hasFormat("code") || wt$5(anchorNode, q$1) !== null,
       isInList: listType !== null,
       listType,
@@ -11260,6 +11295,105 @@ class HighlightDropdown extends ToolbarDropdown {
   }
 }
 
+const VALID_HEADINGS = new Set([ "h1", "h2", "h3", "h4", "h5", "h6" ]);
+
+const HEADING_LABELS = {
+  h1: "Heading 1",
+  h2: "Heading 2",
+  h3: "Heading 3",
+  h4: "Heading 4",
+  h5: "Heading 5",
+  h6: "Heading 6",
+};
+
+class HeadingDropdown extends ToolbarDropdown {
+  connectedCallback() {
+    super.connectedCallback();
+    this.#registerToggleHandler();
+  }
+
+  initialize() {
+    this.#populateOptions();
+    this.#registerButtonHandlers();
+  }
+
+  #registerToggleHandler() {
+    this.container.addEventListener("toggle", this.#handleToggle.bind(this));
+  }
+
+  #populateOptions() {
+    const configured = this.editorElement.config.get("headings") || [
+      "h1",
+      "h2",
+      "h3",
+      "h4",
+      "h5",
+      "h6",
+    ];
+    const headings = configured.filter((heading) => VALID_HEADINGS.has(heading));
+    const container = this.querySelector(".lexxy-heading-options");
+
+    headings.forEach((heading) => {
+      const button = document.createElement("button");
+      button.type = "button";
+      button.classList.add(
+        "lexxy-editor__toolbar-button",
+        "lexxy-heading-option",
+      );
+      button.dataset.tag = heading;
+      button.textContent = HEADING_LABELS[heading] || heading.toUpperCase();
+      container.appendChild(button);
+    });
+
+    const textButton = document.createElement("button");
+    textButton.type = "button";
+    textButton.classList.add(
+      "lexxy-editor__toolbar-button",
+      "lexxy-heading-option",
+    );
+    textButton.dataset.tag = "";
+    textButton.textContent = "Text";
+    container.appendChild(textButton);
+  }
+
+  #registerButtonHandlers() {
+    this.querySelectorAll(".lexxy-heading-option").forEach((button) => {
+      button.addEventListener("click", this.#handleOptionClick.bind(this));
+    });
+  }
+
+  #handleToggle({ newState }) {
+    if (newState === "open") {
+      this.#updateActiveState();
+    }
+  }
+
+  #handleOptionClick(event) {
+    event.preventDefault();
+
+    const button = event.target.closest(".lexxy-heading-option");
+    if (!button) return
+
+    const tag = button.dataset.tag || null;
+    this.editor.update(() => {
+      this.editor.dispatchCommand("setHeading", tag);
+    });
+    this.close();
+  }
+
+  #updateActiveState() {
+    this.editor.getEditorState().read(() => {
+      const format = this.editorElement.selection.getFormat();
+      const currentTag = format.headingTag;
+
+      this.querySelectorAll(".lexxy-heading-option").forEach((button) => {
+        const isActive = button.dataset.tag === (currentTag || "");
+        button.setAttribute("aria-pressed", isActive);
+      });
+    });
+  }
+}
+
 class BaseSource {
   // Template method to override
   async buildListItems(filter = "") {
@@ -12678,6 +12812,7 @@ function defineElements() {
     "lexxy-editor": LexicalEditorElement,
     "lexxy-link-dropdown": LinkDropdown,
     "lexxy-highlight-dropdown": HighlightDropdown,
+    "lexxy-heading-dropdown": HeadingDropdown,
     "lexxy-prompt": LexicalPromptElement,
     "lexxy-code-language-picker": CodeLanguagePicker,
     "lexxy-table-tools": TableTools,

app/assets/stylesheets/lexxy-editor.css

@@ -35,7 +35,7 @@
       outline-offset: var(--lexxy-focus-ring-offset);
     }
   }
-    
+
   summary {
     list-style: none;
 
@@ -145,7 +145,7 @@
         }
         &[data-action="toggle"] {
           background-color: var(--lexxy-color-table-cell-toggle);
-          
+
           &:after { box-shadow: 0 0 0 0 transparent; }
         }
       }
@@ -235,7 +235,7 @@
   &[data-attachments="false"] button[name="upload"]{
     display: none;
   }
-  
+
   .lexxy-editor__toolbar-button {
     aspect-ratio: 1;
     block-size: var(--lexxy-toolbar-button-size);
@@ -323,7 +323,7 @@
       background-color: var(--lexxy-color-selected-hover);
     }
   }
-  
+
   [overflowing] &:not(.lexxy-editor__toolbar-overflow) summary ~ * {
     inset-inline-end: var(--lexxy-toolbar-spacing);
     inset-inline-start: var(--lexxy-toolbar-spacing);
@@ -344,7 +344,7 @@
     display: none;
     justify-self: flex-end;
     z-index: 1;
-    
+
     summary ~ * {
       border-start-end-radius: 0;
       display: grid;
@@ -412,6 +412,42 @@
     }
   }
 
+  /* --------------------------------------------------------------------------
+  /* Heading dropdown */
+
+  &:has(lexxy-heading-dropdown) {
+    position: relative;
+
+    [overflowing] & {
+      position: static;
+    }
+  }
+
+  lexxy-heading-dropdown {
+    border-start-start-radius: 0;
+    display: flex;
+    flex-direction: column;
+    font-size: var(--lexxy-text-small);
+    inset-inline-start: 0;
+    min-inline-size: max-content;
+  }
+
+  .lexxy-heading-options {
+    display: flex;
+    flex-direction: column;
+    gap: var(--lexxy-toolbar-gap);
+  }
+
+  .lexxy-heading-option {
+    text-align: start;
+    padding-inline: 1ch;
+    white-space: nowrap;
+
+    &[aria-pressed="true"] {
+      background-color: var(--lexxy-color-selected-hover);
+    }
+  }
+
   /* --------------------------------------------------------------------------
   /* Color dropdown */
 
@@ -462,7 +498,7 @@
         &[aria-pressed="true"] {
           background-color: transparent;
           box-shadow: 0 0 0 2px currentColor inset;
-  
+
           &:after {
             content: "✓";
           }
@@ -477,7 +513,7 @@
         display: none;
       }
     }
-    
+
     [overflowing] & {
       .lexxy-highlight-colors {
         button {
@@ -566,7 +602,7 @@
     .lexxy-table-control__more-menu {
       gap: 0;
       position: relative;
-  
+
       .lexxy-table-control__more-menu-details {
         background: var(--lexxy-color-ink);
         border-radius: var(--table-tools-radius);
@@ -578,7 +614,7 @@
         padding: 0.25ch;
         position: absolute;
         transform: translateX(-50%);
-  
+
         button {
           aspect-ratio: unset;
           flex-direction: row;
@@ -588,11 +624,11 @@
           padding: 0.75ch;
           padding-inline-end: 1.5ch;
           white-space: nowrap;
-  
+
           span {
             display: inline-block;
           }
-  
+
           svg {
             block-size: 1.3lh;
             inline-size: 1.3lh;
@@ -601,7 +637,7 @@
         }
       }
     }
-  
+
     .lexxy-table-control__button--delete-table {
       align-items: center;
       aspect-ratio: unset;

src/config/lexxy.js

@@ -15,6 +15,7 @@ const presets = new Configuration({
     multiLine: true,
     richText: true,
     toolbar: true,
+    headings: [ "h1", "h2", "h3", "h4", "h5", "h6" ],
     highlight: {
       buttons: {
         color: range(1, 9).map(n => `var(--highlight-${n})`),