samclarke
Android, Chrome, line break does not move cursor to new line
Android 9 chrome 88.0.4324.93 with gboard Android 10 chrome 87.0.4280.101 with gboard
If iframe contains
<p>
<font color="#1e92f7">some text</font>
</p>
or
<p>
<b>some text</b>
</p>
line break (enter) not move cursor to new line.
Demo from https://issuetracker.google.com/issues/177757645: https://drive.google.com/file/d/15sVf_TrDo1WRAU1fFrR8YnuTVUbSAjFU/view
If <p> replace to <div> - cursor move, its ok.
This is not an editor problem, this is a chrome problem. But it needs to be solved somehow.
Why this is a chrome problem...
Run next code on android device with gboard. Place cursor at end of line and touch 'enter'.
<style>
.container {
height: 250px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
</style>
<div class="container">
<iframe id="ifrm" frameborder="1"></iframe>
</div>
<script type="text/template" id="iframeContent">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inner</title>
</head>
<body contenteditable="true">
<p><font color="#7fdbff">Yhhhhjh</font></p>
</body>
</html>
</script>
<script>
var iframe = document.getElementById( 'ifrm' );
var content = document.getElementById("iframeContent").innerHTML;
var frameDoc = iframe.document;
if (iframe.contentWindow)
frameDoc = iframe.contentWindow.document;
frameDoc.open();
frameDoc.writeln(content);
frameDoc.close();
</script>
I found next links: https://github.com/quilljs/quill/issues/3240 https://issuetracker.google.com/issues/177757645 (issue from quill developer)
I can replace <p> with <div> but i not shure that it not break something. Also, I'm not sure that I can guarantee that <p> wont never be inserted in iframe content.
This is an annoying problem. How can I solve it?
Thanks for reporting, that is a very annoying bug.
I can replace
<p>with<div>but i not shure that it not break something. Also, I'm not sure that I can guarantee that<p>wont never be inserted in iframe content.
That shouldn't break anything. You would need to modify the editor, to replace all <p> tags as it auto inserts some <p> tags if there aren't any in the body and also to add a newline after a block element.
Thanks for your reply!
I created the list of places, where <p> should be replace with<div> in jquery.sceditor.bbcode.js, version 3.0.0:
- var _templates = { .. html: 1748
- base.insertHTML 3160
- base.selectedHtml 3359
- function wrapInlines 3989
- autofocus = function () { 4916
- base.setWysiwygEditorValue 5985
- appendNewLine = function () { 6447
- base.clearBlockFormatting 7267
This list is correct?