add generic suggest input component

Author: trangdoan982

apps/obsidian/src/components/GeneralSettings.tsx

@@ -1,6 +1,60 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { usePlugin } from "./PluginContext";
 import { Notice } from "obsidian";
+import SuggestInput from "./SuggestInput";
+
+export const FolderSuggestInput: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}> = ({
+  value,
+  onChange,
+  placeholder = "Enter folder path",
+  className = "",
+  disabled = false,
+}) => {
+  const plugin = usePlugin();
+
+  const getAllFolders = (): string[] => {
+    const folders = plugin.app.vault.getAllFolders();
+    return folders.map((folder) => folder.path).sort();
+  };
+
+  const getFilteredFolders = (query: string): string[] => {
+    const allFolders = getAllFolders();
+
+    if (!query.trim()) {
+      return allFolders.slice(0, 10);
+    }
+
+    return allFolders
+      .filter((path) => path.toLowerCase().includes(query.toLowerCase()))
+      .slice(0, 10);
+  };
+
+  const renderFolder = (folder: string, el: HTMLElement) => {
+    el.createDiv({
+      text: folder || "(Root folder)",
+      cls: "folder-suggestion-item",
+    });
+  };
+
+  return (
+    <SuggestInput<string>
+      value={value}
+      onChange={onChange}
+      getSuggestions={getFilteredFolders}
+      getDisplayText={(folder) => folder}
+      renderItem={renderFolder}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+    />
+  );
+};
 
 const GeneralSettings = () => {
   const plugin = usePlugin();
@@ -54,17 +108,16 @@ const GeneralSettings = () => {
 
       <div className="setting-item">
         <div className="setting-item-info">
-          <div className="setting-item-name">Discourse nodes folder path</div>
+          <div className="setting-item-name">Discourse Nodes folder path</div>
           <div className="setting-item-description">
-            Specify the folder where new Discourse nodes should be created.
+            Specify the folder where new Discourse Nodes should be created.
             Leave empty to create nodes in the root folder.
           </div>
         </div>
         <div className="setting-item-control">
-          <input
-            type="text"
+          <FolderSuggestInput
             value={nodesFolderPath}
-            onChange={(e) => handleFolderPathChange(e.target.value)}
+            onChange={handleFolderPathChange}
             placeholder="Discourse Nodes"
           />
         </div>

apps/obsidian/src/components/SuggestInput.tsx

@@ -0,0 +1,136 @@
+import React, { useRef, useEffect, useState } from "react";
+import { AbstractInputSuggest, App } from "obsidian";
+import { usePlugin } from "./PluginContext";
+
+class GenericSuggestInput<T> extends AbstractInputSuggest<T> {
+  private getSuggestionsFn: (query: string) => T[];
+  private onSelectCallback: (item: T) => void;
+  private getDisplayTextFn: (item: T) => string;
+  private renderItemFn?: (item: T, el: HTMLElement) => void;
+
+  constructor(
+    app: App,
+    private textInputEl: HTMLInputElement,
+    config: {
+      getSuggestions: (query: string) => T[];
+      onSelect: (item: T) => void;
+      getDisplayText: (item: T) => string;
+      renderItem?: (item: T, el: HTMLElement) => void;
+    },
+  ) {
+    super(app, textInputEl);
+    this.getSuggestionsFn = config.getSuggestions;
+    this.onSelectCallback = config.onSelect;
+    this.getDisplayTextFn = config.getDisplayText;
+    this.renderItemFn = config.renderItem;
+  }
+
+  getSuggestions(inputStr: string): T[] {
+    return this.getSuggestionsFn(inputStr);
+  }
+
+  renderSuggestion(item: T, el: HTMLElement): void {
+    if (this.renderItemFn) {
+      this.renderItemFn(item, el);
+    } else {
+      el.createDiv({
+        text: this.getDisplayTextFn(item),
+        cls: "suggestion-item",
+      });
+    }
+  }
+
+  selectSuggestion(item: T, evt: MouseEvent | KeyboardEvent): void {
+    this.textInputEl.value = this.getDisplayTextFn(item);
+    this.onSelectCallback(item);
+    this.close();
+  }
+}
+
+type SuggestInputProps<T> = {
+  value: string;
+  onChange: (value: string) => void;
+  getSuggestions: (query: string) => T[];
+  getDisplayText: (item: T) => string;
+  onSelect?: (item: T) => void;
+  renderItem?: (item: T, el: HTMLElement) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+const SuggestInput = <T,>({
+  value,
+  onChange,
+  getSuggestions,
+  getDisplayText,
+  onSelect,
+  renderItem,
+  placeholder = "Enter value",
+  className = "",
+  disabled = false,
+}: SuggestInputProps<T>) => {
+  const plugin = usePlugin();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [suggest, setSuggest] = useState<GenericSuggestInput<T> | null>(null);
+
+  const handleSelect = (item: T) => {
+    const displayText = getDisplayText(item);
+    onChange(displayText);
+    onSelect?.(item);
+  };
+
+  useEffect(() => {
+    if (inputRef.current && !suggest && !disabled) {
+      const genericSuggest = new GenericSuggestInput<T>(
+        plugin.app,
+        inputRef.current,
+        {
+          getSuggestions,
+          onSelect: handleSelect,
+          getDisplayText,
+          renderItem,
+        },
+      );
+      setSuggest(genericSuggest);
+
+      return () => {
+        genericSuggest.close();
+        setSuggest(null);
+      };
+    }
+  }, [
+    plugin.app,
+    onChange,
+    onSelect,
+    getSuggestions,
+    getDisplayText,
+    renderItem,
+    disabled,
+  ]);
+
+  useEffect(() => {
+    if (inputRef.current && inputRef.current.value !== value) {
+      inputRef.current.value = value;
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+      autoComplete="off"
+    />
+  );
+};
+
+export default SuggestInput;