1.0.5-test2

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}

.gitignore

@@ -8,4 +8,6 @@ package-lock.json
 
 # build
 main.js
-*.js.map
+*.js.map
+stats.html
+hot-reload.bat

README.md

@@ -1,20 +1,34 @@
-## Obsidian-Excalidraw
+## Obsidian Excalidraw Plugin
+The Obsidian-Excalidraw plugin integrates [Excalidraw](https://excalidraw.com/), a feature rich sketching tool, into Obsidian. You can store and edit Excalidraw files in your vault and you can transclude drawings into your documents. For a showcase of Excalidraw features, please read my blog post [here](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html).
+
 ![image](https://user-images.githubusercontent.com/14358394/115391516-d9df4880-a1df-11eb-95a9-cad850cdf9fc.png)
 
 ### Key features
-- Use the Excalidraw command in the Command palette to open an existing drawing or to create a new one. You create a new one by typing its name and hitting enter.
-- Set up a default folder for your drawings in Settings, however you can have excalidraw drawings in any folder within your vault.
-- You can also set up a Template, by creating a drawing, customizing it the way you like it, and specifying the file as the template in settings.
-- There is a known bug when inserting images from the library, in some cases these images will be placed out of view, and you'll need to select scroll to view at the bottom of the screen. The bug was reproduced by the Excalidraw dev team, so I expect in the next update of Excalidraw it will be fixed.
-- Translusion of drawings into markdown documents
-- Drawings are saved to your vault as a file with the extension .excalidraw
-- You can also use the file explorer in your vault to open Excalidraw files
+- The plugin adds 3 commands to the command palette. 1) To create a new drawing. 2) To find and edit existing drawings in your vault, and 3) to transclude a drawing into a document.
+- You can also use the file explorer in your vault to open Excalidraw files.
+- You can set up a default folder for saving new drawings in Settings. 
+- You can set up a Template by creating a drawing, customizing it the way you like it, and specifying the file as the template in settings.
+- The plugin saves drawings to your vault as a file with the .excalidraw file-extension.
+- You can set the size of embedded image using the [[image.excalidraw|100]] or [[image.excalidraw|100x100]] format.
+
+### How to?
+- Add a library: Click [browse libraries](https://libraries.excalidraw.com/?target=_excalidraw&sort=default) in Excalidraw. Download the preferred library and close browser tab. Click Load library in Excalidraw-Obsidian to load your locally saved library.
+
+### Known issues
+- When inserting images from the library, sometimes these images appear out of view. You’ll need to select “scroll to view” at the bottom of the screen. This is a bug in Excalidraw. The Excalidraw development team has successfully reproduced the bug and promised to resolve it in the next update of Excalidraw.
+- On iPad: As you draw left to right it opens left sidebar. Draw right to left, opens right sidebar. Draw down, opens commands palette. So seems open is emulating the gestures, even when drawing towards the center. I have raised the problem with the Obsidian.md team, and Licat promised to resolve this issue in the next Obsidian release.
 
 ### Excalidraw in Obsidian
 https://user-images.githubusercontent.com/14358394/115386872-3fc8d180-a1da-11eb-9366-16d0e064932a.mp4
 
+### Contributing
+Feel free to contribute.
+
+By clicking [here](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues) you can create an issue to report a bug, suggest an improvement for this plugin, ask a question, etc.
+
 ### Support
-If you want to support me and my work, you can donate me a little something by [buying me a coffee](https://ko-fi.com/zsolt)
-
+If you want to support me and my work, you can donate me a little something.
 
+[<img src="https://user-images.githubusercontent.com/14358394/115450238-f39e8100-a21b-11eb-89d0-fa4b82cdbce8.png" width="200">](https://ko-fi.com/zsolt)
 
+[https://ko-fi/zsolt](https://ko-fi.com/zsolt)

dist/manifest.json

@@ -1,10 +0,0 @@
-{
-	"id": "obsidian-excalidraw-plugin",
-	"name": "Excalidraw",
-	"version": "0.1.0",
-	"minAppVersion": "0.0.2",
-	"description": "An obsidian plugin to edit and view Excalidraw drawings",
-	"author": "Zsolt Viczian",
-	"authorUrl": "https://zsolt.blog",
-	"isDesktopOnly": false
-}

dist/styles.css

@@ -1,18 +0,0 @@
-.App {
-    font-family: sans-serif;
-    text-align: center;
-  }
-    
-  .excalidraw-wrapper {
-    height: 100%;
-    margin: 0px;
-    background-color: white;
-  }
-  
-  .context-menu-option__shortcut {
-      background-color: transparent !important;
-  }
-
-.block-language-excalidraw {
-  text-align:center;
-}

manifest.json

@@ -1,9 +1,9 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "0.1.0",
-	"minAppVersion": "0.0.2",
-	"description": "An obsidian plugin to edit and view Excalidraw drawings",
+	"version": "1.0.2",
+	"minAppVersion": "0.11.13",
+	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",
 	"authorUrl": "https://zsolt.blog",
 	"isDesktopOnly": false

package.json

@@ -12,11 +12,16 @@
   "license": "MIT",
   "dependencies": {
     "@excalidraw/excalidraw": "0.6.0",
-    "react": "17.0.0",
-    "react-dom": "17.0.0",
+    "aakansha-excalidraw": "0.7.0-ccp",
+    "react": "17.0.1",
+    "react-dom": "17.0.1",
     "react-scripts": "4.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.3.3",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "@rollup/plugin-babel": "5.3.0",
     "@rollup/plugin-commonjs": "^15.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@rollup/plugin-typescript": "^6.0.0",
@@ -29,7 +34,9 @@
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-minify": "1.0.3",
     "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-visualizer": "^5.4.1",
     "tslib": "^2.0.3",
-    "typescript": "^4.0.3"
+    "typescript": "^4.0.3",
+    "webpack-bundle-analyzer": "^4.4.1"
   }
 }

rollup.config.js

@@ -1,22 +1,19 @@
 import typescript from '@rollup/plugin-typescript';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
-import postcss from 'rollup-plugin-postcss';
-import copy from 'rollup-plugin-copy';
-//import uglify from 'rollup-plugin-uglify';
-//import minify from "rollup-plugin-minify"
+//import copy from 'rollup-plugin-copy';
 import { env } from "process";
+import babel from '@rollup/plugin-babel';
 import replace from "@rollup/plugin-replace";
+import visualizer from "rollup-plugin-visualizer";
 
 const isProd = (process.env.NODE_ENV === "production");
-
-console.log(process.env.NODE_ENV);
 console.log("Is production", isProd);
 
 export default {
   input: 'src/main.ts',
   output: {
-    dir: isProd ? './dist' : '.',
+    dir: '.',
     sourcemap: 'inline',
     format: 'cjs',
     exports: 'default'
@@ -29,15 +26,10 @@ export default {
       preventAssignment: true,
       "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
     }),
+    babel({
+      exclude: "node_modules/**"
+    }),
     commonjs(),
-    postcss({
-      plugins: []
-    }),
-    copy({
-      targets: [
-        { src: ['manifest.json', 'styles.css'], dest: './dist' }
-      ], flatten: true
-    }),
-    //process.env.NODE_ENV === 'production' && minify(),
+    visualizer(),
   ]
 };

src/ExcalidrawView.ts

@@ -1,40 +1,49 @@
-import { TextFileView, WorkspaceLeaf } from "obsidian";
+import { 
+  TextFileView, 
+  WorkspaceLeaf, 
+  TFile, 
+} from "obsidian";
 import * as React from "react";
 import * as ReactDOM from "react-dom";
-import Excalidraw, {exportToSvg} from "@excalidraw/excalidraw";
+//import Excalidraw, {exportToSvg} from "@excalidraw/excalidraw";
 import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
-import { AppState } from "@excalidraw/excalidraw/types/types";
-
+import { AppState,LibraryItems } from "@excalidraw/excalidraw/types/types";
+import Excalidraw, {exportToSvg } from "aakansha-excalidraw";
+import {
+  VIEW_TYPE_EXCALIDRAW,
+  EXCALIDRAW_FILE_EXTENSION, 
+  ICON_NAME,
+  EXCALIDRAW_LIB_HEADER,
+} from './constants';
+import ExcalidrawPlugin from './main';
+import { THEME_FILTER } from "@excalidraw/excalidraw/types/constants";
 
 export default class ExcalidrawView extends TextFileView {
   private getScene: any;
+  private excalidrawRef: React.MutableRefObject<any>;
+  private justLoaded: boolean;
+  private plugin: ExcalidrawPlugin;
 
-  constructor(leaf: WorkspaceLeaf) {
+  constructor(leaf: WorkspaceLeaf, plugin: ExcalidrawPlugin) {
     super(leaf);
     this.getScene = null;
-  }
-
-  async onClose() {
-    this.requestSave();
-  }
-
-  
-  
-  // clear the view content
-  clear() {
-    ReactDOM.unmountComponentAtNode(this.contentEl);
-    this.getScene = null;
+    this.excalidrawRef = null;
+    this.plugin = plugin;
+    this.justLoaded = false;
   }
 
   // get the new file content
   getViewData () {
-    if(this.getScene) return this.getScene();
-    else return '';
+    if(this.getScene) 
+      return this.getScene();
+    else return this.data;
   }
 
- 
+  async onunload() {
+    if(this.excalidrawRef) await this.save();
+  }
 
-  setViewData (data: string, clear: boolean) {
+  setViewData (data: string, clear: boolean) {   
     if (this.app.workspace.layoutReady) {
       this.loadDrawing(data,clear);
     } else {
@@ -42,82 +51,109 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
-  private loadDrawing (data:string, clear:boolean) :void {
+  // clear the view content  
+  clear() {
+    if(this.excalidrawRef) {
+      this.excalidrawRef = null;
+      this.getScene = null;
+      ReactDOM.unmountComponentAtNode(this.contentEl);
+    }
+    //this.excalidrawRef.current.resetScene({ resetLoadingState: true });
+  }
+
+  private async loadDrawing (data:string, clear:boolean) {   
     if(clear) this.clear();
+    this.justLoaded = true; //a flag to trigger zoom to fit after the drawing has been loaded
     const excalidrawData = JSON.parse(data);
-    this.instantiateExcalidraw({
-      elements: excalidrawData.elements,
-      appState: excalidrawData.appState,
-      scrollToContent: true,
-    });
+    if(this.excalidrawRef) {
+      this.excalidrawRef.current.updateScene({
+        elements: excalidrawData.elements,
+        appState: excalidrawData.appState,  
+      });
+    } else {
+      this.instantiateExcalidraw({
+        elements: excalidrawData.elements,
+        appState: excalidrawData.appState,
+        scrollToContent: true,
+        libraryItems: await this.getLibrary(),
+      });
+    }
   }
 
   // gets the title of the document
   getDisplayText() {
     if(this.file) return this.file.basename;
-    else return "excalidraw (no file)";
+    else return "Excalidraw (no file)";
 
   }
 
   // confirms this view can accept csv extension
   canAcceptExtension(extension: string) {
-    return extension == 'excalidraw';
+    return extension == EXCALIDRAW_FILE_EXTENSION;
   }  
 
   // the view type name
   getViewType() {
-    return "excalidraw";
+    return VIEW_TYPE_EXCALIDRAW;
   }
 
   // icon for the view
   getIcon() {
-    return "excalidraw-icon";
+    return ICON_NAME;
   }
 
+  async getLibrary() {
+    const data = JSON.parse(this.plugin.settings.library);
+    return data?.library ? data.library : [];
+  }
+
+  
   private instantiateExcalidraw(initdata: any) {  
-    ReactDOM.render(React.createElement(() => {
-      let previousSceneVersion = 0;
+    const reactElement = React.createElement(() => {
       const excalidrawRef = React.useRef(null);
       const excalidrawWrapperRef = React.useRef(null);
       const [dimensions, setDimensions] = React.useState({
         width: undefined,
         height: undefined
       });
-      
+
+      this.excalidrawRef = excalidrawRef;
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth, 
           height: this.contentEl.clientHeight, 
         });
+        
         const onResize = () => {
           try {
             setDimensions({
               width: this.contentEl.clientWidth, 
               height: this.contentEl.clientHeight, 
             });
-          } catch(err) {console.log ("onResize ",err)}
+          } catch(err) {console.log ("Excalidraw React-Wrapper, onResize ",err)}
         };
         window.addEventListener("resize", onResize); 
         return () => window.removeEventListener("resize", onResize);
       }, [excalidrawWrapperRef]);
-      
-      this.getScene = function() {
+
+      this.getScene = () => {
+        if(!excalidrawRef?.current) {
+          return null;
+        }
         const el: ExcalidrawElement[] = excalidrawRef.current.getSceneElements();
         const st: AppState = excalidrawRef.current.getAppState();
         return JSON.stringify({
           "type": "excalidraw",
           "version": 2,
           "source": "https://excalidraw.com",
-          "elements": el.filter(e => !e.isDeleted),
+          "elements": el, 
           "appState": {
             "theme": st.theme,
             "viewBackgroundColor": st.viewBackgroundColor,
-            "gridSize": st.gridSize,
-            "zenModeEnabled": st.zenModeEnabled
           }
         });
       };
-
+      
       return React.createElement(
         React.Fragment,
         null,
@@ -125,10 +161,12 @@ export default class ExcalidrawView extends TextFileView {
           "div",
           {
             className: "excalidraw-wrapper",
-            ref: excalidrawWrapperRef
+            ref: excalidrawWrapperRef,
+            key: "abc",
           },
           React.createElement(Excalidraw.default, {
             ref: excalidrawRef,
+            key: "xyz",
             width: dimensions.width,
             height: dimensions.height,
             UIOptions: {
@@ -138,11 +176,24 @@ export default class ExcalidrawView extends TextFileView {
                 saveAsScene: false
               },
             },
-            initialData: initdata
+            initialData: initdata,
+            onChange: (et:ExcalidrawElement[],st:AppState) => {
+              if(this.justLoaded) {
+                this.justLoaded = false;             
+                const e = new KeyboardEvent("keydown", {bubbles : true, cancelable : true, shiftKey : true, code:"Digit1"});
+                this.contentEl.querySelector("canvas")?.dispatchEvent(e);
+              }
+            },
+            onLibraryChange: async (items:LibraryItems) => {
+              this.plugin.settings.library = EXCALIDRAW_LIB_HEADER+JSON.stringify(items)+'}';
+              this.plugin.saveSettings();
+            }
           })
         )
       );
-    }),(this as any).contentEl);
+    });
+    ReactDOM.render(reactElement,(this as any).contentEl);
+    
   }
 
   public static getSVG(data:string):SVGSVGElement {

src/constants.ts

@@ -1,6 +1,10 @@
 export const VIEW_TYPE_EXCALIDRAW = "excalidraw";
+export const EXCALIDRAW_FILE_EXTENSION = "excalidraw";
+export const ICON_NAME = "excalidraw-icon";
+export const CODEBLOCK_EXCALIDRAW = "excalidraw";
 export const MAX_COLORS = 5;
 export const COLOR_FREQ = 6;
 export const BLANK_DRAWING = '{"type":"excalidraw","version":2,"source":"https://excalidraw.com","elements":[],"appState":{"gridSize":null,"viewBackgroundColor":"#ffffff"}}';
 export const EMPTY_MESSAGE = "Hit enter to create a new drawing";
 export const EXCALIDRAW_ICON = `<g transform="translate(30,0)"><path fill="currentColor" stroke="currentColor" d="M14.45 1.715c-2.723 2.148-6.915 5.797-10.223 8.93l-2.61 2.445.477 3.207c.258 1.75.738 5.176 1.031 7.582.332 2.406.66 4.668.773 4.996.145.438 0 .656-.406.656-.699 0-.734-.183 1.176 5.832.7 2.297 1.363 4.414 1.434 4.633.074.254.367.363.699.254.332-.145.515-.438.406-.691-.113-.293.074-.586.367-.696.403-.144.367-.437-.258-1.492-.992-1.64-3.53-15.64-3.675-20.164-.11-3.207-.11-3.242 1.25-5.066 1.324-1.786 4.375-4.485 9.078-7.91 1.324-.985 2.648-2.079 3.015-2.446.551-.656.809-.472 5.442 4.414 2.683 2.805 5.664 5.688 6.617 6.414l1.766 1.313-1.36 2.844c-.734 1.53-3.715 7.437-6.656 13.054-6.137 11.813-4.887 10.68-12.02 10.79l-4.632.038-1.547 1.75c-1.617 1.86-1.836 2.551-1.063 3.72.293.398.512 1.054.512 1.456 0 .656.258.766 1.73.84.918.035 1.762.145 1.875.254.11.11.258 2.371.368 5.031l.144 4.813-2.46 5.25C1.616 72.516 0 76.527 0 77.84c0 .691.148 1.273.293 1.273.367 0 .367-.035 15.332-30.988 6.95-14.363 13.531-27.89 14.633-30.113 1.101-2.227 2.094-4.266 2.168-4.559.074-.328-2.461-2.844-6.508-6.379C22.281 3.864 19.082.95 18.785.621c-.844-1.023-2.094-.695-4.336 1.094zM15.7 43.64c-1.692 3.246-1.766 3.28-6.4 3.5-4.081.218-4.152.183-4.152-.582 0-.438-.148-1.024-.332-1.313-.222-.328-.074-.914.442-1.715l.808-1.238h3.676c2.024-.04 4.34-.184 5.149-.328.808-.149 1.507-.219 1.578-.184.074.035-.293.875-.77 1.86zm-3.09 5.832c-.294.765-1.067 2.37-1.692 3.574-1.027 2.043-1.137 2.113-1.395 1.277-.148-.511-.257-2.008-.296-3.355-.036-2.66-.11-2.625 2.98-2.809l.992-.035zm0 0"/><path fill="currentColor" stroke="currentColor" d="M15.55 10.39c-.66.473-.843.95-.843 2.153 0 1.422.11 1.64 1.102 2.039.992.402 1.25.367 2.39-.398 1.508-1.024 1.543-1.278.442-2.918-.957-1.422-1.914-1.676-3.09-.875zm2.098 1.313c.586 1.02.22 1.785-.882 1.785-.993 0-1.434-.984-.883-1.968.441-.801 1.285-.727 1.765.183zm0 0M38.602 18.594c0 .183-.22.363-.477.363-.219 0-.844 1.023-1.324 2.262-1.469 3.793-16.176 32.629-16.211 31.718 0-.472-.223-.8-.59-.8-.516 0-.59.289-.367 1.71.219 1.641.074 2.008-5.149 12.071-2.941 5.723-6.101 11.703-7.02 13.305-.956 1.68-1.69 3.5-1.765 4.265-.11 1.313.035 1.496 3.235 4.23 1.84 1.606 4.191 3.61 5.222 4.52 4.63 4.196 6.801 5.871 7.387 5.762.883-.145 14.523-14.328 14.559-15.129 0-.367-.66-5.906-1.47-12.324-1.398-10.938-2.722-23.734-2.573-24.973.109-.765-.442-4.633-.844-6.308-.332-1.313-.184-1.86 2.46-7.84 1.544-3.535 3.567-7.875 4.45-9.625.844-1.75 1.582-3.281 1.582-3.39 0-.11-.258-.18-.55-.18-.298 0-.555.144-.555.363zm-8.454 27.234c.403 2.55 1.211 8.676 1.801 13.598 1.14 9.043 2.461 19.07 2.832 21.62.219 1.278.07 1.532-2.316 4.157-4.156 4.629-8.567 9.188-10.074 10.356l-1.399 1.093-7.168-6.636c-6.617-6.051-7.168-6.672-6.765-7.403.222-.398 2.097-3.789 4.156-7.508 2.058-3.718 4.777-8.68 6.027-11.011 1.29-2.371 2.465-4.41 2.684-4.52.258-.148.332 3.535.258 11.375-.149 11.703-.11 11.739 1.066 11.485.148 0 .258-5.907.258-13.09V56.293l3.86-7.656c2.132-4.23 3.898-7.621 3.972-7.586.07.039.441 2.187.808 4.777zm0 0"/></g>`;
+export const EXCALIDRAW_LIB_HEADER = `{"type":"excalidrawlib","version":1,"library":`;

src/main.ts

@@ -1,51 +1,56 @@
 import { 
-	TFile, 
-	Plugin, 
-	WorkspaceLeaf, 
-	addIcon, 
-	App, 
-	PluginManifest, 
+  TFile, 
+  TFolder,
+  Plugin, 
+  WorkspaceLeaf, 
+  addIcon, 
+  App, 
+  PluginManifest, 
   MarkdownView,
+  normalizePath,
 } from 'obsidian';
-import { BLANK_DRAWING, VIEW_TYPE_EXCALIDRAW, EXCALIDRAW_ICON } from './constants';
+import { 
+  BLANK_DRAWING,
+  VIEW_TYPE_EXCALIDRAW, 
+  EXCALIDRAW_ICON,
+  ICON_NAME,
+  EXCALIDRAW_FILE_EXTENSION,
+  CODEBLOCK_EXCALIDRAW,
+} from './constants';
 import ExcalidrawView from './ExcalidrawView';
 import {
-	ExcalidrawSettings, 
-	DEFAULT_SETTINGS, 
-	ExcalidrawSettingTab
+  ExcalidrawSettings, 
+  DEFAULT_SETTINGS, 
+  ExcalidrawSettingTab
 } from './settings';
-import {openDialogAction, OpenFileDialog} from './openDrawing';
-import {getDateString} from './utils'
+import {
+  openDialogAction, 
+  OpenFileDialog
+} from './openDrawing';
 
 
 export default class ExcalidrawPlugin extends Plugin {
-	public settings: ExcalidrawSettings;
-	public view: ExcalidrawView;
-	private openDialog: OpenFileDialog;
-	private activeDrawing: TFile;
-	private activeDrawingFilename: string;
-
+  public settings: ExcalidrawSettings;
+  private openDialog: OpenFileDialog;
   
-	constructor(app: App, manifest: PluginManifest) {
+  constructor(app: App, manifest: PluginManifest) {
     super(app, manifest);
-		this.activeDrawing = null;
-		this.activeDrawingFilename = '';
   }
   
-	async onload() {
-		addIcon("excalidraw-icon", EXCALIDRAW_ICON);
+  async onload() {
+    addIcon(ICON_NAME, EXCALIDRAW_ICON);
 
     this.registerView(
       VIEW_TYPE_EXCALIDRAW, 
-      (leaf: WorkspaceLeaf) => (this.view = new ExcalidrawView(leaf))
+      (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf, this)
     );
 
-    this.registerExtensions(["excalidraw"],"excalidraw");
+    this.registerExtensions([EXCALIDRAW_FILE_EXTENSION],VIEW_TYPE_EXCALIDRAW);
 
-    this.registerMarkdownCodeBlockProcessor('excalidraw', (source,el,ctx) => {
+    this.registerMarkdownCodeBlockProcessor(CODEBLOCK_EXCALIDRAW, async (source,el,ctx) => {
       const parseError = (message: string) => {
         el.createDiv("excalidraw-error",(el)=> {
-          el.createEl("p","Please provide a link to an excalidraw file: [[file.excalidraw]]");
+          el.createEl("p","Please provide a link to an excalidraw file: [[file."+EXCALIDRAW_FILE_EXTENSION+"]]");
           el.createEl("p",message);
           el.createEl("p",source);
         })  
@@ -70,110 +75,130 @@ export default class ExcalidrawPlugin extends Plugin {
         fname = filename[1];
       }
 
-      if(fname!='') {
-        const file:TFile = (this.app.vault.getAbstractFileByPath(fname) as TFile);
-        if(file) {
-          if(file.extension == "excalidraw") {
-            this.app.vault.read(file).then(async (content: string) => {
-              const svg = ExcalidrawView.getSVG(content);
-              if(svg) {
-                el.createDiv("excalidraw-svg",(el)=> {
-                  svg.removeAttribute('width');
-                  svg.removeAttribute('height');
-                  svg.style.setProperty('width',fwidth);
-                  if(fheight) svg.style.setProperty('height',fheight);
-                  el.appendChild(svg);
-                })        
-          
-              } else parseError("Parse error. Not a valid Excalidraw file.");
-            });
-          } else parseError("Not an excalidraw file. Must have extension .excalidraw");
-        } else parseError("File does not exist");
-      } else parseError("No link to file found in codeblock.");
+      if(fname == '') {
+        parseError("No link to file found in codeblock.");
+        return;
+      }
+
+      const file = this.app.vault.getAbstractFileByPath(fname);
+      if(!(file && file instanceof TFile)) {
+        parseError("File does not exist. " + fname);
+        return;
+      }
+
+      if(file.extension != EXCALIDRAW_FILE_EXTENSION) {
+        parseError("Not an excalidraw file. Must have extension " + EXCALIDRAW_FILE_EXTENSION);
+        return;
+      }
+
+      const content = await this.app.vault.read(file);
+      const svg = ExcalidrawView.getSVG(content);
+      if(!svg) {
+        parseError("Parse error. Not a valid Excalidraw file.");
+        return;
+      }
+      el.createDiv("excalidraw-svg",(el)=> {
+        svg.removeAttribute('width');
+        svg.removeAttribute('height');
+        svg.style.setProperty('width',fwidth);
+        if(fheight) svg.style.setProperty('height',fheight);
+        el.appendChild(svg);
+      });
     });
 
-		await this.loadSettings();
-		this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
+    await this.loadSettings();
+    this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
 
-		this.openDialog = new OpenFileDialog(this.app, this);
-		this.addRibbonIcon('excalidraw-icon', 'Excalidraw', async () => {
-			this.openDialog.start(openDialogAction.openFile);
-		});
+    this.openDialog = new OpenFileDialog(this.app, this);
+    this.addRibbonIcon(ICON_NAME, 'Excalidraw', async () => {
+      this.openDialog.start(openDialogAction.openFile);
+    });
 
-		this.addCommand({
-			id: "excalidraw-open",
-			name: "Open existing drawing or create new one",
-			callback: () => {
-				this.openDialog.start(openDialogAction.openFile);
-			},
-		});
+    this.addCommand({
+      id: "excalidraw-open",
+      name: "Open an existing drawing or create new one",
+      callback: () => {
+        this.openDialog.start(openDialogAction.openFile);
+      },
+    });
 
-		this.addCommand({
-			id: "excalidraw-insert-transclusion",
-			name: "Insert link to .excalidraw file into markdown document",
-			callback: () => {
-				this.openDialog.start(openDialogAction.insertLink);
-			},
-		});
+    this.addCommand({
+      id: "excalidraw-insert-transclusion",
+      name: "Transclude an ."+EXCALIDRAW_FILE_EXTENSION+" file into a markdown document",
+      callback: () => {
+        this.openDialog.start(openDialogAction.insertLink);
+      },
+    });
 
 
     this.addCommand({
-			id: "excalidraw-autocreate",
-			name: "Create a new drawing",
-			callback: () => {
-				this.createDrawing(this.getNextDefaultFilename());
-			},
-		});
-	}
+      id: "excalidraw-autocreate",
+      name: "Create a new drawing",
+      callback: () => {
+        this.createDrawing(this.getNextDefaultFilename());
+      },
+    });
+  }
    
   public insertCodeblock(data:string) {
     const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
     if(activeView) {
       const editor = activeView.editor;
-      let doc = editor.getDoc();
-      doc.replaceSelection(
+      editor.replaceSelection(
         String.fromCharCode(96,96,96) + 
-        "excalidraw\n[["+data+"]]\n" +
+        CODEBLOCK_EXCALIDRAW +
+        "\n[["+data+"]]\n" +
         String.fromCharCode(96,96,96));
       editor.focus();
     }
   
   }
 
-	private async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
+  private async loadSettings() {
+    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+  }
 
-	async saveSettings() {
-  	await this.saveData(this.settings);
-	}
+  async saveSettings() {
+    await this.saveData(this.settings);
+  }
+
+  public async openDrawing(drawingFile: TFile) {
+    const leafs = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+    let leaf:WorkspaceLeaf = null;
+
+    if (leafs?.length > 0) {
+      leaf = leafs[0];
+    }
+    if(!leaf) {
+      leaf = this.app.workspace.activeLeaf;
+    }
+
+    if(!leaf) {
+      leaf = this.app.workspace.getLeaf();
+    }
 
-	public async openDrawing(drawingFile: TFile) {
-		this.activeDrawing = drawingFile;
-		this.saveSettings();
-    const leaf = this.view ? this.view.leaf : this.app.workspace.activeLeaf;
     leaf.setViewState({
       type: VIEW_TYPE_EXCALIDRAW,
       state: {file: drawingFile.path}}
     );
-	}
+  }
 
-	private getNextDefaultFilename():string {
-		return this.settings.folder+'/Drawing ' + getDateString('yyyy-MM-dd HH.mm.ss')+'.excalidraw';
-	}
+  private getNextDefaultFilename():string {
+    return this.settings.folder+'/Drawing ' + window.moment().format('YYYY-MM-DD HH.mm.ss')+'.'+EXCALIDRAW_FILE_EXTENSION;
+  }
  
-	public async createDrawing(filename: string) {
-		if(!(this.app.vault.getAbstractFileByPath(this.settings.folder) as TFile)) {
-			this.app.vault.createFolder(this.settings.folder);
-		}
+  public async createDrawing(filename: string) {
+    const folder = this.app.vault.getAbstractFileByPath(normalizePath(this.settings.folder));
+    if (!(folder && folder instanceof TFolder)) {
+      await this.app.vault.createFolder(this.settings.folder);
+    }
 
-		const file = (this.app.vault.getAbstractFileByPath(this.settings.templateFilePath) as TFile);
-		if(file) {
-			this.app.vault.read(file).then(async (content: string) => {
-		    this.openDrawing(await this.app.vault.create(filename,content==''?BLANK_DRAWING:content))   
-			});
-		} else {
-		  this.openDrawing(await this.app.vault.create(filename,BLANK_DRAWING));
-		}
-	}
+    const file = this.app.vault.getAbstractFileByPath(normalizePath(this.settings.templateFilePath));
+    if(file && file instanceof TFile) {
+      const content = await this.app.vault.read(file);
+      this.openDrawing(await this.app.vault.create(filename,content==''?BLANK_DRAWING:content));
+    } else {
+      this.openDrawing(await this.app.vault.create(filename,BLANK_DRAWING));
+    }
+  }
 }

src/openDrawing.ts

@@ -1,6 +1,6 @@
 import { App, FuzzySuggestModal, TFile, TFolder, normalizePath, Vault, TAbstractFile, Instruction } from "obsidian";
 import ExcalidrawPlugin from './main';
-import {EMPTY_MESSAGE} from './constants';
+import {EMPTY_MESSAGE,EXCALIDRAW_FILE_EXTENSION} from './constants';
 
 export enum openDialogAction {
   openFile,
@@ -27,7 +27,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
     this.inputEl.onkeyup = (e) => {
       if(e.key=="Enter" && this.action == openDialogAction.openFile) {
         if (this.containerEl.innerText.includes(EMPTY_MESSAGE)) {
-          this.plugin.createDrawing(this.plugin.settings.folder+'/'+this.inputEl.value+'.excalidraw');
+          this.plugin.createDrawing(this.plugin.settings.folder+'/'+this.inputEl.value+'.'+EXCALIDRAW_FILE_EXTENSION);
           this.close();
         }
       }
@@ -35,9 +35,8 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
   }
 
   getItems(): TFile[] {
-    let excalidrawFiles: TFile[] = [];
-    excalidrawFiles = this.app.vault.getFiles();
-    return excalidrawFiles.filter((f:TFile) => (f.extension=='excalidraw'));
+    const excalidrawFiles = this.app.vault.getFiles();
+    return (excalidrawFiles || []).filter((f:TFile) => (f.extension==EXCALIDRAW_FILE_EXTENSION));
   }
 
   getItemText(item: TFile): string {
@@ -67,13 +66,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
         this.setPlaceholder("Select existing drawing to insert into document.");
         break;
     }
-    try {
-      let files = this.getItems();
-      this.open();
-    }
-    catch(error) {
-      console.log(error);
-    }
+    this.open();
   }
 
 }

src/settings.ts

@@ -2,65 +2,67 @@ import {App, PluginSettingTab, Setting} from 'obsidian';
 import type ExcalidrawPlugin from "./main";
 
 export interface ExcalidrawSettings {
-	folder: string,
-	templateFilePath: string,
+  folder: string,
+  templateFilePath: string,
   width: string,
+  library: string,
 }
 
 export const DEFAULT_SETTINGS: ExcalidrawSettings = {
-	folder: 'excalidraw',
-	templateFilePath: '',
+  folder: 'excalidraw',
+  templateFilePath: '',
   width: '400',
+  library: `{"type":"excalidrawlib","version":1,"library":[]}`,
 }
 
 export class ExcalidrawSettingTab extends PluginSettingTab {
-	plugin: ExcalidrawPlugin;
+  plugin: ExcalidrawPlugin;
 
-	constructor(app: App, plugin: ExcalidrawPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
+  constructor(app: App, plugin: ExcalidrawPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
 
-	display(): void {
-		let {containerEl} = this;
+  display(): void {
+    let {containerEl} = this;
 
-		this.containerEl.empty();
-
-		new Setting(containerEl)
-			.setName('Excalidraw folder') 
-			.setDesc('Default location for Excalidraw drawings. Leaving this empty means drawings will be saved to the Vault root.')
-			.addText(text => text
-				.setPlaceholder('excalidraw')
-        .setValue(this.plugin.settings.folder)
-				.onChange(async (value) => {
-					this.plugin.settings.folder = value;
-					await this.plugin.saveSettings();
-				}));
-
-		new Setting(containerEl)
-			.setName('Excalidraw template file') 
-			.setDesc('Full path to file containing the file you want to use as the template for new Excalidraw drawings. '+
-			         'Note that Excalidraw files will have an extension of ".excalidraw" ' +
-			         'Assuming your template is in the default excalidraw folder, the setting would be: excalidraw/Template.excalidraw')
-			.addText(text => text
-				.setPlaceholder('excalidraw')
-        .setValue(this.plugin.settings.templateFilePath)
-				.onChange(async (value) => {
-					this.plugin.settings.templateFilePath = value;
-					await this.plugin.saveSettings();
-				}));
+    this.containerEl.empty();
 
     new Setting(containerEl)
-			.setName('Default width of embedded image') 
-			.setDesc('The default width of an embedded drawing. You can specify a different ' +
+    .setName('Excalidraw folder') 
+    .setDesc('Default location for your Excalidraw drawings. Leaving this empty means drawings will be created in the Vault root.')
+    .addText(text => text
+      .setPlaceholder('excalidraw')
+      .setValue(this.plugin.settings.folder)
+      .onChange(async (value) => {
+        this.plugin.settings.folder = value;
+        await this.plugin.saveSettings();
+      }));
+
+    new Setting(containerEl)
+      .setName('Excalidraw template file') 
+      .setDesc('Full path to file containing the file you want to use as the template for new Excalidraw drawings. '+
+               'Note that Excalidraw files will have an extension of ".excalidraw" ' +
+               'Assuming your template is in the default excalidraw folder, the setting would be: excalidraw/Template.excalidraw')
+      .addText(text => text
+        .setPlaceholder('excalidraw')
+        .setValue(this.plugin.settings.templateFilePath)
+        .onChange(async (value) => {
+          this.plugin.settings.templateFilePath = value;
+          await this.plugin.saveSettings();
+        }));
+
+    new Setting(containerEl)
+      .setName('Default width of embedded image') 
+      .setDesc('The default width of an embedded drawing. You can specify a different ' +
                'width when embedding an image using the [[drawing.excalidraw|100]] or ' +
                '[[drawing.excalidraw|100x100]] format.')
-			.addText(text => text
-				.setPlaceholder('400')
+      .addText(text => text
+        .setPlaceholder('400')
         .setValue(this.plugin.settings.width)
-				.onChange(async (value) => {
-					this.plugin.settings.width = value;
-					await this.plugin.saveSettings();
-				}));
-	}
+        .onChange(async (value) => {
+          this.plugin.settings.width = value;
+          await this.plugin.saveSettings();
+        }));
+  }
 }

src/utils.ts

@@ -1,28 +0,0 @@
-export function getDateString(format:string):string {
-  const pad2 = (n:number) => {   
-    return n>9? n.toString():'0'+n;   
-  }   	
-
-  const now = new Date();   
-  const M=now.getMonth()+1,H=now.getHours(),m=now.getMinutes(),d=now.getDate(),s=now.getSeconds(),yyyy=now.getFullYear();   
-  const n = {
-    yyyy: yyyy.toString(),
-    MM  : pad2(M),
-    dd  : pad2(d),
-    HH  : pad2(H),
-    mm  : pad2(m),
-    ss  : pad2(s)
-  };			
-
-  return format.replace(/([a-zA-Z]+)/g,function (s:string, $1:string):string {
-    switch($1) {
-      case 'yyyy' : return n.yyyy; 
-      case 'MM'   : return n.MM; 
-      case 'dd'   : return n.dd; 
-      case 'HH'   : return n.HH; 
-      case 'mm'   : return n.mm; 
-      case 'ss'   : return n.ss; 
-    }
-    return '';
-  });   
-}   

versions.json

@@ -1,3 +1,5 @@
 {
-	".0.1": "0.11.13"
+  "1.0.2": "0.11.13",
+  "1.0.1": "0.11.13",
+	"1.0.0": "0.11.13"
 }

yarn.lock

@@ -28,7 +28,7 @@
   "resolved" "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.13.15.tgz"
   "version" "7.13.15"
 
-"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.4.0-0", "@babel/core@^7.7.5", "@babel/core@^7.8.4", "@babel/core@^7.9.0", "@babel/core@7 || ^7.0.0-rc.2":
+"@babel/core@^7.0.0", "@babel/core@^7.0.0-0", "@babel/core@^7.1.0", "@babel/core@^7.12.3", "@babel/core@^7.13.0", "@babel/core@^7.3.3", "@babel/core@^7.4.0-0", "@babel/core@^7.7.5", "@babel/core@^7.8.4", "@babel/core@^7.9.0", "@babel/core@7 || ^7.0.0-rc.2":
   "integrity" "sha512-6GXmNYeNjS2Uz+uls5jalOemgIhnTMeaXo+yBUA72kC2uX/8VW6XyhVIo2L8/q0goKQA3EVKx0KOQpVKSeWadQ=="
   "resolved" "https://registry.npmjs.org/@babel/core/-/core-7.13.15.tgz"
   "version" "7.13.15"
@@ -176,7 +176,7 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.12.1", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.13.12":
   "integrity" "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA=="
   "resolved" "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz"
   "version" "7.13.12"
@@ -914,7 +914,7 @@
     "@babel/helper-create-regexp-features-plugin" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.12.13"
 
-"@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.5":
+"@babel/preset-env@^7.3.1", "@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.5":
   "integrity" "sha512-D4JAPMXcxk69PKe81jRJ21/fP/uYdcTZ3hJDF5QX2HSI9bBxxYw/dumdR6dGumhjxlprHPE4XWoPaqzZUVy2MA=="
   "resolved" "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.13.15.tgz"
   "version" "7.13.15"
@@ -1072,7 +1072,7 @@
     "@babel/types" "^7.4.4"
     "esutils" "^2.0.2"
 
-"@babel/preset-react@^7.9.4":
+"@babel/preset-react@^7.0.0", "@babel/preset-react@^7.9.4":
   "integrity" "sha512-gx+tDLIE06sRjKJkVtpZ/t3mzCDOnPG+ggHZG9lffUbX8+wC739x20YQc9V35Do6ZAxaUc/HhVHIiOzz5MvDmA=="
   "resolved" "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.13.13.tgz"
   "version" "7.13.13"
@@ -1455,6 +1455,19 @@
     "schema-utils" "^2.6.5"
     "source-map" "^0.7.3"
 
+"@polka/url@^1.0.0-next.9":
+  "integrity" "sha512-6RglhutqrGFMO1MNUXp95RBuYIuc8wTnMAV5MUhLmjTOy78ncwOw7RgeQ/HeymkKXRhZd0s2DNrM1rL7unk3MQ=="
+  "resolved" "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.12.tgz"
+  "version" "1.0.0-next.12"
+
+"@rollup/plugin-babel@5.3.0":
+  "integrity" "sha512-9uIC8HZOnVLrLHxayq/PTzw+uS25E14KPUBh5ktF+18Mjo5yK0ToMMx6epY0uEgkjwJw0aBW4x2horYXh8juWw=="
+  "resolved" "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.0.tgz"
+  "version" "5.3.0"
+  dependencies:
+    "@babel/helper-module-imports" "^7.10.4"
+    "@rollup/pluginutils" "^3.1.0"
+
 "@rollup/plugin-commonjs@^15.1.0":
   "integrity" "sha512-xCQqz4z/o0h2syQ7d9LskIMvBSH4PX5PjYdpSSvgS+pQik3WahkQVNWg3D8XJeYjZoVWnIUQYDghuEMRGrmQYQ=="
   "resolved" "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-15.1.0.tgz"
@@ -1646,7 +1659,7 @@
   "resolved" "https://registry.npmjs.org/@types/anymatch/-/anymatch-1.3.1.tgz"
   "version" "1.3.1"
 
-"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
+"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7", "@types/babel__core@^7.1.9":
   "integrity" "sha512-zGZJzzBUVDo/eV6KgbE0f0ZI7dInEYvo12Rb70uNQDshC3SkRMb67ja0GgRHZgAX3Za6rhaWlvbDO8rrGyAb1g=="
   "resolved" "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.14.tgz"
   "version" "7.1.14"
@@ -2143,6 +2156,11 @@
   "resolved" "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz"
   "version" "4.2.2"
 
+"aakansha-excalidraw@0.7.0-ccp":
+  "integrity" "sha512-/RQBh8x9WBmuwT2xebmQnktJlPkD58eLuc9D8wT4bL1X+mf4q5jK6TF4YxUUn2qbyvHVunHenz+N9Z6Az5bB/w=="
+  "resolved" "https://registry.npmjs.org/aakansha-excalidraw/-/aakansha-excalidraw-0.7.0-ccp.tgz"
+  "version" "0.7.0-ccp"
+
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="
   "resolved" "https://registry.npmjs.org/abab/-/abab-2.0.5.tgz"
@@ -2174,6 +2192,11 @@
   "resolved" "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
   "version" "7.2.0"
 
+"acorn-walk@^8.0.0":
+  "integrity" "sha512-+bpA9MJsHdZ4bgfDcpk0ozQyhhVct7rzOmO0s1IIr0AGGgKBljss8n2zp11rRP2wid5VGeh04CgeKzgat5/25A=="
+  "resolved" "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.0.2.tgz"
+  "version" "8.0.2"
+
 "acorn@^6.0.0 || ^7.0.0 || ^8.0.0", "acorn@^7.1.0", "acorn@^7.1.1", "acorn@^7.4.0":
   "integrity" "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
@@ -2184,6 +2207,11 @@
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz"
   "version" "6.4.2"
 
+"acorn@^8.0.4":
+  "integrity" "sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g=="
+  "resolved" "https://registry.npmjs.org/acorn/-/acorn-8.1.1.tgz"
+  "version" "8.1.1"
+
 "acorn@^8.1.0":
   "integrity" "sha512-xYiIVjNuqtKXMxlRMDc6mZUhXehod4a3gbZ1qRlM7icK4EbxUFNLhWoPblCvFtB2Y9CIqHP3CF/rdxLItaQv8g=="
   "resolved" "https://registry.npmjs.org/acorn/-/acorn-8.1.1.tgz"
@@ -3364,6 +3392,15 @@
     "strip-ansi" "^6.0.0"
     "wrap-ansi" "^6.2.0"
 
+"cliui@^7.0.2":
+  "integrity" "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ=="
+  "resolved" "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz"
+  "version" "7.0.4"
+  dependencies:
+    "string-width" "^4.2.0"
+    "strip-ansi" "^6.0.0"
+    "wrap-ansi" "^7.0.0"
+
 "clone-deep@^4.0.1":
   "integrity" "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ=="
   "resolved" "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz"
@@ -3469,6 +3506,11 @@
   "resolved" "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
   "version" "4.1.1"
 
+"commander@^6.2.0":
+  "integrity" "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA=="
+  "resolved" "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz"
+  "version" "6.2.1"
+
 "common-tags@^1.8.0":
   "integrity" "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw=="
   "resolved" "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz"
@@ -3749,6 +3791,11 @@
   "resolved" "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
   "version" "1.0.0"
 
+"cyclist@^1.0.1":
+  "integrity" "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
+  "resolved" "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
+  "version" "1.0.1"
+
 "css-blank-pseudo@^0.1.4":
   "integrity" "sha512-LHz35Hr83dnFeipc7oqFDmsjHdljj3TQtxGGiNWSOsTLIAubSm4TEz8qCaKFpk7idaQ1GfWscF4E6mgpBysA1w=="
   "resolved" "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz"
@@ -3960,11 +4007,6 @@
   "resolved" "https://registry.npmjs.org/csstype/-/csstype-3.0.6.tgz"
   "version" "3.0.6"
 
-"cyclist@^1.0.1":
-  "integrity" "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk="
-  "resolved" "https://registry.npmjs.org/cyclist/-/cyclist-1.0.1.tgz"
-  "version" "1.0.1"
-
 "d@^1.0.1", "d@1":
   "integrity" "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA=="
   "resolved" "https://registry.npmjs.org/d/-/d-1.0.1.tgz"
@@ -4323,7 +4365,7 @@
   "resolved" "https://registry.npmjs.org/dotenv/-/dotenv-8.2.0.tgz"
   "version" "8.2.0"
 
-"duplexer@^0.1.1":
+"duplexer@^0.1.1", "duplexer@^0.1.2":
   "integrity" "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
   "resolved" "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
   "version" "0.1.2"
@@ -5333,7 +5375,7 @@
   "resolved" "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   "version" "1.0.0-beta.2"
 
-"get-caller-file@^2.0.1":
+"get-caller-file@^2.0.1", "get-caller-file@^2.0.5":
   "integrity" "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
   "resolved" "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
   "version" "2.0.5"
@@ -5504,6 +5546,13 @@
   "resolved" "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz"
   "version" "1.3.0"
 
+"gzip-size@^6.0.0":
+  "integrity" "sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q=="
+  "resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz"
+  "version" "6.0.0"
+  dependencies:
+    "duplexer" "^0.1.2"
+
 "gzip-size@5.1.1":
   "integrity" "sha512-FNHi6mmoHvs1mxZAds4PpdCS6QG8B4C1krxJsMutgxl5t3+GlRTzzI3NEkifXx2pVsOvJdOGSmIgDhQ55FwdPA=="
   "resolved" "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz"
@@ -7427,6 +7476,11 @@
   dependencies:
     "mime-db" "1.47.0"
 
+"mime@^2.3.1":
+  "integrity" "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
+  "resolved" "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz"
+  "version" "2.5.2"
+
 "mime@^2.4.4":
   "integrity" "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg=="
   "resolved" "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz"
@@ -7596,10 +7650,10 @@
     "dns-packet" "^1.3.1"
     "thunky" "^1.0.2"
 
-"nanoid@^3.1.20":
-  "integrity" "sha512-a1cQNyczgKbLX9jwbS/+d7W8fX/RfgYR7lVWwWOGIPNgK2m0MWvrGF6/m4kk6U3QcFMnZf3RIhL0v2Jgh/0Uxw=="
-  "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.1.20.tgz"
-  "version" "3.1.20"
+"nanoid@^3.1.20", "nanoid@^3.1.22":
+  "integrity" "sha512-/2ZUaJX2ANuLtTvqTlgqBQNJoQO398KyJgZloL0PZkC0dpysjncRUPsFe3DUPzz/y3h+u7C46np8RMuvF3jsSQ=="
+  "resolved" "https://registry.npmjs.org/nanoid/-/nanoid-3.1.22.tgz"
+  "version" "3.1.22"
 
 "nanomatch@^1.2.9":
   "integrity" "sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA=="
@@ -7932,7 +7986,7 @@
   dependencies:
     "mimic-fn" "^2.1.0"
 
-"open@^7.0.2":
+"open@^7.0.2", "open@^7.4.2":
   "integrity" "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="
   "resolved" "https://registry.npmjs.org/open/-/open-7.4.2.tgz"
   "version" "7.4.2"
@@ -7940,6 +7994,11 @@
     "is-docker" "^2.0.0"
     "is-wsl" "^2.1.1"
 
+"opener@^1.5.2":
+  "integrity" "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A=="
+  "resolved" "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
+  "version" "1.5.2"
+
 "opn@^5.5.0":
   "integrity" "sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA=="
   "resolved" "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
@@ -9424,14 +9483,14 @@
     "strip-ansi" "6.0.0"
     "text-table" "0.2.0"
 
-"react-dom@^17.0.1", "react-dom@17.0.0":
-  "integrity" "sha512-OGnFbxCjI2TMAZYMVxi4hqheJiN8rCEVVrL7XIGzCB6beNc4Am8M47HtkvxODZw9QgjmAPKpLba9FTu4fC1byA=="
-  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.0.tgz"
-  "version" "17.0.0"
+"react-dom@^17.0.1", "react-dom@17.0.1":
+  "integrity" "sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug=="
+  "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.1.tgz"
+  "version" "17.0.1"
   dependencies:
     "loose-envify" "^1.1.0"
     "object-assign" "^4.1.1"
-    "scheduler" "^0.20.0"
+    "scheduler" "^0.20.1"
 
 "react-error-overlay@^6.0.9":
   "integrity" "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
@@ -9519,10 +9578,10 @@
   optionalDependencies:
     "fsevents" "^2.1.3"
 
-"react@^17.0.1", "react@17.0.0":
-  "integrity" "sha512-rG9bqS3LMuetoSUKHN8G3fMNuQOePKDThK6+2yXFWtoeTDLVNh/QCaxT+Jr+rNf4lwNXpx+atdn3Aa0oi8/6eQ=="
-  "resolved" "https://registry.npmjs.org/react/-/react-17.0.0.tgz"
-  "version" "17.0.0"
+"react@^17.0.1", "react@17.0.1":
+  "integrity" "sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w=="
+  "resolved" "https://registry.npmjs.org/react/-/react-17.0.1.tgz"
+  "version" "17.0.1"
   dependencies:
     "loose-envify" "^1.1.0"
     "object-assign" "^4.1.1"
@@ -10088,6 +10147,16 @@
     "serialize-javascript" "^4.0.0"
     "terser" "^4.6.2"
 
+"rollup-plugin-visualizer@^5.4.1":
+  "integrity" "sha512-mwrUIfOamkCw3dCtLvgnn/H0rvNSDA1RAe0sO9uHBpmdf86j/xOX/2yeCrVh2Ia/gCGLG846JB00MW0chq8CHQ=="
+  "resolved" "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.4.1.tgz"
+  "version" "5.4.1"
+  dependencies:
+    "nanoid" "^3.1.22"
+    "open" "^7.4.2"
+    "source-map" "^0.7.3"
+    "yargs" "^16.2.0"
+
 "rollup-pluginutils@^2.8.1", "rollup-pluginutils@^2.8.2":
   "integrity" "sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ=="
   "resolved" "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz"
@@ -10095,7 +10164,7 @@
   dependencies:
     "estree-walker" "^0.6.1"
 
-"rollup@^1.20.0 || ^2.0.0", "rollup@^1.20.0||^2.0.0", "rollup@^2.14.0", "rollup@^2.22.0", "rollup@>=0.60.0 <3", "rollup@>=0.66.0 <3", "rollup@2.45.2":
+"rollup@^1.20.0 || ^2.0.0", "rollup@^1.20.0||^2.0.0", "rollup@^2.0.0", "rollup@^2.14.0", "rollup@^2.22.0", "rollup@>=0.60.0 <3", "rollup@>=0.66.0 <3", "rollup@2.45.2":
   "integrity" "sha512-kRRU7wXzFHUzBIv0GfoFFIN3m9oteY4uAsKllIpQDId5cfnkWF2J130l+27dzDju0E6MScKiV0ZM5Bw8m4blYQ=="
   "resolved" "https://registry.npmjs.org/rollup/-/rollup-2.45.2.tgz"
   "version" "2.45.2"
@@ -10205,7 +10274,7 @@
   dependencies:
     "xmlchars" "^2.2.0"
 
-"scheduler@^0.20.0":
+"scheduler@^0.20.1":
   "integrity" "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ=="
   "resolved" "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz"
   "version" "0.20.2"
@@ -10458,6 +10527,15 @@
   dependencies:
     "is-arrayish" "^0.3.1"
 
+"sirv@^1.0.7":
+  "integrity" "sha512-SR36i3/LSWja7AJNRBz4fF/Xjpn7lQFI30tZ434dIy+bitLYSP+ZEenHg36i23V2SGEz+kqjksg0uOGZ5LPiqg=="
+  "resolved" "https://registry.npmjs.org/sirv/-/sirv-1.0.11.tgz"
+  "version" "1.0.11"
+  dependencies:
+    "@polka/url" "^1.0.0-next.9"
+    "mime" "^2.3.1"
+    "totalist" "^1.0.0"
+
 "sisteransi@^1.0.5":
   "integrity" "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="
   "resolved" "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz"
@@ -11202,6 +11280,11 @@
   "resolved" "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"
   "version" "1.0.0"
 
+"totalist@^1.0.0":
+  "integrity" "sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g=="
+  "resolved" "https://registry.npmjs.org/totalist/-/totalist-1.1.0.tgz"
+  "version" "1.1.0"
+
 "tough-cookie@^2.3.3":
   "integrity" "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g=="
   "resolved" "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"
@@ -11271,11 +11354,6 @@
   dependencies:
     "tslib" "^1.8.1"
 
-"tty-browserify@0.0.0":
-  "integrity" "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
-  "resolved" "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
-  "version" "0.0.0"
-
 "tunnel-agent@^0.6.0":
   "integrity" "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0="
   "resolved" "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"
@@ -11367,6 +11445,11 @@
   "resolved" "https://registry.npmjs.org/typescript/-/typescript-4.1.5.tgz"
   "version" "4.1.5"
 
+"tty-browserify@0.0.0":
+  "integrity" "sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY="
+  "resolved" "https://registry.npmjs.org/tty-browserify/-/tty-browserify-0.0.0.tgz"
+  "version" "0.0.0"
+
 "uglify-js@^2.7.4":
   "integrity" "sha1-KcVzMUgFe7Th913zW3qcty5qWd0="
   "resolved" "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz"
@@ -11690,6 +11773,21 @@
   "resolved" "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz"
   "version" "6.1.0"
 
+"webpack-bundle-analyzer@^4.4.1":
+  "integrity" "sha512-j5m7WgytCkiVBoOGavzNokBOqxe6Mma13X1asfVYtKWM3wxBiRRu1u1iG0Iol5+qp9WgyhkMmBAcvjEfJ2bdDw=="
+  "resolved" "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.4.1.tgz"
+  "version" "4.4.1"
+  dependencies:
+    "acorn" "^8.0.4"
+    "acorn-walk" "^8.0.0"
+    "chalk" "^4.1.0"
+    "commander" "^6.2.0"
+    "gzip-size" "^6.0.0"
+    "lodash" "^4.17.20"
+    "opener" "^1.5.2"
+    "sirv" "^1.0.7"
+    "ws" "^7.3.1"
+
 "webpack-dev-middleware@^3.7.2":
   "integrity" "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ=="
   "resolved" "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz"
@@ -12059,6 +12157,15 @@
     "string-width" "^4.1.0"
     "strip-ansi" "^6.0.0"
 
+"wrap-ansi@^7.0.0":
+  "integrity" "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="
+  "resolved" "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  "version" "7.0.0"
+  dependencies:
+    "ansi-styles" "^4.0.0"
+    "string-width" "^4.1.0"
+    "strip-ansi" "^6.0.0"
+
 "wrappy@1":
   "integrity" "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
   "resolved" "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
@@ -12081,7 +12188,7 @@
   dependencies:
     "async-limiter" "~1.0.0"
 
-"ws@^7.4.4":
+"ws@^7.3.1", "ws@^7.4.4":
   "integrity" "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw=="
   "resolved" "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz"
   "version" "7.4.4"
@@ -12106,6 +12213,11 @@
   "resolved" "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz"
   "version" "4.0.3"
 
+"y18n@^5.0.5":
+  "integrity" "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+  "resolved" "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz"
+  "version" "5.0.8"
+
 "yallist@^3.0.2":
   "integrity" "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
   "resolved" "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz"
@@ -12147,6 +12259,11 @@
     "camelcase" "^5.0.0"
     "decamelize" "^1.2.0"
 
+"yargs-parser@^20.2.2":
+  "integrity" "sha512-FiNkvbeHzB/syOjIUxFDCnhSfzAL8R5vs40MgLFBorXACCOAEaWu0gRZl14vG8MR9AOJIZbmkjhusqBYZ3HTHw=="
+  "resolved" "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.7.tgz"
+  "version" "20.2.7"
+
 "yargs@^13.3.2":
   "integrity" "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw=="
   "resolved" "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz"
@@ -12180,6 +12297,19 @@
     "y18n" "^4.0.0"
     "yargs-parser" "^18.1.2"
 
+"yargs@^16.2.0":
+  "integrity" "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw=="
+  "resolved" "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"
+  "version" "16.2.0"
+  dependencies:
+    "cliui" "^7.0.2"
+    "escalade" "^3.1.1"
+    "get-caller-file" "^2.0.5"
+    "require-directory" "^2.1.1"
+    "string-width" "^4.2.0"
+    "y18n" "^5.0.5"
+    "yargs-parser" "^20.2.2"
+
 "yargs@~3.10.0":
   "integrity" "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E="
   "resolved" "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz"