diff --git a/frontend/src/components/input/editor/suggestion.ts b/frontend/src/components/input/editor/suggestion.ts index 3d8ca7f80..151afc7f7 100644 --- a/frontend/src/components/input/editor/suggestion.ts +++ b/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 }