Improve alias support

src/App.tsx

@@ -1,10 +1,20 @@
-import {ChangeEventHandler, KeyboardEventHandler, ReactNode, useCallback, useEffect, useRef, useState} from "react";
+import {
+    ChangeEventHandler, Dispatch,
+    KeyboardEventHandler,
+    MouseEventHandler,
+    ReactNode, SetStateAction,
+    useCallback,
+    useEffect,
+    useRef,
+    useState
+} from "react";
 import {FixedSizeList as List} from "react-window";
 import Select, {createFilter, MenuListProps} from "react-select";
 import * as R from 'ramda';
 
 import {useQuery} from "@tanstack/react-query";
 
+// TODO: Fix this for wrapping items, esp on phones
 const height = 35;
 
 function MenuList(props: MenuListProps) {
@@ -80,6 +90,10 @@ export function LargeSelect() {
             />
 
             {selected && <div className={"mt-2"}>
+                <div className="py-1">
+                    <Alias original={selected.label}/>
+                </div>
+
                 {selected.data.aliases?.map(alias => (
                     <div className="py-1">
                         <Alias original={selected.label} alias={alias}/>
@@ -87,33 +101,54 @@ export function LargeSelect() {
                 ))}
 
                 <div className="py-1">
-                    <span className={"rounded-md p-1 hover:bg-slate-100"}>
+                    <CustomAlias selected={selected}/>
-                        <span className={"text-slate-300 p-0.5"}>[[</span>
-                        <span>{selected.label}</span>
-                        <span className={"text-slate-300 p-0.5"}>|</span>
-                        <span>
-                            <CustomAliasField selected={selected}/>
-                        </span>
-                        <span className={"text-slate-300 p-0.5"}>]]</span>
-                    </span>
                 </div>
             </div>}
         </div>
     )
 }
 
-function CustomAliasField({selected}: {
+function CustomAlias({selected}: {
     selected: Option
 }) {
-    const [content, setContent] = useState('');
+    const [alias, setAlias] = useState('');
-    const [width, setWidth] = useState<any>(0);
-    const span = useRef<HTMLSpanElement>(null);
 
     // Reset when selection changes
     useEffect(() => {
-        setContent('');
+        setAlias('');
     }, [selected.value]);
 
+    const onClick: MouseEventHandler = useCallback((e) => {
+        if ((e.target as HTMLElement).tagName == 'SPAN' && alias.length > 0) {
+            navigator.clipboard.writeText(`[[${selected!.label}|${alias}]]`);
+        }
+    }, [selected.value, selected.label, alias]);
+
+    return (
+        <span onClick={onClick} className={"rounded-md p-1 hover:bg-slate-100"}>
+            <span className={"text-slate-300 p-0.5"}>[[</span>
+            <span>{selected.label}</span>
+            <span className={"text-slate-300 p-0.5"}>|</span>
+            <span>
+                <CustomAliasField content={alias} setContent={setAlias} selected={selected}/>
+            </span>
+            <span className={"text-slate-300 p-0.5"}>]]</span>
+        </span>
+    )
+}
+
+function CustomAliasField({
+                              selected,
+                              content,
+                              setContent
+                          }: {
+    selected: Option,
+    content: string,
+    setContent: Dispatch<SetStateAction<string>>,
+}) {
+    const [width, setWidth] = useState<any>(0);
+    const span = useRef<HTMLSpanElement>(null);
+
     // Resize on change of content
     useEffect(() => {
         setWidth(span.current!.offsetWidth);
@@ -141,7 +176,8 @@ function CustomAliasField({selected}: {
             }} ref={span}>{content}</span>
             <input
                 className={"border-none p-0 px-1"}
-                type="text" style={{width: `calc(${width}px + 0.25rem)`}} autoFocus onChange={changeHandler} onKeyDown={onCustomElementKeyDown}/>
+                type="text" style={{width: `calc(${width}px + 0.25rem)`}} autoFocus onChange={changeHandler}
+                onKeyDown={onCustomElementKeyDown}/>
         </span>
     );
 }
@@ -154,15 +190,19 @@ function Alias({
     alias: string
 }) {
     const onClick = useCallback(() => {
-        navigator.clipboard.writeText(`[[${original}|${alias}]]`)
+        if (alias) {
+            navigator.clipboard.writeText(`[[${original}|${alias}]]`)
+        } else {
+            navigator.clipboard.writeText(`[[${original}]]`)
+        }
     }, [original, alias]);
 
     return (
         <span className={"rounded-md p-1 hover:bg-slate-100"} onClick={onClick}>
             <span className={"text-slate-300 p-0.5"}>[[</span>
             <span>{original}</span>
-            <span className={"text-slate-300 p-0.5"}>|</span>
+            {alias && <><span className={"text-slate-300 p-0.5"}>|</span>
-            <span>{alias}</span>
+                <span>{alias}</span></>}
             <span className={"text-slate-300 p-0.5"}>]]</span>
         </span>
     );