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

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)