fix(components): add type annotations in suggestion.ts

- Import Editor and Range types from @tiptap/core
- Add TranslateFunction type for t parameter
- Add SuggestionProps interface for props parameter
- Add type annotations for all command callbacks
- Add null check for document.getElementById result
- Add null check for props.event in onKeyDown

frontend/src/components/input/editor/suggestion.ts

@@ -1,9 +1,20 @@
+import type {Editor, Range} from '@tiptap/core'
 import {VueRenderer} from '@tiptap/vue-3'
 import {computePosition, flip, shift, offset, autoUpdate} from '@floating-ui/dom'
 
 import CommandsList from './CommandsList.vue'
 
-export default function suggestionSetup(t) {
+type TranslateFunction = (key: string) => string
+
+interface SuggestionProps {
+	editor: Editor
+	clientRect?: () => DOMRect
+	command: (item: {command: (params: {editor: Editor, range: Range}) => void}) => void
+	items: unknown[]
+	event?: KeyboardEvent
+}
+
+export default function suggestionSetup(t: TranslateFunction) {
 	return {
 		items: ({query}: { query: string }) => {
 			return [
@@ -11,7 +22,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.text'),
 					description: t('input.editor.textTooltip'),
 					icon: 'fa-font',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -24,7 +35,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.heading1'),
 					description: t('input.editor.heading1Tooltip'),
 					icon: 'fa-header',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -37,7 +48,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.heading2'),
 					description: t('input.editor.heading2Tooltip'),
 					icon: 'fa-header',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -50,7 +61,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.heading3'),
 					description: t('input.editor.heading3Tooltip'),
 					icon: 'fa-header',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -63,7 +74,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.bulletList'),
 					description: t('input.editor.bulletListTooltip'),
 					icon: 'fa-list-ul',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -76,7 +87,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.orderedList'),
 					description: t('input.editor.orderedListTooltip'),
 					icon: 'fa-list-ol',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -89,7 +100,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.taskList'),
 					description: t('input.editor.taskListTooltip'),
 					icon: 'fa-list-check',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -102,7 +113,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.quote'),
 					description: t('input.editor.quoteTooltip'),
 					icon: 'fa-quote-right',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -115,7 +126,7 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.code'),
 					description: t('input.editor.codeTooltip'),
 					icon: 'fa-code',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -128,20 +139,23 @@ export default function suggestionSetup(t) {
 					title: t('input.editor.image'),
 					description: t('input.editor.imageTooltip'),
 					icon: 'fa-image',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
 							.deleteRange(range)
 							.run()
-						document.getElementById('tiptap__image-upload').click()
+						const uploadElement = document.getElementById('tiptap__image-upload')
+						if (uploadElement) {
+							uploadElement.click()
+						}
 					},
 				},
 				{
 					title: t('input.editor.horizontalRule'),
 					description: t('input.editor.horizontalRuleTooltip'),
 					icon: 'fa-ruler-horizontal',
-					command: ({editor, range}) => {
+					command: ({editor, range}: {editor: Editor, range: Range}) => {
 						editor
 							.chain()
 							.focus()
@@ -172,7 +186,7 @@ export default function suggestionSetup(t) {
 			}
 
 			return {
-				onStart: props => {
+				onStart: (props: SuggestionProps) => {
 					component = new VueRenderer(CommandsList, {
 						// using vue 2:
 						// parent: this,
@@ -219,7 +233,7 @@ export default function suggestionSetup(t) {
 					cleanupFloating = autoUpdate(virtualReference, popupElement, updatePosition)
 				},
 
-				onUpdate(props) {
+				onUpdate(props: SuggestionProps) {
 					component.updateProps(props)
 
 					if (!props.clientRect || !popupElement) {
@@ -231,8 +245,8 @@ export default function suggestionSetup(t) {
 					virtualReference.getBoundingClientRect = () => rect
 				},
 
-				onKeyDown(props) {
-					if (props.event.key === 'Escape') {
+				onKeyDown(props: SuggestionProps) {
+					if (props.event && props.event.key === 'Escape') {
 						if (props.event.isComposing) {
 							return false
 						}