diff options
author | Luka Trovic <luka@nextcloud.com> | 2022-08-05 18:14:13 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2022-08-25 12:04:53 +0300 |
commit | edca2da80b1a2d3b3d4db39743a8764c41f484ed (patch) | |
tree | 2f1b3584468a9d65d9efb2ae45becd3834ea9708 /src | |
parent | bce30b88c91a1ee89a74f2f631728d62173eabdf (diff) |
fix: solve markdown-it-mentions issues
Signed-off-by: Luka Trovic <luka@nextcloud.com>
Diffstat (limited to 'src')
-rw-r--r-- | src/components/Mention/AutoCompleteResult.vue | 2 | ||||
-rw-r--r-- | src/components/Mention/List.vue | 13 | ||||
-rw-r--r-- | src/components/Mention/suggestion.js | 15 | ||||
-rw-r--r-- | src/extensions/Mention.js | 10 | ||||
-rw-r--r-- | src/markdownit/index.js | 2 |
5 files changed, 26 insertions, 16 deletions
diff --git a/src/components/Mention/AutoCompleteResult.vue b/src/components/Mention/AutoCompleteResult.vue index c53bb6bfd..a8d11fbd9 100644 --- a/src/components/Mention/AutoCompleteResult.vue +++ b/src/components/Mention/AutoCompleteResult.vue @@ -78,7 +78,7 @@ export default { </script> <style lang="scss" scoped> -$clickable-area: 44px; +$clickable-area: 30px; $autocomplete-padding: 10px; .autocomplete-result { diff --git a/src/components/Mention/List.vue b/src/components/Mention/List.vue index cf2287108..1774d2648 100644 --- a/src/components/Mention/List.vue +++ b/src/components/Mention/List.vue @@ -1,14 +1,15 @@ <template> <div class="items"> <template v-if="items.length"> - <div v-for="(item, index) in items" + <div v-for="({ id, label }, index) in items" :key="index" - :class="index === selectedIndex ? 'highlight' : null"> - <AutoCompleteResult :id="item" - :label="item" + :class="id === selectedIndex ? 'highlight' : null"> + <AutoCompleteResult + :id="id" + :label="label" icon="icon-user" source="users" - @mouseover.native="selectedIndex = index" + @mouseover.native="selectedIndex = id" @click.native="selectItem(index)" /> </div> </template> @@ -84,7 +85,7 @@ export default { const item = this.items[index] if (item) { - this.command({ id: item }) + this.command(item) } }, }, diff --git a/src/components/Mention/suggestion.js b/src/components/Mention/suggestion.js index ef74c8d98..385c18a30 100644 --- a/src/components/Mention/suggestion.js +++ b/src/components/Mention/suggestion.js @@ -8,12 +8,17 @@ const USERS_LIST_ENDPOINT_URL = generateUrl('apps/text/api/v1/users'); export default { items: async ({ query }) => { - - const params = { filter: query }; - const response = await axios.post(USERS_LIST_ENDPOINT_URL, params); - const users = JSON.parse(JSON.stringify(response.data)); + const params = { filter: query } + const response = await axios.post(USERS_LIST_ENDPOINT_URL, params) + const users = JSON.parse(JSON.stringify(response.data)) + let result = [] - return Object.keys(users).map(key => users[key]); + Object.keys(users).map(key => result.push({ + id: key, + label: users[key], + })) + + return result }, render: () => { diff --git a/src/extensions/Mention.js b/src/extensions/Mention.js index 36353c666..38024e141 100644 --- a/src/extensions/Mention.js +++ b/src/extensions/Mention.js @@ -13,8 +13,10 @@ export default TipTapMention.extend({ parseHTML() { return [ { - tag: `span[data-type="${this.name}"]`, - getAttrs: element => ((element.getAttribute('data-type') === this.name) && null), + tag: `span[data-type="user"]`, + getAttrs: element => ((element.getAttribute('data-type') === "user") + && (element.getAttribute('class') === "mention") + && null), priority: 100, }, ] @@ -61,8 +63,8 @@ export default TipTapMention.extend({ }, toMarkdown(state, node) { - state.write('@') - state.write(node.attrs.id) + state.write(' ') + state.write(`@[${node.attrs.id}](mention://user/${node.attrs.id})`) state.write(' ') }, });
\ No newline at end of file diff --git a/src/markdownit/index.js b/src/markdownit/index.js index 81fe0fb11..71c36cc92 100644 --- a/src/markdownit/index.js +++ b/src/markdownit/index.js @@ -1,5 +1,6 @@ import MarkdownIt from 'markdown-it' import taskLists from '@hedgedoc/markdown-it-task-lists' +import markdownitMentions from '@quartzy/markdown-it-mentions' import underline from './underline.js' import splitMixedLists from './splitMixedLists.js' import callouts from './callouts.js' @@ -13,5 +14,6 @@ const markdownit = MarkdownIt('commonmark', { html: false, breaks: false }) .use(underline) .use(callouts) .use(keepSyntax) + .use(markdownitMentions) export default markdownit |