Added importer wisemapping

packages/mindplot/src/components/import/FreemindImporter.ts

@@ -25,15 +25,17 @@ import XMLSerializerFactory from '../persistence/XMLSerializerFactory';
 export default class FreemindImporter extends Importer {
   private mindmap: Mindmap;
 
+  private freemindInput: string;
+
   private freemindMap: FreemindMap;
 
   private nodesmap: Map<string, NodeModel>;
 
   private relationship: Array<RelationshipModel>;
 
-  constructor(map: FreemindMap) {
+  constructor(map: string) {
     super();
-    this.freemindMap = map;
+    this.freemindInput = map;
   }
 
   import(nameMap: string, description: string): Promise<string> {
@@ -42,6 +44,10 @@ export default class FreemindImporter extends Importer {
     this.relationship = new Array<RelationshipModel>();
     let wiseTopicId = 0;
 
+    const parser = new DOMParser();
+    const freemindDoc = parser.parseFromString(this.freemindInput, 'application/xml');
+    this.freemindMap = new FreemindMap().loadFromDom(freemindDoc);
+
     const version: string = this.freemindMap.getVersion();
 
     if (!version || version.startsWith('freeplane')) {

packages/mindplot/src/components/import/TextImporterFactory.ts

@@ -1,14 +1,16 @@
+import WisemappingImporter from './WisemappingImporter';
 import FreemindImporter from './FreemindImporter';
-import FreemindMap from '../export/freemind/Map';
 import Importer from './Importer';
 
-type textType = 'mm';
+type textType = 'wxml' | 'mm';
-type mapType = FreemindMap
 
 export default class TextImporterFactory {
-  static create(type: textType, map: mapType): Importer {
+  static create(type: textType, map: string): Importer {
     let result: Importer;
     switch (type) {
+      case 'wxml':
+        result = new WisemappingImporter(map);
+        return result;
       case 'mm':
         result = new FreemindImporter(map);
         return result;

packages/mindplot/src/components/import/WisemappingImporter.ts

@@ -0,0 +1,29 @@
+import Mindmap from '../model/Mindmap';
+import XMLSerializerFactory from '../persistence/XMLSerializerFactory';
+import Importer from './Importer';
+
+export default class WisemappingImporter extends Importer {
+  private wisemappingInput: string;
+
+  private mindmap: Mindmap;
+
+  constructor(map: string) {
+    super();
+    this.wisemappingInput = map;
+  }
+
+  import(nameMap: string, description: string): Promise<string> {
+    const parser = new DOMParser();
+    const wiseDoc = parser.parseFromString(this.wisemappingInput, 'application/xml');
+
+    const serialize = XMLSerializerFactory.createInstanceFromDocument(wiseDoc);
+    this.mindmap = serialize.loadFromDom(wiseDoc, nameMap);
+
+    this.mindmap.setDescription(description);
+
+    const mindmapToXml = serialize.toXML(this.mindmap);
+
+    const xmlStr = new XMLSerializer().serializeToString(mindmapToXml);
+    return Promise.resolve(xmlStr);
+  }
+}

packages/mindplot/src/index.ts

@@ -26,7 +26,9 @@ import MockPersistenceManager from './components/MockPersistenceManager';
 import DesignerOptionsBuilder from './components/DesignerOptionsBuilder';
 import ImageExporterFactory from './components/export/ImageExporterFactory';
 import TextExporterFactory from './components/export/TextExporterFactory';
+import TextImporterFactory from './components/import/TextImporterFactory';
 import Exporter from './components/export/Exporter';
+import Importer from './components/import/Importer';
 import DesignerKeyboard from './components/DesignerKeyboard';
 import EditorRenderMode from './components/EditorRenderMode';
 import ImageIcon from './components/ImageIcon';
@@ -61,7 +63,9 @@ export {
   EditorRenderMode,
   TextExporterFactory,
   ImageExporterFactory,
+  TextImporterFactory,
   Exporter,
+  Importer,
   ImageIcon,
   $notify,
   $msg,

packages/webapp/src/components/maps-page/action-dispatcher/import-dialog/index.tsx

@@ -1,5 +1,6 @@
 import Button from '@mui/material/Button';
 import FormControl from '@mui/material/FormControl';
+import { Importer, TextImporterFactory } from '@wisemapping/mindplot';
 import React from 'react';
 
 import { FormattedMessage, useIntl } from 'react-intl';
@@ -14,7 +15,7 @@ export type ImportModel = {
     title: string;
     description?: string;
     contentType?: string;
-    content?: ArrayBuffer | null | string;
+    content?: null | string;
 };
 
 export type CreateProps = {
@@ -69,9 +70,6 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
             const file = files[0];
             // Closure to capture the file information.
             reader.onload = (event) => {
-                const fileContent = event?.target?.result;
-                model.content = fileContent;
-
                 // Suggest file name ...
                 const fileName = file.name;
                 if (fileName) {
@@ -80,11 +78,38 @@ const ImportDialog = ({ onClose }: CreateProps): React.ReactElement => {
                         model.title = title;
                     }
                 }
-                model.contentType =
+
-                    file.name.lastIndexOf('.wxml') != -1
+                const extensionFile = file.name.split('.')[1]
-                        ? 'application/xml'
+                const extensionAccept = ['wxml', 'mm'];
-                        : 'application/freemind';
+
-                setModel({ ...model });
+                if ( extensionAccept.find(ext => ext === extensionFile) ) {
+                    new Error('The file extension is invalid');
+                }
+
+                model.contentType = 'application/xml'
+
+                const fileContent = event?.target?.result;
+                const mapConent: string = typeof fileContent === 'string' ? fileContent : fileContent.toString();
+
+                let importer: Importer
+                switch(extensionFile) {
+                    case 'wxml':  {
+                        importer = TextImporterFactory.create('wxml', mapConent);
+                        break;
+                    }
+
+                    case 'mm': { 
+                        importer = TextImporterFactory.create('mm', mapConent);
+                        break;
+                    } 
+                }
+
+                importer.import(model.title, model.description)
+                    .then(res => {
+                        model.content = res;
+                        setModel({ ...model });
+                    })
+                    .catch(e => console.log(e));
             };
  
             // Read in the image file as a data URL.