Mention: Add text attribute

[tomhrtly]

This PR allows you to change the text that is to be rendered in the DOM when a selection is made from the suggestion.

This is so that you may want the data-mention attribute to use a user's ID but the user's name would be displayed instead of the ID e.g. "@johnsmith" instead of "@1".

[nadar]

👍 looking for such an option

[nadar]

@tomhrtly Do you know if there is any option to override the current mention render value? because i am returning an object as user. Basically instead of

renderText({ node }) {    return `${this.options.suggestion.char}${node.attrs.id}`  },

i like to return

renderText({ node }) {    return `${this.options.suggestion.char}${node.attrs.id.NANE}`  },

So its not possible to configure renderText from outside, right?

[tomhrtly]

@nadar Can you not pass the specific value you need into the data attributes that already exist? I'm not sure exactly what you're trying to achieve

[nadar]

I think i am trying to do the same as you, maintain a NAME and an ID. But then display the NAME of the user. Sorry i don't want to be off-topic in your PR.

renderText() decides what should be rendered as value inside the element, and in my case the selection returns an object with NAME (or TEXT) and ID

[nadar]

i know its still off-topic, but i found the solution to customize the output when working with an object as mention response value. Maybe others are google for such a solution and are beginners like me. So decided to post the solution here, if it helps someone it was worth it :-)

Its not possible to override the extensionsrenderText function but of course its possible to override the renderHTML function. Therefore use something like this:

renderHTML({ node, HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      `@${node.attrs.name}` // <---- 
    ]
  },

Where name is an attribute defined previously:

addAttributes() {
    return {
      name: {
        default: null,
        parseHTML: element => {
          return {
            name: element.getAttribute('data-mention-name'),
          }
        },
        renderHTML: attributes => {
          if (!attributes.name) {
            return {}
          }
          return {
            'data-mention-name': attributes.name,
          }
        },
      },
      id: {
        default: null,
        parseHTML: element => {
          return {
            id: element.getAttribute('data-mention-id'),
          }
        },
        renderHTML: attributes => {
          if (!attributes.id) {
            return {}
          }
          return {
            'data-mention-id': attributes.id,
          }
        },
      },
    }
  },
})

As people often need context, here is the full solution

const CustomMention = Mention.extend({
  renderHTML({ node, HTMLAttributes }) {
    return [
      'span',
      mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
      `@${node.attrs.name}`
    ]
  },
  addAttributes() {
    return {
      name: {
        default: null,
        parseHTML: element => {
          return {
            name: element.getAttribute('data-mention-name'),
          }
        },
        renderHTML: attributes => {
          if (!attributes.name) {
            return {}
          }
          return {
            'data-mention-name': attributes.name,
          }
        },
      },
      id: {
        default: null,
        parseHTML: element => {
          return {
            id: element.getAttribute('data-mention-id'),
          }
        },
        renderHTML: attributes => {
          if (!attributes.id) {
            return {}
          }
          return {
            'data-mention-id': attributes.id,
          }
        },
      },
    }
  },
})

and then define the editor with the custom mention extension

new Editor({
      extensions: [
        StarterKit,
        CustomMention.configure({
          HTMLAttributes: {
            class: 'mention',
          },
          suggestion: {
            items: async function(query) {
              const response = await this.$axios('users?query=' + query)
              var values = []
              response.data.forEach(user => {
                values.push({id: userr.user_id, name: userr.user.firstname})
              })

              return values
            }.bind(this),
//.... here goes the rest from the example in the docs

I could send a PR for the docs, if you are interested in such extensive guide examples @hanspagel

[philippkuehn]

BTW: renderText is only used for the text representation when copying mentions into plain text fields/editors. by default atom nodes would be rendered as an empty string.

[tomhrtly]

@philippkuehn What changes do you need me to make to get this PR approved? What's the best way forward?

[mmachatschek]

Issue #1316 also mentions this

[philippkuehn]

Hey, I think I would like to merge that, however I would want to rename "text" to "label". Can you change this?

[tomhrtly]

@philippkuehn All done

[philippkuehn]

Great!

Another thing I’m not quite sure about: Currently the id is stored via the attribute data-mention. Does it make sense to change this to data-id? data-mention would still be necessary to parse the node.

[tomhrtly]

@philippkuehn In my use case it would, but other developers using this may not be passing the ID but a username instead so data-mention covers different types of data that could be sent (username, ID, full name)

[hanspagel]

id = identifier = the thing that identifies it, so +1 for data-id from me 🙃

[tomhrtly]

Happy to change to data-id if others think the same @philippkuehn

[shadow-light]

Just a suggestion but would it be worth making the label dynamic by not storing it as an attribute? If the above use cases are similar to mine, I prefer to have the label get updated when the data does. By storing it as an attribute it is similar to hard-coding it with the value it first had when chosen. Where as if a user's name changes, this won't be reflected in the HTML.

If going down this route, perhaps it would be best to just supply a new label config option that takes a function and the id as an argument, and let the user lookup the value.

[shadow-light]

Mention.configure({
    label: id => MY_LABELS[id],
}).extend({
    renderHTML({node, HTMLAttributes}){
        return [
            'span',
            mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),
            this.options.label(node.attrs.id),
        ]
    },
}),

[philippkuehn]

@tomhrtly I’ve added data-id 👍

[philippkuehn]

@shadow-light Yeah you are right. I’ve learned that rendering mentions is very individual. But I like your idea and added a renderLabel option to overwrite the default way (3b78af4).

So right now there are some ways to render mentions.

1. use id
2. use id + label
3. use id + add a custom node view to render names asynchronously (fetched by API for example)
4. use id + custom renderLabel method if names are available synchronously anywhere in your app

[SF-Simon]

@shadow-light Yeah you are right. I’ve learned that rendering mentions is very individual. But I like your idea and added a renderLabel option to overwrite the default way (3b78af4).

So right now there are some ways to render mentions.

1. use id
2. use id + label
3. use id + add a custom node view to render names asynchronously (fetched by API for example)
4. use id + custom renderLabel method if names are available synchronously anywhere in your app

Why didn't I get the right variables?

suggestion: {
            items: function (query) {
              return [
                { id: 1, label: "aaa" },
                { id: 11, label: "aaa1" },
                { id: 12, label: "aaa2" },
                { id: 13, label: "aaa3" },
              ];
            },

But here's the variable:

{id: Proxy, label: null}
  id: Proxy
    [[Handler]]: Object
    [[Target]]: Object
    [[IsRevoked]]: false
  label: null

Everything else is default.

"name": "@tiptap/extension-mention",
"description": "mention extension for tiptap",
"version": "2.0.0-beta.61",

@nadar

[villageseo]

@HeebeLee did you find out how to win this ?

[SF-Simon]

I think there is a bug here, there is a mention of plug-ins. Its input must be String or {id:{id:’any’, label:’any’}}, so I copied and modified the plug-in to meet my format. You can choose a way, although the current data structure is not good-looking, but it can still be satisfied.

…

On Tue, Jul 20, 2021 at 10:50 PM Oleg Zinoviev ***@***.***> wrote: @HeebeLee <https://github.com/HeebeLee> did you find out how to win this ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#1322 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACV6CILJMZOJJDNB2A7NUYTTYWEMPANCNFSM445ZUVOQ> .

[villageseo]

@HeebeLee I've won this by minor changing in our custom MentionList.vue component:

selectItem(index) { const item = this.items[index]; if (item) { this.command({ id: item.id, label: item.label, avatar: item.avatar }); } },

Then it works like a charm. It wasn't very obvious at first..

[SF-Simon]

@HeebeLee I've won this by minor changing in our custom MentionList.vue component:

selectItem(index) { const item = this.items[index]; if (item) { this.command({ id: item.id, label: item.label, avatar: item.avatar }); } },

Then it works like a charm. It wasn't very obvious at first..

selectItem(index) {
      const item = this.items[index];
      // object
      if (item && item instanceof Object) {
        this.command(item);
      } else {
        // string or number
        this.command({ id: item });
      }
    },

<template>
  <div class="items">
    <button
      class="item"
      :class="{ 'is-selected': index === selectedIndex }"
      v-for="(item, index) in items"
      :key="index"
      @click="selectItem(index)"
    >
      {{ item.label ?? item }}
    </button>
  </div>
</template>

This is our code.