diff --git a/src/components/input/editor/CommandsList.vue b/src/components/input/editor/CommandsList.vue
index a5f5c8048..4b8f55436 100644
--- a/src/components/input/editor/CommandsList.vue
+++ b/src/components/input/editor/CommandsList.vue
@@ -44,7 +44,7 @@ export default {
 	},
 
 	methods: {
-		onKeyDown({ event }) {
+		onKeyDown({event}) {
 			if (event.key === 'ArrowUp') {
 				this.upHandler()
 				return true
@@ -86,19 +86,16 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .items {
 	padding: 0.2rem;
 	position: relative;
 	border-radius: 0.5rem;
-	background: #FFF;
+	background: #fff;
 	color: rgba(0, 0, 0, 0.8);
 	overflow: hidden;
 	font-size: 0.9rem;
-	box-shadow:
-		0 0 0 1px rgba(0, 0, 0, 0.05),
-		0px 10px 20px rgba(0, 0, 0, 0.1),
-;
+	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
 }
 
 .item {
diff --git a/src/components/input/editor/commands.ts b/src/components/input/editor/commands.ts
index 189d567e7..4ec039f51 100644
--- a/src/components/input/editor/commands.ts
+++ b/src/components/input/editor/commands.ts
@@ -1,28 +1,28 @@
-import { Extension } from '@tiptap/core'
+import {Extension} from '@tiptap/core'
 import Suggestion from '@tiptap/suggestion'
 
 // Copied and adjusted from https://github.com/ueberdosis/tiptap/tree/252acb32d27a0f9af14813eeed83d8a50059a43a/demos/src/Experiments/Commands/Vue
 
 export default Extension.create({
-	name: 'commands',
+    name: 'commands',
 
-	addOptions() {
-		return {
-			suggestion: {
-				char: '/',
-				command: ({ editor, range, props }) => {
-					props.command({ editor, range })
-				},
-			},
-		}
-	},
+    addOptions() {
+        return {
+            suggestion: {
+                char: '/',
+                command: ({editor, range, props}) => {
+                    props.command({editor, range})
+                },
+            },
+        }
+    },
 
-	addProseMirrorPlugins() {
-		return [
-			Suggestion({
-				editor: this.editor,
-				...this.options.suggestion,
-			}),
-		]
-	},
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ]
+    },
 })
\ No newline at end of file
diff --git a/src/components/input/editor/suggestion.ts b/src/components/input/editor/suggestion.ts
index 58c501023..64c8dc3e1 100644
--- a/src/components/input/editor/suggestion.ts
+++ b/src/components/input/editor/suggestion.ts
@@ -1,113 +1,114 @@
-import { VueRenderer } from '@tiptap/vue-3'
+import {VueRenderer} from '@tiptap/vue-3'
 import tippy from 'tippy.js'
 
 import CommandsList from './CommandsList.vue'
 
 export default {
-	items: ({ query }) => {
-		return [
-			{
-				title: 'H1',
-				command: ({ editor, range }) => {
-					editor
-						.chain()
-						.focus()
-						.deleteRange(range)
-						.setNode('heading', { level: 1 })
-						.run()
-				},
-			},
-			{
-				title: 'H2',
-				command: ({ editor, range }) => {
-					editor
-						.chain()
-						.focus()
-						.deleteRange(range)
-						.setNode('heading', { level: 2 })
-						.run()
-				},
-			},
-			{
-				title: 'bold',
-				command: ({ editor, range }) => {
-					editor
-						.chain()
-						.focus()
-						.deleteRange(range)
-						.setMark('bold')
-						.run()
-				},
-			},
-			{
-				title: 'italic',
-				command: ({ editor, range }) => {
-					editor
-						.chain()
-						.focus()
-						.deleteRange(range)
-						.setMark('italic')
-						.run()
-				},
-			},
-		].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
-	},
+    items: ({query}: { query: string }) => {
+        return [
+            {
+                title: 'H1',
+                command: ({editor, range}) => {
+                    editor
+                        .chain()
+                        .focus()
+                        .deleteRange(range)
+                        .setNode('heading', {level: 1})
+                        .run()
+                },
+            },
+            {
+                title: 'H2',
+                description: 'Lorem ipsum',
+                command: ({editor, range}) => {
+                    editor
+                        .chain()
+                        .focus()
+                        .deleteRange(range)
+                        .setNode('heading', {level: 2})
+                        .run()
+                },
+            },
+            {
+                title: 'bold',
+                command: ({editor, range}) => {
+                    editor
+                        .chain()
+                        .focus()
+                        .deleteRange(range)
+                        .setMark('bold')
+                        .run()
+                },
+            },
+            {
+                title: 'italic',
+                command: ({editor, range}) => {
+                    editor
+                        .chain()
+                        .focus()
+                        .deleteRange(range)
+                        .setMark('italic')
+                        .run()
+                },
+            },
+        ].filter(item => item.title.toLowerCase().startsWith(query.toLowerCase())).slice(0, 10)
+    },
 
-	render: () => {
-		let component
-		let popup
+    render: () => {
+        let component: VueRenderer
+        let popup
 
-		return {
-			onStart: props => {
-				component = new VueRenderer(CommandsList, {
-					// using vue 2:
-					// parent: this,
-					// propsData: props,
-					props,
-					editor: props.editor,
-				})
+        return {
+            onStart: props => {
+                component = new VueRenderer(CommandsList, {
+                    // using vue 2:
+                    // parent: this,
+                    // propsData: props,
+                    props,
+                    editor: props.editor,
+                })
 
-				if (!props.clientRect) {
-					return
-				}
+                if (!props.clientRect) {
+                    return
+                }
 
-				popup = tippy('body', {
-					getReferenceClientRect: props.clientRect,
-					appendTo: () => document.body,
-					content: component.element,
-					showOnCreate: true,
-					interactive: true,
-					trigger: 'manual',
-					placement: 'bottom-start',
-				})
-			},
+                popup = tippy('body', {
+                    getReferenceClientRect: props.clientRect,
+                    appendTo: () => document.body,
+                    content: component.element,
+                    showOnCreate: true,
+                    interactive: true,
+                    trigger: 'manual',
+                    placement: 'bottom-start',
+                })
+            },
 
-			onUpdate(props) {
-				component.updateProps(props)
+            onUpdate(props) {
+                component.updateProps(props)
 
-				if (!props.clientRect) {
-					return
-				}
+                if (!props.clientRect) {
+                    return
+                }
 
-				popup[0].setProps({
-					getReferenceClientRect: props.clientRect,
-				})
-			},
+                popup[0].setProps({
+                    getReferenceClientRect: props.clientRect,
+                })
+            },
 
-			onKeyDown(props) {
-				if (props.event.key === 'Escape') {
-					popup[0].hide()
+            onKeyDown(props) {
+                if (props.event.key === 'Escape') {
+                    popup[0].hide()
 
-					return true
-				}
+                    return true
+                }
 
-				return component.ref?.onKeyDown(props)
-			},
+                return component.ref?.onKeyDown(props)
+            },
 
-			onExit() {
-				popup[0].destroy()
-				component.destroy()
-			},
-		}
-	},
+            onExit() {
+                popup[0].destroy()
+                component.destroy()
+            },
+        }
+    },
 }
\ No newline at end of file