wip

packages/app/src/components/Page/RevisionBody.jsx

@@ -24,9 +24,6 @@ export default class RevisionBody extends React.PureComponent {
     if (MathJax != null && this.props.isMathJaxEnabled && this.props.renderMathJaxInRealtime) {
       this.renderMathJaxWithDebounce();
     }
-    if (this.props.onRevisionBodyRendered) {
-      this.props.onRevisionBodyRendered(true);
-    }
   }
 
   componentWillReceiveProps(nextProps) {
@@ -67,6 +64,7 @@ export default class RevisionBody extends React.PureComponent {
             this.props.inputRef(elm);
           }
         }}
+        id="revision-body"
         className={`wiki ${additionalClassName}`}
         // eslint-disable-next-line react/no-danger
         dangerouslySetInnerHTML={this.generateInnerHtml(this.props.html)}
@@ -83,5 +81,4 @@ RevisionBody.propTypes = {
   renderMathJaxOnInit: PropTypes.bool,
   renderMathJaxInRealtime: PropTypes.bool,
   additionalClassName: PropTypes.string,
-  onRevisionBodyRendered: PropTypes.func,
 };

packages/app/src/components/Page/RevisionLoader.jsx

@@ -36,6 +36,20 @@ class LegacyRevisionLoader extends React.Component {
     }
   }
 
+  componentDidUpdate() {
+    console.log('state.isLoaded', this.state.isLoaded);
+    console.log('state.isLoading', this.state.isLoading);
+
+    // after loading
+    if (this.state.isLoaded) {
+      const wiki = document.getElementById('revision-body');
+      console.log(wiki);
+      const hightlightedElement = wiki.querySelector('.highlighted-keyword');
+      console.log(hightlightedElement);
+      this.props.onRevisionBodyRendered(hightlightedElement);
+    }
+  }
+
   async loadData() {
     if (!this.state.isLoaded && !this.state.isLoading) {
       this.setState({ isLoading: true });

packages/app/src/components/Page/RevisionRenderer.jsx

@@ -157,7 +157,6 @@ class LegacyRevisionRenderer extends React.PureComponent {
         isMathJaxEnabled={isMathJaxEnabled}
         additionalClassName={this.props.additionalClassName}
         renderMathJaxOnInit
-        onRevisionBodyRendered={this.props.onRevisionBodyRendered}
       />
     );
   }
@@ -170,7 +169,6 @@ LegacyRevisionRenderer.propTypes = {
   markdown: PropTypes.string.isRequired,
   highlightKeywords: PropTypes.string,
   additionalClassName: PropTypes.string,
-  onRevisionBodyRendered: PropTypes.func,
 };
 
 /**
@@ -189,7 +187,6 @@ RevisionRenderer.propTypes = {
   markdown: PropTypes.string.isRequired,
   highlightKeywords: PropTypes.string,
   additionalClassName: PropTypes.string,
-  onRevisionBodyRendered: PropTypes.func,
 };
 
 export default RevisionRenderer;

packages/app/src/components/SearchPage/SearchResultContent.tsx

@@ -21,22 +21,17 @@ type Props ={
 
 
 const SearchResultContent: FC<Props> = (props: Props) => {
-  const [isRevisionBodyRendered, setIsRevisionBodyRendered] = useState(false);
   const contentRef = useRef(null);
 
-  useEffect(() => {
-    // reset state
-    if (isRevisionBodyRendered) {
-      const searchResultPageContent = contentRef.current as HTMLElement | null;
-      if (searchResultPageContent != null) {
-        const highlightedWord = searchResultPageContent?.querySelector('.highlighted-keyword') as HTMLElement | null;
-        if (highlightedWord != null) {
-          smoothScrollIntoView(highlightedWord, SCROLL_OFFSET_TOP, searchResultPageContent);
-        }
-      }
-      setIsRevisionBodyRendered(false);
+
+  const scrollTo = (element) => {
+    console.log('scrollTo emitted');
+
+    const searchResultPageContent = contentRef.current as HTMLElement | null;
+    if (searchResultPageContent != null && element != null) {
+      smoothScrollIntoView(element, SCROLL_OFFSET_TOP, searchResultPageContent);
     }
-  }, [isRevisionBodyRendered]);
+  };
 
   const page = props.focusedSearchResultData?.pageData;
 
@@ -74,7 +69,7 @@ const SearchResultContent: FC<Props> = (props: Props) => {
           pagePath={page.path}
           revisionId={page.revision}
           highlightKeywords={props.searchingKeyword}
-          onRevisionBodyRendered={setIsRevisionBodyRendered}
+          onRevisionBodyRendered={scrollTo}
         />
       </div>
     </div>