⭐ Hint that content is editable

src/components/MarkdownContent/Content.tsx

@@ -91,5 +91,5 @@ export function Content(props: ContentProps) {
 /**
  * TODO: [👼] Components <HtmlContent/>, <MarkdownContent/> and <Content> are coupled together more then they should be
  * TODO: [👩‍🦰] Allow to change fonts in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
- * TODO: [👨‍🦰] Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
+ * TODO: [👨‍🦰] !!! Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
  */

src/components/MarkdownContent/HtmlContent.tsx

@@ -2,6 +2,7 @@ import parse from 'html-react-parser';
 import { useEffect, useLayoutEffect, useRef } from 'react';
 import { useSsrDetection } from '../../utils/hooks/useSsrDetection';
 import { string_css_class, string_href, string_html } from '../../utils/typeAliases';
+import { Hint } from '../Hint/Hint';
 import { extractFontsFromContent } from '../ImportFonts/extractFontsFromContent';
 import { mapLinksInHtml } from './mapLinksInHtml';
 
@@ -112,15 +113,21 @@ function HtmlContentEditable(props: Omit<HtmlContentProps, 'isEditable'>) {
     }, [content, onHtmlChange, elementRef]);
 
     return (
-        <div {...{ className }} ref={elementRef}>
-            This will be never shown because it is immediatelly replaced here [3] in useLayoutEffect
-        </div>
+        <Hint
+            id="wallpaper-content-edit"
+            /* <- TODO: This should be passed in props  */ title="Edit the text"
+            reapearCount={0}
+        >
+            <div {...{ className }} ref={elementRef}>
+                This will be never shown because it is immediatelly replaced here [3] in useLayoutEffect
+            </div>
+        </Hint>
     );
 }
 
 /**
  * TODO: [👼] Components <HtmlContent/>, <MarkdownContent/> and <Content> are coupled together more then they should be
  * TODO: [🧠][💬] Allow to change fonts and do rich text editing
  * TODO: [👩‍🦰] Allow to change fonts in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
- * TODO: [👨‍🦰] Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/> (<- <HtmlContentEditable/>)
+ * TODO: [👨‍🦰] !!! Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/> (<- <HtmlContentEditable/>)
  */

src/components/WallpaperContent/WallpaperContent.tsx

@@ -131,7 +131,7 @@ export function WallpaperContentSection() {
 
 /**
  * TODO: [👩‍🦰] Allow to change fonts in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
- * TODO: [👨‍🦰] Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
+ * TODO: [👨‍🦰] !!! Show editable hint in <WallpaperContentSection/> or <Content/> or <HtmlContent/>
  * TODO: Maybe split header and content font
  * TODO: isHashUsed + test it and put into menu + some way to return existing hashes
  * TODO: [🎐] Some markdown can not be converted back from html - use fallback to pure html content