web-components
web-components copied to clipboard
Enter on Heading Text - Cursor Jump
Bug Report 🐛
The cursor would jump one line above when we would press enter from the beginning of any heading text
Expected Behavior
The cursor should go down with the heading text as it happens everywhere else
Steps to Reproduce
- Put the cursor to the beginning of any heading and press enter.
Desktop
- OS: Windows 10
- Browser: Chrome
- Version 88.0.4324.182 (Official Build) (64-bit)
@irmerk This problem is occurring because: When we press enter from the start of the heading word => it inserts a line above the heading line by default instead of below. This only happens when we insert from the start of the line. It works perfectly when we do it from the middle or the end of the heading word. The fix for this can be:
- Whenever
headingbreak
is called => the next line node it inserts down below would be converted into a paragraph. - This creates a new problem where if we press enter from the beginning of the heading word, the heading would be converted into a paragraph too.
- To fix that=> Override the default
insertbreak()
in theheadingbreak
function and tell it to do the above 1. only when it is at the end of the line. We create apoint
for the end of the heading line and make a conditional to check if theinsetbreak()
is being called from the stored end of the line point and execute 1 if that is true.
Is that an appropriate solution?
If I understand correctly, I think that sounds good. I think we want:
- ENTER at BEGINNING of node (where ↑ is) creates a new line of the same text:
<h1>Heading</h1>
↑
<p>Normal paragraph text.</p>
↑
Becomes this with the cursor (↑) positioned:
<h1></h1>
<h1>Heading</h1>
↑
<p></p>
<p>Normal paragraph text.</p>
↑
- ENTER at MIDDLE of node (where ↑ is) creates a new line of similar text, essentially splitting the node:
<h1>Heading</h1>
↑
<p>Normal paragraph text.</p>
↑
Becomes this with the cursor (↑) positioned:
<h1>Hea</h1>
<h1>ding</h1>
↑
<p>Norm</p>
<p>al paragraph text.</p>
↑
- ENTER at END of node (where ↑ is) creates a new line of normal paragraph text:
<h1>Heading</h1>
↑
<p>Normal paragraph text.</p>
↑
Becomes this with the cursor (↑) positioned:
<h1>Heading</h1>
<p></p>
↑
<p>Normal paragraph text.</p>
<p></p>
↑
@irmerk Yes, that is exactly how it needs to work. I can make a sample work but making a PR would not make sense until we fix this #270 issue.
@irmerk Can you please check the updates that I made in the description of #270. Any feedback would be really appreciated.
@irmerk I have fixed this issue locally. I can make a pull request after the #270 is resolved and merged.