Revert 173 revert 155 fix/useconfirm n tableofcont (#177)

* test

* test

* test

* test

* errorWhileRendering now generates 500 status code

* build fix

* debug cleanup

api/ssr.js

@@ -5,7 +5,14 @@ export default async function handler(req, res) {
 
   const pageContext = await renderPage({ urlOriginal: url, cookies })
 
-  const { httpResponse } = pageContext
+  const { httpResponse, errorWhileRendering } = pageContext
+
+  if (errorWhileRendering) {
+    console.error(errorWhileRendering)
+    res.statusCode = 500
+    res.end()
+    return
+  }
 
   if (!httpResponse) {
     res.statusCode = 200

src/components/Article/FullArticle.tsx

@@ -232,7 +232,7 @@ export const FullArticle = (props: Props) => {
             </Show>
           </article>
           <Show when={isDesktop() && body()}>
-            <TableOfContents variant="article" parentSelector="#shoutBody" />
+            <TableOfContents variant="article" parentSelector="#shoutBody" body={body()} />
           </Show>
         </div>
       </div>

src/components/Editor/Editor.tsx

@@ -248,7 +248,7 @@ export const Editor = (props: Props) => {
     <>
       <div ref={(el) => (editorElRef.current = el)} id="editorBody" />
       <Show when={isDesktop() && html()}>
-        <TableOfContents variant="editor" parentSelector="#editorBody" />
+        <TableOfContents variant="editor" parentSelector="#editorBody" body={html()} />
       </Show>
       <TextBubbleMenu
         isCommonMarkup={isCommonMarkup()}

src/components/TableOfContents/TableOfContents.tsx

@@ -5,7 +5,7 @@ import { DEFAULT_HEADER_OFFSET } from '../../stores/router'
 
 import { useLocalize } from '../../context/localize'
 
-import { debounce } from 'debounce'
+import debounce from 'debounce'
 
 import { Icon } from '../_shared/Icon'
 
@@ -14,6 +14,7 @@ import styles from './TableOfContents.module.scss'
 interface Props {
   variant: 'article' | 'editor'
   parentSelector: string
+  body: string
 }
 
 const scrollToHeader = (element) => {
@@ -32,21 +33,34 @@ export const TableOfContents = (props: Props) => {
   const [headings, setHeadings] = createSignal<Element[]>([])
   const [areHeadingsLoaded, setAreHeadingsLoaded] = createSignal<boolean>(false)
 
-  const [isVisible, setIsVisible] = createSignal<boolean>(true)
+  const [isVisible, setIsVisible] = createSignal<boolean>(props.variant === 'article')
   const toggleIsVisible = () => {
     setIsVisible((visible) => !visible)
   }
 
-  onMount(() => {
+  const updateHeadings = () => {
     const { parentSelector } = props
+
     // eslint-disable-next-line unicorn/prefer-spread
     setHeadings(Array.from(document.querySelector(parentSelector).querySelectorAll('h2, h3, h4')))
-
     setAreHeadingsLoaded(true)
-  })
+  }
+
+  const debouncedUpdateHeadings = debounce(updateHeadings, 500)
+
+  createEffect(
+    on(
+      () => props.body,
+      () => debouncedUpdateHeadings()
+    )
+  )
 
   return (
-    <Show when={areHeadingsLoaded()}>
+    <Show
+      when={
+        areHeadingsLoaded() && (props.variant === 'article' ? headings().length > 2 : headings().length > 1)
+      }
+    >
       <div
         class={clsx(styles.TableOfContentsFixedWrapper, {
           [styles.TableOfContentsFixedWrapperLefted]: props.variant === 'editor'