diff --git a/locales/en-US/notes.properties b/locales/en-US/notes.properties index 6fb2a6e66..7cb70394f 100644 --- a/locales/en-US/notes.properties +++ b/locales/en-US/notes.properties @@ -112,3 +112,5 @@ darkThemeTitle=Dark # the text to Firefox Notes. Keep "Notes" in English, since it's the name of the # add-on. sendToNotes=Send to Notes + +exportAsHTML=Export as HTML… diff --git a/src/manifest.json b/src/manifest.json index 46ae80d5d..767cc0f05 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -40,6 +40,7 @@ }] }, "permissions": [ + "downloads", "contextMenus", "storage", "identity", diff --git a/src/sidebar/app/components/Footer.js b/src/sidebar/app/components/Footer.js index b9365312f..776a3b41f 100644 --- a/src/sidebar/app/components/Footer.js +++ b/src/sidebar/app/components/Footer.js @@ -2,10 +2,11 @@ import React from 'react'; import classNames from 'classnames'; import SyncIcon from './icons/SyncIcon'; -import FeedbackIcon from './icons/FeedbackIcon'; import { formatFooterTime } from '../utils'; import { SURVEY_PATH } from '../constants'; +import INITIAL_CONTENT from './editor/data/initialContent'; + const STATES = { SAVING: { @@ -53,6 +54,7 @@ class Footer extends React.Component { this.state = { isAuthenticated: false, lastModified: Date.now(), + content: INITIAL_CONTENT, isKintoLoaded: false, state: {} }; @@ -85,6 +87,7 @@ class Footer extends React.Component { // Switch to Date.now() to show when we pulled notes instead of 'eventData.last_modified' this.setState({ lastModified: Date.now(), + content: eventData.data || INITIAL_CONTENT, isKintoLoaded: true }); @@ -112,7 +115,8 @@ class Footer extends React.Component { case 'text-synced': // Enable sync-action this.setState({ - lastModified: eventData.last_modified + lastModified: eventData.last_modified, + content: eventData.content || INITIAL_CONTENT }); this.getLastSyncedTime(); break; @@ -135,6 +139,7 @@ class Footer extends React.Component { }); break; case 'disconnected': + clearTimeout(this.loginTimeout); this.setState({ isAuthenticated: false }); @@ -151,6 +156,19 @@ class Footer extends React.Component { } }; + this.exportAsHTML = () => { + const notesContent = this.state.content; + const exportedFileName = 'notes.html'; + const exportFileType = 'text/html'; + + const data = new Blob([`Notes${notesContent}`], {'type': exportFileType}); + const exportFilePath = window.URL.createObjectURL(data); + browser.downloads.download({ + url: exportFilePath, + filename: exportedFileName + }); + }; + this.disconnectFromSync = () => { this.setState({ state: STATES.DISCONNECTED @@ -262,28 +280,30 @@ class Footer extends React.Component { {this.rightText} - - -
+ { + !this.state.state.savingLayout && !this.state.state.ignoreChange ?
  • -
    • -
  • +
    • : null + }