0.17.6-23 - SVG fix + linting

packages/excalidraw/actions/actionElementLink.ts

@@ -64,7 +64,7 @@ export const actionCopyElementLink = register({
     };
   },
   predicate: (elements, appState) => false, //zsviczian - this action should not be visible in Obsidian
-    //canCreateLinkFromElements(getSelectedElements(elements, appState)),
+  //canCreateLinkFromElements(getSelectedElements(elements, appState)),
 });
 
 export const actionLinkToElement = register({

packages/excalidraw/components/App.tsx

@@ -3463,7 +3463,8 @@ class App extends React.Component<AppProps, AppState> {
     });
 
     // paste event may not fire FontFace loadingdone event in Safari, hence loading font faces manually
-    if (true) { //zsviczian - isSafari 
+    if (true) {
+      //zsviczian - isSafari
       Fonts.loadElementsFonts(newElements).then((fontFaces) => {
         this.fonts.onLoaded(fontFaces);
       });
@@ -4015,34 +4016,43 @@ class App extends React.Component<AppProps, AppState> {
     );
   };
 
-
   //zsviczian
-  getColorAtScenePoint = ({ sceneX, sceneY }: { sceneX: number; sceneY: number }): string | null =>
-  {
+  getColorAtScenePoint = ({
+    sceneX,
+    sceneY,
+  }: {
+    sceneX: number;
+    sceneY: number;
+  }): string | null => {
     if (!this.canvas) {
       console.error("Canvas not available");
       return null;
     }
-
-    const { x,y } = sceneCoordsToViewportCoords({ sceneX, sceneY }, this.state);
+
+    const { x, y } = sceneCoordsToViewportCoords(
+      { sceneX, sceneY },
+      this.state,
+    );
     const context = this.canvas.getContext("2d");
     if (!context) {
       console.error("2D context not available");
       return null;
     }
-  
+
     // Get pixel data directly from the given scene coordinates
     const pixelData = context.getImageData(x, y, 1, 1).data;
     const [r, g, b, a] = pixelData;
-  
+
     // Check for transparency
     if (a === 0) {
-      return this.state.theme === "light" ? "rgba(255,255,255,1)" : "rgba(0,0,0,1)";
+      return this.state.theme === "light"
+        ? "rgba(255,255,255,1)"
+        : "rgba(0,0,0,1)";
     }
-  
+
     // Return the color in rgba format
     return `rgba(${r}, ${g}, ${b}, ${a / 255})`;
-  }
+  };
 
   //zsviczian
   startLineEditor = (
@@ -4226,7 +4236,7 @@ class App extends React.Component<AppProps, AppState> {
       ),
     );
   };
-  
+
   private addMissingFiles = (
     files: BinaryFiles | BinaryFileData[],
     replace = false,
@@ -4238,7 +4248,8 @@ class App extends React.Component<AppProps, AppState> {
     const _files = Array.isArray(files) ? files : Object.values(files);
 
     for (const fileData of _files) {
-      if (!force && nextFiles[fileData.id]) { //zsviczian
+      if (!force && nextFiles[fileData.id]) {
+        //zsviczian
         continue;
       }
 
@@ -4396,7 +4407,8 @@ class App extends React.Component<AppProps, AppState> {
       ?.getBoundingClientRect();
     const PADDING = 16;
 
-    const adjustRectValueForOffset = ( //zsviczian https://github.com/excalidraw/excalidraw/issues/8561
+    const adjustRectValueForOffset = (
+      //zsviczian https://github.com/excalidraw/excalidraw/issues/8561
       value: number | undefined,
       fallback: number,
     ) => (value ?? fallback + this.state.offsetLeft) - this.state.offsetLeft;
@@ -4407,14 +4419,16 @@ class App extends React.Component<AppProps, AppState> {
           right:
             Math.max(
               this.state.width -
-                adjustRectValueForOffset( //zsivczian
+                adjustRectValueForOffset(
+                  //zsivczian
                   propertiesPanelRect?.left,
                   this.state.width,
                 ),
               0,
             ) + PADDING,
           bottom: PADDING,
-          left: //zsivczian
+          //zsivczian
+          left:
             Math.max(adjustRectValueForOffset(sidebarRect?.right, 0), 0) +
             PADDING,
         }
@@ -4427,7 +4441,8 @@ class App extends React.Component<AppProps, AppState> {
             0,
           ),
           bottom: PADDING,
-          left: //zsivczian
+          //zsivczian
+          left:
             Math.max(
               adjustRectValueForOffset(propertiesPanelRect?.right, 0),
               0,
@@ -10145,9 +10160,10 @@ class App extends React.Component<AppProps, AppState> {
               created: Date.now(),
               lastRetrieved: Date.now(),
               //@ts-ignore
-              name: (imageFile?.name && imageFile.name !== "image.png")
-              ? imageFile.name
-              : undefined, // zsviczian
+              name:
+                imageFile?.name && imageFile.name !== "image.png"
+                  ? imageFile.name
+                  : undefined, // zsviczian
             },
           ]);
           const cachedImageData = this.imageCache.get(fileId);

packages/excalidraw/components/LayerUI.tsx

@@ -269,44 +269,44 @@ const LayerUI = ({
                             "zen-mode": appState.zenModeEnabled,
                           })}
                         >
-                        <HintViewer
-                          appState={appState}
-                          isMobile={
-                            device.editor.isMobile ||
-                            (!(
-                              appState.viewModeEnabled ||
-                              appState.zenModeEnabled
-                            ) &&
-                              appState.trayModeEnabled)
-                          } //zsviczian
-                          device={device}
-                          app={app}
-                        />
-                        {heading}
-                        <Stack.Row gap={1}>
-                          <PenModeButton
-                            zenModeEnabled={appState.zenModeEnabled}
-                            checked={appState.penMode}
-                            onChange={() => onPenModeToggle(null)}
-                            title={t("toolBar.penMode")}
-                            penDetected={appState.penDetected}
-                          />
-                          <LockButton
-                            checked={appState.activeTool.locked}
-                            onChange={onLockToggle}
-                            title={t("toolBar.lock")}
+                          <HintViewer
+                            appState={appState}
+                            isMobile={
+                              device.editor.isMobile ||
+                              (!(
+                                appState.viewModeEnabled ||
+                                appState.zenModeEnabled
+                              ) &&
+                                appState.trayModeEnabled)
+                            } //zsviczian
+                            device={device}
+                            app={app}
                           />
+                          {heading}
+                          <Stack.Row gap={1}>
+                            <PenModeButton
+                              zenModeEnabled={appState.zenModeEnabled}
+                              checked={appState.penMode}
+                              onChange={() => onPenModeToggle(null)}
+                              title={t("toolBar.penMode")}
+                              penDetected={appState.penDetected}
+                            />
+                            <LockButton
+                              checked={appState.activeTool.locked}
+                              onChange={onLockToggle}
+                              title={t("toolBar.lock")}
+                            />
 
-                          <div className="App-toolbar__divider" />
+                            <div className="App-toolbar__divider" />
 
-                          <HandButton
-                            checked={isHandToolActive(appState)}
-                            onChange={() => onHandToolToggle()}
-                            title={t("toolBar.hand")}
-                            isMobile
-                          />
+                            <HandButton
+                              checked={isHandToolActive(appState)}
+                              onChange={() => onHandToolToggle()}
+                              title={t("toolBar.hand")}
+                              isMobile
+                            />
 
-                          <ShapesSwitcher
+                            <ShapesSwitcher
                               appState={appState}
                               activeTool={appState.activeTool}
                               UIOptions={UIOptions}

packages/excalidraw/components/MobileMenu.tsx

@@ -107,8 +107,8 @@ export const MobileMenu = ({
                     renderTopRightUI?.(true, appState)}
                   {!appState.viewModeEnabled &&
                     appState.openDialog?.name !== "elementLinkSelector" && (
-                    <DefaultSidebarTriggerTunnel.Out />
-                  )}
+                      <DefaultSidebarTriggerTunnel.Out />
+                    )}
                   <PenModeButton
                     checked={appState.penMode}
                     onChange={() => onPenModeToggle(null)}
@@ -166,7 +166,8 @@ export const MobileMenu = ({
       return; //zsviczian
     }
     if (appState.openDialog?.name === "elementLinkSelector") {
-      return ( //zsviczian (see original below)
+      return (
+        //zsviczian (see original below)
         <div className="App-toolbar-content">
           <MainMenuTunnel.Out />
         </div>

packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx

@@ -1,9 +1,7 @@
 import { useState, useRef, useEffect, useDeferredValue } from "react";
 import type { BinaryFiles } from "../../types";
 import { useApp } from "../App";
-import type {
-  NonDeletedExcalidrawElement,
-} from "../../element/types";
+import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { ArrowRightIcon } from "../icons";
 import "./MermaidToExcalidraw.scss";
 import { t } from "../../i18n";

packages/excalidraw/components/TTDDialog/MermaidToExcalidrawLib.ts

@@ -1,31 +1,33 @@
-import { MermaidConfig } from "@zsviczian/mermaid-to-excalidraw";
+import type { MermaidConfig } from "@zsviczian/mermaid-to-excalidraw";
 import { convertToExcalidrawElements } from "../../data/transform";
-import { ExcalidrawElement } from "../../element/types";
-import { MermaidToExcalidrawLibProps } from "./common";
+import type { ExcalidrawElement } from "../../element/types";
+import type { MermaidToExcalidrawLibProps } from "./common";
 import { getSharedMermaidInstance } from "../../obsidianUtils";
 
 let mermaidToExcalidrawLib: MermaidToExcalidrawLibProps | null = null;
 let queue: Promise<any> = Promise.resolve();
 
-export const loadMermaidToExcalidrawLib = async (): Promise<MermaidToExcalidrawLibProps> => {
-  if (!mermaidToExcalidrawLib) {
-    mermaidToExcalidrawLib = await getSharedMermaidInstance();
-  }
-  return mermaidToExcalidrawLib;
-};
+export const loadMermaidToExcalidrawLib =
+  async (): Promise<MermaidToExcalidrawLibProps> => {
+    if (!mermaidToExcalidrawLib) {
+      mermaidToExcalidrawLib = await getSharedMermaidInstance();
+    }
+    return mermaidToExcalidrawLib;
+  };
 
-export const loadMermaidLib = async (): Promise<MermaidToExcalidrawLibProps> => {
-  if (!mermaidToExcalidrawLib) {
-    const api = import("@zsviczian/mermaid-to-excalidraw").then(module => ({
-      parseMermaidToExcalidraw: module.parseMermaidToExcalidraw,
-    }));
-    mermaidToExcalidrawLib = {
-      loaded: true,
-      api,
-    };
-  }
-  return mermaidToExcalidrawLib;
-};
+export const loadMermaidLib =
+  async (): Promise<MermaidToExcalidrawLibProps> => {
+    if (!mermaidToExcalidrawLib) {
+      const api = import("@zsviczian/mermaid-to-excalidraw").then((module) => ({
+        parseMermaidToExcalidraw: module.parseMermaidToExcalidraw,
+      }));
+      mermaidToExcalidrawLib = {
+        loaded: true,
+        api,
+      };
+    }
+    return mermaidToExcalidrawLib;
+  };
 
 //zsviczian
 export const mermaidToExcalidraw = async (
@@ -40,7 +42,7 @@ export const mermaidToExcalidraw = async (
     }
   | undefined
 > => {
-  return queue = queue.then(async () => {
+  return (queue = queue.then(async () => {
     try {
       const { api } = await loadMermaidToExcalidrawLib();
       const { parseMermaidToExcalidraw } = await api;
@@ -69,5 +71,5 @@ export const mermaidToExcalidraw = async (
         error: e.message,
       };
     }
-  });
-};
+  }));
+};

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,9 +1,6 @@
 import type { MermaidConfig } from "@zsviczian/mermaid-to-excalidraw";
 import type { MermaidToExcalidrawResult } from "@zsviczian/mermaid-to-excalidraw/dist/interfaces";
-import {
-  DEFAULT_EXPORT_PADDING,
-  EDITOR_LS_KEYS,
-} from "../../constants";
+import { DEFAULT_EXPORT_PADDING, EDITOR_LS_KEYS } from "../../constants";
 import { convertToExcalidrawElements, exportToCanvas } from "../../index";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import type { AppClassProperties, BinaryFiles } from "../../types";

packages/excalidraw/components/hyperlink/Hyperlink.tsx

@@ -313,22 +313,24 @@ export const Hyperlink = ({
             icon={FreedrawIcon}
           />
         )}
-        { //zsviczian - show the Obsidian search button
+        {
+          //zsviczian - show the Obsidian search button
           Boolean(appProps.insertLinkAction) && (
-          <ToolButton
-            type="button"
-            title="Obsidian Search"
-            aria-label="Obsidian Search"
-            label="Obsidian Search"
-            onClick={() => {
-              if(appProps.insertLinkAction) {
-                setAppState({ showHyperlinkPopup: false });
-                appProps.insertLinkAction(inputVal);
-              }
-            }}
-            icon={searchIcon}
-          />
-        )}
+            <ToolButton
+              type="button"
+              title="Obsidian Search"
+              aria-label="Obsidian Search"
+              label="Obsidian Search"
+              onClick={() => {
+                if (appProps.insertLinkAction) {
+                  setAppState({ showHyperlinkPopup: false });
+                  appProps.insertLinkAction(inputVal);
+                }
+              }}
+              icon={searchIcon}
+            />
+          )
+        }
         {/* //zsviczian - do not show the link to element button
         <ToolButton
           type="button"

packages/excalidraw/element/image.ts

@@ -124,7 +124,9 @@ export const normalizeSVG = (SVGString: string) => {
       height = height || "50";
 
       if (viewBox) {
-        const match = viewBox.match(/\d+ +\d+ +(\d+) +(\d+)/);
+        const match = viewBox.match( //zsviczian
+          /\d+ +\d+ +(\d+(?:\.\d+)?) +(\d+(?:\.\d+)?)/,
+        );
         if (match) {
           [, width, height] = match;
         }