publish custom zoom script

Fixed Issue with Invert Colors Script

ea-scripts/Custom Zoom.md

@@ -0,0 +1,15 @@
+/*
+You can set a custom zoom level with this script. This allows you to set a zoom level below 10% or set the zoom level to a specific value.  Note however, that Excalidraw has a bug under 10% zoom, and a phantom copy of your image may appear on screen. If this happens, increase the zoom and the phantom should disappear, if it doesn't then close and open the drawing.
+
+```js*/
+const api = ea.getExcalidrawAPI();
+const appState = api.getAppState();
+const zoomStr = await utils.inputPrompt("Zoom [%]",null,`${appState.zoom.value*100}%`);
+if(!zoomStr) return;
+const zoomNum = parseFloat(zoomStr.match(/^\d*/)[0]);
+if(isNaN(zoomNum)) {
+  new Notice("You must provide a number");
+  return;
+}
+
+ea.getExcalidrawAPI().updateScene({appState:{zoom:{value: zoomNum/100 }}});

ea-scripts/Custom Zoom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-scan-search"><g stroke-width="2"><path d="M3 7V5a2 2 0 0 1 2-2h2"/><path d="M17 3h2a2 2 0 0 1 2 2v2"/><path d="M21 17v2a2 2 0 0 1-2 2h-2"/><path d="M7 21H5a2 2 0 0 1-2-2v-2"/><circle cx="12" cy="12" r="3"/><path d="m16 16-1.9-1.9"/></g></svg>

ea-scripts/Invert colors.md

@@ -33,8 +33,20 @@ const invertColor = (color) => {
 	}
 }
 
-const invertPaletteColors = (palette) => Object.keys(palette).forEach(key => palette[key] = invertColor(palette[key]));
-Object.keys(colorPalette).forEach(key => invertPaletteColors(colorPalette[key]));
+function invertColorsRecursively(obj) {
+  if (typeof obj === 'string') {
+    return invertColor(obj);
+  } else if (Array.isArray(obj)) {
+    return obj.map(item => invertColorsRecursively(item));
+  } else if (typeof obj === 'object' && obj !== null) {
+    const result = {};
+    Object.keys(obj).forEach(key => result[key] = invertColorsRecursively(obj[key]));
+    return result;
+  } else {
+    return obj;
+  }
+}
+colorPalette = invertColorsRecursively(colorPalette);
 
 ea.copyViewElementsToEAforEditing(ea.getViewElements());
 ea.getElements().forEach(el=>{

ea-scripts/index-new.md

@@ -116,6 +116,7 @@ I would love to include your contribution in the script library. If you have a s
 |----|-----|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Auto%20Draw%20for%20Pen.svg"/></div>|[[#Auto Draw for Pen]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Boolean%20Operations.svg"/></div>|[[#Boolean Operations]]|
+|<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Custom%20Zoom.svg"/></div>|[[#Custom Zoom]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Copy%20Selected%20Element%20Styles%20to%20Global.svg"/></div>|[[#Copy Selected Element Styles to Global]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/ExcaliAI.svg"/></div>|[[#ExcaliAI]]|
 |<div><img src="https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/GPT-Draw-a-UI.svg"/></div>|[[#GPT Draw-a-UI]]|
@@ -272,6 +273,12 @@ https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea
 ```
 <table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Crop%20Vintage%20Mask.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">Adds a rounded mask to the image by adding a full cover black mask and a rounded rectangle white mask. The script is also useful for adding just a black mask. In this case, run the script, then delete the white mask and add your custom white mask.<br><img src='https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-crop-vintage.jpg'></td></tr></table>
 
+## Custom Zoom
+```excalidraw-script-install
+https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Custom%20Zoom.md
+```
+<table><tr  valign='top'><td class="label">Author</td><td class="data"><a href='https://github.com/zsviczian'>@zsviczian</a></td></tr><tr valign='top'><td class="label">Source</td><td class="data"><a href='https://github.com/zsviczian/obsidian-excalidraw-plugin/blob/master/ea-scripts/Custom%20Zoom.md'>File on GitHub</a></td></tr><tr valign='top'><td class="label">Description</td><td class="data">You can set a custom zoom level with this script. This allows you to set a zoom level below 10% or set the zoom level to a specific value.  Note however, that Excalidraw has a bug under 10% zoom... a phantom copy of your image may appear on screen. If this happens, increase the zoom and the phantom should disappear, if it doesn't, then close and open the drawing.</td></tr></table>
+
 ## Darken background color
 ```excalidraw-script-install
 https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/ea-scripts/Darken%20background%20color.md

manifest.json

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

package.json

@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@zsviczian/excalidraw": "0.17.1-obsidian-15",
+    "@zsviczian/excalidraw": "0.17.1-obsidian-17",
     "chroma-js": "^2.4.2",
     "clsx": "^2.0.0",
     "colormaster": "^1.2.1",

src/EmbeddedFileLoader.ts

@@ -563,7 +563,7 @@ export class EmbeddedFilesLoader {
           }
           //files.push(fileData);
         }
-      } else if (embeddedFile.isSVGwithBitmap) {
+      } /*else if (embeddedFile.isSVGwithBitmap) {
         const fileData = {
           mimeType: embeddedFile.mimeType,
           id: entry.value[0],
@@ -580,7 +580,7 @@ export class EmbeddedFilesLoader {
         catch(e) {
           errorlog({ where: "EmbeddedFileLoader.loadSceneFiles", error: e });
         }
-      }
+      }*/
     }
 
     let equation;

src/ExcalidrawAutomate.ts

@@ -2195,6 +2195,19 @@ export class ExcalidrawAutomate {
     color: string,
   ) => void = null;
 
+  /**
+   * If set, this callback is triggered whenever a drawing is exported to SVG.
+   * The string returned will replace the link in the exported SVG.
+   * The hook is only executed if the link is to a file internal to Obsidian
+   * see: https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1605
+   */
+  onUpdateElementLinkForExportHook: (data: {
+    originalLink: string,
+    obsidianLink: string,
+    linkedFile: TFile | null,
+    hostFile: TFile,
+  }) => string = null;
+
   /**
    * utility function to generate EmbeddedFilesLoader object
    * @param isDark 
@@ -2897,7 +2910,15 @@ export const updateElementLinksToObsidianLinks = ({elements, hostFile}:{
       if(!file) {
         return el;
       }
-      const link = app.getObsidianUrl(file);
+      let link = app.getObsidianUrl(file);
+      if(window.ExcalidrawAutomate?.onUpdateElementLinkForExportHook) {
+        link = window.ExcalidrawAutomate.onUpdateElementLinkForExportHook({
+          originalLink: el.link,
+          obsidianLink: link,
+          linkedFile: file,
+          hostFile: hostFile
+       });
+      }
       const newElement: Mutable<ExcalidrawElement> = cloneElement(el);
       newElement.link = link;
       return newElement;

src/ExcalidrawView.ts

@@ -50,6 +50,7 @@ import {
   obsidianToExcalidrawMap,
   MAX_IMAGE_SIZE,
   fileid,
+  sceneCoordsToViewportCoords,
 } from "./constants/constants";
 import ExcalidrawPlugin from "./main";
 import { 
@@ -134,8 +135,6 @@ import { nanoid } from "nanoid";
 import { CustomMutationObserver, isDebugMode } from "./utils/DebugHelper";
 import { extractCodeBlocks, postOpenAI } from "./utils/AIUtils";
 import { Mutable } from "@zsviczian/excalidraw/types/excalidraw/utility-types";
-import no from "./lang/locale/no";
-import { carveOutImage } from "./utils/CarveOut";
 
 declare const PLUGIN_VERSION:string;
 
@@ -261,6 +260,7 @@ export default class ExcalidrawView extends TextFileView {
   public canvasNodeFactory: CanvasNodeFactory;
   private embeddableRefs = new Map<ExcalidrawElement["id"], HTMLIFrameElement | HTMLWebViewElement>();
   private embeddableLeafRefs = new Map<ExcalidrawElement["id"], any>();
+//  private scrollYBeforeKeyboard: number = null;
 
   public semaphores: {
     popoutUnload: boolean; //the unloaded Excalidraw view was the last leaf in the popout window
@@ -1004,18 +1004,21 @@ export default class ExcalidrawView extends TextFileView {
         let secondOrderLinks: string = " ";
         
         const backlinks = this.app.metadataCache?.getBacklinksForFile(ef.file)?.data;
-        if(backlinks) {
+        const secondOrderLinksSet = new Set<string>();
+        if(backlinks && this.plugin.settings.showSecondOrderLinks) {
           const linkPaths = Object.keys(backlinks)
             .filter(path => (path !== this.file.path) && (path !== ef.file.path))
             .map(path => {
               const filepathParts = splitFolderAndFilename(path);
+              if(secondOrderLinksSet.has(path)) return "";
+              secondOrderLinksSet.add(path);
               return `[[${path}|Second Order Link: ${filepathParts.basename}]]`;
             });
           secondOrderLinks += linkPaths.join(" ");
         }
 
-        if(this.plugin.isExcalidrawFile(ef.file)) {
-          secondOrderLinks += getExcalidrawFileForwardLinks(this.app, ef.file);             
+        if(this.plugin.settings.showSecondOrderLinks && this.plugin.isExcalidrawFile(ef.file)) {
+          secondOrderLinks += getExcalidrawFileForwardLinks(this.app, ef.file, secondOrderLinksSet);             
         }
 
         const linkString = (ef.isHyperLink || ef.isLocalLink
@@ -4468,6 +4471,7 @@ export default class ExcalidrawView extends TextFileView {
         height: undefined,
       });
 
+
       React.useEffect(() => {
         this.toolsPanelRef = toolsPanelRef;
         this.embeddableMenuRef = embeddableMenuRef;
@@ -4476,6 +4480,7 @@ export default class ExcalidrawView extends TextFileView {
         this.excalidrawWrapperRef = excalidrawWrapperRef;
       }, []);
 
+
       React.useEffect(() => {
         setDimensions({
           width: this.contentEl.clientWidth,
@@ -4487,7 +4492,54 @@ export default class ExcalidrawView extends TextFileView {
             const width = this.contentEl.clientWidth;
             const height = this.contentEl.clientHeight;
             if(width === 0 || height === 0) return;
+            
+            //this is an aweful hack to prevent the keyboard pushing the canvas out of view.
+            //The issue is that contrary to Excalidraw.com where the page is simply pushed up, in 
+            //Obsidian the leaf has a fixed top. As a consequence the top of excalidrawWrapperDiv does not get pushed out of view
+            //but shirnks. But the text area is positioned relative to excalidrawWrapperDiv and consequently does not fit, which
+            //the distorts the whole layout.
+            //I hope to grow up one day and clean up this mess of a workaround, that resets the top of excalidrawWrapperDiv
+            //to a negative value, and manually scrolls back elements that were scrolled off screen
+            //I tried updating setDimensions with the value for top... but setting top and height using setDimensions did not do the trick
+            //I found that adding and removing this style solves the issue.
+            //...again, just aweful, but works.
+            const st = this.excalidrawAPI.getAppState();
+            const isKeyboardOutEvent = st.editingElement?.type === "text";
+            const isKeyboardBackEvent = this.semaphores.isEditingText && !isKeyboardOutEvent;
+            if(isKeyboardOutEvent) {
+              const self = this;
+                const appToolHeight = (self.contentEl.querySelector(".Island.App-toolbar") as HTMLElement)?.clientHeight ?? 0;
+                const editingElViewY = sceneCoordsToViewportCoords({sceneX:0, sceneY:st.editingElement.y}, st).y;
+                const scrollViewY = sceneCoordsToViewportCoords({sceneX:0, sceneY:-st.scrollY}, st).y;
+                const delta = editingElViewY - scrollViewY;
+                const isElementAboveKeyboard = height > (delta + appToolHeight*2)
+                const excalidrawWrapper = this.excalidrawWrapperRef.current;
+                console.log({isElementAboveKeyboard});
+                if(excalidrawWrapper && !isElementAboveKeyboard) {
+                  excalidrawWrapper.style.top = `${-(st.height - height)}px`;
+                  excalidrawWrapper.style.height = `${st.height}px`;
+                  self.excalidrawContainer?.querySelector(".App-bottom-bar")?.scrollIntoView();
+                  //@ts-ignore
+                  self.headerEl?.scrollIntoView();
+                }
+            }
+            if(isKeyboardBackEvent) {
+              const excalidrawWrapper = this.excalidrawWrapperRef.current;
+              const appButtonBar = this.excalidrawContainer?.querySelector(".App-bottom-bar");
+              //@ts-ignore
+              const headerEl = this.headerEl;
+              if(excalidrawWrapper) {
+                excalidrawWrapper.style.top = "";
+                excalidrawWrapper.style.height = "";
+                appButtonBar?.scrollIntoView();
+                headerEl?.scrollIntoView();
+              }
+            }
+            //end of aweful hack
+
+
             setDimensions({ width, height });
+            
             if (this.toolsPanelRef && this.toolsPanelRef.current) {
               this.toolsPanelRef.current.updatePosition();
             }

src/MarkdownPostProcessor.ts

@@ -45,11 +45,20 @@ let metadataCache: MetadataCache;
 const getDefaultWidth = (plugin: ExcalidrawPlugin): string => {
   const width = parseInt(plugin.settings.width);
   if (isNaN(width) || width === 0 || width === null) {
+    if(getDefaultHeight(plugin)!=="") return "";
     return "400";
   }
   return plugin.settings.width;
 };
 
+const getDefaultHeight = (plugin: ExcalidrawPlugin): string => {
+  const height = parseInt(plugin.settings.height);
+  if (isNaN(height) || height === 0 || height === null) {
+    return "";
+  }
+  return plugin.settings.height;
+};
+
 export const initializeMarkdownPostProcessor = (p: ExcalidrawPlugin) => {
   plugin = p;
   vault = p.app.vault;
@@ -123,9 +132,14 @@ const setStyle = ({element,imgAttributes,onCanvas}:{
   onCanvas: boolean,
 }
 ) => {
-  let style = `max-width:${imgAttributes.fwidth}${imgAttributes.fwidth.match(/\d$/) ? "px":""}; `; //width:100%;`; //removed !important https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/886
+  let style = "";
+  if(imgAttributes.fwidth) {
+    style = `max-width:${imgAttributes.fwidth}${imgAttributes.fwidth.match(/\d$/) ? "px":""}; `; //width:100%;`; //removed !important https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/886
+  } else {
+    style = "width: fit-content;"
+  }
   if (imgAttributes.fheight) {
-    style += `height:${imgAttributes.fheight}px;`;
+    style += `${imgAttributes.fwidth?"min-":"max-"}height:${imgAttributes.fheight}px;`;
   }
   if(!onCanvas) element.setAttribute("style", style);
   element.classList.add(...Array.from(imgAttributes.style))
@@ -363,7 +377,7 @@ const createImgElement = async (
         const linkModifier = linkClickModifierType(ev);
         if (plugin.isExcalidrawFile(f) && isMaskFile(plugin, f)) {
           (async () => {
-              const linkString = `[[${f.path}${srcParts[2]?"#"+srcParts[2]:""}]] ${getExcalidrawFileForwardLinks(plugin.app, f)}`;
+              const linkString = `[[${f.path}${srcParts[2]?"#"+srcParts[2]:""}]] ${getExcalidrawFileForwardLinks(plugin.app, f, new Set<string>())}`;
               const result = await linkPrompt(linkString, plugin.app);
               if(!result) return;
               const [file, linkText, subpath] = result;
@@ -510,9 +524,11 @@ const processInternalEmbed = async (internalEmbedEl: Element, file: TFile ):Prom
   internalEmbedEl.addClass("image-embed");
 
   attr.fwidth = internalEmbedEl.getAttribute("width")
-  ? internalEmbedEl.getAttribute("width")
-  : getDefaultWidth(plugin);
-  attr.fheight = internalEmbedEl.getAttribute("height");
+    ? internalEmbedEl.getAttribute("width")
+    : getDefaultWidth(plugin);
+  attr.fheight = internalEmbedEl.getAttribute("height")
+    ? internalEmbedEl.getAttribute("height")
+    : getDefaultHeight(plugin);
   let alt = internalEmbedEl.getAttribute("alt");
   attr.style = ["excalidraw-svg"];
   processAltText(src.split("#")[0],alt,attr);
@@ -596,7 +612,7 @@ const tmpObsidianWYSIWYG = async (
 
   const attr: imgElementAttributes = {
     fname: ctx.sourcePath,
-    fheight: "",
+    fheight: getDefaultHeight(plugin),
     fwidth: getDefaultWidth(plugin),
     style: ["excalidraw-svg"],
   };
@@ -609,8 +625,21 @@ const tmpObsidianWYSIWYG = async (
     //We are processing the markdown preview of an actual Excalidraw file
     //the excalidraw file in markdown preview mode
     const isFrontmatterDiv = Boolean(el.querySelector(".frontmatter"));
-    el.empty();
-    if(!isFrontmatterDiv) {
+    let areaPreview = false;
+    if(Boolean(ctx.frontmatter)) {
+      el.empty();
+    } else {
+      const warningEl = el.querySelector("div>h3[data-heading^='Unable to find section #^");
+      if(warningEl) {
+        const ref = warningEl.getAttr("data-heading").match(/Unable to find section (#\^(?:group=|area=|frame=)[^ ]*)/)?.[1];
+        if(ref) {
+          attr.fname = file.path + ref;
+          areaPreview = true;
+        }
+      }
+
+    }
+    if(!isFrontmatterDiv && !areaPreview) {
       if(el.parentElement === containerEl) containerEl.removeChild(el);
       return;
     }

src/dialogs/Messages.ts

@@ -17,6 +17,39 @@ I develop this plugin as a hobby, spending my free time doing this. If you find
 
 <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>
 `,
+"2.0.24":`
+Quality of Life Fixes!
+
+## Fixed
+- Text editing issue on mobile devices with an on-screen keyboard is now fixed 🥳. Previously, Excalidraw's UI fell apart when the keyboard was activated, and often even after you stopped editing, the canvas positioning was off. I hope to have solved the issue (we'll see after your testing and feedback!). This is one of those cases that seems insignificant but took enormous effort. It took me 2.5 full days of net time to figure out the root cause and the solution (this is not an exaggeration).
+- Tool buttons did not get selected on the first click.
+- Images flicker on Forced Save.
+- Hover preview fixes:
+  - ${String.fromCharCode(96)}area=${String.fromCharCode(96)}, ${String.fromCharCode(96)}group=${String.fromCharCode(96)}, ${String.fromCharCode(96)}frame=${String.fromCharCode(96)} references now display the part of the image as expected in hover preview (showed an empty preview until now).
+  - Block and section references to notes on the "back side of the drawing" now correctly show up in hover preview (showed an empty preview until now).
+
+## New
+- Default height setting in Plugin Settings. Thanks @leoccyao! [#1612](https://github.com/zsviczian/obsidian-excalidraw-plugin/pull/1612)
+`,
+"2.0.23":`
+## New
+- Additional arrowheads (Circle, Circle Outline, Diamond, Diamond Outline, Triangle Outline) are now available via element properties.
+- Setting under "Links and Transclusions" to show/hide second-order links
+
+## Fixed
+- some styling issues with dynamic styles (e.g.: text color of context menu)
+
+## New in ExcalidrawAutomate
+- Excalidraw Publish Support: New hook to modify the link in the exported SVGs. This is useful when you want to export SVGs to your website. If set, this callback is triggered whenever a drawing is exported to SVG. The string returned by the hook will replace the link in the exported SVG. The hook is only executed if the link is to a file internal to Obsidian. [1605](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1605)
+${String.fromCharCode(96,96,96)}js
+onUpdateElementLinkForExportHook: (data: {
+*    originalLink: string,
+*    obsidianLink: string,
+*    linkedFile: TFile | null,
+*    hostFile: TFile,
+*  }) => string = null;
+${String.fromCharCode(96,96,96)}
+`,
 "2.0.22":`
 ## Fixed
 - BUG: Unable to load obsidian excalidraw plugin on ipad 15.x or older [#1525](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/1525)

src/lang/locale/en.ts

@@ -313,6 +313,10 @@ FILENAME_HEAD: "Filename",
   FOCUS_ON_EXISTING_TAB_NAME: "Focus on Existing Tab",
   FOCUS_ON_EXISTING_TAB_DESC: "When opening a link, Excalidraw will focus on the existing tab if the file is already open. " +
     "Enabling this setting overrides 'Reuse Adjacent Pane' when the file is already open.",
+  SECOND_ORDER_LINKS_NAME: "Show second-order links",
+  SECOND_ORDER_LINKS_DESC: "Show links when clicking on a link in Excalidraw. Second-order link are backlinks pointing to the link being clicked. " +
+    "When using image icons to connect similar notes, second order links allow you to get to related notes in one click instead of two. " +
+    "See <a href='https://youtube.com/shorts/O_1ls9c6wBY?feature=share'>YT Short</a> to understand.",
   ADJACENT_PANE_NAME: "Reuse adjacent pane",
   ADJACENT_PANE_DESC:
     `When ${labelCTRL()}+${labelALT()} clicking a link in Excalidraw, by default the plugin will open the link in a new pane. ` +
@@ -465,6 +469,11 @@ FILENAME_HEAD: "Filename",
     "The default width of an embedded drawing. This applies to live preview edit and reading mode, as well as to hover previews. You can specify a custom " +
     "width when embedding an image using the <code>![[drawing.excalidraw|100]]</code> or " +
     "<code>[[drawing.excalidraw|100x100]]</code> format.",
+  EMBED_HEIGHT_NAME: "Default height of embedded (transcluded) image",
+  EMBED_HEIGHT_DESC:
+    "The default height of an embedded drawing. This applies to live preview edit and reading mode, as well as to hover previews. You can specify a custom " +
+    "height when embedding an image using the <code>![[drawing.excalidraw|100]]</code> or " +
+    "<code>[[drawing.excalidraw|100x100]]</code> 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 " +

src/settings.ts

@@ -58,6 +58,7 @@ export interface ExcalidrawSettings {
   displayExportedImageIfAvailable: boolean;
   previewMatchObsidianTheme: boolean;
   width: string;
+  height: string;
   dynamicStyling: DynamicStyle;
   isLeftHanded: boolean;
   iframeMatchExcalidrawTheme: boolean;
@@ -72,6 +73,7 @@ export interface ExcalidrawSettings {
   zoomToFitOnResize: boolean;
   zoomToFitMaxLevel: number;
   openInAdjacentPane: boolean;
+  showSecondOrderLinks: boolean;
   focusOnFileTab: boolean;
   openInMainWorkspace: boolean;
   showLinkBrackets: boolean;
@@ -202,6 +204,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   displayExportedImageIfAvailable: false,
   previewMatchObsidianTheme: false,
   width: "400",
+  height: "",
   dynamicStyling: "colorful",
   isLeftHanded: false,
   iframeMatchExcalidrawTheme: true,
@@ -223,6 +226,7 @@ export const DEFAULT_SETTINGS: ExcalidrawSettings = {
   hoverPreviewWithoutCTRL: false,
   linkOpacity: 1,
   openInAdjacentPane: false,
+  showSecondOrderLinks: true,
   focusOnFileTab: false,
   openInMainWorkspace: true,
   showLinkBrackets: true,
@@ -1170,6 +1174,18 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
       (el) => (el.innerHTML = t("LINKS_DESC")),
     );
 
+    new Setting(detailsEl)
+    .setName(t("SECOND_ORDER_LINKS_NAME"))
+    .setDesc(fragWithHTML(t("SECOND_ORDER_LINKS_DESC")))
+    .addToggle((toggle) =>
+      toggle
+        .setValue(this.plugin.settings.showSecondOrderLinks)
+        .onChange(async (value) => {
+          this.plugin.settings.showSecondOrderLinks = value;
+          this.applySettingsUpdate();
+        }),
+    );
+
     new Setting(detailsEl)
       .setName(t("ADJACENT_PANE_NAME"))
       .setDesc(fragWithHTML(t("ADJACENT_PANE_DESC")))
@@ -1616,6 +1632,20 @@ export class ExcalidrawSettingTab extends PluginSettingTab {
           }),
       );
 
+    new Setting(detailsEl)
+      .setName(t("EMBED_HEIGHT_NAME"))
+      .setDesc(fragWithHTML(t("EMBED_HEIGHT_DESC")))
+      .addText((text) =>
+        text
+          .setPlaceholder("e.g.: 400")
+          .setValue(this.plugin.settings.height)
+          .onChange(async (value) => {
+            this.plugin.settings.height = value;
+            this.applySettingsUpdate();
+            this.requestEmbedUpdate = true;
+          }),
+      );
+
     let scaleText: HTMLDivElement;
 
     new Setting(detailsEl)

src/utils/DynamicStyling.ts

@@ -98,7 +98,6 @@ export const setDynamicStyle = (
     [`--color-gray-50`]: str(text), //frame
     [`--color-surface-highlight`]: str(gray1()),
     //[`--color-gray-30`]: str(gray1),
-    [`--color-gray-80`]: str(isDark?text.darkerBy(40):text.lighterBy(40)), //frame
     [`--sidebar-border-color`]: str(gray1()),
     [`--color-primary-light`]: str(accent().lighterBy(step)),
     [`--button-hover-bg`]: str(gray1()),
@@ -113,6 +112,7 @@ export const setDynamicStyle = (
     [`--h4-color`]: str(text),
     [`color`]: str(text), 
     [`--select-highlight-color`]: str(gray1()),
+    [`--color-gray-80`]: str(isDark?text.darkerBy(40):text.lighterBy(40)), //frame
   };
   
     const styleString = Object.keys(styleObject)

src/utils/ExcalidrawViewUtils.ts

@@ -101,7 +101,7 @@ export const openExternalLink = (link:string, app: App, element?: ExcalidrawElem
   return false;
 }
 
-export const getExcalidrawFileForwardLinks = (app: App, excalidrawFile: TFile):string => {
+export const getExcalidrawFileForwardLinks = (app: App, excalidrawFile: TFile, secondOrderLinksSet: Set<string>):string => {
   let secondOrderLinks = "";
   const forwardLinks = app.metadataCache.getLinks()[excalidrawFile.path];
   if(forwardLinks && forwardLinks.length > 0) {
@@ -110,6 +110,8 @@ export const getExcalidrawFileForwardLinks = (app: App, excalidrawFile: TFile):s
       const linkparts = getLinkParts(link.link);
       const f = app.metadataCache.getFirstLinkpathDest(linkparts.path, excalidrawFile.path);
       if(f && f.path !== excalidrawFile.path) {
+        if(secondOrderLinksSet.has(f.path)) return;
+        secondOrderLinksSet.add(f.path);
         linkset.add(`[[${f.path}${linkparts.ref?"#"+linkparts.ref:""}|Second Order Link: ${f.basename}]]`);
       }
     });