From 8842fff06f557050a6e160749c484fc3fe1497d8 Mon Sep 17 00:00:00 2001
From: Erik Michelson <github@erik.michelson.eu>
Date: Tue, 15 Sep 2020 10:22:49 +0200
Subject: [PATCH] Add info message on empty toc (#567)

---
 public/locales/en.json                                   | 1 +
 .../editor/table-of-contents/table-of-contents.tsx       | 9 +++++++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/public/locales/en.json b/public/locales/en.json
index c852e8516..24aec53f4 100644
--- a/public/locales/en.json
+++ b/public/locales/en.json
@@ -153,6 +153,7 @@
         "untitledNote": "Untitled",
         "placeholder": "← Start by entering a title here\n===\nVisit the features page if you don't know what to do.\nHappy hacking :)",
         "invalidYaml": "The yaml-header is invalid. See <0></0> for more information.",
+        "infoToc": "Structure your note with headings to see a table-of-contents here.",
         "help": {
             "shortcuts": {
                 "title": "Shortcuts",
diff --git a/src/components/editor/table-of-contents/table-of-contents.tsx b/src/components/editor/table-of-contents/table-of-contents.tsx
index d2bfc73bb..f8c006cf8 100644
--- a/src/components/editor/table-of-contents/table-of-contents.tsx
+++ b/src/components/editor/table-of-contents/table-of-contents.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, ReactElement, useMemo } from 'react'
+import { Trans, useTranslation } from 'react-i18next'
 import { TocAst } from '../../../external-types/markdown-it-toc-done-right/interface'
 import { ShowIf } from '../../common/show-if/show-if'
 import './table-of-contents.scss'
@@ -9,7 +10,7 @@ export interface TableOfContentsProps {
   className?: string
 }
 
-export const slugify = (content:string): string => {
+export const slugify = (content: string): string => {
   return encodeURIComponent(String(content).trim().toLowerCase().replace(/\s+/g, '-'))
 }
 
@@ -52,11 +53,15 @@ const convertLevel = (toc: TocAst, levelsToShowUnderThis: number, headerCounts:
 }
 
 export const TableOfContents: React.FC<TableOfContentsProps> = ({ ast, maxDepth = 3, className }) => {
+  useTranslation()
   const tocTree = useMemo(() => convertLevel(ast, maxDepth, new Map<string, number>(), false), [ast, maxDepth])
 
   return (
     <div className={`markdown-toc ${className ?? ''}`}>
-      {tocTree}
+      <ShowIf condition={ast.c.length === 0}>
+        <Trans i18nKey={'editor.infoToc'}/>
+      </ShowIf>
+      { tocTree }
     </div>
   )
 }