Issues with typings

[salzpate]

Describe the bug

I wanted to write a plug-in in TypeScript that would display help text via a pop-up window. I use version 2.5.1 for this. The popup should appear below the button.

In the typings I did not find a way to get to the EventManager via the editor. The following line throws me an error:

const eventManager = toastUiEditor.eventManager as toastui.EventManager;

Next I wanted to give the toolbar button a name, which also led to an error:

toolbar.addItem({ type: 'button', options: {..., name: 'help'}});

When creating the popup, I just wanted to set the content, but it is mandatory:

toastUiEditor.getUI().createPopup({/* el: */ content: helpContainer});

To Reproduce

A part of my function to create the popup:

`

export default function helpPlugin(editor: toastui.Editor | toastui.Viewer): void { if (!editor.isViewer()) { const toastUiEditor = editor as toastui.Editor; const toolbar = toastUiEditor.getUI().getToolbar();

const eventManager = toastUiEditor.eventManager as toastui.EventManager;

toolbar.addItem({
  type: 'button',
  options: {
    el: createTooltipButton(),
    name: 'help',
    event: 'helpContent',
    tooltip: 'Help',
  },
});

const popup = toastUiEditor.getUI().createPopup({
  content: helpContainer,
  title: 'Help',
  modal: false,
  header: true,
  target: toolbar.el,
});

`

[seonim-ryu]

@salzpate I think what I understand is a typescript issue, can you explain a screenshot or something in more detail?

[salzpate]

Exactly, this is a TypeScript error. The popup window works in the browser, but I get TypeScript compile errors.

The entire source code:

`const createTooltipButton = (): HTMLElement => { const icon = document.createElement('i'); icon.setAttribute('aria-hidden', 'true'); icon.classList.add('help'); icon.classList.add('circle'); icon.classList.add('icon');

const button = document.createElement('button'); button.setAttribute('type', 'button'); button.className = 'tui-custom-button tui-custom-help-button'; button.appendChild(icon);

return button; };

/**

• Plugin for displaying help */ export default function helpPlugin(editor: toastui.Editor | toastui.Viewer): void { if (!editor.isViewer()) { const toastUiEditor = editor as toastui.Editor; const toolbar = toastUiEditor.getUI().getToolbar();

  const helpContainer = document.createElement('div'); helpContainer.innerHTML = 'Text';

  const eventManager = toastUiEditor.eventManager as toastui.EventManager; eventManager.addEventType('helpContent');

  toolbar.addItem({ type: 'button', options: { el: createTooltipButton(), name: 'help', event: 'helpContent', tooltip: 'Help', }, }); const helpButton = toolbar.getItems().filter((e) => e.getName() === 'help')[0];

  const popup = toastUiEditor.getUI().createPopup({ content: helpContainer, title: 'Help', modal: false, header: true, target: toolbar.el, }); popup.el.classList.add('tui-popup-help-editor');

  eventManager.listen('focus', () => { popup.hide(); });

  eventManager.listen('helpContent', () => { if (popup.isShow()) { popup.hide();

  return;

  }

  const { offsetTop, offsetHeight } = toolbar.el; const { offsetLeft } = helpButton.el; const popupOffsetTop = offsetTop + offsetHeight; popup.el.setAttribute('style', top: ${popupOffsetTop}px; left: ${offsetLeft}px;);

  eventManager.emit('closeAllPopup'); popup.show(); });

  eventManager.listen('closeAllPopup', () => { popup.hide(); });

  eventManager.listen('removeEditor', () => { popup.remove(); }); } } `

And the Error Message:

`npx tsc src/component/editor/EditorHelpPlugin.tsx:72:40 - error TS2339: Property 'eventManager' does not exist on type 'Editor'.

72 const eventManager = toastUiEditor.eventManager as toastui.EventManager;

src/component/editor/EditorHelpPlugin.tsx:79:9 - error TS2322: Type '{ el: HTMLElement; name: string; event: string; tooltip: string; }' is not assignable to type 'ButtonOptions'.
  Object literal may only specify known properties, and 'name' does not exist in type 'ButtonOptions'.

79         name: 'help',

src/component/editor/EditorHelpPlugin.tsx:86:53 - error TS2345: Argument of type '{ content: HTMLDivElement; title: string; modal: false; header: true; target: HTMLElement; }' is not assignable to parameter of type 'LayerPopupOptions'. Property 'el' is missing in type '{ content: HTMLDivElement; title: string; modal: false; header: true; target: HTMLElement; }' but required in type 'LayerPopupOptions'.

86 const popup = toastUiEditor.getUI().createPopup({ ~ 87 content: helpContainer,

... 
 91       target: toolbar.el,

92 });

  node_modules/@toast-ui/editor/index.d.ts:374:5
    374     el: HTMLElement;
            ~~
    'el' is declared here.

Found 3 errors.`

<img width="1085" alt="Error 2" src="https://user-images.githubusercontent.com/57270302/101596729-e9f74800-39f5-11eb-9afa-cee0c946c2b0.png">

[livevsonline]

Im having this problem on the class itself await new toastui.Editor({ im getting the Property Editor Does not exist on type 'Typeof Editor'