textarea now has Hash Tag Autocompletion

package-lock.json

@@ -16,6 +16,7 @@
         "react-leaflet-cluster": "^2.1.0",
         "react-router-dom": "^6.11.2",
         "react-toastify": "^9.1.3",
+        "tributejs": "^5.1.3",
         "tw-elements": "^1.0.0-beta2"
       },
       "devDependencies": {
@@ -4476,6 +4477,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tributejs": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/tributejs/-/tributejs-5.1.3.tgz",
+      "integrity": "sha512-B5CXihaVzXw+1UHhNFyAwUTMDk1EfoLP5Tj1VhD9yybZ1I8DZJEv8tZ1l0RJo0t0tk9ZhR8eG5tEsaCvRigmdQ=="
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",

package.json

@@ -49,6 +49,7 @@
     "react-leaflet-cluster": "^2.1.0",
     "react-router-dom": "^6.11.2",
     "react-toastify": "^9.1.3",
+    "tributejs": "^5.1.3",
     "tw-elements": "^1.0.0-beta2"
   }
 }

src/Components/Input/TextAreaInput.tsx

@@ -1,5 +1,7 @@
-import { useEffect, useState } from "react"
 import * as React from "react"
+import { useEffect, useRef } from "react";
+import Tribute from "tributejs";
+import { useTags } from "../Map/hooks/useTags";
 
 
 type TextAreaProps = {
@@ -13,11 +15,41 @@ type TextAreaProps = {
     updateFormValue?: (value: string) => void;
 }
 
+interface KeyValue {
+    [key: string]: string;
+}
 
 
 export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyle, inputStyle, defaultValue, placeholder, updateFormValue }: TextAreaProps) {
 
+    const ref = useRef<HTMLTextAreaElement>(null);
 
+    // prevent react18 from calling useEffect twice
+    const init = useRef(false)
+
+    const tags = useTags();
+    const values: KeyValue[] = [];
+    tags.map(tag => {
+        values.push({ key: tag.id, value: tag.id, color: tag.color })
+    })
+
+    var tribute = new Tribute({
+        containerClass: 'tw-z-500 tw-bg-gray-200 tw-p-2',
+        selectClass: 'tw-font-bold',
+        trigger: "#",
+        values: values
+    });
+
+
+    useEffect(() => {
+        if (!init.current) {
+            if (ref.current) {
+                console.log("check");
+                tribute.attach(ref.current);
+            }
+            init.current = true;
+        }
+    }, [ref])
 
 
 
@@ -26,7 +58,7 @@ export function TextAreaInput({ labelTitle, dataField, labelStyle, containerStyl
             {labelTitle ? <label className="tw-label">
                 <span className={"tw-label-text tw-text-base-content " + labelStyle}>{labelTitle}</span>
             </label> : ""}
-            <textarea defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue&& updateFormValue(e.target.value)}></textarea>
+            <textarea ref={ref} defaultValue={defaultValue} name={dataField} className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ? inputStyle : ""}`} placeholder={placeholder || ""} onChange={(e) => updateFormValue && updateFormValue(e.target.value)}></textarea>
         </div>
     )
 }