added new scroll to demo logic #13
Conversation
components/EditorOverview.vue
Outdated
| } | ||
| } | ||
|
|
||
| window.addEventListener('DOMNodeInserted',onDomChange) |
There was a problem hiding this comment.
it's better to bind this event inside the onMounted hook to prevent SSR issues
There was a problem hiding this comment.
I changed it, I placed mobile focus part inside setTimeout because it solves to problems
- Virtual keyboard interrupts scroll
- Editor is focused before it's initialised
components/EditorOverview.vue
Outdated
| (document.querySelector('.fake-input') as HTMLElement).focus(); | ||
|
|
||
| const block: HTMLElement | null = document.querySelector('.ce-paragraph'); | ||
| const block: HTMLElement | null = document.querySelector('.ce-paragraph'); | ||
|
|
||
| if (block !== null){ | ||
| if (block !== null){ | ||
|
|
||
| block.focus() | ||
| } | ||
| block.focus() | ||
| } | ||
| },1000) | ||
| } | ||
|
|
||
| /** | ||
| * Send analytics event | ||
| */ | ||
| $track(AnalyticEvent.PlayWithDemoClicked) | ||
| } | ||
|
|
||
|
|
||
| /** | ||
| * Scroll the target element to 33% from top of the screen | ||
| */ |
There was a problem hiding this comment.
You have problems with identations
components/EditorOverview.vue
Outdated
| @@ -77,22 +77,47 @@ function playDemoClicked(){ | |||
| * contenteditable element which is not presents on a page in a moment of button click | |||
| * | |||
| * So we use fake invisible input to focus it first, then change focus to our editor | |||
| * | |||
| * setTimeout is used because the virtual keyboard interrupts scroll | |||
There was a problem hiding this comment.
This problem and solution is unclear to me. Do you mean mobile devices?
For now, it breaks the focus of editor on mobile devices (tested in Safari), which is working fine in main. Also, scroll works fine in main on mobile safari
There was a problem hiding this comment.
Are you sure because I tested it on Safari (IOS Simulator), it was working fine, and yes the focus and scroll breaks on Chrome (Android) main.
There was a problem hiding this comment.
Another solution is to put
`const block: HTMLElement | null = document.querySelector('.ce-paragraph');
if (block !== null){
block.focus()
}`
inside onReady callback which is woking on Chrome (Android) and Safari(IOS Simulator).
There was a problem hiding this comment.
I have kept the changes to a minimum this PR only addresses the scroll issue on web tested on Chrome (Desktop) and Safari (Desktop)
New scroll logic
Editor.webm