Fix yaml metadata and document title not resetting on deletion (#915)

src/components/markdown-renderer/basic-markdown-renderer.tsx

@@ -23,6 +23,7 @@ export interface BasicMarkdownRendererProps {
   markdownIt: MarkdownIt,
   documentReference?: RefObject<HTMLDivElement>
   onBeforeRendering?: () => void
+  onPostRendering?: () => void
 }
 
 export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & AdditionalMarkdownRendererProps> = ({
@@ -32,7 +33,8 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
   componentReplacers,
   markdownIt,
   documentReference,
-  onBeforeRendering
+  onBeforeRendering,
+  onPostRendering
 }) => {
   const maxLength = useSelector((state: ApplicationState) => state.config.maxDocumentLength)
 
@@ -50,8 +52,12 @@ export const BasicMarkdownRenderer: React.FC<BasicMarkdownRendererProps & Additi
     oldMarkdownLineKeys.current = newLines
     lastUsedLineId.current = newLastUsedLineId
     const transformer = componentReplacers ? buildTransformer(newLines, componentReplacers()) : undefined
-    return ReactHtmlParser(html, { transform: transformer })
-  }, [onBeforeRendering, content, maxLength, markdownIt, componentReplacers])
+    const rendering = ReactHtmlParser(html, { transform: transformer })
+    if (onPostRendering) {
+      onPostRendering()
+    }
+    return rendering
+  }, [onBeforeRendering, onPostRendering, content, maxLength, markdownIt, componentReplacers])
 
   return (
     <div className={`${className || ''} d-flex flex-column align-items-center ${wide ? 'wider' : ''}`}>

src/components/markdown-renderer/full-markdown-renderer.tsx

@@ -44,7 +44,8 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   const allReplacers = useReplacerInstanceListCreator(onTaskCheckedChange)
   useTranslation()
 
-  const [yamlError, setYamlError] = useState(false)
+  const [showYamlError, setShowYamlError] = useState(false)
+  const hasNewYamlError = useRef(false)
 
   const rawMetaRef = useRef<RawYAMLMetadata>()
   const firstHeadingRef = useRef<string>()
@@ -60,7 +61,7 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   const markdownIt = useMemo(() => {
     return (new FullMarkdownItConfigurator(
       !!onMetaDataChange,
-      error => setYamlError(error),
+      errorState => hasNewYamlError.current = errorState,
       rawMeta => {
         rawMetaRef.current = rawMeta
       },
@@ -74,21 +75,35 @@ export const FullMarkdownRenderer: React.FC<FullMarkdownRendererProps & Addition
   }, [onMetaDataChange])
 
   const clearMetadata = useCallback(() => {
+    hasNewYamlError.current = false
     rawMetaRef.current = undefined
   }, [])
 
+  const checkYamlErrorState = useCallback(() => {
+    if (hasNewYamlError.current !== showYamlError) {
+      setShowYamlError(hasNewYamlError.current)
+    }
+  }, [setShowYamlError, showYamlError])
+
   return (
     <div ref={rendererRef} className={'position-relative'}>
-      <ShowIf condition={yamlError}>
+      <ShowIf condition={showYamlError}>
         <Alert variant='warning' dir='auto'>
           <Trans i18nKey='editor.invalidYaml'>
             <InternalLink text='yaml-metadata' href='/n/yaml-metadata' className='text-primary'/>
           </Trans>
         </Alert>
       </ShowIf>
-      <BasicMarkdownRenderer className={className} wide={wide} content={content} componentReplacers={allReplacers}
-        markdownIt={markdownIt} documentReference={documentElement}
-        onBeforeRendering={clearMetadata}/>
+      <BasicMarkdownRenderer
+        className={className}
+        wide={wide}
+        content={content}
+        componentReplacers={allReplacers}
+        markdownIt={markdownIt}
+        documentReference={documentElement}
+        onBeforeRendering={clearMetadata}
+        onPostRendering={checkYamlErrorState}
+      />
     </div>
   )
 }

src/components/markdown-renderer/hooks/use-extract-first-headline.ts

@@ -24,6 +24,8 @@ export const useExtractFirstHeadline = (documentElement: React.RefObject<HTMLDiv
       const firstHeading = documentElement.current.getElementsByTagName('h1').item(0)
       if (firstHeading) {
         onFirstHeadingChange(extractInnerText(firstHeading))
+      } else {
+        onFirstHeadingChange(undefined)
       }
     }
   }, [documentElement, extractInnerText, onFirstHeadingChange, content])

src/components/markdown-renderer/markdown-it-configurator/FullMarkdownItConfigurator.tsx

@@ -27,7 +27,7 @@ import { BasicMarkdownItConfigurator } from './BasicMarkdownItConfigurator'
 export class FullMarkdownItConfigurator extends BasicMarkdownItConfigurator {
   constructor (
     private useFrontmatter: boolean,
-    private onYamlError: (error: boolean) => void,
+    private passYamlErrorState: (error: boolean) => void,
     private onRawMeta: (rawMeta: RawYAMLMetadata) => void,
     private onToc: (toc: TocAst) => void,
     private onLineMarkers: (lineMarkers: LineMarkers[]) => void
@@ -45,7 +45,7 @@ export class FullMarkdownItConfigurator extends BasicMarkdownItConfigurator {
           !this.useFrontmatter
             ? undefined
             : {
-                onYamlError: (error: boolean) => this.onYamlError(error),
+                onYamlError: (hasError: boolean) => this.passYamlErrorState(hasError),
                 onRawMeta: (rawMeta: RawYAMLMetadata) => this.onRawMeta(rawMeta)
               })
       },

src/redux/document-content/methods.ts

@@ -6,6 +6,7 @@
 
 import { store } from '..'
 import { YAMLMetaData } from '../../components/editor/yaml-metadata/yaml-metadata'
+import { initialState } from './reducers'
 import {
   DocumentContentActionType,
   SetDocumentContentAction,
@@ -31,7 +32,7 @@ export const setNoteId = (noteId: string): void => {
 
 export const setDocumentMetadata = (metadata: YAMLMetaData | undefined): void => {
   if (!metadata) {
-    return
+    metadata = initialState.metadata
   }
   const action: SetDocumentMetadataAction = {
     type: DocumentContentActionType.SET_DOCUMENT_METADATA,