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)

packages/web/src/javascripts/Components/ImportModal/ImportModalFileItem.tsx

@@ -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

packages/web/src/javascripts/Components/ImportModal/InitialPage.tsx

@@ -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>
     </>

packages/web/src/javascripts/Components/Modal/ModalOverlay.tsx

@@ -79,6 +79,7 @@ const ModalOverlay = forwardRef(
         tabIndex={0}
         className={classNames(
           'z-[1] pointer-events-auto m-0 flex h-full w-full flex-col border-[--popover-border-color] bg-default md:bg-[--popover-background-color] md:[backdrop-filter:var(--popover-backdrop-filter)] p-0 md:h-auto md:max-h-[85vh] md:w-160 md:rounded md:border md:shadow-main',
+          'focus-visible:shadow-none focus-visible:outline-none',
           className,
         )}
         backdrop={

packages/web/src/javascripts/Components/NoteView/NoteConflictResolutionModal/DiffView.tsx

@@ -31,14 +31,14 @@ export const DiffView = ({
     const firstTitle = firstNote.title
     const firstText =
       firstNote.noteType === NoteType.Super && convertSuperToMarkdown
-        ? new HeadlessSuperConverter().convertString(firstNote.text, 'md')
+        ? new HeadlessSuperConverter().convertSuperStringToOtherFormat(firstNote.text, 'md')
         : firstNote.text
 
     const secondNote = selectedNotes[1]
     const secondTitle = secondNote.title
     const secondText =
       secondNote.noteType === NoteType.Super && convertSuperToMarkdown
-        ? new HeadlessSuperConverter().convertString(secondNote.text, 'md')
+        ? new HeadlessSuperConverter().convertSuperStringToOtherFormat(secondNote.text, 'md')
         : secondNote.text
 
     const titleDiff = fastdiff(firstTitle, secondTitle, undefined, true)

packages/web/src/javascripts/Components/StyledTooltip/StyledTooltip.tsx

@@ -86,6 +86,7 @@ const StyledTooltip = ({
         className={classNames(
           'z-tooltip max-w-max rounded border border-border translucent-ui:border-[--popover-border-color] bg-contrast translucent-ui:bg-[--popover-background-color] [backdrop-filter:var(--popover-backdrop-filter)] px-3 py-1.5 text-sm text-foreground shadow',
           'opacity-60 [&[data-enter]]:opacity-100 [&[data-leave]]:opacity-60 transition-opacity duration-75',
+          'focus-visible:shadow-none focus-visible:outline-none',
           className,
         )}
         updatePosition={() => {

packages/web/src/javascripts/Components/SuperEditor/Plugins/ExportPlugin/ExportPlugin.ts

@@ -40,7 +40,7 @@ export const ExportPlugin = () => {
 
   const exportJson = useCallback(
     (title: string) => {
-      const content = converter.current.convertString(JSON.stringify(editor.getEditorState()), 'json')
+      const content = converter.current.convertSuperStringToOtherFormat(JSON.stringify(editor.getEditorState()), 'json')
       const blob = new Blob([content], { type: 'application/json' })
       downloadData(blob, `${sanitizeFileName(title)}.json`)
     },
@@ -49,7 +49,7 @@ export const ExportPlugin = () => {
 
   const exportMarkdown = useCallback(
     (title: string) => {
-      const content = converter.current.convertString(JSON.stringify(editor.getEditorState()), 'md')
+      const content = converter.current.convertSuperStringToOtherFormat(JSON.stringify(editor.getEditorState()), 'md')
       const blob = new Blob([content], { type: 'text/markdown' })
       downloadData(blob, `${sanitizeFileName(title)}.md`)
     },
@@ -58,7 +58,7 @@ export const ExportPlugin = () => {
 
   const exportHtml = useCallback(
     (title: string) => {
-      const content = converter.current.convertString(JSON.stringify(editor.getEditorState()), 'html')
+      const content = converter.current.convertSuperStringToOtherFormat(JSON.stringify(editor.getEditorState()), 'html')
       const blob = new Blob([content], { type: 'text/html' })
       downloadData(blob, `${sanitizeFileName(title)}.html`)
     },

packages/web/src/javascripts/Components/SuperEditor/Plugins/ImportPlugin/ImportPlugin.tsx

@@ -1,10 +1,11 @@
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { useEffect } from 'react'
-import { $convertFromMarkdownString, TRANSFORMERS } from '@lexical/markdown'
+import { $convertFromMarkdownString } from '@lexical/markdown'
 import { $createParagraphNode, $createRangeSelection, LexicalEditor } from 'lexical'
 import { handleEditorChange } from '../../Utils'
 import { SuperNotePreviewCharLimit } from '../../SuperEditor'
 import { $generateNodesFromDOM } from '@lexical/html'
+import { MarkdownTransformers } from '../../MarkdownTransformers'
 
 /** Note that markdown conversion does not insert new lines. See: https://github.com/facebook/lexical/issues/2815 */
 export default function ImportPlugin({
@@ -33,7 +34,7 @@ export default function ImportPlugin({
 
     editor.update(() => {
       if (format === 'md') {
-        $convertFromMarkdownString(text, [...TRANSFORMERS])
+        $convertFromMarkdownString(text, MarkdownTransformers)
       } else {
         const parser = new DOMParser()
         const dom = parser.parseFromString(text, 'text/html')

packages/web/src/javascripts/Components/SuperEditor/SuperNoteConverter.tsx

@@ -58,7 +58,7 @@ const SuperNoteConverter = ({
     }
 
     try {
-      return new HeadlessSuperConverter().convertString(note.text, format)
+      return new HeadlessSuperConverter().convertSuperStringToOtherFormat(note.text, format)
     } catch (error) {
       console.error(error)
     }

packages/web/src/javascripts/Components/SuperEditor/Tools/HeadlessSuperConverter.tsx

@@ -1,11 +1,19 @@
 import { createHeadlessEditor } from '@lexical/headless'
-import { $convertToMarkdownString } from '@lexical/markdown'
+import { $convertToMarkdownString, $convertFromMarkdownString } from '@lexical/markdown'
 import { SuperConverterServiceInterface } from '@standardnotes/snjs'
-import { $nodesOfType, LexicalEditor, ParagraphNode } from 'lexical'
+import {
+  $createParagraphNode,
+  $getRoot,
+  $insertNodes,
+  $nodesOfType,
+  LexicalEditor,
+  LexicalNode,
+  ParagraphNode,
+} from 'lexical'
 import BlocksEditorTheme from '../Lexical/Theme/Theme'
 import { BlockEditorNodes } from '../Lexical/Nodes/AllNodes'
 import { MarkdownTransformers } from '../MarkdownTransformers'
-import { $generateHtmlFromNodes } from '@lexical/html'
+import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'
 
 export class HeadlessSuperConverter implements SuperConverterServiceInterface {
   private editor: LexicalEditor
@@ -20,7 +28,16 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
     })
   }
 
-  convertString(superString: string, format: 'txt' | 'md' | 'html' | 'json'): string {
+  isValidSuperString(superString: string): boolean {
+    try {
+      this.editor.parseEditorState(superString)
+      return true
+    } catch (error) {
+      return false
+    }
+  }
+
+  convertSuperStringToOtherFormat(superString: string, toFormat: 'txt' | 'md' | 'html' | 'json'): string {
     if (superString.length === 0) {
       return superString
     }
@@ -31,7 +48,7 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
 
     this.editor.update(
       () => {
-        switch (format) {
+        switch (toFormat) {
           case 'txt':
           case 'md': {
             const paragraphs = $nodesOfType(ParagraphNode)
@@ -61,4 +78,58 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
 
     return content
   }
+
+  convertOtherFormatToSuperString(otherFormatString: string, fromFormat: 'txt' | 'md' | 'html' | 'json'): string {
+    if (otherFormatString.length === 0) {
+      return otherFormatString
+    }
+
+    if (fromFormat === 'json' && this.isValidSuperString(otherFormatString)) {
+      return otherFormatString
+    }
+
+    if (fromFormat === 'html') {
+      this.editor.update(
+        () => {
+          const root = $getRoot()
+          root.clear()
+
+          const parser = new DOMParser()
+          const dom = parser.parseFromString(otherFormatString, 'text/html')
+          const generatedNodes = $generateNodesFromDOM(this.editor, dom)
+          const nodesToInsert: LexicalNode[] = []
+          generatedNodes.forEach((node) => {
+            const type = node.getType()
+
+            // Wrap text & link nodes with paragraph since they can't
+            // be top-level nodes in Super
+            if (type === 'text' || type === 'link') {
+              const paragraphNode = $createParagraphNode()
+              paragraphNode.append(node)
+              nodesToInsert.push(paragraphNode)
+              return
+            } else {
+              nodesToInsert.push(node)
+            }
+
+            nodesToInsert.push($createParagraphNode())
+          })
+          $getRoot().selectEnd()
+          $insertNodes(nodesToInsert.concat($createParagraphNode()))
+        },
+        { discrete: true },
+      )
+    } else {
+      this.editor.update(
+        () => {
+          $convertFromMarkdownString(otherFormatString, MarkdownTransformers)
+        },
+        {
+          discrete: true,
+        },
+      )
+    }
+
+    return JSON.stringify(this.editor.getEditorState())
+  }
 }