Solves styling issue

sertxudeveloper · Jul 7, 2022 · 79b6184 · 79b6184
1 parent 37ab2ce
commit 79b6184
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@sertxudeveloper/markdown-editor",
   "exportName": "MarkdownEditor",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "A customizable markdown editor for your projects",
   "main": "./build/MarkdownEditor.js",
   "module": "./build/MarkdownEditor.js",

diff --git a/src/plugins/mentions/Mentions.ts b/src/plugins/mentions/Mentions.ts
@@ -153,6 +153,8 @@ export default class Mentions extends Plugin {
     // Fetch the mentions, render them, add the click event handler and append them to the listbox
     this.fetchMentions(prefix, search)
       .then(mentions => {
+        this.mentionsListbox.innerHTML = '';
+
         let mentionsElements = mentions.map((item): HTMLElement => {
           let element
 

diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -53,31 +53,31 @@
           @apply hidden;
         }
       }
-    }
 
-    .markdown-editor-preview {
-      @apply max-w-none pt-5 px-5 pb-1 break-words;
-    }
+      .mentions-listbox {
+        @apply border border-solid rounded-md shadow-md w-64 bg-white;
 
-    .mentions-listbox {
-      @apply border rounded-md shadow-md w-64 bg-white;
+        .mentions-listbox-item {
+          @apply py-2 px-3;
 
-      .mentions-listbox-item {
-        @apply py-2 px-3;
+          &:hover {
+            @apply bg-blue-100;
+          }
 
-        &:hover {
-          @apply bg-blue-100;
-        }
+          .mentions-listbox-item-name {
+            @apply text-gray-900 mr-2 text-sm font-medium;
+          }
 
-        .mentions-listbox-item-name {
-          @apply text-gray-900 mr-2 text-sm font-medium;
-        }
-
-        .mentions-listbox-item-id {
-          @apply text-gray-600 text-sm;
+          .mentions-listbox-item-id {
+            @apply text-gray-600 text-sm;
+          }
         }
       }
     }
+
+    .markdown-editor-preview {
+      @apply max-w-none pt-5 px-5 pb-1 break-words;
+    }
   }
 
   &.markdown-write-mode {