Extract clean title from first heading (#616)

* removed first-header-extractor
get first heading from markdown rende
* don't remove editor or renderer just hide them
this way both are always up to date and can be shown very fast
* extracted image alt attribute into first title. too
* added tests as suggested by @mrdrogdrog

src/components/editor/editor.tsx

@@ -54,7 +54,7 @@ export const Editor: React.FC = () => {
     } else if (noteMetadata.current?.opengraph && noteMetadata.current?.opengraph.get('title') && noteMetadata.current?.opengraph.get('title') !== '') {
       setDocumentTitle(noteMetadata.current.opengraph.get('title') ?? untitledNote)
     } else {
-      setDocumentTitle(firstHeading.current ?? untitledNote)
+      setDocumentTitle((firstHeading.current ?? untitledNote).trim())
     }
   }, [untitledNote])
 

src/components/editor/splitter/splitter.tsx

@@ -43,21 +43,17 @@ export const Splitter: React.FC<SplitterProps> = ({ containerClassName, left, ri
         }
       }}
     >
-      <ShowIf condition={showLeft}>
-        <div className={'splitter left'} style={{ flexBasis: `calc(${realSplit}% - 5px)` }}>
-          {left}
-        </div>
-      </ShowIf>
+      <div className={`splitter left ${!showLeft ? 'd-none' : ''}`} style={{ flexBasis: `calc(${realSplit}% - 5px)` }}>
+        {left}
+      </div>
       <ShowIf condition={showLeft && showRight}>
         <div className='splitter separator'>
           <SplitDivider onGrab={() => setDoResizing(true)}/>
         </div>
       </ShowIf>
-      <ShowIf condition={showRight}>
-        <div className={'splitter right'}>
-          {right}
-        </div>
-      </ShowIf>
+      <div className={`splitter right ${!showRight ? 'd-none' : ''}`}>
+        {right}
+      </div>
     </div>
   )
 }