Add typescript definitions

[brielov]

[maykon-oliveira]

https://github.com/DefinitelyTyped/DefinitelyTyped/pull/51100

[SmallhillCZ]

@maykon-oliveira: 😢

Adding to EditorJS like this:

new EditorJS({
  ...
  tools: {
    header: Header,
  }
}

Causes following type error:

Type 'typeof Header' is not assignable to type 'ToolConstructable | ToolSettings<any>'.
  Type 'typeof Header' is not assignable to type 'BlockToolConstructable'.
    Types of property 'sanitize' are incompatible.
      Type '{ level: boolean; text: object; }' is not assignable to type 'SanitizerConfig'.
        Property 'text' is incompatible with index signature.
          Type 'object' is not assignable to type 'TagConfig | ((el: Element) => TagConfig)'.
            Type 'object' is not assignable to type '(el: Element) => TagConfig'.
              Type '{}' provides no match for the signature '(el: Element): TagConfig'.

[danieldaeschle]

any hint to solve this?

[SmallhillCZ]

Seems the definition of sanitize (1) is typed as {level: boolean, text: object} but according to EditorJS types it should be [key: string]: TagConfig | ((el: Element) => TagConfig);, where TagConfig is boolean | { [attr: string]: boolean | string } (2)

While level:boolean is OK, text:object is NOT OK, because object type is not allowed here, instead either boolean or { [attr: string]: boolean | string } is allowed. I know it seems like emtpy object should satisfy, but the object type is weird and not much recommended to use anyway.

So the solution would be to type sanitize as {level: boolean, text: { [attr: string]: boolean | string } } or {level: boolean, text: any } as text is not used in the code anyway.

I believe though, that the whole Header class should implement ToolConstructable (or better, BlockToolConstructable). Then you would also see those errors in IDE without trying to actually compile to use with EditorJS

(1) https://github.com/maykon-oliveira/DefinitelyTyped/blob/e65fa0cfba7e99fbe7c18cd933477faf78c2cd0e/types/editorjs__header/index.d.ts#L39

(2) https://github.com/codex-team/editor.js/blob/51d94e1a1103dcf15cf91d8bb9f2596a4c8883e4/types/configs/sanitizer-config.d.ts#L5

[mbolli]

I get the same error as in https://github.com/editor-js/header/issues/23#issuecomment-812710580

I believe though, that the whole Header class should implement ToolConstructable (or better, BlockToolConstructable). Then you would also see those errors in IDE without trying to actually compile to use with EditorJS

I think this would be the only and proper solution, right @talyguryn ? Or better yet, implement this tool in TypeScript...

[TheAvocadoProtocol]

Hi guys! I have the same problem with my project. Is there anyone making a port to TS? or may I create a new PR converting this module to TS?

[berkaygurbuz]

@maykon-oliveira: 😢

Adding to EditorJS like this:

new EditorJS({
  ...
  tools: {
    header: Header,
  }
}

Causes following type error:

Type 'typeof Header' is not assignable to type 'ToolConstructable | ToolSettings<any>'.
  Type 'typeof Header' is not assignable to type 'BlockToolConstructable'.
    Types of property 'sanitize' are incompatible.
      Type '{ level: boolean; text: object; }' is not assignable to type 'SanitizerConfig'.
        Property 'text' is incompatible with index signature.
          Type 'object' is not assignable to type 'TagConfig | ((el: Element) => TagConfig)'.
            Type 'object' is not assignable to type '(el: Element) => TagConfig'.
              Type '{}' provides no match for the signature '(el: Element): TagConfig'.

What happened I want to use inline tools or others feature ? When I tried to use inline tools or other it gives the same error

          header: {
            class: Header,
            inlineToolbar: true,
            config: {
              defaultLevel: 1,
              levels: [1, 2, 3],
            },
          },

[anthonyjacquelin]

Same error here...

[blade-runner]

this worked for me

import { ToolConstructable } from '@editorjs/editorjs';
...
header: {
   class: Header as unknown as ToolConstructable,
   config: {
      defaultLevel: 3,
      levels: [3, 4],
   },
},

[ddy-ddy]

same error.

[sawadyecma]

same error

[siddharthgopakumar]

same error

[dev-sumanaditya]

// @ts-ignore import Header from "@editorjs/header"