Add prettier for codestyle and re-format everything (#1294)

src/components/editor-page/table-of-contents/build-react-dom-from-toc-ast.tsx

@@ -10,42 +10,41 @@ import { ShowIf } from '../../common/show-if/show-if'
 import { createJumpToMarkClickEventHandler } from '../../markdown-renderer/replace-components/link-replacer/link-replacer'
 import { tocSlugify } from './toc-slugify'
 
-export const buildReactDomFromTocAst = (toc: TocAst, levelsToShowUnderThis: number, headerCounts: Map<string, number>,
-  wrapInListItem: boolean, baseUrl?: string): ReactElement | null => {
+export const buildReactDomFromTocAst = (
+  toc: TocAst,
+  levelsToShowUnderThis: number,
+  headerCounts: Map<string, number>,
+  wrapInListItem: boolean,
+  baseUrl?: string
+): ReactElement | null => {
   if (levelsToShowUnderThis < 0) {
     return null
   }
 
   const rawName = toc.n.trim()
   const nameCount = (headerCounts.get(rawName) ?? -1) + 1
-  const slug = `#${ tocSlugify(rawName) }${ nameCount > 0 ? `-${ nameCount }` : '' }`
+  const slug = `#${tocSlugify(rawName)}${nameCount > 0 ? `-${nameCount}` : ''}`
   const headlineUrl = new URL(slug, baseUrl).toString()
 
   headerCounts.set(rawName, nameCount)
 
   const content = (
     <Fragment>
-      <ShowIf condition={ toc.l > 0 }>
-        <a href={ headlineUrl } title={ rawName }
-           onClick={ createJumpToMarkClickEventHandler(slug.substr(1)) }>{ rawName }</a>
+      <ShowIf condition={toc.l > 0}>
+        <a href={headlineUrl} title={rawName} onClick={createJumpToMarkClickEventHandler(slug.substr(1))}>
+          {rawName}
+        </a>
       </ShowIf>
-      <ShowIf condition={ toc.c.length > 0 }>
+      <ShowIf condition={toc.c.length > 0}>
         <ul>
-          {
-            toc.c.map(child =>
-              (buildReactDomFromTocAst(child, levelsToShowUnderThis - 1, headerCounts, true, baseUrl)))
-          }
+          {toc.c.map((child) => buildReactDomFromTocAst(child, levelsToShowUnderThis - 1, headerCounts, true, baseUrl))}
         </ul>
       </ShowIf>
     </Fragment>
   )
 
   if (wrapInListItem) {
-    return (
-      <li key={ headlineUrl }>
-        { content }
-      </li>
-    )
+    return <li key={headlineUrl}>{content}</li>
   } else {
     return content
   }

src/components/editor-page/table-of-contents/table-of-contents.tsx

@@ -18,23 +18,19 @@ export interface TableOfContentsProps {
   baseUrl?: string
 }
 
-export const TableOfContents: React.FC<TableOfContentsProps> = ({
-  ast,
-  maxDepth = 3,
-  className,
-  baseUrl
-}) => {
+export const TableOfContents: React.FC<TableOfContentsProps> = ({ ast, maxDepth = 3, className, baseUrl }) => {
   useTranslation()
-  const tocTree = useMemo(() => buildReactDomFromTocAst(ast, maxDepth, new Map<string, number>(), false, baseUrl), [ast,
-    maxDepth,
-    baseUrl])
+  const tocTree = useMemo(
+    () => buildReactDomFromTocAst(ast, maxDepth, new Map<string, number>(), false, baseUrl),
+    [ast, maxDepth, baseUrl]
+  )
 
   return (
-    <div className={ `markdown-toc ${ className ?? '' }` }>
-      <ShowIf condition={ ast.c.length === 0 }>
-        <Trans i18nKey={ 'editor.infoToc' }/>
+    <div className={`markdown-toc ${className ?? ''}`}>
+      <ShowIf condition={ast.c.length === 0}>
+        <Trans i18nKey={'editor.infoToc'} />
       </ShowIf>
-      { tocTree }
+      {tocTree}
     </div>
   )
 }

src/components/editor-page/table-of-contents/toc-slugify.ts

@@ -5,7 +5,5 @@
  */
 
 export const tocSlugify = (content: string): string => {
-  return encodeURIComponent(content.trim()
-                                   .toLowerCase()
-                                   .replace(/\s+/g, '-'))
+  return encodeURIComponent(content.trim().toLowerCase().replace(/\s+/g, '-'))
 }