Doesn't work with iOS emojis #98
Comments
Closed
Closed
|
Fixed in 2.2.1 |
|
@peterhry that handles some emojis, but doesn't handle all. I found a package called
import GraphemeSplitter from 'grapheme-splitter';
const splitter = new GraphemeSplitter();
/**
* Splits the text of the provided element into its individual chars, wrapping
* each with an instance of the provided wrapper element.
*
* @param {Node} node The node whose `innerText` will be split.
* @param {string} [wrapper='span'] The name of the element to wrap each char.
*
* @return {Element[]} The wrapped split chars.
*/
export default (node, wrapper = 'span') => {
const wrapperElement = document.createElement(wrapper);
const trimmedText = node.innerText.trim();
return splitter.splitGraphemes(trimmedText).map(char => {
const parent = wrapperElement.cloneNode();
parent.insertAdjacentHTML('afterbegin', char === ' ' ? ' ' : char);
return parent;
});
}; |
|
Thanks @brunolm. Can you give some examples of emojis that are not splitting correctly? I’d like to fix this but I have some concerns about introducing a dependency like GraphemeSplitter. This would increase the bundle size significantly. Perhaps a solution would be to expose a hook that allows CircleType consumers to provide a custom split function. Thoughts? |
|
Yeah, that makes sense @peterhry , and I like a lot your idea to allow providing a custom split function, that would totally solve issues with these emojis. If you open this page https://emojipedia.org/people/ var emojis = document.querySelectorAll('.emoji');
var result = [];
for (const emoji of emojis) {
const val = emoji.innerText;
const spl = [...val];
if (spl.length > 1)
result.push(`"${val}" = [${spl.map(c => `"${c}"`)}]`);
}
console.log(result.join('\n'));You're going to get examples of problematic emojis: |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This line
CircleType/src/utils/splitNode.js
Line 13 in ffebbcc
wrongly splits emojis in iOS webview, if you change to
it will work with iOS emojis
The text was updated successfully, but these errors were encountered: