support for @fortawesome/free-* library icons

[bjornharvold]

Clear and concise description of the problem

Thank you for a great editor. Superb! 🦸‍♂️

We are already using FontAwesome heavily by importing individual icons (e.g. faBell) into our apps with <fa-icon [icon]="faBell">. It keeps it manageable.

By having to doubly import the entire CSS library increases the size of our main bundle quite dramatically.

Suggested solution

Moving away from using the entire FontAwesome CSS library is the optimal way forward. Only import the icons your component needs.

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the HOWTO - Step by Step.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ghiscoding]

If you want to work on this then I would accept a Pull Request, I'm not going to work on this myself, I just don't have the time to spend on this anymore.

[bjornharvold]

That's fair @ghiscoding. I looked at the code to see how much effort it would be. It's not clear to me where the actual editor tool component on top of the text area exists. Where you configure the buttons as strings (e.g. fa fa-strikethrough) could also support IconDefinition from FontAwesome. If you could point me to the place where the buttons are defined in the code. Can't find md-header.

Cheers

[ghiscoding]

I think you can read the buttons from $.fn.markdown.defaults.buttons and then loop through all buttons and change their icon and finally reassign to your editor options

const defaultButtons = $.fn.markdown.defaults.buttons;

// loop through all buttons and change all necessary icons
const newButtons = ...

// reassign to your editor options
this.editorOptions = {
  iconLibrary: 'fa', // change this if other than fa (font-awesome) 
  buttons: newButtons

so you might be able to do this without having to modify the library at all

the buttons have the structure shown below, icon: { fa: 'fa fa-strikethrough' } where fa is the iconLibrary and its associated icon

angular-markdown-editor/src/lib/angular-markdown-editor/global-editor-options.ts

Lines 15 to 24 in 7707621

	additionalButtons: [
	[{
	name: 'groupFont',
	data: [{
	name: 'cmdStrikethrough',
	toggle: false,
	title: 'Strikethrough',
	icon: {
	fa: 'fa fa-strikethrough'
	},

and here's the link of where that is located in the bootstrap-markdown library, where the buttons are all defined:

https://github.com/refactory-id/bootstrap-markdown/blob/f3754636b7fb154a69a093ac0d06a1622720f6f1/js/bootstrap-markdown.js#L983-L995

[bjornharvold]

Yeah, I saw that.... but I don't know where this gets used. How / Where is the toolbar actually generated using this config?

[ghiscoding]

in the external library bootstrap-markdown, I gave you all the links already. You should just try the code.

I guess that it would still be preferable to remove font-awesome from my list of dependencies as well

angular-markdown-editor/package.json

Lines 39 to 42 in 7707621

	"dependencies": {
	"bootstrap": ">=4.6.2",
	"bootstrap-markdown": "refactory-id/bootstrap-markdown",
	"font-awesome": "^4.7.0",