Typescript typings

[anamanaguchi]

Hello, do you have any typescript support for this plugin?

PS. this plugin saved my life! Thanks! ;)

[benbriggs]

i don't currently - i've played around with adding flow annotations since draft-js uses flow. our internal stack doesn't include either currently but from what i understand we're most likely going to integrate typescript in the future, so i'd imagine that would propagate out to this library as well.

[sbusch]

Here's a TypeScript definition at least for convertToHTML, works for me:

Requires @types/draft-js from DefinitelyTyped project (see https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/draft-js for type defs)

Put in file draft-convert.d.ts:

declare module 'draft-convert' {
  import {
    ContentBlock,
    ContentState,
    DraftEntityMutability,
    DraftInlineStyleType,
    EntityInstance,
  } from 'draft-js';

  import { ReactElement, ReactNode } from 'react';

  interface ConvertToHTMLConfig {
    // Inline styles:
    styleToHTML?: <T extends DraftInlineStyleType>(style: T) => Tag | void;

    // Block styles:
    blockToHTML?: (block: ContentBlock) => Tag;

    // Entity styling:
    entityToHTML?: (
      entity: EntityInstance,
      originalText: string
    ) => Tag;
  }

  type ContentStateConverter = (contentState: ContentState) => string;

  type Tag =
    | ReactNode
    | { start: string; end: string; empty?: string }
    | { element: ReactNode; empty?: ReactNode };

  function convertToHTML(config: ConvertToHTMLConfig): ContentStateConverter;
}

[avaleriani]

based on @sbusch comment I created the package on DefinitelyTyped

Now you can have typings installing npm install @types/draft-convert

[kamenminkovcom]

There are some wrong and confusing things about the examples and the types. According to the types htmlToStyle is (nodeName: string, node: Node) => DraftInlineStyle and the example above says: htmlToStyle: (nodeName, node, currentStyle) => { if (nodeName === 'span' && node.style.color === 'blue') { return currentStyle.add('BLUE'); } else { return currentStyle; } }. Which interface is correct?

[seleckis]

@kamenminkovcom seems @types/draft-convert has wrong typing. currentStyle argument is missing there.

[sayjeyhi]

@seleckis what did you did about that problem

[seleckis]

@sayjeyhi like this:

// There is a mistake in draft-convert typing, which does not allow to define typing for currentStyle properly
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export type HTMLToStyle = (nodeName: string, node: HTMLElement, currentStyle: any) => DraftInlineStyleType;
export const htmlToStyle: HTMLToStyle = (nodeName, node, currentStyle) => {
 // ... do something with style
  return currentStyle;
};