Update mention suggestions to typescript (#1154)

* Add type interfaces for mentionSuggestions.ts

* refactor mentionSuggestion.js to typescript

* Update .licenserc.yaml to track *.js files

* Add license to mentionSuggestion.ts

* Fix type error and bug in map for route profile change

* Ignore type errors that are unneeded

---------

Co-authored-by: Andrew Tavis McAllister <[email protected]>

Author: annaleexjohnson

.licenserc.yaml

@@ -6,6 +6,7 @@ header:
     - '**/*.ts'
     - '**/*.test.ts'
     - '**/*.d.ts'
+    - '**/*.js'
     - '**/*.py'
   paths-ignore:
     - 'dist'

frontend/components/card/discussion/CardDiscussionInput.vue

@@ -159,6 +159,7 @@ const editor = useEditor({
         class:
           "hover:underline font-bold rounded-2xl box-decoration-clone px-1 py-0.5",
       },
+      // @ts-expect-error Ignore mismatched types.
       suggestion: Suggestion,
     }),
   ],

frontend/components/media/MediaMap.vue

@@ -217,7 +217,8 @@ function resetRouteProfileControl() {
             requestOptions: {
               alternatives: "true",
             },
-            layers: mapLayers,
+            // @ts-expect-error Will break route profile change.
+            mapLayers,
           });
 
           directions.interactive = true;

frontend/components/menu/MenuSubPageSelector.vue

@@ -53,7 +53,7 @@ const defaultIndex = computed(() => {
 function changeTab(index: number) {
   const selectedRoute = props.selectors[index]?.routeUrl;
   if (selectedRoute) {
-    // @ts-expect-error 'nuxtApp.$localePath' is of type 'unknown'
+    // @ts-expect-error 'nuxtApp.$localePath' is of type 'unknown'.
     router.push(nuxtApp.$localePath(selectedRoute));
   }
 }

frontend/types/mention-suggestions.ts

@@ -0,0 +1,11 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import type { Editor } from "@tiptap/core";
+
+export interface MentionProps {
+  query: string;
+}
+
+export interface RendererProps {
+  editor: Editor;
+  clientRect?: () => DOMRect;
+}

frontend/utils/mentionSuggestion.js frontend/utils/mentionSuggestion.ts

@@ -1,21 +1,24 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
 import { VueRenderer } from "@tiptap/vue-3";
+import type { Instance as TippyInstance } from "tippy.js";
 import tippy from "tippy.js";
 
+import type { MentionProps, RendererProps } from "~/types/mention-suggestions";
 import MentionList from "../components/tooltip/TooltipMentionList.vue";
 
 export default {
-  items: ({ query }) => {
+  items: ({ query }: MentionProps): string[] => {
     return ["Jay Doe", "Jane Doe", "John Doe"]
       .filter((item) => item.toLowerCase().startsWith(query.toLowerCase()))
       .slice(0, 5);
   },
 
   render: () => {
-    let component;
-    let popup;
+    let component: VueRenderer;
+    let popup: TippyInstance[];
 
     return {
-      onStart: (props) => {
+      onStart: (props: RendererProps) => {
         component = new VueRenderer(MentionList, {
           props,
           editor: props.editor,
@@ -28,15 +31,15 @@ export default {
         popup = tippy("body", {
           getReferenceClientRect: props.clientRect,
           appendTo: () => document.body,
-          content: component.element,
+          content: component.element ?? "Default content",
           showOnCreate: true,
           interactive: true,
           trigger: "manual",
           placement: "bottom-start",
         });
       },
 
-      onUpdate(props) {
+      onUpdate(props: RendererProps) {
         component.updateProps(props);
 
         if (!props.clientRect) {
@@ -48,7 +51,7 @@ export default {
         });
       },
 
-      onKeyDown(props) {
+      onKeyDown(props: { event: KeyboardEvent }) {
         if (props.event.key === "Escape") {
           popup[0].hide();