Fix Safari emoji contenteditable
This commit is contained in:
parent
d092c64759
commit
419d3c73fa
@ -1,4 +1,4 @@
|
|||||||
import { getRichValue, isInputEmpty } from "../helpers/dom";
|
import { getRichValue } from "../helpers/dom";
|
||||||
import { checkRTL } from "../helpers/string";
|
import { checkRTL } from "../helpers/string";
|
||||||
import RichTextProcessor from "../lib/richtextprocessor";
|
import RichTextProcessor from "../lib/richtextprocessor";
|
||||||
|
|
||||||
@ -18,6 +18,9 @@ let init = () => {
|
|||||||
let entities = RichTextProcessor.parseEntities(text);
|
let entities = RichTextProcessor.parseEntities(text);
|
||||||
//console.log('messageInput paste', text, entities);
|
//console.log('messageInput paste', text, entities);
|
||||||
entities = entities.filter(e => e._ == 'messageEntityEmoji' || e._ == 'messageEntityLinebreak');
|
entities = entities.filter(e => e._ == 'messageEntityEmoji' || e._ == 'messageEntityLinebreak');
|
||||||
|
if(RichTextProcessor.emojiSupported) { // * fix safari emoji
|
||||||
|
entities = entities.filter(e => e._ != 'messageEntityEmoji');
|
||||||
|
}
|
||||||
//text = RichTextProcessor.wrapEmojiText(text);
|
//text = RichTextProcessor.wrapEmojiText(text);
|
||||||
text = RichTextProcessor.wrapRichText(text, {entities, noLinks: true});
|
text = RichTextProcessor.wrapRichText(text, {entities, noLinks: true});
|
||||||
|
|
||||||
@ -63,15 +66,18 @@ const InputField = (options: {
|
|||||||
|
|
||||||
const input = div.firstElementChild as HTMLElement;
|
const input = div.firstElementChild as HTMLElement;
|
||||||
const observer = new MutationObserver((mutationsList, observer) => {
|
const observer = new MutationObserver((mutationsList, observer) => {
|
||||||
const isEmpty = isInputEmpty(input);
|
//const isEmpty = isInputEmpty(input);
|
||||||
//console.log('input', isEmpty);
|
//console.log('input', isEmpty);
|
||||||
|
|
||||||
|
//const char = [...getRichValue(input)][0];
|
||||||
const char = input.innerText[0];
|
const char = input.innerText[0];
|
||||||
let direction = 'ltr';
|
let direction = 'ltr';
|
||||||
if(char && checkRTL(char)) {
|
if(char && checkRTL(char)) {
|
||||||
direction = 'rtl';
|
direction = 'rtl';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//console.log('RTL', direction, char);
|
||||||
|
|
||||||
input.style.direction = direction;
|
input.style.direction = direction;
|
||||||
|
|
||||||
if(processInput) {
|
if(processInput) {
|
||||||
|
@ -84,3 +84,5 @@ export const checkRTL = (s: string) => {
|
|||||||
|
|
||||||
return rtlDirCheck.test(s);
|
return rtlDirCheck.test(s);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//(window as any).checkRTL = checkRTL;
|
||||||
|
@ -519,8 +519,8 @@ namespace RichTextProcessor {
|
|||||||
break;
|
break;
|
||||||
|
|
||||||
case 'messageEntityEmoji':
|
case 'messageEntityEmoji':
|
||||||
html.push(emojiSupported ? // ! contenteditable="false" нужен для поля ввода, иначе там будет меняться шрифт в Safari
|
html.push(emojiSupported ? // ! contenteditable="false" нужен для поля ввода, иначе там будет меняться шрифт в Safari, или же рендерить смайлик напрямую, без контейнера
|
||||||
`<span contenteditable="false" class="emoji">${encodeEntities(entityText)}</span>` :
|
`<span class="emoji">${encodeEntities(entityText)}</span>` :
|
||||||
`<img src="assets/img/emoji/${entity.unicode}.png" alt="${encodeEntities(entityText)}" class="emoji">`);
|
`<img src="assets/img/emoji/${entity.unicode}.png" alt="${encodeEntities(entityText)}" class="emoji">`);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -723,8 +723,13 @@ namespace RichTextProcessor {
|
|||||||
export function wrapDraftText(text: string, options: Partial<{
|
export function wrapDraftText(text: string, options: Partial<{
|
||||||
entities: MessageEntity[]
|
entities: MessageEntity[]
|
||||||
}> = {}) {
|
}> = {}) {
|
||||||
|
let entities = options.entities.slice();
|
||||||
|
if(emojiSupported) { // * fix safari emoji
|
||||||
|
entities = entities.filter(e => e._ != 'messageEntityEmoji');
|
||||||
|
}
|
||||||
|
|
||||||
return wrapRichText(text, {
|
return wrapRichText(text, {
|
||||||
...options,
|
entities,
|
||||||
noLinks: true,
|
noLinks: true,
|
||||||
noEmphasis: true,
|
noEmphasis: true,
|
||||||
passEntities: {
|
passEntities: {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user