feat: Native emoji w/ image-based fallbacks and improved parsing

[jhildenbiddle]

Summary

Add native emoji support and fix docsify core's built-in emoji parser. See related issues below for details.

1. Fix multiple issues related to Docsify's built-in emoji parser
2. Resolve confusion about the need for a separate emoji plugin
3. Add option to render emoji :shorthand: codes using platform-native emoji characters or images
4. Automate the process of updating the emoji data uses to render emoji :shorthand: codes
5. Add tests for the built-in emoji parser

What kind of change does this PR introduce?

• Feature: Add native emoji support
• Feature: Add nativeEmoji configuration option (true = native, false = image-based)
• Feature: Merge emoji plugin data and shorthand verification for better parsing into core
• Feature: Add deprecation notice to emoji plugin (no longer used internally by docsify)
• Fix: Incorrect parsing of unmatched emoji shorthand codes w/o separate emoji plugin
• Fix: Incorrect parsing of emoji shorthand code in HTML comments
• Fix: Incorrect parsing of emoji shorthand code in <script> tags
• Docs: Add nativeEmoji configuration option details
• Docs: Add deprecation notice and explanation for emoji plugin
• Docs: Remove link to discussion of __colon__ (confusing and no longer necessary).
• Docs: Add recommendation to use the : HTML entity to render emoji shortcakes as text
• Build: Add emoji-related tests
• Build: Auto-generate emoji data from GitHub API
• Build: Update codesandbox configurations to use same version of node
• Build/Docs: Auto-generate emoji markdown for website
• Other: Visually test on major platforms to verify proper rendering of emoji

To update emoji data (emojify-data.js) and markdown demo on website (emoji.md):

npm run build:emoji

---

Screenshots - Native vs. Image Emoji

Markdown:

:smile:
:poop:
:100:
:+1:
:1st_place_medal:
:fire:

Image Emoji (nativeEmoji:false)

HTML:

<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f604.png?v8.png" alt="smile" class="emoji" loading="lazy">
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4a9.png?v8.png" alt="poop" class="emoji" loading="lazy">
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8.png" alt="100" class="emoji" loading="lazy">
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8.png" alt="+1" class="emoji" loading="lazy">
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8.png" alt="1st_place_medal" class="emoji" loading="lazy">
<img src="https://github.githubassets.com/images/icons/emoji/unicode/1f525.png?v8.png" alt="fire" class="emoji" loading="lazy">

Native Emoji (nativeEmoji:true, macOS emojis shown)

HTML:

<span class="emoji">😄︎</span>
<span class="emoji">💩︎</span>
<span class="emoji">💯︎</span>
<span class="emoji">👍︎</span>
<span class="emoji">🥇︎</span>
<span class="emoji">🔥︎</span>

Screenshots - Emoji Parsing

Markdown:

hh:mm

hh:mm:

hh:mm:ss

:mm:s

Namespace::SubNameSpace

Namespace::SubNameSpace::Class

2014-12-29T16:11:20+00:00

2020-12-03T15:05:57+00:00 (extended)

2020-12-03T15:05:57Z (extended)

:01:

Before:

After:

HTML Comments

Markdown:

<!-- :smile: -->

Output before:

<!-- <img class="emoji" src="https://github.githubassets.com/images/icons/emoji/smile.png" alt="smile"> -->

Output after:

<!-- :smile: -->

Script Tags

Markdown:

<script>
  var test = ':smile:';
</script>

Output before:

<script>
  var test = '<img class="emoji" src="https://github.githubassets.com/images/icons/emoji/smile.png" alt="smile">';
</script>

Output after:

<script>
  var test = ':smile:';
</script>

Screenshot - Auto-Generated "Emoji"page

For any code change,

• Related documentation has been updated if needed
• Related tests have been updated or tests have been added

Does this PR introduce a breaking change? (check one)

• Yes
• No

• Emoji are rendered as they are today by default (using images via GitHub's CDN)
• Improved emoji parsing comes by integrating the emoji data and shorthand verification logic used in the Docsify's emoji plugin. The core parsing functionality is the same with this change as it is for sites using the emoji plugin. The only enhancements are preventing emoji parsing within HTML comments and <script> tags.
• Deprecating the emoji plugin has the added benefit of removing confusion surrounding the emoji plugin and its purpose. Since Docsify supports some-but-not-all emoji without the plugin, it was difficult for users to determine if they needed to use it.
• For native emoji, users can opt-in using nativeEmoji:true (currently false by default). When the next major release is ready, maintainers can determine if native emoji should be set as the default option.

Related issue, if any:

#779

Also:

Fix #742
Fix #829
Fix #853
Fix #1009
Fix #1721
Fix #1726

... and probably others. Emoji parsing has been an issue for various reasons and for quite some time.

Tested in the following browsers:

• Android (Chrome)
• iOS (Safari)
• Linux (Chrome, Firefox)
• macOS (Chrome, Firefox, Safari)
• Windows (Chrome, Edge, Firefox)

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/docsify-core/docsify-preview/3DpMm1yrTYQsfrZXKEnWoJo9Gz7g
✅ Preview: https://docsify-preview-git-feat-native-emoji-docsify-core.vercel.app

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit af45845:

Sandbox	Source
docsify-template	Configuration

[jhildenbiddle]

Alright, @docsifyjs/reviewers & @ChoKaPeek. This is ready for review. The outstanding issues have been addressed:

1. The codesandbox CI error is fixed
2. The emoji parser now only matches lowercase shortcodes (see reply to @ChoKaPeek & @Koooooo-7 above)
3. The emoji plugin docs have an updated descriptions and deprecation warning
4. The emoji plugin code has been restored. The plugin won't do anything if loaded along with these changes, but it is fully functional for older versions of docsify. This means an older version of docsify (< 4.13) could load these changesand enjoy updated emoji shortcode support. The end result is that the plugin is not needed but harmless if loaded with docsify v4.13+

[Koooooo-7]

LGTM. 👍

[jhildenbiddle]

Thanks for the reviews, @Koooooo-7 and @sy-records!