diff --git a/package.json b/package.json index 5a58215..bb758b2 100644 --- 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 index 798607a..23b3ba1 100644 --- 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 index dd7c21d..4eb560e 100644 --- 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 {