Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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

This comment has been minimized.

Copy link

nayunhwan commented Jul 6, 2018

Thx 👍

@dharnen

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

Nitin2392 commented Jun 24, 2019

This is very helpful! Thanks @gwillz and @iomal

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.