fix: Fixed issue where non-image inlined files would not correctly be imported from a Markdown file

Author: amanharwara

packages/ui-services/src/Import/Importer.ts

@@ -164,6 +164,10 @@ export class Importer {
         return this.mutator.insertItem(note)
       }),
     )
+    return insertedItems
+  }
+
+  async uploadAndReplaceInlineFilesInInsertedItems(insertedItems: DecryptedItemInterface<ItemContent>[]) {
     for (const item of insertedItems) {
       if (!isNote(item)) {
         continue
@@ -185,6 +189,5 @@ export class Importer {
         console.error(error)
       }
     }
-    return insertedItems
   }
 }

packages/web/src/javascripts/Components/ImportModal/ImportModalController.ts

@@ -21,6 +21,7 @@ export type ImportModalFile = (
   | { status: 'ready'; payloads?: DecryptedTransferPayload[] }
   | { status: 'parsing' }
   | { status: 'importing' }
+  | { status: 'uploading-files' }
   | { status: 'success'; successMessage: string }
   | { status: 'error'; error: Error }
 ) &
@@ -105,7 +106,14 @@ export class ImportModalController {
     })
 
     try {
-      await this.importer.importFromTransferPayloads(payloads)
+      const insertedItems = await this.importer.importFromTransferPayloads(payloads)
+
+      this.updateFile({
+        ...file,
+        status: 'uploading-files',
+      })
+
+      await this.importer.uploadAndReplaceInlineFilesInInsertedItems(insertedItems)
 
       const notesImported = payloads.filter((payload) => payload.content_type === ContentType.TYPES.Note)
       const tagsImported = payloads.filter((payload) => payload.content_type === ContentType.TYPES.Tag)

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

@@ -103,6 +103,7 @@ const ImportModalFileItem = ({
             {file.status === 'pending' && 'Could not auto-detect service. Please select manually.'}
             {file.status === 'parsing' && 'Parsing...'}
             {file.status === 'importing' && 'Importing...'}
+            {file.status === 'uploading-files' && 'Uploading and embedding files...'}
             {file.status === 'error' && JSON.stringify(file.error)}
             {file.status === 'success' && file.successMessage}
           </div>

packages/web/src/javascripts/Components/SuperEditor/MarkdownTransformers.ts

@@ -31,6 +31,7 @@ import {
   $isRemoteImageNode,
   RemoteImageNode,
 } from './Plugins/RemoteImagePlugin/RemoteImageNode'
+import { $createInlineFileNode, $isInlineFileNode, InlineFileNode } from './Plugins/InlineFilePlugin/InlineFileNode'
 
 const HorizontalRule: ElementTransformer = {
   dependencies: [HorizontalRuleNode],
@@ -72,6 +73,26 @@ const IMAGE: TextMatchTransformer = {
   type: 'text-match',
 }
 
+const INLINE_FILE: TextMatchTransformer = {
+  dependencies: [InlineFileNode],
+  export: (node) => {
+    if (!$isInlineFileNode(node)) {
+      return null
+    }
+
+    return node.getTextContent()
+  },
+  importRegExp: /(?:\[([^[]*)\])(?:\((data:(.*);[^(]+)\))/,
+  regExp: /(?:\[([^[]*)\])(?:\((data:(.*);[^(]+)\))$/,
+  replace: (textNode, match) => {
+    const [, name, src, mimeType] = match
+    const inlineFileNode = $createInlineFileNode(src, mimeType, name)
+    textNode.replace(inlineFileNode)
+  },
+  trigger: ')',
+  type: 'text-match',
+}
+
 // Table transformer, taken from Lexical Playground
 const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/
 const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-*:? ?)+\|\s?$/
@@ -224,6 +245,7 @@ export const MarkdownTransformers = [
   TABLE,
   CHECK_LIST,
   IMAGE,
+  INLINE_FILE,
   ...ELEMENT_TRANSFORMERS,
   ...TEXT_FORMAT_TRANSFORMERS,
   ...TEXT_MATCH_TRANSFORMERS,

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

@@ -16,8 +16,9 @@ import { MarkdownTransformers } from '../MarkdownTransformers'
 import { $generateHtmlFromNodes, $generateNodesFromDOM } from '@lexical/html'
 import { FileNode } from '../Plugins/EncryptedFilePlugin/Nodes/FileNode'
 import { $createFileExportNode } from '../Lexical/Nodes/FileExportNode'
-import { $createInlineFileNode, InlineFileNode } from '../Plugins/InlineFilePlugin/InlineFileNode'
+import { $createInlineFileNode, $isInlineFileNode, InlineFileNode } from '../Plugins/InlineFilePlugin/InlineFileNode'
 import { $createFileNode } from '../Plugins/EncryptedFilePlugin/Nodes/FileUtils'
+import { RemoteImageNode } from '../Plugins/RemoteImagePlugin/RemoteImageNode'
 export class HeadlessSuperConverter implements SuperConverterServiceInterface {
   private importEditor: LexicalEditor
   private exportEditor: LexicalEditor
@@ -271,15 +272,19 @@ export class HeadlessSuperConverter implements SuperConverterServiceInterface {
       this.importEditor.update(
         () => {
           const inlineFileNodes = $nodesOfType(InlineFileNode)
-          if (inlineFileNodes.length === 0) {
+          const remoteImageNodes = $nodesOfType(RemoteImageNode).filter((node) => node.__src.startsWith('data:'))
+          const concatenatedNodes = [...inlineFileNodes, ...remoteImageNodes]
+          if (concatenatedNodes.length === 0) {
             resolve()
             return
           }
           Promise.all(
-            inlineFileNodes.map(async (node) => {
+            concatenatedNodes.map(async (node) => {
               const blob = await fetch(node.__src).then((response) => response.blob())
-              const file = new File([blob], node.__fileName || generateUuid.execute().getValue(), {
-                type: node.__mimeType,
+              const name = $isInlineFileNode(node) ? node.__fileName : node.__alt
+              const mimeType = $isInlineFileNode(node) ? node.__mimeType : node.__src.split(';')[0].split(':')[1]
+              const file = new File([blob], name || generateUuid.execute().getValue(), {
+                type: mimeType,
               })
 
               const uploadedFile = await uploadFile(file)