Optional front-matter for markdown export

src/components/PreferencesModal/ExportTab.tsx

@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react'
+import { usePreferences } from '../../lib/preferences'
+import { useTranslation } from 'react-i18next'
+import { Section, SectionHeader, SectionControl } from './styled'
+import { FormCheckItem } from '../atoms/form'
+
+export default () => {
+  const { t } = useTranslation()
+  const { preferences, setPreferences } = usePreferences()
+
+  const toggleFrontMatterExport: React.ChangeEventHandler<
+    HTMLInputElement
+  > = useCallback(
+    event => {
+      setPreferences({
+        'export.markdown.includeFrontMatter': event.target.checked
+      })
+    },
+    [setPreferences]
+  )
+
+  return (
+    <div>
+      <Section>
+        <SectionHeader>{t('preferences.exportFrontMatter')}</SectionHeader>
+        <SectionControl>
+          <FormCheckItem
+            id='checkbox-include-front-matters'
+            type='checkbox'
+            checked={preferences['export.markdown.includeFrontMatter']}
+            onChange={toggleFrontMatterExport}
+          >
+            {t('preferences.exportFrontMatter')}
+          </FormCheckItem>
+        </SectionControl>
+      </Section>
+    </div>
+  )
+}

src/components/PreferencesModal/PreferencesModal.tsx

@@ -9,9 +9,10 @@ import MarkdownTab from './MarkdownTab'
 import AboutTab from './AboutTab'
 import BillingTab from './BillingTab'
 import ImportTab from './ImportTab'
+import ExportTab from './ExportTab'
 import {
   backgroundColor,
-  closeIconColor,
+  closeIconColor
 } from '../../lib/styled/styleFunctions'
 import { IconClose } from '../icons'
 import { useTranslation } from 'react-i18next'
@@ -84,6 +85,8 @@ const PreferencesModal = () => {
         return <BillingTab />
       case 'import':
         return <ImportTab />
+      case 'export':
+        return <ExportTab />
       case 'general':
       default:
         return <GeneralTab />
@@ -140,6 +143,12 @@ const PreferencesModal = () => {
           active={tab === 'import'}
           setTab={setTab}
         />
+        <TabButton
+          label='Export'
+          tab='export'
+          active={tab === 'export'}
+          setTab={setTab}
+        />
       </TabNav>
       <TabContent>{content}</TabContent>
       <CloseButton onClick={toggleClosed}>

src/components/PreferencesModal/styled.tsx

@@ -6,7 +6,7 @@ import {
   inputStyle,
   tableStyle,
   disabledUiTextColor,
-  PrimaryTextColor,
+  PrimaryTextColor
 } from '../../lib/styled/styleFunctions'
 
 export const Section = styled.section`

src/components/atoms/ToolbarExportButton.tsx

@@ -6,6 +6,7 @@ import { NoteDoc } from '../../lib/db/types'
 import {
   exportNoteAsHtmlFile,
   exportNoteAsMarkdownFile,
+  MarkdownExportOptions
 } from '../../lib/exports'
 import { usePreferences } from '../../lib/preferences'
 import { usePreviewStyle } from '../../lib/preview'
@@ -45,13 +46,13 @@ const ToolbarExportButton = ({ className, note }: ToolbarExportButtonProps) => {
           type: MenuTypes.Normal,
           label: 'HTML export',
           onClick: async () =>
-            await exportNoteAsHtmlFile(note, preferences, previewStyle),
+            await exportNoteAsHtmlFile(note, preferences, previewStyle)
         },
         {
           type: MenuTypes.Normal,
           label: 'Markdown export',
-          onClick: async () => await exportNoteAsMarkdownFile(note),
-        },
+          onClick: async () => await exportNoteAsMarkdownFile(note, preferences)
+        }
       ])
     },
     [popup, note, preferences, previewStyle]

src/lib/exports.ts

@@ -16,7 +16,7 @@ import { NoteDoc } from './db/types'
 import { Preferences } from './preferences'
 
 const sanitizeSchema = mergeDeepRight(gh, {
-  attributes: { '*': ['className'] },
+  attributes: { '*': ['className'] }
 })
 
 export const exportNoteAsHtmlFile = async (
@@ -30,15 +30,15 @@ export const exportNoteAsHtmlFile = async (
     .use(remarkRehype, { allowDangerousHTML: false })
     .use(rehypeCodeMirror, {
       ignoreMissing: true,
-      theme: preferences['markdown.codeBlockTheme'],
+      theme: preferences['markdown.codeBlockTheme']
     })
     .use(rehypeRaw)
     .use(rehypeSanitize, sanitizeSchema)
     .use(rehypeDocument, {
       title: note.title,
       style: previewStyle,
       css: 'https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css',
-      meta: { keywords: note.tags.join() },
+      meta: { keywords: note.tags.join() }
     })
     .use(rehypeStringify)
     .use(rehypeKatex)
@@ -59,7 +59,8 @@ export const exportNoteAsHtmlFile = async (
 }
 
 export const exportNoteAsMarkdownFile = async (
-  note: NoteDoc
+  note: NoteDoc,
+  preferences: Preferences
 ): Promise<void> => {
   await unified()
     .use(remarkParse)
@@ -70,14 +71,17 @@ export const exportNoteAsMarkdownFile = async (
         console.error(err)
         return
       }
-      downloadString(
-        [
+      let exportContent = [file.toString()]
+      if (preferences['export.markdown.includeFrontMatter']) {
+        exportContent = [
           '---',
           `title: "${note.title}"`,
           `tags: "${note.tags.join()}"`,
-          '---',
-          file.toString(),
-        ].join('\n'),
+          '---'
+        ].concat(exportContent)
+      }
+      downloadString(
+        exportContent.join('\n'),
         `${note.title.toLowerCase().replace(/\s+/g, '-')}.md`,
         'text/markdown'
       )

src/lib/preferences.ts

@@ -56,6 +56,9 @@ export interface Preferences {
   // Markdown
   'markdown.previewStyle': string
   'markdown.codeBlockTheme': string
+
+  // Export
+  'export.markdown.includeFrontMatter': boolean
 }
 
 function loadPreferences() {
@@ -98,6 +101,7 @@ const basePreferences: Preferences = {
   // Markdown
   'markdown.previewStyle': 'default',
   'markdown.codeBlockTheme': 'default',
+  'export.markdown.includeFrontMatter': true
 }
 
 function usePreferencesStore() {
@@ -111,7 +115,7 @@ function usePreferencesStore() {
   const mergedPreferences = useMemo(() => {
     return {
       ...basePreferences,
-      ...preferences,
+      ...preferences
     }
   }, [preferences])
 
@@ -135,13 +139,13 @@ function usePreferencesStore() {
     setClosed,
     toggleClosed,
     preferences: mergedPreferences,
-    setPreferences,
+    setPreferences
   }
 }
 
 export const {
   StoreProvider: PreferencesProvider,
-  useStore: usePreferences,
+  useStore: usePreferences
 } = createStoreContext(usePreferencesStore, 'preferences')
 
 export function useFirstUser() {

src/locales/de.ts

@@ -159,5 +159,9 @@ export default {
     'preferences.importFlow4': '4. Upload!',
     'preferences.importRemove': 'entfernen',
     'preferences.importUpload': 'Upload',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter':
+      'Front-Materie in den Markdown-Export einbeziehen'
+  }
 }

src/locales/enUS.ts

@@ -157,5 +157,8 @@ export default {
     'preferences.importFlow4': '4. Upload!',
     'preferences.importRemove': 'remove',
     'preferences.importUpload': 'Upload',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter': 'Include front-matters in Markdown export'
+  }
 }

src/locales/esES.ts

@@ -163,5 +163,9 @@ export default {
     'preferences.importFlow4': '4. Cargar!',
     'preferences.importRemove': 'Eliminar',
     'preferences.importUpload': 'Subir',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter':
+      'Incluir front-matter en la exportación Markdown'
+  }
 }

src/locales/frFR.ts

@@ -164,5 +164,9 @@ export default {
     'preferences.importFlow4': '4. Télécharger!',
     'preferences.importRemove': 'supprimer',
     'preferences.importUpload': 'Télécharger',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter':
+      "Inclure l'avant-propos dans l'exportation Markdown"
+  }
 }

src/locales/ja.ts

@@ -159,5 +159,9 @@ export default {
     'preferences.importFlow4': '4. アップロード',
     'preferences.importRemove': '削除',
     'preferences.importUpload': 'アップロード',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter':
+      'Markdownエクスポートにフロントマターを含める'
+  }
 }

src/locales/ko.ts

@@ -155,5 +155,8 @@ export default {
     'preferences.importFlow4': '4. 업로드!',
     'preferences.importRemove': '삭제',
     'preferences.importUpload': '업로드',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter': 'Markdown 내보내기에 선행 사항 포함'
+  }
 }

src/locales/ukUA.ts

@@ -157,5 +157,9 @@ export default {
     'preferences.importFlow4': '4. Upload!',
     'preferences.importRemove': 'Видалити',
     'preferences.importUpload': 'Завантажити',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter':
+      'Включіть експортну інформацію в експорті Markdown'
+  }
 }

src/locales/zhCN.ts

@@ -152,5 +152,8 @@ export default {
     'preferences.importFlow4': '4. 上传!',
     'preferences.importRemove': '移除',
     'preferences.importUpload': '上传',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter': '在Markdown导出中包括前题'
+  }
 }

src/locales/zhHK.ts

@@ -153,5 +153,8 @@ export default {
     'preferences.importFlow4': '4. 上傳!',
     'preferences.importRemove': '移除',
     'preferences.importUpload': '上傳',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter': '在標記導出中包括前物質'
+  }
 }

src/locales/zhTW.ts

@@ -152,5 +152,8 @@ export default {
     'preferences.importFlow4': '4. 上傳!',
     'preferences.importRemove': '移除',
     'preferences.importUpload': '上傳',
-  },
+
+    // Preferences ExportTab
+    'preferences.exportFrontMatter': '在Markdown导出中包括前题'
+  }
 }