-
-
Save ocavue/8d4139c40096cfa08780dc6d18f30e1c to your computer and use it in GitHub Desktop.
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>example</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <style type="text/css"> | |
| .editor-a { | |
| color: blue; | |
| } | |
| .editor-b { | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="editor-a" contenteditable="true"> | |
| <h1>This works on both iOS and macOS Safari</h1> | |
| <div>div element.</div> | |
| <div>div element.</div> | |
| <div>div element.</div> | |
| </div> | |
| <div class="editor-b" contenteditable="true"> | |
| <h1>This won't work on iOS Safari</h1> | |
| <p>paragraph element.</p> | |
| <p>paragraph element.</p> | |
| <p>paragraph element.</p> | |
| </div> | |
| </body> | |
| </html> |
Is the working version for iOS due to the lack of nested contenteditable or the div tags instead of p?
@philippkuehn I remove the extra contenteditable in the HTML file and this issue still exists. I updated the HTML code in the origin gist and also recorded new videos using the latest iOS/macOS version.
Thanks for the update. Looks like the issue is div vs p which is unfortunate.
Amusingly, you accidentally tagged the wrong Philip, but @philippkuehn is who I wanted to bring this to as it's an issue in the TipTap editor he works on. Looks like Slate had (has?) a similar issue.
you accidentally tagged the wrong Philip
Oh no. I'm so sorry.
bring this to as it's an issue in the TipTap
This is not a ProseMirror/TipTap/Remirror issue. It's a (iOS) Safari issue.
We could (re-)implement this behavior on the ProseMirror editor side by using prosemirror-inputrules (similar to slate-auto-replace, which is mentioned in the issue link you posted), but it's complex to get it right. For example, different languages have different "period". I don't think this's a good idea.
Yeah, "fixing" it anywhere would be a workaround for the Safari issue. Definitely very complicated so hopefully it's something that gets fixed at the root. Thanks for the link to the ProseMirror plugin.
Reproduce steps
index.html. You can find the source code ofindex.htmlat this link.paragraph element..Expected behavior
Double-pressing spaces to period works in both blue and red area.
Actual behavior
Mobile Safari only works in the blue area. Desktop Safari works on both two areas.
Particularly, on iOS, the first and second paragraph doesn't work, but the third (last) paragraph works well.
The following two videos show the behavior on iOS and on macOS.
ios-16.1.1.MP4
macos-12.6.mp4
Version