Custom toolbar icon in non-custom MenuComponent (ngx-editor-menu)

[floAtEbcont]

How can I use the default menu component MenuComponent (ngx-editor-menu), but still provide custom buttons?

The type of [toolbar] would suggest, I should be able to pass ToolbarCustomMenuItem callbacks too, but these are never called.
Searching through the GitHub Source, I actually cannot find any other reference to ToolbarCustomMenuItem than the declaration - has this maybe not been implemented yet or am I missing something?

I want to add custom icons in between the default ones.
I am aware that I could use [toolbar]="[]" and then add all icons through [customMenuRef], but that is tricky as ngx-editor doesn't include the required symbols in its public api (e.g. ToggleCommandComponent cannot be used externally)

[sibiraj-s]

Docs can be found here https://sibiraj-s.github.io/ngx-editor/en/menu/#custom-menu and

A working example can be found here https://sibiraj-s.github.io/ngx-editor/en/examples/codemirror/.

Can you refer this example and try once?

I want to add custom icons in between the default ones.

it is not possible to add between the existing menu items, can be added only at the end.

[floAtEbcont]

Thanks for your reply!

Yeah, I've seen the docs, thanks :)

it is not possible to add between the existing menu items, can be added only at the end.

Ah i see, so I'll need to build the complete menu custom.
I just thought this could somehow be achieved by passing a ToolbarCustomMenuItem to [toolbar]. (Its not in the docs, but the type definitions suggested this should be possible 🤔 )

Can you refer this example and try once?

Sure: https://stackblitz.com/edit/ngx-editor-codemirror-wcugxj?file=src%2Fmain.ts

<- getHelloWorldToolbarIcon seems to match your interface (the code compiles), but the inner function is never called and so no custom button is created.

[sibiraj-s]

Yeah. Its a nice to have though. Will see what can be done here.

[floAtEbcont]

Thank you! But don't do it, if it's just for me :) I've managed to work around it in the mean time (by changing the requirements 😅 )

And, if you want my opinion on how to add the possibility for custom toolbar icons within default ones: I'd remove ToolbarCustomMenuItem from the interface alltogether (to avoid confusion), but therefore expose an additional EditorToolbarButtonComponent that wraps the *ngIf logic that you currently have in projects/ngx-editor/src/lib/modules/menu/menu.component.html.

Then in the app html you could put something like this:

<ngx-editor-menu [editor]="editor" [toolbar]="[]" [customMenuRef]="editorToolbarTemplate"></ngx-editor-menu>

<ng-template #editorToolbarTemplate>
        <ngx-editor-toolbar-button name="bold" [editor]="editor"></ngx-editor-toolbar-button>
        <ngx-editor-toolbar-button name="italic" [editor]="editor"></ngx-editor-toolbar-button>
        <ngx-editor-toolbar-button name="underline" [editor]="editor"></ngx-editor-toolbar-button>
        <div class="NgxEditor__Seperator"></div>

        <!-- Custom icon: -->
        <app-my-custom-toolbar-button [editor]="editor"></app-my-custom-toolbar-button>

        <div class="NgxEditor__Seperator"></div>
        <ngx-editor-toolbar-button name="bullet_list" [editor]="editor"></ngx-editor-toolbar-button>
        <ngx-editor-toolbar-button name="ordered_list" [editor]="editor"></ngx-editor-toolbar-button>
</ng-template>