Rich text editor deletes "tilde" on Firefox

[ChrisGV04]

Bug Report

For some reason, the rich text editor seems to get rid of characters that contain the a "tilde" when typing in Spanish but only in Firefox. For example, if I want to type "Filosofía" (philosophy in spanish) I need to type the letter i with a tilde "í", but when I type it, it replaces it with the next key I type, so in this example it would've typed "Filosofa".

I don't know if it's an issue with SlateJS, PayloadCMS, Firefox or even my computer since I have no idea on how to debug that. But it only happens on the PayloadCMS rich text editor in Firefox, because I also tried the official SlateJS examples using the same browser and It worked fine and if I use Chrome or Safari, it also works fine.

Here's a quick video of my screen showing the issue: (Ignore my frustrated typing force)

payload-rich-text-tilde-issue.mp4

Steps to Reproduce

In a simple Payload project, create a Global with at least one rich text field. In my case, I configured it as such:

{
    name: 'info',
    type: 'richText',
    label: 'Información',
    admin: { elements: ['h2'], leaves: [] },
  }

Then, run the project in dev mode and open the admin panel in Firefox. Try to type the word Filosofía inside the rich text field letter by letter, because if you just paste it in the issue doesn't happen.

Other Details

• Payload version: 1.5.9
• Firefox version: 108.0.2
• OS: MacOS Ventura 13.1

[denolfe]

Hey @ChrisGV04 , do you have a specific language configuration in your OS by chance? I tried recreating this, but I am unable to get accented characters to work in Payload or the browser via the method you've demonstrated. Could you provide more info?

[ChrisGV04]

@denolfe Hi!
I live in México, so my native language is Spanish. However, I have my Macbook set to English as the primary language and Spanish (México) as an entry in the preferred languages. My Firefox is set to the System language. My payload Admin UI is set to Spanish but the issue also happens with it set to English (It also happens to me on your public demo). The weirdest thing is I have only had this issue on the Payload rich text field within Firefox, and nowhere else (and I use Firefox as my main browser.)

Maybe you can test the accented characters using the MacOS Keyboard Viewer that's built in and set the language to Spanish (Latin America) and the character that I have an issue with is right next to the letter p. So you would type that "tilde" character first and then you type any vowel so that the tilde is applied to it. I tried it using that virtual keyboard and the issue still occurred.

[jacobsfletch]

@ChrisGV04 Thank you for all the details here! I went ahead and gave this a shot with my keyboard set to Latin American using FireFox, and it worked just fine for me. I opened Keyboard Viewer and took a screen-recording so you can see exactly what I'm doing, check it out:

Screen.Recording.2023-01-21.at.4.13.34.PM.mov

[ChrisGV04]

@jacobsfletch Hi!
Oh, I see... So that makes me think that it might be an issue with my computer or some setting I might have. 🤔

I will investigate it further on my end and let you know if I find the cause and a solution just in case someone else has the same issue. I will close this issue as resolved.

Thank you very much! Amazing work you're doing with Payload, I'm absolutely amazed.

[ChrisGV04]

I just tried everything again and now I found a way to make the whole Admin UI crash...

I found inside the Slate.js repo that some people have reported the same issue I have but for some it gets fixed and for others it doesn't. Then I tried to see what was happening with the Firefox HTML inspector and this is what happened:

payload-accent-crash.mp4

1. I opened the PayloadCMS demo, went into the first post and started editing the first rich text field I could find.
2. I typed filosofí (Didn't type the missing "a" at the end because it is the one that deletes the "í").
3. Then, I checked what got typed inside the HTML inspector. Everything seemed fine.
4. Finally, I typed the letter "a" just after "filosofí" and it suddenly crashed with the following error:

Error: Cannot resolve a DOM point from Slate point: {"path":[4,0],"offset":9}

I have no idea what could be happening and I don't understand why it only happens to some people.

[denolfe]

@ChrisGV04 Please open this in a separate issue as it seems like it is. This way we can track it separate from the original issue.

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.