ashrafomar → created an issue.
This turned out to be more complex than I initially thought. To implement this feature, I need to first change how emojis are added to the module. Instead of fetching emojis directly from an API, I'm considering using a Node package that provides emojis and supports most fonts. This approach will also allow us to override the default font. Once that's in place, we can revisit this feature. I'll update this issue once it’s completed.
I was able to add the ability to define a font family, but this introduced two issues:
1. Character Support:
Not all characters are supported by different font families. For example, some characters, like this emoji 👨❤️💋👨, are not displaying as expected when using certain font families, such as Noto from Google. In this case, the head and heart appear as two separate emojis. I’m not sure if the issue is related to current character codes or if we need to find a more standard character set that supports most of fonts. This will require further investigation.
2. Font Family for Emojis:
When adding emojis in the CKEditor textarea and displaying them on the frontend, the font family for the emoji needs to be explicitly defined. It seems that the emoji will need to be wrapped in a tag, with a class assigned, so that the proper font family can be applied both in the backend and frontend. I’ve been able to wrap the emoji in a span, but I still need to ensure the correct library is rendered so the proper font family is added.
While this feature adds flexibility, it also opens up additional challenges. the module now need to support multiple font families, and while there may be a standard character set, it’s something that will need careful consideration in terms of implementation. This is a crucial aspect that we'll need to address moving forward.
I have create a fork and commit what I have implemented so far, Once I know more then I will communicate the next steps.
I think the best approach would be to allow users to attach their own library, perhaps by adding a form setting with a field to define a CSS override URL. I'll need to do more research to determine the best solution, but I believe it's possible.
The Drupal 11 compatibility will be addressed in version 2.x.
After doing some research and running more tests, it seems there have been major updates to CKEditor 5 packages. This means Drupal's CKEditor 5 has been updated, and the old packages are no longer supported.
As a result:
- Any site using a version between Drupal 9.5.8 and 10.2.7 will need to use CKEditor emoji version 1.0.1.
- Any site using Drupal 10.3 and above will need to use CKEditor emoji version 2.0.1.
Please update to version 2 if you're running Drupal 10.3 core.
The issue has been fixed in 1.0.1, updating the module should fix the issue.
not on drupal.org, however, I planning to upload a new module I have been working which is mostly PHP then I will request to review for that module instead of this one. I'm not sure if I should close this issue as closed won't fix?
Thanks for the feedback.
ashrafomar → created an issue.
This has been merged into 1.0.x-dev.
Thanks for flagging this. The issue is that I tried to reuse the CSS from the creditors' special character plugin as much as possible. However, it seems that when the special character plugin is not activated, it breaks the grid layout. The grid relies on the special character plugin's CSS, which doesn't get added if the plugin is not activated, as the special character plugin is not required by this module.
To resolve the issue I have moved the necessary CSS into the emoji plugin itself. This ensures that the emoji plugin no longer depends on the special character plugin being activated.
Please update the module to this release and test.
https://www.drupal.org/project/ckeditor_emoji/releases/1.0.0-beta3 →
I'm glad it's working, pleasure!
That has been the plan already, the search feature is available on 1.0.0-beta2 and works great :), although I would love like to improve it by adding keywords to emojis and then searching by keywords instead of searching the title.
ashrafomar → made their first commit to this issue’s fork.
ashrafomar → created an issue.
Add patch and run drush updb or /update.php
ashrafomar → created an issue.
ashrafomar → created an issue.