feat: support export markdown file

byteyilabs · Nov 27, 2020 · 782e805 · 782e805
1 parent d613f4a
commit 782e805
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 24 deletions.
diff --git a/packages/common/icons/markdown.svg b/packages/common/icons/markdown.svg
diff --git a/packages/common/services/file.js b/packages/common/services/file.js
@@ -33,6 +33,14 @@ export const exportJsonFile = async (data, filename, version) => {
   await exportFile(blob, filename);
 };
 
+export const exportMarkdownFile = async (data, filename) => {
+  // eslint-disable-next-line no-undef
+  const blob = new Blob([data], {
+    type: 'text/markdown;charset=utf-8'
+  });
+  await exportFile(blob, filename);
+};
+
 export const exportFile = async (blob, filename) => {
   const manifest = await browser.runtime.getManifest();
   if (typeof browser !== 'undefined' && manifest.browser === 'firefox') {
@@ -49,5 +57,6 @@ export const exportFile = async (blob, filename) => {
 export default {
   readAsJson,
   exportJsonFile,
+  exportMarkdownFile,
   exportFile
 };
diff --git a/packages/common/services/integration/evernote/generator.js b/packages/common/services/integration/evernote/generator.js
@@ -1,7 +1,6 @@
 import EvernoteSDK from 'evernote';
 import md5 from 'md5';
 import { getBinaryFromBase64 } from '../utils';
-import Markdown from '../../markdown';
 import { secondsToTime, buildAutoSeekUrl } from '../../../utils';
 import { INSTALLATION_URL } from '../../../constants';
 
@@ -58,9 +57,9 @@ class Generator {
       }
       nBody += `<div><span style="padding-right: 20px;"><a href="${escape(
         timestampedUrl
-      )}">${secondsToTime(note.timestamp)}</a></span><p>${Markdown.toText(
+      )}">${secondsToTime(note.timestamp)}</a></span><p>${
         note.content
-      )}</p></div>`;
+      }</p></div>`;
     });
 
     nBody += '</en-note>';

diff --git a/packages/common/services/integration/googledocs/generator.js b/packages/common/services/integration/googledocs/generator.js
@@ -1,5 +1,4 @@
 import { b64toBlob } from '../utils';
-import Markdown from '../../markdown';
 import { secondsToTime, buildAutoSeekUrl } from '../../../utils';
 import { INSTALLATION_URL } from '../../../constants';
 
@@ -217,7 +216,7 @@ class Generator {
   }
 
   addNoteContent(note) {
-    const content = Markdown.toText(note.content);
+    const content = note.content;
     this.requests.push({
       insertText: {
         text: content + '\n',

diff --git a/packages/common/services/integration/onenote/generator.js b/packages/common/services/integration/onenote/generator.js
@@ -1,4 +1,3 @@
-import Markdown from '../../markdown';
 import { secondsToTime, buildAutoSeekUrl } from '../../../utils';
 import { INSTALLATION_URL } from '../../../constants';
 
@@ -36,7 +35,7 @@ class Generator {
                     ${secondsToTime(note.timestamp)}
                   </a>
                 </span>
-                <p>${Markdown.toText(note.content)}</p>
+                <p>${note.content}</p>
               </div>
             `;
           })}

diff --git a/packages/common/services/markdown.js b/packages/common/services/markdown.js
@@ -1,4 +1,6 @@
 import marked from 'marked';
+import { secondsToTime, buildAutoSeekUrl } from '../utils';
+import { INSTALLATION_URL } from '../constants';
 
 class Markdown {
   static toText(markdownContent) {
@@ -10,6 +12,28 @@ class Markdown {
   static toHTML(markdownContent) {
     return marked(markdownContent);
   }
+
+  static pagesToMarkdown(pages) {
+    let data = `<!-- ${browser.i18n.getMessage(
+      'services_template_signature',
+      `<a href="${INSTALLATION_URL}">YiNote</a>`
+    )} -->\n\n`;
+
+    for (let page of pages) {
+      const { meta, notes } = page;
+      data += `<!-- # [${meta.title}](${meta.url}) -->\n\n`;
+
+      for (let note of notes) {
+        data += `<!-- ## [${secondsToTime(note.timestamp)}](${buildAutoSeekUrl(
+          meta.url,
+          note.timestamp
+        )}) -->\n\n`;
+        data += note.content + '\n\n';
+      }
+    }
+
+    return data;
+  }
 }
 
 export default Markdown;
diff --git a/packages/common/services/pdf/index.js b/packages/common/services/pdf/index.js
@@ -1,7 +1,6 @@
 import jsPDF from 'jspdf';
 import { secondsToTime, buildAutoSeekUrl, getFileUrl } from '../../utils';
 import StorageService from '../storage';
-import Markdown from '../markdown';
 import {
   WEBSITE_URL,
   KEY_APPLY_SEEK_SEC_ON_URL,
@@ -36,8 +35,8 @@ export default class PDFGenerator {
   async getBlobOutput({ url, title, notes }) {
     // TODO: pass in options instead of use settings from storage
     const settings = await StorageService.getStorage().getSettings();
-    this.seekSeconds = +settings[KEY_VIDEO_SEEK_SECONDS] || 0;
-    this.shouldApplySeekSecondsOnUrl = settings[KEY_APPLY_SEEK_SEC_ON_URL];
+    const seekSeconds = +settings[KEY_VIDEO_SEEK_SECONDS] || 0;
+    const shouldApplySeekSecondsOnUrl = settings[KEY_APPLY_SEEK_SEC_ON_URL];
 
     this.doc.setFont('msyh');
     this.doc.setFontType('normal');
@@ -62,7 +61,7 @@ export default class PDFGenerator {
     this.doc.setFontSize(12);
 
     for (const note of notes) {
-      let content = Markdown.toText(note.content);
+      let content = note.content;
       content = this.doc.splitTextToSize(content, 180);
       if (y + 66 + 6 + 6 * content.length > 300) {
         this.doc.addPage();
@@ -77,8 +76,8 @@ export default class PDFGenerator {
       this.doc.textWithLink(secondsToTime(note.timestamp), 20, y, {
         url: buildAutoSeekUrl(
           url,
-          this.shouldApplySeekSecondsOnUrl
-            ? note.timestamp - this.seekSeconds
+          shouldApplySeekSecondsOnUrl
+            ? note.timestamp - seekSeconds
             : note.timestamp
         )
       });

diff --git a/packages/extension/_locales/en/messages.json b/packages/extension/_locales/en/messages.json
@@ -117,6 +117,9 @@
   "options_bookmarks_export_tooltip": {
     "message": "Select bookmarks to export"
   },
+  "options_bookmarks_export_format_label": {
+    "message": "Export format:"
+  },
   "options_page_title": {
     "message": "Page Detail"
   },
@@ -135,6 +138,9 @@
   "options_page_onenote_tooltip": {
     "message": "Send notes to OneNote"
   },
+  "options_page_export_markdown_tooltip": {
+    "message": "Export as markdown"
+  },
   "options_page_open_tooltip": {
     "message": "Open page in new tab"
   },
@@ -241,7 +247,7 @@
     "message": "Cancel"
   },
   "services_template_signature": {
-    "message": "Generated from $INSTALLATION$",
+    "message": "Generated by $INSTALLATION$",
     "placeholders": {
       "installation": {
         "content": "$1"

diff --git a/packages/extension/src/options/containers/Bookmarks/Toolbar/index.js b/packages/extension/src/options/containers/Bookmarks/Toolbar/index.js
@@ -12,11 +12,12 @@ import {
   storage as StorageService,
   file as FileService
 } from '@yi-note/common/services';
+import Markdown from '@yi-note/common/services/markdown';
 
 const Toolbar = () => {
   const { t } = useTranslation('options');
   const {
-    toolbar: { exporting, filtering },
+    toolbar: { exporting, filtering, exportFormat },
     bookmarks
   } = useStoreState(state => state.bookmarks);
   const {
@@ -38,7 +39,11 @@ const Toolbar = () => {
     return StorageService.getStorage()
       .getPagesForExport(ids)
       .then(pages => {
-        FileService.exportJsonFile(pages, 'yi-note.json');
+        if (exportFormat === 'markdown') {
+          const data = Markdown.pagesToMarkdown(pages);
+          return FileService.exportMarkdownFile(data, 'yi-note.md');
+        }
+        return FileService.exportJsonFile(pages, 'yi-note.json');
       })
       .then(() => setExporting(false));
   };

diff --git a/packages/extension/src/options/containers/Bookmarks/index.js b/packages/extension/src/options/containers/Bookmarks/index.js
@@ -1,8 +1,18 @@
 import React, { useEffect } from 'react';
 import { useStoreState, useStoreActions } from 'easy-peasy';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
-import { Grid, List, ListItem, Chip } from '@material-ui/core';
+import {
+  Grid,
+  List,
+  ListItem,
+  Chip,
+  FormLabel,
+  RadioGroup,
+  FormControlLabel,
+  Radio
+} from '@material-ui/core';
 import BookmarkItem from './BookmarkItem';
 import NoBookmark from './NoBookmark';
 
@@ -11,17 +21,21 @@ const StyledContainer = styled(Grid)`
 `;
 
 const Bookmarks = () => {
+  const { t } = useTranslation('options');
   const { search } = useLocation();
   const {
     bookmarks: {
       bookmarks,
       tags,
-      toolbar: { filtering }
+      toolbar: { filtering, exporting, exportFormat }
     }
   } = useStoreState(state => state);
-  const { fetchBookmarks, fetchTags, selectTag } = useStoreActions(
-    actions => actions.bookmarks
-  );
+  const {
+    fetchBookmarks,
+    fetchTags,
+    selectTag,
+    toolbar: { setExportFormat }
+  } = useStoreActions(actions => actions.bookmarks);
 
   useEffect(() => {
     let tagsFromUrl = [];
@@ -37,12 +51,45 @@ const Bookmarks = () => {
     selectTag(tag);
   };
 
+  const handleExportFormatChange = e => setExportFormat(e.target.value);
+
   return (
     <StyledContainer>
       {bookmarks.length === 0 && !filtering ? (
         <NoBookmark />
       ) : (
         <Grid container>
+          {exporting && (
+            <Grid
+              item
+              container
+              direction="row"
+              alignItems="center"
+              spacing={1}
+            >
+              <Grid item>
+                <FormLabel>{t('bookmarks.export.format.label')}</FormLabel>
+              </Grid>
+              <Grid item>
+                <RadioGroup
+                  row
+                  value={exportFormat}
+                  onChange={handleExportFormatChange}
+                >
+                  <FormControlLabel
+                    value="json"
+                    control={<Radio size="small" />}
+                    label="JSON"
+                  />
+                  <FormControlLabel
+                    value="markdown"
+                    control={<Radio size="small" />}
+                    label="Markdown (no image)"
+                  />
+                </RadioGroup>
+              </Grid>
+            </Grid>
+          )}
           {filtering && (
             <Grid item container spacing={1}>
               {tags.map(({ tag, selected }) => (

diff --git a/packages/extension/src/options/containers/Page/Toolbar/index.js b/packages/extension/src/options/containers/Page/Toolbar/index.js
@@ -10,12 +10,14 @@ import {
 import {
   EvernoteIcon,
   GoogleDocsIcon,
-  OneNoteIcon
+  OneNoteIcon,
+  MarkdownIcon
 } from '@yi-note/common/icons';
 import {
   pdf as PDFService,
   file as FileService,
-  integration as IntegrationService
+  integration as IntegrationService,
+  markdown as MarkdownService
 } from '@yi-note/common/services';
 import { capitalize } from '@yi-note/common/utils';
 import { APP_ID } from '@yi-note/common/constants';
@@ -94,6 +96,11 @@ const Toolbar = () => {
     });
   };
 
+  const handleExportMarkdown = () => {
+    const data = MarkdownService.pagesToMarkdown([{ meta, notes }]);
+    return FileService.exportMarkdownFile(data, `yinote_${meta.title}.md`);
+  };
+
   const handleOpenPage = () => {
     window.open(meta.url, '_blank');
   };
@@ -134,6 +141,11 @@ const Toolbar = () => {
           <OneNoteIcon fill="#ffffff" />
         </IconButton>
       </Tooltip>
+      <Tooltip title={t('page.export.markdown.tooltip')}>
+        <IconButton color="inherit" onClick={handleExportMarkdown}>
+          <MarkdownIcon fill="#ffffff" />
+        </IconButton>
+      </Tooltip>
       <Tooltip title={t('page.open.tooltip')}>
         <IconButton color="inherit" onClick={handleOpenPage}>
           <OpenInNewIcon />

diff --git a/packages/extension/src/options/store/bookmarks.js b/packages/extension/src/options/store/bookmarks.js
@@ -65,6 +65,10 @@ export default {
     filtering: true,
     setFiltering: action((state, payload) => {
       state.filtering = payload;
+    }),
+    exportFormat: 'json',
+    setExportFormat: action((state, payload) => {
+      state.exportFormat = payload;
     })
   },
   reset: action(state => {