@zsviczian/excalidraw 0.9.0-obsidian-image-support-6 → 0.9.0-obsidian-image-support-9

package/dist/excalidraw.production.min.js.LICENSE.txt

@@ -1,3 +1,9 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
 /*!
 
 pica
@@ -5,4 +11,13 @@ https://github.com/nodeca/pica
 
 */
 
+/** @license React v17.0.2
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 // @license © 2020 Google LLC. Licensed under the Apache License, Version 2.0.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zsviczian/excalidraw",
-  "version": "0.9.0-obsidian-image-support-6",
+  "version": "0.9.0-obsidian-image-support-9",
   "main": "main.js",
   "types": "types/packages/excalidraw/index.d.ts",
   "files": [

package/types/actions/actionCanvas.d.ts

@@ -67,7 +67,7 @@ export declare const zoomToFitElements: (elements: readonly ExcalidrawElement[],
         showHelpDialog: boolean;
         toastMessage: string | null;
         zenModeEnabled: boolean;
-        theme: "light" | "dark";
+        theme: string;
         gridSize: number | null;
         viewModeEnabled: boolean;
         selectedGroupIds: {

package/types/appState.d.ts

@@ -2,7 +2,7 @@ import { ExcalidrawElement } from "./element/types";
 import { AppState, NormalizedZoomValue } from "./types";
 export declare const getDefaultAppState: () => Omit<AppState, "offsetTop" | "offsetLeft" | "width" | "height">;
 export declare const clearAppStateForLocalStorage: (appState: Partial<AppState>, elements: readonly ExcalidrawElement[]) => {
-    theme?: "light" | "dark" | undefined;
+    theme?: string | undefined;
     zoom?: Readonly<{
         value: NormalizedZoomValue;
         translation: Readonly<{

package/types/components/DarkModeToggle.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import "./ToolIcon.scss";
-export declare type Appearence = "light" | "dark";
+import { Theme } from "../element/types";
 export declare const DarkModeToggle: (props: {
-    value: Appearence;
-    onChange: (value: Appearence) => void;
+    value: Theme;
+    onChange: (value: Theme) => void;
     title?: string | undefined;
 }) => JSX.Element;

package/types/components/InitializeApp.d.ts

@@ -2,15 +2,7 @@ import React from "react";
 import { Language } from "../i18n";
 interface Props {
     langCode: Language["code"];
+    children: React.ReactElement;
 }
-interface State {
-    isLoading: boolean;
-}
-export declare class InitializeApp extends React.Component<Props, State> {
-    state: {
-        isLoading: boolean;
-    };
-    componentDidMount(): Promise<void>;
-    render(): React.ReactNode;
-}
+export declare const InitializeApp: (props: Props) => JSX.Element;
 export {};

package/types/components/icons.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { Theme } from "../element/types";
 declare type Opts = {
     width?: number;
     height?: number;
@@ -28,40 +29,40 @@ export declare const shareIOS: JSX.Element;
 export declare const shareWindows: JSX.Element;
 export declare const resetZoom: JSX.Element;
 export declare const BringForwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SendBackwardIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const BringToFrontIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SendToBackIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignTopIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignBottomIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const AlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const DistributeHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const DistributeVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const CenterVerticallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const CenterHorizontallyIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const users: JSX.Element;
 export declare const start: JSX.Element;
@@ -72,91 +73,91 @@ export declare const clone: JSX.Element;
 export declare const shield: JSX.Element;
 export declare const file: JSX.Element;
 export declare const GroupIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const UngroupIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillHachureIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillCrossHatchIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FillSolidIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeWidthIcon: React.MemoExoticComponent<({ theme, strokeWidth }: {
-    theme: "light" | "dark";
+    theme: Theme;
     strokeWidth: number;
 }) => JSX.Element>;
 export declare const StrokeStyleSolidIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeStyleDashedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const StrokeStyleDottedIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessArchitectIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessArtistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const SloppinessCartoonistIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const EdgeSharpIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const EdgeRoundIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const ArrowheadNoneIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const ArrowheadArrowIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const ArrowheadDotIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const ArrowheadBarIcon: React.MemoExoticComponent<({ theme, flip }: {
-    theme: "light" | "dark";
+    theme: Theme;
     flip?: boolean | undefined;
 }) => JSX.Element>;
 export declare const FontSizeSmallIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeMediumIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontSizeExtraLargeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyHandDrawnIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyNormalIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const FontFamilyCodeIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignLeftIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignCenterIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export declare const TextAlignRightIcon: React.MemoExoticComponent<({ theme }: {
-    theme: "light" | "dark";
+    theme: Theme;
 }) => JSX.Element>;
 export {};

package/types/constants.d.ts

@@ -61,6 +61,10 @@ export declare const FONT_FAMILY: {
     Helvetica: number;
     Cascadia: number;
 };
+export declare const THEME: {
+    LIGHT: string;
+    DARK: string;
+};
 export declare const WINDOWS_EMOJI_FALLBACK_FONT = "Segoe UI Emoji";
 export declare const DEFAULT_FONT_SIZE = 20;
 export declare const DEFAULT_FONT_FAMILY: FontFamilyValues;
@@ -112,3 +116,5 @@ export declare const MAX_DECIMALS_FOR_SVG_EXPORT = 2;
 export declare const EXPORT_SCALES: number[];
 export declare const DEFAULT_EXPORT_PADDING = 10;
 export declare const DEFAULT_MAX_IMAGE_WIDTH_OR_HEIGHT = 1440;
+export declare const ALLOWED_IMAGE_MIME_TYPES: readonly ["image/png", "image/jpeg", "image/svg+xml"];
+export declare const MAX_ALLOWED_FILE_BYTES: number;

package/types/data/blob.d.ts

@@ -1,3 +1,4 @@
+import { ALLOWED_IMAGE_MIME_TYPES } from "../constants";
 import { ExcalidrawElement, FileId } from "../element/types";
 import { AppState, DataURL } from "../types";
 import { FileSystemHandle } from "./filesystem";
@@ -6,11 +7,16 @@ export declare const getMimeType: (blob: Blob | string) => string;
 export declare const getFileHandleType: (handle: FileSystemHandle | null) => string | null;
 export declare const isImageFileHandleType: (type: string | null) => type is "svg" | "png";
 export declare const isImageFileHandle: (handle: FileSystemHandle | null) => boolean;
-export declare const isImageFile: (blob: Blob | null | undefined) => blob is Blob;
+export declare const isSupportedImageFile: (blob: Blob | null | undefined) => blob is Blob & {
+    type: typeof ALLOWED_IMAGE_MIME_TYPES[number];
+};
 export declare const loadFromBlob: (blob: Blob, localAppState: AppState | null, localElements: readonly ExcalidrawElement[] | null) => Promise<import("./restore").RestoredDataState>;
 export declare const loadLibraryFromBlob: (blob: Blob) => Promise<ImportedLibraryData>;
 export declare const canvasToBlob: (canvas: HTMLCanvasElement) => Promise<Blob>;
+/** generates SHA-1 digest from supplied file (if not supported, falls back
+    to a 40-char base64 random id) */
 export declare const generateIdFromFile: (file: File) => Promise<FileId>;
 export declare const getDataURL: (file: Blob | File) => Promise<DataURL>;
 export declare const dataURLToFile: (dataURL: DataURL, filename?: string) => File;
 export declare const resizeImageFile: (file: File, maxWidthOrHeight: number) => Promise<File>;
+export declare const getDataURLMimeType: (dataURL: DataURL) => string;

package/types/element/types.d.ts

@@ -1,9 +1,10 @@
 import { Point } from "../types";
-import { FONT_FAMILY } from "../constants";
+import { FONT_FAMILY, THEME } from "../constants";
 export declare type ChartType = "bar" | "line";
 export declare type FillStyle = "hachure" | "cross-hatch" | "solid";
 export declare type FontFamilyKeys = keyof typeof FONT_FAMILY;
 export declare type FontFamilyValues = typeof FONT_FAMILY[FontFamilyKeys];
+export declare type Theme = typeof THEME[keyof typeof THEME];
 export declare type FontString = string & {
     _brand: "fontString";
 };
@@ -61,7 +62,7 @@ export declare type ExcalidrawImageElement = _ExcalidrawElementBase & Readonly<{
     type: "image";
     fileId: FileId | null;
     /** whether respective file is persisted */
-    status: "pending" | "saved";
+    status: "pending" | "saved" | "error";
     /** X and Y scale factors <-1, 1>, used for image axis flipping */
     scale: [number, number];
 }>;

package/types/packages/excalidraw/index.d.ts

@@ -10,4 +10,4 @@ export { getSceneVersion, getElementMap, isInvisiblySmallElement, } from "../../
 export { defaultLang, languages } from "../../i18n";
 export { restore, restoreAppState, restoreElements } from "../../data/restore";
 export { exportToCanvas, exportToBlob, exportToSvg, serializeAsJSON, loadLibraryFromBlob, loadFromBlob, getFreeDrawSvgPath, } from "../../packages/utils";
-export { FONT_FAMILY } from "../../constants";
+export { FONT_FAMILY, THEME } from "../../constants";

package/types/packages/excalidraw/webpack.prod.config.d.ts

@@ -44,7 +44,9 @@ export namespace module {
         } | {
             loader: string;
             options: {
-                presets: string[];
+                presets: (string | (string | {
+                    runtime: string;
+                })[])[];
                 plugins: string[];
                 transpileOnly?: undefined;
                 configFile?: undefined;

package/types/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawTextElement, ExcalidrawImageElement } from "./element/types";
+import { PointerType, ExcalidrawLinearElement, NonDeletedExcalidrawElement, NonDeleted, TextAlign, ExcalidrawElement, GroupId, ExcalidrawBindableElement, Arrowhead, ChartType, FontFamilyValues, FileId, ExcalidrawTextElement, ExcalidrawImageElement, Theme } from "./element/types";
 import { SHAPES } from "./shapes";
 import { Point as RoughPoint } from "roughjs/bin/geometry";
 import { LinearElementEditor } from "./element/linearElementEditor";
@@ -38,6 +38,7 @@ export declare type BinaryFileData = {
     dataURL: DataURL;
     created: number;
 };
+export declare type BinaryFileMetadata = Omit<BinaryFileData, "dataURL">;
 export declare type AppState = {
     files: Record<ExcalidrawElement["id"], BinaryFileData>;
     isLoading: boolean;
@@ -93,7 +94,7 @@ export declare type AppState = {
     showHelpDialog: boolean;
     toastMessage: string | null;
     zenModeEnabled: boolean;
-    theme: "light" | "dark";
+    theme: Theme;
     gridSize: number | null;
     viewModeEnabled: boolean;
     /** top-most selected groups (i.e. does not include nested groups) */
@@ -178,7 +179,7 @@ export interface ExcalidrawProps {
     zenModeEnabled?: boolean;
     gridModeEnabled?: boolean;
     libraryReturnUrl?: string;
-    theme?: "dark" | "light";
+    theme?: Theme;
     name?: string;
     renderCustomStats?: (elements: readonly NonDeletedExcalidrawElement[], appState: AppState) => JSX.Element;
     UIOptions?: UIOptions;
@@ -300,7 +301,7 @@ export declare type ExcalidrawImperativeAPI = {
     refresh: InstanceType<typeof App>["refresh"];
     importLibrary: InstanceType<typeof App>["importLibraryFromUrl"];
     setToastMessage: InstanceType<typeof App>["setToastMessage"];
-    addFiles: (data: AppState["files"][number][]) => void;
+    addFiles: (data: BinaryFileData[]) => void;
     readyPromise: ResolvablePromise<ExcalidrawImperativeAPI>;
     ready: true;
     id: string;