finishes hinter script, implements it

Author: khanniie

client/modules/IDE/components/Editor/codemirror.js

@@ -143,9 +143,7 @@ export default function useCodeMirror({
   }, [autocloseBracketsQuotes]);
   useEffect(() => {
     const reconfigureEffect = (fileState) =>
-      fileState.autocompleteCpt.reconfigure(
-        autocompleteHinter ? autocompletion() : []
-      );
+      fileState.autocompleteCpt.reconfigure(true ? autocompletion() : []);
     updateFileStates({
       fileStates: fileStates.current,
       cmView: cmView.current,
@@ -172,7 +170,7 @@ export default function useCodeMirror({
             linewrap,
             lineNumbers,
             autocloseBracketsQuotes,
-            autocomplete: autocompleteHinter,
+            autocomplete: true,
             onUpdateLinting,
             onViewUpdate
           }

client/modules/IDE/components/Editor/p5JavaScript.js

@@ -1,17 +1,43 @@
 import { LanguageSupport } from '@codemirror/language';
 import { javascript } from '@codemirror/lang-javascript';
+import { p5Hinter } from '../../../../utils/p5-hinter-cm6';
 
 function testCompletions(context) {
   const word = context.matchBefore(/\w*/);
   if (word.from === word.to && !context.explicit) return null;
 
+  function addDomNodeInfo(item) {
+    const itemCopy = { ...item };
+
+    if (item.p5DocPath) {
+      itemCopy.info = () => {
+        const domNode = document.createElement('a');
+        domNode.href = `https://p5js.org/reference/p5/${item.p5DocPath}`;
+        domNode.role = 'link';
+        domNode.target = '_blank';
+        domNode.onclick = (event) => event.stopPropagation();
+        domNode.innerHTML = `
+        <span class="hint-hidden">open ${item.label} reference</span>
+        <span aria-hidden="true">&#10132;</span>
+      `;
+        return {
+          dom: domNode,
+          destroy: () => {
+            // Cleanup logic if needed
+            domNode.remove();
+          }
+        };
+      };
+    }
+
+    return itemCopy;
+  }
+
+  const hinterWithDomNodes = p5Hinter.map(addDomNodeInfo);
+
   return {
     from: word.from,
-    options: [
-      { label: 'connie', type: 'keyword' },
-      { label: 'rachel', type: 'variable', info: '(World)' },
-      { label: 'claire', type: 'text', apply: '⠁⭒*.✩.*⭒⠁', detail: 'macro' }
-    ]
+    options: hinterWithDomNodes
   };
 }