rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: Added Super & HTML import options in Import modal. Google Keep notes will now also be imported as Super notes, with attachments if importing from HTML (#2433)

Browse Source
This commit is contained in:
Aman Harwara
2023-08-18 16:41:25 +05:30
committed by GitHub
parent 18b7728145
commit ca9895cac1
22 changed files with 432 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx
View File

@@ -11,6 +11,8 @@ const NoteImportTypeColors: Record<NoteImportType, string> = {
'google-keep': 'bg-[#fbbd00] text-[#000]',
aegis: 'bg-[#0d47a1] text-default',
plaintext: 'bg-default border border-border',
html: 'bg-accessory-tint-2',
super: 'bg-accessory-tint-1 text-accessory-tint-1',
}
const NoteImportTypeIcons: Record<NoteImportType, string> = {
@@ -19,6 +21,8 @@ const NoteImportTypeIcons: Record<NoteImportType, string> = {
'google-keep': 'gkeep',
aegis: 'aegis',
plaintext: 'plain-text',
html: 'rich-text',
super: 'file-doc',
}
const ImportModalFileItem = ({
@@ -53,13 +57,13 @@ const ImportModalFileItem = ({
useEffect(() => {
const detect = async () => {
const detectedService = await Importer.detectService(file.file)
const detectedService = await importer.detectService(file.file)
void setFileService(detectedService)
}
if (file.service === undefined) {
void detect()
}
}, [file, setFileService])
}, [file, importer, setFileService])
const notePayloads =
file.status === 'ready' && file.payloads

60
packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx
View File

@@ -5,12 +5,17 @@ import { observer } from 'mobx-react-lite'
import { useCallback } from 'react'
import Button from '../Button/Button'
import Icon from '../Icon/Icon'
import { useApplication } from '../ApplicationProvider'
import { FeatureStatus, NativeFeatureIdentifier } from '@standardnotes/snjs'
import { FeatureName } from '@/Controllers/FeatureName'
type Props = {
setFiles: ImportModalController['setFiles']
}
const ImportModalInitialPage = ({ setFiles }: Props) => {
const application = useApplication()
const selectFiles = useCallback(
async (service?: NoteImportType) => {
const files = await ClassicFileReader.selectFiles()
@@ -38,41 +43,46 @@ const ImportModalInitialPage = ({ setFiles }: Props) => {
</button>
<div className="text-center my-4 w-full">or import from:</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" />
<Button className="flex items-center !py-2" onClick={() => selectFiles('evernote')}>
<Icon type="evernote" className="text-[#14cc45] 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" />
<Button className="flex items-center !py-2" onClick={() => selectFiles('google-keep')}>
<Icon type="gkeep" className="text-[#fbbd00] mr-2" />
Google Keep
</Button>
<Button className="flex items-center bg-[#3360cc] !py-2" primary onClick={() => selectFiles('simplenote')}>
<Icon type="simplenote" className="mr-2" />
<Button className="flex items-center !py-2" onClick={() => selectFiles('simplenote')}>
<Icon type="simplenote" className="text-[#3360cc] 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 className="flex items-center !py-2" onClick={() => selectFiles('aegis')}>
<Icon type="aegis" className="bg-[#0d47a1] text-[#fff] rounded mr-2 p-1" size="normal" />
Aegis
</Button>
<Button className="flex items-center bg-info !py-2" onClick={() => selectFiles('plaintext')} primary>
<Icon type="plain-text" className="mr-2" />
Plaintext
<Button className="flex items-center !py-2" onClick={() => selectFiles('plaintext')}>
<Icon type="plain-text" className="text-info mr-2" />
Plaintext / Markdown
</Button>
<Button className="flex items-center !py-2" onClick={() => selectFiles('html')}>
<Icon type="rich-text" className="text-accessory-tint-2 mr-2" />
HTML
</Button>
<Button
className="flex items-center bg-accessory-tint-4 !py-2"
primary
onClick={() => selectFiles('plaintext')}
className="flex items-center !py-2"
onClick={() => {
const isEntitledToSuper =
application.features.getFeatureStatus(
NativeFeatureIdentifier.create(NativeFeatureIdentifier.TYPES.SuperEditor).getValue(),
) === FeatureStatus.Entitled
if (!isEntitledToSuper) {
application.showPremiumModal(FeatureName.Super)
return
}
selectFiles('super').catch(console.error)
}}
>
<Icon type="markdown" className="mr-2" />
Markdown
<Icon type="file-doc" className="text-accessory-tint-1 mr-2" />
Super (JSON)
</Button>
</div>
</>