1.0.2 manifest

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,38 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

README.md

@@ -1,8 +1,34 @@
-## Obsidian Daily Stats
-
-This is a daily word count plugin for Obsidian (https://obsidian.md). You can see today's word count in the bottom right corner of your screen, and also see the historical logs in a right panel view akin to Github's contribution graph.
-
-This plugin was inspired by liamcain's [Calender](https://github.com/liamcain/obsidian-calendar-plugin) and lukeleppan's [Better Word Count](https://github.com/lukeleppan/better-word-count).
-
-![Example](./images/example-graph.png)
-
+## 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
+- 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.
+
+[<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)

data-ZsoltServer.json

@@ -0,0 +1 @@
+{"openFile":"Blog/attachements/security through obscurity.excalidraw","settings":{"folder":"excalidraw","templateFilePath":"excalidraw/Template.excalidraw"}}

data.json

@@ -0,0 +1 @@
+{"folder":"excalidraw","templateFilePath":"excalidraw/Template.excalidra","width":"400","openFile":"excalidraw/new file.excalidraw","settings":{"folder":"excalidraw","templateFilePath":""}}

dist/manifest.json

@@ -0,0 +1,10 @@
+{
+	"id": "obsidian-excalidraw-plugin",
+	"name": "Excalidraw",
+	"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
+}

dist/styles.css

@@ -0,0 +1,18 @@
+.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,10 +1,10 @@
 {
-	"id": "obsidian-daily-stats",
-	"name": "Daily Stats",
-	"version": "1.0.1",
-	"minAppVersion": "0.10.12",
-	"description": "Track your daily word count across all notes in your vault.",
-	"author": "Dhruvik Parikh",
-	"authorUrl": "https://github.com/dhruvik7",
+	"id": "obsidian-excalidraw-plugin",
+	"name": "Excalidraw",
+	"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

@@ -1,31 +1,35 @@
-{
-  "name": "obsidian-daily-stats",
-  "version": "1.0.1",
-  "description": "This is an Obsidian.md plugin that lets you view your daily word count.",
-  "main": "main.js",
-  "scripts": {
-    "dev": "rollup --config rollup.config.js -w",
-    "build": "rollup --config rollup.config.js"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "devDependencies": {
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-typescript": "^6.0.0",
-    "@types/node": "^14.14.2",
-    "@types/react-calendar-heatmap": "^1.6.2",
-    "@types/react-dom": "^17.0.1",
-    "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
-    "postcss": "^8.2.6",
-    "react": "^17.0.1",
-    "react-calendar-heatmap": "^1.8.1",
-    "react-dom": "^17.0.1",
-    "rollup": "^2.32.1",
-    "rollup-plugin-postcss": "^4.0.0",
-    "tslib": "^2.0.3",
-    "typescript": "^4.0.3"
-  },
-  "dependencies": {}
-}
+{
+  "name": "obsidian-excalidraw-plugin",
+  "version": "1.0.4",
+  "description": "This is an Obsidian.md plugin that lets you view and edit Excalidraw drawings",
+  "main": "main.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development rollup --config rollup.config.js -w",
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.6.0",
+    "react": "17.0.0",
+    "react-dom": "17.0.0",
+    "react-scripts": "4.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^15.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@rollup/plugin-typescript": "^6.0.0",
+    "@types/node": "^14.14.2",
+    "@types/react-dom": "^17.0.0",
+    "cross-env": "7.0.3",
+    "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
+    "postcss": "^8.2.6",
+    "rollup": "2.45.2",
+    "rollup-plugin-copy": "3.4.0",
+    "rollup-plugin-minify": "1.0.3",
+    "rollup-plugin-postcss": "^4.0.0",
+    "tslib": "^2.0.3",
+    "typescript": "^4.0.3"
+  }
+}

rollup.config.js

@@ -1,23 +1,43 @@
 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 postcss from 'rollup-plugin-postcss';
+import copy from 'rollup-plugin-copy';
+//import uglify from 'rollup-plugin-uglify';
+//import minify from "rollup-plugin-minify"
+import { env } from "process";
+import replace from "@rollup/plugin-replace";
+
+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: '.',
+    dir: isProd ? './dist' : '.',
     sourcemap: 'inline',
     format: 'cjs',
     exports: 'default'
   },
-  external: ['obsidian', 'crypto'],
+  external: ['obsidian'],
   plugins: [
-    typescript(),
+    typescript({inlineSources: !isProd}),
     nodeResolve({ browser: true, preferBuiltins: true }),
+    replace({
+      preventAssignment: true,
+      "process.env.NODE_ENV": JSON.stringify(env.NODE_ENV),
+    }),
     commonjs(),
     postcss({
       plugins: []
-    })
+    }),
+    copy({
+      targets: [
+        { src: ['manifest.json', 'styles.css'], dest: './dist' }
+      ], flatten: true
+    }),
+    //process.env.NODE_ENV === 'production' && minify(),
   ]
 };

src/ExcalidrawView.ts

@@ -0,0 +1,163 @@
+import { TextFileView, WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import Excalidraw, {exportToSvg} from "@excalidraw/excalidraw";
+import { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
+import { AppState } from "@excalidraw/excalidraw/types/types";
+import {VIEW_TYPE_EXCALIDRAW, EXCALIDRAW_FILE_EXTENSION, ICON_NAME} from './constants';
+
+
+export default class ExcalidrawView extends TextFileView {
+  private getScene: any;
+
+  constructor(leaf: WorkspaceLeaf) {
+    super(leaf);
+    this.getScene = null;
+  }
+
+  async onClose() {
+    this.requestSave();
+  }
+ 
+  // clear the view content
+  clear() {
+    ReactDOM.unmountComponentAtNode(this.contentEl);
+    this.getScene = null;
+  }
+
+  // get the new file content
+  getViewData () {
+    if(this.getScene) return this.getScene();
+    else return '';
+  }
+
+ 
+
+  setViewData (data: string, clear: boolean) {   
+    if (this.app.workspace.layoutReady) {
+      this.loadDrawing(data,clear);
+    } else {
+      this.registerEvent(this.app.workspace.on('layout-ready', async () => this.loadDrawing(data,clear)));
+    }
+  }
+
+  private loadDrawing (data:string, clear:boolean) :void {   
+    if(clear) this.clear();
+    const excalidrawData = JSON.parse(data);
+    this.instantiateExcalidraw({
+      elements: excalidrawData.elements,
+      appState: excalidrawData.appState,
+      scrollToContent: true,
+    });
+  }
+
+  // gets the title of the document
+  getDisplayText() {
+    if(this.file) return this.file.basename;
+    else return "Excalidraw (no file)";
+
+  }
+
+  // confirms this view can accept csv extension
+  canAcceptExtension(extension: string) {
+    return extension == EXCALIDRAW_FILE_EXTENSION;
+  }  
+
+  // the view type name
+  getViewType() {
+    return VIEW_TYPE_EXCALIDRAW;
+  }
+
+  // icon for the view
+  getIcon() {
+    return ICON_NAME;
+  }
+
+  private instantiateExcalidraw(initdata: any) {  
+    ReactDOM.render(React.createElement(() => {
+      let previousSceneVersion = 0;
+      const excalidrawRef = React.useRef(null);
+      const excalidrawWrapperRef = React.useRef(null);
+      const [dimensions, setDimensions] = React.useState({
+        width: undefined,
+        height: undefined
+      });
+      
+      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)}
+        };
+        window.addEventListener("resize", onResize); 
+        return () => window.removeEventListener("resize", onResize);
+      }, [excalidrawWrapperRef]);
+      
+      this.getScene = function() {
+        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),
+          "appState": {
+            "theme": st.theme,
+            "viewBackgroundColor": st.viewBackgroundColor,
+            "gridSize": st.gridSize,
+            "zenModeEnabled": st.zenModeEnabled
+          }
+        });
+      };
+
+      return React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(
+          "div",
+          {
+            className: "excalidraw-wrapper",
+            ref: excalidrawWrapperRef
+          },
+          React.createElement(Excalidraw.default, {
+            ref: excalidrawRef,
+            width: dimensions.width,
+            height: dimensions.height,
+            UIOptions: {
+              canvasActions: {
+                loadScene: false,
+                saveScene: false,
+                saveAsScene: false
+              },
+            },
+            initialData: initdata
+          })
+        )
+      );
+    }),(this as any).contentEl);
+  }
+
+  public static getSVG(data:string):SVGSVGElement {
+    try {
+      const excalidrawData = JSON.parse(data);
+      return exportToSvg({
+        elements: excalidrawData.elements,
+        appState: {
+          exportBackground: true,
+          exportWithDarkMode: excalidrawData.appState?.theme=="light" ? false : true,
+          ... excalidrawData.appState,},
+        exportPadding:10,
+        metadata: "Generated by Excalidraw-Obsidian plugin",
+      });
+    } catch (error) {
+      return null;
+    }
+  }
+}

src/calendar.tsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import ReactCalendarHeatmap from "react-calendar-heatmap";
-import { MAX_COLORS, COLOR_FREQ } from "./constants";
-
-interface HeatmapProps {
-    data: any[];
-}
-
-class Heatmap extends React.Component<HeatmapProps> {
-    render() {
-        const element = document.getElementById("color-elem");
-        if (element) {
-            const base = getComputedStyle(element).getPropertyValue("color");
-            for (let elem of Array.from(document.getElementsByClassName("color1") as HTMLCollectionOf<HTMLElement>)) {
-                elem.style.fill = base;
-                elem.style.opacity = "0.44";
-            }
-            for (let elem of Array.from(document.getElementsByClassName("color2") as HTMLCollectionOf<HTMLElement>)) {
-                elem.style.fill = base;
-                elem.style.opacity = "0.6";
-            }
-            for (let elem of Array.from(document.getElementsByClassName("color3") as HTMLCollectionOf<HTMLElement>)) {
-                elem.style.fill = base;
-                elem.style.opacity = "0.76";
-            }
-            for (let elem of Array.from(document.getElementsByClassName("color4") as HTMLCollectionOf<HTMLElement>)) {
-                elem.style.fill = base;
-                elem.style.opacity = "0.92";
-            }
-        }
-        return <div style={{ padding: "10px 0px 0px 10px", maxWidth: "300px", marginLeft: "auto", marginRight: "auto", fontSize: "4px !important" }} id="calendar-container">
-            <ReactCalendarHeatmap
-                startDate={new Date(new Date().setFullYear(new Date().getFullYear() - 1))}
-                endDate={new Date()}
-                values={this.props.data}
-                horizontal={false}
-                showMonthLabels={true}
-                showWeekdayLabels={true}
-                weekdayLabels={["S", "M", "T", "W", "T", "F", "S"]}
-                classForValue={(value) => {
-                    if (!value || value.count == 0) {
-                        return 'color-empty';
-                    }
-                    return `color${Math.min(MAX_COLORS, Math.floor(Math.log(value.count) / Math.log(COLOR_FREQ)))}`;
-                }}
-                titleForValue={(value) => !value || value.date === null ? '' : value.count + ' words on ' + new Date(value.date).toLocaleDateString()}
-            />
-            <div id="color-elem" />
-        </div>
-    }
-
-}
-
-export default Heatmap;

src/constants.ts

@@ -1,3 +1,9 @@
-export const VIEW_TYPE_STATS_TRACKER = "stats-tracker";
-export const MAX_COLORS = 5;
-export const COLOR_FREQ = 6;
+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>`;

src/main.ts

@@ -1,165 +1,204 @@
-import { TFile, Plugin, MarkdownView, debounce, Debouncer, WorkspaceLeaf, addIcon } from 'obsidian';
-import { VIEW_TYPE_STATS_TRACKER } from './constants';
-import StatsTrackerView from './view';
+import { 
+  TFile, 
+  TFolder,
+  Plugin, 
+  WorkspaceLeaf, 
+  addIcon, 
+  App, 
+  PluginManifest, 
+  MarkdownView,
+  normalizePath,
+} from 'obsidian';
+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
+} from './settings';
+import {
+  openDialogAction, 
+  OpenFileDialog
+} from './openDrawing';
 
-interface WordCount {
-	initial: number;
-	current: number;
-}
 
-interface DailyStatsSettings {
-	dayCounts: Record<string, number>;
-	todaysWordCount: Record<string, WordCount>;
-}
+export default class ExcalidrawPlugin extends Plugin {
+  public settings: ExcalidrawSettings;
+  private openDialog: OpenFileDialog;
+  
+  constructor(app: App, manifest: PluginManifest) {
+    super(app, manifest);
+  }
+  
+  async onload() {
+    addIcon(ICON_NAME, EXCALIDRAW_ICON);
 
-const DEFAULT_SETTINGS: DailyStatsSettings = {
-	dayCounts: {},
-	todaysWordCount: {}
-}
+    this.registerView(
+      VIEW_TYPE_EXCALIDRAW, 
+      (leaf: WorkspaceLeaf) => new ExcalidrawView(leaf)
+    );
 
-export default class DailyStats extends Plugin {
-	settings: DailyStatsSettings;
-	statusBarEl: HTMLElement;
-	currentWordCount: number;
-	today: string;
-	debouncedUpdate: Debouncer<[contents: string, filepath: string]>;
+    this.registerExtensions([EXCALIDRAW_FILE_EXTENSION],VIEW_TYPE_EXCALIDRAW);
 
-	private view: StatsTrackerView;
+    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_FILE_EXTENSION+"]]");
+          el.createEl("p",message);
+          el.createEl("p",source);
+        })  
+      }
 
-	async onload() {
-		await this.loadSettings();
+      const filename = source.match(/\[{2}(.*)\]{2}/m);
+      const filenameWH = source.match(/\[{2}(.*)\|(\d*)x(\d*)\]{2}/m);
+      const filenameW = source.match(/\[{2}(.*)\|(\d*)\]{2}/m);
+      
+      let fname:string = '';
+      let fwidth:string = this.settings.width;
+      let fheight:string = null;
 
-		this.statusBarEl = this.addStatusBarItem();
-		this.updateDate();
-		if (this.settings.dayCounts.hasOwnProperty(this.today)) {
-			this.updateCounts();
-		} else {
-			this.currentWordCount = 0;
-		}
+      if (filenameWH) {
+        fname = filenameWH[1];
+        fwidth = filenameWH[2];
+        fheight = filenameWH[3];
+      } else if (filenameW) {
+        fname = filenameW[1];
+        fwidth = filenameW[2];
+      } else if (filename) {
+        fname = filename[1];
+      }
 
-		this.debouncedUpdate = debounce((contents: string, filepath: string) => {
-			this.updateWordCount(contents, filepath);
-		}, 400, false);
+      if(fname == '') {
+        parseError("No link to file found in codeblock.");
+        return;
+      }
 
-		this.registerView(
-			VIEW_TYPE_STATS_TRACKER,
-			(leaf: WorkspaceLeaf) => (this.view = new StatsTrackerView(leaf, this.settings.dayCounts))
-		);
+      const file = this.app.vault.getAbstractFileByPath(fname);
+      if(!(file && file instanceof TFile)) {
+        parseError("File does not exist. " + fname);
+        return;
+      }
 
-		this.addCommand({
-			id: "show-daily-stats-tracker-view",
-			name: "Open tracker view",
-			checkCallback: (checking: boolean) => {
-				if (checking) {
-					return (
-						this.app.workspace.getLeavesOfType(VIEW_TYPE_STATS_TRACKER).length === 0
-					);
-				}
-				this.initLeaf();
-			},
-		});
+      if(file.extension != EXCALIDRAW_FILE_EXTENSION) {
+        parseError("Not an excalidraw file. Must have extension " + EXCALIDRAW_FILE_EXTENSION);
+        return;
+      }
 
-		this.registerEvent(
-			this.app.workspace.on("quit", this.onunload.bind(this))
-		);
+      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);
+      });
+    });
 
-		this.registerEvent(
-			this.app.workspace.on("quick-preview", this.onQuickPreview.bind(this))
-		);
+    await this.loadSettings();
+    this.addSettingTab(new ExcalidrawSettingTab(this.app, this));
 
-		this.registerInterval(
-			window.setInterval(() => {
-				this.statusBarEl.setText(this.currentWordCount + " words today ");
-			}, 200)
-		);
+    this.openDialog = new OpenFileDialog(this.app, this);
+    this.addRibbonIcon(ICON_NAME, 'Excalidraw', async () => {
+      this.openDialog.start(openDialogAction.openFile);
+    });
 
-		addIcon("bar-graph", `<path fill="currentColor" stroke="currentColor" d="M122.88,105.98H9.59v-0.02c-2.65,0-5.05-1.08-6.78-2.81c-1.72-1.72-2.79-4.11-2.79-6.75H0V0h12.26v93.73h110.62V105.98 L122.88,105.98z M83.37,45.6h19.55c1.04,0,1.89,0.85,1.89,1.89v38.46c0,1.04-0.85,1.89-1.89,1.89H83.37 c-1.04,0-1.89-0.85-1.89-1.89V47.5C81.48,46.46,82.33,45.6,83.37,45.6L83.37,45.6z M25.36,22.07h19.55c1.04,0,1.89,0.85,1.89,1.89 v62c0,1.04-0.85,1.89-1.89,1.89H25.36c-1.04,0-1.89-0.85-1.89-1.89v-62C23.47,22.92,24.32,22.07,25.36,22.07L25.36,22.07 L25.36,22.07z M54.37,8.83h19.54c1.04,0,1.89,0.85,1.89,1.89v75.24c0,1.04-0.85,1.89-1.89,1.89H54.37c-1.04,0-1.89-0.85-1.89-1.89 V10.72C52.48,9.68,53.33,8.83,54.37,8.83L54.37,8.83z"/>`);
-		this.registerInterval(window.setInterval(() => {
-			this.updateDate();
-			this.saveSettings();
-		}, 1000));
+    this.addCommand({
+      id: "excalidraw-open",
+      name: "Open an existing drawing or create new one",
+      callback: () => {
+        this.openDialog.start(openDialogAction.openFile);
+      },
+    });
 
-		if (this.app.workspace.layoutReady) {
-			this.initLeaf();
-		} else {
-			this.registerEvent(
-				this.app.workspace.on("layout-ready", this.initLeaf.bind(this))
-			);
-		}
-	}
+    this.addCommand({
+      id: "excalidraw-insert-transclusion",
+      name: "Transclude an ."+EXCALIDRAW_FILE_EXTENSION+" file into a markdown document",
+      callback: () => {
+        this.openDialog.start(openDialogAction.insertLink);
+      },
+    });
 
-	initLeaf(): void {
-		if (this.app.workspace.getLeavesOfType(VIEW_TYPE_STATS_TRACKER).length) {
-			return;
-		}
-		this.app.workspace.getRightLeaf(false).setViewState({
-			type: VIEW_TYPE_STATS_TRACKER,
-		});
-	}
 
-	async onunload() {
-		await this.saveSettings();
-	}
+    this.addCommand({
+      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;
+      editor.replaceSelection(
+        String.fromCharCode(96,96,96) + 
+        CODEBLOCK_EXCALIDRAW +
+        "\n[["+data+"]]\n" +
+        String.fromCharCode(96,96,96));
+      editor.focus();
+    }
+  
+  }
 
-	onQuickPreview(file: TFile, contents: string) {
-		if (this.app.workspace.getActiveViewOfType(MarkdownView)) {
-			this.debouncedUpdate(contents, file.path);
-		}
-	}
+  private async loadSettings() {
+    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
+  }
 
-	//Credit: better-word-count by Luke Leppan (https://github.com/lukeleppan/better-word-count)
-	getWordCount(text: string) {
-		let words: number = 0;
+  async saveSettings() {
+    await this.saveData(this.settings);
+  }
 
-		const matches = text.match(
-			/[a-zA-Z0-9_\u0392-\u03c9\u00c0-\u00ff\u0600-\u06ff]+|[\u4e00-\u9fff\u3400-\u4dbf\uf900-\ufaff\u3040-\u309f\uac00-\ud7af]+/gm
-		);
+  public async openDrawing(drawingFile: TFile) {
+    const leafs = this.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+    let leaf:WorkspaceLeaf = null;
 
-		if (matches) {
-			for (let i = 0; i < matches.length; i++) {
-				if (matches[i].charCodeAt(0) > 19968) {
-					words += matches[i].length;
-				} else {
-					words += 1;
-				}
-			}
-		}
+    if (leafs?.length > 0) {
+      leaf = leafs[0];
+    }
+    if(!leaf) {
+      leaf = this.app.workspace.activeLeaf;
+    }
 
-		return words;
-	}
+    if(!leaf) {
+      leaf = this.app.workspace.getLeaf();
+    }
 
-	updateWordCount(contents: string, filepath: string) {
-		const curr = this.getWordCount(contents);
-		if (this.settings.dayCounts.hasOwnProperty(this.today)) {
-			if (this.settings.todaysWordCount.hasOwnProperty(filepath)) {//updating existing file
-				this.settings.todaysWordCount[filepath].current = curr;
-			} else {//created new file during session
-				this.settings.todaysWordCount[filepath] = { initial: curr, current: curr };
-			}
-		} else {//new day, flush the cache
-			this.settings.todaysWordCount = {};
-			this.settings.todaysWordCount[filepath] = { initial: curr, current: curr };
-		}
-		this.updateCounts();
-	}
+    leaf.setViewState({
+      type: VIEW_TYPE_EXCALIDRAW,
+      state: {file: drawingFile.path}}
+    );
+  }
 
-	updateDate() {
-		const d = new Date();
-		this.today = d.getFullYear() + "/" + d.getMonth() + "/" + d.getDate();
-	}
+  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) {
+    const folder = this.app.vault.getAbstractFileByPath(normalizePath(this.settings.folder));
+    if (!(folder && folder instanceof TFolder)) {
+      await this.app.vault.createFolder(this.settings.folder);
+    }
 
-	updateCounts() {
-		this.currentWordCount = Object.values(this.settings.todaysWordCount).map((wordCount) => Math.max(0, wordCount.current - wordCount.initial)).reduce((a, b) => a + b, 0);
-		this.settings.dayCounts[this.today] = this.currentWordCount;
-	}
-
-	async loadSettings() {
-		this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());
-	}
-
-	async saveSettings() {
-		if (Object.keys(this.settings.dayCounts).length > 0) { //ensuring we never reset the data by accident
-			await this.saveData(this.settings);
-		}
-	}
+    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

@@ -0,0 +1,72 @@
+import { App, FuzzySuggestModal, TFile, TFolder, normalizePath, Vault, TAbstractFile, Instruction } from "obsidian";
+import ExcalidrawPlugin from './main';
+import {EMPTY_MESSAGE,EXCALIDRAW_FILE_EXTENSION} from './constants';
+
+export enum openDialogAction {
+  openFile,
+  insertLink,
+}
+
+export class OpenFileDialog extends FuzzySuggestModal<TFile> {
+  public app: App;
+  private plugin: ExcalidrawPlugin;
+  private action: openDialogAction;
+  
+
+  constructor(app: App, plugin: ExcalidrawPlugin) {
+    super(app);
+    this.app = app;
+    this.action = openDialogAction.openFile;
+    this.plugin = plugin;
+    this.setInstructions([{
+      command: "Type name of drawing to select.",
+      purpose: "",
+    }]);
+
+    
+    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_FILE_EXTENSION);
+          this.close();
+        }
+      }
+    };
+  }
+
+  getItems(): TFile[] {
+    const excalidrawFiles = this.app.vault.getFiles();
+    return (excalidrawFiles || []).filter((f:TFile) => (f.extension==EXCALIDRAW_FILE_EXTENSION));
+  }
+
+  getItemText(item: TFile): string {
+    return item.basename;
+  }
+
+  onChooseItem(item: TFile, _evt: MouseEvent | KeyboardEvent): void {
+    switch(this.action) {
+      case(openDialogAction.openFile):
+        this.plugin.openDrawing(item);
+        break;
+      case(openDialogAction.insertLink):
+        this.plugin.insertCodeblock(item.path);
+        break;
+    }
+  }
+
+  start(action:openDialogAction): void {
+    this.action = action;
+    switch(action) {
+      case (openDialogAction.openFile):
+        this.emptyStateText = EMPTY_MESSAGE;
+        this.setPlaceholder("Select existing drawing or type name of new and hit enter.");
+        break;
+      case (openDialogAction.insertLink):
+        this.emptyStateText = "No file matches your query.";
+        this.setPlaceholder("Select existing drawing to insert into document.");
+        break;
+    }
+    this.open();
+  }
+
+}

src/settings.ts

@@ -0,0 +1,66 @@
+import {App, PluginSettingTab, Setting} from 'obsidian';
+import type ExcalidrawPlugin from "./main";
+
+export interface ExcalidrawSettings {
+  folder: string,
+  templateFilePath: string,
+  width: string,
+}
+
+export const DEFAULT_SETTINGS: ExcalidrawSettings = {
+  folder: 'excalidraw',
+  templateFilePath: '',
+  width: '400',
+}
+
+export class ExcalidrawSettingTab extends PluginSettingTab {
+  plugin: ExcalidrawPlugin;
+
+  constructor(app: App, plugin: ExcalidrawPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+  }
+
+  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();
+        }));
+
+    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')
+        .setValue(this.plugin.settings.width)
+        .onChange(async (value) => {
+          this.plugin.settings.width = value;
+          await this.plugin.saveSettings();
+        }));
+  }
+}

src/view.ts

@@ -1,45 +0,0 @@
-import { ItemView, WorkspaceLeaf } from "obsidian";
-import { VIEW_TYPE_STATS_TRACKER } from "./constants";
-import * as ReactDOM from "react-dom";
-import * as React from "react";
-import Calendar from "./calendar";
-import '../styles.css';
-
-export default class StatsTrackerView extends ItemView {
-    private dayCounts: Record<string, number>;
-
-    constructor(leaf: WorkspaceLeaf, dayCounts: Record<string, number>) {
-        super(leaf);
-        this.dayCounts = dayCounts;
-
-        this.registerInterval(
-            window.setInterval(() => {
-                ReactDOM.render(React.createElement(Calendar, {
-                    data: Object.keys(this.dayCounts).map(day => {
-                        return { "date": new Date(new Date(day).setMonth(new Date(day).getMonth() + 1)), "count": this.dayCounts[day] }
-                    }),
-                }), (this as any).contentEl);
-            }, 1000)
-        );
-    }
-
-    getDisplayText() {
-        return "Daily Stats";
-    }
-
-    getIcon() {
-        return "bar-graph";
-    }
-
-    getViewType() {
-        return VIEW_TYPE_STATS_TRACKER;
-    }
-
-    async onOpen() {
-        ReactDOM.render(React.createElement(Calendar, {
-            data: Object.keys(this.dayCounts).map(day => {
-                return { "date": new Date(new Date(day).setMonth(new Date(day).getMonth() + 1)), "count": this.dayCounts[day] }
-            }),
-        }), (this as any).contentEl);
-    }
-}

styles.css

@@ -1,24 +1,18 @@
-text {
-    fill: #aaa;
-}
-
-rect:hover {
-    stroke: #555;
-    stroke-width: 0.5px;
-}
-
-/*
-* Default color scale
-*/
-
-.color-empty {
-    fill: var(--background-modifier-border);
-}
-
-.color-filled {
-    fill: var(--text-accent);
-}
-
-#color-elem {
-    color: var(--text-accent);
+.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;
 }

tsconfig.json

@@ -20,6 +20,6 @@
   },
   "include": [
     "**/*.ts",
-    "**/*.tsx",
+    "**/*.tsx", "src/openDrawing.ts",
   ]
 }

versions.json

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