TypeScript support

[doublejosh]

Anyone already setup a declaration file?

[joelewis]

Not yet.

[doublejosh]

Workarounds...

/src/@types/prosemirror-mentions/index.d.ts

/// <reference types="node" />

declare module 'prosemirror-mentions' {
  import { getMentionsPlugin, addMentionNodes, addTagNodes, tagNode, mentionNode } from 'prosemirror-mentions'

  export const getMentionsPlugin
  export const addMentionNodes
  export const addTagNodes
  export const tagNode
  export const mentionNode
}

/tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "noImplicitAny": true,
    "strictNullChecks": true
  },
  "include": ["src/**/*"],
}

/src/components/MyEditorComponent/plugins/mentions.tsx

import React from 'react'
import ReactDOMServer from 'react-dom/server'
import * as prosemirrorMentions from 'prosemirror-mentions'

export type UserRecord = {
  name: string
  id: string
}

export type SuggestionsComplete = (arg0: UserRecord[]) => void

const SuggestionList: React.FC<{ items: UserRecord[] }> = ({ items }) => {
  return (
    <div className="suggestion-item-list">
      {items && items.map(i =>
        <div className="suggestion-item">{i.name}</div>
      )}
    </div>
  )
}

export const mentionPlugin = prosemirrorMentions.getMentionsPlugin({
  getSuggestions: (type: string, text: any, done: SuggestionsComplete) => {
    setTimeout(() => {
      if (type === 'mention') {
        done([
          { name: 'John Doe', id: '101' },
          { name: 'Joe Lewis', id: '102' }
        ])
      }
    }, 0)
  },
  getSuggestionsHTML: (items: UserRecord[], type: string) => {
    if (type === 'mention') {
      return ReactDOMServer.renderToString(<SuggestionList items={items} />)
    }
  }
})

/src/components/MyEditorComponent/index.tsx

import { mentionPlugin } from './plugins/mentions'
...
EditorState.create({ doc, schema, plugins: [mentionPlugin] })

/src/components/MyEditorComponent/schema.tsx

import * as prosemirrorMentions from 'prosemirror-mentions'
... 
new Schema({ nodes: prosemirrorMentions.addMentionNodes(schema.spec.nodes) })

[doublejosh]

Instead of the above workaround, I recommend looking at this TypeScript fork for now...

https://github.com/themaven-net/prosemirror-mentions

[GitHubish]

Who would be interested to rewrite with me this plugin completely in Typescript? The plugin would be more maintainable and it would allow to make it evolve.