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/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())
+  }
 }