feat: add icons support in notes

[nebspacefarer]

This PR aims to add support for icons inside Notes content.
Follows up with #148 feature request.

Two main elements have been added:

main.ts - Markdown processor for icon shortcodes in notes with no performance impact

• Registering a MarkdownPostProcessor according to Obsidian API implementation.
• Allows to post process icons shortcodes like :RiHeartsFill: when they are found in Notes.
• Icons in Headers are dynamically attributed a fitting width and height.
• Code is making sure data-header param is not affected by the shortcodes post process.
• Codeblocks are ignored during post process.
• Colors (for example added with Editing Toolbar plugin) are supported thanks to the fill:"currentColor" in the svg tag.
• Processing in itself works by replacing shortcodes with the icon svgElement found with icon.getIconByName().
• Tested with 100 different icons on a note and no performance impact was seen in execution time when switching mode (1ms).

iconSuggestion.ts - EditorSuggest for icons autocompletion

• Isolating icons shortcode that have begun behind the cursor.
• Offering autocompletion as the user types, with an EditorSuggest and an elegant list of the SVG icon and their full name.
• Populating aucompletion list dynamically with getAllLoadedIconNames() from iconPackManager.ts.
• Selection triggers a replacement of the query into the full icon name with prefix.
• Suggestion can be ignored and user can keep typing.

All modifications are mobile proof and works on mobile and tablet devices.

Let me know if you have any question or idea to improve!

[FlorianWoelki]

Code looks good! Well done 🚀

I've just got some clarification questions:

1. I think it does not work with emojis right? Would you like to implement them as well? If not, I can do that.
2. It seems like the icons are not rendered in live preview. Is it somehow possible to render them directly?

[nebspacefarer]

Code looks good! Well done 🚀

I've just got some clarification questions:

1. I think it does not work with emojis right? Would you like to implement them as well? If not, I can do that.

2. It seems like the icons are not rendered in live preview. Is it somehow possible to render them directly?

Thanks!

1. I can tinker a bit more to add emojis support, I'm just concerned about the fact flags (and others) have already a : character in their short names inside the shortNames Record. Would you consider replacing/removing it directly in the record, or would you prefer their short names to be parsed programmatically to fit the shortcode syntax? I just want to double check with you changing it directly in the record wouldn't break anything.
2. Rendering emojis in Live Preview should be pretty straightforward as unicodes. From my research rendering icons in Live Preview will require an entire CodeMirror extension as a View Plugin. I am unfamiliar with this, but it is well documented within Obisidian Dev Docs. Would you feel like it's a necessary implementation to begin with?

[FlorianWoelki]

Code looks good! Well done 🚀
I've just got some clarification questions:

1. I think it does not work with emojis right? Would you like to implement them as well? If not, I can do that.

2. It seems like the icons are not rendered in live preview. Is it somehow possible to render them directly?

Thanks!

1. I can tinker a bit more to add emojis support, I'm just concerned about the fact flags (and others) have already a : character in their short names inside the shortNames Record. Would you consider replacing/removing it directly in the record, or would you prefer their short names to be parsed programmatically to fit the shortcode syntax? I just want to double check with you changing it directly in the record wouldn't break anything.
2. Rendering emojis in Live Preview should be pretty straightforward as unicodes. From my research rendering icons in Live Preview will require an entire CodeMirror extension as a View Plugin. I am unfamiliar with this, but it is well documented within Obisidian Dev Docs. Would you feel like it's a necessary implementation to begin with?

1. I think having one solution with the shortcode syntax would make a lot of sense. Replacing the : directly in the record would mean more work and a migration. So I think parsing them programmatically is fine for now.
2. Yeah agree with that. We can probably add this in the next update :D

[nebspacefarer]

Here is what I did in my last push:

• Added a function getShortcode() in emoji.ts to parse the shortNames key in shortcode format (used a few times).
• Added emojis to the EditorSuggest Suggestions below icons (maybe we could add an option in the settings to choose order?)
• Shortened the iconsSugggestion.selectSuggestion() by using editor.replaceRange(), it also fixes a bug where the cursor was coming back to the start of the line when completing an icon or emoji.
• Emojis are replaced by their unicode as soon as an suggestion is selected in the EditorSuggest, making them visible in their final form in every view, including Read, Live Preview and Edit mode.

Emojis have to be searched during Suggestion in this format :emoji_long_name: where shortNames whitespaces are replaced by underscores and colons : are removed.
This parsing allows to have a more readable format as well as something compatible with shortcodes convention.

I took the stand of not parsing complete emojis shortcodes in the Markdown Post Processor as I believe emojis use case will be to autocomplete them entirely with the EditorSuggestor, that way they will be replaced in every view as their unicodes counterpart.
Later, this should probably be added into the CodeMirror View Plugin that will be integrated in the plugin (for Live Preview processing of icons and emojis).

[FlorianWoelki]

Here is what I did in my last push:

• Added a function getShortcode() in emoji.ts to parse the shortNames key in shortcode format (used a few times).
• Added emojis to the EditorSuggest Suggestions below icons (maybe we could add an option in the settings to choose order?)
• Shortened the iconsSugggestion.selectSuggestion() by using editor.replaceRange(), it also fixes a bug where the cursor was coming back to the start of the line when completing an icon or emoji.
• Emojis are replaced by their unicode as soon as an suggestion is selected in the EditorSuggest, making them visible in their final form in every view, including Read, Live Preview and Edit mode.

Emojis have to be searched during Suggestion in this format :emoji_long_name: where shortNames whitespaces are replaced by underscores and colons : are removed. This parsing allows to have a more readable format as well as something compatible with shortcodes convention.

I took the stand of not parsing complete emojis shortcodes in the Markdown Post Processor as I believe emojis use case will be to autocomplete them entirely with the EditorSuggestor, that way they will be replaced in every view as their unicodes counterpart. Later, this should probably be added into the CodeMirror View Plugin that will be integrated in the plugin (for Live Preview processing of icons and emojis).

I think suggesting emojis below icons is fine. Looks good to me, I'll merge this PR now. I am still adjusting some minor things when the PR is merged.

Thank you for the work!