diff --git a/apps/web/src/services/auth/authenticator/index.ts b/apps/web/src/services/auth/authenticator/index.ts
index ed1239ec3e..22c2ff57ae 100644
--- a/apps/web/src/services/auth/authenticator/index.ts
+++ b/apps/web/src/services/auth/authenticator/index.ts
@@ -10,6 +10,8 @@ import { useErrorStore } from '@/store/error/error-store';
 import { pinia } from '@/store/pinia';
 import { useUserStore } from '@/store/user/user-store';
 
+import { initTaskManagementTemplate } from '@/lib/site-initializer/initTaskManagementTemplate';
+
 
 abstract class Authenticator {
     static async signIn(credentials: Record<string, any>, authType: AuthType | 'SAML', verifyCode?: string): Promise<void> {
@@ -27,6 +29,7 @@ abstract class Authenticator {
         await userWorkspaceStore.load();
         displayStore.setIsSignInFailed(false);
         errorStore.reset();
+        await initTaskManagementTemplate();
     }
 
     static async signOut(): Promise<void> {
diff --git a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
index 4e90e6151a..9f83e11eb8 100644
--- a/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
+++ b/apps/web/src/services/ops-flow/components/BoardTaskComment.vue
@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import {
-    ref, computed, reactive, onBeforeMount, onMounted, onUnmounted,
+    ref, computed, onBeforeMount,
 } from 'vue';
 
-import { debounce, throttle } from 'lodash';
-
 import {
     PPaneLayout, PHeading, PButton, PCollapsibleList, PTextBeautifier, getTextHighlightRegex, PContextMenu,
-    useIgnoreWindowArrowKeydownEvents,
 } from '@cloudforet/mirinae';
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { CollapsibleItem } from '@cloudforet/mirinae/types/data-display/collapsible/collapsible-list/type';
@@ -24,6 +21,7 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import ActionMenuButton from '@/common/components/buttons/ActionMenuButton.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
+import { useMention } from '@/services/ops-flow/composables/use-mention';
 import { useCommentStore } from '@/services/ops-flow/stores/comment-store';
 import { useTaskDetailPageStore } from '@/services/ops-flow/stores/task-detail-page-store';
 
@@ -35,6 +33,7 @@ const taskDetailPageStore = useTaskDetailPageStore();
 const commentStore = useCommentStore();
 const userReferenceStore = useUserReferenceStore();
 const userStore = useUserStore();
+
 const userId = computed(() => userStore.state.userId);
 const getAuthor = (item: CommentModel) => {
     const u = item.created_by;
@@ -46,40 +45,57 @@ const commentItems = computed<CollapsibleItem<CommentModel>[]>(() => comments.va
     title: comment.created_at,
     data: comment,
 })));
-const comment = ref('');
 
+/* add comment */
 const addingComment = ref<boolean>(false);
-const addComment = async (cmt: string) => {
+const addComment = async (comment: string) => {
     try {
         addingComment.value = true;
         await commentStore.create({
             task_id: props.taskId,
-            comment: cmt,
+            comment,
         }, true);
-        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
+        showSuccessMessage(i18n.t('OPSFLOW.ALT_S_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }), '');
     } catch (e) {
         ErrorHandler.handleRequestError(e, i18n.t('OPSFLOW.ALT_E_ADD_TARGET', { target: i18n.t('OPSFLOW.TASK_BOARD.COMMENT') }));
     } finally {
         addingComment.value = false;
     }
 };
-const addCommentAndApplyToEvents = async (cmt: string) => {
-    if (!cmt.trim().length) return;
-    await addComment(cmt);
+const addCommentAndApplyToEvents = async (comment: string) => {
+    if (!comment.trim().length) return;
+    await addComment(comment);
     await taskDetailPageStore.loadNewEvents();
 };
-const handleClickAddComment = () => {
-    addCommentAndApplyToEvents(comment.value);
-    comment.value = '';
-    if (contentEditableDivRef.value) {
-        contentEditableDivRef.value.textContent = '';
-    }
-    if (hiddenDivRef.value) {
-        hiddenDivRef.value.textContent = '';
-    }
-};
 
-// mention
+
+/* mention */
+const containerRef = ref<HTMLDivElement|null>(null);
+const contentEditableDivRef = ref<HTMLDivElement|null>(null);
+const menuRef = ref<any|null>(null);
+const {
+    showSuggestions,
+    handleInput,
+    handleKeydown,
+    selectSuggestion,
+    handleMenuEsc,
+    reset,
+    focusOnInput,
+    popupStyle,
+    syncScroll,
+    keyword,
+    getRawContents,
+} = useMention({
+    containerRef,
+    contentEditableDivRef,
+    menuRef,
+    onKeydownEnter(e: KeyboardEvent) {
+        if (!showSuggestions.value && !e.shiftKey) {
+            addCommentAndApplyToEvents(getRawContents());
+            reset();
+        }
+    },
+});
 const allUserItems = computed<SelectDropdownMenuItem[]>(() => (Object.values(userReferenceStore.getters.userItems) as UserReferenceItem[]).map((u) => ({
     name: u.key,
     label: u.label || u.name,
@@ -88,259 +104,16 @@ const refinedUserItems = computed<SelectDropdownMenuItem[]>(() => {
     const filtered = allUserItems.value.filter((item) => getTextHighlightRegex(keyword.value).test(item.label as string));
     return filtered.slice(0, 10);
 });
-const mentionTriggerIndex = ref(-1);
-const showSuggestions = ref(false);
-const keyword = ref('');
-const getCaretOffset = (contentsEl: HTMLDivElement) => {
-    let caretOffset = 0;
-    const selection = window.getSelection();
-    if (selection && selection.rangeCount > 0) {
-        const range = selection.getRangeAt(0);
-        const preCaretRange = range.cloneRange();
-        preCaretRange.selectNodeContents(contentsEl);
-        preCaretRange.setEnd(range.endContainer, range.endOffset);
-        caretOffset = preCaretRange.toString().length;
-    }
-    return caretOffset;
-};
-const detectMention = debounce(() => {
-    const contentsEl = contentEditableDivRef.value;
-    if (!contentsEl) return;
-
-    const cursorPosition = getCaretOffset(contentsEl);
-    const textBeforeCursor = contentsEl.textContent?.slice(0, cursorPosition) ?? '';
-    const mentionMatch = /@([\p{L}\p{N}_]*)$/u.exec(textBeforeCursor);
-    if (mentionMatch) {
-        mentionTriggerIndex.value = mentionMatch.index;
-        keyword.value = mentionMatch[1];
-        showSuggestions.value = true;
-        calculatePopupPosition();
-        syncScroll();
-    } else {
-        clearMention();
-    }
-}, 200);
-let lastKeyPressed = '';
-const handleInput = (e: InputEvent) => {
-    // Ignore arrow key events when suggestions are shown
-    if (showSuggestions.value && (lastKeyPressed === 'ArrowDown' || lastKeyPressed === 'ArrowUp')) {
-        const selection = window.getSelection();
-        const range = selection?.getRangeAt(0);
-
-        if (!range) return;
-
-        // Get the current text node and its content
-        const textNode = range.startContainer;
-        const textContent = textNode.textContent || '';
-
-        // Remove the keyword and prepare for mention insertion
-        const mentionText = `@${keyword.value}`;
-        const lastAtIndex = textContent.lastIndexOf('@');
-        const beforeMention = textContent.slice(0, lastAtIndex);
-        const afterMention = textContent.slice(range.endOffset);
-        textNode.textContent = beforeMention + mentionText + afterMention;
-        // Move the cursor to the space after the mention
-        const afterCursorPosition = beforeMention.length + mentionText.length;
-        range.setStart(textNode, afterCursorPosition);
-        range.setEnd(textNode, afterCursorPosition);
-        selection?.removeAllRanges(); // clear the current selection
-        selection?.addRange(range); // set the new cursor position
-
-        return;
-    }
-    if (lastKeyPressed === 'Escape' || lastKeyPressed === 'Tab') {
-        return;
-    }
-    if (lastKeyPressed === 'Enter') {
-        return;
-    }
-    comment.value = (e.target as HTMLDivElement).innerText;
-    detectMention(); // detect mention after IME input ends
-};
-useIgnoreWindowArrowKeydownEvents({ predicate: showSuggestions });
-const handleKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'ArrowDown') {
-        if (showSuggestions.value) {
-            menuRef.value?.focus();
-        }
-    } else if (showSuggestions.value && (e.key === 'Escape' || e.key === 'Tab' || e.key === ' ')) {
-        clearMention();
-    } else if (e.key === 'Enter') {
-        if (!showSuggestions.value && !e.shiftKey) {
-            addCommentAndApplyToEvents(comment.value);
-            comment.value = '';
-            if (contentEditableDivRef.value) {
-                contentEditableDivRef.value.textContent = '';
-            }
-            if (hiddenDivRef.value) {
-                hiddenDivRef.value.textContent = '';
-            }
-        }
-    }
-
-    lastKeyPressed = e.key; // Track the last key pressed
-};
-const selectSuggestion = (item: SelectDropdownMenuItem) => {
-    const contentsDiv = contentEditableDivRef.value;
-    if (!contentsDiv) return;
-
-    const selection = window.getSelection();
-    const range = selection?.getRangeAt(0);
-
-    if (!range) return;
-
-    // Get the current text node and its content
-    const textNode = range.startContainer;
-    const textContent = textNode.textContent || '';
-
-    // Remove the keyword and prepare for mention insertion
-    const lastAtIndex = textContent.lastIndexOf('@');
-    const beforeMention = textContent.slice(0, lastAtIndex);
-    const afterMention = textContent.slice(range.endOffset);
-    textNode.textContent = beforeMention + afterMention;
 
-    // Create a span element for the selected user mention
-    const mentionSpan = document.createElement('span');
-    mentionSpan.className = 'mention'; // CSS class for styling the mention
-    mentionSpan.textContent = item.label as string; // Display the user label
-    mentionSpan.dataset.userId = item.name; // Store user ID as a dataset attribute
-    mentionSpan.contentEditable = 'false'; // Make the mention non-editable
 
-    // Insert the mentionSpan at the correct position
-    range.setStart(textNode, beforeMention.length);
-    range.setEnd(textNode, beforeMention.length);
-    range.insertNode(mentionSpan);
-
-    // Add a space after the mention for continued typing
-    const space = document.createTextNode(' ');
-    range.setStartAfter(mentionSpan);
-    range.setEndAfter(mentionSpan);
-    range.insertNode(space);
-
-    // Move the cursor to the space after the mention
-    range.setStartAfter(space);
-    range.setEndAfter(space);
-    selection?.removeAllRanges();
-    selection?.addRange(range);
-
-    // Reset state after inserting the mention
-    showSuggestions.value = false;
-    keyword.value = '';
-    mentionTriggerIndex.value = -1;
-};
-const containerRef = ref<HTMLDivElement|null>(null);
-/* focus in & out */
-const handleGlobalClick = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-
-    // Check if the click is outside contentEditableDivRef or menuRef
-    if (containerRef.value?.contains(target)) {
-        detectMention();
-    } else {
-        showSuggestions.value = false;
-    }
-};
-onMounted(() => {
-    document.addEventListener('mousedown', handleGlobalClick);
-});
-onUnmounted(() => {
-    document.removeEventListener('mousedown', handleGlobalClick);
-});
-
-
-const clearMention = () => {
-    showSuggestions.value = false;
-    keyword.value = '';
-    mentionTriggerIndex.value = -1;
-    if (hiddenDivRef.value) {
-        hiddenDivRef.value.textContent = comment.value;
-        // if (comment.value.charCodeAt(comment.value.length - 1) === 10) { // if last character is newline, add zero width space
-        //     hiddenDivRef.value.textContent += '\u200B';
-        // }
-    }
-};
-const handleMenuEsc = () => {
-    clearMention();
-    focusOnInput();
-};
-const focusOnInput = () => {
-    if (contentEditableDivRef.value) {
-        contentEditableDivRef.value.focus();
-    }
-};
-
-const menuRef = ref<any|null>(null);
-const contentEditableDivRef = ref<HTMLDivElement|null>(null);
-const hiddenDivRef = ref<HTMLDivElement|null>(null);
-const popupPosition = reactive({ top: 0, left: 0, width: undefined as number|undefined });
-const POPUP_MIN_WIDTH = 200;
-const POPUP_PAD = 1;
-const calculatePopupPosition = () => {
-    const contentsEl = contentEditableDivRef.value;
-    const hiddenDiv = hiddenDivRef.value;
-    if (!contentsEl || !hiddenDiv) return;
-
-    // initialize hidden div
-    hiddenDiv.textContent = '';
-
-    // append a text node before caret position
-    const beforeCaretTextNode = document.createTextNode(comment.value.slice(0, mentionTriggerIndex.value));
-    hiddenDiv.appendChild(beforeCaretTextNode);
-
-    // append a span element to calculate caret position
-    const caretSpanEl = hiddenDiv.children[0] ?? document.createElement('span');
-    caretSpanEl.textContent = `@${keyword.value}`;
-    hiddenDiv.appendChild(caretSpanEl);
-
-    // append a text node after caret position
-    const afterCaretTextNode = document.createTextNode(comment.value.slice(mentionTriggerIndex.value + caretSpanEl.textContent.length));
-    hiddenDiv.appendChild(afterCaretTextNode);
-
-    // sync scroll of hidden div with textarea to calculate caret position
-    syncScroll();
-
-    // calculate popup position
-    const contentsRect = contentsEl.getBoundingClientRect();
-    const caretRect = caretSpanEl.getBoundingClientRect();
-    const caretBottom = caretRect.bottom > contentsRect.bottom ? contentsRect.bottom : caretRect.bottom;
-    popupPosition.top = caretBottom - contentsRect.top;
-    popupPosition.left = caretRect.left - contentsRect.left - POPUP_PAD;
-
-    // calculate width of popup
-    let width = contentsRect.width - (caretRect.left - contentsRect.left);
-    if (width <= POPUP_MIN_WIDTH) {
-        const diff = POPUP_MIN_WIDTH - width;
-        popupPosition.left -= diff;
-        width = POPUP_MIN_WIDTH;
-    }
-    popupPosition.width = width;
+/* handle add comment events */
+const handleClickAddComment = () => {
+    addCommentAndApplyToEvents(getRawContents());
+    reset();
 };
 
-// sync style of hidden div with textarea
-onMounted(() => {
-    if (!hiddenDivRef.value || !contentEditableDivRef.value) return;
-    const contentsEl = contentEditableDivRef.value;
-    const hiddenDiv = hiddenDivRef.value;
-    hiddenDiv.style.font = getComputedStyle(contentsEl).font;
-    hiddenDiv.style.lineHeight = getComputedStyle(contentsEl).lineHeight;
-    hiddenDiv.style.padding = getComputedStyle(contentsEl).padding;
-    hiddenDiv.style.border = getComputedStyle(contentsEl).border;
-    hiddenDiv.style.width = `${contentsEl.offsetWidth}px`;
-    hiddenDiv.style.height = `${contentsEl.offsetHeight}px`;
-    hiddenDiv.style.wordBreak = getComputedStyle(contentsEl).wordBreak;
-});
-
-// sync scroll of hidden div with textarea
-const syncScroll = throttle(() => {
-    const contentsEl = contentEditableDivRef.value as HTMLDivElement;
-    const hiddenDiv = hiddenDivRef.value;
-
-    if (contentsEl && hiddenDiv) {
-        hiddenDiv.scrollTop = contentsEl.scrollTop;
-    }
-}, 100);
 
-// list comments for initial load
+/* list comments for initial load */
 onBeforeMount(async () => {
     await commentStore.listByTaskId(props.taskId, {
         query: {
@@ -357,17 +130,8 @@ onBeforeMount(async () => {
                    :title="$t('OPSFLOW.TASK_BOARD.COMMENT')"
         />
         <div ref="containerRef"
-             class="relative mb-3"
+             class="mb-3"
         >
-            <div ref="hiddenDivRef"
-                 :style="{
-                     position: 'absolute',
-                     pointerEvents: 'none',
-                     whiteSpace: 'pre-wrap',
-                     visibility: 'hidden',
-                     overflowY: 'auto',
-                 }"
-            />
             <div ref="contentEditableDivRef"
                  contenteditable="true"
                  class="contenteditable-div"
@@ -381,8 +145,7 @@ onBeforeMount(async () => {
                             :menu="refinedUserItems"
                             :selected="[]"
                             :highlight-term="keyword"
-                            :style="{ top: `${popupPosition.top}px`, left: `${popupPosition.left}px`,
-                                      width: `auto`, minWidth: `${POPUP_MIN_WIDTH}px`, maxWidth: `${popupPosition.width}px` }"
+                            :style="popupStyle"
                             class="suggestion-list"
                             @select="selectSuggestion"
                             @keyup:up:end="focusOnInput"
diff --git a/apps/web/src/services/ops-flow/composables/use-mention.ts b/apps/web/src/services/ops-flow/composables/use-mention.ts
new file mode 100644
index 0000000000..43a8b52510
--- /dev/null
+++ b/apps/web/src/services/ops-flow/composables/use-mention.ts
@@ -0,0 +1,329 @@
+import type { Ref } from 'vue';
+import {
+    reactive, ref, onMounted, onUnmounted, computed,
+} from 'vue';
+
+import { debounce, throttle } from 'lodash';
+
+import { useIgnoreWindowArrowKeydownEvents } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+const POPUP_MIN_WIDTH = 200;
+const POPUP_PAD = 1;
+
+export const useMention = ({
+    containerRef,
+    contentEditableDivRef,
+    menuRef,
+    onKeydownEnter,
+}: {
+    containerRef: Ref<HTMLElement | null>;
+    contentEditableDivRef: Ref<HTMLDivElement | null>;
+    menuRef: Ref<any | null>; // HACK: any type is used to avoid type issue with Vue2 and Vue3 in mirinae. It is PContextMenu originally.
+    onKeydownEnter?: (e: KeyboardEvent) => void;
+}) => {
+    const contents = ref('');
+    const keyword = ref<string>('');
+    const mentionTriggerIndex = ref(-1);
+    const showSuggestions = ref(false);
+    const popupPosition = reactive({ top: 0, left: 0, width: undefined as number|undefined });
+    const getRawContents = () => {
+        const contentsEl = contentEditableDivRef.value;
+        if (!contentsEl) return '';
+        let txt = '';
+        contentsEl.childNodes.forEach((node) => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                txt += node.textContent;
+            } else if (node.nodeType === Node.ELEMENT_NODE) {
+                const el = node as HTMLElement;
+                if (el.classList.contains('mention')) {
+                    txt += `${el.dataset.userId}`;
+                } else {
+                    txt += el.textContent;
+                }
+            }
+        });
+        return txt;
+    };
+    let hiddenDiv: HTMLDivElement|null = null;
+    const calculatePopupPosition = () => {
+        const contentsEl = contentEditableDivRef.value;
+        if (!contentsEl || !hiddenDiv) return;
+
+        // initialize hidden div
+        hiddenDiv.textContent = '';
+
+        // append a text node before caret position
+        const beforeCaretTextNode = document.createTextNode(contents.value.slice(0, mentionTriggerIndex.value));
+        hiddenDiv.appendChild(beforeCaretTextNode);
+
+        // append a span element to calculate caret position
+        const caretSpanEl = hiddenDiv.children[0] ?? document.createElement('span');
+        caretSpanEl.textContent = `@${keyword.value}`;
+        hiddenDiv.appendChild(caretSpanEl);
+
+        // append a text node after caret position
+        const afterCaretTextNode = document.createTextNode(contents.value.slice(mentionTriggerIndex.value + caretSpanEl.textContent.length));
+        hiddenDiv.appendChild(afterCaretTextNode);
+
+        // sync scroll of hidden div with textarea to calculate caret position
+        syncScroll();
+
+        // calculate popup position
+        const contentsRect = contentsEl.getBoundingClientRect();
+        const caretRect = caretSpanEl.getBoundingClientRect();
+        const caretBottom = caretRect.bottom > contentsRect.bottom ? contentsRect.bottom : caretRect.bottom;
+        popupPosition.top = caretBottom - contentsRect.top;
+        popupPosition.left = caretRect.left - contentsRect.left - POPUP_PAD;
+
+        // calculate width of popup
+        let width = contentsRect.width - (caretRect.left - contentsRect.left);
+        if (width <= POPUP_MIN_WIDTH) {
+            const diff = POPUP_MIN_WIDTH - width;
+            popupPosition.left -= diff;
+            width = POPUP_MIN_WIDTH;
+        }
+        popupPosition.width = width;
+    };
+
+    const getCaretOffset = (contentsEl: HTMLDivElement) => {
+        let caretOffset = 0;
+        const selection = window.getSelection();
+        if (selection && selection.rangeCount > 0) {
+            const range = selection.getRangeAt(0);
+            const preCaretRange = range.cloneRange();
+            preCaretRange.selectNodeContents(contentsEl);
+            preCaretRange.setEnd(range.endContainer, range.endOffset);
+            caretOffset = preCaretRange.toString().length;
+        }
+        return caretOffset;
+    };
+    const detectMention = debounce(() => {
+        const contentsEl = contentEditableDivRef.value;
+        if (!contentsEl) return;
+
+        const cursorPosition = getCaretOffset(contentsEl);
+        const textBeforeCursor = contentsEl.textContent?.slice(0, cursorPosition) ?? '';
+        const mentionMatch = /@([\p{L}\p{N}_]*)$/u.exec(textBeforeCursor);
+        if (mentionMatch) {
+            mentionTriggerIndex.value = mentionMatch.index;
+            keyword.value = mentionMatch[1];
+            showSuggestions.value = true;
+            calculatePopupPosition();
+            syncScroll();
+        } else {
+            clearMention();
+        }
+    }, 200);
+
+    let lastKeyPressed = '';
+    const handleInput = (e: InputEvent) => {
+    // Ignore arrow key events when suggestions are shown
+        if (showSuggestions.value && (lastKeyPressed === 'ArrowDown' || lastKeyPressed === 'ArrowUp')) {
+            const selection = window.getSelection();
+            const range = selection?.getRangeAt(0);
+
+            if (!range) return;
+
+            // Get the current text node and its content
+            const textNode = range.startContainer;
+            const textContent = textNode.textContent || '';
+
+            // Remove the keyword and prepare for mention insertion
+            const mentionText = `@${keyword.value}`;
+            const lastAtIndex = textContent.lastIndexOf('@');
+            const beforeMention = textContent.slice(0, lastAtIndex);
+            const afterMention = textContent.slice(range.endOffset);
+            textNode.textContent = beforeMention + mentionText + afterMention;
+            // Move the cursor to the space after the mention
+            const afterCursorPosition = beforeMention.length + mentionText.length;
+            range.setStart(textNode, afterCursorPosition);
+            range.setEnd(textNode, afterCursorPosition);
+            selection?.removeAllRanges(); // clear the current selection
+            selection?.addRange(range); // set the new cursor position
+
+            return;
+        }
+        if (lastKeyPressed === 'Escape' || lastKeyPressed === 'Tab') {
+            return;
+        }
+        if (lastKeyPressed === 'Enter') {
+            return;
+        }
+        contents.value = (e.target as HTMLDivElement).innerText;
+        detectMention(); // detect mention after IME input ends
+    };
+    const handleKeydown = (e: KeyboardEvent) => {
+        if (e.key === 'ArrowDown') {
+            if (showSuggestions.value) {
+                menuRef.value?.focus();
+            }
+        } else if (showSuggestions.value && (e.key === 'Escape' || e.key === 'Tab' || e.key === ' ')) {
+            clearMention();
+        } else if (e.key === 'Enter') {
+            if (onKeydownEnter) {
+                onKeydownEnter(e);
+            }
+        }
+
+        lastKeyPressed = e.key; // Track the last key pressed
+    };
+    const reset = () => {
+        contents.value = '';
+        if (contentEditableDivRef.value) {
+            contentEditableDivRef.value.textContent = '';
+        }
+        if (hiddenDiv) {
+            hiddenDiv.textContent = '';
+        }
+    };
+
+    const selectSuggestion = (item: SelectDropdownMenuItem) => {
+        const contentsDiv = contentEditableDivRef.value;
+        if (!contentsDiv) return;
+
+        const selection = window.getSelection();
+        const range = selection?.getRangeAt(0);
+
+        if (!range) return;
+
+        // Get the current text node and its content
+        const textNode = range.startContainer;
+        const textContent = textNode.textContent || '';
+
+        // Remove the keyword and prepare for mention insertion
+        const lastAtIndex = textContent.lastIndexOf('@');
+        const beforeMention = textContent.slice(0, lastAtIndex);
+        const afterMention = textContent.slice(range.endOffset);
+        textNode.textContent = beforeMention + afterMention;
+
+        // Create a span element for the selected user mention
+        const mentionSpan = document.createElement('span');
+        mentionSpan.className = 'mention'; // CSS class for styling the mention
+        mentionSpan.textContent = item.label as string; // Display the user label
+        mentionSpan.dataset.userId = item.name; // Store user ID as a dataset attribute
+        mentionSpan.contentEditable = 'false'; // Make the mention non-editable
+
+        // Insert the mentionSpan at the correct position
+        range.setStart(textNode, beforeMention.length);
+        range.setEnd(textNode, beforeMention.length);
+        range.insertNode(mentionSpan);
+
+        // Add a space after the mention for continued typing
+        const space = document.createTextNode(' ');
+        range.setStartAfter(mentionSpan);
+        range.setEndAfter(mentionSpan);
+        range.insertNode(space);
+
+        // Move the cursor to the space after the mention
+        range.setStartAfter(space);
+        range.setEndAfter(space);
+        selection?.removeAllRanges();
+        selection?.addRange(range);
+
+        // Reset state after inserting the mention
+        showSuggestions.value = false;
+        keyword.value = '';
+        mentionTriggerIndex.value = -1;
+        contents.value = contentsDiv.innerText;
+    };
+    /* focus in & out */
+    const handleGlobalClick = (e: MouseEvent) => {
+        const target = e.target as HTMLElement;
+
+        // Check if the click is outside contentEditableDivRef or menuRef
+        if (containerRef.value?.contains(target)) {
+            detectMention();
+        } else {
+            showSuggestions.value = false;
+        }
+    };
+
+    const clearMention = () => {
+        showSuggestions.value = false;
+        keyword.value = '';
+        mentionTriggerIndex.value = -1;
+        if (hiddenDiv) {
+            hiddenDiv.textContent = contents.value;
+        }
+    };
+    const handleMenuEsc = () => {
+        clearMention();
+        focusOnInput();
+    };
+    const focusOnInput = () => {
+        if (contentEditableDivRef.value) {
+            contentEditableDivRef.value.focus();
+        }
+    };
+
+    // sync style of hidden div with textarea
+    onMounted(() => {
+        if (!containerRef.value || !contentEditableDivRef.value) return;
+        // make container relative
+        containerRef.value.style.position = 'relative';
+        // create hidden div
+        hiddenDiv = document.createElement('div');
+        containerRef.value.insertBefore(hiddenDiv, contentEditableDivRef.value);
+        const contentsEl = contentEditableDivRef.value;
+        hiddenDiv.style.font = getComputedStyle(contentsEl).font;
+        hiddenDiv.style.lineHeight = getComputedStyle(contentsEl).lineHeight;
+        hiddenDiv.style.padding = getComputedStyle(contentsEl).padding;
+        hiddenDiv.style.border = getComputedStyle(contentsEl).border;
+        hiddenDiv.style.width = `${contentsEl.offsetWidth}px`;
+        hiddenDiv.style.height = `${contentsEl.offsetHeight}px`;
+        hiddenDiv.style.wordBreak = getComputedStyle(contentsEl).wordBreak;
+        hiddenDiv.style.position = 'absolute';
+        hiddenDiv.style.pointerEvents = 'none';
+        hiddenDiv.style.whiteSpace = 'pre-wrap';
+        hiddenDiv.style.overflowY = 'auto';
+        hiddenDiv.style.visibility = 'hidden';
+    });
+    onUnmounted(() => {
+        if (hiddenDiv) {
+            hiddenDiv.remove();
+            hiddenDiv = null;
+        }
+    });
+
+    const popupStyle = computed(() => ({
+        top: `${popupPosition.top}px`,
+        left: `${popupPosition.left}px`,
+        width: 'auto',
+        minWidth: `${POPUP_MIN_WIDTH}px`,
+        maxWidth: `${popupPosition.width}px`,
+    }));
+
+    // sync scroll of hidden div with textarea
+    const syncScroll = throttle(() => {
+        const contentsEl = contentEditableDivRef.value as HTMLDivElement;
+
+        if (contentsEl && hiddenDiv) {
+            hiddenDiv.scrollTop = contentsEl.scrollTop;
+        }
+    }, 100);
+
+    onMounted(() => {
+        document.addEventListener('mousedown', handleGlobalClick);
+    });
+    onUnmounted(() => {
+        document.removeEventListener('mousedown', handleGlobalClick);
+    });
+    useIgnoreWindowArrowKeydownEvents({ predicate: showSuggestions });
+
+
+    return {
+        showSuggestions,
+        popupPosition,
+        handleInput,
+        handleKeydown,
+        selectSuggestion,
+        handleMenuEsc,
+        reset,
+        focusOnInput,
+        popupStyle,
+        syncScroll,
+        keyword,
+        getRawContents,
+    };
+};