decidim-core 0.31.7 → 0.32.0.rc1

data/app/packs/src/decidim/controllers/mention/controller.js

@@ -1,6 +1,5 @@
-/* eslint max-lines: ["error", 400] */
-
 import { Controller } from "@hotwired/stimulus"
+import Tribute from "src/decidim/vendor/tribute";
 
 export default class extends Controller {
   connect() {
@@ -10,12 +9,7 @@ export default class extends Controller {
       menuItemLimit: 5
     };
 
-    this.suggestion = null;
-    this.suggestions = [];
-    this.selectedIndex = -1;
-    this.isActive = false;
-    this.currentMentionStart = null;
-    this.requestId = 0;
+    this.tribute = null;
     this.isInitialized = false;
 
     // Prevent initialization inside editor components
@@ -23,62 +17,100 @@ export default class extends Controller {
       return;
     }
 
-    this.createSuggestionContainer();
+    if (this.element.hasAttribute("data-tribute")) {
+      this.element.removeAttribute("data-tribute");
+    }
+
+    this.createTribute();
     this.setupEventListeners();
     this.isInitialized = true;
   }
 
   disconnect() {
-    if (this.suggestion) {
-      this.suggestion.remove();
+    if (this.tribute) {
+      this.tribute.detach(this.element);
     }
 
     this.element.removeEventListener("focusin", this.handleFocusIn);
     this.element.removeEventListener("focusout", this.handleFocusOut);
     this.element.removeEventListener("input", this.handleInput);
-    this.element.removeEventListener("keydown", this.handleKeyDown);
-    document.removeEventListener("click", this.handleDocumentClick);
 
-    this.suggestion = null;
-    this.suggestions = [];
+    this.tribute = null;
     this.isInitialized = false;
   }
 
-  createSuggestionContainer() {
-    this.suggestion = document.createElement("div");
-    this.suggestion.classList.add("editor-suggestions", "hidden", "hide");
-    document.body.append(this.suggestion);
-    this.suggestion.addEventListener("mousedown", (event) => event.preventDefault());
+  /**
+   * Create and configure the Tribute instance
+   * @returns {void}
+   * @private
+   */
+  createTribute() {
+    const noMatchTemplate = this.options.noDataFoundMessage
+      ? () => `<li>${this.options.noDataFoundMessage}</li>`
+      : null;
+
+    this.tribute = new Tribute({
+      trigger: "@",
+      values: this.debounce((text, callback) => {
+        this.performRemoteSearch(text, callback);
+      }, this.options.debounceDelay),
+      positionMenu: true,
+      menuContainer: null,
+      allowSpaces: true,
+      menuItemLimit: this.options.menuItemLimit,
+      fillAttr: "nickname",
+      selectClass: "highlight",
+      noMatchTemplate: noMatchTemplate,
+      lookup: (item) => item.nickname + item.name,
+      selectTemplate: (item) => {
+        if (typeof item === "undefined") {
+          return null;
+        }
+        return item.original.nickname;
+      },
+      menuItemTemplate: (item) => {
+        return `
+          <img src="${item.original.avatarUrl}" alt="author-avatar">
+          <strong>${item.original.nickname}</strong>
+          <small>${item.original.name}</small>
+        `;
+      }
+    });
 
-    this.performRemoteSearch = this.debounce(this.performRemoteSearch.bind(this), this.options.debounceDelay);
+    this.tribute.attach(this.element);
   }
 
+  /**
+   * Set up event listeners for the element
+   * @returns {void}
+   * @private
+   */
   setupEventListeners() {
-    this.handleFocusIn = this.handleFocusIn.bind(this);
-    this.handleFocusOut = this.handleFocusOut.bind(this);
-    this.handleInput = this.handleInput.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleDocumentClick = this.handleDocumentClick.bind(this);
-
-    this.element.addEventListener("focusin", this.handleFocusIn);
-    this.element.addEventListener("focusout", this.handleFocusOut);
-    this.element.addEventListener("input", this.handleInput);
-    this.element.addEventListener("keydown", this.handleKeyDown);
-    document.addEventListener("click", this.handleDocumentClick);
-  }
-
-  handleFocusIn() {
-    if (this.element.parentNode) {
-      this.element.parentNode.classList.add("is-active");
-    }
-  }
-
+    // Handle focus events to set menu container
+    this.element.addEventListener("focusin", this.handleFocusIn.bind(this));
+    this.element.addEventListener("focusout", this.handleFocusOut.bind(this));
+    this.element.addEventListener("input", this.handleInput.bind(this));
+  }
+
+  /**
+   * Handle focus in event
+   * @param {Event} event - The focus in event
+   * @returns {void}
+   * @private
+   */
+  handleFocusIn(event) {
+    if (this.tribute) {
+      this.tribute.menuContainer = event.target.parentNode;
+    }
+  }
+
+  /**
+   * Handle focus out event
+   * @param {Event} event - The focus out event
+   * @returns {void}
+   * @private
+   */
   handleFocusOut(event) {
-    if (this.suggestion && this.suggestion.contains(event.relatedTarget)) {
-      return;
-    }
-
-    this.hideSuggestions();
     const parent = event.target.parentNode;
 
     if (parent && parent.classList.contains("is-active")) {
@@ -86,99 +118,63 @@ export default class extends Controller {
     }
   }
 
-  handleInput() {
-    const trigger = this.mentionTriggerAtCursor();
-    if (!trigger) {
-      this.hideSuggestions();
-      return;
-    }
-
-    this.currentMentionStart = trigger.start;
-    this.performRemoteSearch(trigger.query);
-  }
-
-  handleKeyDown(event) {
-    if (!this.isActive) {
-      return;
-    }
-
-    if (event.key === "Escape") {
-      event.preventDefault();
-      this.hideSuggestions();
-    } else if (event.key === "ArrowDown") {
-      event.preventDefault();
-      this.updateSelectedIndex(1);
-      this.renderSuggestions();
-    } else if (event.key === "ArrowUp") {
-      event.preventDefault();
-      this.updateSelectedIndex(-1);
-      this.renderSuggestions();
-    } else if (event.key === "Enter") {
-      event.preventDefault();
-      this.selectSuggestion(this.selectedIndex);
-    }
-  }
+  /**
+   * Handle input event
+   * @param {Event} event - The input event
+   * @returns {void}
+   * @private
+   */
+  handleInput(event) {
+    const parent = event.target.parentNode;
 
-  handleDocumentClick(event) {
-    if (this.element === event.target || this.element.contains(event.target) || this.suggestion?.contains(event.target)) {
+    if (!parent) {
       return;
     }
 
-    this.hideSuggestions();
-  }
-
-  mentionTriggerAtCursor() {
-    const value = this.element.value || "";
-    const caretPosition = this.element.selectionStart;
-
-    if (typeof caretPosition !== "number") {
-      return null;
-    }
+    if (this.tribute && this.tribute.isActive) {
+      // Move the tribute container to the correct parent
+      const tributeContainer = document.querySelector(".tribute-container");
+      if (tributeContainer) {
+        parent.appendChild(tributeContainer);
+      }
 
-    const textBeforeCursor = value.slice(0, caretPosition);
-    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{2,})$/);
-    if (!mentionMatch) {
-      return null;
+      parent.classList.add("is-active");
+    } else {
+      parent.classList.remove("is-active");
     }
-
-    return {
-      query: mentionMatch[1],
-      start: caretPosition - mentionMatch[1].length - 1
-    };
   }
 
-  performRemoteSearch(text) {
-    const currentRequestId = this.requestId + 1;
-    this.requestId = currentRequestId;
-
+  /**
+   * Perform remote search for users
+   * @param {string} text - The search text
+   * @param {Function} callback - The callback function to call with results
+   * @returns {void}
+   * @private
+   */
+  performRemoteSearch(text, callback) {
     const query = `{users(filter:{wildcard:"${text}"}){nickname,name,avatarUrl,__typename}}`;
     const apiPath = window.Decidim.config.get("api_path");
 
     this.makeRequest(apiPath, { query }).
       then((response) => {
-        if (this.requestId !== currentRequestId) {
-          return;
-        }
-
         const data = response.data.users || [];
-        const sortedData = data.sort((first, second) => first.nickname.localeCompare(second.nickname));
-        this.suggestions = sortedData.slice(0, this.options.menuItemLimit);
-        this.selectedIndex = this.suggestions.length > 0
-          ? 0
-          : -1;
-        this.renderSuggestions({ showNoResults: true });
+        callback(data);
       }).
       catch(() => {
-        if (this.requestId !== currentRequestId) {
-          return;
-        }
-
-        this.suggestions = [];
-        this.selectedIndex = -1;
-        this.renderSuggestions({ showNoResults: true });
+        callback([]);
+      }).
+      finally(() => {
+        this.adjustTributeContainer();
       });
   }
 
+  /**
+   * Make an HTTP POST request
+   * @param {string} url - The request URL
+   * @param {Object} data - The request data
+   * @returns {Promise} The request promise
+   * @private
+   */
   makeRequest(url, data) {
     return fetch(url, {
       method: "POST",
@@ -195,191 +191,35 @@ export default class extends Controller {
     });
   }
 
-  renderSuggestions({ showNoResults = false } = {}) {
-    if (!this.suggestion) {
-      return;
-    }
-
-    this.suggestion.innerHTML = "";
-
-    if (this.suggestions.length < 1) {
-      this.isActive = false;
-
-      if (showNoResults && this.options.noDataFoundMessage) {
-        const noResultsItem = document.createElement("button");
-        noResultsItem.type = "button";
-        noResultsItem.disabled = true;
-        noResultsItem.classList.add("editor-suggestions-item", "editor-suggestions-item-disabled");
-        noResultsItem.textContent = this.options.noDataFoundMessage;
-        this.suggestion.append(noResultsItem);
-        this.positionSuggestionMenu();
-        this.suggestion.classList.remove("hidden", "hide");
-      } else {
-        this.suggestion.classList.add("hidden", "hide");
-      }
-
+  /**
+   * Adjust the tribute container positioning and styling
+   * @returns {void}
+   * @private
+   */
+  adjustTributeContainer() {
+    if (!this.tribute || !this.tribute.current || !this.tribute.current.element) {
       return;
     }
 
-    this.suggestions.forEach((item, index) => {
-      const suggestionItem = document.createElement("button");
-      suggestionItem.type = "button";
-      suggestionItem.classList.add("editor-suggestions-item");
-      suggestionItem.dataset.index = index;
-
-      if (item.avatarUrl) {
-        const avatar = document.createElement("img");
-        avatar.classList.add("editor-suggestions-item-avatar");
-        avatar.src = item.avatarUrl;
-        avatar.alt = item.name || item.nickname;
-        suggestionItem.append(avatar);
-      }
-
-      const label = document.createElement("span");
-      label.classList.add("editor-suggestions-item-label");
-      label.textContent = `${item.nickname} (${item.name})`;
-      suggestionItem.append(label);
+    const parent = this.tribute.current.element.parentNode;
+    if (parent) {
+      parent.classList.add("is-active");
 
-      if (index === this.selectedIndex) {
-        suggestionItem.dataset.selected = "true";
+      const tributeContainer = parent.querySelector(".tribute-container");
+      if (tributeContainer) {
+        // Remove inline styles for absolute positioning
+        tributeContainer.removeAttribute("style");
       }
-
-      suggestionItem.addEventListener("click", (event) => {
-        event.preventDefault();
-        this.selectSuggestion(index);
-      });
-
-      this.suggestion.append(suggestionItem);
-    });
-
-    this.positionSuggestionMenu();
-    this.isActive = true;
-    this.suggestion.classList.remove("hidden", "hide");
-  }
-
-  positionSuggestionMenu() {
-    if (!this.suggestion || this.currentMentionStart === null) {
-      return;
     }
-
-    const coordinates = this.coordinatesForTextIndex(this.currentMentionStart);
-    if (!coordinates) {
-      return;
-    }
-
-    Object.assign(this.suggestion.style, {
-      position: "absolute",
-      top: `${coordinates.top}px`,
-      left: `${coordinates.left}px`
-    });
-  }
-
-  coordinatesForTextIndex(index) {
-    const element = this.element;
-    const styles = window.getComputedStyle(element);
-    const elementRect = element.getBoundingClientRect();
-    const borderTopWidth = parseFloat(styles.borderTopWidth) || 0;
-    const borderLeftWidth = parseFloat(styles.borderLeftWidth) || 0;
-    const lineHeight = parseFloat(styles.lineHeight) || 16;
-
-    const mirror = document.createElement("div");
-    const mirrorStyles = [
-      "fontFamily",
-      "fontSize",
-      "fontWeight",
-      "fontStyle",
-      "letterSpacing",
-      "textTransform",
-      "wordSpacing",
-      "textIndent",
-      "boxSizing",
-      "width",
-      "paddingTop",
-      "paddingRight",
-      "paddingBottom",
-      "paddingLeft",
-      "borderTopWidth",
-      "borderRightWidth",
-      "borderBottomWidth",
-      "borderLeftWidth",
-      "borderStyle",
-      "lineHeight"
-    ];
-
-    mirrorStyles.forEach((property) => {
-      mirror.style[property] = styles[property];
-    });
-
-    mirror.style.position = "absolute";
-    mirror.style.visibility = "hidden";
-    mirror.style.whiteSpace = element.nodeName === "TEXTAREA"
-      ? "pre-wrap"
-      : "pre";
-    mirror.style.overflowWrap = "break-word";
-    mirror.style.top = "0";
-    mirror.style.left = "-9999px";
-
-    const before = document.createTextNode((element.value || "").slice(0, index));
-    const marker = document.createElement("span");
-    marker.textContent = "@";
-
-    mirror.append(before);
-    mirror.append(marker);
-    document.body.append(mirror);
-
-    const top = elementRect.top + window.scrollY + marker.offsetTop - element.scrollTop + borderTopWidth + lineHeight;
-    const left = elementRect.left + window.scrollX + marker.offsetLeft - element.scrollLeft + borderLeftWidth;
-
-    mirror.remove();
-
-    return { top, left };
-  }
-
-  updateSelectedIndex(direction) {
-    if (this.suggestions.length < 1) {
-      this.selectedIndex = -1;
-      return;
-    }
-
-    const maxIndex = this.suggestions.length - 1;
-    const nextIndex = this.selectedIndex + direction;
-
-    this.selectedIndex = Math.max(0, Math.min(nextIndex, maxIndex));
-  }
-
-  selectSuggestion(index) {
-    const selectedItem = this.suggestions[index];
-    if (!selectedItem || this.currentMentionStart === null) {
-      return;
-    }
-
-    const cursorPosition = this.element.selectionStart;
-    const value = this.element.value || "";
-    const mentionValue = `${selectedItem.nickname} `;
-    const newValue = `${value.slice(0, this.currentMentionStart)}${mentionValue}${value.slice(cursorPosition)}`;
-
-    this.element.value = newValue;
-
-    const newPosition = this.currentMentionStart + mentionValue.length;
-    this.element.setSelectionRange(newPosition, newPosition);
-
-    this.element.dispatchEvent(new Event("input", { bubbles: true }));
-    this.hideSuggestions();
-  }
-
-  hideSuggestions() {
-    if (!this.suggestion) {
-      return;
-    }
-
-    this.isActive = false;
-    this.currentMentionStart = null;
-    this.selectedIndex = -1;
-    this.suggestions = [];
-    this.suggestion.classList.add("hidden", "hide");
-    this.suggestion.innerHTML = "";
   }
 
+  /**
+   * Create a debounced version of a function
+   * @param {Function} callback - The function to debounce
+   * @param {number} wait - The debounce delay in milliseconds
+   * @returns {Function} The debounced function
+   * @private
+   */
   debounce(callback, wait) {
     let timeout = null;
     return (...args) => {
@@ -393,6 +233,10 @@ export default class extends Controller {
     };
   }
 
+  /**
+   * Check if the component is initialized
+   * @returns {boolean} True if initialized, false otherwise
+   */
   get initialized() {
     return this.isInitialized;
   }