Mention popper

[beqosindi]

Hi,
Is it possible to add mention in markdown ?
I am trying to add in my project with this package: https://www.npmjs.com/package/vue-mention
but working only for input and textarea.

[imzbf]

I haven't used this library before.

But I think this feature can be implemented with @codemirror/autocomplete. The entrance is here.

I will also try it out later on

[beqosindi]

I tried it @imzbf , but it still doesn't work..

[imzbf]

I'm sorry, I didn't have time to have a try before.

This is an example, I will optimize styles in the next version.

import { autocompletion, CompletionContext } from '@codemirror/autocomplete';

const myCompletions = (context: CompletionContext) => {
  const word = context.matchBefore(/^@*/);
  if (word!.from == word!.to && !context.explicit) return null;
  return {
    from: word!.from,
    options: [
      { label: '@imzbf', type: 'text' },
      { label: '@github', type: 'text' }
    ]
  };
};

config({
  codeMirrorExtensions(_theme, extensions) {
    const _exs = [
      ...extensions,
      lineNumbers(),
      autocompletion({ override: [myCompletions] })
    ];

    // _exs[1] = basicSetup;
    return _exs;
  }
});

[imzbf]

I will optimize styles in 4.1.0-beta.0. The latest version will be released after verification

And we can use @codemirror/autocomplete in this way

<template>
  <MdEditor v-model="text" :completions="completions" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import type { CompletionSource } from '@codemirror/autocomplete';

const text = ref('');

const completions = ref<Array<CompletionSource>>([
  (context) => {
    const word = context.matchBefore(/@\w*/);

    if (word === null || (word.from == word.to && context.explicit)) {
      return null;
    }

    return {
      from: word.from,
      options: [
        {
          label: '@imzbf',
          type: 'text'
        }
      ]
    };
  }
]);
</script>