decidim-core 0.32.0.rc3 → 0.32.0

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

@@ -1,5 +1,6 @@
+/* eslint max-lines: ["error", 400] */
+
 import { Controller } from "@hotwired/stimulus"
-import Tribute from "src/decidim/vendor/tribute";
 
 export default class extends Controller {
   connect() {
@@ -9,7 +10,12 @@ export default class extends Controller {
       menuItemLimit: 5
     };
 
-    this.tribute = null;
+    this.suggestion = null;
+    this.suggestions = [];
+    this.selectedIndex = -1;
+    this.isActive = false;
+    this.currentMentionStart = null;
+    this.requestId = 0;
     this.isInitialized = false;
 
     // Prevent initialization inside editor components
@@ -17,100 +23,62 @@ export default class extends Controller {
       return;
     }
 
-    if (this.element.hasAttribute("data-tribute")) {
-      this.element.removeAttribute("data-tribute");
-    }
-
-    this.createTribute();
+    this.createSuggestionContainer();
     this.setupEventListeners();
     this.isInitialized = true;
   }
 
   disconnect() {
-    if (this.tribute) {
-      this.tribute.detach(this.element);
+    if (this.suggestion) {
+      this.suggestion.remove();
     }
 
     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.tribute = null;
+    this.suggestion = null;
+    this.suggestions = [];
     this.isInitialized = false;
   }
 
-  /**
-   * 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>
-        `;
-      }
-    });
+  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());
 
-    this.tribute.attach(this.element);
+    this.performRemoteSearch = this.debounce(this.performRemoteSearch.bind(this), this.options.debounceDelay);
   }
 
-  /**
-   * Set up event listeners for the element
-   * @returns {void}
-   * @private
-   */
   setupEventListeners() {
-    // 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
-   */
+    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");
+    }
+  }
+
   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")) {
@@ -118,63 +86,99 @@ export default class extends Controller {
     }
   }
 
-  /**
-   * Handle input event
-   * @param {Event} event - The input event
-   * @returns {void}
-   * @private
-   */
-  handleInput(event) {
-    const parent = event.target.parentNode;
+  handleInput() {
+    const trigger = this.mentionTriggerAtCursor();
+    if (!trigger) {
+      this.hideSuggestions();
+      return;
+    }
+
+    this.currentMentionStart = trigger.start;
+    this.performRemoteSearch(trigger.query);
+  }
 
-    if (!parent) {
+  handleKeyDown(event) {
+    if (!this.isActive) {
       return;
     }
 
-    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);
-      }
+    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);
+    }
+  }
 
-      parent.classList.add("is-active");
-    } else {
-      parent.classList.remove("is-active");
+  handleDocumentClick(event) {
+    if (this.element === event.target || this.element.contains(event.target) || this.suggestion?.contains(event.target)) {
+      return;
+    }
+
+    this.hideSuggestions();
+  }
+
+  mentionTriggerAtCursor() {
+    const value = this.element.value || "";
+    const caretPosition = this.element.selectionStart;
+
+    if (typeof caretPosition !== "number") {
+      return null;
+    }
+
+    const textBeforeCursor = value.slice(0, caretPosition);
+    const mentionMatch = textBeforeCursor.match(/(?:^|\s)@([\w.-]{2,})$/);
+    if (!mentionMatch) {
+      return null;
     }
+
+    return {
+      query: mentionMatch[1],
+      start: caretPosition - mentionMatch[1].length - 1
+    };
   }
 
-  /**
-   * 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) {
+  performRemoteSearch(text) {
+    const currentRequestId = this.requestId + 1;
+    this.requestId = currentRequestId;
+
     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 || [];
-        callback(data);
+        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 });
       }).
       catch(() => {
-        callback([]);
-      }).
-      finally(() => {
-        this.adjustTributeContainer();
+        if (this.requestId !== currentRequestId) {
+          return;
+        }
+
+        this.suggestions = [];
+        this.selectedIndex = -1;
+        this.renderSuggestions({ showNoResults: true });
       });
   }
 
-  /**
-   * 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",
@@ -191,35 +195,191 @@ export default class extends Controller {
     });
   }
 
-  /**
-   * Adjust the tribute container positioning and styling
-   * @returns {void}
-   * @private
-   */
-  adjustTributeContainer() {
-    if (!this.tribute || !this.tribute.current || !this.tribute.current.element) {
+  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");
+      }
+
       return;
     }
 
-    const parent = this.tribute.current.element.parentNode;
-    if (parent) {
-      parent.classList.add("is-active");
+    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 tributeContainer = parent.querySelector(".tribute-container");
-      if (tributeContainer) {
-        // Remove inline styles for absolute positioning
-        tributeContainer.removeAttribute("style");
+      if (index === this.selectedIndex) {
+        suggestionItem.dataset.selected = "true";
       }
+
+      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) => {
@@ -233,10 +393,6 @@ export default class extends Controller {
     };
   }
 
-  /**
-   * Check if the component is initialized
-   * @returns {boolean} True if initialized, false otherwise
-   */
   get initialized() {
     return this.isInitialized;
   }