search

peterpeterparker / stylo

Another kind of rich text editor
https://stylojs.com
MIT License
714 stars 28 forks source link

A few odd behaviors. #77

Open viraladmin opened 2 years ago

viraladmin commented 2 years ago

There are 2 behaviors I have found that are, less than ideal for the writer.

First is if one loads the page with focus on the editiblecontent div, the editor tools will not open when highlighting text with a mouse (actually no tools will open unless I also add the <div paragraph_id="" placeholder="Press &quot;/&quot; for plugins">​</div>) One MUST click someone on the editible content with a mouse before they can highlight with keyboard to open the edit tools modal. I have no idea if this has any effect on small displays but I would imagine not seeing as every touch of the screen would act as a click.

To reproducer on a PC merely load a page with the editible div in focus at page load document.querySelector('#whatever').focus(); document.querySelector('#whatever').innerHTML = '<div paragraph_id="" placeholder="Press &quot;/&quot; for plugins">​</div>'; then use your keyboard to highlight text without using your mouse at all.

Second is less obscure. Backspacing to delete a line, stops all tools for opening, the (+) does not appear, the "type / for...." does not appear, typing / does nothing, highlighting text does nothing with mouse or keyboard. To reproduce in a blank document using the editor, hit enter a bunch of times, then backspace one entire line to the line before and try to open tools. Its an odd behavior.

peterpeterparker commented 2 years ago

Thanks for the feedback but please do not provide two or more issues/feature requests within the same report.

Beside that, can you provide sample repo and/or screencast to reproduce the issues, not sure I get what you mean?

viraladmin commented 2 years ago

The second issue is super easy to reproduce. Go to https://stylojs.com/. Delete Everything in the editor 100%.

Press backspace a bunch of times. Then press /.

The toolbox will not open.

Start typing. Use your mouse to highlight text. The toolbox does not open.

Use your mouse to highlight or press enter, and everything starts working again.

peterpeterparker commented 2 years ago

Thanks for the explanation. It looks like it happens because the content editable becomes empty or contains only a <br/>. We can probably solves this by preventing the deletion of all children - i.e. always be sure it remains at least one <div/> a first child of the content editable.

Can you provide a pr?

viraladmin commented 2 years ago

If I could make heads or tails out of modifying this script I would gladly solve and do a pull request, but I am still learning myself and your code is pretty complex for me to figure out.