Merge branch 'master' of https://github.com/zsviczian/obsidian-excalidraw-plugin

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,32 +1,30 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Environment (please complete the following information):**
- - OS including version: [e.g. iOS 15.1, Android 9, Windows 11, etc]
- - Plugin version: 
- - Obsidian version: 
-
-**Additional context**
-Add any other context about the problem here.
+---
+name: Bug report
+about: Create a report to help me improve Excalidraw
+title: 'BUG: '
+labels: ''
+assignees: ''
+
+---
+
+**Your environment**
+Please run `Command Palette/Show Debug info` in Obsidian and paste the result here.
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Additional context**
+Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

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

README.md

@@ -19,7 +19,7 @@ Please upgrade to Obsidian v0.12.19 or higher to get the latest release.
 |[![thumbnail](https://user-images.githubusercontent.com/14358394/156931461-0979b821-315a-41dd-86f1-31d169b7c127.jpg)](https://youtu.be/Etskjw7a5zo)|[![Thumbnail](https://user-images.githubusercontent.com/14358394/158008902-12c6a851-237e-4edd-a631-d48e81c904b2.jpg)](https://youtu.be/4N6efq1DtH0)|[![thumbnail](https://user-images.githubusercontent.com/14358394/159369910-6371f08d-b5fa-454d-9c6c-948f7e7a7d26.jpg)](https://youtu.be/U2LkBRBk4LY)|
 | [![6 strategies for linking your visual thoughts v4](https://user-images.githubusercontent.com/14358394/171635214-30533c45-94fa-436e-83a9-b2ec99f190e2.jpg)](https://youtu.be/qiKuqMcNWgU)|[![Video thumbnail small](https://user-images.githubusercontent.com/14358394/185791706-3d9983ab-7cb1-4b27-a016-30c039d84e34.jpg)](https://youtu.be/yZQoJg2RCKI)|[![Thumbnail - Colors - Excalidraw Basics (Custom)](https://user-images.githubusercontent.com/14358394/194773147-5418a0ab-6be5-4eb0-a8e4-d6af21b1b483.png)](https://youtu.be/6PLGHBH9VZ4) |
 |[![Thumbnail - Excalidraw color palettes (Custom)](https://user-images.githubusercontent.com/14358394/194773211-9e871be7-0795-4dc7-947e-c6c275e690d0.png)](https://youtu.be/epYNx2FSf2w) | [![Thumbnail (Custom)](https://user-images.githubusercontent.com/14358394/194773268-400cfb1b-6bde-45e0-9e4b-91bbaa461cf0.png)](https://youtu.be/Amhlv6r9WvM) | [![Thumbnail - Simple rules for beautiful sketches (Custom) (1)](https://user-images.githubusercontent.com/14358394/194773527-ef35c8b9-1a6d-4415-9c7e-b667fb17535d.png)](https://youtu.be/r9oB1SlK1GU) |
-|[![Thumbnail - ColorMaster Scripting (Custom)](https://user-images.githubusercontent.com/14358394/195988535-a133a9b9-d094-45ba-ba64-c994b9a1e0ef.png)](https://youtu.be/7gJDwNgQ6NU) | | |
+|[![Thumbnail - ColorMaster Scripting (Custom)](https://user-images.githubusercontent.com/14358394/195988535-a133a9b9-d094-45ba-ba64-c994b9a1e0ef.png)](https://youtu.be/7gJDwNgQ6NU) | [![Thumbnail - 1 7 27 SVG import (Custom)](https://user-images.githubusercontent.com/14358394/199207784-8bbe14e0-7d10-47d7-971d-20dce8dbd659.png)](https://youtu.be/vlC1-iBvIfo) | |
 
 
 

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "obsidian-excalidraw-plugin",
 	"name": "Excalidraw",
-	"version": "1.7.26",
+	"version": "1.7.27",
 	"minAppVersion": "0.15.6",
 	"description": "An Obsidian plugin to edit and view Excalidraw drawings",
 	"author": "Zsolt Viczian",

package.json

@@ -18,7 +18,7 @@
   "license": "MIT",
   "dependencies": {
     "@types/lz-string": "^1.3.34",
-    "@zsviczian/excalidraw": "0.13.0-obsidian",
+    "@zsviczian/excalidraw": "0.13.0-obsidian-1",
     "clsx": "^1.1.1",
     "lz-string": "^1.4.4",
     "monkey-around": "^2.3.0",

src/ExcalidrawAutomate.ts

@@ -8,10 +8,11 @@ import {
   FileId,
   NonDeletedExcalidrawElement,
   ExcalidrawImageElement,
+  ExcalidrawTextElement,
 } from "@zsviczian/excalidraw/types/element/types";
 import { normalizePath, Notice, TFile, WorkspaceLeaf } from "obsidian";
 import ExcalidrawView, { ExportSettings, TextMode } from "./ExcalidrawView";
-import { ExcalidrawData } from "./ExcalidrawData";
+import { ExcalidrawData, getMarkdownDrawingSection } from "./ExcalidrawData";
 import {
   FRONTMATTER,
   nanoid,
@@ -32,7 +33,7 @@ import {
   isVersionNewerThanOther,
   log,
   scaleLoadedImage,
-  wrapText,
+  wrapTextAtCharLength,
 } from "./utils/Utils";
 import { getNewOrAdjacentLeaf, isObsidianThemeDark } from "./utils/ObsidianUtils";
 import { AppState, Point } from "@zsviczian/excalidraw/types/types";
@@ -123,6 +124,7 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
     viewBackgroundColor: string;
     gridSize: number;
   };
+  colorPalette: {};
 
   constructor(plugin: ExcalidrawPlugin, view?: ExcalidrawView) {
     this.plugin = plugin;
@@ -387,10 +389,38 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
           template?.appState?.currentItemLinearStrokeSharpness ??
           this.style.strokeSharpness,
         gridSize: template?.appState?.gridSize ?? this.canvas.gridSize,
+        colorPalette: template?.appState?.colorPalette ?? this.colorPalette,
       },
       files: template?.files ?? {},
     };
 
+    const generateMD = ():string => {
+      const textElements = this.getElements().filter(el => el.type === "text") as ExcalidrawTextElement[];
+      let outString = "# Text Elements\n";
+      textElements.forEach(te=> {
+        outString += `${te.originalText ?? te.text} ^${te.id}\n\n`;
+      });
+
+      const elementsWithLinks = this.getElements().filter( el => el.type !== "text" && el.link)
+      elementsWithLinks.forEach(el=>{
+        outString += `${el.link} ^${el.id}\n\n`;
+      })
+  
+      outString += Object.keys(this.imagesDict).length > 0
+        ? "\n# Embedded files\n"
+        : "";
+        
+      Object.keys(this.imagesDict).forEach((key: FileId)=> {
+        const item = this.imagesDict[key];
+        if(item.latex) {
+          outString += `${key}: $$${item.latex}$$\n`;  
+        } else {
+          outString += `${key}: [[${item.file}]]\n`;
+        }
+      })
+      return outString;
+    }
+
     return this.plugin.createAndOpenDrawing(
       params?.filename
         ? params.filename + (params.filename.endsWith(".md") ? "": ".excalidraw.md")
@@ -399,8 +429,8 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
       params?.foldername ? params.foldername : this.plugin.settings.folder,
       this.plugin.settings.compatibilityMode
         ? JSON.stringify(scene, null, "\t")
-        : frontmatter +
-            (await this.plugin.exportSceneToMD(JSON.stringify(scene, null, "\t"))),
+        : frontmatter + generateMD() +
+          getMarkdownDrawingSection(JSON.stringify(scene, null, "\t"),this.plugin.settings.compress)
     );
   };
 
@@ -519,7 +549,7 @@ export class ExcalidrawAutomate implements ExcalidrawAutomateInterface {
    * @returns 
    */
   wrapText(text: string, lineLen: number): string {
-    return wrapText(text, lineLen, this.plugin.settings.forceWrap);
+    return wrapTextAtCharLength(text, lineLen, this.plugin.settings.forceWrap);
   };
 
   private boxedElement(

src/ExcalidrawData.ts

@@ -27,11 +27,12 @@ import {
   decompress,
   //getBakPath,
   getBinaryFileFromDataURL,
+  getContainerElement,
   getExportTheme,
   getLinkParts,
   hasExportTheme,
   LinkParts,
-  wrapText,
+  wrapTextAtCharLength,
 } from "./utils/Utils";
 import { getAttachmentsFolderAndFilePath, isObsidianThemeDark } from "./utils/ObsidianUtils";
 import {
@@ -52,6 +53,13 @@ declare module "obsidian" {
   }
 }
 
+const {
+  wrapText, 
+  getFontString, 
+  getMaxContainerWidth, 
+  //@ts-ignore
+} = excalidrawLib;
+
 export enum AutoexportPreference {
   none,
   both,
@@ -210,15 +218,16 @@ const estimateMaxLineLen = (text: string, originalText: string): number => {
     return null;
   }
   for (const line of splitText) {
-    if (line.length > maxLineLen) {
-      maxLineLen = line.length;
+    const l = line.trim();  
+    if (l.length > maxLineLen) {
+      maxLineLen = l.length;
     }
   }
   return maxLineLen;
 };
 
 const wrap = (text: string, lineLen: number) =>
-  lineLen ? wrapText(text, lineLen, false, 0) : text;
+  lineLen ? wrapTextAtCharLength(text, lineLen, false, 0) : text;
 
 export class ExcalidrawData {
   public textElements: Map<
@@ -638,12 +647,17 @@ export class ExcalidrawData {
     //first get scene text elements
     const texts = this.scene.elements?.filter((el: any) => el.type === "text");
     for (const te of texts) {
+      const container = getContainerElement(te,this.scene);
       const originalText =
-        (await this.getText(te.id, false)) ?? te.originalText ?? te.text;
+        (await this.getText(te.id)) ?? te.originalText ?? te.text;
       const wrapAt = this.textElements.get(te.id)?.wrapAt;
       this.updateTextElement(
         te,
-        wrap(originalText, wrapAt),
+        wrapAt ? wrapText(
+          originalText,
+          getFontString(te.fontSize,te.fontFamily),
+          getMaxContainerWidth(container)
+        ) : originalText,
         originalText,
         forceupdate,
       ); //(await this.getText(te.id))??te.text serves the case when the whole #Text Elements section is deleted by accident
@@ -652,7 +666,6 @@ export class ExcalidrawData {
 
   private async getText(
     id: string,
-    wrapResult: boolean = true,
   ): Promise<string> {
     const text = this.textElements.get(id);
     if (!text) {
@@ -667,7 +680,7 @@ export class ExcalidrawData {
         });
       }
       //console.log("parsed",this.textElements.get(id).parsed);
-      return wrapResult ? wrap(text.parsed, text.wrapAt) : text.parsed;
+      return text.parsed;
     }
     //console.log("raw",this.textElements.get(id).raw);
     return text.raw;
@@ -794,7 +807,7 @@ export class ExcalidrawData {
       if (el.length === 0) {
         this.textElements.delete(key); //if no longer in the scene, delete the text element
       } else {
-        const text = await this.getText(key, false);
+        const text = await this.getText(key);
         const raw = this.scene.prevTextMode === TextMode.parsed
           ? el[0].rawText
           : (el[0].originalText ?? el[0].text);
@@ -887,7 +900,7 @@ export class ExcalidrawData {
         }
         outString +=
           text.substring(position, parts.value.index) +
-          wrapText(
+          wrapTextAtCharLength(
             contents,
             REGEX_LINK.getWrapLength(
               parts,
@@ -1434,7 +1447,7 @@ export class ExcalidrawData {
 
     const parts = data.linkParts.original.split("#");
     this.plugin.filesMaster.set(fileId, {
-      path:data.file.path,
+      path:data.file.path + (data.shouldScale()?"":"|100%"),
       blockrefData: parts.length === 1
         ? null
         : parts[1],
@@ -1479,16 +1492,18 @@ export class ExcalidrawData {
     }
     if (this.plugin.filesMaster.has(fileId)) {
       const masterFile = this.plugin.filesMaster.get(fileId);
-      if (!this.app.vault.getAbstractFileByPath(masterFile.path)) {
+      const path = masterFile.path.split("|")[0].split("#")[0];
+      if (!this.app.vault.getAbstractFileByPath(path)) {
         this.plugin.filesMaster.delete(fileId);
         return true;
       } // the file no longer exists
+      const fixScale = masterFile.path.endsWith("100%");
       const embeddedFile = new EmbeddedFile(
         this.plugin,
         this.file.path,
-        masterFile.blockrefData
-          ? masterFile.path + "#" + masterFile.blockrefData
-          : masterFile.path
+        (masterFile.blockrefData
+          ? path + "#" + masterFile.blockrefData
+          : path) + (fixScale?"|100%":"")
       );
       this.files.set(fileId, embeddedFile);
       return true;

src/ExcalidrawView.ts

@@ -92,6 +92,7 @@ import { ObsidianMenu } from "./menu/ObsidianMenu";
 import { ToolsPanel } from "./menu/ToolsPanel";
 import { ScriptEngine } from "./Scripts";
 import { getTextElementAtPointer, getImageElementAtPointer, getElementWithLinkAtPointer } from "./utils/GetElementAtPointer";
+import { MenuLinks } from "./menu/menuLinks";
 
 export enum TextMode {
   parsed = "parsed",
@@ -255,6 +256,7 @@ export default class ExcalidrawView extends TextFileView {
   private linkAction_Element: HTMLElement;
   public compatibilityMode: boolean = false;
   private obsidianMenu: ObsidianMenu;
+  private menuLinks: MenuLinks;
 
   //https://stackoverflow.com/questions/27132796/is-there-any-javascript-event-fired-when-the-on-screen-keyboard-on-mobile-safari
   private isEditingTextResetTimer: NodeJS.Timeout = null;
@@ -2013,6 +2015,8 @@ export default class ExcalidrawView extends TextFileView {
       let currentPosition = { x: 0, y: 0 };
       const excalidrawWrapperRef = React.useRef(null);
       const toolsPanelRef = React.useRef(null);
+      const menuLinksRef = React.useRef(null);
+
       const [dimensions, setDimensions] = React.useState({
         width: undefined,
         height: undefined,
@@ -2027,6 +2031,7 @@ export default class ExcalidrawView extends TextFileView {
 
       this.toolsPanelRef = toolsPanelRef;
       this.obsidianMenu = new ObsidianMenu(this.plugin, toolsPanelRef);
+      this.menuLinks = new MenuLinks(this.plugin, menuLinksRef);
 
       //excalidrawRef readypromise based on
       //https://codesandbox.io/s/eexcalidraw-resolvable-promise-d0qg3?file=/src/App.js:167-760
@@ -2730,7 +2735,7 @@ export default class ExcalidrawView extends TextFileView {
               loadScene: false,
               saveScene: false,
               saveAsScene: false,
-              export: { saveFileToDisk: false },
+              export: false,
               saveAsImage: false,
               saveToActiveFile: false,
             },
@@ -2781,6 +2786,8 @@ export default class ExcalidrawView extends TextFileView {
           },
           libraryReturnUrl: "app://obsidian.md",
           autoFocus: true,
+          hideWelcomeScreen: true,
+          renderMenuLinks: null, //this.menuLinks.render,
           onChange: (et: ExcalidrawElement[], st: AppState) => {
             const canvasColorChangeHook = () => {
               if(this.plugin.ea.onCanvasColorChangeHook) {

src/constants.ts

@@ -210,7 +210,7 @@ COLOR_NAMES.set("white", "#ffffff");
 COLOR_NAMES.set("whitesmoke", "#f5f5f5");
 COLOR_NAMES.set("yellow", "#ffff00");
 COLOR_NAMES.set("yellowgreen", "#9acd32");
-export const DEFAULT_MD_EMBED_CSS = `.excalidraw-md-host{padding:0px 10px}.excalidraw-md-footer{height:5px}foreignObject{background-color:transparent}p{display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;color:inherit}table,tr,th,td{color:inherit;border:1px solid;border-collapse:collapse;padding:3px}th{font-weight:bold;border-bottom:double;background-color:silver}.copy-code-button{display:none}code[class*=language-],pre[class*=language-]{color:#393a34;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-size:.9em;line-height:1.2em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre>code[class*=language-]{font-size:1em}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{background:#C1DEF1}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{background:#C1DEF1}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background-color:#0000001a}:not(pre)>code[class*=language-]{padding:.2em;padding-top:1px;padding-bottom:1px;background:#f8f8f8;border:1px solid #dddddd}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:green;font-style:italic}.token.namespace{opacity:.7}.token.string{color:#a31515}.token.punctuation,.token.operator{color:#393a34}.token.url,.token.symbol,.token.number,.token.boolean,.token.variable,.token.constant,.token.inserted{color:#36acaa}.token.atrule,.token.keyword,.token.attr-value,.language-autohotkey .token.selector,.language-json .token.boolean,.language-json .token.number,code[class*=language-css]{color:#00f}.token.function{color:#393a34}.token.deleted,.language-autohotkey .token.tag{color:#9a050f}.token.selector,.language-autohotkey .token.keyword{color:#00009f}.token.important{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.class-name,.language-json .token.property{color:#2b91af}.token.tag,.token.selector{color:maroon}.token.attr-name,.token.property,.token.regex,.token.entity{color:red}.token.directive.tag .tag{background:#ffff00;color:#393a34}.line-numbers.line-numbers .line-numbers-rows{border-right-color:#a5a5a5}.line-numbers .line-numbers-rows>span:before{color:#2b91af}.line-highlight.line-highlight{background:rgba(193,222,241,.2);background:-webkit-linear-gradient(left,rgba(193,222,241,.2) 70%,rgba(221,222,241,0));background:linear-gradient(to right,rgba(193,222,241,.2) 70%,rgba(221,222,241,0))}blockquote{ font-style:italic;background-color:rgb(46,43,42,0.1);margin:0;margin-left:1em;border-radius:0 4px 4px 0;border:1px solid hsl(0,80%,32%);border-left-width:8px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;padding:10px 20px;margin-inline-start:30px;margin-inline-end:30px;}`;
+export const DEFAULT_MD_EMBED_CSS = `.snw-reference{display: none;}.excalidraw-md-host{padding:0px 10px}.excalidraw-md-footer{height:5px}foreignObject{background-color:transparent}p{display:block;margin-block-start:1em;margin-block-end:1em;margin-inline-start:0px;margin-inline-end:0px;color:inherit}table,tr,th,td{color:inherit;border:1px solid;border-collapse:collapse;padding:3px}th{font-weight:bold;border-bottom:double;background-color:silver}.copy-code-button{display:none}code[class*=language-],pre[class*=language-]{color:#393a34;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;font-size:.9em;line-height:1.2em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre>code[class*=language-]{font-size:1em}pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection{background:#C1DEF1}pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection{background:#C1DEF1}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;background-color:#0000001a}:not(pre)>code[class*=language-]{padding:.2em;padding-top:1px;padding-bottom:1px;background:#f8f8f8;border:1px solid #dddddd}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:green;font-style:italic}.token.namespace{opacity:.7}.token.string{color:#a31515}.token.punctuation,.token.operator{color:#393a34}.token.url,.token.symbol,.token.number,.token.boolean,.token.variable,.token.constant,.token.inserted{color:#36acaa}.token.atrule,.token.keyword,.token.attr-value,.language-autohotkey .token.selector,.language-json .token.boolean,.language-json .token.number,code[class*=language-css]{color:#00f}.token.function{color:#393a34}.token.deleted,.language-autohotkey .token.tag{color:#9a050f}.token.selector,.language-autohotkey .token.keyword{color:#00009f}.token.important{color:#e90}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.class-name,.language-json .token.property{color:#2b91af}.token.tag,.token.selector{color:maroon}.token.attr-name,.token.property,.token.regex,.token.entity{color:red}.token.directive.tag .tag{background:#ffff00;color:#393a34}.line-numbers.line-numbers .line-numbers-rows{border-right-color:#a5a5a5}.line-numbers .line-numbers-rows>span:before{color:#2b91af}.line-highlight.line-highlight{background:rgba(193,222,241,.2);background:-webkit-linear-gradient(left,rgba(193,222,241,.2) 70%,rgba(221,222,241,0));background:linear-gradient(to right,rgba(193,222,241,.2) 70%,rgba(221,222,241,0))}blockquote{ font-style:italic;background-color:rgb(46,43,42,0.1);margin:0;margin-left:1em;border-radius:0 4px 4px 0;border:1px solid hsl(0,80%,32%);border-left-width:8px;border-top-width:0px;border-right-width:0px;border-bottom-width:0px;padding:10px 20px;margin-inline-start:30px;margin-inline-end:30px;}`;
 export const SCRIPTENGINE_ICON = `<g transform="translate(-8,-8)"><path d="M24.318 37.983c-1.234-1.232-8.433-3.903-7.401-7.387 1.057-3.484 9.893-12.443 13.669-13.517 3.776-1.074 6.142 6.523 9.012 7.073 2.87.55 6.797-1.572 8.207-3.694 1.384-2.148-3.147-7.413.15-9.168 3.298-1.755 16.389-2.646 19.611-1.284 3.247 1.363-1.611 7.335-.151 9.483 1.46 2.148 6.067 3.746 8.836 3.38 2.769-.368 4.154-6.733 7.728-5.633 3.575 1.1 12.36 8.828 13.67 12.233 1.308 3.406-5.186 5.423-5.79 8.2-.58 2.75-.026 6.705 2.265 8.355 2.266 1.65 9.642-1.78 11.404 1.598 1.762 3.38 1.007 15.35-.806 18.651-1.787 3.353-7.753-.367-9.969 1.31-2.215 1.65-3.901 5.92-3.373 8.67.504 2.777 7.754 4.48 6.445 7.885C96.49 87.543 87.15 95.454 83.5 96.685c-3.65 1.231-4.96-4.741-7.577-5.16-2.593-.393-6.57.707-8.03 2.75-1.436 2.017 2.668 7.806-.63 9.483-3.323 1.676-15.759 2.226-19.157.655-3.373-1.598.554-7.964-1.108-10.138-1.687-2.174-6.394-3.431-9.012-2.907-2.643.55-3.273 7.282-6.747 6.103-3.499-1.126-12.788-9.535-14.172-13.019-1.36-3.484 5.437-5.108 5.966-7.858.529-2.777-.68-7.073-2.744-8.697-2.064-1.624-7.93 2.41-9.642-1.126-1.737-3.537-2.441-16.765-.654-20.118 1.787-3.3 9.062 1.598 11.429.183 2.366-1.44 2.316-7.282 2.769-8.749m.126-.104c-1.234-1.232-8.433-3.903-7.401-7.387 1.057-3.484 9.893-12.443 13.669-13.517 3.776-1.074 6.142 6.523 9.012 7.073 2.87.55 6.797-1.572 8.207-3.694 1.384-2.148-3.147-7.413.15-9.168 3.298-1.755 16.389-2.646 19.611-1.284 3.247 1.363-1.611 7.335-.151 9.483 1.46 2.148 6.067 3.746 8.836 3.38 2.769-.368 4.154-6.733 7.728-5.633 3.575 1.1 12.36 8.828 13.67 12.233 1.308 3.406-5.186 5.423-5.79 8.2-.58 2.75-.026 6.705 2.265 8.355 2.266 1.65 9.642-1.78 11.404 1.598 1.762 3.38 1.007 15.35-.806 18.651-1.787 3.353-7.753-.367-9.969 1.31-2.215 1.65-3.901 5.92-3.373 8.67.504 2.777 7.754 4.48 6.445 7.885C96.49 87.543 87.15 95.454 83.5 96.685c-3.65 1.231-4.96-4.741-7.577-5.16-2.593-.393-6.57.707-8.03 2.75-1.436 2.017 2.668 7.806-.63 9.483-3.323 1.676-15.759 2.226-19.157.655-3.373-1.598.554-7.964-1.108-10.138-1.687-2.174-6.394-3.431-9.012-2.907-2.643.55-3.273 7.282-6.747 6.103-3.499-1.126-12.788-9.535-14.172-13.019-1.36-3.484 5.437-5.108 5.966-7.858.529-2.777-.68-7.073-2.744-8.697-2.064-1.624-7.93 2.41-9.642-1.126-1.737-3.537-2.441-16.765-.654-20.118 1.787-3.3 9.062 1.598 11.429.183 2.366-1.44 2.316-7.282 2.769-8.749" fill="none" stroke-width="2" stroke-linecap="round" stroke="currentColor"/><path d="M81.235 56.502a23.3 23.3 0 0 1-1.46 8.068 20.785 20.785 0 0 1-1.762 3.72 24.068 24.068 0 0 1-5.337 6.26 22.575 22.575 0 0 1-3.449 2.358 23.726 23.726 0 0 1-7.803 2.803 24.719 24.719 0 0 1-8.333 0 24.102 24.102 0 0 1-4.028-1.074 23.71 23.71 0 0 1-3.776-1.729 23.259 23.259 0 0 1-6.369-5.265 23.775 23.775 0 0 1-2.416-3.353 24.935 24.935 0 0 1-1.762-3.72 23.765 23.765 0 0 1-1.083-3.981 23.454 23.454 0 0 1 0-8.173c.252-1.336.604-2.698 1.083-3.956a24.935 24.935 0 0 1 1.762-3.72 22.587 22.587 0 0 1 2.416-3.378c.881-1.048 1.888-2.017 2.946-2.908a24.38 24.38 0 0 1 3.423-2.357 23.71 23.71 0 0 1 3.776-1.73 21.74 21.74 0 0 1 4.028-1.047 23.437 23.437 0 0 1 8.333 0 24.282 24.282 0 0 1 7.803 2.777 26.198 26.198 0 0 1 3.45 2.357 24.62 24.62 0 0 1 5.336 6.287 20.785 20.785 0 0 1 1.762 3.72 21.32 21.32 0 0 1 1.083 3.955c.251 1.336.302 3.405.377 4.086.05.681.05-.68 0 0" fill="none" stroke-width="4" stroke-linecap="round" stroke="currentColor"/><path d="M69.404 56.633c-6.596-3.3-13.216-6.6-19.51-9.744m19.51 9.744c-6.747-3.379-13.493-6.758-19.51-9.744m0 0v19.489m0-19.49v19.49m0 0c4.355-2.148 8.71-4.322 19.51-9.745m-19.51 9.745c3.978-1.965 7.93-3.956 19.51-9.745m0 0h0m0 0h0" fill="currentColor" stroke-linecap="round" stroke="currentColor" stroke-width="4"/></g>`;
 export const DISK_ICON_NAME = "disk";
 export const DISK_ICON = `<path fill="none" stroke="currentColor" fill="#fff" d="M0 0h100v100H0z"/><path fill="none" stroke="currentColor" d="M20.832 4.168c21.824.145 43.645.289 74.68.5m-74.68-.5c17.09.113 34.176.227 74.68.5m0 0c.094 27.3.191 54.602.32 91.164m-.32-91.164c.113 32.633.23 65.27.32 91.164m0 0H4.168m91.664 0H4.168m0 0v-75m0 75v-75m0 0L20.832 4.168M4.168 20.832L20.832 4.168M20.832 4.168h58.336m-58.336 0h58.336m0 0v25m0-25v25m0 0H20.832m58.336 0H20.832m0 0v-25m0 25v-25" stroke-width="1.66668" /><path fill="none" stroke="currentColor" d="M29.168 4.168h16.664v16.664H29.168"/><path fill="none" stroke="currentColor" d="M29.168 4.168h16.664m-16.664 0h16.664m0 0v16.664m0-16.664v16.664m0 0H29.168m16.664 0H29.168m0 0V4.168m0 16.664V4.168M12.5 54.168h75m-75 0h75m0 0v41.664m0-41.664v41.664m0 0h-75m75 0h-75m0 0V54.168m0 41.664V54.168M20.832 62.5c20.11-.18 40.219-.36 55.68-.5m-55.68.5c14.656-.133 29.313-.262 55.68-.5M20.832 71.332c13.098-.117 26.2-.234 55.68-.5m-55.68.5l55.68-.5M21.117 79.582c20.645-.184 41.285-.371 55.68-.5m-55.68.5c18.153-.16 36.301-.324 55.68-.5" stroke-width="1.66668"/>`;

src/dialogs/Messages.ts

@@ -11,12 +11,23 @@ Thank you & Enjoy!
 `;
 
 export const RELEASE_NOTES: { [k: string]: string } = {
-  Intro: `I want to help you keep up with all the updates. After installing each release, you'll be prompted with a summary of new features and fixes. You can disable these popup messages in plugin settings.
+  Intro: `After each update you'll be prompted with the release notes. You can disable this in plugin settings.
 
-I develop this plugin as a hobby, spending most of my free time doing this. If you'd like to contribute to the on-going work, I have a simple membership scheme with Bronze, Silver and Gold tiers. Many of you have already bought me a coffee. THANK YOU! It really means a lot to me! If you find this plugin valuable, please consider supporting me.
+I develop this plugin as a hobby, spending my free time doing this. If you find it valuable, then please say THANK YOU or...
 
 <div class="ex-coffee-div"><a href="https://ko-fi.com/zsolt"><img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=3" height=45></a></div>
 `,
+"1.7.27":`## New
+- Import SVG drawing as an Excalidraw object. [#679](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/679)
+
+<div class="excalidraw-videoWrapper"><div>
+<iframe src="https://www.youtube.com/embed/vlC1-iBvIfo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div></div>
+
+## Fixed
+- Large drawings freeze on the iPad when opening the file. I implemented a workaround whereby Excalidraw will avoid zoom-to-fit drawings with over 1000 elements. [#863](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/863)
+- Reintroduced copy/paste to the context menu
+`,
 "1.7.26":`## Fixed
 - Transcluded block with a parent bullet does not embed sub-bullet [#853](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/853)
 - Transcluded text will now exclude ^block-references at end of lines

src/dialogs/ReleaseNotes.ts

@@ -35,7 +35,7 @@ export class ReleaseNotes extends Modal {
     const message = this.version
       ? Object.keys(RELEASE_NOTES)
           .filter((key) => key === "Intro" || isVersionNewerThanOther(key,prevRelease))
-          .map((key: string) => `# ${key}\n${RELEASE_NOTES[key]}`)
+          .map((key: string) => `${key==="Intro" ? "" : `# ${key}\n`}${RELEASE_NOTES[key]}`)
           .slice(0, 10)
           .join("\n\n---\n")
       : FIRST_RUN;

src/dialogs/SuggesterInfo.ts

@@ -224,8 +224,8 @@ export const EXCALIDRAW_AUTOMATE_INFO: SuggesterInfo[] = [
   },
   {
     field: "addImage",
-    code: "addImage(topX: number, topY: number, imageFile: TFile): Promise<string>;",
-    desc: null,
+    code: "addImage(topX: number, topY: number, imageFile: TFile, scale: boolean): Promise<string>;",
+    desc: "set scale to false if you want to embed the image at 100% of its original size. Default is true which will insert a scaled image",
     after: "",
   },
   {

src/menu/ActionButton.tsx

@@ -26,9 +26,9 @@ export class ActionButton extends React.Component<ButtonProps, ButtonState> {
     return (
       <button
         style={{
-          width: "fit-content",
-          padding: "2px",
-          margin: "4px",
+          //width: "fit-content",
+          //padding: "2px",
+          //margin: "4px",
         }}
         className="ToolIcon_type_button ToolIcon_size_small ToolIcon_type_button--show ToolIcon"
         title={this.props.title}

src/menu/MenuLinks.tsx

@@ -0,0 +1,21 @@
+import { AppState } from "@zsviczian/excalidraw/types/types";
+import clsx from "clsx";
+import * as React from "react";
+import ExcalidrawPlugin from "../main";
+
+
+export class MenuLinks {
+  plugin: ExcalidrawPlugin;
+  ref: React.MutableRefObject<any>;
+
+  constructor(plugin: ExcalidrawPlugin, ref: React.MutableRefObject<any>) {
+    this.plugin = plugin;
+    this.ref = ref;
+  }
+
+  render = (isMobile: boolean, appState: AppState) => {
+    return (
+        <div>Hello</div>
+    );
+    }
+}

src/menu/ToolsPanel.tsx

@@ -257,7 +257,7 @@ export class ToolsPanel extends React.Component<PanelProps, PanelState> {
             className="Island App-menu__left scrollbar"
             style={{
               maxHeight: "350px",
-              backgroundColor: "transparent",
+              width: "initial",
               //@ts-ignore
               "--padding": 2,
               display: this.state.minimized ? "none" : "block",

src/utils/Utils.ts

@@ -22,6 +22,7 @@ import { ExcalidrawElement } from "@zsviczian/excalidraw/types/element/types";
 import { ExportSettings } from "../ExcalidrawView";
 import { compressToBase64, decompressFromBase64 } from "lz-string";
 import { getIMGFilename } from "./FileUtils";
+import ExcalidrawScene from "lib/svgToExcalidraw/elements/ExcalidrawScene";
 
 declare const PLUGIN_VERSION:string;
 
@@ -85,7 +86,7 @@ const random = new Random(Date.now());
 export const randomInteger = () => Math.floor(random.next() * 2 ** 31);
 
 //https://macromates.com/blog/2006/wrapping-text-with-regular-expressions/
-export function wrapText(
+export function wrapTextAtCharLength(
   text: string,
   lineLen: number,
   forceWrap: boolean = false,
@@ -649,3 +650,19 @@ export const awaitNextAnimationFrame = async () => new Promise(requestAnimationF
 export const log = console.log.bind(window.console);
 export const debug = console.log.bind(window.console);
 //export const debug = function(){};
+
+
+export const getContainerElement = (
+  element:
+    | (ExcalidrawElement & { containerId: ExcalidrawElement["id"] | null })
+    | null,
+  scene: ExcalidrawScene,
+) => {
+  if (!element) {
+    return null;
+  }
+  if (element.containerId) {
+    return scene.elements.filter(el=>el.id === element.containerId)[0] ?? null;
+  }
+  return null;
+};

styles.css

@@ -96,8 +96,7 @@ li[data-testid] {
 
 .ex-coffee-div {
 	text-align: center;
-	margin-bottom: 20px;
-  
+	margin-bottom: 10px;
 }
 
 .excalidraw-scriptengine-install td>img {
@@ -184,9 +183,8 @@ li[data-testid] {
 }
 
 .excalidraw-release .modal {
-  max-height: 90%;
-  width: auto;
-  max-width: 130ch;
+  max-height: 80%;
+  max-width: 100ch;
 }
 
 .excalidraw .Island .scrollbar {
@@ -225,6 +223,65 @@ textarea.excalidraw-wysiwyg {
   border-radius: 0;  
 }
 
-.is-tablet .excalidraw button {
+.is-tablet .excalidraw button,
+.is-mobile .excalidraw button {
   padding: initial;
+  height: 1.8rem;
+}
+
+.excalidraw button,
+.ToolIcon button {
+  box-shadow: none;
+  justify-content: initial;
+}
+
+.excalidraw {
+  --default-button-size: 2rem !important;
+  --default-icon-size: 1rem !important;
+  --lg-button-size: 1.8rem !important;
+  --lg-icon-size: 1rem !important;
+}
+
+.excalidraw .tray-zoom {
+  pointer-events: initial;
+  padding-bottom: 0.05rem;
+  padding-top: 0.05rem;
+}
+
+.excalidraw-container.theme--dark {
+  background-color: #121212;
+  color: #fff;
+}
+
+/* https://discordapp.com/channels/686053708261228577/989603365606531104/1041266507256184863 */
+/*.workspace-leaf {
+	contain: none !important;
+}*/
+
+.color-picker-content {
+  overflow-y: auto;
+  max-height: 10rem;
+}
+
+.excalidraw .FixedSideContainer_side_top {
+  top: 0.3rem;
+}
+
+.excalidraw .ToolIcon__keybinding {
+  font-size: 0.5rem;
+}
+
+.Island > .Stack > .Stack {
+  padding:0.2rem;
+}
+
+label.color-input-container > input {
+  max-width: 8rem;
+}
+
+.excalidraw .FixedSideContainer_side_top {
+  left: 10px !important;
+  top: 10px !important;
+  right: 10px !important;
+  bottom: 10px !important;
 }

yarn.lock

@@ -2221,10 +2221,10 @@
   dependencies:
     "@zerollup/ts-helpers" "^1.7.18"
 
-"@zsviczian/excalidraw@0.13.0-obsidian":
-  "integrity" "sha512-c4SnBEGKtenLB/1gSjXe3BVA+yZfo8b1p2E7sVcaPG8MTz6cpQsCB2+cv7Zta5ihIxuGfK3ZSepVhMbN7RFY2w=="
-  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.13.0-obsidian.tgz"
-  "version" "0.13.0-obsidian"
+"@zsviczian/excalidraw@0.13.0-obsidian-1":
+  "integrity" "sha512-gHfuEX/qrBa+4kolxEkQ/3W5hGfSLoJSXDpuhb8Mvvyyl148hsuWmhUQGFWcNee73YbuQ0arb3hXqwnMUgK0Ig=="
+  "resolved" "https://registry.npmjs.org/@zsviczian/excalidraw/-/excalidraw-0.13.0-obsidian-1.tgz"
+  "version" "0.13.0-obsidian-1"
 
 "abab@^2.0.3", "abab@^2.0.5":
   "integrity" "sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q=="