1.5.18

1.5.17
Merge pull request #368 from 1-2-3/master
2025-08-06 05:46:28 +00:00 · 2022-01-16 20:35:46 +01:00 · 2022-01-16 13:19:04 +01:00 · 2022-01-16 06:20:58 +01:00 · 2022-01-16 11:16:49 +08:00 · 2022-01-15 12:09:15 +01:00
115 changed files with 15320 additions and 3982 deletions
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+node_modules/
+.github/
+docs/
+images/
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -0,0 +1,7 @@
+{
+  "extends": ["@excalidraw/eslint-config"],
+  "rules": {
+    "import/no-anonymous-default-export": "off",
+    "no-restricted-globals": "off"
+  }
+}
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -0,0 +1,70 @@
+# For most projects, this workflow file will not need changing; you simply need
+# to commit it to your repository.
+#
+# You may wish to alter this file to override the set of languages analyzed,
+# or to provide custom queries or build logic.
+#
+# ******** NOTE ********
+# We have attempted to detect the languages in your repository. Please check
+# the `language` matrix defined below to confirm you have the correct set of
+# supported CodeQL languages.
+#
+name: "CodeQL"
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    # The branches below must be a subset of the branches above
+    branches: [ master ]
+  schedule:
+    - cron: '38 14 * * 4'
+
+jobs:
+  analyze:
+    name: Analyze
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: [ 'javascript' ]
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v2
+
+    # Initializes the CodeQL tools for scanning.
+    - name: Initialize CodeQL
+      uses: github/codeql-action/init@v1
+      with:
+        languages: ${{ matrix.language }}
+        # If you wish to specify custom queries, you can do so here or in a config file.
+        # By default, queries listed here will override any specified in a config file.
+        # Prefix the list here with "+" to use these queries and those in the config file.
+        # queries: ./path/to/local/query, your-org/your-repo/queries@main
+
+    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
+    # If this step fails, then you should remove it and run the build manually (see below)
+    - name: Autobuild
+      uses: github/codeql-action/autobuild@v1
+
+    # ℹ️ Command-line programs to run using the OS shell.
+    # 📚 https://git.io/JvXDl
+
+    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
+    #    and modify them (or add more) to build your code if your project
+    #    uses a compiled language
+
+    #- run: |
+    #   make bootstrap
+    #   make release
+
+    - name: Perform CodeQL Analysis
+      uses: github/codeql-action/analyze@v1
--- a/README.md
+++ b/README.md
@@ -1,185 +1,91 @@
-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) and/or watch the videos below.
+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, you can embed drawings into your documents, and you can link to documents and other drawings to/and from Excalidraw. For a showcase of Excalidraw features, please read my blog post [here](https://www.zsolt.blog/2021/03/showcasing-excalidraw.html) and/or watch the videos below.

-![image](https://user-images.githubusercontent.com/14358394/115983515-d06c2c80-a5a1-11eb-8d12-c7df91d18107.png)
+Please upgrade to Obsidian v0.12.19 or higher to get the latest release. 

-## Important notice to the 1.1.x update!
+![image](https://user-images.githubusercontent.com/14358394/125159831-336d6880-e17a-11eb-8a3d-ceabc2555a08.png)

-Thank you for updating to Excalidraw 1.1.x!
+# Video walkthrough
+| | | |
+|----|----|----|
+|[![Obsidian-Excalidraw 1.2.0 update - Major IMPROVEMENTS](https://user-images.githubusercontent.com/14358394/124356817-7b3f3d80-dc18-11eb-932d-363bb373c5ab.jpg)](https://youtu.be/UxJLLYtgDKE)|[![1  Getting Started](https://user-images.githubusercontent.com/14358394/125160304-7f211180-e17c-11eb-8363-c52723de1ffd.jpg)](https://youtu.be/sY4FoflGaiM)|[![2  Basic shapes and features](https://user-images.githubusercontent.com/14358394/125160312-8a743d00-e17c-11eb-9fa2-490ef4cbd59e.jpg)](https://youtu.be/Iy_oVTq12Gw)|
+|[![3  Groups](https://user-images.githubusercontent.com/14358394/125160323-96f89580-e17c-11eb-9bce-8eb1067a51bb.jpg)](https://youtu.be/QOL1KF7-kdc)|[![4  Stencil](https://user-images.githubusercontent.com/14358394/125160332-9f50d080-e17c-11eb-98e9-fec60fe147d9.jpg)](https://youtu.be/aSgcbfspvfo)|[![5  embedding](https://user-images.githubusercontent.com/14358394/125160341-a546b180-e17c-11eb-9de8-d87fdc844c9c.jpg)](https://youtu.be/MaJ5jJwBRWs)|
+|[![6  Links](https://user-images.githubusercontent.com/14358394/125160346-aa0b6580-e17c-11eb-930b-4024807040d1.jpg)](https://youtu.be/MXzeCOEExNo)|[![7  Markdown](https://user-images.githubusercontent.com/14358394/125160354-b2fc3700-e17c-11eb-81af-9e71e461f6dd.jpg)](https://youtu.be/R0IAg0s-wQE)|[![8  Templates](https://user-images.githubusercontent.com/14358394/125160360-b8f21800-e17c-11eb-8bd8-79d4e3f6e92d.jpg)](https://youtu.be/ibdS7ykwpW4)|
+|[![9  Excalidraw Automate](https://user-images.githubusercontent.com/14358394/125160367-bdb6cc00-e17c-11eb-92f1-6f59faea85fd.jpg)](https://youtu.be/VRZVujfVab0)|[![10  Miscellaneous](https://user-images.githubusercontent.com/14358394/125160374-c3141680-e17c-11eb-8cc2-dfaffd903d15.jpg)](https://youtu.be/D1iBYo1_jjc)|[![Image Elements](https://user-images.githubusercontent.com/14358394/138607067-ccb62f92-48a4-4880-ac6e-68c1bf86ac2c.png)](https://www.youtube.com/watch?v=_c_0zpBJ4Xc&)|
+|[![LaTex Demo](https://user-images.githubusercontent.com/14358394/143732412-1c65227e-4381-406d-847a-b001ab3506ca.jpg)](https://youtu.be/r08wk-58DPk)|[![markdown embeds](https://user-images.githubusercontent.com/14358394/143732440-90bfa029-8615-462e-ada3-c903d71a82c9.jpg)](https://youtu.be/tsecSfnTMow)|[![markdownAdvanced](https://user-images.githubusercontent.com/14358394/143783906-15cee494-c6d5-4495-a2ca-74634e4e7355.jpg)](https://youtu.be/K6qZkTz8GHs)|
+|[![Script Engine](https://user-images.githubusercontent.com/14358394/145684531-8d9c2992-59ac-4ebc-804a-4cce1777ded2.jpg)](https://youtu.be/hePJcObHIso)|[![sticky notes thumbnail](https://user-images.githubusercontent.com/14358394/147283367-e5689385-ea51-4983-81a3-04d810d39f62.jpg)](https://youtu.be/NOuddK6xrr8)|[![plugin store](https://user-images.githubusercontent.com/14358394/147889174-6c306d0d-2d29-46cc-a53f-3f0013cf14de.jpg)](https://youtu.be/lzYdOQ6z8F0)|
+|[![fourtfont](https://user-images.githubusercontent.com/14358394/149659524-2a4e0a24-40c9-4e66-a6b1-c92f3b88ecd5.jpg)](https://youtu.be/eKFmrSQhFA4)|||

-I have improved how drawings are embedded! You no longer need an Excalidraw codeblock. You can now embed drawings just like any other images: `![[my drawing.excalidraw]]` or `![[my drawing.excalidraw|500|left]]` or `![[my drawing.excalidraw|right-wrap]]`, `![alttext|500|right](drawing.excalidraw)`, `![](folder/drawing.excalidraw)`, etc. You get the idea.
-
-### Detailed release notes are under the How to videos. 

 # Key features
- The plugin saves drawings to your vault as a file with the *.excalidraw* file extension.
- The plugin adds the following actions to the **command palette**:
-  - Create a new drawing
-  - Find and edit existing drawings in your vault, 
-  - Transclude (embed) a drawing into a document, and
-  - Export a drawing as PNG or SVG.
-  - Insert vault internal-link into drawing
- You can also use the **file explorer** in your vault to open existing Excalidraw files. 
- Use the **ribbon button** to create a new drawing, CTRL+Click to open on a new page.
- Open settings to set up
-  - a **default folder** for new drawings, 
-  - a **Template** by first creating a drawing, customizing it the way you like it, and specifying the file as the template in settings,
-  - Excalidraw to **automatically export SVG and/or PNG** files for your drawings, and to keep those in sync with your drawing,
-  - default width of embedded drawings 
- You can also customize the **size and position of the embedded image** using the `[[image.excalidraw|100]]`, `[[image.excalidraw|100x100]]`, `[[image.excalidraw|100|left]]`, `[[image.excalidraw|right-wrap]]`, formatting options. `[[<filename.excalidraw>|<width>x<height>|<alignment>]]`. You can add your custom alignment via css. Any text that appears in `<alignment>` will be added as style to the SVG element and the wrapper DIV element. Check below and styles.css for more insight.
- Supports hyperlinks e.g. `https://zsolt.blog` and internal links e.g. `[[My file in vault]]` in drawing text. Ctrl/meta + click on a text element.
-  - Square brackets can be omitted if the entire text element is an internal link. i.e. the following two text elements `Check out the [[requirements specification]]!!` and `requirements specification` will both represent a link to `requirements specification.md`.
-  - When files are moved/renamed in your vault, text elements that are recognized links will also get updated. Check corresponding setting.
- Includes full [Templater](https://silentvoid13.github.io/Templater/) and [Dataview](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/) support through ExcalidrawAutomate. Read detailed help + examples: [here](https://zsviczian.github.io/obsidian-excalidraw-plugin/)
- REQUIRES AN OBSIDIAN SYNC SUBSCRIPTION: Temporary hack/workaround to enable Obsidian Sync for Excalidraw files. This enables almost real-time two-way sync for Excalidraw files between your devices. You can draw on your iPad with your pencil, on your Android with your stylus, and the image will be available in Obsidian on your desktop as well and vice versa. 
-
-# How to?
-Part 1: Intro to Obsidian-Excalidraw - Start a new drawing (3:12)
-
-[![Part 1: Intro to Obsidian-Excalidraw - Start a new drawing](https://user-images.githubusercontent.com/14358394/115983840-05797e80-a5a4-11eb-93cd-bae4b1973f72.jpg)](https://youtu.be/i-hIfY-Ecjg)
-
-Part 2: Intro to Obsidian-Excalidraw - Basic features (6:06)
-
-[![Part 2: Intro to Obsidian-Excalidraw - Basic features](https://user-images.githubusercontent.com/14358394/115983902-699c4280-a5a4-11eb-973d-2ba1bd7ac2db.jpg)](https://youtu.be/-dk7pvdl-H0)
-
-Part 3: Intro to Obsidian-Excalidraw - Advanced features (3:26)
-
-[![Part 3: Intro to Obsidian-Excalidraw - Advanced features](https://user-images.githubusercontent.com/14358394/115983916-7de03f80-a5a4-11eb-8f36-4ad516ef9e80.jpg)](https://youtu.be/2cKlEwo8WU0)
-
-Part 4: Intro to Obsidian-Excalidraw - Setting up a template (1:45)
-
-[![Part 4: Intro to Obsidian-Excalidraw - Setting up a template](https://user-images.githubusercontent.com/14358394/115983929-92bcd300-a5a4-11eb-9d4f-03e5cb9e3ebf.jpg)](https://youtu.be/oNPYZEpmuJ8)
-
-Part 5: Intro to Obsidian-Excalidraw - Stencil Library (3:16)
-
-[![Part 5: Intro to Obsidian-Excalidraw - Stencil Library](https://user-images.githubusercontent.com/14358394/115983944-a8ca9380-a5a4-11eb-8a69-e74ae00d95be.jpg)](https://youtu.be/rLx-9FvlzgI)
-
-Part 6: Intro to Obsidian-Excalidraw: Embedding drawings (2:08)
-
-[![Part 6: Intro to Obsidian-Excalidraw: Embedding drawings](https://user-images.githubusercontent.com/14358394/115983954-bbdd6380-a5a4-11eb-9243-f0151451afcd.jpg)](https://youtu.be/JQeJ-Hh-xAI)
-
-# Release Notes
-## 1.1.10
- When you CTRL-Click a grouped collection of objects Excalidraw will open the page based on the embedded text.
- I added a setting to disable the CTRL-click functionality should it interfere with default Excalidraw behavior for you. In my experience double-clicking achieves the same outcome as a CTRL-click on an element in a grouped collection of objects, but if you use the CTRL-click feature to select an element of a group frequently, and find the "CTRL-click to open a link" feature annoying, you can now disable it.
-
-## 1.1.9
- I modified the behavior of Excalidraw text element links.
-  - CTRL/META + CLICK a text element to open it as a link.
-  - CTRL/META + ALT + CLICK to create the file (if it does not yet exist) and open it
-  - CTRL/META + SHIFT + CLICK to open the file in a new pane
-  - CTRL/META + ALT + SHIFT + CLICK to create the file (if it does not yet exist) and open it in a new pane
- I added a setting to limit link functionality to `[[valid Obsidian links]]` only. By default, the full text of a text element is treated as a link unless it contains a `[[valid internal link]]`, in which case only the `[[internal link]]` is used. The new setting may be beneficial if you want to avoid unexpected updates to text in your drawings. This may happen if a text element in a drawing accidentally matches a file in your vault, and you happen to rename or move that file. By limiting the link behavior to `[[valid internal links]]` only, these accidental matches can be avoided. This is not frequent but happened to me recently.
- LaTeX symbol support. I resolved issue [#75](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/75) by adding a new command palette option ("Insert LaTeX-symbol") to insert an expression containing a LaTeX symbol or a simple formula. Some symbols may not display properly using the "Hand-drawn" font. If that is the case try using the "Normal" or "Code" fonts.
-
-## 1.1.8
- Improvements to links
-  - You can now use square brackets to denote links. i.e. the text element `Which are my [[favorite books]]?` will be a link to `favorite books.md`.
-  - Square brackets can still be omitted if the entire text element is an internal link. i.e. the following two text elements `Check out the [[requirements specification]]!!` and `requirements specification` will both represent a link to `requirements specification.md`.
-  - When files are moved/renamed in your vault, text elements that are recognized links will also get updated in your drawings.
-  - I added a new command palette option to insert an internal link into a file in your vault to the active drawing. While a drawing is open press ctrl/cmd+p and select `Excalidraw: Insert link to file`.
- I Added CTRL/CMD + hover quick preview for Excalidraw files
-[![Obsidian-Excalidraw 1.1.8 - Links enhanced](https://user-images.githubusercontent.com/14358394/120925953-31c40700-c6db-11eb-904d-65300e91815e.jpg)](https://youtu.be/qT_NQAojkzg)
-
-## 1.1.6
-[![Obsidian-Excalidraw 1.1.6 - Links](https://user-images.githubusercontent.com/14358394/119559279-bdb46580-bda2-11eb-88cb-7614dc452034.jpg)](https://youtu.be/FDsMH-aLw_I)
-
-## 1.1.5
- The template will now restore stroke properties. This means you can set up defaults in your template for stroke color, stroke width, opacity, font family, font size, fill style, stroke style, etc. This also applies to ExcalidrawAutomate.
- Added settings to customize the autogenerated filename
- Minor fixes for occasional console.log errors.
-
-## 1.1.0
- ALT+Enter and CTRL+ALT+Enter on the filename in edit mode will open up the Excalidraw editor. Click and CTRL+Click on the image in preview mode will also bring up the Excalidraw editor as expected.
- I have also added two new Command Palette commands. Both create a new drawing and immediately embed it in the document you are editing, one will open the drawing in a new workspace pane, the other within the currently active pane.
- [Ozan's Image in Editor Plugin](https://github.com/ozntel/oz-image-in-editor-obsidian)
-In a nice collaboration with Ozan, his Image in Editor plugin now supports Excalidraw. I recommend installing his plugin to display drawings also in Edit mode.
-
-### MIGRATION to 1.1.0
-I have added a Migration command to the Command Palette. When you select this, the program will run a search and replace for all the excalidraw codeblocks in your vault and will convert them to the new format.
-
-## 1.0.12 Freehand drawing
- now includes the new freehand drawing features from Excalidraw.com
- If you use Obsydian sync with Excalidraw sync, be sure to update all your devices to the new version, as the old excalidraw will simply delete the freehand drawn images and/or simply not show the drawing.
-
-### Temporary workaround - use it only if you are ok with hacky solutions
- I implemented a temporary workaround to enable Obsidian Sync for Excalidraw files. This enables almost real-time two-way sync between your devices. You can draw on your iPad with your pencil, on your Android with your stylus, and the image will be available in Obsidian as well and vice versa. 
- By enabling this feature Excalidraw will sync drawings to a sync folder where drawings are stored in an ".md" file. This will allow Obsidian sync to synchronize Excalidraw drawings as well... Whenever your drawing changes, the corresponding file in the sync folder will also get updated. Similarly, whenever a file is synchronized to the sync folder by Obsidian sync, Excalidraw will sync it with the .excalidraw file in your vault.
- Because this is a temporary workaround until Obsidian sync is ready, I didn't implement extensive application logic to manage sync. Sync might get confused requiring some manual intervention.
-
-### QoL improvement
- I added an autosave feature. Your active drawing gets saved every 30 seconds if you've made changes to it. Drawings otherwise get saved when the window loses focus, or when you close the drawing, etc. Autosave limits the risk of accidental data loss on mobiles when you "swipe out" Obsidian to close it.
-
-## 1.0.10 
-[![Obsidian-Excalidraw 1.0.10 update](https://user-images.githubusercontent.com/14358394/117579017-60a58800-b0f1-11eb-8553-7820964662aa.jpg)](https://youtu.be/W7pWXGIe4rQ)
- 
-## 1.0.8 and 1.0.9 (minor fixes)  
-[![Obsidian-Excalidraw 1.0.8 update](https://user-images.githubusercontent.com/14358394/117492534-029e6680-af72-11eb-90a3-086e67e70c1c.jpg)](https://youtu.be/AtEhmHJjnxM)
-
-### QoL improvements
- Adds context menu to File Explorer to create new drawings
- Adds a new command to the palette: “Transclude (embed) the most recently edited Excalidraw drawing”
- Automatically update file-links in transclusions when you rename or move your drawing
- Saves drawing and updates all active pre-views when drawing loses focus
- File is closed and removed when you select “Delete file” from more options
- Saves drawing when exiting Obsidian
- Fixes pen positioning bug with sliding panes after panes scroll
-
-### ExcalidrawAutomte full Templater and DataviewJS support
-You now have ultimate flexibility over your Excalidraw templates using Templater and Dataview.
- Detailed documentation available [here](https://zsviczian.github.io/obsidian-excalidraw-plugin/)
- I created few examples from the simple to the more complex
-	- Simple use-case: Creating a drawing using a custom template and following a file and folder naming convention of your choice.
-	- Complex use-case: Create a mindmap from a tabulated outline.
-  ![Drawing 2021-05-05 20 52 34](https://user-images.githubusercontent.com/14358394/117194124-00a69d00-ade4-11eb-8b75-5e18a9cbc3cd.png)
- 
-## 1.0.6 and 1.0.7 
-[![1.0.6 Update](https://user-images.githubusercontent.com/14358394/116312909-58725200-a7ad-11eb-89b9-c67cb48ffebb.jpg)](https://youtu.be/ipZPbcP2B0M)
-
-### SVG styling when embedding
- 1.0.7 adds further flexibility to styling
- new formatting option for the code block embedding
- Valid values: `left`, `right`, `left-wrap`, `right-wrap`... but anything after the last `|` character will be added to the class of the SVG element and the wrapper DIV element.
-Here is the corresponding CSS:
-```css
-img.excalidraw-svg-right-wrap {
-  float: right;
-  margin: 0px 0px 20px 20px;
-}
-
-img.excalidraw-svg-left-wrap {
-  float: left;
-  margin: 0px 35px 20px 0px;
-}
-
-img.excalidraw-svg-right {
-  float: right;
-}
-
-img.excalidraw-svg-left {
-  float: left;
-}
-
-div.excalidraw-svg-right,
-div.excalidraw-svg-left {
-  display: table;
-  width: 100%;
-}
-```
+- The plugin aims to integrate Excalidraw seamlessly into Obsidian including Command Palette actions, File Explorer features, Option Menu commands, and the Ribbon Button.
+- CTRL/CMD+Click on the ribbon button, or in the file explorer to create / open drawings in a new pane.
+- Settings will allow you to customize Excalidraw to your needs:
+  - Default folder for new drawings and define custom filename pattern for new drawings.
+  - Template for new drawings. The template will restore stroke properties. This means you can set up defaults in your template for stroke color, stroke width, opacity, font family, font size, fill style, stroke style, etc. This also applies to ExcalidrawAutomate.
+  - If portability is important to you: Auto-export SVG and/or PNG files including keep-in-sync feature so you can embed SVG/PNG into your documents instead of embedding excalidraw files.
+  - Specify the default width of embedded drawings.
+  - Compatibility features to auto-export and keep in sync markdown excalidraw files and legacy .excalidraw files.
+  - Experimental feature to add custom TAG to file explorer to mark drawing files.
+  - Enable / disable autosave.
+- You can customize the size and position of the embedded images using the `![[image.excalidraw|100]]`, `![[image.excalidraw|100x100]]`, `![[image.excalidraw|100|left]]`, `![[image.excalidraw|right-wrap]]`, formatting options. `![[<filename.excalidraw>|<width>x<height>|<alignment>]]`. You can add your custom alignment via CSS. Any text that appears in `<alignment>` will be added to the rendered SVG element style and to the wrapper DIV element. Check below and styles.css for more insight.
+- Supports hyperlinks e.g. `https://zsolt.blog`, `[Obsidian](https://obsidian.md)`, and internal links e.g. `[[My file in vault|Alias]]` in drawing text. 
+  - Links will update when files are moved or renamed, if you have the Obsidian setting Files & Links/Automatically Update Internal Links enabled.
+  - Links in drawings will show up in backlinks of documents
+  - Transclusions are supported 
+    - `![[myfile#^blockref]]` will convert in the drawing into the transcluded text of the block
+    - `![[myfile#section]]` also works, this will transclude the section
+    - you can also specify word wrapping for transcluded text by adding the max character count in curly brackets right after the transclusion e.g. `![[myfile#^blockref]]{40}` will wrap text at 40 characters.
+  - For convenience you can also use the command palette to insert links into drawings
+  - CTRL/CMD + hover to bring up the Obsidian quick preview for the link. (On Mac it is CTRL+CMD+hover).
+  - CTRL/CMD + CLICK a text element to open it as a link.
+  - CTRL/CMD + ALT + CLICK to create the file (if it does not yet exist) and open it
+  - CTRL/CMD + SHIFT + CLICK to open the file in a new pane
+  - CTRL/CMD + ALT + SHIFT + CLICK to create the file (if it does not yet exist) and open it in a new pane
+- Using the block reference you can also reference & transclude text that appears on drawings, in other documents
+- Insert LaTeX formulas using the Command Palette action "Insert LaTeX formula". You can edit formulas either in Markdown view, or by CTRL/CMD + Click on the formula.
+- Drag & Drop support
+  - You can drag files from the Obsidian file explorer and they will become links to those files in Excalidraw.
+  - Dragging image files (PNG, SVG, JPG, Excalidraw) from obsidian files explorer while pressing the CTRL/CMD button will embed the image into your drawing.
+  - You can drag and drop images from outside obsidian onto Excalidraw. These images will be embedded into your drawing and saved to Obsidian.
+  - You can drag and drop text from Markdown views onto Excalidraw.
+  - You can drag and drop web addresses from your browser and they will become links.
+- Image support
+  - On iOS and Android you can add images from your camera by pressing the add image button in Excalidraw.
+  - You can copy/paste images into your drawing. Images will be saved in your vault.
+  - You can drag and drop images as explained above.
+- Since 1.2.0 Drawing files are stored in Markdown files
+  - You can add tags to drawings
+  - You can add metadata to the YAML front matter of drawings
+  - Anything you add between the frontmatter and the `# Text Elements` heading will be ignored by Excalidraw, i.e. you can add whatever you like here, it will be preserved as part of the document.
+  - Excalidraw documents now show in graph view.
+  - The following front matter keys will customize how the drawing is displayed - overriding general settings:
+    - `excalidraw-link-prefix: "📍"` preview prefix for internal links
+    - `excalidraw-url-prefix: "🌐"` preview prefix for external links
+    - `excalidraw-link-brackets: true|false` whether or not to display brackets around links in preview
+    - `excalidraw-default-mode: view|zen` Open this document in view mode or zen mode by defult. Default view mode is excellent for presentation slides.
+- Embed complete markdown files into your drawings
+  - Drag from the desired file from the Obsidian file explorer and hold down CTRL/CMD while dropping the file onto the canvas.
+  - Use the command palette action: `Insert markdown file from vault`
+  - Use custom woff, woff2 or TTF font to display the document, you can set the default font to use under Excalidraw Settings.
+  - You can set a custom css for rendering the snapshot image of your markdown document. Only operating system standard fonts are supported as the font-family ([Win10](https://docs.microsoft.com/en-us/typography/fonts/windows_10_font_list), [Mac & iOS](https://developer.apple.com/fonts/system-fonts/)), plus you can set one additional custom font using the setting explained above. (for a demonstration watch this [video](https://youtu.be/K6qZkTz8GHs) and check out this [sample css](https://github.com/zsviczian/obsidian-excalidraw-plugin/discussions/281)).
+    - To help with styling you can observe the SVG snapshot of the markdown document created by Excalidraw. Open Obsidian Developer Console (CTRL+Shift+i) and execute the following command: `ExcalidrawAutomate.mostRecentMarkdownSVG`
+  - You can control appearance of the embedded markdown file on a file by file bases by adding the following front matter keys to your markdown document:
+    - `excalidraw-font: Virgil|Cascadia|font_file_name.extension`
+    - `excalidraw-font-color: css-color-name|#HEXcolor|any-other-html-standard-format`, you can find css color names [here](https://www.w3schools.com/colors/colors_names.asp).
+    - `excalidraw-css: "css-filename|css snippet"`
+  - Switch to markdown view or use CTRL/CMD+ALT/OPT click on the image to edit properties of the embed: `[[filename#^blockref|WIDTHxMAXHEIGHT]]`
+- Includes full [QuickAdd](https://github.com/chhoumann/quickadd), [Templater](https://silentvoid13.github.io/Templater/) and [Dataview](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/) support through ExcalidrawAutomate. Check out the [detailed help + examples](https://zsviczian.github.io/obsidian-excalidraw-plugin/). I also have a [YouTube ExcalidrawAutomate Playlist](https://www.youtube.com/playlist?list=PL6mqgtMZ4NP1IR4nXxSlMA4PA5E-qpyHZ) with lots of examples.
+  - Since 1.5.0 you can easily execute ExcalidrawAutomate macros and assign command palette shortcuts to them, using the ScriptEngine. You will find an intro video and a growing library of ready to install scripts [here](https://github.com/zsviczian/obsidian-excalidraw-plugin/tree/master/ea-scripts).
+- REQUIRES AN OBSIDIAN SYNC SUBSCRIPTION: Full drawing file history and synchronization between devices
+- Multilanguage support: if you'd like to help out by translating the plugin, please get in contact with me.

 # Known issues
- I have seen two cases when adding a stencil library did not work. In both cases, the end solution was a reinstall of Obsidian. The root cause is not clear, but maybe because of  the incremental updates of Obsidian from an early version.
 - Mobile support
-  - Positioning of the pen gets misaligned after you open the command palette.
  - Partially mitigated in 1.0.10 by the introduction of autosave: Your drawing will not be saved when you terminate the mobile app by closing the Obsidian task. 
-### Resolved known issues:
- Resolved with 1.0.10 Temporary workaround: 
-  - Sync does not support .excalidraw files. This issue will be addressed in a later release of Obsidian sync. Until then, you can use my temporary workaround. 
- Resolved with Obsidian mobile 0.18: 
-  - On mobile (iOS and Android): 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. 
+- Text elements "jumps off screen" when editing, if drawing is zoomed in and text element does not fit the visible screen area. I am working on a resolution.

 # Tips and tricks
- If you want to sketch in fullscreen, I recommend installing the [Fullscreen Focus Mode](https://github.com/razumihin/obsidian-fullscreen-plugin) plugin.
- [Ozan's Image in Editor Plugin](https://github.com/ozntel/oz-image-in-editor-obsidian). In a nice collaboration with Ozan, his Image-in-Editor plugin now supports Excalidraw. I recommend installing his plugin to display drawings also in Edit mode.
+- [Ozan's Image in Editor Plugin](https://github.com/ozntel/oz-image-in-editor-obsidian). In a nice collaboration with Ozan, his Image-in-Editor plugin now supports Excalidraw. I recommend installing his plugin to display drawings also in Edit mode. 

 # Feedback, questions, ideas, problems
 Join the conversation about the Excalidraw plugin on [forum.obsidian.md](https://forum.obsidian.md/t/excalidraw-full-featured-sketching-plugin-in-obsidian)
--- a/TODO.md
+++ b/TODO.md
@@ -0,0 +1,14 @@
+[x] do not embed font into SVG when embedding Excalidraw into other Excalidraw
+[x] add ```html <SVG>...</SVG> ``` codeblock to excalidraw markdown
+[x] read pre-saved `<SVG>` when generating image preview
+[x] update code to adopt change files moving from AppState to App 
+- Add "files" to legacy excalidraw export
+
+[x] PNG preview
+[x] markdown embed SVG 190
+[x] markdown embed PNG
+[x] embed Excalidraw into other Excalidraw
+
+
+
+
--- a/docs/API/attributes_functions_overview.md
+++ b/docs/API/attributes_functions_overview.md
@@ -2,44 +2,190 @@
 ## Attributes and functions overview
 Here's the interface implemented by ExcalidrawAutomate:

-```javascript
-ExcalidrawAutomate: {
-  style: {
-    strokeColor: string;
+```typescript
+export interface ExcalidrawAutomate {
+  plugin: ExcalidrawPlugin;
+  elementsDict: {}; //contains the ExcalidrawElements currently edited in Automate indexed by el.id
+  imagesDict: {}; //the images files including DataURL, indexed by fileId
+  style: {
+    strokeColor: string; //https://www.w3schools.com/colors/default.asp
    backgroundColor: string;
-    angle: number;
-    fillStyle: FillStyle;
+    angle: number; //radian
+    fillStyle: FillStyle; //type FillStyle = "hachure" | "cross-hatch" | "solid"
    strokeWidth: number;
-    storkeStyle: StrokeStyle;
+    strokeStyle: StrokeStyle; //type StrokeStyle = "solid" | "dashed" | "dotted"
    roughness: number;
    opacity: number;
-    strokeSharpness: StrokeSharpness;
-    fontFamily: FontFamily;
+    strokeSharpness: StrokeSharpness; //type StrokeSharpness = "round" | "sharp"
+    fontFamily: number; //1: Virgil, 2:Helvetica, 3:Cascadia, 4:LocalFont
    fontSize: number;
-    textAlign: string;
-    verticalAlign: string;
-    startArrowHead: string;
+    textAlign: string; //"left"|"right"|"center"
+    verticalAlign: string; //"top"|"bottom"|"middle" :for future use, has no effect currently
+    startArrowHead: string; //"triangle"|"dot"|"arrow"|"bar"|null
    endArrowHead: string;
-  }
-  canvas: {theme: string, viewBackgroundColor: string};
-  setFillStyle: Function;
-  setStrokeStyle: Function;
-  setStrokeSharpness: Function;
-  setFontFamily: Function;
-  setTheme: Function;
-  addRect: Function;
-  addDiamond: Function;
-  addEllipse: Function;
-  addText: Function;
-  addLine: Function;
-  addArrow: Function;
-  connectObjects: Function;
-  addToGroup: Function;
-  toClipboard: Function;
-  create: Function;
-  createPNG: Function;
-  createSVG: Function;
-  clear: Function;
-  reset: Function;
-};
-```
+  };
+  canvas: {
+    theme: string; //"dark"|"light"
+    viewBackgroundColor: string;
+    gridSize: number;
+  };
+  setFillStyle(val: number): void; //0:"hachure", 1:"cross-hatch" 2:"solid"
+  setStrokeStyle(val: number): void; //0:"solid", 1:"dashed", 2:"dotted"
+  setStrokeSharpness(val: number): void; //0:"round", 1:"sharp"
+  setFontFamily(val: number): void; //1: Virgil, 2:Helvetica, 3:Cascadia
+  setTheme(val: number): void; //0:"light", 1:"dark"
+  addToGroup(objectIds: []): string;
+  toClipboard(templatePath?: string): void;
+  getElements(): ExcalidrawElement[]; //get all elements from ExcalidrawAutomate elementsDict
+  getElement(id: string): ExcalidrawElement; //get single element from ExcalidrawAutomate elementsDict
+  create(params?: {
+    //create a drawing and save it to filename
+    filename?: string; //if null: default filename as defined in Excalidraw settings
+    foldername?: string; //if null: default folder as defined in Excalidraw settings
+    templatePath?: string;
+    onNewPane?: boolean;
+    frontmatterKeys?: {
+      "excalidraw-plugin"?: "raw" | "parsed";
+      "excalidraw-link-prefix"?: string;
+      "excalidraw-link-brackets"?: boolean;
+      "excalidraw-url-prefix"?: string;
+    };
+  }): Promise<string>;
+  createSVG(
+    templatePath?: string,
+    embedFont?: boolean,
+    exportSettings?: ExportSettings, //use ExcalidrawAutomate.getExportSettings(boolean,boolean)
+    loader?: EmbeddedFilesLoader, //use ExcalidrawAutomate.getEmbeddedFilesLoader(boolean?)
+    theme?: string,
+  ): Promise<SVGSVGElement>;
+  createPNG(
+    templatePath?: string,
+    scale?: number,
+    exportSettings?: ExportSettings, //use ExcalidrawAutomate.getExportSettings(boolean,boolean)
+    loader?: EmbeddedFilesLoader, //use ExcalidrawAutomate.getEmbeddedFilesLoader(boolean?)
+    theme?: string,
+  ): Promise<any>;
+  wrapText(text: string, lineLen: number): string;
+  addRect(topX: number, topY: number, width: number, height: number): string;
+  addDiamond(topX: number, topY: number, width: number, height: number): string;
+  addEllipse(topX: number, topY: number, width: number, height: number): string;
+  addBlob(topX: number, topY: number, width: number, height: number): string;
+  addText(
+    topX: number,
+    topY: number,
+    text: string,
+    formatting?: {
+      wrapAt?: number;
+      width?: number;
+      height?: number;
+      textAlign?: string;
+      box?: boolean | "box" | "blob" | "ellipse" | "diamond"; //if !null, text will be boxed
+      boxPadding?: number;
+    },
+    id?: string,
+  ): string;
+  addLine(points: [[x: number, y: number]]): string;
+  addArrow(
+    points: [[x: number, y: number]],
+    formatting?: {
+      startArrowHead?: string;
+      endArrowHead?: string;
+      startObjectId?: string;
+      endObjectId?: string;
+    },
+  ): string;
+  addImage(topX: number, topY: number, imageFile: TFile): Promise<string>;
+  addLaTex(topX: number, topY: number, tex: string): Promise<string>;
+  connectObjects(
+    objectA: string,
+    connectionA: ConnectionPoint, //type ConnectionPoint = "top" | "bottom" | "left" | "right" | null
+    objectB: string,
+    connectionB: ConnectionPoint, //when passed null, Excalidraw will automatically decide
+    formatting?: {
+      numberOfPoints?: number; //points on the line. Default is 0 ie. line will only have a start and end point
+      startArrowHead?: string; //"triangle"|"dot"|"arrow"|"bar"|null
+      endArrowHead?: string; //"triangle"|"dot"|"arrow"|"bar"|null
+      padding?: number;
+    },
+  ): void;
+  clear(): void; //clear elementsDict and imagesDict only
+  reset(): void; //clear() + reset all style values to default
+  isExcalidrawFile(f: TFile): boolean; //returns true if MD file is an Excalidraw file
+  //view manipulation
+  targetView: ExcalidrawView; //the view currently edited
+  setView(view: ExcalidrawView | "first" | "active"): ExcalidrawView;
+  getExcalidrawAPI(): any; //https://github.com/excalidraw/excalidraw/tree/master/src/packages/excalidraw#ref
+  getViewElements(): ExcalidrawElement[]; //get elements in View
+  deleteViewElements(el: ExcalidrawElement[]): boolean;
+  getViewSelectedElement(): ExcalidrawElement; //get the selected element in the view, if more are selected, get the first
+  getViewSelectedElements(): ExcalidrawElement[];
+  getViewFileForImageElement(el: ExcalidrawElement): TFile | null; //Returns the TFile file handle for the image element
+  copyViewElementsToEAforEditing(elements: ExcalidrawElement[]): void; //copies elements from view to elementsDict for editing
+  viewToggleFullScreen(forceViewMode?: boolean): void;
+  connectObjectWithViewSelectedElement( //connect an object to the selected element in the view
+    objectA: string, //see connectObjects
+    connectionA: ConnectionPoint,
+    connectionB: ConnectionPoint,
+    formatting?: {
+      numberOfPoints?: number;
+      startArrowHead?: string;
+      endArrowHead?: string;
+      padding?: number;
+    },
+  ): boolean;
+  addElementsToView( //Adds elements from elementsDict to the current view
+    repositionToCursor?: boolean,  //default is false
+    save?: boolean, //default is true
+    //newElementsOnTop controls whether elements created with ExcalidrawAutomate
+    //are added at the bottom of the stack or the top of the stack of elements already in the view
+    //Note that elements copied to the view with copyViewElementsToEAforEditing retain their
+    //position in the stack of elements in the view even if modified using EA
+    newElementsOnTop?: boolean, //default is false, i.e. the new elements get to the bottom of the stack
+  ): Promise<boolean>;
+  onDropHook(data: {
+    //if set Excalidraw will call this function onDrop events
+    ea: ExcalidrawAutomate;
+    event: React.DragEvent<HTMLDivElement>;
+    draggable: any; //Obsidian draggable object
+    type: "file" | "text" | "unknown";
+    payload: {
+      files: TFile[]; //TFile[] array of dropped files
+      text: string; //string
+    };
+    excalidrawFile: TFile; //the file receiving the drop event
+    view: ExcalidrawView; //the excalidraw view receiving the drop
+    pointerPosition: { x: number; y: number }; //the pointer position on canvas at the time of drop
+  }): boolean; //a return of true will stop the default onDrop processing in Excalidraw
+  mostRecentMarkdownSVG: SVGSVGElement; //Markdown renderer will drop a copy of the most recent SVG here for debugging purposes
+  getEmbeddedFilesLoader(isDark?: boolean): EmbeddedFilesLoader; //utility function to generate EmbeddedFilesLoader object
+  getExportSettings( //utility function to generate ExportSettings object
+    withBackground: boolean,
+    withTheme: boolean,
+  ): ExportSettings;
+  getBoundingBox(elements: ExcalidrawElement[]): {
+    //get bounding box of elements
+    topX: number; //bounding box is the box encapsulating all of the elements completely
+    topY: number;
+    width: number;
+    height: number;
+  };
+  //elements grouped by the highest level groups
+  getMaximumGroups(elements: ExcalidrawElement[]): ExcalidrawElement[][];
+  //gets the largest element from a group. useful when a text element is grouped with a box, and you want to connect an arrow to the box
+  getLargestElement(elements: ExcalidrawElement[]): ExcalidrawElement;
+  // Returns 2 or 0 intersection points between line going through `a` and `b`
+  // and the `element`, in ascending order of distance from `a`.
+  intersectElementWithLine(
+    element: ExcalidrawBindableElement,
+    a: readonly [number, number],
+    b: readonly [number, number],
+    gap?: number, //if given, element is inflated by this value
+  ): Point[];
+
+  //See OCR plugin for example on how to use scriptSettings
+  activeScript: string; //Set automatically by the ScriptEngine
+  getScriptSettings(): {}; //Returns script settings. Saves settings in plugin settings, under the activeScript key
+  setScriptSettings(settings:any):Promise<void>; //sets script settings.
+}
+```
+
--- a/docs/API/canvas_style.md
+++ b/docs/API/canvas_style.md
@@ -12,4 +12,7 @@ String. Valid values are "light" and "dark".
 ### viewBackgroundColor
 String. This is the fill color of an object. [CSS Legal Color Values](https://www.w3schools.com/cssref/css_colors_legal.asp)

-Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.
+Allowed values are [HTML color names](https://www.w3schools.com/colors/colors_names.asp), hexadecimal RGB strings e.g. `#FF0000` for red, or `transparent`.
+
+### gridSize
+Number. The size of the grid. If set to zero, no grid is displayed.
--- a/docs/API/introduction.md
+++ b/docs/API/introduction.md
@@ -1,6 +1,6 @@
 # [◀ Excalidraw Automate How To](../readme.md)
 ## Introduction to the API
-You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend starting your Automate scripts with the following code.
+You can access Excalidraw Automate via the ExcalidrawAutomate object. I recommend starting Templater, DataView and QuickAdd scripts with the following code:

 *Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
@@ -8,18 +8,20 @@ const ea = ExcalidrawAutomate;
 ea.reset();
 ```

-The first line creates a practical constant so you can avoid writing ExcalidrawAutomate 100x times.
+The first line creates a constant so you can avoid writing ExcalidrawAutomate 100x times.

 The second line resets ExcalidrawAutomate to defaults. This is important as you will not know which template you executed before, thus you won't know what state you left Excalidraw in.

+**⚠ Note:** In case you are using the Excalidraw plugin's built in [Scripting Engine](../ExcalidrawScriptsEngine.md), the engine will take care of initializing the `ea` object.
+
 ### Basic logic of using Excalidraw Automate
 1. Set the styling of the elements you want to draw
 2. Add elements. As you add elements, each new element is added one layer above the previous, thus in case of overlapping objects the later one will be on the top of the prior one.
-3. Call `await ea.create();` to instantiate the drawing
+3. Call `await ea.create();` to instantiate the drawing, or use `ea.setView();` followed by `ea.addElementsToView();` to add your elements to an existing view, or create a PNG or SVG image out of your elements using `await ea.createSVG();` or `await ea.createPNG();`;

-You can change styling between adding different elements. My logic for separating element styling and creation is based on the assumption that you will probably set a stroke color, stroke style, stroke roughness, etc. and draw most of your elements using this. There would be no point in setting all these parameters each time you add an element.
+You can change the styling between adding different elements. My logic for separating element styling and creation is based on the assumption that you will probably set a stroke color, stroke style, stroke roughness, etc. and draw most of your elements using that. There would be no point in setting all these parameters each time you add an element.

-### Before we dive deeper, here are two a simple example scripts
+### Before we dive deeper, here are three a simple example [Templater](https://github.com/SilentVoid13/Templater) scripts
 #### Create a new drawing with custom name, in a custom folder, using a template
 This simple script gives you significant additional flexibility over Excalidraw Plugin settings to name your drawings, place them into folders, and to apply templates.

@@ -55,4 +57,46 @@ This simple script gives you significant additional flexibility over Excalidraw
 ```
 The script will generate the following drawing:

-![FristDemo](https://user-images.githubusercontent.com/14358394/116825643-6e5a8b00-ab90-11eb-9e3a-37c524620d0d.png)
+![FristDemo](https://user-images.githubusercontent.com/14358394/116825643-6e5a8b00-ab90-11eb-9e3a-37c524620d0d.png)
+
+#### Add a TextElement in a box to an open Excalidraw View. 
+Position the new element under the currently selected element, with an arrow from the selected element to the added text.
+
+*Use CTRL+Shift+V to paste code into Obsidian!*
+```javascript
+<%*
+  const ea = ExcalidrawAutomate;
+  ea.reset();
+  ea.setView("first"); 
+  selectedElement = ea.getViewSelectedElement();
+  ea.setStrokeSharpness(0);
+  const boxPadding = 5;
+  id = ea.addText(
+    selectedElement.x + boxPadding,
+    selectedElement.y+selectedElement.height+100,
+    "[[Next process step]]",
+    {
+      textAlign:"center",
+      box:true,
+      boxPadding:boxPadding,
+      width:selectedElement.width-boxPadding*2,
+    }
+  );
+  ea.setStrokeSharpness(1);
+  ea.style.roughness= 0;
+  ea.connectObjectWithViewSelectedElement(
+    id,
+    "top",
+    "bottom",
+    {
+      numberOfPoints:2,
+      startArrowHead:"arrow",
+      endArrowHead:"dot", 
+      padding:5
+  });
+  ea.addElementsToView();
+%>
+```
+[Click here to view animation](https://user-images.githubusercontent.com/14358394/131967188-2a488e38-f742-49d9-ae98-33238a8d4712.mp4)
+
+
--- a/docs/API/objects.md
+++ b/docs/API/objects.md
@@ -14,7 +14,20 @@ Returns the `id` of the object. The `id` is required when connecting objects wit

 ### addText()
 ```typescript
-addText(topX:number, topY:number, text:string, formatting?:{width:number, height:number,textAlign: string, verticalAlign:string, box: boolean, boxPadding: number}):string
+addText( 
+  topX:number, 
+  topY:number, 
+  text:string, 
+  formatting?:{
+    wrapAt?:number, 
+    width?:number, 
+    height?:number,
+    textAlign?:string, 
+    box?: "box"|"blob"|"ellipse"|"diamond", 
+    boxPadding?:number
+  },
+  id?:string
+):string
 ```

 Adds text to the drawing. 
@@ -22,19 +35,21 @@ Adds text to the drawing.
 Formatting parameters are optional:
 - If `width` and `height` are not specified, the function will calculate the width and height based on the fontFamily, the fontSize and the text provided.
 - In case you want to position a text in the center compared to other elements on the drawing, you can provide a fixed height and width, and you can also specify `textAlign` and `verticalAlign` as described above. e.g.: `{width:500, textAlign:"center"}`
- If you want to add a box around the text, set `{box:true}`
+- If you want to add a box around the text, set `{box:"box"|"blob"|"ellipse"|"diamond"}`

-Returns the `id` of the object. The `id` is required when connecting objects with lines. See later. If `{box:true}` then returns the id of the enclosing box.
+Returns the `id` of the object. The `id` is required when connecting objects with lines. See later. If `{box:}` then returns the id of the enclosing box object.

 ### addLine()
 ```typescript
-addLine(points: [[x:number,y:number]]):void
+addLine(points: [[x:number,y:number]]):string
 ```
 Adds a line following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if `strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".

+Returns the `id` of the object.
+
 ### addArrow()
 ```typescript
-addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead:string,endArrowHead:string,startObjectId:string,endObjectId:string}):void
+addArrow(points: [[x:number,y:number]],formatting?:{startArrowHead?:string,endArrowHead?:string,startObjectId?:string,endObjectId?:string}):string ;
 ```

 Adds an arrow following the points provided. Must include at least two points `points.length >= 2`. If more than 2 points are provided the interim points will be added as breakpoints. The line will break with angles if element `style.strokeSharpness` is set to "sharp" and will be curvey if it is set to "round".
@@ -43,12 +58,14 @@ Adds an arrow following the points provided. Must include at least two points `p

 `startObjectId` and `endObjectId` are the object id's of connected objects. I recommend using `connectObjects` instead calling addArrow() for the purpose of connecting objects.

+Returns the `id` of the object.
+
 ### connectObjects()
 ```typescript
 declare type ConnectionPoint = "top"|"bottom"|"left"|"right";
 connectObjects(objectA: string, connectionA: ConnectionPoint, objectB: string, connectionB: ConnectionPoint, formatting?:{numberOfPoints: number,startArrowHead:string,endArrowHead:string, padding: number}):void
 ```
-Connects two objects with an arrow.
+Connects two objects with an arrow. Will do nothing if either of the two elements is of type `line`, `arrow`, or `freedraw`.

 `objectA` and `objectB` are strings. These are the ids of the objects to connect. These IDs are returned by addRect(), addDiamond(), addEllipse() and addText() when creating those objects.

@@ -60,6 +77,6 @@ Connects two objects with an arrow.

 ### addToGroup()
 ```typescript
-addToGroup(objectIds:[]):void
+addToGroup(objectIds:[]):string
 ```
-Groups objects listed in `objectIds`.
+Groups objects listed in `objectIds`. Returns the `id` of the group.
--- a/docs/API/utility.md
+++ b/docs/API/utility.md
@@ -1,5 +1,11 @@
 # [◀ Excalidraw Automate How To](../readme.md)
 ## Utility functions
+### isExcalidrawFile()
+```typescript
+isExcalidrawFile(f:TFile): boolean
+```
+Returns true if the file provided is a valid Excalidraw file (either a legacy `*.excalidraw` file or a markdown file with the excalidraw key in the front-matter).
+
 ### clear()
 `clear()` will clear objects from cache, but will retain element style settings.

@@ -12,11 +18,24 @@ async toClipboard(templatePath?:string)
 ```
 Places the generated drawing to the clipboard. Useful when you don't want to create a new drawing, but want to paste additional items onto an existing drawing.

+### getElements()
+```typescript
+getElements():ExcalidrawElement[];
+```
+Returns the elements in ExcalidrawAutomate as an array of ExcalidrawElements. This format is usefull when working with ExcalidrawRef.
+
+### getElement()
+```typescript
+getElement(id:string):ExcalidrawElement;
+```
+
+Returns the element object matching the id. If the element does not exist, returns null.
+
 ### create()
 ```typescript
 async create(params?:{filename: string, foldername:string, templatePath:string, onNewPane: boolean})
 ```
-Creates the drawing and opens it.
+Creates the drawing and opens it. Returns the full filepath of the created file.

 `filename` is the filename without extension of the drawing to be created. If `null`, then Excalidraw will generate a filename.

@@ -26,9 +45,30 @@ Creates the drawing and opens it.

 `onNewPane` defines where the new drawing should be created. `false` will open the drawing on the current active leaf. `true` will open the drawing by vertically splitting the current leaf.

+`frontmatterKeys` are the set of frontmatter keys to apply to the document
+  {
+    excalidraw-plugin?: "raw"|"parsed",
+    excalidraw-link-prefix?: string,
+    excalidraw-link-brackets?: boolean,
+    excalidraw-url-prefix?: string
+  }
+
 Example:
 ```javascript
-create({filename:"my drawing", foldername:"myfolder/subfolder/", templatePath: "Excalidraw/template.excalidraw", onNewPane: true});
+create (
+  {
+    filename:"my drawing", 
+    foldername:"myfolder/subfolder/", 
+    templatePath: "Excalidraw/template.excalidraw", 
+    onNewPane: true, 
+    frontmatterKeys: {
+      "excalidraw-plugin": "parsed",
+      "excalidraw-link-prefix": "",
+      "excalidraw-link-brackets": true,
+      "excalidraw-url-prefix": "🌐",
+    }
+  }
+);
 ```
 ### createSVG()
 ```typescript
@@ -38,6 +78,144 @@ Returns an HTML SVGSVGElement containing the generated drawing.

 ### createPNG()
 ```typescript
-async createPNG(templatePath?:string)
+async createPNG(templatePath?:string, scale:number=1)
 ```
-Returns a blob containing a PNG image of the generated drawing.
+Returns a blob containing a PNG image of the generated drawing.
+
+### wrapText()
+```typescript
+wrapText(text:string, lineLen:number):string
+```
+Returns a string wrapped to the provided max lineLen.
+
+
+### Accessing the open Excalidraw view
+You first need to initialize targetView, before using any of the view manipulation functions.
+
+#### targetView
+```typescript
+targetView: ExcalidrawView
+```
+The open Excalidraw View configured as the target of the view operations. User `setView` to initialize.
+
+#### setView()
+```typescript
+setView(view:ExcalidrawView|"first"|"active"):ExcalidrawView
+```
+Setting the ExcalidrawView that will be the target of the View operations. Valid `view` input values are:
+- an object instance of ExcalidrawView
+- "first": meaning if there are multiple Excalidraw Views open, pick the first that is returned by `app.workspace.getLeavesOfType("Excalidraw")`
+- "active": meaning the currently active view
+
+#### getExcalidrawAPI()
+```typescript
+getExcalidrawAPI():any
+```
+Returns the native Excalidraw API (ref.current) for the active drawing specified in `targetView`.
+See Excalidraw documentation here: https://www.npmjs.com/package/@excalidraw/excalidraw#ref
+
+#### getViewElements()
+```typescript
+getViewElements():ExcalidrawElement[] 
+```
+
+Returns all the elements from the view.
+
+#### deleteViewElements()
+```typescript
+deleteViewElements(elToDelete: ExcalidrawElement[]):boolean 
+```
+
+Deletes those elements from the view that match the elements provided as the input parameter.
+
+Example to delete the selected elements from the view:
+```typescript
+ea = ExcalidrawAutomate;
+ea.setView("active");
+el = ea.getViewSelectedElements();
+ea.deleteViewElements();
+```
+
+#### getViewSelectedElement()
+```typescript
+getViewSelectedElement():ExcalidrawElement
+```
+
+You first need to set the view calling `setView()`.
+
+If an element is selected in the targetView the function returns the selected element. If multiple elements are selected, either by SHIFT+Clicking to select multiple elements, or by selecting a group, the first of the elements will be selected. If you want to specify which element to select from a group, double click the desired element in the group.
+
+This function is helpful if you want to add a new element in relation to an existing element in your drawing.
+
+#### getViewSelectedElements()
+```typescript
+getViewSelectedElements():ExcalidrawElement[]
+```
+
+You first need to set the view calling `setView()`.
+
+Gets the array of selected elements in the scene. Returns [] if no elements are selected.
+
+Note: you can call `getExcalidrawAPI().getSceneElements()` to retreive all the elements in the scene.
+
+#### viewToggleFullScreen()
+```typescript
+viewToggleFullScreen(forceViewMode?:boolean):void;
+```
+
+Toggles targetView between fullscreen mode and normal mode. By setting forceViewMode to `true` will change Excalidraw mode to View mode. Default is `false`.
+
+The function will do nothing on Obsidian Mobile.
+
+#### connectObjectWithViewSelectedElement()
+```typescript 
+connectObjectWithViewSelectedElement(objectA:string,connectionA: ConnectionPoint, connectionB: ConnectionPoint, formatting?:{numberOfPoints?: number,startArrowHead?:string,endArrowHead?:string, padding?: number}):boolean
+```
+Same as `connectObjects()`, but ObjectB is the currently selected element in the target ExcalidrawView. The function helps with placing an arrow between a newly created object and the selected element in the target ExcalidrawView.
+
+#### addElementsToView()
+```typescript
+async addElementsToView(repositionToCursor:boolean=false, save:boolean=false):Promise<boolean>
+```
+Adds elements created with ExcalidrawAutomate to the target ExcalidrawView.
+`repositionToCursor` dafault is false
+- true: the elements will be moved such that the center point of the elements will be aligned with the current position of the pointer on ExcalidrawView. You can point and place elements to a desired location in your drawing using this switch.
+- false: elements will be positioned as defined by the x&y coordinates of each element.
+
+`save` default is false
+- true: the drawing will be saved after the elements were added.
+- false: the drawing will be saved at the next autosave cycle. Use false when adding multiple elements one after the other. Else, best to use true, to minimize risk of data loss.
+
+### onDropHook
+```typescript
+onDropHook (data: {
+  ea: ExcalidrawAutomate, 
+  event: React.DragEvent<HTMLDivElement>,
+  draggable: any, //Obsidian draggable object
+  type: "file"|"text"|"unknown",
+  payload: {
+    files: TFile[], //TFile[] array of dropped files
+    text: string, //string 
+  },
+  excalidrawFile: TFile, //the file receiving the drop event
+  view: ExcalidrawView, //the excalidraw view receiving the drop
+  pointerPosition: {x:number, y:number} //the pointer position on canvas at the time of drop
+}):boolean;
+```
+
+Callback function triggered when an draggable item is dropped on Excalidraw.
+The function should return a boolean value. True if the drop was handled by the hook and futher native processing should be stopped, and false if Excalidraw should continue with the processing of the drop.
+type of drop can be one of:
+- "file" if a file from Obsidian file explorer is dropped onto Excalidraw. In this case payload.files will contain the list of files dropped.
+- "text" if a link (e.g. url, or wiki link) or other text is dropped. In this case payload.text will contain the received string
+- "unknown" if Excalidraw plugin does not recognize the type of dropped object. In this case you can use React.DragEvent to analysed the dropped object.
+
+Use Templater startup templates or similar to set the Hook function. 
+
+```typescript
+ea = ExcalidrawAutomate;
+ea.onDropHook = (data) => {
+  console.log(data); 
+  return false;
+}
+```
--- a/docs/Examples/dataviewjs_familytree.md
+++ b/docs/Examples/dataviewjs_familytree.md
@@ -29,11 +29,11 @@ function crawl(subtasks) {
  return size;
 }

-const tasks = dv.page("Demo.md").file.tasks[0];
+const tasks = dv.page("FamilyTree.md").file.tasks[0];
 tasks["size"] = crawl(tasks.subtasks);

 const width = 300;
-const height = 100;
+const height = 150;
 const ea = ExcalidrawAutomate;
 ea.reset();

@@ -56,12 +56,8 @@ function buildMindmap(subtasks, depth, offset, parentObjectID) {
 
 }

-tasks["objectID"] = ea.addText(width*1.5,width,tasks.text,{box:true, textAlign:"center"});    
+tasks["objectID"] = ea.addText(width*1.5,height*(tasks.size-1),tasks.text,{box:true, textAlign:"center"});    
 buildMindmap(tasks.subtasks, 2, 0, tasks.objectID);

-(async ()=> {
-  const svg = await ea.createSVG(); 
-  const el=document.querySelector("div.block-language-dataviewjs"); 
-  el.appendChild(svg); 
-})();
+ea.createSVG().then((svg)=>dv.span(svg.outerHTML));
 ```
--- a/docs/Examples/dataviewjs_mindmap.md
+++ b/docs/Examples/dataviewjs_mindmap.md
@@ -52,9 +52,5 @@ function buildMindmap(subtasks, depth, offset, parentObjectID) {
 tasks["objectID"] = ea.addText(0,(tasks.size/2)*height,tasks.text,{box:true});    
 buildMindmap(tasks.subtasks, 1, 0, tasks.objectID);

-(async ()=> {
-  const svg = await ea.createSVG(); 
-  const el=document.querySelector("div.block-language-dataviewjs"); 
-  el.appendChild(svg); 
-})();
+ea.createSVG().then((svg)=>dv.span(svg.outerHTML));
 ```
--- a/docs/ExcalidrawScriptsEngine.md
+++ b/docs/ExcalidrawScriptsEngine.md
@@ -0,0 +1,257 @@
+# [◀ Excalidraw Automate How To](./readme.md)
+
+[![Script Engine](https://user-images.githubusercontent.com/14358394/145684531-8d9c2992-59ac-4ebc-804a-4cce1777ded2.jpg)](https://youtu.be/hePJcObHIso)
+
+## Introduction
+Place your ExcalidrawAutomate Scripts into the folder defined in Excalidraw Settings. The Scripts folder may not be the root folder of your Vault.
+
+![image](https://user-images.githubusercontent.com/14358394/145673547-b4f57d01-3643-40f9-abfd-14c3bfa5ab93.png)
+
+EA scripts may be markdown files, plain text files, or .js files. The only requirement is that they must contain valid JavaScript code. 
+
+![image](https://user-images.githubusercontent.com/14358394/145673674-bb59f227-8eea-43dc-83b8-4d750e1920a8.png)
+
+You will be able to access your scripts from Excalidraw via the Obsidian Command Palette. 
+
+![image](https://user-images.githubusercontent.com/14358394/145673652-6b1713e2-edc8-4bc8-8246-3f8df8a4b273.png)
+
+This will allow you to assign hotkeys to your favorite scripts just like to any other Obsidian command. 
+
+![image](https://user-images.githubusercontent.com/14358394/145673633-83b6c969-cead-429b-9721-fd047f980279.png)
+
+## Script development
+An Excalidraw script will automatically receive two objects:
+- `ea`: The Script Enginge will initialize the `ea` object including setting the active view to the View from which the script was called.
+- `utils`: I have borrowed functions exposed on utils from [QuickAdd](https://github.com/chhoumann/quickadd/blob/master/docs/QuickAddAPI.md), though currently not all QuickAdd utility functions are implemented in Excalidraw. As of now, these are the available functions. See the example below for details.
+  - `inputPrompt: (header: string, placeholder?: string, value?: string)`
+    - Opens a prompt that asks for an input. Returns a string with the input.
+    - You need to await the result of inputPrompt. 
+  - `suggester: (displayItems: string[], actualItems: string[])`
+    - Opens a suggester. Displays the displayItems, but you map these the other values with actualItems. Returns the selected value.
+    - You need to await the result of suggester.
+
+---------
+
+## Example Excalidraw Automate Scripts
+
+These scripts are available as downloadable `.md` files on GitHub in [this](https://github.com/zsviczian/obsidian-excalidraw-plugin/tree/master/ea-scripts) folder 📂.
+
+### Add box around selected elements
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-elements.jpg)
+
+This script will add an encapsulating box around the currently selected elements in Excalidraw
+```javascript
+//uncomment if you want a prompt for custom padding
+//const padding = parseInt (await utils.inputPrompt("padding?","number","10"));
+const padding = 10
+elements = ea.getViewSelectedElements();
+const box = ea.getBoundingBox(elements);
+color = ea
+        .getExcalidrawAPI()
+        .getAppState()
+        .currentItemStrokeColor;
+//uncomment if you want to set the stroke to a random color
+//color = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6,"0");
+ea.style.strokeColor = color;
+id = ea.addRect(
+	box.topX - padding,
+	box.topY - padding,
+	box.width + 2*padding,
+	box.height + 2*padding
+);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addToGroup([id].concat(elements.map((el)=>el.id)));
+ea.addElementsToView(false);
+```
+
+----
+
+### Connect selected elements with an arrow
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-connect-elements.jpg)
+
+This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).
+```javascript
+const elements = ea.getViewSelectedElements();
+ea.copyViewElementsToEAforEditing(elements);
+const groups = ea.getMaximumGroups(elements);
+if(groups.length !== 2) return;
+els = [ 
+  ea.getLargestElement(groups[0]),
+  ea.getLargestElement(groups[1])
+];
+ea.connectObjects(
+  els[0].id,
+  null,
+  els[1].id,
+  null, 
+  {numberOfPoints:2}
+);
+ea.addElementsToView();
+```
+
+----
+### Reverse selected arrows
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-reverse-arrow.jpg)
+
+Reverse the direction of **arrows** within the scope of selected elements.
+
+```javascript
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="arrow");
+if(!elements || elements.length===0) return;
+elements.forEach((el)=>{
+	const start = el.startArrowhead;
+	el.startArrowhead = el.endArrowhead;
+	el.endArrowhead = start;
+});
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
+```
+
+----
+
+### Set line width of selected elements
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-stroke-width.jpg)
+
+This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.
+```javascript
+let width = (ea.getViewSelectedElement().strokeWidth??1).toString();
+width = await utils.inputPrompt("Width?","number",width);
+const elements=ea.getViewSelectedElements();
+ea.copyViewElementsToEAforEditing(elements);
+ea.getElements().forEach((el)=>el.strokeWidth=width);
+ea.addElementsToView();
+```
+
+----
+
+### Set grid size
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-grid.jpg)
+
+The default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. 
+```javascript
+const grid = parseInt(await utils.inputPrompt("Grid size?",null,"20"));
+const api = ea.getExcalidrawAPI();
+let appState = api.getAppState();
+appState.gridSize = grid;
+api.updateScene({
+  appState,
+  commitToHistory:false
+});
+```
+
+----
+
+### Set element dimensions and position
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-dimensions.jpg)
+
+Currently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.
+```javascript
+const elements = ea.getViewSelectedElements();
+if(elements.length === 0) return;
+const el = ea.getLargestElement(elements);
+const sizeIn = [el.x,el.y,el.width,el.height].join(",");
+let res = await utils.inputPrompt("x,y,width,height?",null,sizeIn);
+res = res.split(",");
+if(res.length !== 4) return;
+let size = [];
+for (v of res) {
+  const i = parseInt(v);
+  if(isNaN(i)) return;
+  size.push(i);
+}
+el.x = size[0];
+el.y = size[1];
+el.width = size[2];
+el.height = size[3];
+ea.copyViewElementsToEAforEditing([el]);
+ea.addElementsToView();
+```
+
+----
+
+### Bullet points
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-bullet-point.jpg)
+
+This script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.
+```javascript
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+ea.copyViewElementsToEAforEditing(elements);
+const padding = 10;
+elements.forEach((el)=>{
+  ea.style.strokeColor = el.strokeColor;
+  const size = el.fontSize/2;
+  const ellipseId = ea.addEllipse(
+    el.x-padding-size,
+    el.y+size/2,
+    size,
+    size
+  );
+  ea.addToGroup([el.id,ellipseId]);
+});
+ea.addElementsToView();
+```
+
+----
+
+### Split text by lines
+**!!!Requires Excalidraw 1.5.1 or higher**
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-split-lines.jpg)
+
+Split lines of text into separate text elements for easier reorganization
+```javascript
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+elements.forEach((el)=>{
+  ea.style.strokeColor = el.strokeColor;
+  ea.style.fontFamily  = el.fontFamily;
+  ea.style.fontSize    = el.fontSize;
+  const text = el.text.split("\n");
+  for(i=0;i<text.length;i++) {
+	ea.addText(el.x,el.y+i*el.height/text.length,text[i]);
+  }
+});
+ea.addElementsToView();
+ea.deleteViewElements(elements);
+```
+
+----
+
+### Set Text Alignment
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg)
+
+Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.
+```javascript
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+if(elements.length===0) return;
+let align = ["left","right","center"];
+align = await utils.suggester(align,align);
+elements.forEach((el)=>el.textAlign = align);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
+```
+
+----
+
+### Set Font Family
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-font-family.jpg)
+
+Sets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.
+```javascript
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+if(elements.length===0) return;
+let font = ["Virgil","Helvetica","Cascadia"];
+font = parseInt(await utils.suggester(font,["1","2","3"]));
+if (isNaN(font)) return;
+elements.forEach((el)=>el.fontFamily = font);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
+```
--- a/docs/_config.yml
+++ b/docs/_config.yml
@@ -1 +1 @@
-theme: jekyll-theme-leap-day
+theme: jekyll-theme-hacker
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -1,18 +1,21 @@
 # Excalidraw Automate How To

-Excalidraw Automate allows you to create Excalidraw drawings using the [Templater](https://silentvoid13.github.io/Templater/docs/) plugin, and to generate embedded SVG and PNG images using [DataviewJS](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/)
+Use ExcalidrawAutomate to create or manipulate Excalidraw drawings using the [ExcalidrawAutomate Script Engine](ExcalidrawScriptsEngine.md), the [Templater](https://silentvoid13.github.io/Templater/docs/) or the [QuickAdd](https://github.com/chhoumann/quickadd) plugins, and to generate embedded SVG and PNG images using [DataviewJS](https://blacksmithgu.github.io/obsidian-dataview/docs/api/intro/)

-With a little work, using Excalidraw Automate you can generate simple mindmaps, build a family tree, fill out SVG forms, create customized charts, etc. based on documents in your vault.
+With a little work, using ExcalidrawAutomate you can generate simple mindmaps, build a family tree, fill out SVG forms, create customized charts, or automate simple tasks (i.e. create macros) in Excalidraw.
 ![image](https://user-images.githubusercontent.com/14358394/117549619-bae41180-b03b-11eb-968d-c909e79a7524.png)

 ## API documentation
- [Introduction to the API](API/introduction.md)
+- **start here** [Introduction to the API](API/introduction.md)
 - [Overview of Attributes and Functions](API/attributes_functions_overview.md)
 - [Element Sytle](API/element_style.md)
 - [Canvas Style](API/canvas_style.md)
 - [Adding Objects](API/objects.md)
 - [Utility Functions](API/utility.md)

+## ExcalidrawAutomate Script Engine
+I recommend using the Scripts Engine for "Macro" like automation, when you want to automate a few simple steps, such as adding a box around a text element, or connecting two objects with an arrow, or setting line width or the grid to a custom value.  
+- [ExcalidrawAutomate Script Engine](ExcalidrawScriptsEngine.md).

 ## Examples
 - **Templater** 
--- a/ea-scripts/Box
+++ b/ea-scripts/Box
@@ -0,0 +1,78 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-each-selected-groups.png)
+
+This script will add encapsulating boxes around each of the currently selected groups in Excalidraw.
+
+You can focus on content creation first, and then batch add consistent style boxes to each group of text.
+
+Tips 1: You can copy the desired style to the global state using script `Copy Selected Element Style to Global`, then add boxes with the same global style using script `Box Each Selected Groups`.
+
+Tips 2: Next you can use scripts `Expand rectangles horizontally keep text centered` and `Expand rectangles vertically keep text centered` to make the boxes the same size, if you wish.
+
+Tips 3: If you want the left and right margins to be different from the top and bottom margins, input something like `32,16`, this will create a box with left and right margins of `32` and top and bottom margins of `16`.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const paddingStr = await utils.inputPrompt("padding?","string","8");
+var paddingLR = 0;
+var paddingTB = 0;
+if(paddingStr.indexOf(',') > 0) {
+	const paddingParts = paddingStr.split(',');
+	paddingLR = parseInt(paddingParts[0]);
+	paddingTB = parseInt(paddingParts[1]);
+}
+else {
+	paddingLR = paddingTB = parseInt(paddingStr);
+}
+
+if(isNaN(paddingLR) || isNaN(paddingTB)) {
+	return;
+}
+
+const elements = ea.getViewSelectedElements();
+const groups = ea.getMaximumGroups(elements);
+
+for(const elements of groups) {
+	if(elements.length === 1 && elements[0].type ==="arrow" || elements[0].type==="line") {
+		// individual arrows or lines are not affected
+		continue;
+	}
+	const box = ea.getBoundingBox(elements);
+	color = ea
+			.getExcalidrawAPI()
+			.getAppState()
+			.currentItemStrokeColor;
+	// use current stroke with and style
+	const appState = ea.getExcalidrawAPI().getAppState();
+	const strokeWidth = appState.currentItemStrokeWidth;
+	const strokeStyle = appState.currentItemStrokeStyle;
+	const strokeSharpness = appState.currentItemStrokeSharpness;
+	const roughness = appState.currentItemRoughness;
+	const fillStyle = appState.currentItemFillStyle;
+	const backgroundColor = appState.currentItemBackgroundColor;
+	ea.style.strokeWidth = strokeWidth;
+	ea.style.strokeStyle = strokeStyle;
+	ea.style.strokeSharpness = strokeSharpness;
+	ea.style.roughness = roughness;
+	ea.style.fillStyle = fillStyle;
+	ea.style.backgroundColor = backgroundColor;	
+	ea.style.strokeColor = color;
+
+	const id = ea.addRect(
+		box.topX - paddingLR,
+		box.topY - paddingTB,
+		box.width + 2*paddingLR,
+		box.height + 2*paddingTB
+	);
+	ea.copyViewElementsToEAforEditing(elements);
+	ea.addToGroup([id].concat(elements.map((el)=>el.id)));
+	ea.addElementsToView(false);
+	ea.reset();
+}
--- a/ea-scripts/Box
+++ b/ea-scripts/Box
@@ -0,0 +1,40 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-elements.jpg)
+
+This script will add an encapsulating box around the currently selected elements in Excalidraw.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+//uncomment if you don't want a prompt for custom padding
+//const padding = 10
+const padding = parseInt (await utils.inputPrompt("padding?","number","10"));
+if(isNaN(padding)) {
+  new Notice("The padding value provided is not a number");
+  return;
+}
+elements = ea.getViewSelectedElements();
+const box = ea.getBoundingBox(elements);
+color = ea
+        .getExcalidrawAPI()
+        .getAppState()
+        .currentItemStrokeColor;
+//uncomment for random color:
+//color = '#'+(Math.random()*0xFFFFFF<<0).toString(16).padStart(6,"0");
+ea.style.strokeColor = color;
+id = ea.addRect(
+	box.topX - padding,
+	box.topY - padding,
+	box.width + 2*padding,
+	box.height + 2*padding
+);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addToGroup([id].concat(elements.map((el)=>el.id)));
+ea.addElementsToView(false);
--- a/ea-scripts/Bullet
+++ b/ea-scripts/Bullet
@@ -0,0 +1,30 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-bullet-point.jpg)
+
+This script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+ea.copyViewElementsToEAforEditing(elements);
+const padding = 10;
+elements.forEach((el)=>{
+  ea.style.strokeColor = el.strokeColor;
+  const size = el.fontSize/2;
+  const ellipseId = ea.addEllipse(
+    el.x-padding-size,
+    el.y+size/2,
+    size,
+    size
+  );
+  ea.addToGroup([el.id,ellipseId]);
+});
+ea.addElementsToView();
--- a/ea-scripts/Connect
+++ b/ea-scripts/Connect
@@ -0,0 +1,35 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-connect-elements.jpg)
+
+This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const elements = ea.getViewSelectedElements();
+ea.copyViewElementsToEAforEditing(elements);
+const groups = ea.getMaximumGroups(elements);
+if(groups.length !== 2) return;
+els = [ 
+  ea.getLargestElement(groups[0]),
+  ea.getLargestElement(groups[1])
+];
+ea.connectObjects(
+  els[0].id,
+  null,
+  els[1].id,
+  null, 
+  {
+	endArrowHead: "triangle",
+	startArrowHead: "dot",
+	numberOfPoints: 2
+  }
+);
+ea.addElementsToView();
--- a/ea-scripts/Convert
+++ b/ea-scripts/Convert
@@ -0,0 +1,32 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+Converts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.
+`original text` => `[[selected folder/original text|original text]]`
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+folders = new Set();
+app.vault.getFiles().forEach((f)=>
+  folders.add(f.path.substring(0,f.path.lastIndexOf("/")))
+);
+
+f = Array.from(folders);
+folder = await utils.suggester(f,f);
+folder = folder??""; //if exiting suggester with ESC
+folder = folder === "" ? folder : folder + "/";
+
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+
+elements.forEach((el)=>{
+  el.rawText = "[["+folder+el.rawText+"|"+el.rawText+"]]";
+  el.text = "[["+folder+el.text+"|"+el.text+"]]";
+  el.originalText = "[["+folder+el.originalText+"|"+el.originalText+"]]";
+})
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
--- a/ea-scripts/Copy
+++ b/ea-scripts/Copy
@@ -0,0 +1,43 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-copy-selected-element-styles-to-global.png)
+
+This script will copy styles of any selected element into Excalidraw's global styles.
+
+After copying the styles of element such as box, text, or arrow using this script, You can then use Excalidraw's box, arrow, and other tools to create several elements with the same style. This is sometimes more convenient than `Copy Styles` and `Paste Styles`, especially when used with the script `Box Each Selected Groups`.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+
+const element = ea.getViewSelectedElement();
+const appState = ea.getExcalidrawAPI().getAppState();
+
+if(!element) {
+	return;
+}
+
+appState.currentItemStrokeWidth = element.strokeWidth;
+appState.currentItemStrokeStyle = element.strokeStyle;
+appState.currentItemStrokeSharpness = element.strokeSharpness;
+appState.currentItemRoughness = element.roughness;
+appState.currentItemFillStyle = element.fillStyle;
+appState.currentItemBackgroundColor = element.backgroundColor;
+appState.currentItemStrokeColor = element.strokeColor;
+
+if(element.type === 'text') {
+	appState.currentItemFontFamily = element.fontFamily;
+	appState.currentItemFontSize = element.fontSize;
+	appState.currentItemTextAlign = element.textAlign;
+}
+
+if(element.type === 'arrow') {
+	appState.currentItemStartArrowhead = element.startArrowhead;
+	appState.currentItemEndArrowhead = element.endArrowhead;
+}
--- a/ea-scripts/Create
+++ b/ea-scripts/Create
@@ -0,0 +1,21 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-create-and-embed-new-markdown-file.jpg)
+
+The script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+let folder = ea.targetView.file.path;
+folder = folder.lastIndexOf("/")===-1?"":folder.substring(0,folder.lastIndexOf("/"))+"/";
+const fname = await utils.inputPrompt("Filename for new file","Filename",folder);
+const file = await app.fileManager.createAndOpenMarkdownFile(fname,true);
+await ea.addImage(0,0,file);
+ea.addElementsToView(true,true);
--- a/ea-scripts/Darken
+++ b/ea-scripts/Darken
@@ -0,0 +1,289 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)
+
+This script darkens the background color of the selected element by 2% at a time. 
+
+You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.
+
+In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+
+The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert).
+
+```javascript
+*/
+
+const elements = ea
+  .getViewSelectedElements()
+  .filter((el) =>
+    ["rectangle", "ellipse", "diamond", "image"].includes(el.type)
+  );
+ea.copyViewElementsToEAforEditing(elements);
+for (const el of ea.getElements()) {
+  const color = colorNameToHex(el.backgroundColor);
+  const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+  if (rgbColor) {
+    const r = parseInt(rgbColor[1], 16);
+    const g = parseInt(rgbColor[2], 16);
+    const b = parseInt(rgbColor[3], 16);
+    const originalRgb = [r, g, b];
+    const hsl = rgbToHsl(originalRgb);
+    const step = 2;
+    const newLightness = hsl[2] - step;
+    if (newLightness > 0) {
+      hsl[2] = newLightness;
+    }
+    const newRgb = hslToRgb(hsl);
+    el.backgroundColor = "#" + rgbToHexString(newRgb);
+  }
+}
+ea.addElementsToView(false, false);
+
+function rgbToHexString(args) {
+  const integer =
+    ((Math.round(args[0]) & 0xff) << 16) +
+    ((Math.round(args[1]) & 0xff) << 8) +
+    (Math.round(args[2]) & 0xff);
+
+  const string = integer.toString(16).toUpperCase();
+  return "000000".substring(string.length) + string;
+}
+
+function hslToRgb(hsl) {
+  const h = hsl[0] / 360;
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  let t2;
+  let t3;
+  let val;
+
+  if (s === 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+
+  const t1 = 2 * l - t2;
+
+  const rgb = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + (1 / 3) * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+
+    if (t3 > 1) {
+      t3--;
+    }
+
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+function rgbToHsl(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  const l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return [h, s * 100, l * 100];
+}
+
+function colorNameToHex(color) {
+  const colors = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    "indianred ": "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370d8",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#d87093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32",
+  };
+  if (typeof colors[color.toLowerCase()] != "undefined")
+    return colors[color.toLowerCase()];
+  return color;
+}
--- a/ea-scripts/Dimensions.md
+++ b/ea-scripts/Dimensions.md
@@ -0,0 +1,39 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-dimensions.jpg)
+
+Currently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script. 
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const elements = ea.getViewSelectedElements();
+if(elements.length === 0) return;
+const el = ea.getLargestElement(elements);
+const sizeIn = [
+  Math.round(el.x),
+  Math.round(el.y),
+  Math.round(el.width),
+  Math.round(el.height)
+].join(",");
+let res = await utils.inputPrompt("x,y,width,height?",null,sizeIn);
+res = res.split(",");
+if(res.length !== 4) return;
+let size = [];
+for (v of res) {
+  const i = parseInt(v);
+  if(isNaN(i)) return;
+  size.push(i);
+}
+el.x = size[0];
+el.y = size[1];
+el.width = size[2];
+el.height = size[3];
+ea.copyViewElementsToEAforEditing([el]);
+ea.addElementsToView();
--- a/ea-scripts/Elbow
+++ b/ea-scripts/Elbow
@@ -0,0 +1,56 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/elbow-connectors.png)
+
+This script converts the selected connectors to elbows.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const elements = ea.getViewSelectedElements();
+
+const lines = elements.filter((el)=>el.type==="arrow" || el.type==="line");
+
+for (const line of lines) {
+  if (line.points.length >= 3) {
+    for (var i = 0; i < line.points.length - 2; i++) {
+      var p1;
+      var p3;
+      if (line.points[i][0] < line.points[i + 2][0]) {
+        p1 = line.points[i];
+        p3 = line.points[i+2];
+      } else {
+        p1 = line.points[i + 2];
+        p3 = line.points[i];
+      }
+      const p2 = line.points[i + 1];
+
+      if (p1[0] === p3[0]) {
+        continue;
+      }
+
+      const k = (p3[1] - p1[1]) / (p3[0] - p1[0]);
+      const b = p1[1] - k * p1[0];
+
+      y0 = k * p2[0] + b;
+      const up = p2[1] < y0;
+
+      if ((k > 0 && !up) || (k < 0 && up)) {
+        p2[0] = p1[0];
+        p2[1] = p3[1];
+      } else {
+        p2[0] = p3[0];
+        p2[1] = p1[1];
+      }
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(lines);
+ea.addElementsToView();
--- a/ea-scripts/Expand
+++ b/ea-scripts/Expand
@@ -0,0 +1,86 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)
+
+This script expands the width of the selected rectangles until they are all the same width and keep the text centered.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+
+const elements = ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+
+const groupWidths = topGroups
+  .map((g) => {
+    if(g.length === 1 && (g[0].type === 'arrow' || g[0].type === 'line')) {
+      // ignore individual lines
+      return { minLeft: 0, maxRight: 0 };
+    }
+    return g.reduce(
+      (pre, cur, i) => {
+        if (i === 0) {
+          return {
+            minLeft: cur.x,
+            maxRight: cur.x + cur.width,
+            index: i,
+          };
+        } else {
+          return {
+            minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft,
+            maxRight:
+              cur.x + cur.width > pre.maxRight
+                ? cur.x + cur.width
+                : pre.maxRight,
+            index: i,
+          };
+        }
+      },
+      { minLeft: 0, maxRight: 0 }
+    );
+  })
+  .map((r) => {
+    r.width = r.maxRight - r.minLeft;
+    return r;
+  });
+
+const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width));
+
+for (var i = 0; i < topGroups.length; i++) {
+  const rects = topGroups[i]
+    .filter((el) => el.type === "rectangle")
+    .sort((lha, rha) => lha.x - rha.x);
+  const texts = topGroups[i]
+    .filter((el) => el.type === "text")
+    .sort((lha, rha) => lha.x - rha.x);
+  const groupWith = groupWidths[i].width;
+  if (groupWith < maxGroupWidth) {
+    const distance = maxGroupWidth - groupWith;
+    const perRectDistance = distance / rects.length;
+    for (var j = 0; j < rects.length; j++) {
+      const rect = rects[j];
+      const rectLeft = rect.x;
+      const rectTop = rect.y;
+      const rectRight = rect.x + rect.width;
+      const rectBottom = rect.y + rect.height;
+      
+      rect.x = rect.x + perRectDistance * j - perRectDistance / 2;
+      rect.width += perRectDistance;
+      
+      const textsWithRect = texts.filter(text => text.x >= rectLeft && text.x <= rectRight
+        && text.y >= rectTop && text.y <= rectBottom);
+      for(const text of textsWithRect) {
+        text.x = text.x + perRectDistance * j;
+      }
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
--- a/ea-scripts/Expand
+++ b/ea-scripts/Expand
@@ -0,0 +1,74 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)
+
+This script expands the width of the selected rectangles until they are all the same width.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+
+const elements = ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+
+const groupWidths = topGroups
+  .map((g) => {
+    if(g.length === 1 && (g[0].type === 'arrow' || g[0].type === 'line')) {
+      // ignore individual lines
+      return { minLeft: 0, maxRight: 0 };
+    }
+    return g.reduce(
+      (pre, cur, i) => {
+        if (i === 0) {
+          return {
+            minLeft: cur.x,
+            maxRight: cur.x + cur.width,
+            index: i,
+          };
+        } else {
+          return {
+            minLeft: cur.x < pre.minLeft ? cur.x : pre.minLeft,
+            maxRight:
+              cur.x + cur.width > pre.maxRight
+                ? cur.x + cur.width
+                : pre.maxRight,
+            index: i,
+          };
+        }
+      },
+      { minLeft: 0, maxRight: 0 }
+    );
+  })
+  .map((r) => {
+    r.width = r.maxRight - r.minLeft;
+    return r;
+  });
+
+const maxGroupWidth = Math.max(...groupWidths.map((g) => g.width));
+
+for (var i = 0; i < topGroups.length; i++) {
+  const rects = topGroups[i]
+    .filter((el) => el.type === "rectangle")
+    .sort((lha, rha) => lha.x - rha.x);
+  
+  const groupWith = groupWidths[i].width;
+  if (groupWith < maxGroupWidth) {
+    const distance = maxGroupWidth - groupWith;
+    const perRectDistance = distance / rects.length;
+    for (var j = 0; j < rects.length; j++) {
+      const rect = rects[j];
+      rect.x = rect.x + perRectDistance * j;
+      rect.width += perRectDistance;
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
+
--- a/ea-scripts/Expand
+++ b/ea-scripts/Expand
@@ -0,0 +1,86 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)
+
+This script expands the height of the selected rectangles until they are all the same height and keep the text centered.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+
+const elements = ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+
+const groupHeights = topGroups
+  .map((g) => {
+    if(g.length === 1 && (g[0].type === 'arrow' || g[0].type === 'line')) {
+      // ignore individual lines
+      return { minTop: 0, maxBottom: 0 };
+    }
+    return g.reduce(
+      (pre, cur, i) => {
+        if (i === 0) {
+          return {
+            minTop: cur.y,
+            maxBottom: cur.y + cur.height,
+            index: i,
+          };
+        } else {
+          return {
+            minTop: cur.y < pre.minTop ? cur.y : pre.minTop,
+            maxBottom:
+              cur.y + cur.height > pre.maxBottom
+                ? cur.y + cur.height
+                : pre.maxBottom,
+            index: i,
+          };
+        }
+      },
+      { minTop: 0, maxBottom: 0 }
+    );
+  })
+  .map((r) => {
+    r.height = r.maxBottom - r.minTop;
+    return r;
+  });
+
+const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height));
+
+for (var i = 0; i < topGroups.length; i++) {
+  const rects = topGroups[i]
+    .filter((el) => el.type === "rectangle")
+    .sort((lha, rha) => lha.y - rha.y);
+  const texts = topGroups[i]
+    .filter((el) => el.type === "text")
+    .sort((lha, rha) => lha.y - rha.y);
+  const groupWith = groupHeights[i].height;
+  if (groupWith < maxGroupHeight) {
+    const distance = maxGroupHeight - groupWith;
+    const perRectDistance = distance / rects.length;
+    for (var j = 0; j < rects.length; j++) {
+      const rect = rects[j];
+      const rectLeft = rect.x;
+      const rectTop = rect.y;
+      const rectRight = rect.x + rect.width;
+      const rectBottom = rect.y + rect.height;
+
+      rect.y = rect.y + perRectDistance * j - perRectDistance / 2;
+      rect.height += perRectDistance;
+
+      const textsWithRect = texts.filter(text => text.x >= rectLeft && text.x <= rectRight
+        && text.y >= rectTop && text.y <= rectBottom);
+      for(const text of textsWithRect) {
+        text.y = text.y + perRectDistance * j;
+      }
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
--- a/ea-scripts/Expand
+++ b/ea-scripts/Expand
@@ -0,0 +1,71 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)
+
+This script expands the height of the selected rectangles until they are all the same height.
+
+```javascript
+*/
+
+const elements = ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+
+const groupHeights = topGroups
+  .map((g) => {
+    if(g.length === 1 && (g[0].type === 'arrow' || g[0].type === 'line')) {
+      // ignore individual lines
+      return { minTop: 0, maxBottom: 0 };
+    }
+    return g.reduce(
+      (pre, cur, i) => {
+        if (i === 0) {
+          return {
+            minTop: cur.y,
+            maxBottom: cur.y + cur.height,
+            index: i,
+          };
+        } else {
+          return {
+            minTop: cur.y < pre.minTop ? cur.y : pre.minTop,
+            maxBottom:
+              cur.y + cur.height > pre.maxBottom
+                ? cur.y + cur.height
+                : pre.maxBottom,
+            index: i,
+          };
+        }
+      },
+      { minTop: 0, maxBottom: 0 }
+    );
+  })
+  .map((r) => {
+    r.height = r.maxBottom - r.minTop;
+    return r;
+  });
+
+const maxGroupHeight = Math.max(...groupHeights.map((g) => g.height));
+
+for (var i = 0; i < topGroups.length; i++) {
+  const rects = topGroups[i]
+    .filter((el) => el.type === "rectangle")
+    .sort((lha, rha) => lha.y - rha.y);
+    
+  const groupWith = groupHeights[i].height;
+  if (groupWith < maxGroupHeight) {
+    const distance = maxGroupHeight - groupWith;
+    const perRectDistance = distance / rects.length;
+    for (var j = 0; j < rects.length; j++) {
+      const rect = rects[j];
+      rect.y = rect.y + perRectDistance * j;
+      rect.height += perRectDistance;
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
+
--- a/ea-scripts/Fixed
+++ b/ea-scripts/Fixed
@@ -0,0 +1,37 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fix-space-demo.png)
+
+The script arranges the selected elements horizontally with a fixed spacing.
+
+When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
+
+```javascript
+*/
+const spacing = parseInt (await utils.inputPrompt("spacing?","number","8"));
+if(isNaN(spacing)) {
+  return;
+}
+const elements=ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+const groups = topGroups.sort((lha,rha) => lha[0].x - rha[0].x);
+
+for(var i=0; i<groups.length; i++) {
+    if(i > 0) {
+        const preGroup = groups[i-1];
+        const curGroup = groups[i];
+
+        const preRight = Math.max(...preGroup.map(el => el.x + el.width));
+        const curLeft = Math.min(...curGroup.map(el => el.x));
+        const distance = curLeft -  preRight - spacing;
+
+        for(const curEl of curGroup) {
+            curEl.x = curEl.x - distance;
+        }
+    }
+}
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
--- a/ea-scripts/Fixed
+++ b/ea-scripts/Fixed
@@ -0,0 +1,37 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fixed-vertical-distance.png)
+
+The script arranges the selected elements vertically with a fixed spacing.
+
+When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.
+
+```javascript
+*/
+const spacing = parseInt (await utils.inputPrompt("spacing?","number","8"));
+if(isNaN(spacing)) {
+  return;
+}
+const elements=ea.getViewSelectedElements();
+const topGroups = ea.getMaximumGroups(elements);
+const groups = topGroups.sort((lha,rha) => lha[0].y - rha[0].y);
+
+for(var i=0; i<groups.length; i++) {
+    if(i > 0) {
+        const preGroup = groups[i-1];
+        const curGroup = groups[i];
+
+        const preBottom = Math.max(...preGroup.map(el => el.y + el.height));
+        const curTop = Math.min(...curGroup.map(el => el.y));
+        const distance = curTop -  preBottom - spacing;
+
+        for(const curEl of curGroup) {
+            curEl.y = curEl.y - distance;
+        }
+    }
+}
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView(false, false);
--- a/ea-scripts/Font
+++ b/ea-scripts/Font
@@ -0,0 +1,22 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-font-family.jpg)
+
+Sets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+if(elements.length===0) return;
+let font = ["Virgil","Helvetica","Cascadia"];
+font = parseInt(await utils.suggester(font,["1","2","3"]));
+if (isNaN(font)) return;
+elements.forEach((el)=>el.fontFamily = font);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
--- a/ea-scripts/Grid.md
+++ b/ea-scripts/Grid.md
@@ -0,0 +1,24 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-grid.jpg)
+
+The default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const grid = parseInt(await utils.inputPrompt("Grid size?",null,"20"));
+if(isNaN(grid)) return; //this is to avoid passing an illegal value to Excalidraw
+const api = ea.getExcalidrawAPI();
+let appState = api.getAppState();
+appState.gridSize = grid;
+api.updateScene({
+  appState,
+  commitToHistory:false
+});
--- a/ea-scripts/Lighten
+++ b/ea-scripts/Lighten
@@ -0,0 +1,289 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)
+
+This script lightens the background color of the selected element by 2% at a time. 
+
+You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.
+
+In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+
+The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert).
+
+```javascript
+*/
+
+const elements = ea
+  .getViewSelectedElements()
+  .filter((el) =>
+    ["rectangle", "ellipse", "diamond", "image"].includes(el.type)
+  );
+ea.copyViewElementsToEAforEditing(elements);
+for (const el of ea.getElements()) {
+  const color = colorNameToHex(el.backgroundColor);
+  const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+  if (rgbColor) {
+    const r = parseInt(rgbColor[1], 16);
+    const g = parseInt(rgbColor[2], 16);
+    const b = parseInt(rgbColor[3], 16);
+    const originalRgb = [r, g, b];
+    const hsl = rgbToHsl(originalRgb);
+    const step = 2;
+    const newLightness = hsl[2] + step;
+    if (newLightness < 100) {
+      hsl[2] = newLightness;
+    }
+    const newRgb = hslToRgb(hsl);
+    el.backgroundColor = "#" + rgbToHexString(newRgb);
+  }
+}
+ea.addElementsToView(false, false);
+
+function rgbToHexString(args) {
+  const integer =
+    ((Math.round(args[0]) & 0xff) << 16) +
+    ((Math.round(args[1]) & 0xff) << 8) +
+    (Math.round(args[2]) & 0xff);
+
+  const string = integer.toString(16).toUpperCase();
+  return "000000".substring(string.length) + string;
+}
+
+function hslToRgb(hsl) {
+  const h = hsl[0] / 360;
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  let t2;
+  let t3;
+  let val;
+
+  if (s === 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+
+  const t1 = 2 * l - t2;
+
+  const rgb = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + (1 / 3) * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+
+    if (t3 > 1) {
+      t3--;
+    }
+
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+function rgbToHsl(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  const l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return [h, s * 100, l * 100];
+}
+
+function colorNameToHex(color) {
+  const colors = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    "indianred ": "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370d8",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#d87093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32",
+  };
+  if (typeof colors[color.toLowerCase()] != "undefined")
+    return colors[color.toLowerCase()];
+  return color;
+}
--- a/ea-scripts/Modify
+++ b/ea-scripts/Modify
@@ -0,0 +1,187 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-modify-background-color-opacity.png)
+
+This script changes the opacity of the background color of the selected boxes.
+
+The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it.
+
+Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.
+
+```javascript
+*/
+const alpha = parseFloat(await utils.inputPrompt("Background color opacity?","number","0.6"));
+if(isNaN(alpha)) {
+  return;
+}
+const elements=ea.getViewSelectedElements().filter((el)=>["rectangle","ellipse","diamond","line","image"].includes(el.type));
+ea.copyViewElementsToEAforEditing(elements);
+ea.getElements().forEach((el)=>{
+	const color = colorNameToHex(el.backgroundColor);
+    const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+    if(rgbColor) {
+        const r = parseInt(rgbColor[1], 16);
+        const g = parseInt(rgbColor[2], 16);
+        const b = parseInt(rgbColor[3], 16);
+        el.backgroundColor=`rgba(${r},${g},${b},${alpha})`;
+    }
+    else {
+        const rgbaColor = /^rgba\((\d+,\d+,\d+,)(\d*\.?\d*)\)$/i.exec(color);
+        if(rgbaColor) {
+            el.backgroundColor=`rgba(${rgbaColor[1]}${alpha})`;
+        }
+    }
+});
+ea.addElementsToView(false, false);
+
+function colorNameToHex(color) {
+  const colors = {
+    "aliceblue":"#f0f8ff",
+    "antiquewhite":"#faebd7",
+    "aqua":"#00ffff",
+    "aquamarine":"#7fffd4",
+    "azure":"#f0ffff",
+    "beige":"#f5f5dc",
+    "bisque":"#ffe4c4",
+    "black":"#000000",
+    "blanchedalmond":"#ffebcd",
+    "blue":"#0000ff",
+    "blueviolet":"#8a2be2",
+    "brown":"#a52a2a",
+    "burlywood":"#deb887",
+    "cadetblue":"#5f9ea0",
+    "chartreuse":"#7fff00",
+    "chocolate":"#d2691e",
+    "coral":"#ff7f50",
+    "cornflowerblue":"#6495ed",
+    "cornsilk":"#fff8dc",
+    "crimson":"#dc143c",
+    "cyan":"#00ffff",
+    "darkblue":"#00008b",
+    "darkcyan":"#008b8b",
+    "darkgoldenrod":"#b8860b",
+    "darkgray":"#a9a9a9",
+    "darkgreen":"#006400",
+    "darkkhaki":"#bdb76b",
+    "darkmagenta":"#8b008b",
+    "darkolivegreen":"#556b2f",
+    "darkorange":"#ff8c00",
+    "darkorchid":"#9932cc",
+    "darkred":"#8b0000",
+    "darksalmon":"#e9967a",
+    "darkseagreen":"#8fbc8f",
+    "darkslateblue":"#483d8b",
+    "darkslategray":"#2f4f4f",
+    "darkturquoise":"#00ced1",
+    "darkviolet":"#9400d3",
+    "deeppink":"#ff1493",
+    "deepskyblue":"#00bfff",
+    "dimgray":"#696969",
+    "dodgerblue":"#1e90ff",
+    "firebrick":"#b22222",
+    "floralwhite":"#fffaf0",
+    "forestgreen":"#228b22",
+    "fuchsia":"#ff00ff",
+    "gainsboro":"#dcdcdc",
+    "ghostwhite":"#f8f8ff",
+    "gold":"#ffd700",
+    "goldenrod":"#daa520",
+    "gray":"#808080",
+    "green":"#008000",
+    "greenyellow":"#adff2f",
+    "honeydew":"#f0fff0",
+    "hotpink":"#ff69b4",
+    "indianred ":"#cd5c5c",
+    "indigo":"#4b0082",
+    "ivory":"#fffff0",
+    "khaki":"#f0e68c",
+    "lavender":"#e6e6fa",
+    "lavenderblush":"#fff0f5",
+    "lawngreen":"#7cfc00",
+    "lemonchiffon":"#fffacd",
+    "lightblue":"#add8e6",
+    "lightcoral":"#f08080",
+    "lightcyan":"#e0ffff",
+    "lightgoldenrodyellow":"#fafad2",
+    "lightgrey":"#d3d3d3",
+    "lightgreen":"#90ee90",
+    "lightpink":"#ffb6c1",
+    "lightsalmon":"#ffa07a",
+    "lightseagreen":"#20b2aa",
+    "lightskyblue":"#87cefa",
+    "lightslategray":"#778899",
+    "lightsteelblue":"#b0c4de",
+    "lightyellow":"#ffffe0",
+    "lime":"#00ff00",
+    "limegreen":"#32cd32",
+    "linen":"#faf0e6",
+    "magenta":"#ff00ff",
+    "maroon":"#800000",
+    "mediumaquamarine":"#66cdaa",
+    "mediumblue":"#0000cd",
+    "mediumorchid":"#ba55d3",
+    "mediumpurple":"#9370d8",
+    "mediumseagreen":"#3cb371",
+    "mediumslateblue":"#7b68ee",
+    "mediumspringgreen":"#00fa9a",
+    "mediumturquoise":"#48d1cc",
+    "mediumvioletred":"#c71585",
+    "midnightblue":"#191970",
+    "mintcream":"#f5fffa",
+    "mistyrose":"#ffe4e1",
+    "moccasin":"#ffe4b5",
+    "navajowhite":"#ffdead",
+    "navy":"#000080",
+    "oldlace":"#fdf5e6",
+    "olive":"#808000",
+    "olivedrab":"#6b8e23",
+    "orange":"#ffa500",
+    "orangered":"#ff4500",
+    "orchid":"#da70d6",
+    "palegoldenrod":"#eee8aa",
+    "palegreen":"#98fb98",
+    "paleturquoise":"#afeeee",
+    "palevioletred":"#d87093",
+    "papayawhip":"#ffefd5",
+    "peachpuff":"#ffdab9",
+    "peru":"#cd853f",
+    "pink":"#ffc0cb",
+    "plum":"#dda0dd",
+    "powderblue":"#b0e0e6",
+    "purple":"#800080",
+    "rebeccapurple":"#663399",
+    "red":"#ff0000",
+    "rosybrown":"#bc8f8f",
+    "royalblue":"#4169e1",
+    "saddlebrown":"#8b4513",
+    "salmon":"#fa8072",
+    "sandybrown":"#f4a460",
+    "seagreen":"#2e8b57",
+    "seashell":"#fff5ee",
+    "sienna":"#a0522d",
+    "silver":"#c0c0c0",
+    "skyblue":"#87ceeb",
+    "slateblue":"#6a5acd",
+    "slategray":"#708090",
+    "snow":"#fffafa",
+    "springgreen":"#00ff7f",
+    "steelblue":"#4682b4",
+    "tan":"#d2b48c",
+    "teal":"#008080",
+    "thistle":"#d8bfd8",
+    "tomato":"#ff6347",
+    "turquoise":"#40e0d0",
+    "violet":"#ee82ee",
+    "wheat":"#f5deb3",
+    "white":"#ffffff",
+    "whitesmoke":"#f5f5f5",
+    "yellow":"#ffff00",
+    "yellowgreen":"#9acd32"
+  };
+  if (typeof colors[color.toLowerCase()] != 'undefined')
+    return colors[color.toLowerCase()];
+  return color;
+}
--- a/ea-scripts/Modify
+++ b/ea-scripts/Modify
@@ -0,0 +1,21 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-stroke-width.jpg)
+
+This script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+let width = (ea.getViewSelectedElement().strokeWidth??1).toString();
+width = await utils.inputPrompt("Width?","number",width);
+const elements=ea.getViewSelectedElements();
+ea.copyViewElementsToEAforEditing(elements);
+ea.getElements().forEach((el)=>el.strokeWidth=width);
+ea.addElementsToView();
--- a/Recognition.md
+++ b/Recognition.md
@@ -0,0 +1,121 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-ocr.jpg)
+
+THIS SCRIPT REQUIRES EXCALIDRAW 1.5.15
+
+The script will 
+  1) send the selected image file to [taskbone.com](https://taskbone.com) to exctract the text from the image, and
+  2) will add the text to your drawing as a text element
+
+I recommend also installing the [Transfer TextElements to Excalidraw markdown metadata](Transfer%20TextElements%20to%20Excalidraw%20markdown%20metadata.md) script as well.
+
+The script is based on [@schlundd](https://github.com/schlundd)'s [Obsidian-OCR-Plugin](https://github.com/schlundd/obsidian-ocr-plugin)
+
+See ScriptEngine documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const curVersion = app.plugins.manifests["obsidian-excalidraw-plugin"].version;
+if(curVersion < "1.5.15") new Notice("please update Excalidraw plugin to the latest version");
+
+let token = ea.getScriptSettings()?.token; 
+const BASE_URL = "https://ocr.taskbone.com";
+
+//get new token if token was not provided
+if (!token) {
+  const tokenResponse = await fetch(
+	BASE_URL + "/get-new-token", {
+	  method: 'post'
+  });
+  if (tokenResponse.status === 200) {
+    jsonResponse = await tokenResponse.json();
+	token = jsonResponse.token;
+	ea.setScriptSettings({token});
+  } else {
+	notice(`Taskbone OCR Error: ${tokenResponse.status}\nPlease try again later.`);
+	return;
+  }
+}
+
+//get image element
+//if multiple image elements were selected prompt user to choose
+const imageElements = ea.getViewSelectedElements().filter((el)=>el.type==="image");
+
+//need to save the view to ensure recently pasted images are saved as files
+await ea.targetView.save(); 
+
+let selectedImageElement = null;
+switch (imageElements.length) {
+  case 0: 
+    return;
+  case 1: 
+    selectedImageElement = imageElements[0];
+    break;
+  default:
+	const files = imageElements.map((el)=>ea.getViewFileForImageElement(el));
+	selectedImageElement = await utils.suggester(files.map((f)=>f.name),imageElements);
+    break;
+}
+
+if(!selectedImageElement) {
+  notice("No image element was selected");
+  return;
+}
+const imageFile = ea.getViewFileForImageElement(selectedImageElement);
+if(!imageFile) {
+  notice("Can read image file");
+  return;
+}
+
+//Execute the OCR
+let text = null;
+const fileBuffer = await app.vault.readBinary(imageFile);
+const formData = new FormData();
+formData.append("image", new Blob([fileBuffer]))
+try {
+  const response = await fetch(
+	BASE_URL + "/get-text", { 
+	  headers: {
+		Authorization: "Bearer " + token
+	  },
+	  method: "post",
+	  body: formData
+	});
+  if (response.status == 200) {
+	jsonResponse = await response.json();
+	text = jsonResponse?.text;
+	} else {
+	  notice(`Could not read Text from ${file.path}:\n Error: ${response.status}`);
+	  return;
+	}
+} catch (error) {
+  notice(`The OCR service seems unavailable right now. Please try again later.`);
+  return;
+}
+
+if(!text) {
+  notice("No text found");
+  return;
+}
+console.log({text});
+
+//add text element to drawing
+const id = ea.addText(selectedImageElement.x,selectedImageElement.y+selectedImageElement.height,text);
+await ea.addElementsToView();
+const API = ea.getExcalidrawAPI();
+st = API.getAppState();
+st.selectedElementIds = {};
+st.selectedElementIds[id] = true;
+API.updateScene({appState: st});
+API.zoomToFit(ea.getViewSelectedElements(),1);
+
+//utility function
+function notice(message) {
+  new Notice(message,10000);
+  console.log(message);
+}
--- a/ea-scripts/README.md
+++ b/ea-scripts/README.md
@@ -0,0 +1,44 @@
+# Excalidraw Script Engine scripts library
+Click to watch the intro video:
+
+[![Script Engine](https://user-images.githubusercontent.com/14358394/145684531-8d9c2992-59ac-4ebc-804a-4cce1777ded2.jpg)](https://youtu.be/hePJcObHIso)
+
+See the [Excalidraw Script Engine](https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html) documentation for more details.
+
+## How to install scripts into your Obsidian Vault
+Open the script you are interested in and save it to your Obsidian Vault including the first line `/*`, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+
+## List of available scripts
+|Title|Description|Icon|Contributor|
+|----|----|----|----|
+|[Box Each Selected Groups](Box%20Each%20Selected%20Groups.md)|This script will add encapsulating boxes around each of the currently selected groups in Excalidraw.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-each-selected-groups.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Box Selected Elements](Box%20Selected%20Elements.md)|This script will add an encapsulating box around the currently selected elements in Excalidraw.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-elements.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Bullet Point](Bullet%20Point.md)|This script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-bullet-point.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Connect elements](Connect%20elements.md)|This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-connect-elements.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Convert text to link with folder and alias](Convert%20text%20to%20link%20with%20folder%20and%20alias.md)|Converts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.|`original text` => `[[selected folder/original text\|original text]]`|[@zsviczian](https://github.com/zsviczian)|
+|[Copy Selected Element Styles to Global](Copy%20Selected%20Element%20Styles%20to%20Global)|This script will copy styles of any selected element into Excalidraw's global styles.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-copy-selected-element-styles-to-global.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Create new markdown file and embed into active drawing](Create%20new%20markdown%20file%20and%20embed%20into%20active%20drawing.md)|The script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-create-and-embed-new-markdown-file.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Darken background color](Darken%20background%20color.md)|This script darkens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect. In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Dimensions](Dimensions.md)|Currently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-dimensions.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Elbow connectors](Elbow%20connectors.md)|This script converts the selected connectors to elbows.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/elbow-connectors.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles horizontally keep text centered](Expand%20rectangles%20horizontally%20keep%20text20%centered.md)|This script expands the width of the selected rectangles until they are all the same width and keep the text centered.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles horizontally](Expand%20rectangles%20horizontally.md)|This script expands the width of the selected rectangles until they are all the same width.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles vertically keep text centered](Expand%20rectangles%20vertically%20keep%20text%20centered.md)|This script expands the height of the selected rectangles until they are all the same height and keep the text centered.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles vertically](Expand%20rectangles%20vertically.md)|This script expands the height of the selected rectangles until they are all the same height.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Fixed spacing](Fixed%20spacing.md)|The script arranges the selected elements horizontally with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fix-space-demo.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Fixed vertical distance](Fixed%20vertical%20distance.md)|The script arranges the selected elements vertically with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fixed-vertical-distance.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Font Family](Font%20Family.md)|Sets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-font-family.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Grid](Grid.md)|The default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-grid.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Lighten background color](Lighten%20background%20color.md)|This script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Modify background color opacity](Modify%20background%20color%20opacity.md)|This script changes the opacity of the background color of the selected boxes. The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-modify-background-color-opacity.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Modify stroke width of selected elements](Modify%20stroke%20width%20of%20selected%20elements.md)|This script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-stroke-width.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[OCR - Optical Character Recognition](OCR%20-%20Optical%20Character%20Recognition.md)|The script will  1) send the selected image file to [taskbone.com](https://taskbone.com) to exctract the text from the image, and 2) will add the text to your drawing as a text element.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-ocr.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Reverse arrows](Reverse%20arrows.md)|Reverse the direction of **arrows** within the scope of selected elements.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-reverse-arrow.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Set Link Alias](Set20%Link20%Alias.md)|Iterates all of the links in the selected TextElements and prompts the user to set or modify the alias for each link found.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-set-link-alias.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Split text by lines](Split%20text%20by%20lines.md)|Split lines of text into separate text elements for easier reorganization|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-split-lines.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Text Align](Text%20Align.md)|Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Transfer TextElements to Excalidraw markdown metadata](Transfer%20TextElements%20to%20Excalidraw%20markdown%20metadata.md)|The script will delete the selected text elements from the canvas and will copy the text from these text elements into the Excalidraw markdown file as metadata. This means, that the text will no longer be visible in the drawing, however you will be able to search for the text in Obsidian and find the drawing containing this image.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-to-metadata.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Zoom to Fit Selected Elements](Zoom%20to%20Fit%20Selected%20Elements.md)|Similar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)||[@zsviczian](https://github.com/zsviczian)|
--- a/ea-scripts/Reverse
+++ b/ea-scripts/Reverse
@@ -0,0 +1,23 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-reverse-arrow.jpg)
+
+Reverse the direction of **arrows** within the scope of selected elements.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="arrow");
+if(!elements || elements.length===0) return;
+elements.forEach((el)=>{
+	const start = el.startArrowhead;
+	el.startArrowhead = el.endArrowhead;
+	el.endArrowhead = start;
+});
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
--- a/ea-scripts/Set
+++ b/ea-scripts/Set
@@ -0,0 +1,53 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-set-link-alias.jpg)
+
+Iterates all of the links in the selected TextElements and prompts the user to set or modify the alias for each link found.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+// `[[markdown links]]`
+for(el of elements) { //doing for instead of .forEach due to await inputPrompt
+  parts = el.rawText.split(/(\[\[[\w\W]*?]])/);
+  newText = "";
+  for(t of parts) { //doing for instead of .map due to await inputPrompt
+	if(!t.match(/(\[\[[\w\W]*?]])/)) {
+	  newText += t;
+    } else {
+      original = t.split(/\[\[|]]/)[1];
+	  cut = original.indexOf("|");
+	  alias = cut === -1 ? "" : original.substring(cut+1);
+	  link = cut === -1 ? original : original.substring(0,cut);
+      alias = await utils.inputPrompt(`Alias for [[${link}]]`,"type alias here",alias);
+	  newText += `[[${link}|${alias}]]`;
+    }
+  }
+  el.rawText = newText;
+};
+
+// `[wiki](links)`
+for(el of elements) { //doing for instead of .forEach due to await inputPrompt
+  parts = el.rawText.split(/(\[[\w\W]*?]\([\w\W]*?\))/);
+  newText = "";
+  for(t of parts) { //doing for instead of .map due to await inputPrompt
+	if(!t.match(/(\[[\w\W]*?]\([\w\W]*?\))/)) {
+	  newText += t;
+    } else {
+	  alias = t.match(/\[([\w\W]*?)]/)[1];
+	  link = t.match(/\(([\w\W]*?)\)/)[1];
+      alias = await utils.inputPrompt(`Alias for [[${link}]]`,"type alias here",alias);
+	  newText += `[[${link}|${alias}]]`;
+    }
+  }
+  el.rawText = newText;
+};
+
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
--- a/ea-scripts/Split
+++ b/ea-scripts/Split
@@ -0,0 +1,27 @@
+/*
+## requires Excalidraw 1.5.1 or higher
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-split-lines.jpg)
+
+Split lines of text into separate text elements for easier reorganization
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+elements.forEach((el)=>{
+  ea.style.strokeColor = el.strokeColor;
+  ea.style.fontFamily  = el.fontFamily;
+  ea.style.fontSize    = el.fontSize;
+  const text = el.text.split("\n");
+  for(i=0;i<text.length;i++) {
+	ea.addText(el.x,el.y+i*el.height/text.length,text[i]);
+  }
+});
+ea.addElementsToView();
+ea.deleteViewElements(elements);
--- a/ea-scripts/Text
+++ b/ea-scripts/Text
@@ -0,0 +1,21 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg)
+
+Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+if(elements.length===0) return;
+let align = ["left","right","center"];
+align = await utils.suggester(align,align);
+elements.forEach((el)=>el.textAlign = align);
+ea.copyViewElementsToEAforEditing(elements);
+ea.addElementsToView();
--- a/ea-scripts/Transfer
+++ b/ea-scripts/Transfer
@@ -0,0 +1,44 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-to-metadata.jpg)
+
+The script will delete the selected text elements from the canvas and will copy the text from these text elements into the Excalidraw markdown file as metadata. This means, that the text will no longer be visible in the drawing, however you will be able to search for the text in Obsidian and find the drawing containing this image.
+
+See ScriptEngine documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+//get text elements
+
+const textElements = ea.getViewSelectedElements().filter((el)=>el.type==="text");
+
+if(textElements.length===0) {
+  notice("No text elements were selected")
+  return;
+}
+
+metadata = "# Metadata\n" + textElements
+           .map((el)=>el.rawText.replaceAll(/%|\^/g,"_")) //cleaning these characters for safety, might not be needed
+           .join("/n") + "\n";
+
+ea.deleteViewElements(textElements);
+await ea.targetView.save();
+data = await app.vault.read(ea.targetView.file);
+splitAfterFrontmatter = data.split(/(^---[\w\W]*?---\n)/);
+if(splitAfterFrontmatter.length !== 3) {
+  notice("Error locating frontmatter in markdown file");
+  console.log({file:ea.targetView.file});
+  return;
+}
+newData = splitAfterFrontmatter[1]+metadata+splitAfterFrontmatter[2]
+await app.vault.modify(ea.targetView.file,newData);
+
+//utility function
+function notice(message) {
+  new Notice(message);
+  console.log(message);
+}
--- a/ea-scripts/Zoom
+++ b/ea-scripts/Zoom
@@ -0,0 +1,15 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+Similar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+elements = ea.getViewSelectedElements();
+api = ea.getExcalidrawAPI();
+api.zoomToFit(elements,10);
--- a/ea-scripts/index.md
+++ b/ea-scripts/index.md
@@ -0,0 +1,223 @@
+If you are enjoying the Excalidraw plugin then please support my work and enthusiasm by buying me a coffee on [https://ko-fi/zsolt](https://ko-fi.com/zsolt).
+
+[<img src="https://user-images.githubusercontent.com/14358394/115450238-f39e8100-a21b-11eb-89d0-fa4b82cdbce8.png" class="coffee">](https://ko-fi.com/zsolt) 
+
+---
+
+Jump ahead to the [[#List of available scripts]]
+
+# Intorducing Excalidraw Automate Script Engine
+<iframe width="560" height="315" src="https://www.youtube.com/embed/hePJcObHIso" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+
+Script Engine scripts are installed in the `Downloaded` subfolder of the `Excalidraw Automate script folder` specified in plugin settings.
+
+In the `Command Palette` installed scripts are prefixed with `Downloaded/`, thus you can always know if you are executing a local script of your own, or one that you have downloaded from GitHub.
+
+## Attention developers and hobby hackers
+<img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/hobby-programmer.svg' align='left' style='background-color:whitesmoke; width:80px; margin-right:15px; margin-bottom:10px;'/>
+If you want to modify scripts, I recommend moving them to the `Excalidraw Automate script folder` or a different subfolder under the script folder. Scripts in the `Downloaded` folder will be overwritten when you click the `Update this script` button. Note also, that at this time, I do not check if the script file has been updated on GitHub, thus the `Update this script` button is always visible once you have installed a script, not only when an update is availble (hope to build this feature in the future).
+
+I would love to include your contribution in the script library. If you have a script of your own that you would like to share with the community, please open a [PR](https://github.com/zsviczian/obsidian-excalidraw-plugin/pulls) on GitHub. Be sure to include the following in your pull request
+- The [script file](https://github.com/zsviczian/obsidian-excalidraw-plugin/tree/master/ea-scripts) with a self explanetory name. The name of the file will be the name of the script in the Command Palette.
+- An [image](https://github.com/zsviczian/obsidian-excalidraw-plugin/tree/master/images) explaining the scripts purpose. Remember a picture speaks thousand words!
+- An update to this file [ea-scripts/index.md](https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/index.md)
+
+---
+
+# List of available scripts
+- [[#Box Each Selected Groups]]
+- [[#Box Selected Elements]]
+- [[#Bullet Point]]
+- [[#Connect elements]]
+- [[#Convert text to link with folder and alias]]
+- [[#Copy Selected Element Styles to Global]]
+- [[#Create new markdown file and embed into active drawing]]
+- [[#Darken background color]]
+- [[#Dimensions]]
+- [[#Elbow connectors]]
+- [[#Expand rectangles horizontally keep text centered]]
+- [[#Expand rectangles horizontally]]
+- [[#Expand rectangles vertically keep text centered]]
+- [[#Expand rectangles vertically]]
+- [[#Fixed spacing]]
+- [[#Fixed vertical distance]]
+- [[#Font Family]]
+- [[#Grid]]
+- [[#Lighten background color]]
+- [[#Modify background color opacity]]
+- [[#Modify stroke width of selected elements]]
+- [[#OCR - Optical Character Recognition]]
+- [[#Reverse arrows]]
+- [[#Set Link Alias]]
+- [[#Split text by lines]]
+- [[#Text Align]]
+- [[#Transfer TextElements to Excalidraw markdown metadata]]
+- [[#Zoom to Fit Selected Elements]]
+
+## Box Each Selected Groups
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Box%20Each%20Selected%20Groups.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Box%20Each%20Selected%20Groups.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will add encapsulating boxes around each of the currently selected groups in Excalidraw.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-each-selected-groups.png'></td></tr></table>
+
+## Box Selected Elements
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Box%20Selected%20Elements.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Box%20Selected%20Elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will add an encapsulating box around the currently selected elements in Excalidraw.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-elements.jpg'></td></tr></table>
+
+## Bullet Point
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Bullet%20Point.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Bullet%20Point.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-bullet-point.jpg'></td></tr></table>
+
+## Connect elements
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Connect%20elements.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Connect%20elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-connect-elements.jpg'></td></tr></table>
+
+## Convert text to link with folder and alias
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Convert%20text%20to%20link%20with%20folder%20and%20alias.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Convert%20text%20to%20link%20with%20folder%20and%20alias.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Converts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.<br><code>original text</code> - <code>[[selected folder/original text|original text]]</code></td></tr></table>
+
+## Copy Selected Element Styles to Global
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Copy%20Selected%20Element%20Styles%20to%20Global.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Copy%20Selected%20Element%20Styles%20to%20Global.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will copy styles of any selected element into Excalidraw's global styles.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-copy-selected-element-styles-to-global.png'></td></tr></table>
+
+## Create new markdown file and embed into active drawing
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Create%20new%20markdown%20file%20and%20embed%20into%20active%20drawing.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Create%20new%20markdown%20file%20and%20embed%20into%20active%20drawing.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-create-and-embed-new-markdown-file.jpg'></td></tr></table>
+
+## Darken background color
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Darken%20background%20color.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Darken%20background%20color.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script darkens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect. In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png'></td></tr></table>
+
+## Dimensions
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Dimensions.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Dimensions.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Currently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-dimensions.jpg'></td></tr></table>
+
+## Elbow connectors
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Elbow%20connectors.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Elbow%20connectors.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script converts the selected connectors to elbows.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/elbow-connectors.png'></td></tr></table>
+
+## Expand rectangles horizontally keep text centered
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Expand%20rectangles%20horizontally%20keep%20text%20centered.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20horizontally%20keep%20text%20centered.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script expands the width of the selected rectangles until they are all the same width and keep the text centered.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif'></td></tr></table>
+
+## Expand rectangles horizontally
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Expand%20rectangles%20horizontally.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20horizontally.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script expands the width of the selected rectangles until they are all the same width.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif'></td></tr></table>
+
+## Expand rectangles vertically keep text centered
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Expand%20rectangles%20vertically%20keep%20text%20centered.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20vertically%20keep%20text%20centered.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script expands the height of the selected rectangles until they are all the same height and keep the text centered.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif'></td></tr></table>
+
+## Expand rectangles vertically
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Expand%20rectangles%20vertically.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Expand%20rectangles%20vertically.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script expands the height of the selected rectangles until they are all the same height.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif'></td></tr></table>
+
+## Fixed spacing
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Fixed%20spacing.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Fixed%20spacing.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script arranges the selected elements horizontally with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fix-space-demo.png'></td></tr></table>
+
+## Fixed vertical distance
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Fixed%20vertical%20distance.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Fixed%20vertical%20distance.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script arranges the selected elements vertically with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-fixed-vertical-distance.png'></td></tr></table>
+
+## Font Family
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Font%20Family.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Font%20Family.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Sets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-font-family.jpg'></td></tr></table>
+
+## Grid
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Grid.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Grid.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-grid.jpg'></td></tr></table>
+
+## Lighten background color
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Lighten%20background%20color.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Lighten%20background%20color.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png'></td></tr></table>
+
+## Modify background color opacity
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Modify%20background%20color%20opacity.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/1-2-3'>@1-2-3</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Modify%20background%20color%20opacity.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script changes the opacity of the background color of the selected boxes. The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-modify-background-color-opacity.png'></td></tr></table>
+
+## Modify stroke width of selected elements
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Modify%20stroke%20width%20of%20selected%20elements.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Modify%20stroke%20width%20of%20selected%20elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">This script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-stroke-width.jpg'></td></tr></table>
+
+## OCR - Optical Character Recognition
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/OCR%20-%20Optical%20Character%20Recognition.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/OCR%20-%20Optical%20Character%20Recognition.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">REQUIRES EXCALIDRAW 1.5.15<br>The script will  1) send the selected image file to [taskbone.com](https://taskbone.com) to exctract the text from the image, and 2) will add the text to your drawing as a text element.<br><mark>⚠ Note that you will need to manually paste your token into the script after the first run! ⚠</mark><br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-ocr.jpg'><br><iframe width="560" height="315" src="https://www.youtube.com/embed/W2NMzR8s4eE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></td></tr></table>
+
+## Reverse arrows
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Reverse%20arrows.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Reverse%20arrows.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Reverse the direction of **arrows** within the scope of selected elements.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-reverse-arrow.jpg'></td></tr></table>
+
+## Set Link Alias
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Set%20Link%20Alias.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Set%20Link%20Alias.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Iterates all of the links in the selected TextElements and prompts the user to set or modify the alias for each link found.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-set-link-alias.jpg'></td></tr></table>
+
+## Split text by lines
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Split%20text%20by%20lines.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Split%20text%20by%20lines.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Split lines of text into separate text elements for easier reorganization<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-split-lines.jpg'></td></tr></table>
+
+## Text Align
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Text%20Align.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Text%20Align.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg'></td></tr></table>
+
+## Transfer TextElements to Excalidraw markdown metadata
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Transfer%20TextElements%20to%20Excalidraw%20markdown%20metadata.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Transfer%20TextElements%20to%20Excalidraw%20markdown%20metadata.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">The script will delete the selected text elements from the canvas and will copy the text from these text elements into the Excalidraw markdown file as metadata. This means, that the text will no longer be visible in the drawing, however you will be able to search for the text in Obsidian and find the drawing containing this image.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-to-metadata.jpg'></td></tr></table>
+
+## Zoom to Fit Selected Elements
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Zoom%20to%20Fit%20Selected%20Elements.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Zoom%20to%20Fit%20Selected%20Elements.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Similar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)</td></tr></table>
--- a/esbuild.config.json
+++ b/esbuild.config.json
@@ -1,3 +1,4 @@
 {
-  "minify": true
+  "minifyWhitespace": true,
+  "minifySyntax":true
 }
--- a/images/darken-lighten-background-color.png
+++ b/images/darken-lighten-background-color.png
--- a/images/elbow-connectors.png
+++ b/images/elbow-connectors.png
--- a/images/hobby-programmer.svg
+++ b/images/hobby-programmer.svg
--- a/images/scripts-box-each-selected-groups.png
+++ b/images/scripts-box-each-selected-groups.png
--- a/images/scripts-box-elements.jpg
+++ b/images/scripts-box-elements.jpg
--- a/images/scripts-bullet-point.jpg
+++ b/images/scripts-bullet-point.jpg
--- a/images/scripts-connect-elements.jpg
+++ b/images/scripts-connect-elements.jpg
--- a/images/scripts-copy-selected-element-styles-to-global.png
+++ b/images/scripts-copy-selected-element-styles-to-global.png
--- a/images/scripts-create-and-embed-new-markdown-file.jpg
+++ b/images/scripts-create-and-embed-new-markdown-file.jpg
--- a/images/scripts-dimensions.jpg
+++ b/images/scripts-dimensions.jpg
--- a/images/scripts-download-raw.jpg
+++ b/images/scripts-download-raw.jpg
--- a/images/scripts-expand-rectangles.gif
+++ b/images/scripts-expand-rectangles.gif
--- a/images/scripts-fix-space-demo.png
+++ b/images/scripts-fix-space-demo.png
--- a/images/scripts-fixed-vertical-distance.png
+++ b/images/scripts-fixed-vertical-distance.png
--- a/images/scripts-font-family.jpg
+++ b/images/scripts-font-family.jpg
--- a/images/scripts-grid.jpg
+++ b/images/scripts-grid.jpg
--- a/images/scripts-modify-background-color-opacity.png
+++ b/images/scripts-modify-background-color-opacity.png
--- a/images/scripts-ocr.jpg
+++ b/images/scripts-ocr.jpg
--- a/images/scripts-reverse-arrow.jpg
+++ b/images/scripts-reverse-arrow.jpg
--- a/images/scripts-set-link-alias.jpg
+++ b/images/scripts-set-link-alias.jpg
--- a/images/scripts-split-lines.jpg
+++ b/images/scripts-split-lines.jpg
--- a/images/scripts-stroke-width.jpg
+++ b/images/scripts-stroke-width.jpg
--- a/images/scripts-text-align.jpg
+++ b/images/scripts-text-align.jpg
--- a/images/scripts-text-to-metadata.jpg
+++ b/images/scripts-text-to-metadata.jpg
--- a/manifest.json
+++ b/manifest.json
@@ -1,8 +1,8 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "1.1.10",
-	"minAppVersion": "0.11.13",
+	"version": "1.5.18",
+	"minAppVersion": "0.12.16",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",
 	"authorUrl": "https://zsolt.blog",
--- a/package.json
+++ b/package.json
@@ -1,39 +1,52 @@
 {
  "name": "obsidian-excalidraw-plugin",
-  "version": "1.1.10",
+  "version": "1.3.21",
  "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"
+    "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
+    "code:fix": "eslint --max-warnings=0 --ext .ts,.tsx ./src --fix"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
-    "@excalidraw/excalidraw": "^0.8.0",
+    "@zsviczian/excalidraw": "0.10.0-obsidian-34",
    "monkey-around": "^2.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
-    "react-scripts": "^1.1.5"
+    "react-scripts": "^1.1.5",
+    "roughjs": "4.4.1"
  },
  "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.3.1",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@rollup/plugin-babel": "^5.3.0",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-commonjs": "^21.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.5",
    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^8.2.1",
+    "@rollup/plugin-typescript": "^8.2.5",
+    "@types/js-beautify": "^1.13.3",
    "@types/node": "^15.12.4",
-    "@types/react-dom": "^17.0.8",
+    "@types/react-dom": "^17.0.9",
    "cross-env": "^7.0.3",
+    "html2canvas": "^1.3.2",
    "nanoid": "^3.1.23",
-    "obsidian": "https://github.com/obsidianmd/obsidian-api/tarball/master",
+    "obsidian": "^0.13.11",
    "rollup": "^2.52.3",
-    "rollup-plugin-visualizer": "^5.5.0",
-    "tslib": "^2.3.0",
-    "typescript": "^4.3.4"
-  }
+    "rollup-plugin-visualizer": "^5.5.2",
+    "tslib": "^2.3.1",
+    "typescript": "^4.4.3",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "3.3.1",
+    "prettier": "2.5.0",
+    "@excalidraw/eslint-config": "1.0.0",
+    "@excalidraw/prettier-config": "1.0.2"
+  },
+  "resolutions": {
+    "@typescript-eslint/typescript-estree": "5.3.0"
+  },
+  "prettier": "@excalidraw/prettier-config"
 }
--- a/src/EmbeddedFileLoader.ts
+++ b/src/EmbeddedFileLoader.ts
@@ -0,0 +1,556 @@
+import { FileId } from "@zsviczian/excalidraw/types/element/types";
+import { BinaryFileData, DataURL } from "@zsviczian/excalidraw/types/types";
+import { App, MarkdownRenderer, Notice, TFile } from "obsidian";
+import {
+  CASCADIA_FONT,
+  fileid,
+  FRONTMATTER_KEY_FONT,
+  FRONTMATTER_KEY_FONTCOLOR,
+  FRONTMATTER_KEY_MD_STYLE,
+  IMAGE_TYPES,
+  nanoid,
+  VIRGIL_FONT,
+} from "./constants";
+import { createSVG } from "./ExcalidrawAutomate";
+import { ExcalidrawData, getTransclusion } from "./ExcalidrawData";
+import { ExportSettings } from "./ExcalidrawView";
+import { t } from "./lang/helpers";
+import { tex2dataURL } from "./LaTeX";
+import ExcalidrawPlugin from "./main";
+import {
+  errorlog,
+  getDataURL,
+  getFontDataURL,
+  getImageSize,
+  getLinkParts,
+  LinkParts,
+  svgToBase64,
+} from "./Utils";
+
+export declare type MimeType =
+  | "image/svg+xml"
+  | "image/png"
+  | "image/jpeg"
+  | "image/gif"
+  | "application/octet-stream";
+export type FileData = BinaryFileData & {
+  size: Size;
+  hasSVGwithBitmap: boolean;
+};
+
+export type Size = {
+  height: number;
+  width: number;
+};
+
+export class EmbeddedFile {
+  public file: TFile = null;
+  public isSVGwithBitmap: boolean = false;
+  private img: string = ""; //base64
+  private imgInverted: string = ""; //base64
+  public mtime: number = 0; //modified time of the image
+  private plugin: ExcalidrawPlugin;
+  public mimeType: MimeType = "application/octet-stream";
+  public size: Size = { height: 0, width: 0 };
+  public linkParts: LinkParts;
+
+  constructor(plugin: ExcalidrawPlugin, hostPath: string, imgPath: string) {
+    this.plugin = plugin;
+    this.resetImage(hostPath, imgPath);
+  }
+
+  public resetImage(hostPath: string, imgPath: string) {
+    this.imgInverted = this.img = "";
+    this.mtime = 0;
+    this.linkParts = getLinkParts(imgPath);
+    if (!this.linkParts.path) {
+      new Notice(`Excalidraw Error\nIncorrect embedded filename: ${imgPath}`);
+      return;
+    }
+    if (!this.linkParts.width) {
+      this.linkParts.width = this.plugin.settings.mdSVGwidth;
+    }
+    if (!this.linkParts.height) {
+      this.linkParts.height = this.plugin.settings.mdSVGmaxHeight;
+    }
+    this.file = this.plugin.app.metadataCache.getFirstLinkpathDest(
+      this.linkParts.path,
+      hostPath,
+    );
+    if (!this.file) {
+      new Notice(
+        `Excalidraw Warning: could not find image file: ${imgPath}`,
+        5000,
+      );
+    }
+  }
+
+  private fileChanged(): boolean {
+    if (!this.file) {
+      return false;
+    }
+    return this.mtime != this.file.stat.mtime;
+  }
+
+  public setImage(
+    imgBase64: string,
+    mimeType: MimeType,
+    size: Size,
+    isDark: boolean,
+    isSVGwithBitmap: boolean,
+  ) {
+    if (!this.file) {
+      return;
+    }
+    if (this.fileChanged()) {
+      this.imgInverted = this.img = "";
+    }
+    this.mtime = this.file.stat.mtime;
+    this.size = size;
+    this.mimeType = mimeType;
+    switch (isDark && isSVGwithBitmap) {
+      case true:
+        this.imgInverted = imgBase64;
+        break;
+      case false:
+        this.img = imgBase64;
+        break; //bitmaps and SVGs without an embedded bitmap do not need a negative image
+    }
+    this.isSVGwithBitmap = isSVGwithBitmap;
+  }
+
+  public isLoaded(isDark: boolean): boolean {
+    if (!this.file) {
+      return true;
+    }
+    if (this.fileChanged()) {
+      return false;
+    }
+    if (this.isSVGwithBitmap && isDark) {
+      return this.imgInverted !== "";
+    }
+    return this.img !== "";
+  }
+
+  public getImage(isDark: boolean) {
+    if (!this.file) {
+      return "";
+    }
+    if (isDark && this.isSVGwithBitmap) {
+      return this.imgInverted;
+    }
+    return this.img; //images that are not SVGwithBitmap, only the light string is stored, since inverted and non-inverted are ===
+  }
+}
+
+export class EmbeddedFilesLoader {
+  private plugin: ExcalidrawPlugin;
+  private processedFiles: Map<string, number> = new Map<string, number>();
+  private isDark: boolean;
+  public terminate = false;
+  public uid: string;
+
+  constructor(plugin: ExcalidrawPlugin, isDark?: boolean) {
+    this.plugin = plugin;
+    this.isDark = isDark;
+    this.uid = nanoid();
+  }
+
+  public async getObsidianImage(inFile: TFile | EmbeddedFile): Promise<{
+    mimeType: MimeType;
+    fileId: FileId;
+    dataURL: DataURL;
+    created: number;
+    hasSVGwithBitmap: boolean;
+    size: { height: number; width: number };
+  }> {
+    if (!this.plugin || !inFile) {
+      return null;
+    }
+    const file: TFile = inFile instanceof EmbeddedFile ? inFile.file : inFile;
+    const linkParts =
+      inFile instanceof EmbeddedFile
+        ? inFile.linkParts
+        : {
+            original: file.path,
+            path: file.path,
+            isBlockRef: false,
+            ref: null,
+            width: this.plugin.settings.mdSVGwidth,
+            height: this.plugin.settings.mdSVGmaxHeight,
+          };
+    //to block infinite loop of recursive loading of images
+    const count = this.processedFiles.has(file.path)
+      ? this.processedFiles.get(file.path)
+      : 0;
+    if (file.extension === "md" && count > 2) {
+      new Notice(t("INFINITE_LOOP_WARNING") + file.path, 6000);
+      return null;
+    }
+    this.processedFiles.set(file.path, count + 1);
+    let hasSVGwithBitmap = false;
+    const app = this.plugin.app;
+    const isExcalidrawFile = this.plugin.isExcalidrawFile(file);
+    if (
+      !(
+        IMAGE_TYPES.contains(file.extension) ||
+        isExcalidrawFile ||
+        file.extension === "md"
+      )
+    ) {
+      return null;
+    }
+    const ab = await app.vault.readBinary(file);
+
+    const getExcalidrawSVG = async (isDark: boolean) => {
+      //debug({where:"EmbeddedFileLoader.getExcalidrawSVG",uid:this.uid,file:file.name});
+      const exportSettings: ExportSettings = {
+        withBackground: false,
+        withTheme: false,
+      };
+      const svg = await createSVG(
+        file.path,
+        true,
+        exportSettings,
+        this,
+        null,
+        null,
+        null,
+        [],
+        this.plugin,
+      );
+      //https://stackoverflow.com/questions/51154171/remove-css-filter-on-child-elements
+      const imageList = svg.querySelectorAll(
+        "image:not([href^='data:image/svg'])",
+      );
+      if (imageList.length > 0) {
+        hasSVGwithBitmap = true;
+      }
+      if (hasSVGwithBitmap && isDark) {
+        const THEME_FILTER = "invert(100%) hue-rotate(180deg) saturate(1.25)";
+        imageList.forEach((i) => {
+          const id = i.parentElement?.id;
+          svg.querySelectorAll(`use[href='#${id}']`).forEach((u) => {
+            u.setAttribute("filter", THEME_FILTER);
+          });
+        });
+      }
+      if (!hasSVGwithBitmap && svg.getAttribute("hasbitmap")) {
+        hasSVGwithBitmap = true;
+      }
+      const dURL = svgToBase64(svg.outerHTML) as DataURL;
+      return dURL as DataURL;
+    };
+
+    const excalidrawSVG = isExcalidrawFile
+      ? await getExcalidrawSVG(this.isDark)
+      : null;
+    let mimeType: MimeType = "image/svg+xml";
+    if (!isExcalidrawFile) {
+      switch (file.extension) {
+        case "png":
+          mimeType = "image/png";
+          break;
+        case "jpeg":
+          mimeType = "image/jpeg";
+          break;
+        case "jpg":
+          mimeType = "image/jpeg";
+          break;
+        case "gif":
+          mimeType = "image/gif";
+          break;
+        case "svg":
+        case "md":
+          mimeType = "image/svg+xml";
+          break;
+        default:
+          mimeType = "application/octet-stream";
+      }
+    }
+    const dataURL =
+      excalidrawSVG ??
+      (file.extension === "svg"
+        ? await getSVGData(app, file)
+        : file.extension === "md"
+        ? await convertMarkdownToSVG(this.plugin, file, linkParts)
+        : await getDataURL(ab, mimeType));
+    const size = await getImageSize(
+      excalidrawSVG ??
+        (file.extension === "md" ? dataURL : app.vault.getResourcePath(file)),
+    );
+    return {
+      mimeType,
+      fileId: await generateIdFromFile(ab),
+      dataURL,
+      created: file.stat.mtime,
+      hasSVGwithBitmap,
+      size,
+    };
+  }
+
+  public async loadSceneFiles(
+    excalidrawData: ExcalidrawData,
+    addFiles: Function,
+  ) {
+    const entries = excalidrawData.getFileEntries();
+    //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,isDark:this.isDark,sceneTheme:excalidrawData.scene.appState.theme});
+    if (this.isDark === undefined) {
+      this.isDark = excalidrawData.scene.appState.theme === "dark";
+    }
+    let entry;
+    const files: FileData[] = [];
+    while (!this.terminate && !(entry = entries.next()).done) {
+      const embeddedFile: EmbeddedFile = entry.value[1];
+      if (!embeddedFile.isLoaded(this.isDark)) {
+        //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"embedded Files are not loaded"});
+        const data = await this.getObsidianImage(embeddedFile);
+        if (data) {
+          files.push({
+            mimeType: data.mimeType,
+            id: entry.value[0],
+            dataURL: data.dataURL,
+            created: data.created,
+            size: data.size,
+            hasSVGwithBitmap: data.hasSVGwithBitmap,
+          });
+        }
+      } else if (embeddedFile.isSVGwithBitmap) {
+        files.push({
+          mimeType: embeddedFile.mimeType,
+          id: entry.value[0],
+          dataURL: embeddedFile.getImage(this.isDark) as DataURL,
+          created: embeddedFile.mtime,
+          size: embeddedFile.size,
+          hasSVGwithBitmap: embeddedFile.isSVGwithBitmap,
+        });
+      }
+    }
+
+    let equation;
+    const equations = excalidrawData.getEquationEntries();
+    while (!this.terminate && !(equation = equations.next()).done) {
+      if (!excalidrawData.getEquation(equation.value[0]).isLoaded) {
+        const latex = equation.value[1].latex;
+        const data = await tex2dataURL(latex, this.plugin);
+        if (data) {
+          files.push({
+            mimeType: data.mimeType,
+            id: equation.value[0],
+            dataURL: data.dataURL,
+            created: data.created,
+            size: data.size,
+            hasSVGwithBitmap: false,
+          });
+        }
+      }
+    }
+
+    if (this.terminate) {
+      return;
+    }
+    //debug({where:"EmbeddedFileLoader.loadSceneFiles",uid:this.uid,status:"add Files"});
+    try {
+      //in try block because by the time files are loaded the user may have closed the view
+      addFiles(files, this.isDark);
+    } catch (e) {
+      errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
+    }
+  }
+}
+
+const getSVGData = async (app: App, file: TFile): Promise<DataURL> => {
+  const svg = await app.vault.read(file);
+  return svgToBase64(svg) as DataURL;
+};
+
+const convertMarkdownToSVG = async (
+  plugin: ExcalidrawPlugin,
+  file: TFile,
+  linkParts: LinkParts,
+): Promise<DataURL> => {
+  //1.
+  //get the markdown text
+  let text = (await getTransclusion(linkParts, plugin.app, file)).contents;
+  if (text === "") {
+    text =
+      "# Empty markdown file\nCTRL+Click here to open the file for editing in the current active pane, or CTRL+SHIFT+Click to open it in an adjacent pane.";
+  }
+
+  //2.
+  //get styles
+  const fileCache = plugin.app.metadataCache.getFileCache(file);
+  let fontDef: string;
+  let fontName = plugin.settings.mdFont;
+  if (
+    fileCache?.frontmatter &&
+    fileCache.frontmatter[FRONTMATTER_KEY_FONT] != null
+  ) {
+    fontName = fileCache.frontmatter[FRONTMATTER_KEY_FONT];
+  }
+  switch (fontName) {
+    case "Virgil":
+      fontDef = VIRGIL_FONT;
+      break;
+    case "Cascadia":
+      fontDef = CASCADIA_FONT;
+      break;
+    case "":
+      fontDef = "";
+      break;
+    default:
+      const font = await getFontDataURL(plugin.app,fontName,file.path);
+      fontDef = font.fontDef;
+      fontName = font.fontName;
+  }
+
+  const fontColor = fileCache?.frontmatter
+    ? fileCache.frontmatter[FRONTMATTER_KEY_FONTCOLOR] ??
+      plugin.settings.mdFontColor
+    : plugin.settings.mdFontColor;
+
+  let style = fileCache?.frontmatter
+    ? fileCache.frontmatter[FRONTMATTER_KEY_MD_STYLE] ?? ""
+    : "";
+  let frontmatterCSSisAfile = false;
+  if (style && style != "") {
+    const f = plugin.app.metadataCache.getFirstLinkpathDest(style, file.path);
+    if (f) {
+      style = await plugin.app.vault.read(f);
+      frontmatterCSSisAfile = true;
+    }
+  }
+  if (
+    !frontmatterCSSisAfile &&
+    plugin.settings.mdCSS &&
+    plugin.settings.mdCSS != ""
+  ) {
+    const f = plugin.app.metadataCache.getFirstLinkpathDest(
+      plugin.settings.mdCSS,
+      file.path,
+    );
+    if (f) {
+      style += `\n${await plugin.app.vault.read(f)}`;
+    }
+  }
+
+  //3.
+  //SVG helper functions
+  //the SVG will first have ~infinite height. After sizing this will be reduced
+  let svgStyle = ` width="${linkParts.width}px" height="100000"`;
+  let foreignObjectStyle = ` width="${linkParts.width}px" height="100%"`;
+
+  const svg = (xml: string, xmlFooter: string, style?: string) =>
+    `<svg xmlns="http://www.w3.org/2000/svg"${svgStyle}>${
+      style ? `<style>${style}</style>` : ""
+    }<foreignObject x="0" y="0"${foreignObjectStyle}>${xml}${
+      xmlFooter //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/286#issuecomment-982179639
+    }</foreignObject>${
+      fontDef !== "" ? `<defs><style>${fontDef}</style></defs>` : ""
+    }</svg>`;
+
+  //4.
+  //create document div - this will be the contents of the foreign object
+  const mdDIV = createDiv();
+  mdDIV.setAttribute("xmlns", "http://www.w3.org/1999/xhtml");
+  mdDIV.setAttribute("class", "excalidraw-md-host");
+  //  mdDIV.setAttribute("style",style);
+  if (fontName !== "") {
+    mdDIV.style.fontFamily = fontName;
+  }
+  mdDIV.style.overflow = "auto";
+  mdDIV.style.display = "block";
+  if (fontColor && fontColor != "") {
+    mdDIV.style.color = fontColor;
+  }
+
+  await MarkdownRenderer.renderMarkdown(text, mdDIV, file.path, plugin);
+  mdDIV
+    .querySelectorAll(":scope > *[class^='frontmatter']")
+    .forEach((el) => mdDIV.removeChild(el));
+
+  //5.1
+  //get SVG size.
+  //First I need to create a fully self contained copy of the document to convert
+  //blank styles into inline styles using computedStyle
+  const iframeHost = document.body.createDiv();
+  iframeHost.style.display = "none";
+  const iframe = iframeHost.createEl("iframe");
+  const iframeDoc = iframe.contentWindow.document;
+  if (style) {
+    const styleEl = iframeDoc.createElement("style");
+    styleEl.type = "text/css";
+    styleEl.innerHTML = style;
+    iframeDoc.head.appendChild(styleEl);
+  }
+  const stylingDIV = iframeDoc.importNode(mdDIV, true);
+  iframeDoc.body.appendChild(stylingDIV);
+  const footerDIV = createDiv();
+  footerDIV.setAttribute("class", "excalidraw-md-footer");
+  iframeDoc.body.appendChild(footerDIV);
+
+  iframeDoc.body.querySelectorAll("*").forEach((el: HTMLElement) => {
+    const elementStyle = el.style;
+    const computedStyle = window.getComputedStyle(el);
+    let style = "";
+    for (const prop in elementStyle) {
+      if (elementStyle.hasOwnProperty(prop)) {
+        style += `${prop}: ${computedStyle[prop]};`;
+      }
+    }
+    el.setAttribute("style", style);
+  });
+
+  const xmlINiframe = new XMLSerializer().serializeToString(stylingDIV);
+  const xmlFooter = new XMLSerializer().serializeToString(footerDIV);
+  document.body.removeChild(iframeHost);
+
+  //5.2
+  //get SVG size
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(
+    svg(xmlINiframe, xmlFooter),
+    "image/svg+xml",
+  );
+  const svgEl = doc.firstElementChild;
+  const host = createDiv();
+  host.appendChild(svgEl);
+  document.body.appendChild(host);
+  const footerHeight = svgEl.querySelector(
+    ".excalidraw-md-footer",
+  ).scrollHeight;
+  const height =
+    svgEl.querySelector(".excalidraw-md-host").scrollHeight + footerHeight;
+  const svgHeight = height <= linkParts.height ? height : linkParts.height;
+  document.body.removeChild(host);
+
+  //finalize SVG
+  svgStyle = ` width="${linkParts.width}px" height="${svgHeight}px"`;
+  foreignObjectStyle = ` width="${linkParts.width}px" height="${svgHeight}px"`;
+  mdDIV.style.height = `${svgHeight - footerHeight}px`;
+  mdDIV.style.overflow = "hidden";
+  const xml = new XMLSerializer().serializeToString(mdDIV);
+  const finalSVG = svg(xml, '<div class="excalidraw-md-footer"></div>', style);
+  plugin.ea.mostRecentMarkdownSVG = parser.parseFromString(
+    finalSVG,
+    "image/svg+xml",
+  ).firstElementChild as SVGSVGElement;
+  return svgToBase64(finalSVG) as DataURL;
+};
+
+const generateIdFromFile = async (file: ArrayBuffer): Promise<FileId> => {
+  let id: FileId;
+  try {
+    const hashBuffer = await window.crypto.subtle.digest("SHA-1", file);
+    id =
+      // convert buffer to byte array
+      Array.from(new Uint8Array(hashBuffer))
+        // convert to hex string
+        .map((byte) => byte.toString(16).padStart(2, "0"))
+        .join("") as FileId;
+  } catch (error) {
+    errorlog({ where: "EmbeddedFileLoader.generateIdFromFile", error });
+    id = fileid() as FileId;
+  }
+  return id;
+};
--- a/src/ExcalidrawAutomate.ts
+++ b/src/ExcalidrawAutomate.ts
--- a/src/ExcalidrawData.ts
+++ b/src/ExcalidrawData.ts
--- a/src/ExcalidrawView.ts
+++ b/src/ExcalidrawView.ts
--- a/src/InsertImageDialog.ts
+++ b/src/InsertImageDialog.ts
@@ -0,0 +1,53 @@
+import { App, FuzzySuggestModal, TFile } from "obsidian";
+import { IMAGE_TYPES } from "./constants";
+import ExcalidrawView from "./ExcalidrawView";
+import { t } from "./lang/helpers";
+import ExcalidrawPlugin from "./main";
+
+export class InsertImageDialog extends FuzzySuggestModal<TFile> {
+  public app: App;
+  public plugin: ExcalidrawPlugin;
+  private view: ExcalidrawView;
+
+  constructor(plugin: ExcalidrawPlugin) {
+    super(plugin.app);
+    this.plugin = plugin;
+    this.app = plugin.app;
+    this.limit = 20;
+    this.setInstructions([
+      {
+        command: t("SELECT_FILE"),
+        purpose: "",
+      },
+    ]);
+    this.setPlaceholder(t("SELECT_DRAWING"));
+    this.emptyStateText = t("NO_MATCH");
+  }
+
+  getItems(): TFile[] {
+    return (this.app.vault.getFiles() || []).filter(
+      (f: TFile) =>
+        IMAGE_TYPES.contains(f.extension) || this.plugin.isExcalidrawFile(f),
+    );
+  }
+
+  getItemText(item: TFile): string {
+    return item.path;
+  }
+
+  onChooseItem(item: TFile): void {
+    const ea = this.plugin.ea;
+    ea.reset();
+    ea.setView(this.view);
+    ea.canvas.theme = this.view.excalidrawAPI.getAppState().theme;
+    (async () => {
+      await ea.addImage(0, 0, item);
+      ea.addElementsToView(true, false);
+    })();
+  }
+
+  public start(view: ExcalidrawView) {
+    this.view = view;
+    this.open();
+  }
+}
--- a/src/InsertLinkDialog.ts
+++ b/src/InsertLinkDialog.ts
@@ -0,0 +1,49 @@
+import { App, FuzzySuggestModal, TFile } from "obsidian";
+import { t } from "./lang/helpers";
+
+export class InsertLinkDialog extends FuzzySuggestModal<TFile> {
+  public app: App;
+  private addText: Function;
+  private drawingPath: string;
+
+  constructor(app: App) {
+    super(app);
+    this.app = app;
+    this.limit = 20;
+    this.setInstructions([
+      {
+        command: t("SELECT_FILE"),
+        purpose: "",
+      },
+    ]);
+    this.setPlaceholder(t("SELECT_FILE_TO_LINK"));
+    this.emptyStateText = t("NO_MATCH");
+  }
+
+  getItems(): any[] {
+    //@ts-ignore
+    return this.app.metadataCache.getLinkSuggestions();
+  }
+
+  getItemText(item: any): string {
+    return item.path + (item.alias ? `|${item.alias}` : "");
+  }
+
+  onChooseItem(item: any): void {
+    let filepath = item.path;
+    if (item.file) {
+      filepath = this.app.metadataCache.fileToLinktext(
+        item.file,
+        this.drawingPath,
+        true,
+      );
+    }
+    this.addText(`[[${filepath + (item.alias ? `|${item.alias}` : "")}]]`);
+  }
+
+  public start(drawingPath: string, addText: Function) {
+    this.addText = addText;
+    this.drawingPath = drawingPath;
+    this.open();
+  }
+}
--- a/src/InsertMDDialog.ts
+++ b/src/InsertMDDialog.ts
@@ -0,0 +1,50 @@
+import { App, FuzzySuggestModal, TFile } from "obsidian";
+import ExcalidrawView from "./ExcalidrawView";
+import { t } from "./lang/helpers";
+import ExcalidrawPlugin from "./main";
+
+export class InsertMDDialog extends FuzzySuggestModal<TFile> {
+  public app: App;
+  public plugin: ExcalidrawPlugin;
+  private view: ExcalidrawView;
+
+  constructor(plugin: ExcalidrawPlugin) {
+    super(plugin.app);
+    this.plugin = plugin;
+    this.app = plugin.app;
+    this.limit = 20;
+    this.setInstructions([
+      {
+        command: t("SELECT_FILE"),
+        purpose: "",
+      },
+    ]);
+    this.setPlaceholder(t("SELECT_MD"));
+    this.emptyStateText = t("NO_MATCH");
+  }
+
+  getItems(): TFile[] {
+    return (this.app.vault.getFiles() || []).filter(
+      (f: TFile) => f.extension === "md" && !this.plugin.isExcalidrawFile(f),
+    );
+  }
+
+  getItemText(item: TFile): string {
+    return item.path;
+  }
+
+  onChooseItem(item: TFile): void {
+    const ea = this.plugin.ea;
+    ea.reset();
+    ea.setView(this.view);
+    (async () => {
+      await ea.addImage(0, 0, item);
+      ea.addElementsToView(true, false);
+    })();
+  }
+
+  public start(view: ExcalidrawView) {
+    this.view = view;
+    this.open();
+  }
+}
--- a/src/LaTeX.ts
+++ b/src/LaTeX.ts
@@ -0,0 +1,114 @@
+import { DataURL } from "@zsviczian/excalidraw/types/types";
+import ExcalidrawView from "./ExcalidrawView";
+import ExcalidrawPlugin from "./main";
+import { FileData, MimeType } from "./EmbeddedFileLoader";
+import { FileId } from "@zsviczian/excalidraw/types/element/types";
+import { getImageSize, sleep, svgToBase64 } from "./Utils";
+import { fileid } from "./constants";
+import html2canvas from "html2canvas";
+
+declare let window: any;
+
+export const updateEquation = async (
+  equation: string,
+  fileId: string,
+  view: ExcalidrawView,
+  addFiles: Function,
+  plugin: ExcalidrawPlugin,
+) => {
+  const data = await tex2dataURL(equation, plugin);
+  if (data) {
+    const files: FileData[] = [];
+    files.push({
+      mimeType: data.mimeType,
+      id: fileId as FileId,
+      dataURL: data.dataURL,
+      created: data.created,
+      size: data.size,
+      hasSVGwithBitmap: false,
+    });
+    addFiles(files, view);
+  }
+};
+
+export async function tex2dataURL(
+  tex: string,
+  plugin: ExcalidrawPlugin,
+): Promise<{
+  mimeType: MimeType;
+  fileId: FileId;
+  dataURL: DataURL;
+  created: number;
+  size: { height: number; width: number };
+}> {
+  //if network is slow, or not available, or mathjax has not yet fully loaded
+  try {
+    return await mathjaxSVG(tex, plugin);
+  } catch (e) {
+    await sleep(200); //grace period for mathjax to load, if not, then we go for the slower fallback
+    try {
+      return await mathjaxSVG(tex, plugin);
+    } catch (e) {
+      //fallback
+      return await mathjaxImage2html(tex);
+    }
+  }
+}
+
+async function mathjaxSVG(
+  tex: string,
+  plugin: ExcalidrawPlugin,
+): Promise<{
+  mimeType: MimeType;
+  fileId: FileId;
+  dataURL: DataURL;
+  created: number;
+  size: { height: number; width: number };
+}> {
+  const eq = plugin.mathjax.tex2svg(tex, { display: true, scale: 4 });
+  const svg = eq.querySelector("svg");
+  if (svg) {
+    const dataURL = svgToBase64(svg.outerHTML);
+    return {
+      mimeType: "image/svg+xml",
+      fileId: fileid() as FileId,
+      dataURL: dataURL as DataURL,
+      created: Date.now(),
+      size: await getImageSize(dataURL),
+    };
+  }
+  return null;
+}
+
+async function mathjaxImage2html(tex: string): Promise<{
+  mimeType: MimeType;
+  fileId: FileId;
+  dataURL: DataURL;
+  created: number;
+  size: { height: number; width: number };
+}> {
+  const div = document.body.createDiv();
+  div.style.display = "table"; //this will ensure div fits width of formula exactly
+  //@ts-ignore
+
+  const eq = window.MathJax.tex2chtml(tex, { display: true, scale: 4 }); //scale to ensure good resolution
+  eq.style.margin = "3px";
+  eq.style.color = "black";
+
+  //ipad support - removing mml as that was causing phantom double-image blur.
+  const el = eq.querySelector("mjx-assistive-mml");
+  if (el) {
+    el.parentElement.removeChild(el);
+  }
+  div.appendChild(eq);
+  window.MathJax.typeset();
+  const canvas = await html2canvas(div, { backgroundColor: null }); //transparent
+  document.body.removeChild(div);
+  return {
+    mimeType: "image/png",
+    fileId: fileid() as FileId,
+    dataURL: canvas.toDataURL() as DataURL,
+    created: Date.now(),
+    size: { height: canvas.height, width: canvas.width },
+  };
+}
--- a/src/MarkdownPostProcessor.ts
+++ b/src/MarkdownPostProcessor.ts
@@ -0,0 +1,484 @@
+import { settings } from "cluster";
+import { MarkdownPostProcessorContext, MetadataCache, TFile, Vault } from "obsidian";
+import { CTRL_OR_CMD, RERENDER_EVENT } from "./constants";
+import { EmbeddedFilesLoader } from "./EmbeddedFileLoader";
+import { createPNG, createSVG } from "./ExcalidrawAutomate";
+import { ExportSettings } from "./ExcalidrawView";
+import ExcalidrawPlugin from "./main";
+import { embedFontsInSVG, getIMGFilename, isObsidianThemeDark, splitFolderAndFilename, svgToBase64 } from "./Utils";
+
+interface imgElementAttributes {
+  file?: TFile;
+  fname: string; //Excalidraw filename
+  fwidth: string; //Display width of image
+  fheight: string; //Display height of image
+  style: string; //css style to apply to IMG element
+}
+
+let plugin: ExcalidrawPlugin;
+let vault: Vault;
+let metadataCache: MetadataCache;
+
+export const initializeMarkdownPostProcessor = (p:ExcalidrawPlugin) => {
+  plugin = p;
+  vault = p.app.vault;
+  metadataCache = p.app.metadataCache;
+}
+
+
+
+/**
+ * Generates an img element with the drawing encoded as a base64 SVG or a PNG (depending on settings)
+ * @param parts {imgElementAttributes} - display properties of the image
+ * @returns {Promise<HTMLElement>} - the IMG HTML element containing the image
+ */
+const getIMG = async (
+  imgAttributes: imgElementAttributes,
+): Promise<HTMLElement> => {
+  let file = imgAttributes.file;
+  if (!imgAttributes.file) {
+    const f = vault.getAbstractFileByPath(imgAttributes.fname);
+    if (!(f && f instanceof TFile)) {
+      return null;
+    }
+    file = f;
+  }
+
+  const exportSettings: ExportSettings = {
+    withBackground: plugin.settings.exportWithBackground,
+    withTheme: plugin.settings.exportWithTheme,
+  };
+  const img = createEl("img");
+  let style = `max-width:${imgAttributes.fwidth}px !important; width:100%;`;
+  if (imgAttributes.fheight) {
+    style += `height:${imgAttributes.fheight}px;`;
+  }
+  img.setAttribute("style", style);
+  img.addClass(imgAttributes.style);
+
+  const theme = plugin.settings.previewMatchObsidianTheme
+    ? isObsidianThemeDark()
+      ? "dark"
+      : "light"
+    : !plugin.settings.exportWithTheme
+    ? "light"
+    : undefined;
+  if (theme) {
+    exportSettings.withTheme = true;
+  }
+  const loader = new EmbeddedFilesLoader(
+    plugin,
+    theme ? theme === "dark" : undefined,
+  );
+
+  if (!plugin.settings.displaySVGInPreview) {
+    const width = parseInt(imgAttributes.fwidth);
+    let scale = 1;
+    if (width >= 600) {
+      scale = 2;
+    }
+    if (width >= 1200) {
+      scale = 3;
+    }
+    if (width >= 1800) {
+      scale = 4;
+    }
+    if (width >= 2400) {
+      scale = 5;
+    }
+    const png = await createPNG(
+      file.path,
+      scale,
+      exportSettings,
+      loader,
+      theme,
+      null,
+      null,
+      [],
+      plugin,
+    );
+    //const png = await getPNG(JSON_parse(scene),exportSettings, scale);
+    if (!png) {
+      return null;
+    }
+    img.src = URL.createObjectURL(png);
+    return img;
+  }
+  const svgSnapshot = (
+    await createSVG(
+      file.path,
+      true,
+      exportSettings,
+      loader,
+      theme,
+      null,
+      null,
+      [],
+      plugin,
+    )
+  ).outerHTML;
+  let svg: SVGSVGElement = null;
+  const el = document.createElement("div");
+  el.innerHTML = svgSnapshot;
+  const firstChild = el.firstChild;
+  if (firstChild instanceof SVGSVGElement) {
+    svg = firstChild;
+  }
+  if (!svg) {
+    return null;
+  }
+  svg = embedFontsInSVG(svg,plugin);
+  svg.removeAttribute("width");
+  svg.removeAttribute("height");
+  img.setAttribute("src", svgToBase64(svg.outerHTML));
+  return img;
+};
+
+const createImageDiv = async (
+  attr: imgElementAttributes,
+): Promise<HTMLDivElement> => {
+  const img = await getIMG(attr);
+  return createDiv(attr.style, (el) => {
+    el.append(img);
+    el.setAttribute("src", attr.file.path);
+    if (attr.fwidth) {
+      el.setAttribute("w", attr.fwidth);
+    }
+    if (attr.fheight) {
+      el.setAttribute("h", attr.fheight);
+    }
+    el.onClickEvent((ev) => {
+      if (
+        ev.target instanceof Element &&
+        ev.target.tagName.toLowerCase() != "img"
+      ) {
+        return;
+      }
+      const src = el.getAttribute("src");
+      if (src) {
+        plugin.openDrawing(
+          vault.getAbstractFileByPath(src) as TFile,
+          ev[CTRL_OR_CMD],
+        );
+      } //.ctrlKey||ev.metaKey);
+    });
+    el.addEventListener(RERENDER_EVENT, async (e) => {
+      e.stopPropagation();
+      el.empty();
+      const img = await getIMG({
+        fname: el.getAttribute("src"),
+        fwidth: el.getAttribute("w"),
+        fheight: el.getAttribute("h"),
+        style: el.getAttribute("class"),
+      });
+      el.append(img);
+    });
+  });
+};
+
+
+
+const processInternalEmbeds = async (
+  embeddedItems:NodeListOf<Element>|[HTMLElement],
+  ctx: MarkdownPostProcessorContext,
+) => {
+  //if not, then we are processing a non-excalidraw file in reading mode
+  //in that cases embedded files will be displayed in an .internal-embed container
+  const attr: imgElementAttributes = {
+    fname: "",
+    fheight: "",
+    fwidth: "",
+    style: "",
+  };
+  let alt: string;
+  let parts;
+  let file: TFile;
+
+  //Iterating through all the containers to check which one is an excalidraw drawing
+  //This is a for loop instead of embeddedItems.forEach() because createImageDiv at the end
+  //is awaited, otherwise excalidraw images would not display in the Kanban plugin
+  for (const maybeDrawing of embeddedItems) {
+    //check to see if the file in the src attribute exists
+    attr.fname = maybeDrawing.getAttribute("src");
+    file = metadataCache.getFirstLinkpathDest(
+      attr.fname?.split("#")[0],
+      ctx.sourcePath,
+    );
+
+    //if the embeddedFile exits and it is an Excalidraw file
+    //then lets replace the .internal-embed with the generated PNG or SVG image
+    if (file && file instanceof TFile && plugin.isExcalidrawFile(file)) {
+      attr.fwidth = maybeDrawing.getAttribute("width")
+        ? maybeDrawing.getAttribute("width")
+        : plugin.settings.width;
+      attr.fheight = maybeDrawing.getAttribute("height");
+      alt = maybeDrawing.getAttribute("alt");
+      if (alt == attr.fname) {
+        alt = "";
+      } //when the filename starts with numbers followed by a space Obsidian recognizes the filename as alt-text
+      attr.style = "excalidraw-svg";
+      if (alt) {
+        //for some reason Obsidian renders ![]() in a DIV and ![[]] in a SPAN
+        //also the alt-text of the DIV does not include the alt-text of the image
+        //thus need to add an additional "|" character when its a SPAN
+        if (maybeDrawing.tagName.toLowerCase() == "span") {
+          alt = `|${alt}`;
+        }
+        //1:width, 2:height, 3:style  1      2      3
+        parts = alt.match(/[^\|]*\|?(\d*%?)x?(\d*%?)\|?(.*)/);
+        attr.fwidth = parts[1] ? parts[1] : plugin.settings.width;
+        attr.fheight = parts[2];
+        if (parts[3] != attr.fname) {
+          attr.style = `excalidraw-svg${parts[3] ? `-${parts[3]}` : ""}`;
+        }
+      }
+
+      attr.fname = file?.path;
+      attr.file = file;
+      const div = await createImageDiv(attr);
+      maybeDrawing.parentElement.replaceChild(div, maybeDrawing);
+    }
+  }
+}    
+
+
+const tmpObsidianWYSIWYG = async (
+  el: HTMLElement,
+  ctx: MarkdownPostProcessorContext,
+) => {
+  if (!ctx.frontmatter) {
+    return;
+  }
+  if (!ctx.frontmatter.hasOwnProperty("excalidraw-plugin")) {
+    return;
+  }
+  //@ts-ignore
+  if (ctx.remainingNestLevel < 4) {
+    return;
+  }
+  if (!el.querySelector(".frontmatter")) {
+    el.style.display = "none";
+    return;
+  }
+  const attr: imgElementAttributes = {
+    fname: ctx.sourcePath,
+    fheight: "",
+    fwidth: plugin.settings.width,
+    style: "excalidraw-svg",
+  };
+
+  attr.file = metadataCache.getFirstLinkpathDest(
+    ctx.sourcePath,
+    "",
+  );
+
+  el.empty();
+
+  if(!plugin.settings.experimentalLivePreview) {
+    el.appendChild(await createImageDiv(attr));
+    return;
+  }
+
+  const div = createDiv();
+  el.appendChild(div);
+
+  //The timeout gives time for obsidian to attach el to the displayed document
+  //Once the element is attached, I can traverse up the dom tree to find .internal-embed 
+  //If internal embed is not found, it means the that the excalidraw.md file
+  //is being rendered in "reading" mode. In that case, the image with the default width
+  //specified in setting should be displayed
+  //if .internal-embed is found, then contents is replaced with the image using the
+  //alt, width, and height attributes of .internal-embed to size and style the image
+  setTimeout(async ()=>{
+    let internalEmbedDiv:HTMLElement = div;
+    while(!internalEmbedDiv.hasClass("internal-embed") && internalEmbedDiv.parentElement) {
+      internalEmbedDiv = internalEmbedDiv.parentElement;
+    }
+
+    if(!internalEmbedDiv.hasClass("internal-embed")) {
+      el.empty();
+      el.appendChild(await createImageDiv(attr));
+      return;
+    }
+
+    internalEmbedDiv.empty();
+    
+    const basename = splitFolderAndFilename(attr.fname).basename;
+    const setAttr = () => {
+      const hasWidth = internalEmbedDiv.getAttribute("width")!=="";
+      const hasHeight = internalEmbedDiv.getAttribute("height")!=="";          
+      if(hasWidth) 
+        attr.fwidth = internalEmbedDiv.getAttribute("width");
+      if(hasHeight) 
+        attr.fheight = internalEmbedDiv.getAttribute("height");
+      const alt = internalEmbedDiv.getAttribute("alt");
+      const hasAttr = alt 
+        && alt !== "" 
+        && alt !== basename
+        && alt !== internalEmbedDiv.getAttribute("src");
+      if(hasAttr) {
+        //1:width, 2:height, 3:style  1      2      3
+        const parts = alt.match(/(\d*%?)x?(\d*%?)\|?(.*)/);
+        attr.fwidth = parts[1] ? parts[1] : plugin.settings.width;
+        attr.fheight = parts[2];
+        if (parts[3] != attr.fname) {
+          attr.style = `excalidraw-svg${parts[3] ? `-${parts[3]}` : ""}`;
+        }
+      }
+      if(!hasWidth && !hasHeight && !hasAttr) {
+        attr.fheight = "";
+        attr.fwidth = plugin.settings.width;
+        attr.style = "excalidraw-svg";
+      }
+    }
+
+    const createImgElement = async () => {
+      setAttr();
+      const imgDiv = await createImageDiv(attr);
+      internalEmbedDiv.appendChild(imgDiv);
+    }
+    await createImgElement();
+
+    //timer to avoid the image flickering when the user is typing
+    let timer:NodeJS.Timeout = null;
+    const observer = new MutationObserver((m) => {
+      if(!["alt","width","height"].contains(m[0]?.attributeName)) {
+        return;
+      }
+      if(timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        setAttr();
+        internalEmbedDiv.empty();
+        createImgElement();
+      },500);
+    });
+    observer.observe(internalEmbedDiv, {
+      attributes: true, //configure it to listen to attribute changes
+    });
+  },300);
+};
+
+
+/**
+ *
+ * @param el
+ * @param ctx
+ */
+export const markdownPostProcessor = async (
+  el: HTMLElement,
+  ctx: MarkdownPostProcessorContext,
+) => {
+  //check to see if we are rendering in editing mode of live preview
+  //if yes, then there should be no .internal-embed containers
+  const embeddedItems = el.querySelectorAll(".internal-embed");
+  if (embeddedItems.length === 0) {
+    tmpObsidianWYSIWYG(el, ctx);
+    return;
+  }
+
+  //If the file being processed is an excalidraw file,
+  //then I want to hide all embedded items as these will be
+  //transcluded text element or some other transcluded content inside the Excalidraw file
+  //in reading mode these elements should be hidden
+  if (ctx.frontmatter?.hasOwnProperty("excalidraw-plugin")) {
+    el.style.display = "none";
+    return;
+  }
+
+  await processInternalEmbeds( embeddedItems,ctx);
+
+};
+
+/**
+ * internal-link quick preview
+ * @param e
+ * @returns
+ */
+export const hoverEvent = (e: any) => {
+  if (!e.linktext) {
+    plugin.hover.linkText = null;
+    return;
+  }
+  plugin.hover.linkText = e.linktext;
+  plugin.hover.sourcePath = e.sourcePath;
+};
+
+//monitoring for div.popover.hover-popover.file-embed.is-loaded to be added to the DOM tree
+export const observer = new MutationObserver(async (m) => {
+  if (m.length == 0) {
+    return;
+  }
+  if (!plugin.hover.linkText) {
+    return;
+  }
+  const file = metadataCache.getFirstLinkpathDest(
+    plugin.hover.linkText,
+    plugin.hover.sourcePath ? plugin.hover.sourcePath : "",
+  );
+  if (!file) {
+    return;
+  }
+  if (!(file instanceof TFile)) {
+    return;
+  }
+  if (file.extension !== "excalidraw") {
+    return;
+  }
+
+  const svgFileName = getIMGFilename(file.path, "svg");
+  const svgFile = vault.getAbstractFileByPath(svgFileName);
+  if (svgFile && svgFile instanceof TFile) {
+    return;
+  } //If auto export SVG or PNG is enabled it will be inserted at the top of the excalidraw file. No need to manually insert hover preview
+
+  const pngFileName = getIMGFilename(file.path, "png");
+  const pngFile = vault.getAbstractFileByPath(pngFileName);
+  if (pngFile && pngFile instanceof TFile) {
+    return;
+  } //If auto export SVG or PNG is enabled it will be inserted at the top of the excalidraw file. No need to manually insert hover preview
+
+  if (!plugin.hover.linkText) {
+    return;
+  }
+  if (m.length != 1) {
+    return;
+  }
+  if (m[0].addedNodes.length != 1) {
+    return;
+  }
+  if (
+    //@ts-ignore
+    m[0].addedNodes[0].className !=
+    "popover hover-popover file-embed is-loaded"
+  ) {
+    return;
+  }
+  const node = m[0].addedNodes[0];
+  node.empty();
+
+  //this div will be on top of original DIV. By stopping the propagation of the click
+  //I prevent the default Obsidian feature of openning the link in the native app
+  const img = await getIMG({
+    file,
+    fname: file.path,
+    fwidth: "300",
+    fheight: null,
+    style: "excalidraw-svg",
+  });
+  const div = createDiv("", async (el) => {
+    el.appendChild(img);
+    el.setAttribute("src", file.path);
+    el.onClickEvent((ev) => {
+      ev.stopImmediatePropagation();
+      const src = el.getAttribute("src");
+      if (src) {
+        plugin.openDrawing(
+          vault.getAbstractFileByPath(src) as TFile,
+          ev[CTRL_OR_CMD],
+        );
+      } //.ctrlKey||ev.metaKey);
+    });
+  });
+  node.appendChild(div);
+});
--- a/src/MigrationPrompt.ts
+++ b/src/MigrationPrompt.ts
@@ -1,44 +0,0 @@
-import { App, Modal } from "obsidian";
-import { t } from "./lang/helpers";
-import ExcalidrawPlugin from "./main";
-
-export class MigrationPrompt extends Modal {
-  private plugin: ExcalidrawPlugin;
-
-  constructor(app: App, plugin:ExcalidrawPlugin) {
-    super(app);
-    this.plugin = plugin;
-  }
-
-  onOpen(): void {
-    this.titleEl.setText("Welcome to Excalidraw 1.2");       
-    this.createForm();
-  }
-
-  onClose(): void {
-    this.contentEl.empty();
-  }
-
-  createForm(): void {
-    const div = this.contentEl.createDiv();
-    div.addClass("excalidarw-prompt-div");
-    div.style.maxWidth = "600px";
-    div.createEl('p',{text: "This version comes with many new features and possibilities. Please read the description in Community Plugins to find out more."});
-    div.createEl('p',{text: "⚠ WARNING: Drawings you have created with version 1.1.x need to be converted, they WILL NOT WORK out of the box. "+
-                            "During conversion your old *.excalidraw files will be replaced with new *.excalidraw.md files."});
-    div.createEl('p',{text: "Click CONVERT to convert all of your *.excalidraw files now, or if you prefer to make a backup first, then select CANCEL."});
-    div.createEl('p',{text: "To convert files manually, select 'Excalidraw: Convert *.excalidraw files to *.md files' from the Command Palette at any time in the future."});
-    div.createEl('p',{text: "This message will only appear maximum 3 times."});
-    const bConvert = div.createEl('button', {text: "CONVERT FILES"});
-    bConvert.onclick = (ev)=>{
-      this.plugin.convertExcalidrawToMD();   
-      this.close();
-    };
-    const bCancel = div.createEl('button', {text: "CANCEL"});
-    bCancel.onclick = (ev)=>{
-      this.close();
-    };
-
-  }
-
-}
--- a/src/OneOffs.ts
+++ b/src/OneOffs.ts
@@ -0,0 +1,371 @@
+import { App, Modal, TFile } from "obsidian";
+import { FRONTMATTER_KEY } from "./constants";
+import { ExcalidrawData, getJSON } from "./ExcalidrawData";
+import { getTextMode, TextMode } from "./ExcalidrawView";
+import ExcalidrawPlugin from "./main";
+import { errorlog, log } from "./Utils";
+
+export class OneOffs {
+  private plugin: ExcalidrawPlugin;
+
+  constructor(plugin: ExcalidrawPlugin) {
+    this.plugin = plugin;
+  }
+
+  public patchCommentBlock() {
+    //This is a once off cleanup process to remediate incorrectly placed comment %% before # Text Elements
+    if (!this.plugin.settings.patchCommentBlock) {
+      return;
+    }
+    const plugin = this.plugin;
+
+    log(
+      `${window
+        .moment()
+        .format("HH:mm:ss")}: Excalidraw will patch drawings in 5 minutes`,
+    );
+    setTimeout(async () => {
+      await plugin.loadSettings();
+      if (!plugin.settings.patchCommentBlock) {
+        log(
+          `${window
+            .moment()
+            .format(
+              "HH:mm:ss",
+            )}: Excalidraw patching aborted because synched data.json is already patched`,
+        );
+        return;
+      }
+      log(
+        `${window
+          .moment()
+          .format("HH:mm:ss")}: Excalidraw is starting the patching process`,
+      );
+      let i = 0;
+      const excalidrawFiles = plugin.app.vault.getFiles();
+      for (const f of (excalidrawFiles || []).filter((f: TFile) =>
+        plugin.isExcalidrawFile(f),
+      )) {
+        if (
+          f.extension !== "excalidraw" && //legacy files do not need to be touched
+          plugin.app.workspace.getActiveFile() !== f
+        ) {
+          //file is currently being edited
+          let drawing = await plugin.app.vault.read(f);
+          const orig_drawing = drawing;
+          drawing = drawing.replaceAll("\r\n", "\n").replaceAll("\r", "\n"); //Win, Mac, Linux compatibility
+          drawing = drawing.replace(
+            "\n%%\n# Text Elements\n",
+            "\n# Text Elements\n",
+          );
+          if (drawing.search("\n%%\n# Drawing\n") === -1) {
+            const sceneJSONandPOS = getJSON(drawing);
+            drawing = `${drawing.substr(
+              0,
+              sceneJSONandPOS.pos,
+            )}\n%%\n# Drawing\n\`\`\`json\n${sceneJSONandPOS.scene}\n\`\`\`%%`;
+          }
+          if (drawing !== orig_drawing) {
+            i++;
+            log(`Excalidraw patched: ${f.path}`);
+            await plugin.app.vault.modify(f, drawing);
+          }
+        }
+      }
+      plugin.settings.patchCommentBlock = false;
+      plugin.saveSettings();
+      log(
+        `${window
+          .moment()
+          .format("HH:mm:ss")}: Excalidraw patched in total ${i} files`,
+      );
+    }, 300000); //5 minutes
+  }
+
+  public migrationNotice() {
+    if (this.plugin.settings.loadCount > 0) {
+      return;
+    }
+    const plugin = this.plugin;
+
+    plugin.app.workspace.onLayoutReady(async () => {
+      plugin.settings.loadCount++;
+      plugin.saveSettings();
+      const files = plugin.app.vault
+        .getFiles()
+        .filter((f) => f.extension === "excalidraw");
+      if (files.length > 0) {
+        const prompt = new MigrationPrompt(plugin.app, plugin);
+        prompt.open();
+      }
+    });
+  }
+
+  public imageElementLaunchNotice() {
+    if (!this.plugin.settings.imageElementNotice) {
+      return;
+    }
+    const plugin = this.plugin;
+
+    plugin.app.workspace.onLayoutReady(async () => {
+      const prompt = new ImageElementNotice(plugin.app, plugin);
+      prompt.open();
+    });
+  }
+
+  public wysiwygPatch() {
+    if (this.plugin.settings.patchCommentBlock) {
+      return;
+    } //the comment block patch needs to happen first (unlikely that someone has waited this long with the update...)
+    //This is a once off process to patch excalidraw files remediate incorrectly placed comment %% before # Text Elements
+    if (
+      !(
+        this.plugin.settings.runWYSIWYGpatch ||
+        this.plugin.settings.fixInfinitePreviewLoop
+      )
+    ) {
+      return;
+    }
+    const plugin = this.plugin;
+
+    log(
+      `${window
+        .moment()
+        .format(
+          "HH:mm:ss",
+        )}: Excalidraw will patch drawings to support WYSIWYG in 7 minutes`,
+    );
+    setTimeout(async () => {
+      await plugin.loadSettings();
+      if (
+        !(
+          this.plugin.settings.runWYSIWYGpatch ||
+          this.plugin.settings.fixInfinitePreviewLoop
+        )
+      ) {
+        log(
+          `${window
+            .moment()
+            .format(
+              "HH:mm:ss",
+            )}: Excalidraw patching aborted because synched data.json is already patched`,
+        );
+        return;
+      }
+      log(
+        `${window
+          .moment()
+          .format("HH:mm:ss")}: Excalidraw is starting the patching process`,
+      );
+      let i = 0;
+      const excalidrawFiles = plugin.app.vault.getFiles();
+      for (const f of (excalidrawFiles || []).filter((f: TFile) =>
+        plugin.isExcalidrawFile(f),
+      )) {
+        if (
+          f.extension !== "excalidraw" && //legacy files do not need to be touched
+          plugin.app.workspace.getActiveFile() !== f
+        ) {
+          //file is currently being edited
+          try {
+            const excalidrawData = new ExcalidrawData(plugin);
+            const data = await plugin.app.vault.read(f);
+            const textMode = getTextMode(data);
+            await excalidrawData.loadData(data, f, textMode);
+
+            let trimLocation = data.search(/(^%%\n)?# Text Elements\n/m);
+            if (trimLocation == -1) {
+              trimLocation = data.search(/(%%\n)?# Drawing\n/);
+            }
+            if (trimLocation > -1) {
+              let header = data
+                .substring(0, trimLocation)
+                .replace(
+                  /excalidraw-plugin:\s.*\n/,
+                  `${FRONTMATTER_KEY}: ${
+                    textMode == TextMode.raw ? "raw\n" : "parsed\n"
+                  }`,
+                );
+
+              header = header.replace(
+                /cssclass:[\s]*excalidraw-hide-preview-text[\s]*\n/,
+                "",
+              );
+
+              const REG_IMG = /(^---[\w\W]*?---\n)(!\[\[.*?]]\n(%%\n)?)/m; //(%%\n)? because of 1.4.8-beta... to be backward compatible with anyone who installed that version
+              if (header.match(REG_IMG)) {
+                header = header.replace(REG_IMG, "$1");
+              }
+              const newData = header + excalidrawData.generateMD();
+
+              if (data !== newData) {
+                i++;
+                log(`Excalidraw patched: ${f.path}`);
+                await plugin.app.vault.modify(f, newData);
+              }
+            }
+          } catch (e) {
+            errorlog({
+              where: "OneOffs.wysiwygPatch",
+              message: `Unable to process: ${f.path}`,
+              error: e,
+            });
+          }
+        }
+      }
+      plugin.settings.runWYSIWYGpatch = false;
+      plugin.settings.fixInfinitePreviewLoop = false;
+      plugin.saveSettings();
+      log(
+        `${window
+          .moment()
+          .format("HH:mm:ss")}: Excalidraw patched in total ${i} files`,
+      );
+    }, 420000); //7 minutes
+  }
+}
+
+class MigrationPrompt extends Modal {
+  private plugin: ExcalidrawPlugin;
+
+  constructor(app: App, plugin: ExcalidrawPlugin) {
+    super(app);
+    this.plugin = plugin;
+  }
+
+  onOpen(): void {
+    this.titleEl.setText("Welcome to Excalidraw 1.2");
+    this.createForm();
+  }
+
+  onClose(): void {
+    this.contentEl.empty();
+  }
+
+  createForm(): void {
+    const div = this.contentEl.createDiv();
+    //    div.addClass("excalidraw-prompt-div");
+    //    div.style.maxWidth = "600px";
+    div.createEl("p", {
+      text: "This version comes with tons of new features and possibilities. Please read the description in Community Plugins to find out more.",
+    });
+    div.createEl("p", { text: "" }, (el) => {
+      el.innerHTML =
+        "Drawings you've created with version 1.1.x need to be converted to take advantage of the new features. You can also continue to use them in compatibility mode. " +
+        "During conversion your old *.excalidraw files will be replaced with new *.excalidraw.md files.";
+    });
+    div.createEl("p", { text: "" }, (el) => {
+      //files manually follow one of two options:
+      el.innerHTML =
+        "To convert your drawings you have the following options:<br><ul>" +
+        "<li>Click <code>CONVERT FILES</code> now to convert all of your *.excalidraw files, or if you prefer to make a backup first, then click <code>CANCEL</code>.</li>" +
+        "<li>In the Command Palette select <code>Excalidraw: Convert *.excalidraw files to *.excalidraw.md files</code></li>" +
+        "<li>Right click an <code>*.excalidraw</code> file in File Explorer and select one of the following options to convert files one by one: <ul>" +
+        "<li><code>*.excalidraw => *.excalidraw.md</code></li>" +
+        "<li><code>*.excalidraw => *.md (Logseq compatibility)</code>. This option will retain the original *.excalidraw file next to the new Obsidian format. " +
+        "Make sure you also enable <code>Compatibility features</code> in Settings for a full solution.</li></ul></li>" +
+        "<li>Open a drawing in compatibility mode and select <code>Convert to new format</code> from the <code>Options Menu</code></li></ul>";
+    });
+    div.createEl("p", {
+      text: "This message will only appear maximum 3 times in case you have *.excalidraw files in your Vault.",
+    });
+    const bConvert = div.createEl("button", { text: "CONVERT FILES" });
+    bConvert.onclick = () => {
+      this.plugin.convertExcalidrawToMD();
+      this.close();
+    };
+    const bCancel = div.createEl("button", { text: "CANCEL" });
+    bCancel.onclick = () => {
+      this.close();
+    };
+  }
+}
+
+class ImageElementNotice extends Modal {
+  private plugin: ExcalidrawPlugin;
+  private saveChanges: boolean = false;
+
+  constructor(app: App, plugin: ExcalidrawPlugin) {
+    super(app);
+    this.plugin = plugin;
+  }
+
+  onOpen(): void {
+    this.titleEl.setText("Image Elements have arrived!");
+    this.createForm();
+  }
+
+  async onClose() {
+    this.contentEl.empty();
+    if (!this.saveChanges) {
+      return;
+    }
+    await this.plugin.loadSettings();
+    this.plugin.settings.imageElementNotice = false;
+    this.plugin.saveSettings();
+  }
+
+  createForm(): void {
+    const div = this.contentEl.createDiv();
+    //div.addClass("excalidraw-prompt-div");
+    //div.style.maxWidth = "600px";
+
+    div.createEl("p", { text: "" }, (el) => {
+      el.innerHTML =
+        "Welcome to Obsidian-Excalidraw 1.4! I've added Image Elements. " +
+        "Please watch the video below to learn how to use this new feature.";
+    });
+
+    div.createEl("p", { text: "" }, (el) => {
+      el.innerHTML =
+        "<u>⚠ WARNING:</u> Opening new drawings with an older version of the plugin will lead to loss of images. " +
+        "Update the plugin on all your devices.";
+    });
+
+    div.createEl("p", { text: "" }, (el) => {
+      el.innerHTML =
+        "Since March, I have spent most of my free time building this plugin. Close to 75 workdays worth of my time (assuming 8-hour days).  " +
+        "Some of you have already bought me a coffee. THANK YOU! Your support really means a lot to me! If you have not yet done so, please consider clicking the button below.";
+    });
+
+    const coffeeDiv = div.createDiv("coffee");
+    coffeeDiv.addClass("ex-coffee-div");
+    const coffeeLink = coffeeDiv.createEl("a", {
+      href: "https://ko-fi.com/zsolt",
+    });
+    const coffeeImg = coffeeLink.createEl("img", {
+      attr: {
+        src: "https://cdn.ko-fi.com/cdn/kofi3.png?v=3",
+      },
+    });
+    coffeeImg.height = 45;
+
+    div.createEl("p", { text: "" }, (el) => {
+      //files manually follow one of two options:
+      el.style.textAlign = "center";
+      el.innerHTML =
+        '<iframe width="560" height="315" src="https://www.youtube.com/embed/_c_0zpBJ4Xc?start=20" title="YouTube video player" ' +
+        'frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" ' +
+        "allowfullscreen></iframe>";
+    });
+
+    div.createEl("p", { text: "" }, (el) => {
+      //files manually follow one of two options:
+      el.style.textAlign = "right";
+
+      const bOk = el.createEl("button", { text: "OK - Don't show this again" });
+      bOk.onclick = () => {
+        this.saveChanges = true;
+        this.close();
+      };
+
+      const bCancel = el.createEl("button", {
+        text: "CANCEL - Read next time",
+      });
+      bCancel.onclick = () => {
+        this.saveChanges = false;
+        this.close();
+      };
+    });
+  }
+}
--- a/src/Prompt.ts
+++ b/src/Prompt.ts
@@ -1,45 +1,265 @@
-import { App, Modal } from "obsidian";
-
-export class Prompt extends Modal {
-    private promptEl: HTMLInputElement;
-    private resolve: (value: string) => void;
-
-    constructor(app: App, private prompt_text: string, private default_value: string) {
-        super(app);
-    }
-
-    onOpen(): void {
-        this.titleEl.setText(this.prompt_text);
-        this.createForm();
-    }
-
-    onClose(): void {
-        this.contentEl.empty();
-    }
-
-    createForm(): void {
-        const div = this.contentEl.createDiv();
-        div.addClass("excalidarw-prompt-div");
-
-        const form = div.createEl("form");
-        form.addClass("excalidraw-prompt-form");
-        form.type = "submit";
-        form.onsubmit = (e: Event) => {
-            e.preventDefault();
-            this.resolve(this.promptEl.value);
-            this.close();
-        }
-
-        this.promptEl = form.createEl("input");
-        this.promptEl.type = "text";
-        this.promptEl.placeholder = "$\\theta$";
-        this.promptEl.value = this.default_value ?? "";
-        this.promptEl.addClass("excalidraw-prompt-input")
-        this.promptEl.select();
-    }
-
-    async openAndGetValue(resolve: (value: string) => void): Promise<void> {
-        this.resolve = resolve;
-        this.open();
-    }
-}
+import {
+  App,
+  ButtonComponent,
+  Modal,
+  TextComponent,
+  FuzzyMatch,
+  FuzzySuggestModal,
+} from "obsidian";
+
+export class Prompt extends Modal {
+  private promptEl: HTMLInputElement;
+  private resolve: (value: string) => void;
+
+  constructor(
+    app: App,
+    private prompt_text: string,
+    private default_value?: string,
+    private placeholder?: string,
+    private prompt_desc?: string,
+  ) {
+    super(app);
+  }
+
+  onOpen(): void {
+    this.titleEl.setText(this.prompt_text);
+    this.createForm();
+  }
+
+  onClose(): void {
+    this.contentEl.empty();
+  }
+
+  createForm(): void {
+    let div = this.contentEl.createDiv();
+    div.addClass("excalidraw-prompt-div");
+    if (this.prompt_desc) {
+      div = div.createDiv();
+      div.style.width = "100%";
+      const p = div.createEl("p");
+      p.innerHTML = this.prompt_desc;
+    }
+    const form = div.createEl("form");
+    form.addClass("excalidraw-prompt-form");
+    form.type = "submit";
+    form.onsubmit = (e: Event) => {
+      e.preventDefault();
+      this.resolve(this.promptEl.value);
+      this.close();
+    };
+
+    this.promptEl = form.createEl("input");
+    this.promptEl.type = "text";
+    this.promptEl.placeholder = this.placeholder;
+    this.promptEl.value = this.default_value ?? "";
+    this.promptEl.addClass("excalidraw-prompt-input");
+    this.promptEl.select();
+  }
+
+  async openAndGetValue(resolve: (value: string) => void): Promise<void> {
+    this.resolve = resolve;
+    this.open();
+  }
+}
+
+export class GenericInputPrompt extends Modal {
+  public waitForClose: Promise<string>;
+
+  private resolvePromise: (input: string) => void;
+  private rejectPromise: (reason?: any) => void;
+  private didSubmit: boolean = false;
+  private inputComponent: TextComponent;
+  private input: string;
+  private readonly placeholder: string;
+
+  public static Prompt(
+    app: App,
+    header: string,
+    placeholder?: string,
+    value?: string,
+  ): Promise<string> {
+    const newPromptModal = new GenericInputPrompt(
+      app,
+      header,
+      placeholder,
+      value,
+    );
+    return newPromptModal.waitForClose;
+  }
+
+  protected constructor(
+    app: App,
+    private header: string,
+    placeholder?: string,
+    value?: string,
+  ) {
+    super(app);
+    this.placeholder = placeholder;
+    this.input = value;
+
+    this.waitForClose = new Promise<string>((resolve, reject) => {
+      this.resolvePromise = resolve;
+      this.rejectPromise = reject;
+    });
+
+    this.display();
+    this.open();
+  }
+
+  private display() {
+    this.contentEl.empty();
+    this.titleEl.textContent = this.header;
+
+    const mainContentContainer: HTMLDivElement = this.contentEl.createDiv();
+    this.inputComponent = this.createInputField(
+      mainContentContainer,
+      this.placeholder,
+      this.input,
+    );
+    this.createButtonBar(mainContentContainer);
+  }
+
+  protected createInputField(
+    container: HTMLElement,
+    placeholder?: string,
+    value?: string,
+  ) {
+    const textComponent = new TextComponent(container);
+
+    textComponent.inputEl.style.width = "100%";
+    textComponent
+      .setPlaceholder(placeholder ?? "")
+      .setValue(value ?? "")
+      .onChange((value) => (this.input = value))
+      .inputEl.addEventListener("keydown", this.submitEnterCallback);
+
+    return textComponent;
+  }
+
+  private createButton(
+    container: HTMLElement,
+    text: string,
+    callback: (evt: MouseEvent) => any,
+  ) {
+    const btn = new ButtonComponent(container);
+    btn.setButtonText(text).onClick(callback);
+
+    return btn;
+  }
+
+  private createButtonBar(mainContentContainer: HTMLDivElement) {
+    const buttonBarContainer: HTMLDivElement = mainContentContainer.createDiv();
+    this.createButton(
+      buttonBarContainer,
+      "Ok",
+      this.submitClickCallback,
+    ).setCta().buttonEl.style.marginRight = "0";
+    this.createButton(buttonBarContainer, "Cancel", this.cancelClickCallback);
+
+    buttonBarContainer.style.display = "flex";
+    buttonBarContainer.style.flexDirection = "row-reverse";
+    buttonBarContainer.style.justifyContent = "flex-start";
+    buttonBarContainer.style.marginTop = "1rem";
+  }
+
+  private submitClickCallback = () => this.submit();
+  private cancelClickCallback = () => this.cancel();
+
+  private submitEnterCallback = (evt: KeyboardEvent) => {
+    if (evt.key === "Enter") {
+      evt.preventDefault();
+      this.submit();
+    }
+  };
+
+  private submit() {
+    this.didSubmit = true;
+
+    this.close();
+  }
+
+  private cancel() {
+    this.close();
+  }
+
+  private resolveInput() {
+    if (!this.didSubmit) {
+      this.rejectPromise("No input given.");
+    } else {
+      this.resolvePromise(this.input);
+    }
+  }
+
+  private removeInputListener() {
+    this.inputComponent.inputEl.removeEventListener(
+      "keydown",
+      this.submitEnterCallback,
+    );
+  }
+
+  onOpen() {
+    super.onOpen();
+
+    this.inputComponent.inputEl.focus();
+    this.inputComponent.inputEl.select();
+  }
+
+  onClose() {
+    super.onClose();
+    this.resolveInput();
+    this.removeInputListener();
+  }
+}
+
+export class GenericSuggester extends FuzzySuggestModal<string> {
+  private resolvePromise: (value: string) => void;
+  private rejectPromise: (reason?: any) => void;
+  public promise: Promise<string>;
+  private resolved: boolean;
+
+  public static Suggest(app: App, displayItems: string[], items: string[]) {
+    const newSuggester = new GenericSuggester(app, displayItems, items);
+    return newSuggester.promise;
+  }
+
+  public constructor(
+    app: App,
+    private displayItems: string[],
+    private items: string[],
+  ) {
+    super(app);
+
+    this.promise = new Promise<string>((resolve, reject) => {
+      this.resolvePromise = resolve;
+      this.rejectPromise = reject;
+    });
+
+    this.open();
+  }
+
+  getItemText(item: string): string {
+    return this.displayItems[this.items.indexOf(item)];
+  }
+
+  getItems(): string[] {
+    return this.items;
+  }
+
+  selectSuggestion(value: FuzzyMatch<string>, evt: MouseEvent | KeyboardEvent) {
+    this.resolved = true;
+    super.selectSuggestion(value, evt);
+  }
+
+  onChooseItem(item: string): void {
+    this.resolved = true;
+    this.resolvePromise(item);
+  }
+
+  onClose() {
+    super.onClose();
+
+    if (!this.resolved) {
+      this.rejectPromise("no input given.");
+    }
+  }
+}
--- a/src/ScriptInstallPrompt.ts
+++ b/src/ScriptInstallPrompt.ts
@@ -0,0 +1,51 @@
+import { App, MarkdownRenderer, Modal, Notice, request } from "obsidian";
+import { Url } from "url";
+import { t } from "./lang/helpers";
+import ExcalidrawPlugin from "./main";
+import { errorlog, log } from "./Utils";
+
+const URL =
+  "https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/index.md";
+
+export class ScriptInstallPrompt extends Modal {
+  constructor(private plugin: ExcalidrawPlugin) {
+    super(plugin.app);
+    //    this.titleEl.setText(t("INSTAL_MODAL_TITLE"));
+  }
+
+  async onOpen(): Promise<void> {
+    this.contentEl.classList.add("excalidraw-scriptengine-install");
+    this.containerEl.classList.add("excalidraw-scriptengine-install");
+    try {
+      const source = await request({ url: URL });
+      if(!source) {
+        new Notice("Error opening the Excalidraw Script Store page. " +
+                   "Please double check that you can access the website. " + 
+                   "I've logged the link in developer console (press CTRL+SHIFT+i)",5000);
+        log(URL);
+        this.close();
+        return;
+      }
+      await MarkdownRenderer.renderMarkdown(
+        source,
+        this.contentEl,
+        "",
+        this.plugin,
+      );
+      this.contentEl.querySelectorAll("h1[data-heading],h2[data-heading],h3[data-heading]").forEach((el) => {
+        el.setAttribute("id", el.getAttribute("data-heading"));
+      });
+      this.contentEl.querySelectorAll("a.internal-link").forEach((el) => {
+        el.removeAttribute("target");
+      });
+    } catch (e) {
+      errorlog({ where: "ScriptInstallPrompt.onOpen", error: e });
+      new Notice("Could not open ScriptEngine repository");
+      this.close();
+    }
+  }
+
+  onClose(): void {
+    this.contentEl.empty();
+  }
+}
--- a/src/Scripts.ts
+++ b/src/Scripts.ts
@@ -0,0 +1,199 @@
+import { sub } from "@zsviczian/excalidraw/types/ga";
+import { App, TAbstractFile, TFile } from "obsidian";
+import { VIEW_TYPE_EXCALIDRAW } from "./constants";
+import ExcalidrawView from "./ExcalidrawView";
+import ExcalidrawPlugin from "./main";
+import { GenericInputPrompt, GenericSuggester } from "./Prompt";
+import { splitFolderAndFilename } from "./Utils";
+
+export class ScriptEngine {
+  private plugin: ExcalidrawPlugin;
+  private scriptPath: string;
+
+  constructor(plugin: ExcalidrawPlugin) {
+    this.plugin = plugin;
+    this.loadScripts();
+    this.registerEventHandlers();
+  }
+
+  registerEventHandlers() {
+    const deleteEventHandler = async (file: TFile) => {
+      if (!(file instanceof TFile)) {
+        return;
+      }
+      if (!file.path.startsWith(this.scriptPath)) {
+        return;
+      }
+      this.unloadScript(this.getScriptName(file));
+    };
+    this.plugin.registerEvent(
+      this.plugin.app.vault.on("delete", deleteEventHandler),
+    );
+
+    const createEventHandler = async (file: TFile) => {
+      if (!(file instanceof TFile)) {
+        return;
+      }
+      if (!file.path.startsWith(this.scriptPath)) {
+        return;
+      }
+      this.loadScript(file);
+    };
+    this.plugin.registerEvent(
+      this.plugin.app.vault.on("create", createEventHandler),
+    );
+
+    const renameEventHandler = async (file: TAbstractFile, oldPath: string) => {
+      if (!(file instanceof TFile)) {
+        return;
+      }
+      const oldFileIsScript = oldPath.startsWith(this.scriptPath);
+      const newFileIsScript = file.path.startsWith(this.scriptPath);
+      if (oldFileIsScript) {
+        this.unloadScript(this.getScriptName(oldPath));
+      }
+      if (newFileIsScript) {
+        this.loadScript(file);
+      }
+    };
+    this.plugin.registerEvent(
+      this.plugin.app.vault.on("rename", renameEventHandler),
+    );
+  }
+
+  updateScriptPath() {
+    if (this.scriptPath === this.plugin.settings.scriptFolderPath) {
+      return;
+    }
+    if(this.scriptPath) this.unloadScripts();
+    this.loadScripts();
+  }
+
+  loadScripts() {
+    const app = this.plugin.app;
+    this.scriptPath = this.plugin.settings.scriptFolderPath;
+    if(!app.vault.getAbstractFileByPath(this.scriptPath)) {
+      this.scriptPath = null;
+      return;
+    }
+    const scripts = app.vault
+      .getFiles()
+      .filter((f: TFile) => f.path.startsWith(this.scriptPath));
+    scripts.forEach((f) => this.loadScript(f));
+  }
+
+  getScriptName(f:TFile|string):string {
+    let basename = "";
+    let path = "";
+    if(f instanceof TFile) {
+      basename = f.basename;
+      path = f.path;
+    } else {
+      basename = splitFolderAndFilename(f).basename;
+      path = f;
+    }
+
+    const subpath = path.split(
+      `${this.scriptPath}/`,
+    )[1];
+    const lastSlash = subpath.lastIndexOf("/");
+    if (lastSlash > -1) {
+      return subpath.substring(0, lastSlash + 1) + basename;
+    }
+    return basename;
+  }
+
+  loadScript(f: TFile) {
+    const scriptName = this.getScriptName(f);
+    this.plugin.addCommand({
+      id: scriptName,
+      name: `(Script) ${scriptName}`,
+      checkCallback: (checking: boolean) => {
+        if (checking) {
+          return (
+            this.plugin.app.workspace.activeLeaf.view.getViewType() ==
+            VIEW_TYPE_EXCALIDRAW
+          );
+        }
+        const view = this.plugin.app.workspace.activeLeaf.view;
+        if (view instanceof ExcalidrawView) {
+          this.executeScript(view, f);
+          return true;
+        }
+        return false;
+      },
+    });
+  }
+
+  unloadScripts() {
+    const app = this.plugin.app;
+    const scripts = app.vault
+      .getFiles()
+      .filter((f: TFile) => f.path.startsWith(this.scriptPath));
+    scripts.forEach((f) => {
+      this.unloadScript(this.getScriptName(f));
+    });
+  }
+
+  unloadScript(basename: string) {
+    const app = this.plugin.app;
+    const commandId = `obsidian-excalidraw-plugin:${basename}`;
+    // @ts-ignore
+    if (!app.commands.commands[commandId]) {
+      return;
+    }
+    // @ts-ignore
+    delete app.commands.commands[commandId];
+  }
+
+  async executeScript(view: ExcalidrawView, f: TFile) {
+    if (!view || !f) {
+      return;
+    }
+    this.plugin.ea.reset();
+    this.plugin.ea.setView(view);
+    const script = await this.plugin.app.vault.read(f);
+    if (!script) {
+      return;
+    }
+
+    this.plugin.ea.activeScript = this.getScriptName(f);
+
+    //https://stackoverflow.com/questions/45381204/get-asyncfunction-constructor-in-typescript changed tsconfig to es2017
+    //https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction
+    const AsyncFunction = Object.getPrototypeOf(async () => {}).constructor;
+    const result = await new AsyncFunction("ea", "utils", script)(this.plugin.ea, {
+      inputPrompt: (header: string, placeholder?: string, value?: string) =>
+        ScriptEngine.inputPrompt(this.plugin.app, header, placeholder, value),
+      suggester: (displayItems: string[], items: string[]) =>
+        ScriptEngine.suggester(this.plugin.app, displayItems, items),
+    });
+    this.plugin.ea.activeScript = null;
+    return result;
+  }
+
+  public static async inputPrompt(
+    app: App,
+    header: string,
+    placeholder?: string,
+    value?: string,
+  ) {
+    try {
+      return await GenericInputPrompt.Prompt(app, header, placeholder, value);
+    } catch {
+      return undefined;
+    }
+  }
+
+  public static async suggester(
+    app: App,
+    displayItems: string[],
+    items: string[],
+  ) {
+    try {
+      return await GenericSuggester.Suggest(app, displayItems, items);
+    } catch {
+      return undefined;
+    }
+  }
+}
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -0,0 +1,548 @@
+import { exportToSvg, exportToBlob } from "@zsviczian/excalidraw";
+import {
+  App,
+  normalizePath,
+  Notice,
+  request,
+  TAbstractFile,
+  TFolder,
+  Vault,
+  WorkspaceLeaf,
+} from "obsidian";
+import { Random } from "roughjs/bin/math";
+import { DataURL, Zoom } from "@zsviczian/excalidraw/types/types";
+import { CASCADIA_FONT, REG_BLOCK_REF_CLEAN, VIRGIL_FONT } from "./constants";
+import ExcalidrawPlugin from "./main";
+import { ExcalidrawElement } from "@zsviczian/excalidraw/types/element/types";
+import { ExportSettings } from "./ExcalidrawView";
+
+declare module "obsidian" {
+  interface Workspace {
+    getAdjacentLeafInDirection(
+      leaf: WorkspaceLeaf,
+      direction: string,
+    ): WorkspaceLeaf;
+  }
+  interface Vault {
+    getConfig(option: "attachmentFolderPath"): string;
+  }
+}
+
+
+let versionUpdateChecked = false;
+export const checkExcalidrawVersion = async (app:App) => {
+  if(versionUpdateChecked) return;
+  versionUpdateChecked = true;
+  //@ts-ignore
+  const manifest = app.plugins.manifests["obsidian-excalidraw-plugin"];
+  
+  try {
+    const gitAPIrequest = async () => {
+      return JSON.parse(await request({
+        url: `https://api.github.com/repos/zsviczian/obsidian-excalidraw-plugin/releases?per_page=5&page=1`,
+      }))
+    }
+
+    const latestVersion = ((await gitAPIrequest())
+      .map((el:any) => {
+        return {
+          version: el.tag_name,
+          published: new Date(el.published_at),
+        };
+      })
+      .filter((el:any) => el.version.match(/^\d+\.\d+\.\d+$/))
+      .sort((el1:any,el2:any)=>el2.published-el1.published))[0].version;
+
+    if(latestVersion>manifest.version) {
+      new Notice(`A newer version of Excalidraw is available in Community Plugins.\n\nYou are using ${manifest.version}.\nThe latest is ${latestVersion}`);
+    }
+  } catch(e) {
+    errorlog({where:"Utils/checkExcalidrawVersion", error:e});
+  }
+  setTimeout(()=>versionUpdateChecked=false,28800000);//reset after 8 hours
+}
+
+
+
+/**
+ * Splits a full path including a folderpath and a filename into separate folderpath and filename components
+ * @param filepath
+ */
+export function splitFolderAndFilename(filepath: string): {
+  folderpath: string;
+  filename: string;
+  basename: string;
+} {
+  const lastIndex = filepath.lastIndexOf("/");
+  const filename = lastIndex == -1 ? filepath : filepath.substr(lastIndex + 1);
+  return {
+    folderpath: normalizePath(filepath.substr(0, lastIndex)),
+    filename,
+    basename: filename.replace(/\.[^/.]+$/, ""),
+  };
+}
+
+/**
+ * Download data as file from Obsidian, to store on local device
+ * @param encoding
+ * @param data
+ * @param filename
+ */
+export function download(encoding: string, data: any, filename: string) {
+  const element = document.createElement("a");
+  element.setAttribute("href", (encoding ? `${encoding},` : "") + data);
+  element.setAttribute("download", filename);
+  element.style.display = "none";
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+}
+
+/**
+ * Generates the image filename based on the excalidraw filename
+ * @param excalidrawPath - Full filepath of ExclidrawFile
+ * @param newExtension - extension of IMG file in ".extension" format
+ * @returns
+ */
+export function getIMGPathFromExcalidrawFile(
+  excalidrawPath: string,
+  newExtension: string,
+): string {
+  const isLegacyFile: boolean = excalidrawPath.endsWith(".excalidraw");
+  const replaceExtension: string = isLegacyFile ? ".excalidraw" : ".md";
+  return (
+    excalidrawPath.substring(0, excalidrawPath.lastIndexOf(replaceExtension)) +
+    newExtension
+  );
+}
+
+/**
+ * Create new file, if file already exists find first unique filename by adding a number to the end of the filename
+ * @param filename
+ * @param folderpath
+ * @returns
+ */
+export function getNewUniqueFilepath(
+  vault: Vault,
+  filename: string,
+  folderpath: string,
+): string {
+  let fname = normalizePath(`${folderpath}/${filename}`);
+  let file: TAbstractFile = vault.getAbstractFileByPath(fname);
+  let i = 0;
+  while (file) {
+    fname = normalizePath(
+      `${folderpath}/${filename.slice(
+        0,
+        filename.lastIndexOf("."),
+      )}_${i}${filename.slice(filename.lastIndexOf("."))}`,
+    );
+    i++;
+    file = vault.getAbstractFileByPath(fname);
+  }
+  return fname;
+}
+
+/**
+ * Open or create a folderpath if it does not exist
+ * @param folderpath
+ */
+export async function checkAndCreateFolder(vault: Vault, folderpath: string) {
+  folderpath = normalizePath(folderpath);
+  const folder = vault.getAbstractFileByPath(folderpath);
+  if (folder && folder instanceof TFolder) {
+    return;
+  }
+  await vault.createFolder(folderpath);
+}
+
+const random = new Random(Date.now());
+export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
+
+//https://macromates.com/blog/2006/wrapping-text-with-regular-expressions/
+export function wrapText(
+  text: string,
+  lineLen: number,
+  forceWrap: boolean = false,
+  tolerance: number = 0,
+): string {
+  if (!lineLen) {
+    return text;
+  }
+  let outstring = "";
+  if (forceWrap) {
+    for (const t of text.split("\n")) {
+      const v = t.match(new RegExp(`(.){1,${lineLen}}`, "g"));
+      outstring += v ? `${v.join("\n")}\n` : "\n";
+    }
+    return outstring.replace(/\n$/, "");
+  }
+
+  //  1                2            3                               4
+  const reg = new RegExp(
+    `(.{1,${lineLen}})(\\s+|$\\n?)|([^\\s]{1,${
+      lineLen + tolerance
+    }})(\\s+|$\\n?)?`,
+    //`(.{1,${lineLen}})(\\s+|$\\n?)|([^\\s]+)(\\s+|$\\n?)`,
+    "gm",
+  );
+  const res = text.matchAll(reg);
+  let parts;
+  while (!(parts = res.next()).done) {
+    outstring += parts.value[1]
+      ? parts.value[1].trimEnd()
+      : parts.value[3].trimEnd();
+    const newLine =
+      (parts.value[2] ? parts.value[2].split("\n").length - 1 : 0) +
+      (parts.value[4] ? parts.value[4].split("\n").length - 1 : 0);
+    outstring += "\n".repeat(newLine);
+    if (newLine === 0) {
+      outstring += "\n";
+    }
+  }
+  return outstring.replace(/\n$/, "");
+}
+
+const rotate = (
+  pointX: number,
+  pointY: number,
+  centerX: number,
+  centerY: number,
+  angle: number,
+): [number, number] =>
+  // 𝑎′𝑥=(𝑎𝑥−𝑐𝑥)cos𝜃−(𝑎𝑦−𝑐𝑦)sin𝜃+𝑐𝑥
+  // 𝑎′𝑦=(𝑎𝑥−𝑐𝑥)sin𝜃+(𝑎𝑦−𝑐𝑦)cos𝜃+𝑐𝑦.
+  // https://math.stackexchange.com/questions/2204520/how-do-i-rotate-a-line-segment-in-a-specific-point-on-the-line
+  [
+    (pointX - centerX) * Math.cos(angle) -
+      (pointY - centerY) * Math.sin(angle) +
+      centerX,
+    (pointX - centerX) * Math.sin(angle) +
+      (pointY - centerY) * Math.cos(angle) +
+      centerY,
+  ];
+
+export const rotatedDimensions = (
+  element: ExcalidrawElement,
+): [number, number, number, number] => {
+  if (element.angle === 0) {
+    return [element.x, element.y, element.width, element.height];
+  }
+  const centerX = element.x + element.width / 2;
+  const centerY = element.y + element.height / 2;
+  const [left, top] = rotate(
+    element.x,
+    element.y,
+    centerX,
+    centerY,
+    element.angle,
+  );
+  const [right, bottom] = rotate(
+    element.x + element.width,
+    element.y + element.height,
+    centerX,
+    centerY,
+    element.angle,
+  );
+  return [
+    left < right ? left : right,
+    top < bottom ? top : bottom,
+    Math.abs(left - right),
+    Math.abs(top - bottom),
+  ];
+};
+
+export const viewportCoordsToSceneCoords = (
+  { clientX, clientY }: { clientX: number; clientY: number },
+  {
+    zoom,
+    offsetLeft,
+    offsetTop,
+    scrollX,
+    scrollY,
+  }: {
+    zoom: Zoom;
+    offsetLeft: number;
+    offsetTop: number;
+    scrollX: number;
+    scrollY: number;
+  },
+) => {
+  const invScale = 1 / zoom.value;
+  const x = (clientX - zoom.translation.x - offsetLeft) * invScale - scrollX;
+  const y = (clientY - zoom.translation.y - offsetTop) * invScale - scrollY;
+  return { x, y };
+};
+
+export const getNewOrAdjacentLeaf = (
+  plugin: ExcalidrawPlugin,
+  leaf: WorkspaceLeaf,
+): WorkspaceLeaf => {
+  if (plugin.settings.openInAdjacentPane) {
+    let leafToUse = plugin.app.workspace.getAdjacentLeafInDirection(
+      leaf,
+      "right",
+    );
+    if (!leafToUse) {
+      leafToUse = plugin.app.workspace.getAdjacentLeafInDirection(leaf, "left");
+    }
+    if (!leafToUse) {
+      leafToUse = plugin.app.workspace.getAdjacentLeafInDirection(
+        leaf,
+        "bottom",
+      );
+    }
+    if (!leafToUse) {
+      leafToUse = plugin.app.workspace.getAdjacentLeafInDirection(leaf, "top");
+    }
+    if (!leafToUse) {
+      leafToUse = plugin.app.workspace.createLeafBySplit(leaf);
+    }
+    return leafToUse;
+  }
+  return plugin.app.workspace.createLeafBySplit(leaf);
+};
+
+export const getDataURL = async (
+  file: ArrayBuffer,
+  mimeType: string,
+): Promise<DataURL> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const dataURL = reader.result as DataURL;
+      resolve(dataURL);
+    };
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(new Blob([new Uint8Array(file)], { type: mimeType }));
+  });
+};
+
+export const getFontDataURL = async (
+  app:App,
+  fontFileName: string,
+  sourcePath: string,
+  name?:string
+):Promise<{fontDef: string, fontName: string, dataURL: string}> => {
+  let fontDef:string = "";
+  let fontName = "";
+  let dataURL = "";
+  const f = app.metadataCache.getFirstLinkpathDest(
+    fontFileName,
+    sourcePath,
+  );
+  if (f) {
+    const ab = await app.vault.readBinary(f);
+    const mimeType = f.extension.startsWith("woff")
+      ? "application/font-woff"
+      : "font/truetype";
+    fontName = name??f.basename;
+    dataURL = await getDataURL(
+      ab,
+      mimeType,
+    );
+    fontDef = ` @font-face {font-family: "${fontName}";src: url("${
+      dataURL
+    }") format("${f.extension === "ttf" ? "truetype" : f.extension}");}`;
+    const split = fontDef.split(";base64,", 2);
+    fontDef = `${split[0]};charset=utf-8;base64,${split[1]}`;
+  } 
+  return {fontDef,fontName,dataURL};
+}
+
+export const svgToBase64 = (svg: string): string => {
+  return `data:image/svg+xml;base64,${btoa(
+    unescape(encodeURIComponent(svg.replaceAll("&nbsp;", " "))),
+  )}`;
+};
+
+export const getBinaryFileFromDataURL = (dataURL: string): ArrayBuffer => {
+  if (!dataURL) {
+    return null;
+  }
+  const parts = dataURL.matchAll(/base64,(.*)/g).next();
+  const binary_string = window.atob(parts.value[1]);
+  const len = binary_string.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binary_string.charCodeAt(i);
+  }
+  return bytes.buffer;
+};
+
+export const getAttachmentsFolderAndFilePath = async (
+  app: App,
+  activeViewFilePath: string,
+  newFileName: string,
+): Promise<{ folder: string; filepath: string }> => {
+  let folder = app.vault.getConfig("attachmentFolderPath");
+  // folder == null: save to vault root
+  // folder == "./" save to same folder as current file
+  // folder == "folder" save to specific folder in vault
+  // folder == "./folder" save to specific subfolder of current active folder
+  if (folder && folder.startsWith("./")) {
+    // folder relative to current file
+    const activeFileFolder = `${
+      splitFolderAndFilename(activeViewFilePath).folderpath
+    }/`;
+    folder = normalizePath(activeFileFolder + folder.substring(2));
+  }
+  if (!folder) {
+    folder = "";
+  }
+  await checkAndCreateFolder(app.vault, folder);
+  return {
+    folder,
+    filepath: normalizePath(`${folder}/${newFileName}`),
+  };
+};
+
+export const getSVG = async (
+  scene: any,
+  exportSettings: ExportSettings,
+): Promise<SVGSVGElement> => {
+  try {
+    return await exportToSvg({
+      elements: scene.elements,
+      appState: {
+        exportBackground: exportSettings.withBackground,
+        exportWithDarkMode: exportSettings.withTheme
+          ? scene.appState?.theme != "light"
+          : false,
+        ...scene.appState,
+      },
+      files: scene.files,
+      exportPadding: 10,
+    });
+  } catch (error) {
+    return null;
+  }
+};
+
+export const getPNG = async (
+  scene: any,
+  exportSettings: ExportSettings,
+  scale: number = 1,
+) => {
+  try {
+    return await exportToBlob({
+      elements: scene.elements,
+      appState: {
+        exportBackground: exportSettings.withBackground,
+        exportWithDarkMode: exportSettings.withTheme
+          ? scene.appState?.theme != "light"
+          : false,
+        ...scene.appState,
+      },
+      files: scene.files,
+      mimeType: "image/png",
+      getDimensions: (width: number, height: number) => ({
+        width: width * scale,
+        height: height * scale,
+        scale,
+      }),
+    });
+  } catch (error) {
+    errorlog({ where: "Utils.getPNG", error });
+    return null;
+  }
+};
+
+export const embedFontsInSVG = (svg: SVGSVGElement, plugin: ExcalidrawPlugin): SVGSVGElement => {
+  //replace font references with base64 fonts
+  const includesVirgil =
+    svg.querySelector("text[font-family^='Virgil']") != null;
+  const includesCascadia =
+    svg.querySelector("text[font-family^='Cascadia']") != null;
+  const includesLocalFont =
+    svg.querySelector("text[font-family^='LocalFont']") != null;
+  const defs = svg.querySelector("defs");
+  if (defs && (includesCascadia || includesVirgil || includesLocalFont)) {
+    defs.innerHTML = `<style>${includesVirgil ? VIRGIL_FONT : ""}${
+      includesCascadia ? CASCADIA_FONT : ""
+    }${includesLocalFont ? plugin.fourthFontDef : ""}</style>`;
+  }
+  return svg;
+};
+
+export const getImageSize = async (
+  src: string,
+): Promise<{ height: number; width: number }> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve({ height: img.height, width: img.width });
+    img.onerror = reject;
+    img.src = src;
+  });
+};
+
+export const scaleLoadedImage = (
+  scene: any,
+  files: any,
+): { dirty: boolean; scene: any } => {
+  let dirty = false;
+  if (!files || !scene) {
+    return { dirty, scene };
+  }
+  for (const f of files) {
+    const [w_image, h_image] = [f.size.width, f.size.height];
+    const imageAspectRatio = f.size.width / f.size.height;
+    scene.elements
+      .filter((e: any) => e.type === "image" && e.fileId === f.id)
+      .forEach((el: any) => {
+        const [w_old, h_old] = [el.width, el.height];
+        const elementAspectRatio = w_old / h_old;
+        if (imageAspectRatio != elementAspectRatio) {
+          dirty = true;
+          const h_new = Math.sqrt((w_old * h_old * h_image) / w_image);
+          const w_new = Math.sqrt((w_old * h_old * w_image) / h_image);
+          el.height = h_new;
+          el.width = w_new;
+          el.y += (h_old - h_new) / 2;
+          el.x += (w_old - w_new) / 2;
+        }
+      });
+    return { dirty, scene };
+  }
+};
+
+export const isObsidianThemeDark = () =>
+  document.body.classList.contains("theme-dark");
+
+export function getIMGFilename(path: string, extension: string): string {
+  return `${path.substring(0, path.lastIndexOf("."))}.${extension}`;
+}
+
+export type LinkParts = {
+  original: string;
+  path: string;
+  isBlockRef: boolean;
+  ref: string;
+  width: number;
+  height: number;
+};
+
+export const getLinkParts = (fname: string): LinkParts => {
+  const REG = /(^[^#\|]+)#?(\^)?([^\|]*)?\|?(\d*)x?(\d*)/;
+  const parts = fname.match(REG);
+  return {
+    original: fname,
+    path: parts[1],
+    isBlockRef: parts[2] === "^",
+    ref: parts[3]?.replaceAll(REG_BLOCK_REF_CLEAN, ""),
+    width: parts[4] ? parseInt(parts[4]) : undefined,
+    height: parts[5] ? parseInt(parts[5]) : undefined,
+  };
+};
+
+export const errorlog = (data: {}) => {
+  console.error({ plugin: "Excalidraw", ...data });
+};
+
+export const sleep = async (ms: number) => {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+export const log = console.log.bind(window.console);
+export const debug = console.log.bind(window.console);
+//export const debug = function(){};
--- a/src/constants.ts
+++ b/src/constants.ts
--- a/src/lang/helpers.ts
+++ b/src/lang/helpers.ts
@@ -1,6 +1,7 @@
 //Solution copied from obsidian-kanban: https://github.com/mgmeyers/obsidian-kanban/blob/44118e25661bff9ebfe54f71ae33805dc88ffa53/src/lang/helpers.ts

 import { moment } from "obsidian";
+import { errorlog } from "src/Utils";
 import ar from "./locale/ar";
 import cz from "./locale/cz";
 import da from "./locale/da";
@@ -55,7 +56,11 @@ const locale = localeMap[moment.locale()];

 export function t(str: keyof typeof en): string {
  if (!locale) {
-    console.error("Error: Excalidraw locale not found", moment.locale());
+    errorlog({
+      where: "helpers.t",
+      message: "Error: Excalidraw locale not found",
+      locale: moment.locale(),
+    });
  }

  return (locale && locale[str]) || en[str];
--- a/src/lang/locale/ar.ts
+++ b/src/lang/locale/ar.ts
@@ -1,3 +1,3 @@
 // العربية

-export default {};
+export default {};
--- a/src/lang/locale/cz.ts
+++ b/src/lang/locale/cz.ts
@@ -1,3 +1,3 @@
 // čeština

-export default {};
+export default {};
--- a/src/lang/locale/da.ts
+++ b/src/lang/locale/da.ts
@@ -1,3 +1,3 @@
 // Dansk

-export default {};
+export default {};
--- a/src/lang/locale/en.ts
+++ b/src/lang/locale/en.ts
@@ -1,112 +1,302 @@
-import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX } from "src/constants";
+import {
+  FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS,
+  FRONTMATTER_KEY_CUSTOM_PREFIX,
+  FRONTMATTER_KEY_CUSTOM_URL_PREFIX,
+} from "src/constants";

 // English
 export default {
  // main.ts
+  INSTALL_SCRIPT: "Install this script",
+  UPDATE_SCRIPT: "An update is available - Click to install",
+  CHECKING_SCRIPT: "Checking if a newer version is available - Click to reinstall now",
+  UNABLETOCHECK_SCRIPT: "Update check was unsuccessful - Click to reinstall now",
+  UPTODATE_SCRIPT: "Script is installed and up to date - Click to reinstall now",
  OPEN_AS_EXCALIDRAW: "Open as Excalidraw Drawing",
  TOGGLE_MODE: "Toggle between Excalidraw and Markdown mode",
  CONVERT_NOTE_TO_EXCALIDRAW: "Convert empty note to Excalidraw Drawing",
  CONVERT_EXCALIDRAW: "Convert *.excalidraw to *.md files",
-  CREATE_NEW : "New Excalidraw drawing",
+  CREATE_NEW: "New Excalidraw drawing",
+  CONVERT_FILE_KEEP_EXT: "*.excalidraw => *.excalidraw.md",
+  CONVERT_FILE_REPLACE_EXT: "*.excalidraw => *.md (Logseq compatibility)",
+  DOWNLOAD_LIBRARY: "Export stencil library as an *.excalidrawlib file",
  OPEN_EXISTING_NEW_PANE: "Open an existing drawing - IN A NEW PANE",
-  OPEN_EXISTING_ACTIVE_PANE: "Open an existing drawing - IN THE CURRENT ACTIVE PANE",
+  OPEN_EXISTING_ACTIVE_PANE:
+    "Open an existing drawing - IN THE CURRENT ACTIVE PANE",
  TRANSCLUDE: "Transclude (embed) a drawing",
  TRANSCLUDE_MOST_RECENT: "Transclude (embed) the most recently edited drawing",
  NEW_IN_NEW_PANE: "Create a new drawing - IN A NEW PANE",
  NEW_IN_ACTIVE_PANE: "Create a new drawing - IN THE CURRENT ACTIVE PANE",
-  NEW_IN_NEW_PANE_EMBED: "Create a new drawing - IN A NEW PANE - and embed into active document",
-  NEW_IN_ACTIVE_PANE_EMBED: "Create a new drawing - IN THE CURRENT ACTIVE PANE - and embed into active document",
+  NEW_IN_NEW_PANE_EMBED:
+    "Create a new drawing - IN A NEW PANE - and embed into active document",
+  NEW_IN_ACTIVE_PANE_EMBED:
+    "Create a new drawing - IN THE CURRENT ACTIVE PANE - and embed into active document",
  EXPORT_SVG: "Save as SVG next to the current file",
  EXPORT_PNG: "Save as PNG next to the current file",
-  TOGGLE_LOCK: "Toggle Text Element edit LOCK/UNLOCK",
+  TOGGLE_LOCK: "Toggle Text Element edit RAW/PREVIEW",
+  DELETE_FILE: "Delete selected Image or Markdown file from Obsidian Vault",
  INSERT_LINK: "Insert link to file",
-  INSERT_LATEX: "Insert LaTeX-symbol (e.g. $\\theta$)",
+  INSERT_IMAGE: "Insert image from vault",
+  INSERT_MD: "Insert markdown file from vault",
+  INSERT_LATEX:
+    "Insert LaTeX formula (e.g. \\binom{n}{k} = \\frac{n!}{k!(n-k)!})",
  ENTER_LATEX: "Enter a valid LaTeX expression",
-  
+
  //ExcalidrawView.ts
+  INSTALL_SCRIPT_BUTTON: "Install or update Excalidraw Scripts",
  OPEN_AS_MD: "Open as Markdown",
-  SAVE_AS_PNG: "Save as PNG into Vault (CTRL/META+CLICK to export)",
-  SAVE_AS_SVG: "Save as SVG into Vault (CTRL/META+CLICK to export)",
+  SAVE_AS_PNG: "Save as PNG into Vault (CTRL/CMD+CLICK to export)",
+  SAVE_AS_SVG: "Save as SVG into Vault (CTRL/CMD+CLICK to export)",
  OPEN_LINK: "Open selected text as link\n(SHIFT+CLICK to open in a new pane)",
  EXPORT_EXCALIDRAW: "Export to an .Excalidraw file",
-  UNLOCK_TO_EDIT: "UNLOCK Text Elements to edit",
-  LINK_BUTTON_CLICK_NO_TEXT: 'Select a Text Element containing an internal or external link.\n'+
-                             'SHIFT CLICK this button to open the link in a new pane.\n'+
-                             'CTRL/META CLICK the Text Element on the canvas has the same effect!',
-  TEXT_ELEMENT_EMPTY: "Text Element is empty, or [[valid-link|alias]] or [alias](valid-link) is not found",
-  FILENAME_INVALID_CHARS: 'File name cannot contain any of the following characters: * " \\  < > : | ?',
-  FILE_DOES_NOT_EXIST: "File does not exist. Hold down ALT (or ALT+SHIFT) and CLICK link button to create a new file.",
-  FORCE_SAVE: "Force-save to update transclusions in adjacent panes.\n(Please note, that autosave is always on)",
-  LOCK: "Text Elements are unlocked. Click to LOCK.",
-  UNLOCK: "Text Elements are locked. Click to UNLOCK.",
+  LINK_BUTTON_CLICK_NO_TEXT:
+    "Select a an ImageElement, or select a TextElement that contains an internal or external link.\n" +
+    "SHIFT CLICK this button to open the link in a new pane.\n" +
+    "CTRL/CMD CLICK the Image or TextElement on the canvas has the same effect!",
+  TEXT_ELEMENT_EMPTY:
+    "No ImageElement is selected or TextElement is empty, or [[valid-link|alias]] or [alias](valid-link) is not found",
+  FILENAME_INVALID_CHARS:
+    'File name cannot contain any of the following characters: * " \\ < > : | ?',
+  FILE_DOES_NOT_EXIST:
+    "File does not exist. Hold down ALT (or ALT+SHIFT) and CLICK link button to create a new file.",
+  FORCE_SAVE:
+    "Force-save to update transclusions in adjacent panes.\n(Please note, that autosave is always on)",
+  RAW: "Change to PREVIEW mode (only effects text-elements with links or transclusions)",
+  PARSED:
+    "Change to RAW mode (only effects text-elements with links or transclusions)",
  NOFILE: "Excalidraw (no file)",
+  COMPATIBILITY_MODE:
+    "*.excalidraw file opened in compatibility mode. Convert to new format for full plugin functionality.",
+  CONVERT_FILE: "Convert to new format",

  //settings.ts
  FOLDER_NAME: "Excalidraw folder",
-  FOLDER_DESC: "Default location for new drawings. If empty, drawings will be created in the Vault root.",
+  FOLDER_DESC:
+    "Default location for new drawings. If empty, drawings will be created in the Vault root.",
  TEMPLATE_NAME: "Excalidraw template file",
-  TEMPLATE_DESC: "Full filepath to the Excalidraw template. " +
-                 "E.g.: If your template is in the default Excalidraw folder and it's name is " +
-                 "Template.excalidraw, the setting would be: Excalidraw/Template.excalidraw",
+  TEMPLATE_DESC:
+    "Full filepath to the Excalidraw template. " +
+    "E.g.: If your template is in the default Excalidraw folder and it's name is " +
+    "Template.md, the setting would be: Excalidraw/Template.md (or just Excalidraw/Template - you may ommit the .md file extension" +
+    "If you are using Excalidraw in compatibility mode, then your template must be a legacy excalidraw file as well " +
+    "such as Excalidraw/Template.excalidraw.",
+  SCRIPT_FOLDER_NAME: "Excalidraw Automate script folder",
+  SCRIPT_FOLDER_DESC:
+    "The files you place in this folder will be treated as Excalidraw Automate scripts. " +
+    "You can access your scripts from Excalidraw via the Obsidian Command Palette. Assign " +
+    "hotkeys to your favorite scripts just like to any other Obsidian command. " +
+    "The folder may not be the root folder of your Vault. ",
  AUTOSAVE_NAME: "Autosave",
-  AUTOSAVE_DESC: "Automatically save the active drawing every 30 seconds. Save normally happens when you close Excalidraw or Obsidian, or move "+
-                 "focus to another pane. In rare cases autosave may slightly disrupt your drawing flow. I created this feature with mobile " +
-                 "phones in mind (I only have experience with Android), where 'swiping out Obsidian to close it' led to some data loss, and because " +
-                 "I wasn't able to force save on application termination on mobiles. If you use Excalidraw on a desktop this is likely not needed.",
+  AUTOSAVE_DESC:
+    "Automatically save the active drawing every 30 seconds. Save normally happens when you close Excalidraw or Obsidian, or move " +
+    "focus to another pane. In rare cases autosave may slightly disrupt your drawing flow. I created this feature with mobile " +
+    "phones in mind (I only have experience with Android), where 'swiping out Obsidian to close it' led to some data loss, and because " +
+    "I wasn't able to force save on application termination on mobiles. If you use Excalidraw on a desktop this is likely not needed.",
  FILENAME_HEAD: "Filename",
-  FILENAME_DESC: "<p>The auto-generated filename consists of a prefix and a date. " + 
-                 "e.g.'Drawing 2021-05-24 12.58.07'.</p>"+
-                 "<p>Click this link for the <a href='https://momentjs.com/docs/#/displaying/format/'>"+
-                 "date and time format reference</a>.</p>",
+  FILENAME_DESC:
+    "<p>The auto-generated filename consists of a prefix and a date. " +
+    "e.g.'Drawing 2021-05-24 12.58.07'.</p>" +
+    "<p>Click this link for the <a href='https://momentjs.com/docs/#/displaying/format/'>" +
+    "date and time format reference</a>.</p>",
  FILENAME_SAMPLE: "The current file format is: <b>",
  FILENAME_PREFIX_NAME: "Filename prefix",
  FILENAME_PREFIX_DESC: "The first part of the filename",
  FILENAME_DATE_NAME: "Filename date",
  FILENAME_DATE_DESC: "The second part of the filename",
-  LINKS_HEAD: "Links",
-  LINKS_DESC: "CTRL/META + CLICK on Text Elements to open them as links. " + 
-              "If the selected text has more than one [[valid Obsidian links]], only the first will be opened. " + 
-              "If the text starts as a valid web link (i.e. https:// or http://), then " +
-              "the plugin will open it in a browser. " +
-              "When Obsidian files change, the matching [[link]] in your drawings will also change. " +
-              "If you don't want text accidentally changing in your drawings use [[links|with aliases]].",
+  /*SVG_IN_MD_NAME: "SVG Snapshot to markdown file",
+  SVG_IN_MD_DESC: "If the switch is 'on' Excalidraw will include an SVG snapshot in the markdown file. "+
+                  "When SVG snapshots are saved to the Excalidraw.md file, drawings that include large png, jpg, gif images may take extreme long time to open in markdown view. " +
+                  "On the other hand, SVG snapshots provide some level of platform independence and longevity to your drawings. Even if Excalidraw will no longer exist, the snapshot " +
+                  "can be opened with an app that reads SVGs. In addition hover previews will be less resource intensive if SVG snapshots are enabled.",*/
+  DISPLAY_HEAD: "Display",
+  MATCH_THEME_NAME: "New drawing to match Obsidian theme",
+  MATCH_THEME_DESC:
+    "If theme is dark, new drawing will be created in dark mode. This does not apply when you use a template for new drawings. " +
+    "Also this will not effect when you open an existing drawing. Those will follow the theme of the template/drawing respectively.",
+  MATCH_THEME_ALWAYS_NAME: "Existing drawings to match Obsidian theme",
+  MATCH_THEME_ALWAYS_DESC:
+    "If theme is dark, drawings will be opened in dark mode. If your theme is light, they will be opened in light mode. ",
+  MATCH_THEME_TRIGGER_NAME: "Excalidraw to follow when Obsidian Theme changes",
+  MATCH_THEME_TRIGGER_DESC:
+    "If this option is enabled open Excalidraw pane will switch to light/dark mode when Obsidian theme changes. ",
+  DEFAULT_OPEN_MODE_NAME: "Default mode when opening Excalidraw",
+  DEFAULT_OPEN_MODE_DESC:
+    "Specifies the mode how Excalidraw opens: Normal, Zen, or View mode. You may also set this behaviour on a file level by " +
+    "adding the excalidraw-default-mode frontmatter key with a value of: normal,view, or zen to your document.",
+  ZOOM_TO_FIT_NAME: "Zoom to fit on view resize",
+  ZOOM_TO_FIT_DESC: "Zoom to fit drawing when the pane is resized",
+  ZOOM_TO_FIT_MAX_LEVEL_NAME: "Zoom to fit max ZOOM level",
+  ZOOM_TO_FIT_MAX_LEVEL_DESC:
+    "Set the maximum level to which zoom to fit will enlarge the drawing. Minimum is 0.5 (50%) and maximum is 10 (1000%).",
+  LINKS_HEAD: "Links and transclusion",
+  LINKS_DESC:
+    "CTRL/CMD + CLICK on [[Text Elements]] to open them as links. " +
+    "If the selected text has more than one [[valid Obsidian links]], only the first will be opened. " +
+    "If the text starts as a valid web link (i.e. https:// or http://), then " +
+    "the plugin will open it in a browser. " +
+    "When Obsidian files change, the matching [[link]] in your drawings will also change. " +
+    "If you don't want text accidentally changing in your drawings use [[links|with aliases]].",
+  ADJACENT_PANE_NAME: "Open in adjacent pane",
+  ADJACENT_PANE_DESC:
+    "When CTRL/CMD+SHIFT clicking a link in Excalidraw by default the plugin will open the link in a new pane. " +
+    "Turning this setting on, Excalidraw will first look for an existing adjacent pane, and try to open the link there. " +
+    "Excalidraw will first look too the right, then to the left, then down, then up. If no pane is found, Excalidraw will open " +
+    "a new pane.",
  LINK_BRACKETS_NAME: "Show [[brackets]] around links",
-  LINK_BRACKETS_DESC: "In preview (locked) mode, when parsing Text Elements, place brackets around links. " +
-                      "You can override this setting for a specific drawing by adding '" + FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS + 
-                      ": true/false' to the file\'s frontmatter.",
-  LINK_PREFIX_NAME:"Link prefix",
-  LINK_PREFIX_DESC:"In preview (locked) mode, if the Text Element contains a link, precede the text with these characters. " +
-                   "You can override this setting for a specific drawing by adding \'" + FRONTMATTER_KEY_CUSTOM_PREFIX + 
-                   ': "👉 "\' to the file\'s frontmatter.',
-  LINK_CTRL_CLICK_NAME: "CTRL + CLICK on text to open them as links",
-  LINK_CTRL_CLICK_DESC: "You can turn this feature off if it interferes with default Excalidraw features you want to use. If " +
-                        "this is turned off, only the link button in the title bar of the drawing pane will open links.",
+  LINK_BRACKETS_DESC: `${
+    "In PREVIEW mode, when parsing Text Elements, place brackets around links. " +
+    "You can override this setting for a specific drawing by adding '"
+  }${FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS}: true/false' to the file's frontmatter.`,
+  LINK_PREFIX_NAME: "Link prefix",
+  LINK_PREFIX_DESC: `${
+    "In PREVIEW mode, if the Text Element contains a link, precede the text with these characters. " +
+    "You can override this setting for a specific drawing by adding '"
+  }${FRONTMATTER_KEY_CUSTOM_PREFIX}: "📍 "' to the file's frontmatter.`,
+  URL_PREFIX_NAME: "URL prefix",
+  URL_PREFIX_DESC: `${
+    "In PREVIEW mode, if the Text Element contains a URL link, precede the text with these characters. " +
+    "You can override this setting for a specific drawing by adding '"
+  }${FRONTMATTER_KEY_CUSTOM_URL_PREFIX}: "🌐 "' to the file's frontmatter.`,
+  LINK_CTRL_CLICK_NAME:
+    "CTRL/CMD + CLICK on text with [[links]] or [](links) to open them",
+  LINK_CTRL_CLICK_DESC:
+    "You can turn this feature off if it interferes with default Excalidraw features you want to use. If " +
+    "this is turned off, only the link button in the title bar of the drawing pane will open links.",
+  TRANSCLUSION_WRAP_NAME: "Overflow wrap behavior of transcluded text",
+  TRANSCLUSION_WRAP_DESC:
+    "Number specifies the character count where the text should be wrapped. " +
+    "Set the text wrapping behavior of transcluded text. Turn this ON to force-wrap " +
+    "text (i.e. no overflow), or OFF to soft-wrap text (at the nearest whitespace).",
+  PAGE_TRANSCLUSION_CHARCOUNT_NAME: "Page transclusion max char count",
+  PAGE_TRANSCLUSION_CHARCOUNT_DESC:
+    "The maximum number of characters to display from the page when transcluding an entire page with the " +
+    "![[markdown page]] format.",
+  GET_URL_TITLE_NAME: "Use iframely to resolve page title",
+  GET_URL_TITLE_DESC:
+    "Use the http://iframely.server.crestify.com/iframely?url= to get title of page when dropping a link into Excalidraw",
+  MD_HEAD: "Markdown-embed settings",
+  MD_HEAD_DESC:
+    "You can transclude formatted markdown documents into drawings as images CTRL/CMD drop from the file explorer or using " +
+    "the command palette action.",
+  MD_TRANSCLUDE_WIDTH_NAME: "Default width of a transcluded markdown document",
+  MD_TRANSCLUDE_WIDTH_DESC:
+    "The width of the markdown page. This effects the word wrapping when transcluding longer paragraphs, and the width of " +
+    "the image element. You can override the default width of " +
+    "an embedded file using the [[filename#heading|WIDTHxMAXHEIGHT]] syntax in markdown view mode under embedded files.",
+  MD_TRANSCLUDE_HEIGHT_NAME:
+    "Default maximum height of a transcluded markdown document",
+  MD_TRANSCLUDE_HEIGHT_DESC:
+    "The embedded image will be as high as the markdown text requries, but not higher than this value. " +
+    "You can override this value by editing the embedded image link in markdown view mode with the following syntax [[filename#^blockref|WIDTHxMAXHEIGHT]].",
+  MD_DEFAULT_FONT_NAME:
+    "The default font typeface to use for embedded markdown files.",
+  MD_DEFAULT_FONT_DESC:
+    'Set this value to "Virgil" or "Cascadia" or the filename of a valid .ttf, .woff, or .woff2 font e.g. "MyFont.woff2" ' +
+    'You can override this setting by adding the following frontmatter-key to the embedded markdown file: "excalidraw-font: font_or_filename"',
+  MD_DEFAULT_COLOR_NAME:
+    "The default font color to use for embedded markdown files.",
+  MD_DEFAULT_COLOR_DESC:
+    'Set this to allowed css color names e.g. "steelblue" (https://www.w3schools.com/colors/colors_names.asp), or a valid hexadecimal color e.g. "#e67700". ' +
+    'You can override this setting by adding the following frontmatter-key to the embedded markdown file: "excalidraw-font-color: color_name_or_rgbhex"',
+  MD_CSS_NAME: "CSS file",
+  MD_CSS_DESC:
+    "The filename of the CSS to apply to markdown embeds. Provide the filename with extension (e.g. 'md-embed.css'). The css file may also be a plain " +
+    "markdown file (e.g. 'md-embed-css.md'), just make sure the content is written using valid css syntax. " +
+    "If you need to look at the HTML code you are applying the CSS to, then open Obsidian Developer Console (CTRL+SHIFT+i) and type in the follwoing command: " +
+    '"ExcalidrawAutomate.mostRecentMarkdownSVG". This will display the most recent SVG generated by Excalidraw. ' +
+    "Setting the font-family in the css is has limitations. By default only your operating system's standard fonts are available (see README for details). " +
+    "You can add one custom font beyond that using the setting above. " +
+    'You can override this css setting by adding the following frontmatter-key to the embedded markdown file: "excalidraw-css: css_file_in_valut|css-snippet".',
  EMBED_HEAD: "Embed & Export",
+  EMBED_PREVIEW_SVG_NAME: "Display SVG in markdown preview",
+  EMBED_PREVIEW_SVG_DESC:
+    "The default is to display drawings as SVG images in the markdown preview. Turning this feature off, the markdown preview will display the drawing as an embedded PNG image.",
+  PREVIEW_MATCH_OBSIDIAN_NAME: "Excalidraw preview to match Obsidian theme",
+  PREVIEW_MATCH_OBSIDIAN_DESC:
+    "Image preview in documents should match the Obsidian theme. If enabled, when Obsidian is in dark mode, Excalidraw images will render in dark mode. " +
+    "When Obsidian is in light mode, Excalidraw will render light mode as well. You may want to switch 'Export image with background' off for a more Obsidian-integrated look and feel.",
  EMBED_WIDTH_NAME: "Default width of embedded (transcluded) image",
-  EMBED_WIDTH_DESC: "The default width of an embedded drawing. You can specify a custom " +
-                    "width when embedding an image using the ![[drawing.excalidraw|100]] or " +
-                    "[[drawing.excalidraw|100x100]] format.",
+  EMBED_WIDTH_DESC:
+    "Only relevant if embed type is excalidraw. Has no effect on PNG and SVG embeds. The default width of an embedded drawing. You can specify a custom " +
+    "width when embedding an image using the ![[drawing.excalidraw|100]] or " +
+    "[[drawing.excalidraw|100x100]] format.",
+  EMBED_TYPE_NAME: "Type of file to insert into the document",
+  EMBED_TYPE_DESC:
+    "When you embed an image into a document using the command palette this setting will specify if Excalidraw should embed the original excalidraw file " +
+    "or a PNG or an SVG copy. You need to enable auto-export PNG / SVG (see below under Export Settings) for those image types to be available in the dropdown. For drawings that do not have a " +
+    "a corresponding PNG or SVG readily available the command palette action will insert a broken link. You need to open the original drawing and initiate export manually. " +
+    "This option will not autogenerate PNG/SVG files, but will simply reference the already existing files.",
+  EXPORT_PNG_SCALE_NAME: "PNG export image scale",
+  EXPORT_PNG_SCALE_DESC: "The size-scale of the exported PNG image",
  EXPORT_BACKGROUND_NAME: "Export image with background",
-  EXPORT_BACKGROUND_DESC: "If turned off, the exported image will be transparent.",
+  EXPORT_BACKGROUND_DESC:
+    "If turned off, the exported image will be transparent.",
  EXPORT_THEME_NAME: "Export image with theme",
-  EXPORT_THEME_DESC: "Export the image matching the dark/light theme of your drawing. If turned off, " +
-                     "drawings created in drak mode will appear as they would in light mode.",
+  EXPORT_THEME_DESC:
+    "Export the image matching the dark/light theme of your drawing. If turned off, " +
+    "drawings created in dark mode will appear as they would in light mode.",
+  EXPORT_HEAD: "Export Settings",
+  EXPORT_SYNC_NAME:
+    "Keep the .SVG and/or .PNG filenames in sync with the drawing file",
+  EXPORT_SYNC_DESC:
+    "When turned on, the plugin will automatically update the filename of the .SVG and/or .PNG files when the drawing in the same folder (and same name) is renamed. " +
+    "The plugin will also automatically delete the .SVG and/or .PNG files when the drawing in the same folder (and same name) is deleted. ",
  EXPORT_SVG_NAME: "Auto-export SVG",
-  EXPORT_SVG_DESC: "Automatically create an SVG export of your drawing matching the title of your file. " + 
-                   "The plugin will save the .SVG file in the same folder as the drawing. "+
-                   "Embed the .svg file into your documents instead of excalidraw making you embeds platform independent. " +
-                   "While the auto-export switch is on, this file will get updated every time you edit the excalidraw drawing with the matching name.",
+  EXPORT_SVG_DESC:
+    "Automatically create an SVG export of your drawing matching the title of your file. " +
+    "The plugin will save the *.SVG file in the same folder as the drawing. " +
+    "Embed the .svg file into your documents instead of excalidraw making you embeds platform independent. " +
+    "While the auto-export switch is on, this file will get updated every time you edit the excalidraw drawing with the matching name.",
  EXPORT_PNG_NAME: "Auto-export PNG",
-  EXPORT_PNG_DESC: "Same as the auto-export SVG, but for PNG.",
-  EXPORT_SYNC_NAME:"Keep the .SVG and/or .PNG filenames in sync with the drawing file",
-  EXPORT_SYNC_DESC:"When turned on, the plugin will automaticaly update the filename of the .SVG and/or .PNG files when the drawing in the same folder (and same name) is renamed. " +
-                   "The plugin will also automatically delete the .SVG and/or .PNG files when the drawing in the same folder (and same name) is deleted. ",
+  EXPORT_PNG_DESC: "Same as the auto-export SVG, but for *.PNG",
+  COMPATIBILITY_HEAD: "Compatibility features",
+  EXPORT_EXCALIDRAW_NAME: "Auto-export Excalidraw",
+  EXPORT_EXCALIDRAW_DESC: "Same as the auto-export SVG, but for *.Excalidraw",
+  SYNC_EXCALIDRAW_NAME:
+    "Sync *.excalidraw with *.md version of the same drawing",
+  SYNC_EXCALIDRAW_DESC:
+    "If the modified date of the *.excalidraw file is more recent than the modified date of the *.md file " +
+    "then update the drawing in the .md file based on the .excalidraw file",
+  COMPATIBILITY_MODE_NAME: "New drawings as legacy files",
+  COMPATIBILITY_MODE_DESC:
+    "By enabling this feature drawings you create with the ribbon icon, the command palette actions, " +
+    "and the file explorer are going to be all legacy *.excalidraw files. This setting will also turn off the reminder message " +
+    "when you open a legacy file for editing.",
+  EXPERIMENTAL_HEAD: "Experimental features",
+  EXPERIMENTAL_DESC:
+    "These setting will not take effect immediately, only when the File Explorer is refreshed, or Obsidian restarted.",
+  FILETYPE_NAME: "Display type (✏️) for excalidraw.md files in File Explorer",
+  FILETYPE_DESC:
+    "Excalidraw files will receive an indicator using the emojii or text defined in the next setting.",
+  FILETAG_NAME: "Set the type indicator for excalidraw.md files",
+  FILETAG_DESC: "The text or emojii to display as type indicator.",
+  INSERT_EMOJI: "Insert an emoji",
+  LIVEPREVIEW_NAME: "Immersive image embedding in live preview editing mode",
+  LIVEPREVIEW_DESC: "Turn this on to support image embedding styles such as ![[drawing|width|style]] in live preview editing mode. " +
+                    "The setting will not effect the currently open documents. You need close the open documents and re-open them for the change " +
+                    "to take effect.",
+  ENABLE_FOURTH_FONT_NAME: "Enable fourth font option",
+  ENABLE_FOURTH_FONT_DESC: "By turning this on, you will see a fourth font button on the properties panel for text elements. " +
+                          "Files that use this fourth font will (partly) lose their paltform independence. " +
+                          "Depending on the cutom font set in settings, they will look differently when loaded in another vault, or at a later time. " +
+                          "Also the 4th font will display as system default font on excalidraw.com, or other Excalidraw versions.",
+  FOURTH_FONT_NAME: "Forth font file",
+  FOURTH_FONT_DESC: "Select a .ttf, .woff or .woff2 font file from your vault to use as the fourth font. " +
+                    "If no file is selected excalidraw will use the Virgil font by default.",
+              

  //openDrawings.ts
-  SELECT_FILE: "Select a file then press enter.",   
-  NO_MATCH: "No file matches your query.",  
-  SELECT_FILE_TO_LINK: "Select the file you want to insert the link for.",     
+  SELECT_FILE: "Select a file then press enter.",
+  NO_MATCH: "No file matches your query.",
+  SELECT_FILE_TO_LINK: "Select the file you want to insert the link for.",
+  SELECT_DRAWING: "Select the drawing you want to insert",
  TYPE_FILENAME: "Type name of drawing to select.",
-  SELECT_FILE_OR_TYPE_NEW: "Select existing drawing or type name of a new drawing then press Enter.",
+  SELECT_FILE_OR_TYPE_NEW:
+    "Select existing drawing or type name of a new drawing then press Enter.",
  SELECT_TO_EMBED: "Select the drawing to insert into active document.",
+  SELECT_MD: "Select the markdown document you want to insert",
+
+  //EmbeddedFileLoader.ts
+  INFINITE_LOOP_WARNING:
+    "EXCALIDRAW WARNING\nAborted loading embedded images due to infinite loop in file:\n",
 };
--- a/src/lang/locale/es.ts
+++ b/src/lang/locale/es.ts
@@ -1,3 +1,3 @@
 // Español

-export default {};
+export default {};
--- a/src/lang/locale/fr.ts
+++ b/src/lang/locale/fr.ts
@@ -1,3 +1,3 @@
 // français

-export default {};
+export default {};
--- a/src/lang/locale/hi.ts
+++ b/src/lang/locale/hi.ts
@@ -1,3 +1,3 @@
 // हिन्दी

-export default {};
+export default {};
--- a/src/lang/locale/id.ts
+++ b/src/lang/locale/id.ts
@@ -1,3 +1,3 @@
 // Bahasa Indonesia

-export default {};
+export default {};
--- a/src/lang/locale/ko.ts
+++ b/src/lang/locale/ko.ts
@@ -1,3 +1,3 @@
 // 한국어

-export default {};
+export default {};
--- a/src/lang/locale/nl.ts
+++ b/src/lang/locale/nl.ts
@@ -1,3 +1,3 @@
 // Nederlands

-export default {};
+export default {};
--- a/src/lang/locale/no.ts
+++ b/src/lang/locale/no.ts
@@ -1,3 +1,3 @@
 // Norsk

-export default {};
+export default {};
--- a/Show More
+++ b/Show More