From 1e8d355bed766ff3f679b5843cd23606a0f03cfb Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Wed, 17 Mar 2021 22:19:45 +0100
Subject: [PATCH] Refactor metadata input and redux action for replacement

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 .../metadata-editor/breaks-metadata-input.tsx | 25 ++++----
 .../datalist-metadata-input.tsx               | 44 ++++++++------
 .../metadata-editor/metadata-editor.tsx       | 58 +++++++++----------
 .../metadata-editor/string-metadata-input.tsx |  8 +--
 .../string-metadata-textarea.tsx              |  6 +-
 .../metadata-editor/tags-metadata-input.tsx   | 32 +++++-----
 .../text-direction-metadata-input.tsx         | 27 +++++----
 .../note-frontmatter/note-frontmatter.ts      | 28 ++++-----
 src/redux/note-details/methods.ts             | 10 +++-
 src/redux/note-details/reducers.ts            | 44 ++++++++++++--
 src/redux/note-details/types.ts               | 10 +++-
 11 files changed, 180 insertions(+), 112 deletions(-)

diff --git a/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
index d8fb206786..d8d996a2b9 100644
--- a/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
+++ b/src/components/editor-page/metadata-editor/breaks-metadata-input.tsx
@@ -4,38 +4,41 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useCallback } from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { MetadataInputFieldProps } from './metadata-editor'
 
 enum ButtonState {
-  ON,
-  OFF
+  ON = 1,
+  OFF = 0
 }
 
-export const BreaksMetadataInput: React.FC<MetadataInputFieldProps<boolean>> = ({ id, content, onContentChange }) => {
+export const BreaksMetadataInput: React.FC<MetadataInputFieldProps<boolean>> = ({ frontmatterKey, content, onContentChange }) => {
   const { t } = useTranslation()
 
+  const toggleButtonClick = useCallback((value: ButtonState) => {
+    onContentChange({ breaks: value === ButtonState.ON })
+  }, [onContentChange])
+
   return (
     <ToggleButtonGroup
       type="radio"
-      name={ id }
-      id={ id }
+      name={ frontmatterKey }
+      id={ frontmatterKey }
       value={ content ? ButtonState.ON : ButtonState.OFF }
-      className={ 'd-block' }>
+      className={ 'd-block' }
+      onChange={ toggleButtonClick }>
       <ToggleButton
         value={ ButtonState.ON }
         variant="outline-secondary"
-        title={ t('editor.modal.metadataEditor.labels.breaksOn') }
-        onChange={ () => onContentChange(true) }>
+        title={ t('editor.modal.metadataEditor.labels.breaksOn') }>
         <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOn' }/>
       </ToggleButton>
       <ToggleButton
         value={ ButtonState.OFF }
         variant="outline-secondary"
-        title={ t('editor.modal.metadataEditor.labels.breaksOff') }
-        onChange={ () => onContentChange(false) }>
+        title={ t('editor.modal.metadataEditor.labels.breaksOff') }>
         <Trans i18nKey={ 'editor.modal.metadataEditor.labels.breaksOff' }/>
       </ToggleButton>
     </ToggleButtonGroup>
diff --git a/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
index b1a89b9e98..968d81dd3b 100644
--- a/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
+++ b/src/components/editor-page/metadata-editor/datalist-metadata-input.tsx
@@ -4,26 +4,36 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Fragment, useCallback } from 'react'
+import React, { useCallback } from 'react'
 import { MetadataInputFieldProps, SelectMetadataOptions } from './metadata-editor'
+import { Dropdown, DropdownButton } from 'react-bootstrap'
 
-export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ id, content, onContentChange, options }) => {
-  const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    onContentChange(event.currentTarget.value)
-  }, [onContentChange])
+export const DatalistMetadataInput: React.FC<MetadataInputFieldProps<string> & SelectMetadataOptions<string>> = ({ frontmatterKey, content, onContentChange, options }) => {
+  const onSelect = useCallback((eventKey: string | null) => {
+    if (eventKey === null) {
+      return
+    }
+    onContentChange({ [frontmatterKey]: eventKey })
+  }, [frontmatterKey, onContentChange])
 
   return (
-    <Fragment>
-      <input list={ id } onChange={ onChange } value={ content } className={ 'form-control' }/>
-      <datalist id={ id }>
-        { options.map(option => {
-          return (
-            <option value={ option }>
-              { option }
-            </option>
-          )
-        }) }
-      </datalist>
-    </Fragment>
+    <DropdownButton onSelect={ onSelect } id={ frontmatterKey } title={ content }>
+      {
+        options.map((option) => <Dropdown.Item eventKey={ option } key={ option }>{ option }</Dropdown.Item>)
+      }
+    </DropdownButton>
   )
 }
+/*
+
+ <!--<Fragment>
+ <input list={ frontmatterKey } onChange={ onChange } value={ content } className={ 'form-control' }/>
+ <datalist id={ frontmatterKey }>
+ { options.map(option => (
+ <option key={ option } value={ option }>
+ { option }
+ </option>
+ )) }
+ </datalist>
+ </Fragment>-->
+ */
diff --git a/src/components/editor-page/metadata-editor/metadata-editor.tsx b/src/components/editor-page/metadata-editor/metadata-editor.tsx
index f913f3933c..5a2c8fc8a3 100644
--- a/src/components/editor-page/metadata-editor/metadata-editor.tsx
+++ b/src/components/editor-page/metadata-editor/metadata-editor.tsx
@@ -10,9 +10,9 @@ import { Col, Modal, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { ApplicationState } from '../../../redux'
-import { setNoteFrontmatter } from '../../../redux/note-details/methods'
+import { replaceFrontmatterInMarkdownContentAction } from '../../../redux/note-details/methods'
 import { CommonModal } from '../../common/modals/common-modal'
-import { NoteFrontmatter, NoteType } from '../note-frontmatter/note-frontmatter'
+import { NoteType, RawNoteFrontmatter } from '../note-frontmatter/note-frontmatter'
 import { BreaksMetadataInput } from './breaks-metadata-input'
 import { DatalistMetadataInput } from './datalist-metadata-input'
 import { InputLabel } from './input-label'
@@ -27,9 +27,9 @@ export interface MetadataEditorProps {
 }
 
 export interface MetadataInputFieldProps<T> {
-  id: string
   content: T
-  onContentChange: (newContent: T) => void
+  frontmatterKey: keyof RawNoteFrontmatter
+  onContentChange: (frontmatter: RawNoteFrontmatter) => void
 }
 
 export interface SelectMetadataOptions<T> {
@@ -54,11 +54,9 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide })
    deprecatedTagsSyntax: false
    })*/
 
-  const setMarkdown = useCallback((changes: Partial<NoteFrontmatter>) => {
-    const newMetadata = Object.assign(yamlMetadata, changes)
-
-//    setnoteDetails(noteDetails)
-  }, [noteDetails])
+  const updateFrontmatter = useCallback((frontmatter: RawNoteFrontmatter): void => {
+    replaceFrontmatterInMarkdownContentAction(frontmatter)
+  }, [])
 
   return (
     <CommonModal
@@ -71,46 +69,48 @@ export const MetadataEditor: React.FC<MetadataEditorProps> = ({ show, onHide })
         <Row>
           <Col lg={ 6 }>
             <InputLabel id={ 'title' } label={ t('editor.modal.metadataEditor.labels.title') }>
-              <StringMetadataInput id={ 'title' } content={ yamlMetadata.title }
-                                   onContentChange={ title => setNoteFrontmatter({ ...yamlMetadata, title }) }/>
+              <StringMetadataInput frontmatterKey={ 'title' } content={ yamlMetadata.title }
+                                   onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'type' } label={ t('editor.modal.metadataEditor.labels.type') }>
-              <DatalistMetadataInput id={ 'type' } options={ Object.values(NoteType) } content={ yamlMetadata.type }
-                                     onContentChange={ type => setNoteFrontmatter({ ...yamlMetadata, type: (type as NoteType) }) }/>
+              <DatalistMetadataInput frontmatterKey={ 'type' } options={ Object.values(NoteType) }
+                                     content={ yamlMetadata.type }
+                                     onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'dir' } label={ t('editor.modal.metadataEditor.labels.dir') }>
-              <TextDirectionMetadataInput id={ 'dir' } content={ yamlMetadata.dir }
-                                          onContentChange={ dir => setNoteFrontmatter({ ...yamlMetadata, dir }) }/>
+              <TextDirectionMetadataInput frontmatterKey={ 'dir' } content={ yamlMetadata.dir }
+                                          onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'description' } label={ t('editor.modal.metadataEditor.labels.description') }>
-              <StringMetadataTextarea id={ 'description' } content={ yamlMetadata.description }
-                                      onContentChange={ description => setNoteFrontmatter({ ...yamlMetadata, description }) }/>
+              <StringMetadataTextarea frontmatterKey={ 'description' } content={ yamlMetadata.description }
+                                      onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'disqus' } label={ t('editor.modal.metadataEditor.labels.disqus') }>
-              <StringMetadataInput id={ 'disqus' } content={ yamlMetadata.disqus }
-                                   onContentChange={ disqus => setNoteFrontmatter({ ...yamlMetadata, disqus }) }/>
+              <StringMetadataInput frontmatterKey={ 'disqus' } content={ yamlMetadata.disqus }
+                                   onContentChange={ updateFrontmatter }/>
             </InputLabel>
           </Col>
           <Col lg={ 6 }>
             <InputLabel id={ 'lang' } label={ t('editor.modal.metadataEditor.labels.lang') }>
-              <DatalistMetadataInput id={ 'lang' } options={ ISO.getAllCodes() } content={ yamlMetadata.lang }
-                                     onContentChange={ lang => setNoteFrontmatter({ ...yamlMetadata, lang }) }/>
+              <DatalistMetadataInput frontmatterKey={ 'lang' } options={ ISO.getAllCodes() }
+                                     content={ yamlMetadata.lang }
+                                     onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'robots' } label={ t('editor.modal.metadataEditor.labels.robots') }>
-              <StringMetadataInput id={ 'robots' } content={ yamlMetadata.robots }
-                                   onContentChange={ robots => setNoteFrontmatter({ ...yamlMetadata, robots }) }/>
+              <StringMetadataInput frontmatterKey={ 'robots' } content={ yamlMetadata.robots }
+                                   onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'breaks' } label={ t('editor.modal.metadataEditor.labels.breaks') }>
-              <BreaksMetadataInput id={ 'breaks' } content={ yamlMetadata.breaks }
-                                   onContentChange={ breaks => setNoteFrontmatter({ ...yamlMetadata, breaks }) }/>
+              <BreaksMetadataInput frontmatterKey={ 'breaks' } content={ yamlMetadata.breaks }
+                                   onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'tags' } label={ t('editor.modal.metadataEditor.labels.tags') }>
-              <TagsMetadataInput id={ 'tags' } content={ yamlMetadata.tags }
-                                 onContentChange={ tags => setNoteFrontmatter({ ...yamlMetadata, tags }) }/>
+              <TagsMetadataInput frontmatterKey={ 'tags' } content={ yamlMetadata.tags }
+                                 onContentChange={ updateFrontmatter }/>
             </InputLabel>
             <InputLabel id={ 'GA' } label={ t('editor.modal.metadataEditor.labels.GA') }>
-              <StringMetadataInput id={ 'GA' } content={ yamlMetadata.GA }
-                                   onContentChange={ GA => setNoteFrontmatter({ ...yamlMetadata, GA }) }/>
+              <StringMetadataInput frontmatterKey={ 'GA' } content={ yamlMetadata.GA }
+                                   onContentChange={ updateFrontmatter }/>
             </InputLabel>
           </Col>
         </Row>
diff --git a/src/components/editor-page/metadata-editor/string-metadata-input.tsx b/src/components/editor-page/metadata-editor/string-metadata-input.tsx
index 5d556c9505..aa684a472d 100644
--- a/src/components/editor-page/metadata-editor/string-metadata-input.tsx
+++ b/src/components/editor-page/metadata-editor/string-metadata-input.tsx
@@ -7,14 +7,14 @@
 import React, { useCallback } from 'react'
 import { MetadataInputFieldProps } from './metadata-editor'
 
-export const StringMetadataInput: React.FC<MetadataInputFieldProps<string>> = ({ id, content, onContentChange }) => {
+export const StringMetadataInput: React.FC<MetadataInputFieldProps<string>> = ({ content, onContentChange, frontmatterKey }) => {
   const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
-    onContentChange(event.currentTarget.value)
-  }, [onContentChange])
+    onContentChange({ [frontmatterKey]: event.currentTarget.value })
+  }, [frontmatterKey, onContentChange])
 
   return (
     <input
-      id={ id }
+      id={ frontmatterKey }
       type="text"
       className={ 'form-control' }
       value={ content }
diff --git a/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx
index 5e7f2268a6..941f2f1add 100644
--- a/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx
+++ b/src/components/editor-page/metadata-editor/string-metadata-textarea.tsx
@@ -7,14 +7,14 @@
 import React, { useCallback } from 'react'
 import { MetadataInputFieldProps } from './metadata-editor'
 
-export const StringMetadataTextarea: React.FC<MetadataInputFieldProps<string>> = ({ id, content, onContentChange }) => {
+export const StringMetadataTextarea: React.FC<MetadataInputFieldProps<string>> = ({ frontmatterKey, content, onContentChange }) => {
   const onChange = useCallback((event: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onContentChange(event.currentTarget.value)
+    onContentChange({ [frontmatterKey]: event.currentTarget.value })
   }, [onContentChange])
 
   return (
     <textarea
-      id={ id }
+      id={ frontmatterKey }
       className={ 'form-control' }
       value={ content }
       onChange={ onChange }
diff --git a/src/components/editor-page/metadata-editor/tags-metadata-input.tsx b/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
index e876f96221..737d7eb181 100644
--- a/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
+++ b/src/components/editor-page/metadata-editor/tags-metadata-input.tsx
@@ -4,18 +4,18 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React, { Fragment, useCallback, useState } from 'react'
+import React, { Fragment, useCallback, useMemo, useState } from 'react'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
 import { MetadataInputFieldProps } from './metadata-editor'
 import './tags-metadata-input.scss'
 
-export const TagsMetadataInput: React.FC<MetadataInputFieldProps<string[]>> = ({ id, content, onContentChange }) => {
+export const TagsMetadataInput: React.FC<MetadataInputFieldProps<string[]>> = ({ frontmatterKey, content, onContentChange }) => {
 
   const [newTag, setNewTag] = useState<string>('')
 
   const addTag = useCallback(() => {
     if (!/^\s*$/.test(newTag)) {
-      onContentChange([...content, newTag])
+      onContentChange({ tags: [...content, newTag] })
       setNewTag('')
     }
   }, [content, newTag, onContentChange])
@@ -31,26 +31,28 @@ export const TagsMetadataInput: React.FC<MetadataInputFieldProps<string[]>> = ({
   }, [])
 
   const dismissTag = useCallback((clickedTag: string) => {
-    onContentChange(content.filter(tag => tag !== clickedTag))
+    onContentChange({ 'tags': content.filter(tag => tag !== clickedTag) })
   }, [content, onContentChange])
 
+  const tags = useMemo(() => {
+    return content.map((tag, index) => {
+      return (
+        <div className='rounded-pill mr-1 px-2 bg-primary tag-bubble' key={ index }>
+          <span className={ 'user-select-none' }>{ tag }</span>
+          <ForkAwesomeIcon icon={ 'times' } className='pl-1 cursor-pointer' onClick={ () => dismissTag(tag) }/>
+        </div>
+      )
+    })
+  }, [content, dismissTag])
+
   return (
     <Fragment>
       <div className='d-flex flex-row mb-2 mt-1 overflow-x-scroll'>
-        {
-          content.map(tag => {
-            return (
-              <div className='rounded-pill mr-1 px-2 bg-primary tag-bubble' key={ tag }>
-                <span className={ 'user-select-none' }>{ tag }</span>
-                <ForkAwesomeIcon icon={ 'times' } className='pl-1 cursor-pointer' onClick={ () => dismissTag(tag) }/>
-              </div>
-            )
-          })
-        }
+        { tags }
       </div>
       <input
         type="text"
-        id={ id }
+        id={ frontmatterKey }
         className='form-control'
         value={ newTag }
         onKeyDown={ onKeyDown }
diff --git a/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx b/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
index f25003dc66..bf078a3d7f 100644
--- a/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
+++ b/src/components/editor-page/metadata-editor/text-direction-metadata-input.tsx
@@ -4,38 +4,41 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import React from 'react'
+import React, { useCallback } from 'react'
 import { ToggleButton, ToggleButtonGroup } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import { ForkAwesomeIcon } from '../../common/fork-awesome/fork-awesome-icon'
-import { TextDirection } from '../note-frontmatter/note-frontmatter'
 import { MetadataInputFieldProps } from './metadata-editor'
+import { NoteTextDirection } from '../note-frontmatter/note-frontmatter'
 
 
-export const TextDirectionMetadataInput: React.FC<MetadataInputFieldProps<TextDirection>> = ({ id, content, onContentChange }) => {
+export const TextDirectionMetadataInput: React.FC<MetadataInputFieldProps<NoteTextDirection>> = ({ frontmatterKey, content, onContentChange }) => {
   const { t } = useTranslation()
 
+  const toggleButtonSelect = useCallback((value: NoteTextDirection) => {
+    onContentChange({ dir: value })
+  }, [onContentChange])
+
   return (
     <ToggleButtonGroup
       className={ 'd-block' }
       type="radio"
-      name={ id }
-      id={ id }
-      value={ content }>
+      name={ frontmatterKey }
+      id={ frontmatterKey }
+      value={ content }
+      onChange={ toggleButtonSelect }>
       <ToggleButton
-        value={ TextDirection.LTR }
+        value={ NoteTextDirection.LTR }
         variant="outline-secondary"
-        title={ t('editor.modal.metadataEditor.labels.LTR') }
-        onChange={ () => onContentChange(TextDirection.LTR) }>
+        title={ t('editor.modal.metadataEditor.labels.LTR') }>
         <ForkAwesomeIcon icon={ 'align-left' }/>
         &nbsp;
         <Trans i18nKey={ 'editor.modal.metadataEditor.labels.LTR' }/>
       </ToggleButton>
       <ToggleButton
-        value={ TextDirection.RTL }
+        value={ NoteTextDirection.RTL }
         variant="outline-secondary"
-        title={ t('editor.modal.metadataEditor.labels.RTL') }
-        onChange={ () => onContentChange(TextDirection.RTL) }>
+        title={ t('editor.modal.metadataEditor.labels.RTL') }>
         <ForkAwesomeIcon icon={ 'align-right' }/>
         &nbsp;
         <Trans i18nKey={ 'editor.modal.metadataEditor.labels.RTL' }/>
diff --git a/src/components/editor-page/note-frontmatter/note-frontmatter.ts b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
index 9c1bc80c18..bd27680f4f 100644
--- a/src/components/editor-page/note-frontmatter/note-frontmatter.ts
+++ b/src/components/editor-page/note-frontmatter/note-frontmatter.ts
@@ -7,18 +7,18 @@
 // import { RevealOptions } from 'reveal.js'
 
 export interface RawNoteFrontmatter {
-  title: string | undefined
-  description: string | undefined
-  tags: string | string[] | undefined
-  robots: string | undefined
-  lang: string | undefined
-  dir: string | undefined
-  breaks: boolean | undefined
-  GA: string | undefined
-  disqus: string | undefined
-  type: string | undefined
-  slideOptions: unknown
-  opengraph: { [key: string]: string } | null
+  title?: string
+  description?: string
+  tags?: string | string[]
+  robots?: string
+  lang?: string
+  dir?: string
+  breaks?: boolean
+  GA?: string
+  disqus?: string
+  type?: string
+  slideOptions?: unknown
+  opengraph?: { [key: string]: string }
 }
 
 export const ISO6391 = ['aa', 'ab', 'af', 'am', 'ar', 'ar-ae', 'ar-bh', 'ar-dz', 'ar-eg', 'ar-iq', 'ar-jo', 'ar-kw',
@@ -58,7 +58,7 @@ export class NoteFrontmatter {
   disqus: string
   type: NoteType
   // slideOptions: RevealOptions
-  opengraph: Map<string, string>
+  opengraph: { [key: string]: string }
 
   constructor(rawData: RawNoteFrontmatter) {
     this.title = rawData.title ?? ''
@@ -88,6 +88,6 @@ export class NoteFrontmatter {
       this.tags = []
       this.deprecatedTagsSyntax = false
     }
-    this.opengraph = rawData?.opengraph ? new Map<string, string>(Object.entries(rawData.opengraph)) : new Map<string, string>()
+    this.opengraph = rawData?.opengraph ? rawData.opengraph : {}
   }
 }
diff --git a/src/redux/note-details/methods.ts b/src/redux/note-details/methods.ts
index ec42f8b618..c91a632d42 100644
--- a/src/redux/note-details/methods.ts
+++ b/src/redux/note-details/methods.ts
@@ -6,10 +6,11 @@
 
 import { store } from '..'
 import { Note } from '../../api/notes'
-import { NoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
+import { NoteFrontmatter, RawNoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 import { initialState } from './reducers'
 import {
   NoteDetailsActionType,
+  ReplaceFrontmatterInMarkdownContentAction,
   SetCheckboxInMarkdownContentAction,
   SetNoteDetailsAction,
   SetNoteDetailsFromServerAction,
@@ -24,6 +25,13 @@ export const setNoteMarkdownContent = (content: string): void => {
   } as SetNoteDetailsAction)
 }
 
+export const replaceFrontmatterInMarkdownContentAction = (frontmatter: RawNoteFrontmatter): void => {
+  store.dispatch({
+    type: NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT,
+    frontmatter
+  } as ReplaceFrontmatterInMarkdownContentAction)
+}
+
 export const setNoteDataFromServer = (apiResponse: Note): void => {
   store.dispatch({
     type: NoteDetailsActionType.SET_NOTE_DATA_FROM_SERVER,
diff --git a/src/redux/note-details/reducers.ts b/src/redux/note-details/reducers.ts
index 6b75fa21d8..f4d09e2ba2 100644
--- a/src/redux/note-details/reducers.ts
+++ b/src/redux/note-details/reducers.ts
@@ -10,18 +10,21 @@ import { Note } from '../../api/notes'
 import {
   NoteFrontmatter,
   NoteTextDirection,
-  NoteType
+  NoteType,
+  RawNoteFrontmatter
 } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 import {
   NoteDetails,
   NoteDetailsAction,
   NoteDetailsActionType,
+  ReplaceFrontmatterInMarkdownContentAction,
   SetCheckboxInMarkdownContentAction,
   SetNoteDetailsAction,
   SetNoteDetailsFromServerAction,
   SetNoteFrontmatterFromRenderingAction,
   UpdateNoteTitleByFirstHeadingAction
 } from './types'
+import yaml from 'js-yaml'
 
 export const initialState: NoteDetails = {
   markdownContent: '',
@@ -49,7 +52,7 @@ export const initialState: NoteDetails = {
     GA: '',
     disqus: '',
     type: NoteType.DOCUMENT,
-    opengraph: new Map<string, string>()
+    opengraph: {}
   }
 }
 
@@ -60,6 +63,11 @@ export const NoteDetailsReducer: Reducer<NoteDetails, NoteDetailsAction> = (stat
         ...state,
         markdownContent: (action as SetNoteDetailsAction).content
       }
+    case NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT:
+      return {
+        ...state,
+        markdownContent: replaceFrontmatterInMarkdownContent(state.markdownContent, (action as ReplaceFrontmatterInMarkdownContentAction).frontmatter)
+      }
     case NoteDetailsActionType.UPDATE_NOTE_TITLE_BY_FIRST_HEADING:
       return {
         ...state,
@@ -88,6 +96,34 @@ export const NoteDetailsReducer: Reducer<NoteDetails, NoteDetailsAction> = (stat
   }
 }
 
+const replaceFrontmatterInMarkdownContent = (markdownContent: string, newFrontmatterValues: RawNoteFrontmatter): string => {
+  const lines = markdownContent.split('\n')
+  let frontMatterEndIndex: number | undefined = undefined
+
+  if (lines[0] === '---') {
+    for (let lineIndex = 1; lineIndex < lines.length; lineIndex += 1) {
+      if (lines[lineIndex] === '---') {
+        frontMatterEndIndex = lineIndex
+        break
+      }
+    }
+  }
+
+  let oldFrontmatter: RawNoteFrontmatter | undefined
+  if (frontMatterEndIndex === undefined) {
+    oldFrontmatter = {}
+  } else {
+    const oldFrontmatterLines = lines.filter((value, index) => index > 0 && index < (frontMatterEndIndex as number))
+    oldFrontmatter = yaml.load(oldFrontmatterLines.join('\n')) as RawNoteFrontmatter
+  }
+
+  const newFrontmatter = Object.assign(oldFrontmatter, newFrontmatterValues)
+  const markdownContentWithoutFrontmatter = lines.filter((value, index) => index > (frontMatterEndIndex as number))
+  console.log(newFrontmatter)
+
+  return `---\n${ yaml.dump(newFrontmatter) }---\n${ markdownContentWithoutFrontmatter.join('\n') }`
+}
+
 const TASK_REGEX = /(\s*[-*] )(\[[ xX]])( .*)/
 const setCheckboxInMarkdownContent = (markdownContent: string, lineInMarkdown: number, checked: boolean): string => {
   const lines = markdownContent.split('\n')
@@ -104,8 +140,8 @@ const setCheckboxInMarkdownContent = (markdownContent: string, lineInMarkdown: n
 const generateNoteTitle = (frontmatter: NoteFrontmatter, firstHeading?: string) => {
   if (frontmatter?.title && frontmatter?.title !== '') {
     return frontmatter.title.trim()
-  } else if (frontmatter?.opengraph && frontmatter?.opengraph.get('title') && frontmatter?.opengraph.get('title') !== '') {
-    return (frontmatter?.opengraph.get('title') ?? firstHeading ?? '').trim()
+  } else if (frontmatter?.opengraph['title'] !== '') {
+    return (frontmatter?.opengraph['title'] ?? firstHeading ?? '').trim()
   } else {
     return (firstHeading ?? firstHeading ?? '').trim()
   }
diff --git a/src/redux/note-details/types.ts b/src/redux/note-details/types.ts
index 313c50202c..1a85574f8b 100644
--- a/src/redux/note-details/types.ts
+++ b/src/redux/note-details/types.ts
@@ -7,14 +7,15 @@
 import { DateTime } from 'luxon'
 import { Action } from 'redux'
 import { Note } from '../../api/notes'
-import { NoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
+import { NoteFrontmatter, RawNoteFrontmatter } from '../../components/editor-page/note-frontmatter/note-frontmatter'
 
 export enum NoteDetailsActionType {
   SET_DOCUMENT_CONTENT = 'note-details/set',
   SET_NOTE_DATA_FROM_SERVER = 'note-details/data/server/set',
   SET_NOTE_FRONTMATTER = 'note-details/frontmatter/set',
   UPDATE_NOTE_TITLE_BY_FIRST_HEADING = 'note-details/update-note-title-by-first-heading',
-  SET_CHECKBOX_IN_MARKDOWN_CONTENT = 'note-details/toggle-checkbox-in-markdown-content'
+  SET_CHECKBOX_IN_MARKDOWN_CONTENT = 'note-details/toggle-checkbox-in-markdown-content',
+  REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT = 'note-details/replace-frontmatter-in-markdown-content'
 }
 
 interface LastChange {
@@ -45,6 +46,11 @@ export interface SetNoteDetailsAction extends NoteDetailsAction {
   content: string
 }
 
+export interface ReplaceFrontmatterInMarkdownContentAction extends NoteDetailsAction {
+  type: NoteDetailsActionType.REPLACE_FRONTMATTER_IN_MARKDOWN_CONTENT
+  frontmatter: RawNoteFrontmatter
+}
+
 export interface SetNoteDetailsFromServerAction extends NoteDetailsAction {
   type: NoteDetailsActionType.SET_NOTE_DATA_FROM_SERVER
   note: Note