Fixed #ghost-comments-root and renamed it to #ghost-comments

fixes https://github.com/TryGhost/Team/issues/1729
refs https://github.com/TryGhost/Team/issues/1730

Please note that it only works on initial page load for now. Browsers have custom implementations for handling URL hashes/fragments that mess with the scroll position if you reload a page.

We need a special JS based handling of the URL fragment/hash because:
- We should only scroll after the comments have loaded, else we risk landing on a higher position on the page due to content height changes.
- The DIV we scroll to (#ghost-comments-root) is inserted via JS, making it more difficult to scroll to it without JS.
- We cannot wrap the `<script>` tag that loads the comments with a different DIV that has an id where we can scroll to. This would break themes and would make it harder to work with existing CSS grids (tried this first). And we still have the first issue too if we use this.

apps/comments-ui/src/components/CommentsBox.js

@@ -1,4 +1,4 @@
-import React, {useContext, useState} from 'react';
+import React, {useContext, useEffect, useState} from 'react';
 import AppContext from '../AppContext';
 import NotSignedInBox from './NotSignedInBox';
 import Form from './Form';
@@ -7,6 +7,7 @@ import Pagination from './Pagination';
 import NotPaidBox from './NotPaidBox';
 // import Empty from './Empty';
 import Loading from './Loading';
+import {ROOT_DIV_ID} from '../utils/constants';
 
 const CommentsBoxContent = (props) => {
     const [isEditing, setIsEditing] = useState(false);
@@ -19,6 +20,24 @@ const CommentsBoxContent = (props) => {
     const paidOnly = commentsEnabled === 'paid';
     const isPaidMember = member && !!member.paid;
 
+    useEffect(() => {
+        const elem = document.getElementById(ROOT_DIV_ID);
+        
+        // Check scroll position
+        if (elem && window.location.hash === `#ghost-comments`) {
+            // Only scroll if the user didn't scroll by the time we loaded the comments
+            // We could remove this, but if the network connection is slow, we risk having a page jump when the user already started scrolling
+            if (window.scrollY === 0) {                
+                // This is a bit hacky, but one animation frame is not enough to wait for the iframe height to have changed and the DOM to be updated correctly before scrolling
+                requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                        elem.scrollIntoView();
+                    });
+                });
+            }
+        }
+    }, []);
+
     return (
         <>
             {/* {TODO: Put in conditionals and variables for the new comment helper} */}
@@ -67,7 +86,7 @@ const CommentsBox = (props) => {
         } else if (colorScheme === 'dark') {
             return true;
         } else {
-            const containerColor = getComputedStyle(document.querySelector('#ghost-comments-root').parentNode).getPropertyValue('color');
+            const containerColor = getComputedStyle(document.getElementById(ROOT_DIV_ID).parentNode).getPropertyValue('color');
 
             const colorsOnly = containerColor.substring(containerColor.indexOf('(') + 1, containerColor.lastIndexOf(')')).split(/,\s*/);
             const red = colorsOnly[0];
@@ -85,6 +104,7 @@ const CommentsBox = (props) => {
         paddingTop: 8,
         paddingBottom: 64
     };
+
     return (
         <section className={'ghost-display ' + containerClass} style={style}>
             {props.done ? <>

apps/comments-ui/src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './App';
-const ROOT_DIV_ID = 'ghost-comments-root';
+import {ROOT_DIV_ID} from './utils/constants';
 
 function addRootDiv() {
     const scriptTag = document.querySelector('script[data-ghost-comments]');

apps/comments-ui/src/utils/constants.js

@@ -0,0 +1,2 @@
+// Note: do not use ghost-comments as that makes the #ghost-comments scrolling unreliable because we inject this div after page load!
+export const ROOT_DIV_ID = 'ghost-comments-root';

apps/comments-ui/src/utils/helpers.js

@@ -109,4 +109,4 @@ export function getInitials(name) {
 // Note, this should be the same as breakpoint defined in Tailwind config
 export function isMobile() {
     return (Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0) < 480);
-}
+}