Skip to content

Instantly share code, notes, and snippets.

@ocavue
Last active November 28, 2022 09:24
Show Gist options
  • Save ocavue/8d4139c40096cfa08780dc6d18f30e1c to your computer and use it in GitHub Desktop.
Save ocavue/8d4139c40096cfa08780dc6d18f30e1c to your computer and use it in GitHub Desktop.
This gist shows a bug on iOS Safari, that sometime double pressing spaces in a `contenteditable` element won't insert a period.
<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>
@philiprenich
Copy link

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.

@ocavue
Copy link
Author

ocavue commented Oct 25, 2022

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.

@philiprenich
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment