feat: Revamp editor for message and article (#6145)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,22 +1,23 @@
 <template>
-  <ul
-    v-if="items.length"
-    class="vertical dropdown menu mention--box"
-    :style="{ top: getTopPadding() + 'rem' }"
-  >
-    <li
-      v-for="(item, index) in items"
-      :id="`mention-item-${index}`"
-      :key="item.key"
-      :class="{ active: index === selectedIndex }"
-      @click="onListItemSelection(index)"
-      @mouseover="onHover(index)"
-    >
-      <a class="text-truncate">
-        <strong>{{ item.label }}</strong> - {{ item.description }}
-      </a>
-    </li>
-  </ul>
+  <div v-if="items.length" ref="mentionsListContainer" class="mention--box">
+    <ul class="vertical dropdown menu">
+      <woot-dropdown-item
+        v-for="(item, index) in items"
+        :id="`mention-item-${index}`"
+        :key="item.key"
+        @mouseover="onHover(index)"
+      >
+        <woot-button
+          size="small"
+          class="text-truncate"
+          :variant="index === selectedIndex ? 'smooth' : 'clear'"
+          @click="onListItemSelection(index)"
+        >
+          <strong>{{ item.label }}</strong> - {{ item.description }}
+        </woot-button>
+      </woot-dropdown-item>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -69,16 +70,22 @@ export default {
 <style scoped lang="scss">
 .mention--box {
   background: var(--white);
-  border-bottom: var(--space-small) solid var(--white);
+  box-shadow: var(--shadow-medium);
+  border-radius: var(--border-radius-normal);
   border-top: 1px solid var(--color-border);
   left: 0;
-  max-height: 14rem;
+  bottom: 100%;
+  max-height: 18rem;
   overflow: auto;
-  padding-top: var(--space-small);
+  padding: var(--space-small) var(--space-small) 0;
   position: absolute;
   width: 100%;
   z-index: 100;
 
+  .dropdown-menu__item:last-child {
+    padding-bottom: var(--space-smaller);
+  }
+
   .active a {
     background: var(--w-500);
   }