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.

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/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/ActionIcons.tsx

@@ -8,11 +8,13 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 200 190"
+      fill="var(--icon-fill-color)"
     >
       <g fillRule="evenodd">
         <path strokeWidth="0" d="M50 10h20v20H50" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M50 10h20m-20 0h20m0 0v20m0-20v20m0 0H50m20 0H50m0 0V10m0 20V10"
         />
@@ -21,6 +23,7 @@ export const ICONS = {
         <path strokeWidth="0" d="M90 10h20v20H90" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M90 10h20m-20 0h20m0 0v20m0-20v20m0 0H90m20 0H90m0 0V10m0 20V10"
         />
@@ -29,6 +32,7 @@ export const ICONS = {
         <path strokeWidth="0" d="M130 10h20v20h-20" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M130 10h20m-20 0h20m0 0v20m0-20v20m0 0h-20m20 0h-20m0 0V10m0 20V10"
         />
@@ -37,6 +41,7 @@ export const ICONS = {
         <path strokeWidth="0" d="M170 10h20v20h-20" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M170 10h20m-20 0h20m0 0v20m0-20v20m0 0h-20m20 0h-20m0 0V10m0 20V10"
         />
@@ -45,6 +50,7 @@ export const ICONS = {
         <path strokeWidth="0" d="M70 50h60v80h20l-50 50-50-50h20V50" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M70 50h60m-60 0h60m0 0v80m0-80v80m0 0h20m-20 0h20m0 0-50 50m50-50-50 50m0 0-50-50m50 50-50-50m0 0h20m-20 0h20m0 0V50m0 80V50m0 0s0 0 0 0m0 0s0 0 0 0m0 0s0 0 0 0m0 0s0 0 0 0"
         />
@@ -53,6 +59,7 @@ export const ICONS = {
         <path strokeWidth="0" d="M10 10h20v20H10" />
         <path
           fill="none"
+          stroke="var(--icon-fill-color)"
           strokeWidth="2"
           d="M10 10h20m-20 0h20m0 0v20m0-20v20m0 0H10m20 0H10m0 0V10m0 20V10"
         />
@@ -67,8 +74,12 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
+      fill="var(--icon-fill-color)"
+      stroke="none"
     >
-      <path d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" />
+      <path 
+        d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z" 
+      />
     </svg>
   ),
   //far fa-file-alt
@@ -79,6 +90,8 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 384 512"
+      fill="var(--icon-fill-color)"
+      stroke="none"
     >
       <path d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z" />
     </svg>
@@ -91,6 +104,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 576 512"
+      stroke="none"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M571.31 251.31l-22.62-22.62c-6.25-6.25-16.38-6.25-22.63 0L480 274.75l-46.06-46.06c-6.25-6.25-16.38-6.25-22.63 0l-22.62 22.62c-6.25 6.25-6.25 16.38 0 22.63L434.75 320l-46.06 46.06c-6.25 6.25-6.25 16.38 0 22.63l22.62 22.62c6.25 6.25 16.38 6.25 22.63 0L480 365.25l46.06 46.06c6.25 6.25 16.38 6.25 22.63 0l22.62-22.62c6.25-6.25 6.25-16.38 0-22.63L525.25 320l46.06-46.06c6.25-6.25 6.25-16.38 0-22.63zM552 0H307.65c-14.54 0-27.26 9.8-30.95 23.87l-84.79 322.8-58.41-106.1A32.008 32.008 0 0 0 105.47 224H24c-13.25 0-24 10.74-24 24v48c0 13.25 10.75 24 24 24h43.62l88.88 163.73C168.99 503.5 186.3 512 204.94 512c17.27 0 44.44-9 54.28-41.48L357.03 96H552c13.25 0 24-10.75 24-24V24c0-13.26-10.75-24-24-24z" />
     </svg>
@@ -103,19 +119,32 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
+      stroke="none"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z" />
     </svg>
   ),
   exportSVG: (
-    <svg viewBox="0 0 28 28">
+    <svg 
+      viewBox="0 0 28 28"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="1"
+    >
       <text style={{ fontSize: "28px", fontWeight: "bold" }} x="4" y="24">
         S
       </text>
     </svg>
   ),
   exportPNG: (
-    <svg viewBox="0 0 28 28">
+    <svg 
+      viewBox="0 0 28 28"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="1"
+    >
       <text style={{ fontSize: "28px", fontWeight: "bold" }} x="4" y="24">
         P
       </text>
@@ -128,6 +157,8 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 100 100"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="2"
     >
       <g transform="translate(30,5)">
         <path d="M14.45 1.715c-2.723 2.148-6.915 5.797-10.223 8.93l-2.61 2.445.477 3.207c.258 1.75.738 5.176 1.031 7.582.332 2.406.66 4.668.773 4.996.145.438 0 .656-.406.656-.699 0-.734-.183 1.176 5.832.7 2.297 1.363 4.414 1.434 4.633.074.254.367.363.699.254.332-.145.515-.438.406-.691-.113-.293.074-.586.367-.696.403-.144.367-.437-.258-1.492-.992-1.64-3.53-15.64-3.675-20.164-.11-3.207-.11-3.242 1.25-5.066 1.324-1.786 4.375-4.485 9.078-7.91 1.324-.985 2.648-2.079 3.015-2.446.551-.656.809-.472 5.442 4.414 2.683 2.805 5.664 5.688 6.617 6.414l1.766 1.313-1.36 2.844c-.734 1.53-3.715 7.437-6.656 13.054-6.137 11.813-4.887 10.68-12.02 10.79l-4.632.038-1.547 1.75c-1.617 1.86-1.836 2.551-1.063 3.72.293.398.512 1.054.512 1.456 0 .656.258.766 1.73.84.918.035 1.762.145 1.875.254.11.11.258 2.371.368 5.031l.144 4.813-2.46 5.25C1.616 72.516 0 76.527 0 77.84c0 .691.148 1.273.293 1.273.367 0 .367-.035 15.332-30.988 6.95-14.363 13.531-27.89 14.633-30.113 1.101-2.227 2.094-4.266 2.168-4.559.074-.328-2.461-2.844-6.508-6.379C22.281 3.864 19.082.95 18.785.621c-.844-1.023-2.094-.695-4.336 1.094zM15.7 43.64c-1.692 3.246-1.766 3.28-6.4 3.5-4.081.218-4.152.183-4.152-.582 0-.438-.148-1.024-.332-1.313-.222-.328-.074-.914.442-1.715l.808-1.238h3.676c2.024-.04 4.34-.184 5.149-.328.808-.149 1.507-.219 1.578-.184.074.035-.293.875-.77 1.86zm-3.09 5.832c-.294.765-1.067 2.37-1.692 3.574-1.027 2.043-1.137 2.113-1.395 1.277-.148-.511-.257-2.008-.296-3.355-.036-2.66-.11-2.625 2.98-2.809l.992-.035zm0 0" />
@@ -143,6 +174,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z" />
     </svg>
@@ -155,6 +189,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 640 512"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="10"      
+      fill="var(--icon-fill-color)"
     >
       <path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z" />
     </svg>
@@ -167,6 +204,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 448 512"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M128 32H32C14.31 32 0 46.31 0 64v96c0 17.69 14.31 32 32 32s32-14.31 32-32V96h64c17.69 0 32-14.31 32-32S145.7 32 128 32zM416 32h-96c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32V64C448 46.31 433.7 32 416 32zM128 416H64v-64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96c0 17.69 14.31 32 32 32h96c17.69 0 32-14.31 32-32S145.7 416 128 416zM416 320c-17.69 0-32 14.31-32 32v64h-64c-17.69 0-32 14.31-32 32s14.31 32 32 32h96c17.69 0 32-14.31 32-32v-96C448 334.3 433.7 320 416 320z" />
     </svg>
@@ -179,6 +219,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 448 512"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M128 320H32c-17.69 0-32 14.31-32 32s14.31 32 32 32h64v64c0 17.69 14.31 32 32 32s32-14.31 32-32v-96C160 334.3 145.7 320 128 320zM416 320h-96c-17.69 0-32 14.31-32 32v96c0 17.69 14.31 32 32 32s32-14.31 32-32v-64h64c17.69 0 32-14.31 32-32S433.7 320 416 320zM320 192h96c17.69 0 32-14.31 32-32s-14.31-32-32-32h-64V64c0-17.69-14.31-32-32-32s-32 14.31-32 32v96C288 177.7 302.3 192 320 192zM128 32C110.3 32 96 46.31 96 64v64H32C14.31 128 0 142.3 0 160s14.31 32 32 32h96c17.69 0 32-14.31 32-32V64C160 46.31 145.7 32 128 32z" />
     </svg>
@@ -191,6 +234,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M0 219.2v212.5c0 14.25 11.62 26.25 26.5 27C75.32 461.2 180.2 471.3 240 511.9V245.2C181.4 205.5 79.99 194.8 29.84 192C13.59 191.1 0 203.6 0 219.2zM482.2 192c-50.09 2.848-151.3 13.47-209.1 53.09C272.1 245.2 272 245.3 272 245.5v266.5c60.04-40.39 164.7-50.76 213.5-53.28C500.4 457.9 512 445.9 512 431.7V219.2C512 203.6 498.4 191.1 482.2 192zM352 96c0-53-43-96-96-96S160 43 160 96s43 96 96 96S352 149 352 96z" />
     </svg>
@@ -218,6 +264,8 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 576 512"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M574.1 280.4l-45.38-181.8c-5.875-23.63-21.62-44-43-55.75c-21.5-11.75-46.1-14.13-70.25-6.375l-15.25 5.125c-8.375 2.75-12.87 11.88-10 20.25l5 15.13c2.75 8.375 11.88 12.88 20.25 10.13l13.12-4.375c10.88-3.625 23-3.625 33.25 1.75c10.25 5.375 17.5 14.5 20.38 25.75l38.38 153.9c-22.12-6.875-49.75-12.5-81.13-12.5c-34.88 0-73.1 7-114.9 26.75H251.4C210.5 258.6 171.4 251.6 136.5 251.6c-31.38 0-59 5.625-81.12 12.5l38.38-153.9c2.875-11.25 10.12-20.38 20.5-25.75C124.4 79.12 136.5 79.12 147.4 82.74l13.12 4.375c8.375 2.75 17.5-1.75 20.25-10.13l5-15.13C188.6 53.49 184.1 44.37 175.6 41.62l-15.25-5.125c-23.13-7.75-48.75-5.375-70.13 6.375c-21.37 11.75-37.12 32.13-43 55.75L1.875 280.4C.6251 285.4 .0001 290.6 .0001 295.9v70.25C.0001 428.1 51.63 480 115.3 480h37.13c60.25 0 110.4-46 114.9-105.4l2.875-38.63h35.75l2.875 38.63C313.3 433.1 363.4 480 423.6 480h37.13c63.62 0 115.2-51 115.2-113.9V295.9C576 290.6 575.4 285.5 574.1 280.4zM203.4 369.7c-2 26-24.38 46.25-51 46.25H115.2C87 415.1 64 393.6 64 366.1v-37.5c18.12-6.5 43.38-13 72.62-13c23.88 0 47.25 4.375 69.88 13L203.4 369.7zM512 366.1c0 27.5-23 49.88-51.25 49.88h-37.13c-26.62 0-49-20.25-51-46.25l-3.125-41.13c22.62-8.625 46.13-13 70-13c29 0 54.38 6.5 72.5 13V366.1z" />
     </svg>
@@ -229,6 +277,8 @@ export const ICONS = {
       role="img"
       viewBox="0 110 700 340"
       xmlns="http://www.w3.org/2000/svg"
+      stroke="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="m593.95 239.4v-1.5742c-0.85547-1.8828-2.043-3.6016-3.5-5.0742l-52.5-52.5c-1.4688-1.457-3.1875-2.6445-5.0742-3.5h-1.5742c-1.4727-0.49219-3.0039-0.78516-4.5508-0.875h-124.25c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v87.5h-70v-105.88-1.0508c-0.089844-1.5469-0.38281-3.0781-0.875-4.5508v-1.5742c-0.85547-1.8828-2.043-3.6016-3.5-5.0742l-52.5-52.5c-1.4727-1.457-3.1914-2.6445-5.0742-3.5h-1.5742c-1.7031-0.875-3.5352-1.4688-5.4258-1.75h-123.55c-4.6406 0-9.0938 1.8438-12.375 5.125s-5.125 7.7344-5.125 12.375v245c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h175c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-52.5h70v122.5c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h175c4.6406 0 9.0938-1.8438 12.375-5.125s5.125-7.7344 5.125-12.375v-192.5-1.0508c-0.14453-1.5547-0.5-3.0859-1.0508-4.5508zm-313.95 110.6h-140v-210h87.5v35c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h35v87.5h-52.5c-6.2539 0-12.031 3.3359-15.156 8.75s-3.125 12.086 0 17.5 8.9023 8.75 15.156 8.75h52.5zm140 70v-105h27.824l-5.0742 5.0742c-3.7031 3.1719-5.9141 7.7461-6.1055 12.617-0.1875 4.8711 1.668 9.6016 5.1133 13.051 3.4492 3.4453 8.1797 5.3008 13.051 5.1133 4.8711-0.19141 9.4453-2.4023 12.617-6.1055l35-35c3.2578-3.2773 5.0898-7.7148 5.0898-12.336 0-4.625-1.832-9.0586-5.0898-12.34l-35-35c-4.5078-3.8555-10.66-5.1719-16.348-3.4883-5.6875 1.6797-10.137 6.1289-11.816 11.816-1.6836 5.6914-0.37109 11.844 3.4883 16.348l5.0742 5.0742h-27.824v-69.824h87.5v35c0 4.6406 1.8438 9.0938 5.125 12.375s7.7344 5.125 12.375 5.125h35v157.5z" />
     </svg>
@@ -240,6 +290,8 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 512 512"
+      fill="var(--icon-fill-color)"
+      stroke="none"
     >
       <path d="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" />
     </svg>
@@ -251,6 +303,9 @@ export const ICONS = {
       role="img"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 640 512"
+      stroke="var(--icon-fill-color)"
+      fill="var(--icon-fill-color)"
+      strokeWidth="20"
     >
       <path d="M618.1 97.67c-13.02-4.375-27.45 .1562-35.72 11.16L464 266.7l-118.4-157.8c-8.266-11.03-22.64-15.56-35.72-11.16C296.8 102 288 114.2 288 128v256c0 17.69 14.33 32 32 32s32-14.31 32-32v-160l86.41 115.2c12.06 16.12 39.13 16.12 51.19 0L576 224v160c0 17.69 14.33 32 32 32s32-14.31 32-32v-256C640 114.2 631.2 102 618.1 97.67zM224 96.01H32c-17.67 0-32 14.31-32 32s14.33 32 32 32h64v223.1c0 17.69 14.33 31.99 32 31.99s32-14.3 32-31.99V160h64c17.67 0 32-14.31 32-32S241.7 96.01 224 96.01z" />
     </svg>

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

@@ -223,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=="