Naive TypeScript support for draft-js-plugins

draft-js-plugins.d.ts

/// <resources type="react" />
/// <resources type="draft-js" />

declare module "draft-js-plugins-editor" {
    export type PluginsEditorProps = Draft.EditorProps | {
        plugins: any,
    }
    
    export default class PluginsEditor 
        extends React.Component<PluginsEditorProps, Draft.EditorState> {}
    export function createEditorStateWithText(text: string): PluginsEditor;
    export function composeDecorators(...func: any[]): (...args: any[]) => any;
}

// @todo flesh out component type
declare module "draft-js-emoji-plugin" {
    function createEmojiPlugin(config?: object): any;
    export type EmojiSuggestions = any;
    export default createEmojiPlugin;
}

declare module "draft-js-mention-plugin" {
    // @todo missing defaultTheme
    // @todo missing defaultSuggestionsFilter
    
    type Props = {
        suggestions: any[],
        onAddMention: (mention: any) => void,
        entryComponent: (...props: any[]) => JSX.Element,
        entityMutability: string,
    }
    
    type State = {
        isActive: boolean,
        focusedOptionIndex: number,
    }
    
    export type MentionSuggestions<T> = React.Component<Props, State>;
    export default function createMentionPlugin(config?: object): any;
}

Thx 👍

Hello @gwillz, I'm decently new with typescript. This d.ts establishes the needed classes to use draft-js-plugins with typescript correct? Is there a specific location we have to put it to allow for the classes to correctly import?

Hei @dharnen , put the file in src>typings>xxxx.d.ts. Also in your tsconfig.json "compilerOptions": { "baseUrl": "./src", "module":"commonjs","outDir": "./built","noImplicitAny": true} , "exclude": [ "node_modules"],"include": ["src/**/*" ]

After this -> import {default as PluginEditor} from "draft-js-plugins-editor"; -> in the file of your Editor and refer to it as PluginEditor

Hello @gwillz, I am wondering where is createMentionPlugin defined in the module. I searched the project src, but could not find it.
Because I am trying to add some missing declarations , but no idea where to begin with.

Hello @gwillz, I am wondering where is createMentionPlugin defined in the module. I searched the project src, but could not find it.
Because I am trying to add some missing declarations , but no idea where to begin with.

@wenx1 I believe createMentionPlugin is from draft-js-mention-plugin package. So you have to install that package first. If you don't need that package, you can remove these lines:

declare module "draft-js-mention-plugin" {
    // @todo missing defaultTheme
    // @todo missing defaultSuggestionsFilter
    
    type Props = {
        suggestions: any[],
        onAddMention: (mention: any) => void,
        entryComponent: (...props: any[]) => JSX.Element,
        entityMutability: string,
    }
    
    type State = {
        isActive: boolean,
        focusedOptionIndex: number,
    }
    
    export type MentionSuggestions<T> = React.Component<Props, State>;
    export default function createMentionPlugin(config?: object): any;
}

This gist was exactly what I was looking for. Thanks, @gwillz.

And also thanks to @iomal for your help on how to make this working.

This is very helpful! Thanks @gwillz and @iomal

Thank you so much!

awesome!
thanks!

Simple defaultSuggestionsFilter

 export type defaultSuggestionsFilter = (searchValue: string, suggestions: any[]) => any[]

How do we use this to enable plugins for typescript editors?

Nice start! I have a small addition:

export function defaultSuggestionsFilter<T>(value: string, suggestions: T[]): any;