readme

Add Elbow connectors ea-scripts file

ea-scripts/Create new markdown file and embed into active drawing.md

@@ -0,0 +1,21 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-create-and-embed-new-markdown-file.jpg)
+
+The script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+let folder = ea.targetView.file.path;
+folder = folder.lastIndexOf("/")===-1?"":folder.substring(0,folder.lastIndexOf("/"))+"/";
+const fname = await utils.inputPrompt("Filename for new file","Filename",folder);
+const file = await app.fileManager.createAndOpenMarkdownFile(fname,true);
+await ea.addImage(0,0,file);
+ea.addElementsToView(true,true);

ea-scripts/Darken background color.md

@@ -0,0 +1,289 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)
+
+This script darkens the background color of the selected element by 2% at a time. 
+
+You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.
+
+In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+
+The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert).
+
+```javascript
+*/
+
+const elements = ea
+  .getViewSelectedElements()
+  .filter((el) =>
+    ["rectangle", "ellipse", "diamond", "image"].includes(el.type)
+  );
+ea.copyViewElementsToEAforEditing(elements);
+for (const el of ea.getElements()) {
+  const color = colorNameToHex(el.backgroundColor);
+  const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+  if (rgbColor) {
+    const r = parseInt(rgbColor[1], 16);
+    const g = parseInt(rgbColor[2], 16);
+    const b = parseInt(rgbColor[3], 16);
+    const originalRgb = [r, g, b];
+    const hsl = rgbToHsl(originalRgb);
+    const step = 2;
+    const newLightness = hsl[2] - step;
+    if (newLightness > 0) {
+      hsl[2] = newLightness;
+    }
+    const newRgb = hslToRgb(hsl);
+    el.backgroundColor = "#" + rgbToHexString(newRgb);
+  }
+}
+ea.addElementsToView();
+
+function rgbToHexString(args) {
+  const integer =
+    ((Math.round(args[0]) & 0xff) << 16) +
+    ((Math.round(args[1]) & 0xff) << 8) +
+    (Math.round(args[2]) & 0xff);
+
+  const string = integer.toString(16).toUpperCase();
+  return "000000".substring(string.length) + string;
+}
+
+function hslToRgb(hsl) {
+  const h = hsl[0] / 360;
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  let t2;
+  let t3;
+  let val;
+
+  if (s === 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+
+  const t1 = 2 * l - t2;
+
+  const rgb = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + (1 / 3) * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+
+    if (t3 > 1) {
+      t3--;
+    }
+
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+function rgbToHsl(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  const l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return [h, s * 100, l * 100];
+}
+
+function colorNameToHex(color) {
+  const colors = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    "indianred ": "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370d8",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#d87093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32",
+  };
+  if (typeof colors[color.toLowerCase()] != "undefined")
+    return colors[color.toLowerCase()];
+  return color;
+}

ea-scripts/Elbow connectors.md

@@ -0,0 +1,56 @@
+/*
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/elbow-connectors.png)
+
+This script converts the selected connectors to elbows.
+
+See documentation for more details:
+https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html
+
+```javascript
+*/
+const elements = ea.getViewSelectedElements();
+
+const lines = elements.filter((el)=>el.type==="arrow" || el.type==="line");
+
+for (const line of lines) {
+  if (line.points.length >= 3) {
+    for (var i = 0; i < line.points.length - 2; i++) {
+      var p1;
+      var p3;
+      if (line.points[i][0] < line.points[i + 2][0]) {
+        p1 = line.points[i];
+        p3 = line.points[i+2];
+      } else {
+        p1 = line.points[i + 2];
+        p3 = line.points[i];
+      }
+      const p2 = line.points[i + 1];
+
+      if (p1[0] === p3[0]) {
+        continue;
+      }
+
+      const k = (p3[1] - p1[1]) / (p3[0] - p1[0]);
+      const b = p1[1] - k * p1[0];
+
+      y0 = k * p2[0] + b;
+      const up = p2[1] < y0;
+
+      if ((k > 0 && !up) || (k < 0 && up)) {
+        p2[0] = p1[0];
+        p2[1] = p3[1];
+      } else {
+        p2[0] = p3[0];
+        p2[1] = p1[1];
+      }
+    }
+  }
+}
+
+ea.copyViewElementsToEAforEditing(lines);
+ea.addElementsToView();

ea-scripts/Lighten background color.md

@@ -0,0 +1,289 @@
+/*
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+Download this file and save to your Obsidian Vault including the first line, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)
+
+This script lightens the background color of the selected element by 2% at a time. 
+
+You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.
+
+In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.
+
+The color conversion method was copied from [color-convert](https://github.com/Qix-/color-convert).
+
+```javascript
+*/
+
+const elements = ea
+  .getViewSelectedElements()
+  .filter((el) =>
+    ["rectangle", "ellipse", "diamond", "image"].includes(el.type)
+  );
+ea.copyViewElementsToEAforEditing(elements);
+for (const el of ea.getElements()) {
+  const color = colorNameToHex(el.backgroundColor);
+  const rgbColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(color);
+  if (rgbColor) {
+    const r = parseInt(rgbColor[1], 16);
+    const g = parseInt(rgbColor[2], 16);
+    const b = parseInt(rgbColor[3], 16);
+    const originalRgb = [r, g, b];
+    const hsl = rgbToHsl(originalRgb);
+    const step = 2;
+    const newLightness = hsl[2] + step;
+    if (newLightness < 100) {
+      hsl[2] = newLightness;
+    }
+    const newRgb = hslToRgb(hsl);
+    el.backgroundColor = "#" + rgbToHexString(newRgb);
+  }
+}
+ea.addElementsToView();
+
+function rgbToHexString(args) {
+  const integer =
+    ((Math.round(args[0]) & 0xff) << 16) +
+    ((Math.round(args[1]) & 0xff) << 8) +
+    (Math.round(args[2]) & 0xff);
+
+  const string = integer.toString(16).toUpperCase();
+  return "000000".substring(string.length) + string;
+}
+
+function hslToRgb(hsl) {
+  const h = hsl[0] / 360;
+  const s = hsl[1] / 100;
+  const l = hsl[2] / 100;
+  let t2;
+  let t3;
+  let val;
+
+  if (s === 0) {
+    val = l * 255;
+    return [val, val, val];
+  }
+
+  if (l < 0.5) {
+    t2 = l * (1 + s);
+  } else {
+    t2 = l + s - l * s;
+  }
+
+  const t1 = 2 * l - t2;
+
+  const rgb = [0, 0, 0];
+  for (let i = 0; i < 3; i++) {
+    t3 = h + (1 / 3) * -(i - 1);
+    if (t3 < 0) {
+      t3++;
+    }
+
+    if (t3 > 1) {
+      t3--;
+    }
+
+    if (6 * t3 < 1) {
+      val = t1 + (t2 - t1) * 6 * t3;
+    } else if (2 * t3 < 1) {
+      val = t2;
+    } else if (3 * t3 < 2) {
+      val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
+    } else {
+      val = t1;
+    }
+
+    rgb[i] = val * 255;
+  }
+
+  return rgb;
+}
+
+function rgbToHsl(rgb) {
+  const r = rgb[0] / 255;
+  const g = rgb[1] / 255;
+  const b = rgb[2] / 255;
+  const min = Math.min(r, g, b);
+  const max = Math.max(r, g, b);
+  const delta = max - min;
+  let h;
+  let s;
+
+  if (max === min) {
+    h = 0;
+  } else if (r === max) {
+    h = (g - b) / delta;
+  } else if (g === max) {
+    h = 2 + (b - r) / delta;
+  } else if (b === max) {
+    h = 4 + (r - g) / delta;
+  }
+
+  h = Math.min(h * 60, 360);
+
+  if (h < 0) {
+    h += 360;
+  }
+
+  const l = (min + max) / 2;
+
+  if (max === min) {
+    s = 0;
+  } else if (l <= 0.5) {
+    s = delta / (max + min);
+  } else {
+    s = delta / (2 - max - min);
+  }
+
+  return [h, s * 100, l * 100];
+}
+
+function colorNameToHex(color) {
+  const colors = {
+    aliceblue: "#f0f8ff",
+    antiquewhite: "#faebd7",
+    aqua: "#00ffff",
+    aquamarine: "#7fffd4",
+    azure: "#f0ffff",
+    beige: "#f5f5dc",
+    bisque: "#ffe4c4",
+    black: "#000000",
+    blanchedalmond: "#ffebcd",
+    blue: "#0000ff",
+    blueviolet: "#8a2be2",
+    brown: "#a52a2a",
+    burlywood: "#deb887",
+    cadetblue: "#5f9ea0",
+    chartreuse: "#7fff00",
+    chocolate: "#d2691e",
+    coral: "#ff7f50",
+    cornflowerblue: "#6495ed",
+    cornsilk: "#fff8dc",
+    crimson: "#dc143c",
+    cyan: "#00ffff",
+    darkblue: "#00008b",
+    darkcyan: "#008b8b",
+    darkgoldenrod: "#b8860b",
+    darkgray: "#a9a9a9",
+    darkgreen: "#006400",
+    darkkhaki: "#bdb76b",
+    darkmagenta: "#8b008b",
+    darkolivegreen: "#556b2f",
+    darkorange: "#ff8c00",
+    darkorchid: "#9932cc",
+    darkred: "#8b0000",
+    darksalmon: "#e9967a",
+    darkseagreen: "#8fbc8f",
+    darkslateblue: "#483d8b",
+    darkslategray: "#2f4f4f",
+    darkturquoise: "#00ced1",
+    darkviolet: "#9400d3",
+    deeppink: "#ff1493",
+    deepskyblue: "#00bfff",
+    dimgray: "#696969",
+    dodgerblue: "#1e90ff",
+    firebrick: "#b22222",
+    floralwhite: "#fffaf0",
+    forestgreen: "#228b22",
+    fuchsia: "#ff00ff",
+    gainsboro: "#dcdcdc",
+    ghostwhite: "#f8f8ff",
+    gold: "#ffd700",
+    goldenrod: "#daa520",
+    gray: "#808080",
+    green: "#008000",
+    greenyellow: "#adff2f",
+    honeydew: "#f0fff0",
+    hotpink: "#ff69b4",
+    "indianred ": "#cd5c5c",
+    indigo: "#4b0082",
+    ivory: "#fffff0",
+    khaki: "#f0e68c",
+    lavender: "#e6e6fa",
+    lavenderblush: "#fff0f5",
+    lawngreen: "#7cfc00",
+    lemonchiffon: "#fffacd",
+    lightblue: "#add8e6",
+    lightcoral: "#f08080",
+    lightcyan: "#e0ffff",
+    lightgoldenrodyellow: "#fafad2",
+    lightgrey: "#d3d3d3",
+    lightgreen: "#90ee90",
+    lightpink: "#ffb6c1",
+    lightsalmon: "#ffa07a",
+    lightseagreen: "#20b2aa",
+    lightskyblue: "#87cefa",
+    lightslategray: "#778899",
+    lightsteelblue: "#b0c4de",
+    lightyellow: "#ffffe0",
+    lime: "#00ff00",
+    limegreen: "#32cd32",
+    linen: "#faf0e6",
+    magenta: "#ff00ff",
+    maroon: "#800000",
+    mediumaquamarine: "#66cdaa",
+    mediumblue: "#0000cd",
+    mediumorchid: "#ba55d3",
+    mediumpurple: "#9370d8",
+    mediumseagreen: "#3cb371",
+    mediumslateblue: "#7b68ee",
+    mediumspringgreen: "#00fa9a",
+    mediumturquoise: "#48d1cc",
+    mediumvioletred: "#c71585",
+    midnightblue: "#191970",
+    mintcream: "#f5fffa",
+    mistyrose: "#ffe4e1",
+    moccasin: "#ffe4b5",
+    navajowhite: "#ffdead",
+    navy: "#000080",
+    oldlace: "#fdf5e6",
+    olive: "#808000",
+    olivedrab: "#6b8e23",
+    orange: "#ffa500",
+    orangered: "#ff4500",
+    orchid: "#da70d6",
+    palegoldenrod: "#eee8aa",
+    palegreen: "#98fb98",
+    paleturquoise: "#afeeee",
+    palevioletred: "#d87093",
+    papayawhip: "#ffefd5",
+    peachpuff: "#ffdab9",
+    peru: "#cd853f",
+    pink: "#ffc0cb",
+    plum: "#dda0dd",
+    powderblue: "#b0e0e6",
+    purple: "#800080",
+    rebeccapurple: "#663399",
+    red: "#ff0000",
+    rosybrown: "#bc8f8f",
+    royalblue: "#4169e1",
+    saddlebrown: "#8b4513",
+    salmon: "#fa8072",
+    sandybrown: "#f4a460",
+    seagreen: "#2e8b57",
+    seashell: "#fff5ee",
+    sienna: "#a0522d",
+    silver: "#c0c0c0",
+    skyblue: "#87ceeb",
+    slateblue: "#6a5acd",
+    slategray: "#708090",
+    snow: "#fffafa",
+    springgreen: "#00ff7f",
+    steelblue: "#4682b4",
+    tan: "#d2b48c",
+    teal: "#008080",
+    thistle: "#d8bfd8",
+    tomato: "#ff6347",
+    turquoise: "#40e0d0",
+    violet: "#ee82ee",
+    wheat: "#f5deb3",
+    white: "#ffffff",
+    whitesmoke: "#f5f5f5",
+    yellow: "#ffff00",
+    yellowgreen: "#9acd32",
+  };
+  if (typeof colors[color.toLowerCase()] != "undefined")
+    return colors[color.toLowerCase()];
+  return color;
+}

ea-scripts/README.md

@@ -0,0 +1,35 @@
+# Excalidraw Script Engine scripts library
+See the [Excalidraw Script Engine](https://zsviczian.github.io/obsidian-excalidraw-plugin/ExcalidrawScriptsEngine.html) documentation for more details.
+
+## How to install
+Open the script you are interested in and save it to your Obsidian Vault including the first line `/*`, or open it in "Raw" and copy the entire contents to Obsidian.
+
+![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-download-raw.jpg)
+
+
+## List of available scripts
+|Title|Description|Icon|Contributor|
+|----|----|----|----|
+|[Box Selected Elements](Box%20Selected%20Elements.md)|This script will add an encapsulating box around the currently selected elements in Excalidraw.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-box-elements.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Bullet Point](Bullet%20Point.md)|This script will add a small circle to the top left of each text element in the selection and add the text and the "bullet point" into a group.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-bullet-point.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Connect elements](Connect%20elements.md)|This script will connect two objects with an arrow. If either of the objects are a set of grouped elements (e.g. a text element grouped with an encapsulating rectangle), the script will identify these groups, and connect the arrow to the largest object in the group (assuming you want to connect the arrow to the box around the text element).|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-connect-elements.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Convert text to link with folder and alias](Convert%20text%20to%20link%20with%20folder%20and%20alias.md)|Converts text elements to links pointing to a file in a selected folder and with the alias set as the original text. The script will prompt the user to select an existing folder from the vault.|`original text` => `[[selected folder/original text\|original text]]`|[@zsviczian](https://github.com/zsviczian)|
+|[Create new markdown file and embed into active drawing](Create%20new%20markdown%20file%20and%20embed%20into%20active%20drawing.md)|The script will prompt you for a filename, then create a new markdown document with the file name provided, open the new markdown document in an adjacent pane, and embed the markdown document into the active Excalidraw drawing.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-create-and-embed-new-markdown-file.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Darken background color](Darken%20background%20color.md)|This script darkens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect. In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Dimensions](Dimensions.md)|Currently there is no way to specify the exact location and size of objects in Excalidraw. You can bridge this gap with the following simple script.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-dimensions.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Elbow connectors](Elbow%20connectors.md)|This script converts the selected connectors to elbows.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/elbow-connectors.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles horizontally keep text centered](Expand%20rectangles%20horizontally%20keep%20text20%centered.md)|This script expands the width of the selected rectangles until they are all the same width and keep the text centered.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles horizontally](Expand%20rectangles%20horizontally.md)|This script expands the width of the selected rectangles until they are all the same width.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles vertically keep text centered](Expand%20rectangles%20vertically%20keep%20text%20centered.md)|This script expands the height of the selected rectangles until they are all the same height and keep the text centered.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Expand rectangles vertically](Expand%20rectangles%20vertically.md)|This script expands the height of the selected rectangles until they are all the same height.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-expand-rectangles.gif)|[@1-2-3](https://github.com/1-2-3)|
+|[Fixed spacing](Fixed%20spacing.md)|The script arranges the selected elements horizontally with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.||[@1-2-3](https://github.com/1-2-3)|
+|[Fixed vertical distance](Fixed%20vertical%20distance.md)|The script arranges the selected elements vertically with a fixed spacing. When we create an architecture diagram or mind map, we often need to arrange a large number of elements in a fixed spacing. `Fixed spacing` and `Fixed vertical Distance` scripts can save us a lot of time.||[@1-2-3](https://github.com/1-2-3)|
+|[Font Family](Font%20Family.md)|Sets font family of the text block (Virgil, Helvetica, Cascadia). Useful if you want to set a keyboard shortcut for selecting font family.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-font-family.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Grid](Grid.md)|The default grid size in Excalidraw is 20. Currently there is no way to change the grid size via the user interface. This script offers a way to bridge this gap.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-grid.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Lighten background color](Lighten%20background%20color.md)|This script lightens the background color of the selected element by 2% at a time. You can use this script several times until you are satisfied. It is recommended to set a shortcut key for this script so that you can quickly try to DARKEN and LIGHTEN the color effect.In contrast to the `Modify background color opacity` script, the advantage is that the background color of the element is not affected by the canvas color, and the color value does not appear in a strange rgba() form.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/darken-lighten-background-color.png)|[@1-2-3](https://github.com/1-2-3)|
+|[Modify background color opacity](Modify%20background%20color%20opacity.md)|This script changes the opacity of the background color of the selected boxes. The default background color in Excalidraw is so dark that the text is hard to read. You can lighten the color a bit by setting transparency. And you can tweak the transparency over and over again until you're happy with it. Although excalidraw has the opacity option in its native property Settings, it also changes the transparency of the border. Use this script to change only the opacity of the background color without affecting the border.||[@1-2-3](https://github.com/1-2-3)|
+|[Modify stroke width of selected elements](Modify%20stroke%20width%20of%20selected%20elements.md)|This script will set the stroke width of selected elements. This is helpful, for example, when you scale freedraw sketches and want to reduce or increase their line width.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-stroke-width.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Reverse arrows](Reverse%20arrows.md)|Reverse the direction of **arrows** within the scope of selected elements.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-reverse-arrow.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Split text by lines](Split%20text%20by%20lines.md)|Split lines of text into separate text elements for easier reorganization|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-split-lines.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Text Align](Text%20Align.md)|Sets text alignment of text block (cetner, right, left). Useful if you want to set a keyboard shortcut for selecting text alignment.|![](https://raw.githubusercontent.com/zsviczian/obsidian-excalidraw-plugin/master/images/scripts-text-align.jpg)|[@zsviczian](https://github.com/zsviczian)|
+|[Zoom to Fit Selected Elements](Zoom%20to%20Fit%20Selected%20Elements.md)|Similar to Excalidraw standard SHIFT+2 feature: Zoom to fit selected elements, but with the ability to zoom to 1000%. Inspiration: [#272](https://github.com/zsviczian/obsidian-excalidraw-plugin/issues/272)||[@zsviczian](https://github.com/zsviczian)|

manifest.json

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

src/EmbeddedFileLoader.ts

@@ -369,7 +369,10 @@ const convertMarkdownToSVG = async (
 ): Promise<DataURL> => {
   //1.
   //get the markdown text
-  const text = (await getTransclusion(linkParts, plugin.app, file)).contents;
+  let text = (await getTransclusion(linkParts, plugin.app, file)).contents;
+  if(text==="") {
+    text = "# Empty markdown file\nCTRL+Click here to open the file for editing in the current active pane, or CTRL+SHIFT+Click to open it in an adjacent pane.";
+  }
 
   //2.
   //get styles

src/ExcalidrawAutomate.ts

@@ -431,7 +431,7 @@ export async function initExcalidrawAutomate(
         files: template?.files ?? {},
       };
 
-      return plugin.createDrawing(
+      return plugin.createAndOpenDrawing(
         params?.filename
           ? `${params.filename}.excalidraw.md`
           : this.plugin.getNextDefaultFilename(),
@@ -1068,10 +1068,10 @@ export async function initExcalidrawAutomate(
       if (!selectedElementsKeys) {
         return [];
       }
-      let elements:ExcalidrawElement[] = excalidrawAPI
+      const elements: ExcalidrawElement[] = excalidrawAPI
         .getSceneElements()
         .filter((e: any) => selectedElementsKeys.includes(e.id));
- 
+
       const containerBoundTextElmenetsReferencedInElements = elements
         .filter(
           (el) =>
@@ -1092,7 +1092,6 @@ export async function initExcalidrawAutomate(
       return this.getViewElements().filter((el: ExcalidrawElement) =>
         elementIDs.contains(el.id),
       );
-      
     },
     getViewFileForImageElement(el: ExcalidrawElement): TFile | null {
       if (!this.targetView || !this.targetView?._loaded) {
@@ -1503,7 +1502,7 @@ export async function createSVG(
   elements = elements.concat(automateElements);
   const svg = await getSVG(
     {
-      //createDrawing
+      //createAndOpenDrawing
       type: "excalidraw",
       version: 2,
       source: "https://excalidraw.com",

src/ExcalidrawData.ts

@@ -174,6 +174,7 @@ export class ExcalidrawData {
       return;
     }
     for (let i = 0; i < this.scene.elements?.length; i++) {
+      //convert .boundElementIds to boundElements
       if (this.scene.elements[i].boundElementIds) {
         if (!this.scene.elements[i].boundElements) {
           this.scene.elements[i].boundElements = [];
@@ -186,14 +187,16 @@ export class ExcalidrawData {
             id,
           })),
         );
+        delete this.scene.elements[i].boundElementIds;
       }
+
+      //add containerId to TextElements if missing
       if (
         this.scene.elements[i].type === "text" &&
         !this.scene.elements[i].containerId
       ) {
         this.scene.elements[i].containerId = null;
       }
-      delete this.scene.elements[i].boundElementIds;
     }
   }
 

src/ExcalidrawView.ts

@@ -184,7 +184,7 @@ export default class ExcalidrawView extends TextFileView {
     }
   }
 
-  public saveSVG(scene?: any) {
+  public async saveSVG(scene?: any) {
     if (!scene) {
       if (!this.getScene) {
         return false;
@@ -193,26 +193,24 @@ export default class ExcalidrawView extends TextFileView {
     }
     const filepath = getIMGFilename(this.file.path, "svg"); //.substring(0,this.file.path.lastIndexOf(this.compatibilityMode ? '.excalidraw':'.md')) + '.svg';
     const file = this.app.vault.getAbstractFileByPath(normalizePath(filepath));
-    (async () => {
-      const exportSettings: ExportSettings = {
-        withBackground: this.plugin.settings.exportWithBackground,
-        withTheme: this.plugin.settings.exportWithTheme,
-      };
-      const svg = await getSVG(scene, exportSettings);
-      if (!svg) {
-        return;
-      }
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(embedFontsInSVG(svg));
-      if (file && file instanceof TFile) {
-        await this.app.vault.modify(file, svgString);
-      } else {
-        await this.app.vault.create(filepath, svgString);
-      }
-    })();
+    const exportSettings: ExportSettings = {
+      withBackground: this.plugin.settings.exportWithBackground,
+      withTheme: this.plugin.settings.exportWithTheme,
+    };
+    const svg = await getSVG(scene, exportSettings);
+    if (!svg) {
+      return;
+    }
+    const serializer = new XMLSerializer();
+    const svgString = serializer.serializeToString(embedFontsInSVG(svg));
+    if (file && file instanceof TFile) {
+      await this.app.vault.modify(file, svgString);
+    } else {
+      await this.app.vault.create(filepath, svgString);
+    }
   }
 
-  public savePNG(scene?: any) {
+  public async savePNG(scene?: any) {
     if (!scene) {
       if (!this.getScene) {
         return false;
@@ -223,25 +221,23 @@ export default class ExcalidrawView extends TextFileView {
     const filepath = getIMGFilename(this.file.path, "png"); //this.file.path.substring(0,this.file.path.lastIndexOf(this.compatibilityMode ? '.excalidraw':'.md')) + '.png';
     const file = this.app.vault.getAbstractFileByPath(normalizePath(filepath));
 
-    (async () => {
-      const exportSettings: ExportSettings = {
-        withBackground: this.plugin.settings.exportWithBackground,
-        withTheme: this.plugin.settings.exportWithTheme,
-      };
-      const png = await getPNG(
-        scene,
-        exportSettings,
-        this.plugin.settings.pngExportScale,
-      );
-      if (!png) {
-        return;
-      }
-      if (file && file instanceof TFile) {
-        await this.app.vault.modifyBinary(file, await png.arrayBuffer());
-      } else {
-        await this.app.vault.createBinary(filepath, await png.arrayBuffer());
-      }
-    })();
+    const exportSettings: ExportSettings = {
+      withBackground: this.plugin.settings.exportWithBackground,
+      withTheme: this.plugin.settings.exportWithTheme,
+    };
+    const png = await getPNG(
+      scene,
+      exportSettings,
+      this.plugin.settings.pngExportScale,
+    );
+    if (!png) {
+      return;
+    }
+    if (file && file instanceof TFile) {
+      await this.app.vault.modifyBinary(file, await png.arrayBuffer());
+    } else {
+      await this.app.vault.createBinary(filepath, await png.arrayBuffer());
+    }
   }
 
   async save(preventReload: boolean = true) {
@@ -265,6 +261,21 @@ export default class ExcalidrawView extends TextFileView {
       await this.loadDrawing(false);
     }
     await super.save();
+
+    if (!this.autosaving) {
+      if (this.plugin.settings.autoexportSVG) {
+        await this.saveSVG();
+      }
+      if (this.plugin.settings.autoexportPNG) {
+        await this.savePNG();
+      }
+      if (
+        !this.compatibilityMode &&
+        this.plugin.settings.autoexportExcalidraw
+      ) {
+        this.saveExcalidraw();
+      }
+    }
   }
 
   // get the new file content
@@ -288,18 +299,6 @@ export default class ExcalidrawView extends TextFileView {
         return this.data;
       }
 
-      if (!this.autosaving) {
-        if (this.plugin.settings.autoexportSVG) {
-          this.saveSVG(scene);
-        }
-        if (this.plugin.settings.autoexportPNG) {
-          this.savePNG(scene);
-        }
-        if (this.plugin.settings.autoexportExcalidraw) {
-          this.saveExcalidraw(scene);
-        }
-      }
-
       let header = this.data
         .substring(0, trimLocation)
         .replace(
@@ -319,14 +318,6 @@ export default class ExcalidrawView extends TextFileView {
       return header + this.excalidrawData.generateMD();
     }
     if (this.compatibilityMode) {
-      if (!this.autosaving) {
-        if (this.plugin.settings.autoexportSVG) {
-          this.saveSVG(scene);
-        }
-        if (this.plugin.settings.autoexportPNG) {
-          this.savePNG(scene);
-        }
-      }
       return JSON.stringify(scene, null, "\t");
     }
     return this.data;
@@ -1131,6 +1122,10 @@ export default class ExcalidrawView extends TextFileView {
           return { id: selectedElement[0].id, text: selectedElement[0].text };
         } //a text element was selected. Return text
 
+        if (selectedElement[0].type === "image") {
+          return { id: null, text: null };
+        }
+
         const boundTextElements = selectedElement[0].boundElements?.filter(
           (be: any) => be.type === "text",
         );
@@ -1191,6 +1186,11 @@ export default class ExcalidrawView extends TextFileView {
             fileId: selectedElement[0].fileId,
           };
         } //an image element was selected. Return fileId
+
+        if (selectedElement[0].type === "text") {
+          return { id: null, fileId: null };
+        }
+
         if (selectedElement[0].groupIds.length === 0) {
           return { id: null, fileId: null };
         } //is the selected element part of a group?
@@ -1202,7 +1202,7 @@ export default class ExcalidrawView extends TextFileView {
         if (imageElement.length === 0) {
           return { id: null, fileId: null };
         } //the group had no image element member
-        return { id: selectedElement[0].id, fileId: selectedElement[0].fileId }; //return image element fileId
+        return { id: imageElement[0].id, fileId: imageElement[0].fileId }; //return image element fileId
       };
 
       this.addText = (text: string, fontFamily?: 1 | 2 | 3) => {

src/InsertLinkDialog.ts

@@ -1,4 +1,3 @@
-import { time } from "console";
 import { App, FuzzySuggestModal, TFile } from "obsidian";
 import { t } from "./lang/helpers";
 

src/main.ts

@@ -426,12 +426,26 @@ export default class ExcalidrawPlugin extends Plugin {
       el: HTMLElement,
       ctx: MarkdownPostProcessorContext,
     ) => {
+
+      //check to see if we are rendering in editing mode of live preview
+      //if yes, then there should be no .internal-embed containers
       const embeddedItems = el.querySelectorAll(".internal-embed");
       if (embeddedItems.length === 0) {
         tmpObsidianWYSIWYG(el, ctx);
         return;
       }
 
+      //If the file being processed is an excalidraw file,
+      //then I want to hide all embedded items as these will be 
+      //transcluded text element or some other transcluded content inside the Excalidraw file
+      //in reading mode these elements should be hidden
+      if (ctx.frontmatter?.hasOwnProperty("excalidraw-plugin")) {
+        el.style.display = "none";
+        return;
+      }
+
+      //if not, then we are processing a non-excalidraw file in reading mode
+      //in that cases embedded files will be displayed in an .internal-embed container
       const attr: imgElementAttributes = {
         fname: "",
         fheight: "",
@@ -441,25 +455,26 @@ export default class ExcalidrawPlugin extends Plugin {
       let alt: string;
       let parts;
       let file: TFile;
-      for (const drawing of embeddedItems) {
-        attr.fname = drawing.getAttribute("src");
+
+      //Iterating through all the containers to check which one is an excalidraw drawing
+      //This is a for loop instead of embeddedItems.forEach() because createImageDiv at the end
+      //is awaited, otherwise excalidraw images would not display in the Kanban plugin
+      for (const maybeDrawing of embeddedItems) {
+        //check to see if the file in the src attribute exists
+        attr.fname = maybeDrawing.getAttribute("src");
         file = this.app.metadataCache.getFirstLinkpathDest(
           attr.fname?.split("#")[0],
           ctx.sourcePath,
         );
-        if (!file && ctx.frontmatter?.hasOwnProperty("excalidraw-plugin")) {
-          attr.fname = ctx.sourcePath;
-          file = this.app.metadataCache.getFirstLinkpathDest(
-            attr.fname,
-            ctx.sourcePath,
-          );
-        }
+
+        //if the embeddedFile exits and it is an Excalidraw file
+        //then lets replace the .internal-embed with the generated PNG or SVG image
         if (file && file instanceof TFile && this.isExcalidrawFile(file)) {
-          attr.fwidth = drawing.getAttribute("width")
-            ? drawing.getAttribute("width")
+          attr.fwidth = maybeDrawing.getAttribute("width")
+            ? maybeDrawing.getAttribute("width")
             : this.settings.width;
-          attr.fheight = drawing.getAttribute("height");
-          alt = drawing.getAttribute("alt");
+          attr.fheight = maybeDrawing.getAttribute("height");
+          alt = maybeDrawing.getAttribute("alt");
           if (alt == attr.fname) {
             alt = "";
           } //when the filename starts with numbers followed by a space Obsidian recognizes the filename as alt-text
@@ -468,7 +483,7 @@ export default class ExcalidrawPlugin extends Plugin {
             //for some reason Obsidian renders ![]() in a DIV and ![[]] in a SPAN
             //also the alt-text of the DIV does not include the alt-text of the image
             //thus need to add an additional "|" character when its a SPAN
-            if (drawing.tagName.toLowerCase() == "span") {
+            if (maybeDrawing.tagName.toLowerCase() == "span") {
               alt = `|${alt}`;
             }
             //1:width, 2:height, 3:style  1      2      3
@@ -483,7 +498,7 @@ export default class ExcalidrawPlugin extends Plugin {
           attr.fname = file?.path;
           attr.file = file;
           const div = await createImageDiv(attr);
-          drawing.parentElement.replaceChild(div, drawing);
+          maybeDrawing.parentElement.replaceChild(div, maybeDrawing);
         }
       }
     };
@@ -685,7 +700,7 @@ export default class ExcalidrawPlugin extends Plugin {
     this.insertMDDialog = new InsertMDDialog(this);
 
     this.addRibbonIcon(ICON_NAME, t("CREATE_NEW"), async (e) => {
-      this.createDrawing(this.getNextDefaultFilename(), e[CTRL_OR_CMD]); //.ctrlKey||e.metaKey);
+      this.createAndOpenDrawing(this.getNextDefaultFilename(), e[CTRL_OR_CMD]); //.ctrlKey||e.metaKey);
     });
 
     const fileMenuHandlerCreateNew = (menu: Menu, file: TFile) => {
@@ -700,7 +715,7 @@ export default class ExcalidrawPlugin extends Plugin {
                 file.path.substr(0, file.path.lastIndexOf(file.name)),
               );
             }
-            this.createDrawing(
+            this.createAndOpenDrawing(
               this.getNextDefaultFilename(),
               false,
               folderpath,
@@ -832,7 +847,7 @@ export default class ExcalidrawPlugin extends Plugin {
       id: "excalidraw-autocreate",
       name: t("NEW_IN_NEW_PANE"),
       callback: () => {
-        this.createDrawing(this.getNextDefaultFilename(), true);
+        this.createAndOpenDrawing(this.getNextDefaultFilename(), true);
       },
     });
 
@@ -840,7 +855,7 @@ export default class ExcalidrawPlugin extends Plugin {
       id: "excalidraw-autocreate-on-current",
       name: t("NEW_IN_ACTIVE_PANE"),
       callback: () => {
-        this.createDrawing(this.getNextDefaultFilename(), false);
+        this.createAndOpenDrawing(this.getNextDefaultFilename(), false);
       },
     });
 
@@ -859,12 +874,12 @@ export default class ExcalidrawPlugin extends Plugin {
         activeView.file.path,
         filename,
       );
-      this.embedDrawing(fFp.filepath);
-      this.createDrawing(
+      const file = await this.createDrawing(
         filename,
-        inNewPane,
         fFp.folder === "" ? null : fFp.folder,
       );
+      await this.embedDrawing(fFp.filepath);
+      this.openDrawing(file, inNewPane);
     };
 
     this.addCommand({
@@ -1502,26 +1517,23 @@ export default class ExcalidrawPlugin extends Plugin {
     //this.saveSettings();
   }
 
-  public embedDrawing(data: string) {
+  public async embedDrawing(data: string) {
     const activeView = this.app.workspace.getActiveViewOfType(MarkdownView);
     if (activeView) {
       const editor = activeView.editor;
-      switch (this.settings.embedType) {
-        case "excalidraw":
-          editor.replaceSelection(`![[${data}]]`);
-          break;
-        case "PNG":
-          editor.replaceSelection(
-            `![[${data.substr(0, data.lastIndexOf("."))}.png]] ([[${data}|*]])`,
-          );
-          break;
-        case "SVG":
-          editor.replaceSelection(
-            `![[${data.substr(0, data.lastIndexOf("."))}.svg]] ([[${data}|*]])`,
-          );
-          break;
+      if (this.settings.embedType === "excalidraw") {
+        editor.replaceSelection(`![[${data}]]`);
+        editor.focus();
+        return;
       }
-
+      const filename = `${data.substring(
+        0,
+        data.lastIndexOf("."),
+      )}.${this.settings.embedType.toLowerCase()}`;
+      await this.app.vault.create(filename, "");
+      editor.replaceSelection(
+        `![[${filename}]]\n%%[[${data}|🖋 Edit in Excalidraw]]%%`,
+      );
       editor.focus();
     }
   }
@@ -1656,27 +1668,29 @@ export default class ExcalidrawPlugin extends Plugin {
 
   public async createDrawing(
     filename: string,
-    onNewPane: boolean,
     foldername?: string,
     initData?: string,
-  ): Promise<string> {
+  ): Promise<TFile> {
     const folderpath = normalizePath(
       foldername ? foldername : this.settings.folder,
     );
     await checkAndCreateFolder(this.app.vault, folderpath); //create folder if it does not exist
-
     const fname = getNewUniqueFilepath(this.app.vault, filename, folderpath);
-
-    if (initData) {
-      this.openDrawing(await this.app.vault.create(fname, initData), onNewPane);
-      return fname;
-    }
-
-    this.openDrawing(
-      await this.app.vault.create(fname, await this.getBlankDrawing()),
-      onNewPane,
+    return await this.app.vault.create(
+      fname,
+      initData ?? (await this.getBlankDrawing()),
     );
-    return fname;
+  }
+
+  public async createAndOpenDrawing(
+    filename: string,
+    onNewPane: boolean,
+    foldername?: string,
+    initData?: string,
+  ): Promise<string> {
+    const file = await this.createDrawing(filename, foldername, initData);
+    this.openDrawing(file, onNewPane);
+    return file.path;
   }
 
   public async setMarkdownView(leaf: WorkspaceLeaf) {

src/openDrawing.ts

@@ -31,7 +31,7 @@ export class OpenFileDialog extends FuzzySuggestModal<TFile> {
     this.inputEl.onkeyup = (e) => {
       if (e.key == "Enter" && this.action == openDialogAction.openFile) {
         if (this.containerEl.innerText.includes(EMPTY_MESSAGE)) {
-          this.plugin.createDrawing(
+          this.plugin.createAndOpenDrawing(
             `${this.plugin.settings.folder}/${this.inputEl.value}.excalidraw.md`,
             this.onNewPane,
           );

versions.json

@@ -1,4 +1,4 @@
 {
-  "1.5.8": "0.12.16",
+  "1.5.10": "0.12.16",
   "1.4.2": "0.11.13"
 }