feat: Added "Import" option in the account menu that allows you to import from plaintext/markdown files, Evernote exports, Simplenote exports, Google Keep exports and also convert Aegis exports to TokenVault notes
This commit is contained in:
Aman Harwara
@@ -0,0 +1,226 @@
|
||||
import { ViewControllerManager } from '@/Controllers/ViewControllerManager'
|
||||
import { ContentType, DecryptedTransferPayload, pluralize, SNTag, TagContent, UuidGenerator } from '@standardnotes/snjs'
|
||||
import { Importer } from '@standardnotes/ui-services'
|
||||
import { observer } from 'mobx-react-lite'
|
||||
import { useCallback, useReducer, useState } from 'react'
|
||||
import { useApplication } from '../ApplicationProvider'
|
||||
import Button from '../Button/Button'
|
||||
import { useStateRef } from '../Panes/useStateRef'
|
||||
import ModalDialog from '../Shared/ModalDialog'
|
||||
import ModalDialogButtons from '../Shared/ModalDialogButtons'
|
||||
import ModalDialogDescription from '../Shared/ModalDialogDescription'
|
||||
import ModalDialogLabel from '../Shared/ModalDialogLabel'
|
||||
import { ImportModalFileItem } from './ImportModalFileItem'
|
||||
import ImportModalInitialPage from './InitialPage'
|
||||
import { ImportModalAction, ImportModalFile, ImportModalState } from './Types'
|
||||
|
||||
const reducer = (state: ImportModalState, action: ImportModalAction): ImportModalState => {
|
||||
switch (action.type) {
|
||||
case 'setFiles':
|
||||
return {
|
||||
...state,
|
||||
files: action.files.map((file) => ({
|
||||
id: UuidGenerator.GenerateUuid(),
|
||||
file,
|
||||
status: action.service ? 'ready' : 'pending',
|
||||
service: action.service,
|
||||
})),
|
||||
}
|
||||
case 'updateFile':
|
||||
return {
|
||||
...state,
|
||||
files: state.files.map((file) => {
|
||||
if (file.file.name === action.file.file.name) {
|
||||
return action.file
|
||||
}
|
||||
return file
|
||||
}),
|
||||
}
|
||||
case 'removeFile':
|
||||
return {
|
||||
...state,
|
||||
files: state.files.filter((file) => file.id !== action.id),
|
||||
}
|
||||
case 'setImportTag':
|
||||
return {
|
||||
...state,
|
||||
importTag: action.tag,
|
||||
}
|
||||
case 'clearState':
|
||||
return {
|
||||
files: [],
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const initialState: ImportModalState = {
|
||||
files: [],
|
||||
}
|
||||
|
||||
const ImportModal = ({ viewControllerManager }: { viewControllerManager: ViewControllerManager }) => {
|
||||
const application = useApplication()
|
||||
const [importer] = useState(() => new Importer(application))
|
||||
const [state, dispatch] = useReducer(reducer, initialState)
|
||||
const { files } = state
|
||||
const filesRef = useStateRef(files)
|
||||
|
||||
const importFromPayloads = useCallback(
|
||||
async (file: ImportModalFile, payloads: DecryptedTransferPayload[]) => {
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
status: 'importing',
|
||||
},
|
||||
})
|
||||
|
||||
try {
|
||||
await importer.importFromTransferPayloads(payloads)
|
||||
|
||||
const notesImported = payloads.filter((payload) => payload.content_type === ContentType.Note)
|
||||
const tagsImported = payloads.filter((payload) => payload.content_type === ContentType.Tag)
|
||||
|
||||
const successMessage =
|
||||
`Successfully imported ${notesImported.length} ` +
|
||||
pluralize(notesImported.length, 'note', 'notes') +
|
||||
(tagsImported.length > 0
|
||||
? ` and ${tagsImported.length} ${pluralize(tagsImported.length, 'tag', 'tags')}`
|
||||
: '')
|
||||
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
status: 'success',
|
||||
successMessage,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
status: 'error',
|
||||
error: error instanceof Error ? error : new Error('Could not import file'),
|
||||
},
|
||||
})
|
||||
}
|
||||
},
|
||||
[importer],
|
||||
)
|
||||
|
||||
const parseAndImport = useCallback(async () => {
|
||||
const files = filesRef.current
|
||||
if (files.length === 0) {
|
||||
return
|
||||
}
|
||||
const importedPayloads: DecryptedTransferPayload[] = []
|
||||
for (const file of files) {
|
||||
if (!file.service) {
|
||||
return
|
||||
}
|
||||
|
||||
if (file.status === 'ready' && file.payloads) {
|
||||
await importFromPayloads(file, file.payloads)
|
||||
importedPayloads.push(...file.payloads)
|
||||
continue
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
status: 'parsing',
|
||||
},
|
||||
})
|
||||
|
||||
try {
|
||||
const payloads = await importer.getPayloadsFromFile(file.file, file.service)
|
||||
await importFromPayloads(file, payloads)
|
||||
importedPayloads.push(...payloads)
|
||||
} catch (error) {
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
status: 'error',
|
||||
error: error instanceof Error ? error : new Error('Could not import file'),
|
||||
},
|
||||
})
|
||||
}
|
||||
}
|
||||
const currentDate = new Date()
|
||||
const importTagPayload: DecryptedTransferPayload<TagContent> = {
|
||||
uuid: UuidGenerator.GenerateUuid(),
|
||||
created_at: currentDate,
|
||||
created_at_timestamp: currentDate.getTime(),
|
||||
updated_at: currentDate,
|
||||
updated_at_timestamp: currentDate.getTime(),
|
||||
content_type: ContentType.Tag,
|
||||
content: {
|
||||
title: `Imported on ${currentDate.toLocaleString()}`,
|
||||
expanded: false,
|
||||
iconString: '',
|
||||
references: importedPayloads
|
||||
.filter((payload) => payload.content_type === ContentType.Note)
|
||||
.map((payload) => ({
|
||||
content_type: ContentType.Note,
|
||||
uuid: payload.uuid,
|
||||
})),
|
||||
},
|
||||
}
|
||||
const [importTag] = await importer.importFromTransferPayloads([importTagPayload])
|
||||
if (importTag) {
|
||||
dispatch({
|
||||
type: 'setImportTag',
|
||||
tag: importTag as SNTag,
|
||||
})
|
||||
}
|
||||
}, [filesRef, importFromPayloads, importer])
|
||||
|
||||
const closeDialog = useCallback(() => {
|
||||
viewControllerManager.isImportModalVisible.set(false)
|
||||
if (state.importTag) {
|
||||
void viewControllerManager.navigationController.setSelectedTag(state.importTag, 'all', {
|
||||
userTriggered: true,
|
||||
})
|
||||
}
|
||||
dispatch({
|
||||
type: 'clearState',
|
||||
})
|
||||
}, [state.importTag, viewControllerManager.isImportModalVisible, viewControllerManager.navigationController])
|
||||
|
||||
if (!viewControllerManager.isImportModalVisible.get()) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<ModalDialog>
|
||||
<ModalDialogLabel closeDialog={closeDialog}>Import</ModalDialogLabel>
|
||||
<ModalDialogDescription>
|
||||
{!files.length && <ImportModalInitialPage dispatch={dispatch} />}
|
||||
{files.length > 0 && (
|
||||
<div className="divide-y divide-border">
|
||||
{files.map((file) => (
|
||||
<ImportModalFileItem file={file} key={file.id} dispatch={dispatch} importer={importer} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</ModalDialogDescription>
|
||||
<ModalDialogButtons>
|
||||
{files.length > 0 && files.every((file) => file.status === 'ready') && (
|
||||
<Button primary onClick={parseAndImport}>
|
||||
Import
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={closeDialog}>
|
||||
{files.length > 0 && files.every((file) => file.status === 'success' || file.status === 'error')
|
||||
? 'Close'
|
||||
: 'Cancel'}
|
||||
</Button>
|
||||
</ModalDialogButtons>
|
||||
</ModalDialog>
|
||||
)
|
||||
}
|
||||
|
||||
export default observer(ImportModal)
|
||||
@@ -0,0 +1,146 @@
|
||||
import { classNames, ContentType, DecryptedTransferPayload, pluralize } from '@standardnotes/snjs'
|
||||
import { Importer, NoteImportType } from '@standardnotes/ui-services'
|
||||
import { Dispatch, useCallback, useEffect } from 'react'
|
||||
import Icon from '../Icon/Icon'
|
||||
import { ImportModalAction, ImportModalFile } from './Types'
|
||||
|
||||
const NoteImportTypeColors: Record<NoteImportType, string> = {
|
||||
evernote: 'bg-[#14cc45] text-[#000]',
|
||||
simplenote: 'bg-[#3360cc] text-default',
|
||||
'google-keep': 'bg-[#fbbd00] text-[#000]',
|
||||
aegis: 'bg-[#0d47a1] text-default',
|
||||
plaintext: 'bg-default border border-border',
|
||||
}
|
||||
|
||||
const NoteImportTypeIcons: Record<NoteImportType, string> = {
|
||||
evernote: 'evernote',
|
||||
simplenote: 'simplenote',
|
||||
'google-keep': 'gkeep',
|
||||
aegis: 'aegis',
|
||||
plaintext: 'plain-text',
|
||||
}
|
||||
|
||||
export const ImportModalFileItem = ({
|
||||
file,
|
||||
dispatch,
|
||||
importer,
|
||||
}: {
|
||||
file: ImportModalFile
|
||||
dispatch: Dispatch<ImportModalAction>
|
||||
importer: Importer
|
||||
}) => {
|
||||
const setFileService = useCallback(
|
||||
async (service: NoteImportType | null) => {
|
||||
let payloads: DecryptedTransferPayload[] | undefined
|
||||
try {
|
||||
payloads = service ? await importer.getPayloadsFromFile(file.file, service) : undefined
|
||||
} catch {
|
||||
//
|
||||
}
|
||||
|
||||
dispatch({
|
||||
type: 'updateFile',
|
||||
file: {
|
||||
...file,
|
||||
service,
|
||||
status: service ? 'ready' : 'pending',
|
||||
payloads,
|
||||
},
|
||||
})
|
||||
},
|
||||
[dispatch, file, importer],
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
const detect = async () => {
|
||||
const detectedService = await Importer.detectService(file.file)
|
||||
void setFileService(detectedService)
|
||||
}
|
||||
if (file.service === undefined) {
|
||||
void detect()
|
||||
}
|
||||
}, [dispatch, file, setFileService])
|
||||
|
||||
const notePayloads =
|
||||
file.status === 'ready' && file.payloads
|
||||
? file.payloads.filter((payload) => payload.content_type === ContentType.Note)
|
||||
: []
|
||||
const tagPayloads =
|
||||
file.status === 'ready' && file.payloads
|
||||
? file.payloads.filter((payload) => payload.content_type === ContentType.Tag)
|
||||
: []
|
||||
|
||||
const payloadsImportMessage =
|
||||
`Ready to import ${notePayloads.length} ` +
|
||||
pluralize(notePayloads.length, 'note', 'notes') +
|
||||
(tagPayloads.length > 0 ? ` and ${tagPayloads.length} ${pluralize(tagPayloads.length, 'tag', 'tags')}` : '')
|
||||
|
||||
return (
|
||||
<div
|
||||
className={classNames(
|
||||
'flex gap-2 py-2 px-2',
|
||||
file.service == null ? 'flex-col items-start md:flex-row md:items-center' : 'items-center',
|
||||
)}
|
||||
>
|
||||
<div className="mr-auto flex items-center">
|
||||
{file.service && (
|
||||
<div className={classNames('mr-4 rounded p-2', NoteImportTypeColors[file.service])}>
|
||||
<Icon type={NoteImportTypeIcons[file.service]} size="medium" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex flex-col">
|
||||
<div>{file.file.name}</div>
|
||||
<div className="text-xs opacity-75">
|
||||
{file.status === 'ready'
|
||||
? notePayloads.length > 1 || tagPayloads.length
|
||||
? payloadsImportMessage
|
||||
: 'Ready to import'
|
||||
: null}
|
||||
{file.status === 'pending' && 'Could not auto-detect service. Please select manually.'}
|
||||
{file.status === 'parsing' && 'Parsing...'}
|
||||
{file.status === 'importing' && 'Importing...'}
|
||||
{file.status === 'error' && `${file.error}`}
|
||||
{file.status === 'success' && file.successMessage}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{file.service == null && (
|
||||
<div className="flex items-center">
|
||||
<form
|
||||
className="flex items-center"
|
||||
onSubmit={(event) => {
|
||||
event.preventDefault()
|
||||
const form = event.target as HTMLFormElement
|
||||
const service = form.elements[0] as HTMLSelectElement
|
||||
void setFileService(service.value as NoteImportType)
|
||||
}}
|
||||
>
|
||||
<select className="mr-2 rounded border border-border bg-default px-2 py-1 text-sm">
|
||||
<option value="evernote">Evernote</option>
|
||||
<option value="simplenote">Simplenote</option>
|
||||
<option value="google-keep">Google Keep</option>
|
||||
<option value="aegis">Aegis</option>
|
||||
<option value="plaintext">Plaintext</option>
|
||||
</select>
|
||||
<button type="submit" className="rounded border border-border bg-default p-1.5 hover:bg-contrast">
|
||||
<Icon type="check" size="medium" />
|
||||
</button>
|
||||
</form>
|
||||
<button
|
||||
className="ml-2 rounded border border-border bg-default p-1.5 hover:bg-contrast"
|
||||
onClick={() => {
|
||||
dispatch({
|
||||
type: 'removeFile',
|
||||
id: file.id,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Icon type="close" size="medium" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{file.status === 'success' && <Icon type="check-circle-filled" className="text-success" />}
|
||||
{file.status === 'error' && <Icon type="warning" className="text-danger" />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
import { ClassicFileReader } from '@standardnotes/filepicker'
|
||||
import { NoteImportType } from '@standardnotes/ui-services'
|
||||
import { useCallback } from 'react'
|
||||
import Button from '../Button/Button'
|
||||
import Icon from '../Icon/Icon'
|
||||
import { ImportModalAction } from './Types'
|
||||
|
||||
type Props = {
|
||||
dispatch: React.Dispatch<ImportModalAction>
|
||||
}
|
||||
|
||||
const ImportModalInitialPage = ({ dispatch }: Props) => {
|
||||
const selectFiles = useCallback(
|
||||
async (service?: NoteImportType) => {
|
||||
const files = await ClassicFileReader.selectFiles()
|
||||
|
||||
dispatch({
|
||||
type: 'setFiles',
|
||||
files,
|
||||
service,
|
||||
})
|
||||
},
|
||||
[dispatch],
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
onClick={() => selectFiles()}
|
||||
className="flex min-h-[30vh] w-full flex-col items-center justify-center gap-2 rounded border-2 border-dashed border-info p-2 hover:border-4"
|
||||
onDragStart={(e) => e.preventDefault()}
|
||||
onDragOver={(e) => e.preventDefault()}
|
||||
onDrop={(e) => {
|
||||
e.preventDefault()
|
||||
const files = Array.from(e.dataTransfer.files)
|
||||
dispatch({
|
||||
type: 'setFiles',
|
||||
files,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<div className="text-lg font-semibold">Drag and drop files to auto-detect and import</div>
|
||||
<div className="text-sm">Or click to open file picker</div>
|
||||
</button>
|
||||
<div className="relative mt-6 mb-6 w-full">
|
||||
<hr className="w-full border-border" />
|
||||
<div className="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-default p-1">
|
||||
or import from:
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-4">
|
||||
<Button
|
||||
className="flex items-center bg-[#14cc45] !py-2 text-[#000]"
|
||||
primary
|
||||
onClick={() => selectFiles('evernote')}
|
||||
>
|
||||
<Icon type="evernote" className="mr-2" />
|
||||
Evernote
|
||||
</Button>
|
||||
<Button
|
||||
className="flex items-center bg-[#fbbd00] !py-2 text-[#000]"
|
||||
primary
|
||||
onClick={() => selectFiles('google-keep')}
|
||||
>
|
||||
<Icon type="gkeep" className="mr-2" />
|
||||
Google Keep
|
||||
</Button>
|
||||
<Button className="flex items-center bg-[#3360cc] !py-2" primary onClick={() => selectFiles('simplenote')}>
|
||||
<Icon type="simplenote" className="mr-2" />
|
||||
Simplenote
|
||||
</Button>
|
||||
<Button className="flex items-center bg-[#0d47a1] !py-2" primary onClick={() => selectFiles('aegis')}>
|
||||
<Icon type="aegis" className="mr-2" />
|
||||
Aegis Authenticator
|
||||
</Button>
|
||||
<Button className="flex items-center bg-info !py-2" onClick={() => selectFiles('plaintext')} primary>
|
||||
<Icon type="plain-text" className="mr-2" />
|
||||
Plaintext
|
||||
</Button>
|
||||
<Button
|
||||
className="flex items-center bg-accessory-tint-4 !py-2"
|
||||
primary
|
||||
onClick={() => selectFiles('plaintext')}
|
||||
>
|
||||
<Icon type="markdown" className="mr-2" />
|
||||
Markdown
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImportModalInitialPage
|
||||
30
packages/web/src/javascripts/Components/ImportModal/Types.ts
Normal file
30
packages/web/src/javascripts/Components/ImportModal/Types.ts
Normal file
@@ -0,0 +1,30 @@
|
||||
import { DecryptedTransferPayload, SNTag } from '@standardnotes/models'
|
||||
import { NoteImportType } from '@standardnotes/ui-services'
|
||||
|
||||
type ImportModalFileCommon = {
|
||||
id: string
|
||||
file: File
|
||||
service: NoteImportType | null | undefined
|
||||
}
|
||||
|
||||
export type ImportModalFile = (
|
||||
| { status: 'pending' }
|
||||
| { status: 'ready'; payloads?: DecryptedTransferPayload[] }
|
||||
| { status: 'parsing' }
|
||||
| { status: 'importing' }
|
||||
| { status: 'success'; successMessage: string }
|
||||
| { status: 'error'; error: Error }
|
||||
) &
|
||||
ImportModalFileCommon
|
||||
|
||||
export type ImportModalState = {
|
||||
files: ImportModalFile[]
|
||||
importTag?: SNTag
|
||||
}
|
||||
|
||||
export type ImportModalAction =
|
||||
| { type: 'setFiles'; files: File[]; service?: NoteImportType }
|
||||
| { type: 'updateFile'; file: ImportModalFile }
|
||||
| { type: 'removeFile'; id: ImportModalFile['id'] }
|
||||
| { type: 'setImportTag'; tag: SNTag }
|
||||
| { type: 'clearState' }
|
||||
Reference in New Issue
Block a user