-
-
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> |
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.
@philippkuehn I remove the extra
contenteditablein 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.