Skip to content

Instantly share code, notes, and snippets.

@gwillz
Created July 5, 2018 08:53
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gwillz/1e23b573af3db71aad268d41a988d3d6 to your computer and use it in GitHub Desktop.
Naive TypeScript support for draft-js-plugins
/// <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;
}
@nayunhwan
Copy link

Thx 👍

@dharnen
Copy link

dharnen commented Mar 9, 2019

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?

@iomal
Copy link

iomal commented Apr 11, 2019

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

@wenx1
Copy link

wenx1 commented May 9, 2019

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.

@agungsb
Copy link

agungsb commented Jun 2, 2019

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;
}

@agungsb
Copy link

agungsb commented Jun 2, 2019

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.

@Nitin2392
Copy link

This is very helpful! Thanks @gwillz and @iomal

@shoebmogal
Copy link

Thank you so much!

@anders0l
Copy link

awesome!
thanks!

Simple defaultSuggestionsFilter

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

@evilartnboy
Copy link

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

@milovanderlinden
Copy link

Nice start! I have a small addition:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment