Open salzpate opened 3 years ago
@salzpate I think what I understand is a typescript issue, can you explain a screenshot or something in more detail?
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">
Im having this problem on the class itself await new toastui.Editor({
im getting the Property Editor Does not exist on type 'Typeof Editor'
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();
`