Typescript type definition file

[ehs035]

I would like to use this in a typescript project and was wondering if there is a typescript type definition file for it.

    const contentBlock = htmlToDraft(html);
    if (contentBlock) {
        const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
        const editorState = EditorState.createWithContent(contentState);
        this.state = {
            editorState
        };
    }

It doesn't recognize the Content and EditorState. Thanks.

[jpuri]

Hi @ehs035 , they are not there atm. But definitely something I will plan and schedule to do.

[ehs035]

FYI: I just found a typescript wrapper at: https://github.com/bang88/hake-draft

[KromDaniel]

I started something will take some time to finish those marked as any are not yet done

declare module "react-draft-wysiwyg" {
    import * as React from "react";

    type DraftInlineStyle = Set<String>;
    type DraftDecoratorType = any;
    type List = any[];
    type EditorStateCreationConfig = any;
    type EditorChangeType = any;
    type EditorStateRecordType = any;
    type BlockMap = any;
    type Stack<T> = Array<T>;
    type OrderedMap<K,S> = Map<K,S>;
    class ContentState {

    }

    class SelectionState {

    }

    /**
     * EditorState is the top-level state object for the editor.
     * It is an Immutable @Record that represents the entire state of a Draft editor
     *
     * @class EditorState
     */
    class EditorState {
        static createEmpty(decorator?: any): EditorState;
        static createWithContent(contentState: ContentState, decorator?: DraftDecoratorType): EditorState;
        static create(config: EditorStateCreationConfig): EditorState
        static push(editorState: EditorState, contentState: ContentState, changeType: EditorChangeType): EditorState;
        static undo(editorState: EditorState): EditorState;
        static redo(editorState: EditorState): EditorState;
        static acceptSelection(editorState: EditorState, selectionState: SelectionState): EditorState;
        static forceSelection(editorState: EditorState, selectionState: SelectionState): EditorState;
        static moveSelectionToEnd(editorState: EditorState): EditorState;
        static moveFocusToEnd(editorState: EditorState): EditorState;
        static setInlineStyleOverride(editorState: EditorState, inlineStyleOverride: DraftInlineStyle): EditorState;
        static set(editorState: EditorState, options: EditorStateRecordType): EditorState;

        getCurrentContent(): ContentState;
        getSelection(): SelectionState;
        getCurrentInlineStyle(): DraftInlineStyle;
        getBlockTree(blockKey: string): List;
        getAllowUndo(): boolean;
        getDecorator(): DraftDecoratorType | undefined;
        getDirectionMap(): BlockMap;
        mustForceSelection(): boolean;
        isInCompositionMode(): boolean;
        getInlineStyleOverride(): DraftInlineStyle;
        getLastChangeType(): EditorChangeType;
        getNativelyRenderedContent(): ContentState | undefined;
        getRedoStack(): Stack<ContentState>;
        getSelection(): SelectionState;
        getUndoStack(): Stack<ContentState>;
        treeMap: OrderedMap<string, List>;
    }

    interface IWysiwygEditorProps {
        onChange?: (editorState: any) => void;
        onEditorStateChange?: (editorState: any) => void;
        onContentStateChange?: (editorState: any) => void;
        defaultContentState?: any;
        contentState?: any;
        editorState?: any;
        defaultEditorState?: any;
        toolbarOnFocus?: boolean;
        spellCheck?: boolean;
        stripPastedStyles?: boolean;
        toolbar?: any;
        toolbarCustomButtons?: any[];
        toolbarClassName?: string;
        toolbarHidden?: boolean;
        locale?: string;
        localization?: any;
        editorClassName?: string;
        wrapperClassName?: string;
        toolbarStyle?: React.CSSProperties;
        editorStyle?: React.CSSProperties;
        wrapperStyle?: React.CSSProperties;
        uploadCallback?: (upload: any) => void;
        onFocus?: (event: any) => void;
        onBlur?: (event: any) => void;
        onTab?: (event: any) => void;
        mention?: any;
        hashtag?: any;
        textAlignment?: string;
        readOnly?: boolean;
        tabIndex?: number;
        placeholder?: string;
        ariaLabel?: string;
        ariaOwneeID?: string;
        ariaActiveDescendantID?: string;
        ariaAutoComplete?: string;
        ariaDescribedBy?: string;
        ariaExpanded?: string;
        ariaHasPopup?: string;
        customBlockRenderFunc?: (e: any) => void;
        wrapperId?: number,
        customDecorators?: any[];
    }

    export class Editor extends React.Component<IWysiwygEditorProps>{ }

}

[jpuri]

Thanks a lot @KromDaniel , great work 👍 Looking forward to see it completed soon.

[oswaldjaroslav]

@KromDaniel Thank you very much 👍

[codeaid]

Hi @jpuri,

Any news on the definitions file? Seems like there were some solutions and several people out there willing to work on it but looks like nothing has been committed to the project.

Thanks!

[jpuri]

Yep no PR so far :) I will appreciate one.

[imechZhangLY]

Hi, all

I have add a type definitions file for react-draft-wysiwyg. You can visit https://www.npmjs.com/package/@types/react-draft-wysiwyg for more information.

[marchaos]

Hi @imechZhangLY. There seems to be an error with onChange in the definition file. The argument is type as ContentState, whereas the docs say the object passed is of type RawDraftContentState. Also for some reason it expects a return type of RawDraftContentState, which I'm not sure the library is expecting. There is no return in any of the examples of onChange. Currently you cannot use this without a ts error as RawDraftContentState and ContentState are incompatible.

[jpuri]

onChange returns type RawDraftContentState. Plz refer this:

https://github.com/jpuri/react-draft-wysiwyg/blob/master/src/Editor/index.js#L300 https://draftjs.org/docs/api-reference-data-conversion#converttoraw

[jpuri]

I guess this should be: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-draft-wysiwyg/index.d.ts#L21

onChange?(contentState: RawDraftContentState): void;

Also this one looks wrong onContentStateChange.

@imechZhangLY

[marchaos]

@jpuri agreed. Currently you cannot use this without a @ts-ignore.

[mohammedrafathz]

Types are now available here