1.4.12 - fixed lib export + preview without theme

markdown render
Merge pull request #263 from LukeWeidenwalker/fix-typos
2025-08-06 05:46:28 +00:00 · 2021-11-22 18:57:18 +01:00 · 2021-11-21 22:46:37 +01:00 · 2021-11-21 19:26:58 +01:00 · 2021-11-21 19:18:16 +01:00 · 2021-11-21 15:01:24 +01:00
33 changed files with 5861 additions and 2112 deletions
--- a/README.md
+++ b/README.md
@@ -1,185 +1,74 @@
-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!
-
-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. 
+# 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&)|

 # 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
+- 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.
+- 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,9 +2,12 @@
 ## Attributes and functions overview
 Here's the interface implemented by ExcalidrawAutomate:

-```javascript
-ExcalidrawAutomate: {
-  style: {
+```typescript
+export interface ExcalidrawAutomate {
+  plugin: ExcalidrawPlugin;
+  elementsDict: {};
+  imagesDict: {};
+  style: {
    strokeColor: string;
    backgroundColor: string;
    angle: number;
@@ -14,32 +17,123 @@ ExcalidrawAutomate: {
    roughness: number;
    opacity: number;
    strokeSharpness: StrokeSharpness;
-    fontFamily: FontFamily;
+    fontFamily: number;
    fontSize: number;
    textAlign: string;
    verticalAlign: string;
    startArrowHead: string;
    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, 
+    viewBackgroundColor: string, 
+    gridSize: number
+  };
+  setFillStyle (val:number): void;
+  setStrokeStyle (val:number): void;
+  setStrokeSharpness (val:number): void;
+  setFontFamily (val:number): void;
+  setTheme (val:number): void;
+  addToGroup (objectIds:[]):string;
+  toClipboard (templatePath?:string): void;
+  getElements ():ExcalidrawElement[];
+  getElement (id:string):ExcalidrawElement;
+  create (
+    params?: {
+      filename?: string, 
+      foldername?:string, 
+      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):Promise<SVGSVGElement>;
+  createPNG (templatePath?: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", 
+      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, color?:string):Promise<string>;
+  connectObjects (
+    objectA: string, 
+    connectionA: ConnectionPoint, 
+    objectB: string, 
+    connectionB: ConnectionPoint, 
+    formatting?: {
+      numberOfPoints?: number,
+      startArrowHead?:string,
+      endArrowHead?:string, 
+      padding?: number
+    }
+  ):void;
+  clear (): void;
+  reset (): void;
+  isExcalidrawFile (f:TFile): boolean;  
+  //view manipulation
+  targetView: ExcalidrawView;
+  setView (view:ExcalidrawView|"first"|"active"):ExcalidrawView;
+  getExcalidrawAPI ():any;
+  getViewElements ():ExcalidrawElement[];
+  deleteViewElements (el: ExcalidrawElement[]):boolean;
+  getViewSelectedElement ():ExcalidrawElement;
+  getViewSelectedElements ():ExcalidrawElement[];
+  viewToggleFullScreen (forceViewMode?:boolean):void;
+  connectObjectWithViewSelectedElement (
+    objectA:string,
+    connectionA: ConnectionPoint, 
+    connectionB: ConnectionPoint, 
+    formatting?: {
+      numberOfPoints?: number,
+      startArrowHead?:string,
+      endArrowHead?:string, 
+      padding?: number
+    }
+  ):boolean;
+  addElementsToView (repositionToCursor:boolean, save:boolean):Promise<boolean>;
+  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;
+}
+```
+
--- 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 your Automate scripts with the following code:

 *Use CTRL+Shift+V to paste code into Obsidian!*
 ```javascript
@@ -15,11 +15,11 @@ The second line resets ExcalidrawAutomate to defaults. This is important as you
 ### 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 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 +55,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
@@ -59,9 +59,5 @@ function buildMindmap(subtasks, depth, offset, parentObjectID) {
 tasks["objectID"] = ea.addText(width*1.5,width,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/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.4.12",
+	"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,6 +1,6 @@
 {
  "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": {
@@ -11,29 +11,32 @@
  "author": "",
  "license": "MIT",
  "dependencies": {
-    "@excalidraw/excalidraw": "^0.8.0",
+    "@zsviczian/excalidraw": "0.10.0-obsidian-12",
    "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.12.16",
    "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"
  }
 }
--- a/src/EmbeddedFileLoader.ts
+++ b/src/EmbeddedFileLoader.ts
@@ -0,0 +1,204 @@
+import { exportToBlob } from "@zsviczian/excalidraw";
+import { FileId } from "@zsviczian/excalidraw/types/element/types";
+import { BinaryFileData, DataURL } from "@zsviczian/excalidraw/types/types";
+import { App, Notice, TFile } from "obsidian";
+import { fileid, IMAGE_TYPES } from "./constants";
+import { ExcalidrawData } from "./ExcalidrawData";
+import ExcalidrawView, { ExportSettings } from "./ExcalidrawView";
+import { t } from "./lang/helpers";
+import { tex2dataURL } from "./LaTeX";
+import ExcalidrawPlugin from "./main";
+import {errorlog, getImageSize, svgToBase64 } from "./Utils";
+
+export declare type MimeType = "image/svg+xml" | "image/png" | "image/jpeg" | "image/gif" | "application/octet-stream";
+export type FileData = BinaryFileData & {
+  size: {
+    height: number;
+    width: number;
+  },
+  hasSVGwithBitmap: boolean
+};
+
+export class EmbeddedFilesLoader {
+  private plugin:ExcalidrawPlugin;
+  private processedFiles: Map<string,number> = new Map<string,number>();
+  private isDark:boolean;
+  public terminate=false;
+
+  constructor(plugin: ExcalidrawPlugin, isDark?:boolean) {
+    this.plugin = plugin;
+    this.isDark = isDark;
+  }
+
+  public async getObsidianImage (
+    file: TFile
+  ):Promise<{
+    mimeType: MimeType,
+    fileId: FileId, 
+    dataURL: DataURL,
+    created: number,
+    hasSVGwithBitmap: boolean,
+    size: {height: number, width: number},
+  }> {
+    if(!this.plugin || !file) return null;
+    //to block infinite loop of recursive loading of images
+    let 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.ea.isExcalidrawFile(file);
+    if (!(IMAGE_TYPES.contains(file.extension) || isExcalidrawFile)) {
+      return null;
+    }
+    const ab = await app.vault.readBinary(file);
+
+    const getExcalidrawSVG = async (isDark:boolean) => {
+      const exportSettings:ExportSettings = {
+        withBackground: false,
+        withTheme: false, 
+      };
+      this.plugin.ea.reset();
+      const svg = await this.plugin.ea.createSVG(file.path,true,exportSettings,this,null);    
+      //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": mimeType = "image/svg+xml";break;
+        default: mimeType = "application/octet-stream";
+      }
+    } 
+    const dataURL = excalidrawSVG ?? (file.extension==="svg" ? await getSVGData(app,file) : await getDataURL(ab,mimeType));
+    const size = await getImageSize(excalidrawSVG??app.vault.getResourcePath(file));
+    return {
+        mimeType,
+        fileId: await generateIdFromFile(ab),
+        dataURL,
+        created: file.stat.mtime,
+        hasSVGwithBitmap,
+        size
+    }
+  }
+
+  public async loadSceneFiles ( 
+    excalidrawData: ExcalidrawData,
+    view: ExcalidrawView,
+    addFiles:Function, 
+    sourcePath:string,
+  ) {
+      const app = this.plugin.app;
+      const entries = excalidrawData.getFileEntries();
+      if(this.isDark===undefined) {
+        this.isDark = excalidrawData.scene.appState.theme==="dark";
+      }
+      let entry;
+      let files:FileData[] = [];
+      while(!this.terminate && !(entry = entries.next()).done) {
+        if(!entry.value[1].isLoaded || entry.value[1].hasSVGwithBitmap) {
+          const file = app.metadataCache.getFirstLinkpathDest(entry.value[1].path,sourcePath);
+          if(file && file instanceof TFile) {
+            const data = await this.getObsidianImage(file);//,theme);
+            if(data) {
+              files.push({
+                mimeType : data.mimeType,
+                id: entry.value[0],
+                dataURL: data.dataURL,
+                created: data.created,
+                size: data.size,
+                hasSVGwithBitmap: data.hasSVGwithBitmap
+              });
+            }
+          }
+        }
+      }
+    
+      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;
+      try { //in try block because by the time files are loaded the user may have closed the view
+        addFiles(files,view);
+      } 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 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'}));
+  });
+};
+
+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) {
+    console.error(error);
+    id = fileid() as FileId;
+  }
+  return id;
+};
--- a/src/ExcalidrawAutomate.ts
+++ b/src/ExcalidrawAutomate.ts
--- a/src/ExcalidrawData.ts
+++ b/src/ExcalidrawData.ts
@@ -1,44 +1,106 @@
-import { App, normalizePath, TFile } from "obsidian";
+import { App, TFile } from "obsidian";
 import { 
  nanoid,
  FRONTMATTER_KEY_CUSTOM_PREFIX,
  FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS,
+  FRONTMATTER_KEY_CUSTOM_URL_PREFIX,
+  FRONTMATTER_KEY_DEFAULT_MODE,
 } from "./constants";
 import { measureText } from "./ExcalidrawAutomate";
 import ExcalidrawPlugin from "./main";
-import { ExcalidrawSettings } from "./settings";
 import {  
-  JSON_stringify,
  JSON_parse
 } from "./constants";
+import { TextMode } from "./ExcalidrawView";
+import { getAttachmentsFolderAndFilePath, getBinaryFileFromDataURL, getIMGFilename, isObsidianThemeDark, wrapText } from "./Utils";
+import { ExcalidrawImageElement, FileId } from "@zsviczian/excalidraw/types/element/types";
+import { BinaryFiles, SceneData } from "@zsviczian/excalidraw/types/types";

-//![[link|alias]]![alias](link)
-//1  2    3      4 5      6
-export const REG_LINK_BACKETS = /(!)?\[\[([^|\]]+)\|?(.+)?]]|(!)?\[(.*)\]\((.*)\)/g;
+type SceneDataWithFiles = SceneData & { files: BinaryFiles};

-export function getJSON(data:string):string {
-  const findJSON = /\n# Drawing\n(.*)/gm
-  const res = data.matchAll(findJSON);
-  const parts = res.next();
-  if(parts.value && parts.value.length>1) {
-    return parts.value[1];
+declare module "obsidian" {
+  interface MetadataCache {
+    blockCache: {
+      getForFile(x:any,f:TAbstractFile):any;
+    }
  }
-  return data;
+}
+
+export const REGEX_LINK = {
+  //![[link|alias]] [alias](link){num}
+  //      1  2     3           4        5      6  7     8  9
+  EXPR: /(!)?(\[\[([^|\]]+)\|?([^\]]+)?]]|\[([^\]]*)]\(([^)]*)\))(\{(\d+)\})?/g, //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/187
+  getRes: (text:string):IterableIterator<RegExpMatchArray> => {
+    return text.matchAll(REGEX_LINK.EXPR);
+  },
+  isTransclusion: (parts: IteratorResult<RegExpMatchArray, any>):boolean => {
+    return parts.value[1] ? true:false;
+  },
+  getLink: (parts: IteratorResult<RegExpMatchArray, any>):string => {
+    return parts.value[3] ? parts.value[3] : parts.value[6];
+  },
+  isWikiLink: (parts: IteratorResult<RegExpMatchArray, any>):boolean => {
+    return parts.value[3] ? true:false;
+  },
+  getAliasOrLink: (parts: IteratorResult<RegExpMatchArray, any>):string => {
+    return REGEX_LINK.isWikiLink(parts)
+           ? (parts.value[4] ? parts.value[4] : parts.value[3]) 
+           : (parts.value[5] ? parts.value[5] : parts.value[6]);
+  },
+  getWrapLength: (parts: IteratorResult<RegExpMatchArray, any>):number => {
+    return parts.value[8];
+  }
+}
+
+
+export const REG_LINKINDEX_HYPERLINK = /^\w+:\/\//;
+
+const DRAWING_REG = /\n# Drawing\n[^`]*(```json\n)([\s\S]*?)```/gm; //https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/182
+const DRAWING_REG_FALLBACK = /\n# Drawing\n(```json\n)?(.*)(```)?(%%)?/gm;
+export function getJSON(data:string):[string,number] {
+  let res = data.matchAll(DRAWING_REG);
+
+  //In case the user adds a text element with the contents "# Drawing\n"
+  let parts;
+  parts = res.next();
+  if(parts.done) { //did not find a match
+    res = data.matchAll(DRAWING_REG_FALLBACK);
+    parts = res.next();
+  }
+  if(parts.value && parts.value.length>1) {
+    const result = parts.value[2];
+    return [result.substr(0,result.lastIndexOf("}")+1),parts.value.index]; //this is a workaround in case sync merges two files together and one version is still an old version without the ```codeblock
+  }
+  return [data,parts.value ? parts.value.index : 0];
+}
+
+export function getMarkdownDrawingSection(jsonString: string) {
+  return '%%\n# Drawing\n'
+  + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'json\n' 
+  + jsonString + '\n'
+  + String.fromCharCode(96)+String.fromCharCode(96)+String.fromCharCode(96)+'\n%%';
 }

 export class ExcalidrawData {
  private textElements:Map<string,{raw:string, parsed:string}> = null; 
  public scene:any = null;
  private file:TFile = null;
-  private settings:ExcalidrawSettings;
  private app:App;
  private showLinkBrackets: boolean;
  private linkPrefix: string;
-  private allowParse: boolean = false;
+  private urlPrefix: string;
+  private textMode: TextMode = TextMode.raw;
+  private plugin: ExcalidrawPlugin;
+  public loaded: boolean = false;
+  private files:Map<FileId,{path:string,hasSVGwithBitmap:boolean,isLoaded:boolean}> = null; //fileId, path
+  private equations:Map<FileId,{latex:string,isLoaded:boolean}> = null; //fileId, path
+  private compatibilityMode:boolean = false;

  constructor(plugin: ExcalidrawPlugin) {
-    this.settings = plugin.settings;
+    this.plugin = plugin;
    this.app = plugin.app;
+    this.files = new Map<FileId,{path:string,hasSVGwithBitmap:boolean,isLoaded:boolean}>();
+    this.equations = new Map<FileId,{latex:string,isLoaded:boolean}>();
  }  

  /**
@@ -46,19 +108,27 @@ export class ExcalidrawData {
   * @param {TFile} file - the MD file containing the Excalidraw drawing
   * @returns {boolean} - true if file was loaded, false if there was an error
   */
-  public async loadData(data: string,file: TFile, allowParse:boolean):Promise<boolean> {
-    //console.log("Excalidraw.Data.loadData()",{data:data,allowParse:allowParse,file:file});
-
+  public async loadData(data: string,file: TFile, textMode:TextMode):Promise<boolean> {
+    this.loaded = false;
    this.file = file;
    this.textElements = new Map<string,{raw:string, parsed:string}>();
+    this.files.clear();
+    this.equations.clear();
+    this.compatibilityMode = false;

    //I am storing these because if the settings change while a drawing is open parsing will run into errors during save
    //The drawing will use these values until next drawing is loaded or this drawing is re-loaded
    this.setShowLinkBrackets();
    this.setLinkPrefix();  
+    this.setUrlPrefix();
    
    this.scene = null;
-    if (this.settings.syncExcalidraw) {
+
+    //In compatibility mode if the .excalidraw file was more recently updated than the .md file, then the .excalidraw file
+    //should be loaded as the scene.
+    //This feature is mostly likely only relevant to people who use Obsidian and Logseq on the same vault and edit .excalidraw
+    //drawings in Logseq.
+    if (this.plugin.settings.syncExcalidraw) {
      const excalfile = file.path.substring(0,file.path.lastIndexOf('.md')) + '.excalidraw';
      const f = this.app.vault.getAbstractFileByPath(excalfile);
      if(f && f instanceof TFile && f.stat.mtime>file.stat.mtime) { //the .excalidraw file is newer then the .md file
@@ -68,65 +138,139 @@ export class ExcalidrawData {
    }

    //Load scene: Read the JSON string after "# Drawing" 
-    let parts = data.matchAll(/\n# Drawing\n(.*)/gm).next();
-    if(!(parts.value && parts.value.length>1)) return false; //JSON not found or invalid
-    if(!this.scene) { //scene was not loaded from .excalidraw
-      this.scene = JSON_parse(parts.value[1]);
+    const [scene,pos] = getJSON(data);
+    if (pos === -1) {
+      return false; //JSON not found
+    }
+    if (!this.scene) {
+      this.scene = JSON_parse(scene); //this is a workaround to address when files are mereged by sync and one version is still an old markdown without the codeblock ```
    }
-    //Trim data to remove the JSON string
-    data = data.substring(0,parts.value.index);

-    //The Markdown # Text Elements take priority over the JSON text elements. 
-    //i.e. if the JSON is modified to reflect the MD in case of difference
+    if(!this.scene.files) {
+      this.scene.files = {}; //loading legacy scenes that do not yet have the files attribute.
+    }
+
+    if(this.plugin.settings.matchThemeAlways) {
+      this.scene.appState.theme = isObsidianThemeDark() ? "dark" : "light";
+    }
+
+    data = data.substring(0,pos);
+
+    //The Markdown # Text Elements take priority over the JSON text elements. Assuming the scenario in which the link was updated due to filename changes
+    //The .excalidraw JSON is modified to reflect the MD in case of difference
    //Read the text elements into the textElements Map
-    let position = data.search("# Text Elements");
-    if(position==-1) return true; //Text Elements header does not exist
-    position += "# Text Elements\n".length;
+    let position = data.search(/(^%%\n)?# Text Elements\n/m);
+    if(position==-1) {
+      await this.setTextMode(textMode,false);  
+      this.loaded = true;
+      return true; //Text Elements header does not exist
+    }
+    position += data.match(/((^%%\n)?# Text Elements\n)/m)[0].length
    
+    data = data.substring(position);
+    position = 0;
+
+    //iterating through all the text elements in .md
+    //Text elements always contain the raw value
    const BLOCKREF_LEN:number = " ^12345678\n\n".length;
-    const res = data.matchAll(/\s\^(.{8})\n/g);
+    let res = data.matchAll(/\s\^(.{8})[\n]+/g);
+    let parts;
    while(!(parts = res.next()).done) {
      const text = data.substring(position,parts.value.index);
-      this.textElements.set(parts.value[1],{raw: text, parsed: await this.parse(text)});
+      const id:string = parts.value[1];
+      this.textElements.set(id,{raw: text, parsed: await this.parse(text)});
+      //this will set the rawText field of text elements imported from files before 1.3.14, and from other instances of Excalidraw
+      const textEl = this.scene.elements.filter((el:any)=>el.id===id)[0];
+      if(textEl && (!textEl.rawText || textEl.rawText === "")) textEl.rawText = text; 
+
      position = parts.value.index + BLOCKREF_LEN;  
    }

+
+    data = data.substring(data.indexOf("# Embedded files\n")+"# Embedded files\n".length);
+    //Load Embedded files
+    const REG_FILEID_FILEPATH = /([\w\d]*):\s*\[\[([^\]]*)]]\n/gm;
+    res = data.matchAll(REG_FILEID_FILEPATH);
+    while(!(parts = res.next()).done) {
+      this.setFile(
+        parts.value[1] as FileId,
+        {
+          path:parts.value[2],
+          hasSVGwithBitmap:undefined,
+          isLoaded:false
+      });
+    }
+
+    //Load Equations
+    const REG_FILEID_EQUATION = /([\w\d]*):\s*\$\$(.*)(\$\$\s*\n)/gm;
+    res = data.matchAll(REG_FILEID_EQUATION);
+    while(!(parts = res.next()).done) {
+      this.setEquation(parts.value[1] as FileId,{latex:parts.value[2],isLoaded:false});
+    }
+
    //Check to see if there are text elements in the JSON that were missed from the # Text Elements section
    //e.g. if the entire text elements section was deleted.
    this.findNewTextElementsInScene();
-    await this.setAllowParse(allowParse,true);
+    await this.setTextMode(textMode,true);
+    this.loaded = true;
    return true;
  }

-  public async setAllowParse(allowParse:boolean,forceupdate:boolean=false) {
-    this.allowParse = allowParse;
+  public async loadLegacyData(data: string,file: TFile):Promise<boolean> {
+    this.compatibilityMode = true;
+    this.file = file;
+    this.textElements = new Map<string,{raw:string, parsed:string}>();
+    this.setShowLinkBrackets();
+    this.setLinkPrefix(); 
+    this.setUrlPrefix();
+    this.scene = JSON.parse(data);
+    if(!this.scene.files) {
+      this.scene.files = {}; //loading legacy scenes without the files element
+    }
+    if(this.plugin.settings.matchThemeAlways) {
+      this.scene.appState.theme = isObsidianThemeDark() ? "dark" : "light";
+    }
+    this.files.clear();
+    this.equations.clear();
+    this.findNewTextElementsInScene();
+    await this.setTextMode(TextMode.raw,true); //legacy files are always displayed in raw mode.
+    return true;
+  }
+
+  public async setTextMode(textMode:TextMode,forceupdate:boolean=false) {
+    this.textMode = textMode;
    await this.updateSceneTextElements(forceupdate);
  }

-  private async updateSceneTextElements(forceupdate:boolean=false) {
-    //console.log("Excalidraw.Data.updateSceneTextElements(), forceupdate",forceupdate);
-    //update a single text element in the scene if the newText is different
-    const update = (sceneTextElement:any, newText:string) => {
-      if(forceupdate || newText!=sceneTextElement.text) {
-        const measure = measureText(newText,sceneTextElement.fontSize,sceneTextElement.fontFamily);
-        sceneTextElement.text = newText;
-        sceneTextElement.width = measure.w;
-        sceneTextElement.height = measure.h;
-        sceneTextElement.baseline = measure.baseline;
-      }
+  //update a single text element in the scene if the newText is different
+  public updateTextElement(sceneTextElement:any, newText:string, forceUpdate:boolean = false) {
+    if(forceUpdate || newText!=sceneTextElement.text) {
+      const measure = measureText(newText,sceneTextElement.fontSize,sceneTextElement.fontFamily);
+      sceneTextElement.text = newText;
+      sceneTextElement.width = measure.w;
+      sceneTextElement.height = measure.h;
+      sceneTextElement.baseline = measure.baseline;
    }
+  }

+  /**
+   * Updates the TextElements in the Excalidraw scene based on textElements MAP in ExcalidrawData
+   * Depending on textMode, TextElements will receive their raw or parsed values
+   * @param forceupdate : will update text elements even if text contents has not changed, this will
+   * correct sizing issues
+   */
+  private async updateSceneTextElements(forceupdate:boolean=false) {
    //update text in scene based on textElements Map
    //first get scene text elements
    const texts = this.scene.elements?.filter((el:any)=> el.type=="text")
    for (const te of texts) {
-      update(te,await this.getText(te.id)); 
+      this.updateTextElement(te,(await this.getText(te.id))??te.text,forceupdate); //(await this.getText(te.id))??te.text serves the case when the whole #Text Elements section is deleted by accident
    }
  }

  private async getText(id:string):Promise<string> {
-    if (this.allowParse) {
-      if(!this.textElements.get(id)?.parsed) {
+    if (this.textMode == TextMode.parsed) {
+      if(!this.textElements.get(id).parsed) {
        const raw = this.textElements.get(id).raw;
        this.textElements.set(id,{raw:raw, parsed: await this.parse(raw)})
      }
@@ -134,7 +278,7 @@ export class ExcalidrawData {
      return this.textElements.get(id).parsed;
    } 
    //console.log("raw",this.textElements.get(id).raw);
-    return this.textElements.get(id).raw;
+    return this.textElements.get(id)?.raw;
  }

  /**
@@ -146,7 +290,7 @@ export class ExcalidrawData {
    //get scene text elements
    const texts = this.scene.elements?.filter((el:any)=> el.type=="text")

-    let jsonString = JSON_stringify(this.scene);
+    let jsonString = JSON.stringify(this.scene);

    let dirty:boolean = false; //to keep track if the json has changed
    let id:string; //will be used to hold the new 8 char long ID for textelements that don't yet appear under # Text Elements
@@ -160,14 +304,20 @@ export class ExcalidrawData {
        id=nanoid();
        jsonString = jsonString.replaceAll(te.id,id); //brute force approach to replace all occurances (e.g. links, groups,etc.)
      }
-      if(!this.textElements.has(id)) {
+      if(te.id.length > 8 && this.textElements.has(te.id)) { //element was created with onBeforeTextSubmit
+        const element = this.textElements.get(te.id);
+        this.textElements.set(id,{raw: element.raw, parsed: element.parsed})
+        this.textElements.delete(te.id); //delete the old ID from the Map
        dirty = true;
-        this.textElements.set(id,{raw: te.text, parsed: null});
-        this.parseasync(id,te.text);
+      } else if(!this.textElements.has(id)) {
+        dirty = true;
+        const raw = (te.rawText && te.rawText!==""?te.rawText:te.text); //this is for compatibility with drawings created before the rawText change on ExcalidrawTextElement
+        this.textElements.set(id,{raw: raw, parsed: null});
+        this.parseasync(id,raw);
      }
    }
    if(dirty) { //reload scene json in case it has changed
-      this.scene = JSON_parse(jsonString);
+      this.scene = JSON.parse(jsonString);
    }

    return dirty;
@@ -178,46 +328,15 @@ export class ExcalidrawData {
   * and updating the textElement map based on the text updated in the scene
   */
  private async updateTextElementsFromScene() {
-    //console.log("Excalidraw.Data.updateTextElementesFromScene()");
    for(const key of this.textElements.keys()){
      //find text element in the scene
      const el = this.scene.elements?.filter((el:any)=> el.type=="text" && el.id==key);
      if(el.length==0) {
        this.textElements.delete(key); //if no longer in the scene, delete the text element
      } else {
-        if(!this.textElements.has(key)) {
+        const text = await this.getText(key); 
+        if(text != el[0].text) {
          this.textElements.set(key,{raw: el[0].text,parsed: await this.parse(el[0].text)});
-        } else {
-          const text = await this.getText(key); 
-          if(text != el[0].text) {
-            this.textElements.set(key,{raw: el[0].text,parsed: await this.parse(el[0].text)});
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * update text element map by deleting entries that are no long in the scene
-   * and updating the textElement map based on the text updated in the scene
-   */
-   private updateTextElementsFromSceneRawOnly() {
-    //console.log("Excalidraw.Data.updateTextElementsFromSceneRawOnly()");
-    for(const key of this.textElements.keys()){
-      //find text element in the scene
-      const el = this.scene.elements?.filter((el:any)=> el.type=="text" && el.id==key);
-      if(el.length==0) {
-        this.textElements.delete(key); //if no longer in the scene, delete the text element
-      } else {
-        if(!this.textElements.has(key)) {
-          this.textElements.set(key,{raw: el[0].text,parsed: null});
-          this.parseasync(key,el[0].text);
-        } else {
-          const text = this.allowParse ? this.textElements.get(key).parsed : this.textElements.get(key).raw;
-          if(text != el[0].text) {
-            this.textElements.set(key,{raw: el[0].text,parsed: null});
-            this.parseasync(key,el[0].text);
-          }
        }
      }
    }
@@ -227,48 +346,134 @@ export class ExcalidrawData {
    this.textElements.set(key,{raw:raw,parsed: await this.parse(raw)});
  }

+  private parseLinks(text:string, position:number, parts:any):string {
+    return text.substring(position,parts.value.index) + 
+           (this.showLinkBrackets ? "[[" : "") +
+           REGEX_LINK.getAliasOrLink(parts) +
+           (this.showLinkBrackets ? "]]" : "");
+  }
+
+  /**
+   * 
+   * @param text 
+   * @returns [string,number] - the transcluded text, and the line number for the location of the text
+   */
+  public async getTransclusion (text:string):Promise<[string,number]> {
+    //file-name#^blockref
+    //1         2 3
+    const REG_FILE_BLOCKREF = /(.*)#(\^)?(.*)/g;
+    const parts=text.matchAll(REG_FILE_BLOCKREF).next();
+    if(!parts.done && !parts.value[1]) return [text,0]; //filename not found
+    const filename = parts.done ? text : parts.value[1];
+    const file = this.app.metadataCache.getFirstLinkpathDest(filename,this.file.path);
+    if(!file || !(file instanceof TFile)) return [text,0];
+    const contents = await this.app.vault.cachedRead(file);
+    if(parts.done) { //no blockreference
+      return([contents.substr(0,this.plugin.settings.pageTransclusionCharLimit),0]);
+    }
+    const isParagraphRef = parts.value[2] ? true : false; //does the reference contain a ^ character?
+    const id = parts.value[3]; //the block ID or heading text
+    const blocks = (await this.app.metadataCache.blockCache.getForFile({isCancelled: ()=>false},file)).blocks.filter((block:any)=>block.node.type!="comment");
+    if(!blocks) return [text,0];
+    if(isParagraphRef) {
+      let para = blocks.filter((block:any)=>block.node.id == id)[0]?.node;
+      if(!para) return [text,0];
+      if(["blockquote","listItem"].includes(para.type)) para = para.children[0]; //blockquotes are special, they have one child, which has the paragraph
+      const startPos = para.position.start.offset;
+      const lineNum = para.position.start.line;
+      const endPos = para.children[para.children.length-1]?.position.start.offset-1; //alternative: filter((c:any)=>c.type=="blockid")[0]
+      return [contents.substr(startPos,endPos-startPos),lineNum]
+    
+    } else {
+      const headings = blocks.filter((block:any)=>block.display.startsWith("#"));
+      let startPos:number = null; 
+      let lineNum:number = 0;
+      let endPos:number = null;
+      for(let i=0;i<headings.length;i++) {
+        if(startPos && !endPos) {
+          endPos = headings[i].node.position.start.offset-1;
+          return [contents.substr(startPos,endPos-startPos),lineNum];
+        }
+        if(!startPos && headings[i].node.children[0]?.value == id) {
+          startPos = headings[i].node.children[0]?.position.start.offset; //
+          lineNum = headings[i].node.children[0]?.position.start.line; //
+        }
+      }
+      if(startPos) return [contents.substr(startPos),lineNum];
+      return [text,0];
+    }
+  }
+
  /**
   * Process aliases and block embeds
   * @param text 
   * @returns 
   */
  private async parse(text:string):Promise<string>{
-    const getTransclusion = async (text:string) => {
-      //file-name#^blockref
-      //1          2
-      const REG_FILE_BLOCKREF = /(.*)#\^(.*)/g;
-      const parts=text.matchAll(REG_FILE_BLOCKREF).next();
-      if(parts.done || !parts.value[1] || !parts.value[2]) return text; //filename and/or blockref not found
-      const file = this.app.metadataCache.getFirstLinkpathDest(parts.value[1],this.file.path);
-      const contents = await this.app.vault.cachedRead(file);
-      //get transcluded line and take the part before ^blockref
-      const REG_TRANSCLUDE = new RegExp("(.*)\\s\\^" + parts.value[2]);
-      const res = contents.match(REG_TRANSCLUDE);
-      if(res) return res[1];
-      return text;//if blockref not found in file, return the input string
+    let outString = "";
+    let position = 0;
+    const res = REGEX_LINK.getRes(text);
+    let linkIcon = false;
+    let urlIcon = false;
+    let parts;
+    while(!(parts=res.next()).done) {
+      if (REGEX_LINK.isTransclusion(parts)) { //transclusion //parts.value[1] || parts.value[4]
+        const [contents,lineNum] = await this.getTransclusion(REGEX_LINK.getLink(parts));
+        outString += text.substring(position,parts.value.index) + 
+                     wrapText(contents,REGEX_LINK.getWrapLength(parts),this.plugin.settings.forceWrap);
+      } else {
+        const parsedLink = this.parseLinks(text,position,parts);
+        if(parsedLink) {
+          outString += parsedLink;
+          if(!(urlIcon || linkIcon))
+            if(REGEX_LINK.getLink(parts).match(REG_LINKINDEX_HYPERLINK)) urlIcon = true;  
+            else linkIcon = true;
+        }
+      } 
+      position = parts.value.index + parts.value[0].length;
    }
+    outString += text.substring(position,text.length);
+    if (linkIcon) {
+      outString = this.linkPrefix + outString;
+    }
+    if (urlIcon) {
+      outString = this.urlPrefix + outString;
+    }
+
+    return outString;
+  }
+
+  /**
+   * Does a quick parse of the raw text. Returns the parsed string if raw text does not include a transclusion.
+   * Return null if raw text includes a transclusion.
+   * This is implemented in a separate function, because by nature resolving a transclusion is an asynchronious
+   * activity. Quick parse gets the job done synchronously if possible.
+   * @param text 
+   */
+  private quickParse(text:string):string {
+    const hasTransclusion = (text:string):boolean => {
+      const res = REGEX_LINK.getRes(text);
+      let parts;
+      while(!(parts=res.next()).done) {
+        if (REGEX_LINK.isTransclusion(parts)) return true; 
+      }
+      return false;
+    }
+    if (hasTransclusion(text)) return null;

    let outString = "";
    let position = 0;
-    const res = text.matchAll(REG_LINK_BACKETS);
+    const res = REGEX_LINK.getRes(text);
    let linkIcon = false;
+    let urlIcon = false;
    let parts;
    while(!(parts=res.next()).done) {
-      if (parts.value[1] || parts.value[4]) { //transclusion
-        outString += text.substring(position,parts.value.index) + 
-                     await getTransclusion(parts.value[1] ? parts.value[2] : parts.value[6]);
-      } else if (parts.value[2]) {
-        linkIcon = true;
-        outString += text.substring(position,parts.value.index) + 
-                     (this.showLinkBrackets ? "[[" : "") +
-                     (parts.value[3] ? parts.value[3]:parts.value[2]) + //insert alias or link text
-                     (this.showLinkBrackets ? "]]" : "");
-      } else {
-        linkIcon = true;
-        outString += text.substring(position,parts.value.index) + 
-                     (this.showLinkBrackets ? "[[" : "") +
-                     (parts.value[5] ? parts.value[5]:parts.value[6]) + //insert alias or link text
-                     (this.showLinkBrackets ? "]]" : "");
+      const parsedLink = this.parseLinks(text,position,parts);
+      if(parsedLink) {
+        outString += parsedLink;
+        if(!(urlIcon || linkIcon))
+          if(REGEX_LINK.getLink(parts).match(REG_LINKINDEX_HYPERLINK)) urlIcon = true;  
+          else linkIcon = true;
      }
      position = parts.value.index + parts.value[0].length;
    }
@@ -276,37 +481,106 @@ export class ExcalidrawData {
    if (linkIcon) {
      outString = this.linkPrefix + outString;
    }
-
+    if (urlIcon) {
+      outString = this.urlPrefix + outString;
+    }
    return outString;
  }

+
  /**
   * Generate markdown file representation of excalidraw drawing
   * @returns markdown string
   */
  generateMD():string {
-    //console.log("Excalidraw.Data.generateMD()");
    let outString = '# Text Elements\n';
    for(const key of this.textElements.keys()){
      outString += this.textElements.get(key).raw+' ^'+key+'\n\n';
    }
-    return outString + '# Drawing\n' + JSON_stringify(this.scene);
+
+    outString += (this.equations.size>0 || this.files.size>0) ? '\n# Embedded files\n' : '';    
+    if(this.equations.size>0) {      
+      for(const key of this.equations.keys()) {
+        outString += key +': $$'+this.equations.get(key).latex + '$$\n';
+      }
+    }
+    if(this.files.size>0) {
+      for(const key of this.files.keys()) {
+        outString += key +': [['+this.files.get(key).path + ']]\n';
+      }
+    }
+    outString += (this.equations.size>0 || this.files.size>0) ? '\n' : '';
+
+
+    const sceneJSONstring = JSON.stringify(this.scene,null,"\t"); 
+    return outString + getMarkdownDrawingSection(sceneJSONstring);
  }

-  public syncElements(newScene:any):boolean {
-    //console.log("Excalidraw.Data.syncElements()");
-    this.scene = newScene;//JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
-    this.updateTextElementsFromSceneRawOnly();
-    return result;
+  private async syncFiles(scene:SceneDataWithFiles):Promise<boolean> {
+    let dirty = false;
+
+    //remove files and equations that no longer have a corresponding image element
+    const fileIds = (scene.elements.filter((e)=>e.type==="image") as ExcalidrawImageElement[]).map((e)=>e.fileId);
+    this.files.forEach((value,key)=>{
+      if(!fileIds.contains(key)) {
+        this.files.delete(key);
+        dirty = true;
+      }
+    });
+
+    this.equations.forEach((value,key)=>{
+      if(!fileIds.contains(key)) {
+        this.equations.delete(key);
+        dirty = true;
+      }
+    });
+
+    //check if there are any images that need to be processed in the new scene
+    if(!scene.files || scene.files == {}) return false;
+    
+    for(const key of Object.keys(scene.files)) {
+      if(!(this.hasFile(key as FileId) || this.hasEquation(key as FileId))) {
+        dirty = true;
+        let fname = "Pasted Image "+window.moment().format("YYYYMMDDHHmmss_SSS");
+        switch(scene.files[key].mimeType) {
+          case "image/png": fname += ".png"; break;
+          case "image/jpeg": fname += ".jpg"; break;
+          case "image/svg+xml": fname += ".svg"; break;
+          case "image/gif": fname += ".gif"; break;
+          default: fname += ".png"; 
+        }
+        const [folder,filepath] = await getAttachmentsFolderAndFilePath(this.app,this.file.path,fname);
+        await this.app.vault.createBinary(filepath,getBinaryFileFromDataURL(scene.files[key].dataURL));
+        this.setFile(
+          key as FileId,
+          {
+            path:filepath,
+            hasSVGwithBitmap:false,
+            isLoaded:true
+        });
+      }
+    }    
+    return dirty;
+  }
+
+  public async syncElements(newScene:any):Promise<boolean> {
+    this.scene = newScene;
+    let result = false;
+    if(!this.compatibilityMode) {
+      result = await this.syncFiles(newScene);
+      this.scene.files = {};
+    }
+    result = result || this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets();
+    await this.updateTextElementsFromScene();
+    return result || this.findNewTextElementsInScene();
  }

  public async updateScene(newScene:any){
    //console.log("Excalidraw.Data.updateScene()");
    this.scene = JSON_parse(newScene);
-    const result = this.setLinkPrefix() || this.setShowLinkBrackets() || this.findNewTextElementsInScene();
+    const result = this.setLinkPrefix() || this.setUrlPrefix() || this.setShowLinkBrackets();
    await this.updateTextElementsFromScene();
-    if(result) {
+    if(result || this.findNewTextElementsInScene()) {
      await this.updateSceneTextElements();
      return true;
    };
@@ -316,6 +590,48 @@ export class ExcalidrawData {
  public getRawText(id:string) {  
    return this.textElements.get(id)?.raw;
  }
+  
+  public getParsedText(id:string):string {
+    return this.textElements.get(id)?.parsed;
+  }
+
+  public setTextElement(elementID:string, rawText:string, updateScene:Function):string {
+    const parseResult = this.quickParse(rawText); //will return the parsed result if raw text does not include transclusion
+    if(parseResult) { //No transclusion
+      this.textElements.set(elementID,{raw: rawText,parsed: parseResult});
+      return parseResult;
+    }
+    //transclusion needs to be resolved asynchornously
+    this.parse(rawText).then((parsedText:string)=> {
+      this.textElements.set(elementID,{raw: rawText,parsed: parsedText});
+      if(parsedText) updateScene(parsedText);
+    });
+    return null;
+  }
+
+  public async addTextElement(elementID:string, rawText:string):Promise<string> {
+    const parseResult = await this.parse(rawText);
+    this.textElements.set(elementID,{raw: rawText,parsed: parseResult});
+    return parseResult;
+  }
+
+  public deleteTextElement(id:string) {
+    this.textElements.delete(id);
+  }
+
+  public getOpenMode():{viewModeEnabled:boolean,zenModeEnabled:boolean} {
+    const fileCache = this.app.metadataCache.getFileCache(this.file);
+    let mode = this.plugin.settings.defaultMode;
+    if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_DEFAULT_MODE]!=null) {
+      mode = fileCache.frontmatter[FRONTMATTER_KEY_DEFAULT_MODE];
+    }
+
+    switch(mode) {
+      case "zen": return {viewModeEnabled:false,zenModeEnabled:true};
+      case "view": return {viewModeEnabled:true,zenModeEnabled:false};
+      default: return {viewModeEnabled:false,zenModeEnabled:false};
+    }
+  }

  private setLinkPrefix():boolean {
    const linkPrefix = this.linkPrefix;
@@ -323,20 +639,117 @@ export class ExcalidrawData {
    if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_PREFIX]!=null) {
      this.linkPrefix=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_PREFIX];
    } else {
-      this.linkPrefix = this.settings.linkPrefix;
+      this.linkPrefix = this.plugin.settings.linkPrefix;
    }
    return linkPrefix != this.linkPrefix;
  }

+  private setUrlPrefix():boolean {
+    const urlPrefix = this.urlPrefix;
+    const fileCache = this.app.metadataCache.getFileCache(this.file);
+    if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_URL_PREFIX]!=null) {
+      this.urlPrefix=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_URL_PREFIX];
+    } else {
+      this.urlPrefix = this.plugin.settings.urlPrefix;
+    }
+    return urlPrefix != this.urlPrefix;
+  }
+
  private setShowLinkBrackets():boolean {
    const showLinkBrackets = this.showLinkBrackets;
    const fileCache = this.app.metadataCache.getFileCache(this.file);
    if (fileCache?.frontmatter && fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS]!=null) {
      this.showLinkBrackets=fileCache.frontmatter[FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS]!=false;
    } else {
-      this.showLinkBrackets = this.settings.showLinkBrackets;
+      this.showLinkBrackets = this.plugin.settings.showLinkBrackets;
    }
    return showLinkBrackets != this.showLinkBrackets;
  }

+  
+  /*
+  // Files and equations copy/paste support
+  // This is not a complete solution, it assumes the source document is opened first
+  // at that time the fileId is stored in the master files/equations map
+  // when pasted the map is checked if the file already exists
+  // This will not work if pasting from one vault to another, but for the most common usecase 
+  // of copying an image or equation from one drawing to another within the same vault
+  // this is going to do the job
+  */
+  public setFile(fileId:FileId, data:{path:string,hasSVGwithBitmap:boolean,isLoaded:boolean}) {
+    //always store absolute path because in case of paste, relative path may not resolve ok
+    const file = this.app.metadataCache.getFirstLinkpathDest(data.path,this.file.path);
+    const p = file?.path ?? data.path;
+    this.files.set(
+      fileId,
+      {
+        path:p,
+        hasSVGwithBitmap:data.hasSVGwithBitmap,
+        isLoaded:data.isLoaded
+    });
+    this.plugin.filesMaster.set(
+      fileId,
+      {
+        path:p,
+        hasSVGwithBitmap:data.hasSVGwithBitmap
+    });
+  }
+
+  public getFile(fileId:FileId):{path:string,hasSVGwithBitmap?:boolean,isLoaded:boolean} {
+    return this.files.get(fileId);
+  }
+
+  public getFileEntries() {
+    return this.files.entries();
+  }
+
+  public deleteFile(fileId:FileId) {
+    this.files.delete(fileId);
+    //deliberately not deleting from plugin.filesMaster
+    //could be present in other drawings as well
+  }
+
+  //Image copy/paste support
+  public hasFile(fileId:FileId):boolean {
+    if(this.files.has(fileId)) return true;
+    if(this.plugin.filesMaster.has(fileId)) {
+      this.files.set(
+        fileId,
+        {
+          isLoaded:false,
+          ...this.plugin.filesMaster.get(fileId)
+      });
+      return true;
+    }
+    return false;
+  } 
+
+  public setEquation(fileId:FileId, data:{latex:string,isLoaded:boolean}) {
+    this.equations.set(fileId,{latex:data.latex,isLoaded:data.isLoaded});
+    this.plugin.equationsMaster.set(fileId,data.latex);
+  }
+
+  public getEquation(fileId: FileId):{latex:string,isLoaded:boolean} {
+    return this.equations.get(fileId);
+  }
+
+  public getEquationEntries() {
+    return this.equations.entries();
+  }
+
+  public deleteEquation(fileId:FileId) {
+    this.equations.delete(fileId);
+    //deliberately not deleting from plugin.equationsMaster
+    //could be present in other drawings as well
+  }
+
+  //Image copy/paste support
+  public hasEquation(fileId:FileId):boolean {
+    if(this.equations.has(fileId)) return true;
+    if(this.plugin.equationsMaster.has(fileId)) {
+      this.equations.set(fileId,{latex:this.plugin.equationsMaster.get(fileId),isLoaded:false});
+      return true;
+    }
+    return false;
+  }
 }
--- a/src/ExcalidrawView.ts
+++ b/src/ExcalidrawView.ts
--- a/src/InsertImageDialog.ts
+++ b/src/InsertImageDialog.ts
@@ -0,0 +1,55 @@
+import { 
+  App, 
+  FuzzySuggestModal, 
+  TFile 
+} from "obsidian";
+import { IMAGE_TYPES } from "./constants";
+import { ExcalidrawAutomate } from "./ExcalidrawAutomate";
+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, _evt: MouseEvent | KeyboardEvent): 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/InsertLinkDialog.ts
+++ b/src/InsertLinkDialog.ts
@@ -0,0 +1,43 @@
+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(): TFile[] {
+    return this.app.vault.getFiles();
+  }
+
+  getItemText(item: TFile): string {
+    return item.path; 
+  }
+
+  onChooseItem(item: TFile, _evt: MouseEvent | KeyboardEvent): void {
+    const filepath = this.app.metadataCache.fileToLinktext(item,this.drawingPath,true);
+    this.addText("[["+filepath+"]]"); 
+  }
+
+  public start(drawingPath:string, addText: Function) {
+    this.addText = addText;
+    this.drawingPath = drawingPath;
+    this.open();
+  }
+}
--- a/src/LaTeX.ts
+++ b/src/LaTeX.ts
@@ -0,0 +1,109 @@
+import { BinaryFileData, 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) {
+    let 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/MigrationPrompt.ts
+++ b/src/MigrationPrompt.ts
@@ -1,53 +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: ""} , (el) => {
-      el.innerHTML = "<b>⚠ ATTENTION</b>: Drawings you've 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: ""}, (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</code> to convert all of your *.excalidraw files now, or if you prefer to make a backup first, then click <code>CANCEL</code>.</li>" +
-                     "<li>Using the Command Palette select <code>Excalidraw: Convert *.excalidraw files to *.excalidraw.md files</code></li>" + 
-                     "<li>Right click an *.excalidraw file in File Explorer and select one of the following to convert files individually: <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></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 = (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,265 @@
+import { App, Modal, Notice, TFile } from "obsidian";
+import { FRONTMATTER_KEY } from "./constants";
+import { ExcalidrawData, getJSON } from "./ExcalidrawData";
+import { getTextMode, TextMode } from "./ExcalidrawView";
+import ExcalidrawPlugin from "./main";
+
+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;
+
+    console.log(window.moment().format("HH:mm:ss") + ": Excalidraw will patch drawings in 5 minutes");
+    setTimeout(async ()=>{
+      await plugin.loadSettings();
+      if (!plugin.settings.patchCommentBlock) {
+        console.log(window.moment().format("HH:mm:ss") + ": Excalidraw patching aborted because synched data.json is already patched");
+        return;
+      }
+      console.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 [json,pos] = getJSON(drawing);
+            drawing = drawing.substr(0,pos)+"\n%%\n# Drawing\n```json\n"+json+"\n```%%";
+          };
+          if (drawing !== orig_drawing) {
+            i++;
+            console.log("Excalidraw patched: " + f.path);
+            await plugin.app.vault.modify(f,drawing);   
+          }
+        }
+      }
+      plugin.settings.patchCommentBlock = false;
+      plugin.saveSettings();
+      console.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;
+
+    console.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)) {
+        console.log(window.moment().format("HH:mm:ss") + ": Excalidraw patching aborted because synched data.json is already patched");
+        return;
+      }
+      console.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++;
+                console.log("Excalidraw patched: " + f.path);
+                await plugin.app.vault.modify(f,newData);   
+              }
+            }
+          } catch (e) {
+            console.log("Unable to process: "+f.path,{error:e});
+          }
+        }
+      }
+      plugin.settings.runWYSIWYGpatch = false;
+      plugin.settings.fixInfinitePreviewLoop = false;
+      plugin.saveSettings();
+      console.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 = (ev)=>{
+      this.plugin.convertExcalidrawToMD();   
+      this.close();
+    };
+    const bCancel = div.createEl('button', {text: "CANCEL"});
+    bCancel.onclick = (ev)=>{
+      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 = (ev)=>{
+        this.saveChanges = true;
+        this.close();
+      }  
+
+      const bCancel = el.createEl('button', {text: "CANCEL - Read next time"});
+      bCancel.onclick = (ev)=>{
+        this.saveChanges = false;
+        this.close();
+      };
+
+
+    });
+  }
+}
--- a/src/Prompt.ts
+++ b/src/Prompt.ts
@@ -4,7 +4,7 @@ export class Prompt extends Modal {
    private promptEl: HTMLInputElement;
    private resolve: (value: string) => void;

-    constructor(app: App, private prompt_text: string, private default_value: string) {
+    constructor(app: App, private prompt_text: string, private default_value: string, private placeholder:string) {
        super(app);
    }

@@ -19,7 +19,7 @@ export class Prompt extends Modal {

    createForm(): void {
        const div = this.contentEl.createDiv();
-        div.addClass("excalidarw-prompt-div");
+        div.addClass("excalidraw-prompt-div");

        const form = div.createEl("form");
        form.addClass("excalidraw-prompt-form");
@@ -32,7 +32,7 @@ export class Prompt extends Modal {

        this.promptEl = form.createEl("input");
        this.promptEl.type = "text";
-        this.promptEl.placeholder = "$\\theta$";
+        this.promptEl.placeholder = this.placeholder;
        this.promptEl.value = this.default_value ?? "";
        this.promptEl.addClass("excalidraw-prompt-input")
        this.promptEl.select();
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -0,0 +1,309 @@
+import {exportToSvg, exportToBlob} from "@zsviczian/excalidraw";
+import {  App, normalizePath, TAbstractFile, TFile, TFolder, Vault, WorkspaceLeaf } from "obsidian";
+import { Random } from "roughjs/bin/math";
+import { Zoom } from "@zsviczian/excalidraw/types/types";
+import { CASCADIA_FONT, VIRGIL_FONT } from "./constants";
+import ExcalidrawPlugin from "./main";
+import { ExcalidrawElement, FileId } 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;
+  }
+}
+
+/**
+ * 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} {
+  const lastIndex = filepath.lastIndexOf("/");
+  return {
+    folderpath: normalizePath(filepath.substr(0,lastIndex)), 
+    filename: lastIndex==-1 ? filepath : filepath.substr(lastIndex+1),
+  };
+}
+
+/**
+ * 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) {
+  let 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);
+  let folder = vault.getAbstractFileByPath(folderpath);
+  if(folder && folder instanceof TFolder) return;
+  await vault.createFolder(folderpath);
+}
+
+let 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):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]+)(\\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 newLine1 = parts.value[2]?.includes("\n");
+    const newLine2 = parts.value[4]?.includes("\n");
+    if(newLine1) outstring += parts.value[2];
+    if(newLine2) outstring += parts.value[4];
+    if(!(newLine1 || newLine2)) 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) [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 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 (var 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<[string,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,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 : true) : 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 : true) : false,
+        ... scene.appState,},
+      files: scene.files,
+      mimeType: "image/png",
+      getDimensions: (width:number, height:number) => ({ width:width*scale, height:height*scale, scale:scale })
+    });
+  } catch (error) {
+    console.log(error);
+    return null;
+  }
+}
+
+export const embedFontsInSVG = (svg:SVGSVGElement):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 defs = svg.querySelector("defs");
+  if (defs && (includesCascadia || includesVirgil)) {
+    defs.innerHTML = "<style>" + (includesVirgil ? VIRGIL_FONT : "") + (includesCascadia ? CASCADIA_FONT : "")+"</style>";
+  }
+  return svg;
+}
+
+export const getImageSize = async (src:string):Promise<{height:number, width:number}> => {
+  return new Promise((resolve, reject) => {
+    let 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):[boolean,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 const errorlog = (data:{}) => {
+  console.log({plugin:"Excalidraw",...data});
+}
+
+export const sleep = async (ms:number) => {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+//export const debug = console.log.bind(window.console);
+//export const debug = function(){};
--- a/src/constants.ts
+++ b/src/constants.ts
--- a/src/lang/locale/en.ts
+++ b/src/lang/locale/en.ts
@@ -1,121 +1,192 @@
-import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX } from "src/constants";
-
-// English
-export default {
-  // main.ts
-  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",
-  CONVERT_FILE_KEEP_EXT: "*.excalidraw => *.excalidraw.md",
-  CONVERT_FILE_REPLACE_EXT: "*.excalidraw => *.md (Logseq compatibility)",
-  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",
-  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",
-  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",
-  INSERT_LINK: "Insert link to file",
-  INSERT_LATEX: "Insert LaTeX-symbol (e.g. $\\theta$)",
-  ENTER_LATEX: "Enter a valid LaTeX expression",
-  
-  //ExcalidrawView.ts
-  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)",
-  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.",
-  NOFILE: "Excalidraw (no file)",
-
-  //settings.ts
-  FOLDER_NAME: "Excalidraw folder",
-  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",
-  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.",
-  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_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]].",
-  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.",
-  EMBED_HEAD: "Embed & Export",
-  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.",
-  EXPORT_BACKGROUND_NAME: "Export image with background",
-  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_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 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_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_PNG_NAME: "Auto-export PNG",
-  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",
-
-  //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.",     
-  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_TO_EMBED: "Select the drawing to insert into active document.",
-};
+import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX, FRONTMATTER_KEY_CUSTOM_URL_PREFIX } from "src/constants";
+
+// English
+export default {
+  // main.ts
+  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",
+  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",
+  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",
+  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 RAW/PREVIEW",
+  INSERT_LINK: "Insert link to file",
+  INSERT_IMAGE: "Insert image 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
+  OPEN_AS_MD: "Open as Markdown",
+  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",
+  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.",
+  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.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.",
+  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.",
+  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_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",
+  /*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 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 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.",
+  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",   
+  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: "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_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 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_PNG_NAME: "Auto-export PNG",
+  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",
+
+
+  //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_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_TO_EMBED: "Select the drawing to insert into active document.",
+
+  //EmbeddedFileLoader.ts
+  INFINITE_LOOP_WARNING: "EXCALIDRAW WARNING\nAborted loading embedded images due to infinite loop in file:\n",
+};
--- a/src/lang/locale/zh-cn.ts
+++ b/src/lang/locale/zh-cn.ts
@@ -1,3 +1,140 @@
-// 简体中文
-
-export default {};
+// 简体中文
+
+import { FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS, FRONTMATTER_KEY_CUSTOM_PREFIX } from "src/constants";
+
+export default {
+  // main.ts
+  OPEN_AS_EXCALIDRAW: "打开为 Excalidraw 绘图",
+  TOGGLE_MODE: "在 Excalidraw 和 Markdown 模式之间切换",
+  CONVERT_NOTE_TO_EXCALIDRAW: "转换空白笔记为 Excalidraw 绘图",
+  CONVERT_EXCALIDRAW: "转换 *.excalidraw 为 *.md 文件",
+  CREATE_NEW : "新建 Excalidraw 绘图",
+  CONVERT_FILE_KEEP_EXT: "*.excalidraw 格式 => *.excalidraw.md 格式",
+  CONVERT_FILE_REPLACE_EXT: "*.excalidraw 格式 => *.md (Logseq compatibility) 格式",
+  DOWNLOAD_LIBRARY: "导出 stencil 库为 *.excalidrawlib 文件",
+  OPEN_EXISTING_NEW_PANE: "在新面板中打开已存在的绘图",
+  OPEN_EXISTING_ACTIVE_PANE: "在当前面板中打开已存在的绘图",
+  TRANSCLUDE: "嵌入绘图",
+  TRANSCLUDE_MOST_RECENT: "嵌入最近编辑的绘图",
+  NEW_IN_NEW_PANE: "在新面板中创建已存在的绘图",
+  NEW_IN_ACTIVE_PANE: "在当前面板中创建已存在的绘图",
+  NEW_IN_NEW_PANE_EMBED: "在新面板中创建已存在的绘图且嵌入到当前笔记中",
+  NEW_IN_ACTIVE_PANE_EMBED: "在当前面板中创建已存在的绘图且嵌入到当前笔记中",
+  EXPORT_SVG: "导出 SVG 文件到当前文件的目录中",
+  EXPORT_PNG: "导出 PNG 文件到当前文件的目录中",
+  TOGGLE_LOCK: "切换文本元素锁定模式",
+  INSERT_LINK: "在文件中插入链接",
+  INSERT_LATEX: "在文件中插入 LaTeX 符号 (e.g. $\\theta$)",
+  ENTER_LATEX: "输入一个 LaTeX 表达式",
+  
+  //ExcalidrawView.ts
+  OPEN_AS_MD: "打开为 Markdown 文件",
+  SAVE_AS_PNG: "保存成 PNG 文件到库里（CTRL/CMD 加左键点击来指定导出位置）",
+  SAVE_AS_SVG: "保存成 SVG 文件到库里（CTRL/CMD 加左键点击来指定导出位置）",
+  OPEN_LINK: "以链接的方式打开文本 \n（按住 SHIFT 来在新面板中打开）",
+  EXPORT_EXCALIDRAW: "导出为 .Excalidraw 文件",
+  LINK_BUTTON_CLICK_NO_TEXT: '选择带有外部链接或内部链接的文本。\n'+
+                             'SHIFT 加左键点击按钮来在新面板中打开链接。\n'+
+                             'CTRL/CMD 加左键在画布中点击文本元素也可以打开对应的链接。',
+  TEXT_ELEMENT_EMPTY: "文本元素没有链接任何东西.",
+  FILENAME_INVALID_CHARS: '文件名不能包含以下符号： * " \\  < > : | ?',
+  FILE_DOES_NOT_EXIST: "文件不存在。按住 ALT（或者 ALT + SHIFT）加左键点击来创建新文件。",
+  FORCE_SAVE: "强制保存以更新相邻面板中的嵌入。\n（请注意，自动保存始终处于开启状态）",
+  RAW: "文本元素正以原文模式显示。 单击按钮更改为预览模式。",
+  PARSED: "文本元素正以预览模式显示。 单击按钮更改为原文模式。",
+  NOFILE: "Excalidraw (没有文件)",
+  COMPATIBILITY_MODE: "*.excalidraw 文件以兼容模式打开。转换为新格式以获得完整的插件功能。",
+  CONVERT_FILE: "转换为新格式",
+
+  //settings.ts
+  FOLDER_NAME: "Excalidraw 文件夹",
+  FOLDER_DESC: "新绘图的默认位置。如果此处为空，将在 Vault 根目录中创建绘图。",
+  TEMPLATE_NAME: "Excalidraw 模板文件",
+  TEMPLATE_DESC: "Excalidraw 模板的完整文件路径。" +
+                 "例如：如果您的模板在默认的 Excalidraw 文件夹中且它的名称是" +
+                 "Template.md，你应当设置为：Excalidraw/Template.md。" + 
+                 "如果您在兼容模式下使用 Excalidraw，那么您的模板也必须是旧的 excalidraw 文件，" + 
+                 "例如 Excalidraw/Template.excalidraw。",
+  AUTOSAVE_NAME: "自动保存",
+  AUTOSAVE_DESC: "每 30 秒自动保存编辑中的绘图。当您关闭 Excalidraw 或 Obsidian 或焦点移动到另一个面板时，通常会引发保存"+
+                 "在极少数情况下自动保存可能会稍微扰乱绘图流程。我在创建此功能时考虑到了手机端（安卓），" +
+                 "其中“滑到另一个应用程序”会导致一些数据丢失，并且因为我无法在手机上的应用程序" +
+                 " 终止时强制保存。如果您在桌面上使用 Excalidraw，这你可以关掉它。",
+  FILENAME_HEAD: "文件名",
+  FILENAME_DESC: "<p>自动生成的文件名包括一个前缀和一个日期。" + 
+                 "例如 'Drawing 2021-05-24 12.58.07'。</p>"+
+                 "<p>点击<a href='https://momentjs.com/docs/#/displaying/format/'>"+
+                 "日期和时间格式参考</a>来查看如何修改。</p>",
+  FILENAME_SAMPLE: "当前文件名的格式为：<b>",
+  FILENAME_PREFIX_NAME: "文件名前缀",
+  FILENAME_PREFIX_DESC: "文件名的第一部分",
+  FILENAME_DATE_NAME: "文件名日期",
+  FILENAME_DATE_DESC: "文件名的第二部分",
+  LINKS_HEAD: "链接",
+  LINKS_DESC: "CTRL/CMD 加左键点击文本元素来打开链接。" + 
+              "如果选中的文本指向多个双链，只会打开其中第一个。" + 
+              "如果选中的文本为超链接 (i.e. https:// or http://)，然后" +
+              "插件会在浏览器中打开超链接。" +
+              "当对应的文件名修改时，匹配的链接也会修改。" +
+              "如果你不希望你自己的链接文本突然修改，用别名来替代",
+  LINK_BRACKETS_NAME: "在链接上显示双链符号[[",
+  LINK_BRACKETS_DESC: "在预览（锁定）模式，当解析文本元素，在链接左右展示中括号。" +
+                      "你可以在文件的 Frontmatter 中加入'" + FRONTMATTER_KEY_CUSTOM_LINK_BRACKETS + 
+                      ": true/false' 来单独控制某个文件。",
+  LINK_PREFIX_NAME:"链接前缀",
+  LINK_PREFIX_DESC:"在预览（锁定）模式，如果文本元素包含链接，在文本之前加上这些字符。" +
+                   "你可以在文件的 Frontmatter 中加入 \'" + FRONTMATTER_KEY_CUSTOM_PREFIX + 
+                   ': "👉 "\' 单独更改',
+  LINK_CTRL_CLICK_NAME: "CTRL/CMD 加左键点击文本来打开链接",
+  LINK_CTRL_CLICK_DESC: "如果此功能干扰了您要使用的 Excalidraw 功能，您可以将其关闭。 如果" +
+                        "关闭此选项，则只有绘图标题栏中的链接按钮可以让你打开链接。",
+  EMBED_HEAD: "嵌入 & 导出",
+  EMBED_WIDTH_NAME: "嵌入图像的默认宽度",
+  EMBED_WIDTH_DESC: "嵌入图形的默认宽度。您可以在使用" +
+                    "![[drawing.excalidraw|100]] 或 [[drawing.excalidraw|100x100]]" +
+                    "格式指定嵌入图像时的宽度。",
+  EXPORT_PNG_SCALE_NAME: "PNG 导出图像比例",
+  EXPORT_PNG_SCALE_DESC: "导出的 PNG 图像的大小比例",
+  EXPORT_BACKGROUND_NAME: "导出带有背景的图像",
+  EXPORT_BACKGROUND_DESC: "如果关闭，导出的图像的背景将是透明的。",
+  EXPORT_THEME_NAME: "导出带有主题的图像",
+  EXPORT_THEME_DESC: "导出与绘图的暗/亮主题匹配的图像。" +
+                     "如果关闭，在深色模式下导出的绘图将和浅色模式下导出的图像一样",
+  EXPORT_HEAD: "导出设置",
+  EXPORT_SYNC_NAME:"保持 .SVG 和/或 .PNG 文件名与绘图文件同步",
+  EXPORT_SYNC_DESC:"打开后，当同一文件夹且同名的绘图被重命名时，插件将自动更新对应的 .SVG 和/或 .PNG 文件的文件名。" +
+                  "当同一文件夹的同一名称的绘图被删除时，该插件还将自动删除对应的 .SVG 和/或 .PNG 文件。",
+  EXPORT_SVG_NAME: "自动导出 SVG",
+  EXPORT_SVG_DESC: "自动导出和你文件同名的 SVG 文件" + 
+                   "插件会将 SVG 文件保存到对应的 Excalidraw 所在的文件夹中"+
+                   "将 .svg 文件嵌入到文档中，而不是 excalidraw，使您嵌入的页面独立开来" +
+                   "当自动导出开关打开时，每次您编辑对应的 excalidraw 绘图时，此文件都会更新。",
+  EXPORT_PNG_NAME: "自动导出 PNG",
+  EXPORT_PNG_DESC: "和自动导出 SVG 一样，但面向 *.PNG",
+  COMPATIBILITY_HEAD: "兼容特性",
+  EXPORT_EXCALIDRAW_NAME: "自动导出 Excalidraw 文件",
+  EXPORT_EXCALIDRAW_DESC: "和自动导出 SVG 一样，但面向 *.Excalidraw",
+  SYNC_EXCALIDRAW_NAME: "同步 .md 格式以及 .excalidraw 格式",
+  SYNC_EXCALIDRAW_DESC: "如果 *.excalidraw 文件的修改比 *.md 文件的修改更新" +
+                        "，会根据 .excalidraw 文件更新 .md 文件中的绘图",
+  COMPATIBILITY_MODE_NAME: "以旧格式创建新绘图",
+  COMPATIBILITY_MODE_DESC: "通过启用此功能图形，您可以使用功能区图标、命令面板操作、 "+
+                           "并且文件浏览器将仍旧保留 *.excalidraw 文件。 此设置还将" + 
+                           "关闭你打开旧格式绘图时的提醒消息",
+  EXPERIMENTAL_HEAD: "实验性特性",
+  EXPERIMENTAL_DESC: "这些设置不会立即生效，只有在刷新文件资源管理器或重新启动 Obsidian 时才会生效。",
+  FILETYPE_NAME: "在文件浏览器中给所有的 Excalidraw 文件加上 ✏️ 标识符",
+  FILETYPE_DESC: "Excalidraw 文件将使用下一个设置中定义的表情符号或文本来做标识。",
+  FILETAG_NAME: "给 Excalidraw 文件设置标识符",
+  FILETAG_DESC: "要显示为标识符的文本或表情符号。",                           
+
+
+
+  //openDrawings.ts
+  SELECT_FILE: "选择一个文件后按回车。",   
+  NO_MATCH: "没有文件匹配你的索引。",  
+  SELECT_FILE_TO_LINK: "选择要为其插入链接的文件。",     
+  TYPE_FILENAME: "键入要选择的绘图名称。",
+  SELECT_FILE_OR_TYPE_NEW: "选择现有绘图或新绘图的类型名称，然后按回车。",
+  SELECT_TO_EMBED: "选择要插入到当前文档中的绘图。",
+};
--- a/src/main.ts
+++ b/src/main.ts
--- a/src/mathjax.ts
+++ b/src/mathjax.ts
--- a/src/openDrawing.ts
+++ b/src/openDrawing.ts
@@ -12,7 +12,6 @@ import {t} from './lang/helpers'
 export enum openDialogAction {
  openFile,
  insertLinkToDrawing,
-  insertLink
 }

 export class OpenFileDialog extends FuzzySuggestModal<TFile> {
@@ -20,8 +19,6 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
  private plugin: ExcalidrawPlugin;
  private action: openDialogAction;
  private onNewPane: boolean;
-  private addText: Function;
-  private drawingPath: string;

  constructor(app: App, plugin: ExcalidrawPlugin) {
    super(app);
@@ -29,6 +26,11 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
    this.action = openDialogAction.openFile;
    this.plugin = plugin;
    this.onNewPane = false;
+    this.limit = 20;
+    this.setInstructions([{
+      command: t("TYPE_FILENAME"),
+      purpose: "",
+    }]);
    
    this.inputEl.onkeyup = (e) => {
      if(e.key=="Enter" && this.action == openDialogAction.openFile) {
@@ -42,10 +44,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {

  getItems(): TFile[] {
    const excalidrawFiles = this.app.vault.getFiles();
-    return (excalidrawFiles || []).filter((f:TFile) => {
-      if (this.action == openDialogAction.insertLink) return true;
-      return this.plugin.isExcalidrawFile(f);
-    });
+    return (excalidrawFiles || []).filter((f:TFile) => this.plugin.isExcalidrawFile(f));
  }

  getItemText(item: TFile): string {
@@ -60,32 +59,10 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
      case(openDialogAction.insertLinkToDrawing):
        this.plugin.embedDrawing(item.path);
        break;
-      case(openDialogAction.insertLink):
-        //TO-DO
-        const filepath = this.app.metadataCache.fileToLinktext(item,this.drawingPath,true);
-        this.addText("[["+filepath+"]]"); 
-        break;
    }
  }

-  public insertLink(drawingPath:string, addText: Function) {
-    this.action = openDialogAction.insertLink;
-    this.addText = addText;
-    this.drawingPath = drawingPath;
-    this.setInstructions([{
-      command: t("SELECT_FILE"),
-      purpose: "",
-    }]);
-    this.emptyStateText = t("NO_MATCH");
-    this.setPlaceholder(t("SELECT_FILE_TO_LINK"));
-    this.open();
-  }
-
  public start(action:openDialogAction, onNewPane: boolean): void {
-    this.setInstructions([{
-      command: t("TYPE_FILENAME"),
-      purpose: "",
-    }]);
    this.action = action;
    this.onNewPane = onNewPane;
    switch(action) {
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,7 +1,8 @@
 import {
  App, 
+  DropdownComponent, 
  PluginSettingTab, 
-  Setting
+  Setting,
 } from 'obsidian';
 import { VIEW_TYPE_EXCALIDRAW } from './constants';
 import ExcalidrawView from './ExcalidrawView';
@@ -13,21 +14,43 @@ export interface ExcalidrawSettings {
  templateFilePath: string,
  drawingFilenamePrefix: string,
  drawingFilenameDateTime: string,
+  displaySVGInPreview: boolean,
+  previewMatchObsidianTheme: boolean,
  width: string,
+  matchTheme: boolean,
+  matchThemeAlways: boolean,
+  matchThemeTrigger:boolean,
+  defaultMode: string,
+  zoomToFitOnResize: boolean,
+  zoomToFitMaxLevel: number,
+  openInAdjacentPane: boolean,
  showLinkBrackets: boolean,
  linkPrefix: string,
-  autosave: boolean;
+  urlPrefix: string,
  allowCtrlClick: boolean, //if disabled only the link button in the view header will open links 
+  forceWrap: boolean,
+  pageTransclusionCharLimit: number,
+  iframelyAllowed: boolean,
+  pngExportScale: number,
  exportWithTheme: boolean,
  exportWithBackground: boolean,
  keepInSync: boolean,
  autoexportSVG: boolean,
  autoexportPNG: boolean,
  autoexportExcalidraw: boolean,
+  embedType: "excalidraw"|"PNG"|"SVG",
  syncExcalidraw: boolean,
-  library: string,
+  compatibilityMode: boolean,
+  experimentalFileType: boolean,
+  experimentalFileTag: string,
  loadCount: number, //version 1.2 migration counter
  drawingOpenCount: number,
+  library: string,
+  library2: {},
+  patchCommentBlock: boolean, //1.3.12 
+  imageElementNotice: boolean, //1.4.0
+  runWYSIWYGpatch: boolean, //1.4.9
+  fixInfinitePreviewLoop: boolean, //1.4.10
 }

 export const DEFAULT_SETTINGS: ExcalidrawSettings = {
@@ -35,35 +58,102 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
  templateFilePath: 'Excalidraw/Template.excalidraw',
  drawingFilenamePrefix: 'Drawing ',
  drawingFilenameDateTime: 'YYYY-MM-DD HH.mm.ss',
+  displaySVGInPreview: true,
+  previewMatchObsidianTheme: false,
  width: '400',
-  linkPrefix: ">> ",
+  matchTheme: false,
+  matchThemeAlways: false,
+  matchThemeTrigger: false,
+  defaultMode: "normal",
+  zoomToFitOnResize: true,
+  zoomToFitMaxLevel: 2,
+  linkPrefix: "📍",
+  urlPrefix: "🌐",
+  openInAdjacentPane: false,
  showLinkBrackets: true,
-  autosave: false,
  allowCtrlClick: true,
+  forceWrap: false,
+  pageTransclusionCharLimit: 200,
+  iframelyAllowed: true,
+  pngExportScale: 1,
  exportWithTheme: true,
  exportWithBackground: true,
  keepInSync: false,
  autoexportSVG: false,
  autoexportPNG: false,
  autoexportExcalidraw: false,
+  embedType: "excalidraw",
  syncExcalidraw: false,
-  library: `{"type":"excalidrawlib","version":1,"library":[]}`,
+  experimentalFileType: false,
+  experimentalFileTag: "✏️",
+  compatibilityMode: false,
  loadCount: 0,
  drawingOpenCount: 0,
+  library: `deprecated`,
+  library2:  {
+    type: "excalidrawlib",
+    version: 2,
+    source: "https://excalidraw.com",
+    libraryItems: []
+  },
+  patchCommentBlock: true,
+  imageElementNotice: true,
+  runWYSIWYGpatch: true,
+  fixInfinitePreviewLoop: true
 }

 export class ExcalidrawSettingTab extends PluginSettingTab {
  plugin: ExcalidrawPlugin;
+  private requestEmbedUpdate:boolean = false;
+  private requestReloadDrawings:boolean = false;
+  private applyDebounceTimer: number = 0;

  constructor(app: App, plugin: ExcalidrawPlugin) {
    super(app, plugin);
    this.plugin = plugin;
  }

-  display(): void {
+  applySettingsUpdate(requestReloadDrawings:boolean = false) {
+    clearTimeout(this.applyDebounceTimer);
+    const plugin = this.plugin;
+    this.applyDebounceTimer = window.setTimeout(() => {
+      plugin.saveSettings();
+    }, 200);
+    if(requestReloadDrawings) this.requestReloadDrawings = true;
+  }
+
+  async hide() {
+    if(this.requestReloadDrawings) {
+      const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
+      for(const v of exs) {
+        if(v.view instanceof ExcalidrawView) {
+          await v.view.save(false);
+          await v.view.reload(true);
+        }
+      }
+      this.requestEmbedUpdate = true;
+    }
+    if(this.requestEmbedUpdate) this.plugin.triggerEmbedUpdates();
+  }
+
+  async display() {
+    await this.plugin.loadSettings(); //in case sync loaded changed settings in the background
+    this.requestEmbedUpdate = false;
+    this.requestReloadDrawings = false;
    let {containerEl} = this;
    this.containerEl.empty();

+    const coffeeDiv = containerEl.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;
+
+
    new Setting(containerEl)
    .setName(t("FOLDER_NAME")) 
    .setDesc(t("FOLDER_DESC"))
@@ -72,7 +162,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
      .setValue(this.plugin.settings.folder)
      .onChange(async (value) => {
        this.plugin.settings.folder = value;
-        await this.plugin.saveSettings();
+        this.applySettingsUpdate();
      }));

    new Setting(containerEl)
@@ -83,29 +173,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.templateFilePath)
        .onChange(async (value) => {
          this.plugin.settings.templateFilePath = value;
-          await this.plugin.saveSettings();
-        }));
-
-    new Setting(containerEl)
-      .setName(t("AUTOSAVE_NAME")) 
-      .setDesc(t("AUTOSAVE_DESC"))
-      .addToggle(toggle => toggle
-        .setValue(this.plugin.settings.autosave)
-        .onChange(async (value) => {
-          this.plugin.settings.autosave = value;
-          await this.plugin.saveSettings();
-          const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
-          for(const v of exs) {
-            if(v.view instanceof ExcalidrawView) {
-              if(v.view.autosaveTimer) {
-                clearInterval(v.view.autosaveTimer)
-                v.view.autosaveTimer = null;
-              }
-              if(value) { 
-                v.view.setupAutosaveTimer();
-              }
-            }
-          }          
+          this.applySettingsUpdate();
        }));

    this.containerEl.createEl('h1', {text: t("FILENAME_HEAD")});
@@ -133,7 +201,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
          this.plugin.settings.drawingFilenamePrefix = value.replaceAll(/[<>:"/\\|?*]/g,'_');
          text.setValue(this.plugin.settings.drawingFilenamePrefix);
          filenameEl.innerHTML = getFilenameSample();
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
        }));

    new Setting(containerEl)
@@ -146,23 +214,99 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
          this.plugin.settings.drawingFilenameDateTime = value.replaceAll(/[<>:"/\\|?*]/g,'_');
          text.setValue(this.plugin.settings.drawingFilenameDateTime);
          filenameEl.innerHTML = getFilenameSample();
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
+        }));  
+
+    this.containerEl.createEl('h1', {text: t("DISPLAY_HEAD")});
+
+    new Setting(containerEl)
+    .setName(t("MATCH_THEME_NAME")) 
+    .setDesc(t("MATCH_THEME_DESC"))
+    .addToggle(toggle => toggle
+      .setValue(this.plugin.settings.matchTheme)
+      .onChange(async (value) => {
+        this.plugin.settings.matchTheme = value;
+        this.applySettingsUpdate();
+      }));
+
+    new Setting(containerEl)
+      .setName(t("MATCH_THEME_ALWAYS_NAME")) 
+      .setDesc(t("MATCH_THEME_ALWAYS_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.matchThemeAlways)
+        .onChange(async (value) => {
+          this.plugin.settings.matchThemeAlways = value;
+          this.applySettingsUpdate();
+      }));
+
+    new Setting(containerEl)
+      .setName(t("MATCH_THEME_TRIGGER_NAME")) 
+      .setDesc(t("MATCH_THEME_TRIGGER_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.matchThemeTrigger)
+        .onChange(async (value) => {
+          this.plugin.settings.matchThemeTrigger = value;
+          this.applySettingsUpdate();
+      }));
+
+    new Setting(containerEl)
+      .setName(t("DEFAULT_OPEN_MODE_NAME")) 
+      .setDesc(t("DEFAULT_OPEN_MODE_DESC"))
+      .addDropdown(dropdown => dropdown
+        .addOption("normal","Normal Mode")
+        .addOption("zen","Zen Mode")
+        .addOption("view","View Mode")
+        .setValue(this.plugin.settings.defaultMode)
+        .onChange(async (value) => {
+          this.plugin.settings.defaultMode = value;
+          this.applySettingsUpdate();
+      }));
+
+
+    new Setting(containerEl)
+      .setName(t("ZOOM_TO_FIT_NAME")) 
+      .setDesc(t("ZOOM_TO_FIT_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.zoomToFitOnResize)
+        .onChange(async (value) => {
+          this.plugin.settings.zoomToFitOnResize = value;
+          this.applySettingsUpdate();
        }));

+    let zoomText:HTMLDivElement;
+
+    new Setting(containerEl)
+      .setName(t("ZOOM_TO_FIT_MAX_LEVEL_NAME"))
+      .setDesc(t("ZOOM_TO_FIT_MAX_LEVEL_DESC"))
+      .addSlider(slider => slider
+        .setLimits(0.5,10,0.5)
+        .setValue(this.plugin.settings.zoomToFitMaxLevel)
+        .onChange(async (value)=> {
+          zoomText.innerText = " " + value.toString();
+          this.plugin.settings.zoomToFitMaxLevel = value;
+          this.applySettingsUpdate();
+        }))
+        .settingEl.createDiv('',(el)=>{
+          zoomText = el;
+          el.style.minWidth = "2.3em";
+          el.style.textAlign = "right";
+          el.innerText = " " + this.plugin.settings.zoomToFitMaxLevel.toString();
+        });
+    
+
    this.containerEl.createEl('h1', {text: t("LINKS_HEAD")});
    this.containerEl.createEl('p',{
      text: t("LINKS_DESC")});
-    
-    const reloadDrawings = async () => {
-      const exs = this.plugin.app.workspace.getLeavesOfType(VIEW_TYPE_EXCALIDRAW);
-      for(const v of exs) {
-        if(v.view instanceof ExcalidrawView) {
-          await v.view.save(false);
-          v.view.reload(true);
-        }
-      }
-      this.plugin.triggerEmbedUpdates();
-    }
+
+      new Setting(containerEl)
+      .setName(t("ADJACENT_PANE_NAME")) 
+      .setDesc(t("ADJACENT_PANE_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.openInAdjacentPane)
+        .onChange(async (value) => {
+          this.plugin.settings.openInAdjacentPane = value;
+          this.applySettingsUpdate(true);
+        }));

    new Setting(containerEl)
      .setName(t("LINK_BRACKETS_NAME")) 
@@ -171,20 +315,29 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.showLinkBrackets)
        .onChange(async (value) => {
          this.plugin.settings.showLinkBrackets = value;
-          await this.plugin.saveSettings();
-          reloadDrawings();
+          this.applySettingsUpdate(true);
        }));
    
    new Setting(containerEl)
      .setName(t("LINK_PREFIX_NAME"))
      .setDesc(t("LINK_PREFIX_DESC"))
      .addText(text => text
-        .setPlaceholder('>> ')
+        .setPlaceholder(t("INSERT_EMOJI"))
        .setValue(this.plugin.settings.linkPrefix)
-        .onChange(async (value) => {
+        .onChange((value) => {
          this.plugin.settings.linkPrefix = value;
-          await this.plugin.saveSettings();
-          reloadDrawings();
+          this.applySettingsUpdate(true);
+        }));
+  
+    new Setting(containerEl)
+      .setName(t("URL_PREFIX_NAME"))
+      .setDesc(t("URL_PREFIX_DESC"))
+      .addText(text => text
+        .setPlaceholder(t("INSERT_EMOJI"))
+        .setValue(this.plugin.settings.urlPrefix)
+        .onChange(async (value) => {
+          this.plugin.settings.urlPrefix = value;
+          this.applySettingsUpdate(true);
        }));

    new Setting(containerEl)
@@ -194,11 +347,76 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.allowCtrlClick)
        .onChange(async (value) => {
          this.plugin.settings.allowCtrlClick = value;
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
        }));

+    const s = new Setting(containerEl)
+      .setName(t("TRANSCLUSION_WRAP_NAME")) 
+      .setDesc(t("TRANSCLUSION_WRAP_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.forceWrap)
+        .onChange(async (value) => {
+          this.plugin.settings.forceWrap = value;
+          this.applySettingsUpdate(true);
+        }));
+    s.descEl.innerHTML="<code>![[doc#^ref]]{number}</code> "+t("TRANSCLUSION_WRAP_DESC");
+
+    new Setting(containerEl)
+      .setName(t("PAGE_TRANSCLUSION_CHARCOUNT_NAME")) 
+      .setDesc(t("PAGE_TRANSCLUSION_CHARCOUNT_DESC"))
+      .addText(text => text
+        .setPlaceholder('Enter a number')
+        .setValue(this.plugin.settings.pageTransclusionCharLimit.toString())
+        .onChange(async (value) => {
+          const intVal = parseInt(value);
+          if(isNaN(intVal) && value!=="") {
+            text.setValue(this.plugin.settings.pageTransclusionCharLimit.toString());
+            return;
+          } 
+          this.requestEmbedUpdate = true;
+          if(value === "") {
+            this.plugin.settings.pageTransclusionCharLimit = 10;
+            this.applySettingsUpdate(true);
+            return;
+          }
+          this.plugin.settings.pageTransclusionCharLimit = intVal;
+          text.setValue(this.plugin.settings.pageTransclusionCharLimit.toString());
+          this.applySettingsUpdate(true);
+        }));  
+
+    new Setting(containerEl)
+      .setName(t("GET_URL_TITLE_NAME")) 
+      .setDesc(t("GET_URL_TITLE_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.iframelyAllowed)
+        .onChange(async (value) => {
+          this.plugin.settings.iframelyAllowed = value;
+          this.applySettingsUpdate();
+        }));
+  
    this.containerEl.createEl('h1', {text: t("EMBED_HEAD")});

+
+    new Setting(containerEl)
+    .setName(t("EMBED_PREVIEW_SVG_NAME")) 
+    .setDesc(t("EMBED_PREVIEW_SVG_DESC"))
+    .addToggle(toggle => toggle
+      .setValue(this.plugin.settings.displaySVGInPreview)
+      .onChange(async (value) => {
+        this.plugin.settings.displaySVGInPreview = value;
+        this.applySettingsUpdate();
+      }));
+
+    new Setting(containerEl)
+      .setName(t("PREVIEW_MATCH_OBSIDIAN_NAME")) 
+      .setDesc(t("PREVIEW_MATCH_OBSIDIAN_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.previewMatchObsidianTheme)
+        .onChange(async (value) => {
+          this.plugin.settings.previewMatchObsidianTheme = value;
+          this.applySettingsUpdate();
+        }));
+
    new Setting(containerEl)
      .setName(t("EMBED_WIDTH_NAME")) 
      .setDesc(t("EMBED_WIDTH_DESC"))
@@ -207,9 +425,62 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.width)
        .onChange(async (value) => {
          this.plugin.settings.width = value;
-          await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
-        }));
+          this.applySettingsUpdate();
+          this.requestEmbedUpdate = true;
+        }));  
+
+    let dropdown: DropdownComponent;
+
+    new Setting(containerEl)
+      .setName(t("EMBED_TYPE_NAME"))
+      .setDesc(t("EMBED_TYPE_DESC"))
+      .addDropdown(async (d:DropdownComponent) => {
+        dropdown = d;
+        dropdown.addOption("excalidraw","excalidraw")
+        if(this.plugin.settings.autoexportPNG) {
+          dropdown.addOption("PNG","PNG");
+        } else {
+          if(this.plugin.settings.embedType === "PNG") {
+            this.plugin.settings.embedType = "excalidraw";
+            this.applySettingsUpdate();
+          }
+        }
+        if(this.plugin.settings.autoexportSVG) {
+          dropdown.addOption("SVG","SVG");
+        } else {
+          if(this.plugin.settings.embedType === "SVG") {
+            this.plugin.settings.embedType = "excalidraw";
+            this.applySettingsUpdate();
+          }
+        }
+        dropdown
+          .setValue(this.plugin.settings.embedType)
+          .onChange(async (value)=>{
+            //@ts-ignore
+            this.plugin.settings.embedType = value;        
+            this.applySettingsUpdate();
+          });
+      });
+
+    let scaleText:HTMLDivElement;
+
+    new Setting(containerEl)
+      .setName(t("EXPORT_PNG_SCALE_NAME"))
+      .setDesc(t("EXPORT_PNG_SCALE_DESC"))
+      .addSlider(slider => slider
+        .setLimits(1,5,0.5)
+        .setValue(this.plugin.settings.pngExportScale)
+        .onChange(async (value)=> {
+          scaleText.innerText = " " + value.toString();
+          this.plugin.settings.pngExportScale = value;
+          this.applySettingsUpdate();
+        }))
+        .settingEl.createDiv('',(el)=>{
+          scaleText = el;
+          el.style.minWidth = "2.3em";
+          el.style.textAlign = "right";
+          el.innerText = " " + this.plugin.settings.pngExportScale.toString();
+        });

    new Setting(containerEl)
      .setName(t("EXPORT_BACKGROUND_NAME")) 
@@ -218,8 +489,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.exportWithBackground)
        .onChange(async (value) => {
          this.plugin.settings.exportWithBackground = value;
-          await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
+          this.applySettingsUpdate();
+          this.requestEmbedUpdate = true;
        }));
    
    new Setting(containerEl)
@@ -229,8 +500,8 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.exportWithTheme)
        .onChange(async (value) => {
          this.plugin.settings.exportWithTheme = value;
-          await this.plugin.saveSettings();
-          this.plugin.triggerEmbedUpdates();
+          this.applySettingsUpdate();
+          this.requestEmbedUpdate = true;
        }));
    
    this.containerEl.createEl('h1', {text: t("EXPORT_HEAD")});
@@ -242,17 +513,35 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.keepInSync)
        .onChange(async (value) => {
          this.plugin.settings.keepInSync = value;
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
        }));
        
+    const removeDropdownOption = (opt: string) => {
+      let i=0;
+      for(i=0;i<dropdown.selectEl.options.length;i++) {
+        if((dropdown.selectEl.item(i) as HTMLOptionElement).label===opt) {
+          dropdown.selectEl.item(i).remove();
+        }
+      }
+    }
+
    new Setting(containerEl)
      .setName(t("EXPORT_SVG_NAME")) 
      .setDesc(t("EXPORT_SVG_DESC"))
      .addToggle(toggle => toggle
        .setValue(this.plugin.settings.autoexportSVG)
        .onChange(async (value) => {
+          if(value) {
+            dropdown.addOption("SVG","SVG");
+          } else {
+            if (this.plugin.settings.embedType === "SVG") {
+              dropdown.setValue("excalidraw");
+              this.plugin.settings.embedType = "excalidraw";
+            }
+            removeDropdownOption("SVG");
+          }
          this.plugin.settings.autoexportSVG = value;
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
        }));

        
@@ -262,12 +551,31 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
    .addToggle(toggle => toggle
      .setValue(this.plugin.settings.autoexportPNG)
      .onChange(async (value) => {
+        if(value) {
+          dropdown.addOption("PNG","PNG");
+        } else {
+          if (this.plugin.settings.embedType === "PNG") {
+            dropdown.setValue("excalidraw");
+            this.plugin.settings.embedType = "excalidraw";
+          }
+          removeDropdownOption("PNG");
+        }
        this.plugin.settings.autoexportPNG = value;
-        await this.plugin.saveSettings();
+        this.applySettingsUpdate();
      }));
-          
+         
    this.containerEl.createEl('h1', {text: t("COMPATIBILITY_HEAD")});

+    new Setting(containerEl)
+    .setName(t("COMPATIBILITY_MODE_NAME")) 
+    .setDesc(t("COMPATIBILITY_MODE_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.compatibilityMode)
+        .onChange(async (value) => {
+          this.plugin.settings.compatibilityMode = value;
+          this.applySettingsUpdate();
+        }));
+
    new Setting(containerEl)
    .setName(t("EXPORT_EXCALIDRAW_NAME")) 
    .setDesc(t("EXPORT_EXCALIDRAW_DESC"))
@@ -275,7 +583,7 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
        .setValue(this.plugin.settings.autoexportExcalidraw)
        .onChange(async (value) => {
          this.plugin.settings.autoexportExcalidraw = value;
-          await this.plugin.saveSettings();
+          this.applySettingsUpdate();
        }));

    new Setting(containerEl)
@@ -285,8 +593,32 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
          .setValue(this.plugin.settings.syncExcalidraw)
          .onChange(async (value) => {
            this.plugin.settings.syncExcalidraw = value;
-            await this.plugin.saveSettings();
+            this.applySettingsUpdate();
          }));
-    
+
+    this.containerEl.createEl('h1', {text: t("EXPERIMENTAL_HEAD")});
+    this.containerEl.createEl('p', {text: t("EXPERIMENTAL_DESC")});
+
+    new Setting(containerEl)
+    .setName(t("FILETYPE_NAME")) 
+    .setDesc(t("FILETYPE_DESC"))
+      .addToggle(toggle => toggle
+        .setValue(this.plugin.settings.experimentalFileType)
+        .onChange(async (value) => {
+          this.plugin.settings.experimentalFileType = value;
+          this.plugin.experimentalFileTypeDisplayToggle(value);
+          this.applySettingsUpdate();
+        }));
+
+    new Setting(containerEl)
+    .setName(t("FILETAG_NAME")) 
+    .setDesc(t("FILETAG_DESC"))
+    .addText(text => text
+      .setPlaceholder(t("INSERT_EMOJI"))
+      .setValue(this.plugin.settings.experimentalFileTag)
+      .onChange(async (value) => {
+        this.plugin.settings.experimentalFileTag = value;
+        this.applySettingsUpdate();
+      }));    
  }
 }
--- a/styles.css
+++ b/styles.css
@@ -51,7 +51,7 @@ button.ToolIcon_type_button[title="Export"] {

 .excalidraw-prompt-div {
  display: flex;
-  max-width: 600px;
+  max-width: 800px;
 }

 .excalidraw-prompt-form {
@@ -63,12 +63,35 @@ button.ToolIcon_type_button[title="Export"] {
  flex-grow: 1;
 }

+li[data-testid] {
+  border: 0 !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  width: 100% !important;
+}

-@font-face {
-  font-family: "Virgil";
-  src: url("https://excalidraw.com/Virgil.woff2");
+.excalidraw .context-menu-option-separator {
+  margin: 4px !important;
 }
-@font-face {
-  font-family: "Cascadia";
-  src: url("https://excalidraw.com/Cascadia.woff2");
+
+.excalidraw .popover {
+  padding: 0 !important;
+  border-color: transparent !important;
+  border: 0 !important;
+  box-shadow: 0 !important;
+  background-color: transparent !important;
+}
+
+.disable-zen-mode--visible {
+  color: var(--text-primary-color);
+}
+
+.disable-zen-mode {
+  width: 9em !important;
+}
+
+.ex-coffee-div {
+	text-align: center;
+	margin-bottom: 20px;
+  
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,10 +16,10 @@
      "esnext",
      "DOM.Iterable"
    ],
-    "jsx": "react",
+    "jsx": "react"
  },
  "include": [
    "**/*.ts",
-    "**/*.tsx", "src/openDrawing.ts",
+    "**/*.tsx", "src/openDrawing.ts"
  ]
 }
--- a/versions.json
+++ b/versions.json
@@ -1,3 +1,4 @@
 {
-  "1.1.10": "0.11.13"
+  "1.4.12": "0.12.16",
+  "1.4.2": "0.11.13"
 }
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Zsolt Viczian	b348def6f6	1.4.12 - fixed lib export + preview without theme	2021-11-22 18:57:18 +01:00
Zsolt Viczian	d57c59e9eb	markdown render	2021-11-21 22:46:37 +01:00
zsviczian	3ed25c221e	Merge pull request #263 from LukeWeidenwalker/fix-typos Fix three typos in English localization	2021-11-21 19:26:58 +01:00
Zsolt Viczian	e0895d00ae	1.4.11	2021-11-21 19:18:16 +01:00
Zsolt Viczian	9e5cce2f6f	Image inversion solved	2021-11-21 15:01:24 +01:00
Lukas Weidenholzer	200c2631cb	fix three typos in English localization	2021-11-21 11:07:34 +01:00
Zsolt Viczian	272204263d	svg improvements WIP	2021-11-20 15:29:56 +01:00
Zsolt Viczian	16b5472024	cleanup exportToBlob, CTRL_OR_CMD	2021-11-20 10:43:54 +01:00
zsviczian	d6a4350e1e	Merge pull request #257 from JaspalSuri/patch-1 fix: correct some spelling mistakes	2021-11-19 11:18:03 +01:00
Jaspal Suri	3602fbb807	fix: correct some spelling mistakes This is not a comprehensive review.	2021-11-18 23:14:13 -08:00
Zsolt Viczian	ecce315924	1.4.10	2021-11-16 21:44:23 +01:00
Zsolt Viczian	eee470dad5	corrected message	2021-11-15 22:08:00 +01:00
Zsolt Viczian	636c4bcafe	1.4.9	2021-11-15 22:05:44 +01:00
zsviczian	4eb2b293e2	embed excalidraw.md instead of svg or png	2021-11-15 14:12:38 +01:00
Zsolt Viczian	08528d9a88	1.4.8-beta-2	2021-11-14 23:13:06 +01:00
Zsolt Viczian	3e9ef99226	Reworked recursive image loading	2021-11-14 20:12:11 +01:00
Zsolt Viczian	f50ecd95c3	removed SVG snapshot	2021-11-14 12:08:19 +01:00
Zsolt Viczian	8b477a0e16	Added missing scale to createPNG interface	2021-11-14 09:41:53 +01:00
Zsolt Viczian	78891a1065	1.4.8-beta	2021-11-10 23:05:13 +01:00
Zsolt Viczian	b428cb7eed	1.4.7 (embed Excalidraw into Excalidraw fixed)	2021-11-08 19:44:45 +01:00
Zsolt Viczian	b20c1bed5a	1.4.6	2021-11-02 21:51:04 +01:00
Zsolt Viczian	f24c41eace	1.4.5	2021-11-02 21:33:11 +01:00
Zsolt Viczian	d33cf5ddd5	1.4.4 - basic copy/paste for equations & images	2021-11-01 17:41:12 +01:00
Zsolt Viczian	41491079be	minapp version 12.16	2021-11-01 14:17:37 +01:00
Zsolt Viczian	5345c63672	updated versions	2021-11-01 14:17:05 +01:00
Zsolt Viczian	06acf09a85	1.4.3	2021-11-01 14:12:44 +01:00
Zsolt Viczian	ce6d983b38	LaTex MVP ready	2021-11-01 10:27:58 +01:00
zsviczian	bb6c0b54ff	added Excalidraw files to filter	2021-10-30 21:54:51 +02:00
zsviczian	571dae52d3	Update Utils.ts	2021-10-29 19:51:00 +02:00
Zsolt Viczian	e6b5b0d125	latex WIP	2021-10-29 11:01:08 +02:00
Zsolt Viczian	8a1cf72095	1.4.2	2021-10-28 23:55:03 +02:00
Zsolt Viczian	f02425dcac	1.4.1	2021-10-26 23:06:00 +02:00
Zsolt Viczian	6e3cf60eab	1.4.0	2021-10-24 20:40:36 +02:00
zsviczian	32fdbf9dc2	Update README.md	2021-10-24 20:29:43 +02:00
Zsolt Viczian	1aed684ebe	Fixed Mac CTRL vs. CMD button issue	2021-10-24 20:07:22 +02:00
Zsolt Viczian	1ad791d9bc	1.4.0 pre-release 2	2021-10-24 13:40:11 +02:00
zsviczian	bb9925024d	Merge pull request #209 from zsviczian/Image-Element Image element	2021-10-24 06:56:12 +02:00
Zsolt Viczian	e676255d69	switched excalidraw package to: 0.10.0-obsidian-2	2021-10-24 06:52:09 +02:00
Zsolt Viczian	691c60be24	1.4.0 pre-release	2021-10-23 19:35:40 +02:00
Zsolt Viczian	f4a458061a	Image click navigation. Image embeds finalized.	2021-10-23 14:32:05 +02:00
Zsolt Viczian	c88c898f4a	ExcalidrawRef readypromise	2021-10-23 09:14:07 +02:00
Zsolt Viczian	d2da408a59	Before implementing readyPromise for excalidrawRef	2021-10-23 08:56:51 +02:00
Zsolt Viczian	3b9a6404c5	integrate image element mid way	2021-10-22 20:34:27 +02:00
Zsolt Viczian	d9306922c3	save image to vault	2021-10-19 22:59:31 +02:00
zsviczian	578cc7a99c	Merge pull request #201 from zsviczian/tmp minor performance tweek	2021-10-19 20:03:36 +02:00
zsviczian	aa9f9ba91f	Merge branch 'Image-Element' into tmp	2021-10-19 20:03:29 +02:00
Zsolt Viczian	b9251d4f1d	minor performance tweek	2021-10-19 19:45:32 +02:00
Zsolt Viczian	13a980afed	added mimetype	2021-10-19 18:40:20 +02:00
zsviczian	c911e0118f	Merge pull request #199 from zsviczian/tmp 1.3.20	2021-10-18 20:33:43 +02:00
zsviczian	eca02a5941	Merge branch 'Image-Element' into tmp	2021-10-18 20:33:36 +02:00
Zsolt Viczian	9a57db43f2	1.3.20	2021-10-18 20:14:39 +02:00
Zsolt Viczian	f6b65ac3e9	bump image-support version	2021-10-18 18:50:16 +02:00
zsviczian	929348b390	Merge pull request #190 from zsviczian/temp 1.3.19	2021-10-12 20:50:48 +02:00
zsviczian	57f1b9f8da	Merge branch 'Image-Element' into temp	2021-10-12 20:50:39 +02:00
Zsolt Viczian	fed106c811	1.3.19	2021-10-12 20:26:23 +02:00
Zsolt Viczian	739e919a43	mid way - adding Embedded files	2021-10-12 18:15:14 +02:00
zsviczian	e85cf4e196	Merge pull request #186 from zsviczian/temp-master merge master into image-element	2021-10-11 19:59:18 +02:00
zsviczian	0c42353fce	Merge branch 'Image-Element' into temp-master	2021-10-11 19:59:10 +02:00
Zsolt Viczian	7ebdec7713	1.3.18 fixed link hover and textElement rotate	2021-10-10 20:18:17 +02:00
Zsolt Viczian	1917dad8cd	onKeyDown to reject events except from canvas	2021-10-10 18:10:35 +02:00
Zsolt Viczian	3100e2d70f	update en.ts	2021-10-10 18:04:57 +02:00
zsviczian	7712cd49b6	Merge pull request #174 from zsviczian/temp-master fetch upstream	2021-10-04 21:43:40 +02:00
zsviczian	856573763e	Merge branch 'Image-Element' into temp-master	2021-10-04 21:43:28 +02:00
Zsolt Viczian	3bbff7f8d5	1.3.17	2021-10-04 21:28:09 +02:00
Zsolt Viczian	034927ada0	resolves #142	2021-10-04 21:14:31 +02:00
Zsolt Viczian	0cccdad13f	implemented openInAdjacentLeaf #156	2021-10-04 19:45:18 +02:00
Zsolt Viczian	fe7f3f58c5	Update yarn.lock	2021-10-04 19:09:26 +02:00
zsviczian	48fd854944	Merge pull request #173 from zsviczian/tempmaster updated package json with new libraries	2021-10-04 19:06:56 +02:00
zsviczian	8f9746393f	Merge branch 'Image-Element' into tempmaster	2021-10-04 19:06:28 +02:00
Zsolt Viczian	23da271b73	updated package json with new libraries	2021-10-04 18:57:27 +02:00
Zsolt Viczian	627775c6c3	re-applied image element changes	2021-10-04 18:47:49 +02:00
Zsolt Viczian	59db43c3f0	resolves #172 and #166	2021-10-04 18:34:02 +02:00
Zsolt Viczian	597ee4f70e	Revert "Excalidraw Image Element Demo" This reverts commit `78fb37b173`.	2021-10-04 18:25:35 +02:00
Zsolt Viczian	8222d8c146	Revert "embed Excalidraw into document" This reverts commit `f785d756be`.	2021-10-04 18:25:27 +02:00
Zsolt Viczian	f785d756be	embed Excalidraw into document	2021-10-04 18:22:47 +02:00
Zsolt Viczian	78fb37b173	Excalidraw Image Element Demo	2021-10-02 17:34:13 +02:00
Zsolt Viczian	a17638717f	api documentation updated	2021-10-01 21:01:11 +02:00
Zsolt Viczian	70de8ba2f8	1.3.16	2021-10-01 20:59:02 +02:00
Zsolt Viczian	e8a29a2715	1.3.15	2021-09-29 06:50:51 +02:00
Zsolt Viczian	7b1f13391c	1.3.14 rawText copy/paste	2021-09-28 22:58:02 +02:00
Zsolt Viczian	33081b1a84	1.3.13	2021-09-27 19:45:05 +02:00
Zsolt Viczian	aafd9f17f8	1.3.12	2021-09-25 19:56:46 +02:00
zsviczian	a27da5f5f5	Update README.md	2021-09-23 12:36:06 +02:00
Zsolt Viczian	472b58a417	1.3.11	2021-09-21 19:12:55 +02:00
zsviczian	1bba254eaf	Update README.md	2021-09-19 15:55:31 +02:00
Zsolt Viczian	a0e47c390c	1.3.10 Deployed improved Excalidraw freehand	2021-09-19 08:18:24 +02:00
Zsolt Viczian	caa1281d23	1.3.9	2021-09-17 21:54:01 +02:00
Zsolt Viczian	3fb2cbba14	1.3.8	2021-09-16 20:39:04 +02:00
Zsolt Viczian	8f1ec2acbc	addBlob scale fixed	2021-09-14 22:52:08 +02:00
Zsolt Viczian	3e2d85dd09	ExcalidrawAutomate blob,line,scale	2021-09-14 22:38:03 +02:00
Zsolt Viczian	ec3e9fd5b7	1.3.7 kanban support, onDrop fix	2021-09-12 17:16:50 +02:00
Zsolt Viczian	784a7cb6bf	1.3.6 accept text drop, improved addElement	2021-09-11 12:07:30 +02:00
Zsolt Viczian	e8666797d7	1.3.5	2021-09-10 16:16:13 +02:00
zsviczian	5c2c1ebf5e	added error messages	2021-09-09 10:46:14 +02:00
Zsolt Viczian	ecd19dd072	1.3.4 ea.viewToggleFullScreen()	2021-09-09 06:31:36 +02:00
Zsolt Viczian	377927c891	1.3.3 force-overflow text wrapping	2021-09-05 22:01:22 +02:00
Zsolt Viczian	9f28c974f7	1.3.2 - fixed EA.create()	2021-09-05 08:02:46 +02:00
Zsolt Viczian	1b9fa6a790	1.3.1 Drag&Drop + zoomToFit + no chunking	2021-09-04 23:37:43 +02:00
Zsolt Viczian	4dd8271223	zoomToFit change	2021-09-04 17:46:06 +02:00
Zsolt Viczian	3e62cd33a2	documentation improved	2021-09-03 19:58:51 +02:00
Zsolt Viczian	c670ecb09c	1.3.0	2021-09-03 18:47:25 +02:00
zsviczian	f5307db33e	Update introduction.md	2021-09-03 09:30:36 +02:00
zsviczian	7e216306c0	Update introduction.md	2021-09-03 09:30:05 +02:00
zsviczian	e3daf5d22e	Update introduction.md	2021-09-03 09:29:37 +02:00
zsviczian	a85a46cbae	Update introduction.md	2021-09-03 09:27:52 +02:00
Zsolt Viczian	ac16f5427b	Excalidraw Automate enhancements	2021-09-03 09:26:24 +02:00
Zsolt Viczian	edc92472df	addElementsToView()	2021-09-01 22:20:07 +02:00
Zsolt Viczian	e66b7aef7f	1.2.24 gridSize	2021-08-31 20:40:25 +02:00
Zsolt Viczian	7e9d5e8867	1.2.23	2021-08-29 18:58:56 +02:00
Zsolt Viczian	167918f718	published wrapText to Excalidraw Automate	2021-08-29 11:25:02 +02:00
Zsolt Viczian	65af29c2ef	Merge branch 'master' of https://github.com/zsviczian/obsidian-excalidraw-plugin	2021-08-29 10:31:59 +02:00
Zsolt Viczian	b19e1b6dcb	1.2.22	2021-08-29 10:31:35 +02:00
zsviczian	f7263543fa	Update README.md	2021-08-28 16:31:41 +02:00
Zsolt Viczian	c6339b28ac	1.2.21 - blockquote transclusion fixed	2021-08-28 16:20:43 +02:00
Zsolt Viczian	f24e4fce9c	1.2.20 wrapText()	2021-08-28 15:56:45 +02:00
Zsolt Viczian	5eff9b2e54	1.2.19	2021-08-28 11:57:09 +02:00
Zsolt Viczian	d89c019612	1.2.18	2021-08-27 19:12:29 +02:00
Zsolt Viczian	01d3c13cce	1.2.17	2021-08-25 20:48:36 +02:00
Zsolt Viczian	de68ebbe7d	1.2.16	2021-08-22 13:05:47 +02:00
Zsolt Viczian	caee4f7500	1.2.16	2021-08-22 12:38:09 +02:00
Zsolt Viczian	6d28546677	1.2.15 - link preview inside Excalidraw	2021-08-21 23:01:12 +02:00
Zsolt Viczian	ec5a13f9e4	1.2.14	2021-08-10 20:57:12 +02:00
Zsolt Viczian	b788118880	1.2.13	2021-08-05 21:47:44 +02:00
Zsolt Viczian	6e22e0a428	1.2.13 draft	2021-08-04 22:50:26 +02:00
zsviczian	8b8b469569	Merge pull request #117 from Quorafind/master Update zh-cn.ts	2021-08-04 22:30:44 +02:00
Boninall	789851c0c4	Update zh-cn.ts Add some period and Fix some language error	2021-08-04 22:46:01 +08:00
Zsolt Viczian	816de255ee	1.2.12 zh-cn translation	2021-08-03 20:16:56 +02:00
zsviczian	54d4eb7ab4	Merge pull request #113 from Quorafind/master Update zh-cn.ts	2021-08-03 19:59:30 +02:00
Boninall	e3242ebfb7	Merge branch 'zsviczian:master' into master	2021-08-03 12:51:58 +08:00
Zsolt Viczian	2e36d83abc	1.2.11	2021-08-02 20:34:56 +02:00
Boninall	6552e6bd7b	Update zh-cn.ts Add zh-cn Language	2021-08-02 18:42:58 +08:00
Zsolt Viczian	21ff1833a8	1.2.10	2021-08-01 19:32:37 +02:00
Zsolt Viczian	1b931abd38	changed to my own Excalidraw package	2021-07-31 19:21:06 +02:00
zsviczian	fe28098776	1.2.9 release	2021-07-23 20:10:44 +02:00
zsviczian	72c158e08b	save.settings	2021-07-23 19:13:52 +02:00
Zsolt Viczian	5133ab028b	style changes context menu	2021-07-14 21:26:47 +02:00
Zsolt Viczian	5fc0f70ded	1.2.8	2021-07-14 20:47:23 +02:00
Zsolt Viczian	08f489f1c5	1.2.8 autosave safeguard, merged file error	2021-07-14 20:04:08 +02:00
zsviczian	dd476b564a	workaround to solve issue #94 trim part after final closing } curly bracket	2021-07-14 11:55:40 +02:00
zsviczian	b7a7c9473e	dirty changed to file.path to ensure the plugin won't accidentally overwrite the next file	2021-07-14 11:29:30 +02:00
Zsolt Viczian	cc7dc16810	1.2.7 autosave+template warning	2021-07-13 22:47:38 +02:00
Zsolt Viczian	c45faef141	1.2.6	2021-07-12 23:07:40 +02:00
Zsolt Viczian	ae31ad0870	1.2.5 fame update for .png and .svg when migrating	2021-07-12 07:03:31 +02:00
Zsolt Viczian	ba88ced2ba	1.2.4	2021-07-11 23:28:46 +02:00
Zsolt Viczian	803fb9e234	1.2.3	2021-07-11 08:42:29 +02:00
Zsolt Viczian	d77249088f	1.2.2 text lock/unlock solved	2021-07-10 23:32:25 +02:00
Zsolt Viczian	e6ad7aa304	Excalidraw 0.9	2021-07-10 20:45:09 +02:00
Zsolt Viczian	fdb71a0d03	JSON into codeblock, hover observer corrected	2021-07-10 17:11:02 +02:00
Zsolt Viczian	90c55211ba	1.2.0	2021-07-10 14:45:00 +02:00
zsviczian	8d2c064ee3	Update README1.2.md	2021-07-10 14:31:03 +02:00
Zsolt Viczian	b8a95392f1	readme 1.2 - draft	2021-07-10 14:20:20 +02:00
zsviczian	5430bc4b38	Update README1.2.md	2021-07-10 13:20:30 +02:00
Zsolt Viczian	c9d12c7295	readme 1.2	2021-07-10 12:26:44 +02:00
Zsolt Viczian	c37cbd7e31	improved hover preivew, experimental file tagging	2021-07-10 11:59:18 +02:00