added new scroll to demo logic

components/EditorOverview.vue

@@ -67,7 +67,22 @@ const { $track } = useNuxtApp();
 function playDemoClicked(){
   demoEnabled.value = true;
 
-  demoCanvas.value?.scrollIntoViewIfNeeded();
+
+/**
+ * Listen to DOM Mutations and wait for editorjs element to be inserted 
+ * then scroll to it. We have to wait for the editorjs element to be inserted
+ * otherwise the scroll will not work
+ */
+  const onDomChange=()=>{
+    if(document.getElementById('editorjs')){
+      smoothScrollToCenter(demoCanvas.value)
+      window.removeEventListener('DOMNodeInserted',onDomChange)
+    }
+  }
+
+  window.addEventListener('DOMNodeInserted',onDomChange)
+
+
 
   const isMobile = window.matchMedia('(max-width: 710px)').matches;
 
@@ -93,6 +108,26 @@ function playDemoClicked(){
    */
   $track(AnalyticEvent.PlayWithDemoClicked)
 }
+
+/**
+ * Scrolls to targetEle
+ */
+function smoothScrollToCenter(targetEle:HTMLElement|null) {
+
+    if (!targetEle) {
+        return;
+    }
+
+    const targetPosition = targetEle.getBoundingClientRect().top + window.scrollY;
+    const screenHeight = window.innerHeight;
+    const targetDivHeight=targetEle.getBoundingClientRect().height
+    const targetOffset = targetPosition - (screenHeight / 2)+(targetDivHeight/2);
+
+    window.scrollTo({
+        top: targetOffset,
+        behavior: 'smooth'
+    });
+}
 </script>
 
 <style lang="postcss">