Update README with demonstration

Author: jensmtg

README.md

@@ -1,6 +1,18 @@
 # Obsidian Diagrams.Net
 
+![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/jensmtg/obsidian-diagrams-net?style=for-the-badge&sort=semver)
+
+This repository contains a plugin for [Obsidian](https://obsidian.md/) for inserting and editing [diagrams.net](https://diagrams.net/) (previously draw.io) diagrams. It differs from the [drawio-obsidian](https://github.com/zapthedingbat/drawio-obsidian) plugin by using the embedded online editor, which requires an active internet connection. On the other hand, it provides the complete feature set.
+
+![Screencapture](demo.gif)
+
 This is a diagrams.net/draw.io-plugin proof of concept for Obsidian, using an online editor. Expect glitches.
 
-## Caveats:
-- Making a copy of a diagram will only copy the image, not the diagram file associated with it.
+
+> ## ⚠️ **Caveats**
+> As Obsidian itself is pre-release, with an unstable API, so is this plugin. There are some things you should be aware of if you are using it:
+> 
+> - Diagrams are saved as a separate file – ``MyDiagram.svg.xml``, alongside their image representation – ``Diagram.svg``. (The .xml-file can be opened directly in any diagrams.net-editor.)
+> - Moving and renaming a diagram inside Obsidian will do so for both the diagram file and the image file. However, since there is no "copy" event to listen to in the Obsidian API, copying a diagram means the new diagram will not have a diagram file associated with it, and as such, cannot be opened in the editor.
+> - Lastly; editing a diagram will not update the image in the active editor, you need to force a reload or navigate away and back to see the updates. If you have a good fix for this you are welcome to leave a pull request.
+> 

demo.gif

@@ -24,7 +24,7 @@ export default class DiagramsView extends ItemView {
     }
 
     constructor(leaf: WorkspaceLeaf, hostView: View,
-        initialFileInfo: { path: string, basename: string, svgPath: string, xmlPath: string, diagramExists: boolean } ) {
+        initialFileInfo: { path: string, basename: string, svgPath: string, xmlPath: string, diagramExists: boolean }) {
         super(leaf);
         this.filePath = initialFileInfo.path;
         this.fileName = initialFileInfo.basename;
@@ -58,7 +58,7 @@ export default class DiagramsView extends ItemView {
             }
         }
 
-        const close = () => {   
+        const close = () => {
             this.workspace.detachLeavesOfType(DIAGRAM_VIEW_TYPE);
         }
 
@@ -71,11 +71,11 @@ export default class DiagramsView extends ItemView {
                 if (!(svgFile instanceof TFile && xmlFile instanceof TFile)) {
                     return
                 }
-                this.vault.modifyBinary(svgFile, svgBuffer )
+                this.vault.modifyBinary(svgFile, svgBuffer)
                 this.vault.modify(xmlFile, msg.svgMsg.xml)
             }
             else {
-                this.vault.createBinary(this.svgPath, svgBuffer )
+                this.vault.createBinary(this.svgPath, svgBuffer)
                 this.vault.create(this.xmlPath, msg.svgMsg.xml)
             }
         }
@@ -107,7 +107,7 @@ export default class DiagramsView extends ItemView {
     }
 
     async onClose() {
-            ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
+        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
     }
 
 }

src/diagrams-view.tsx

@@ -55,13 +55,14 @@ export default class DiagramsNet extends Plugin {
 	}
 
 	isFileValidDiagram(file: TAbstractFile) {
+		let itIs = false
 		if (file instanceof TFile && file.extension === 'svg') {
 			const xmlFile = this.app.vault.getAbstractFileByPath(this.getXmlPath(file.path));
 			if (xmlFile && xmlFile instanceof TFile && xmlFile.extension === 'xml') {
-				return true
+				itIs = true
 			}
 		}
-		return false
+		return itIs
 	}
 
 	getXmlPath(path: string) {
@@ -133,10 +134,11 @@ export default class DiagramsNet extends Plugin {
 	}
 
 	handleRenameFile(file: TAbstractFile, oldname: string) {
-		if (this.isFileValidDiagram(file)) {
-			const xmlFile = this.app.vault.getAbstractFileByPath(this.getXmlPath(file.path));
-			this.vault.delete(xmlFile)
-			this.vault.rename(xmlFile, this.getXmlPath(file.path))
+		if (file instanceof TFile && file.extension === 'svg') {
+			const xmlFile = this.app.vault.getAbstractFileByPath(this.getXmlPath(oldname));
+			if (xmlFile && xmlFile instanceof TFile && xmlFile.extension === 'xml') {
+				this.vault.rename(xmlFile, this.getXmlPath(file.path))
+			}
 		}
 	}
 

src/main.tsx

@@ -177,9 +177,13 @@ function useDiagramsNet(onSaveCallback, onStopEditing, getName, getData) {
 
     function stopEditing() {
         onStopEditing()
-        console.log('stopEditing')
-        ReactDOM.render(<div id={frameId} />, document.getElementById(frameId));
-        window.removeEventListener('message', _handleMessageEvent)
+        try {
+            ReactDOM.render(<div id={frameId} />, document.getElementById(frameId));
+            window.removeEventListener('message', _handleMessageEvent)
+        }
+        catch {
+            // DOM node gone
+        }
     }
 
     return {