From 9f7a1068340cf21a8b15a93bba5dcf05e6185c78 Mon Sep 17 00:00:00 2001
From: Philip Molares <git@molar.es>
Date: Tue, 6 Oct 2020 12:43:17 +0200
Subject: [PATCH] added markdown export (#627)

---
 cypress/integration/export.spec.ts            | 48 +++++++++++++++++++
 src/components/common/download/download.ts    |  2 +-
 .../editor/document-bar/document-bar.tsx      |  2 +-
 .../editor/document-bar/menus/export-menu.tsx | 18 ++++---
 .../document-bar/menus/export/markdown.tsx    | 18 +++++++
 5 files changed, 79 insertions(+), 9 deletions(-)
 create mode 100644 cypress/integration/export.spec.ts
 create mode 100644 src/components/editor/document-bar/menus/export/markdown.tsx

diff --git a/cypress/integration/export.spec.ts b/cypress/integration/export.spec.ts
new file mode 100644
index 000000000..f661f1d9d
--- /dev/null
+++ b/cypress/integration/export.spec.ts
@@ -0,0 +1,48 @@
+const testTitle = 'testContent'
+const testContent = `---\ntitle: ${testTitle}\n---\nThis is some test content`
+
+describe('Export', () => {
+  beforeEach(() => {
+    cy.visit('/n/test')
+    cy.get('.btn.active.btn-outline-secondary > i.fa-columns')
+      .should('exist')
+    cy.get('.CodeMirror textarea')
+      .type('{ctrl}a', { force: true })
+      .type('{backspace}')
+    cy.get('.CodeMirror textarea')
+      .type(testContent)
+  })
+
+  it('Markdown', () => {
+    cy.get('#editor-menu-export')
+      .click()
+    cy.get('a.dropdown-item > i.fa-file-text')
+      .click()
+    cy.get('a[download]')
+      .then((anchor) => (
+        new Cypress.Promise((resolve: any, _: any) => {
+          // Use XHR to get the blob that corresponds to the object URL.
+          const xhr = new XMLHttpRequest();
+          xhr.open('GET', anchor.prop('href'), true);
+          xhr.responseType = 'blob';
+
+          // Once loaded, use FileReader to get the string back from the blob.
+          xhr.onload = () => {
+            if (xhr.status === 200) {
+              const blob = xhr.response;
+              const reader = new FileReader();
+              reader.onload = () => {
+                // Once we have a string, resolve the promise to let
+                // the Cypress chain continue, e.g. to assert on the result.
+                resolve(reader.result);
+              };
+              reader.readAsText(blob);
+            }
+          };
+          xhr.send();
+        })
+      ))
+      // Now the regular Cypress assertions should work.
+      .should('equal', testContent);
+  })
+})
diff --git a/src/components/common/download/download.ts b/src/components/common/download/download.ts
index 07f6738a3..d9de86210 100644
--- a/src/components/common/download/download.ts
+++ b/src/components/common/download/download.ts
@@ -5,5 +5,5 @@ export const download = (data: BlobPart, fileName: string, mimeType: string): vo
   helperElement.download = fileName
   document.body.appendChild(helperElement)
   helperElement.click()
-  helperElement.remove()
+  setTimeout(() => helperElement.remove(), 2000)
 }
diff --git a/src/components/editor/document-bar/document-bar.tsx b/src/components/editor/document-bar/document-bar.tsx
index 4ab20c8ab..0f379572a 100644
--- a/src/components/editor/document-bar/document-bar.tsx
+++ b/src/components/editor/document-bar/document-bar.tsx
@@ -29,7 +29,7 @@ export const DocumentBar: React.FC<DocumentBarProps> = ({ title, noteContent })
       </div>
       <div className="ml-auto navbar-nav">
         <ImportMenu/>
-        <ExportMenu/>
+        <ExportMenu title={title} noteContent={noteContent}/>
         <EditorMenu noteTitle={title}/>
         <ConnectionIndicator/>
       </div>
diff --git a/src/components/editor/document-bar/menus/export-menu.tsx b/src/components/editor/document-bar/menus/export-menu.tsx
index fff8b4dfb..4c4ea510b 100644
--- a/src/components/editor/document-bar/menus/export-menu.tsx
+++ b/src/components/editor/document-bar/menus/export-menu.tsx
@@ -3,8 +3,14 @@ import { Dropdown } from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import links from '../../../../links.json'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import { MarkdownExportDropdownItem } from './export/markdown'
 
-const ExportMenu: React.FC = () => {
+export interface ExportMenuProps {
+  title: string
+  noteContent: string
+}
+
+export const ExportMenu: React.FC<ExportMenuProps> = ({ title, noteContent }) => {
   useTranslation()
   return (
     <Dropdown className='small mx-1' alignRight={true}>
@@ -34,10 +40,10 @@ const ExportMenu: React.FC = () => {
         <Dropdown.Header>
           <Trans i18nKey='editor.documentBar.download'/>
         </Dropdown.Header>
-        <Dropdown.Item className='small'>
-          <ForkAwesomeIcon icon='file-text' className={'mx-2'}/>
-          Markdown
-        </Dropdown.Item>
+        <MarkdownExportDropdownItem
+          title={title}
+          noteContent={noteContent}
+        />
         <Dropdown.Item className='small'>
           <ForkAwesomeIcon icon='file-code-o' className={'mx-2'}/>
           HTML
@@ -61,5 +67,3 @@ const ExportMenu: React.FC = () => {
     </Dropdown>
   )
 }
-
-export { ExportMenu }
diff --git a/src/components/editor/document-bar/menus/export/markdown.tsx b/src/components/editor/document-bar/menus/export/markdown.tsx
new file mode 100644
index 000000000..e2bd268ef
--- /dev/null
+++ b/src/components/editor/document-bar/menus/export/markdown.tsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Dropdown } from 'react-bootstrap'
+import { download } from '../../../../common/download/download'
+import { ForkAwesomeIcon } from '../../../../common/fork-awesome/fork-awesome-icon'
+
+export interface MarkdownExportDropdownItemProps {
+  title: string
+  noteContent: string
+}
+
+export const MarkdownExportDropdownItem: React.FC<MarkdownExportDropdownItemProps> = ({ title, noteContent }) => {
+  return (
+    <Dropdown.Item className='small' onClick={() => download(noteContent, `${title}.md`, 'text/markdown')}>
+      <ForkAwesomeIcon icon='file-text' className={'mx-2'}/>
+      Markdown
+    </Dropdown.Item>
+  )
+}