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 = ({ title, noteContent })
- +
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 = ({ title, noteContent }) => { useTranslation() return ( @@ -34,10 +40,10 @@ const ExportMenu: React.FC = () => { - - - Markdown - + HTML @@ -61,5 +67,3 @@ const ExportMenu: React.FC = () => { ) } - -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 = ({ title, noteContent }) => { + return ( + download(noteContent, `${title}.md`, 'text/markdown')}> + + Markdown + + ) +}