Need help integrating @draft-js-plugins/mention

[vmc08]

Hi, thanks for creating this great library but I need help integrating @draft-js-plugins/mention.

Library versions, if this helps

"@draft-js-plugins/editor": "^4.1.0",
"@draft-js-plugins/mention": "^4.3.1",
"draft-js": "^0.10.5",
"draftail": "^1.3.0",

have to use 0.10.5 for draft-js so draftail will work as expected (also stated in draftail doc)

Issue

I just followed the documentation in the mentions plugin but this is the result.

Editor Component

import React, { useState, useCallback, memo } from 'react'
import { DraftailEditor } from 'draftail'
import { defaultSuggestionsFilter } from '@draft-js-plugins/mention';
import { MentionData } from '@draft-js-plugins/mention/lib';

import usePlugins from './hooks/usePlugins'
import { StyledEditorWrapper } from './styled'

import "draft-js/dist/Draft.css"
import "draftail/dist/draftail.css"
import '@draft-js-plugins/mention/lib/plugin.css'

interface IDraftail {
  mentionSuggestions?: MentionData[]
}

const Draftail: React.FC<IDraftail> = memo(({
  mentionSuggestions = [],
}) => {
  const [openState, setOpenState] = useState(false)
  const [suggestions, setSuggestions] = useState<MentionData[]>(mentionSuggestions)

  const onMentionSearchChange = useCallback(({ value }: { value: string }) => {
    const filteredMentions = defaultSuggestionsFilter(value, mentionSuggestions)
    setSuggestions(filteredMentions);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mentionSuggestions]);

  const { plugins, MentionSuggestions } = usePlugins()

  return (
    <StyledEditorWrapper id="identifi-editor">
      <DraftailEditor
        plugins={plugins}
      />
      {Boolean(mentionSuggestions.length) && (
        <MentionSuggestions
          open={openState}
          onOpenChange={nextOpenState => setOpenState(nextOpenState)}
          suggestions={suggestions}
          onSearchChange={onMentionSearchChange}
          onAddMention={(_: MentionData) => setOpenState(false)}
        />
      )}
    </StyledEditorWrapper>
  )
})

export default Draftail

Plugins Hook

import { useMemo } from 'react'
import createMentionPlugin from '@draft-js-plugins/mention';

export default () => {
  const pluginsObject = useMemo(() => {
    const mentionPlugin = createMentionPlugin()
    const { MentionSuggestions } = mentionPlugin
    const plugins = [
      mentionPlugin,
    ]
    return {
      plugins,
      MentionSuggestions,
    }
  }, [])

  return pluginsObject
}

I'm noob at draft-js, I hope you guys can point out what I'm missing or what I did wrong.

[thibaudcolas]

@vmc08 I think the first thing that’s off is that you’re using "@draft-js-plugins/editor": "^4.1.0", whereas internally Draftail uses "draft-js-plugins-editor": "^2.1.1",. There’s going to be a lot of things that are potentially off under the hood with such a wide discrepancy in version ranges. You also shouldn’t need to install the plugins editor package directly, since that’s a dependency of Draftail.

So I would recommend trying with a version of the mentions plugin that matches the editor’s version. I haven’t used the mentions plugin myself otherwise, so can’t comment to how it’s meant to be used or what to expect of it.

[vmc08]

Hi @thibaudcolas , thanks for your reply. I'll try to do that. Will give update of the result.