@excalidraw/excalidraw 0.17.1-d9bbf1e → 0.17.1-e63dd02

package/dist/excalidraw/element/textWysiwyg.js

@@ -2,7 +2,7 @@ import { CODES, KEYS } from "../keys";
 import { isWritableElement, getFontString, getFontFamilyString, isTestEnv, } from "../utils";
 import Scene from "../scene/Scene";
 import { isArrowElement, isBoundToContainer, isTextElement, } from "./typeChecks";
-import { CLASSES } from "../constants";
+import { CLASSES, isSafari } from "../constants";
 import { bumpVersion, mutateElement } from "./mutateElement";
 import { getBoundTextElementId, getContainerElement, getTextElementAngle, getTextWidth, normalizeText, redrawTextBoundingBox, wrapText, getBoundTextMaxHeight, getBoundTextMaxWidth, computeContainerDimensionForBoundText, computeBoundTextPosition, getBoundTextElement, } from "./textElement";
 import { actionDecreaseFontSize, actionIncreaseFontSize, } from "../actions/actionProperties";
@@ -23,7 +23,7 @@ const getTransform = (width, height, angle, appState, maxWidth, maxHeight) => {
     }
     return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
-export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, }) => {
+export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element, canvas, excalidrawContainer, app, autoSelect = true, }) => {
     const textPropertiesUpdated = (updatedTextElement, editable) => {
         if (!editable.style.fontFamily || !editable.style.fontSize) {
             return false;
@@ -50,12 +50,12 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             let coordX = updatedTextElement.x;
             let coordY = updatedTextElement.y;
             const container = getContainerElement(updatedTextElement, app.scene.getNonDeletedElementsMap());
+            let width = updatedTextElement.width;
+            // set to element height by default since that's
+            // what is going to be used for unbounded text
+            let height = updatedTextElement.height;
             let maxWidth = updatedTextElement.width;
             let maxHeight = updatedTextElement.height;
-            let textElementWidth = updatedTextElement.width;
-            // Set to element height by default since that's
-            // what is going to be used for unbounded text
-            const textElementHeight = updatedTextElement.height;
             if (container && updatedTextElement.containerId) {
                 if (isArrowElement(container)) {
                     const boundTextCoords = LinearElementEditor.getBoundTextElementPosition(container, updatedTextElement, elementsMap);
@@ -76,8 +76,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 maxWidth = getBoundTextMaxWidth(container, updatedTextElement);
                 maxHeight = getBoundTextMaxHeight(container, updatedTextElement);
                 // autogrow container height if text exceeds
-                if (!isArrowElement(container) && textElementHeight > maxHeight) {
-                    const targetContainerHeight = computeContainerDimensionForBoundText(textElementHeight, container.type);
+                if (!isArrowElement(container) && height > maxHeight) {
+                    const targetContainerHeight = computeContainerDimensionForBoundText(height, container.type);
                     mutateElement(container, { height: targetContainerHeight });
                     return;
                 }
@@ -86,8 +86,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
                 // is reached when text is removed
                 !isArrowElement(container) &&
                     container.height > originalContainerData.height &&
-                    textElementHeight < maxHeight) {
-                    const targetContainerHeight = computeContainerDimensionForBoundText(textElementHeight, container.type);
+                    height < maxHeight) {
+                    const targetContainerHeight = computeContainerDimensionForBoundText(height, container.type);
                     mutateElement(container, { height: targetContainerHeight });
                 }
                 else {
@@ -111,19 +111,30 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             }
             if (!container) {
                 maxWidth = (appState.width - 8 - viewportX) / appState.zoom.value;
-                textElementWidth = Math.min(textElementWidth, maxWidth);
+                width = Math.min(width, maxWidth);
+            }
+            else {
+                width += 0.5;
             }
+            // add 5% buffer otherwise it causes wysiwyg to jump
+            height *= 1.05;
+            const font = getFontString(updatedTextElement);
+            // adding left and right padding buffer, so that browser does not cut the glyphs (does not work in Safari)
+            const padding = !isSafari
+                ? Math.ceil(updatedTextElement.fontSize / 2)
+                : 0;
             // Make sure text editor height doesn't go beyond viewport
             const editorMaxHeight = (appState.height - viewportY) / appState.zoom.value;
             Object.assign(editable.style, {
-                font: getFontString(updatedTextElement),
+                font,
                 // must be defined *after* font ¯\_(ツ)_/¯
                 lineHeight: updatedTextElement.lineHeight,
-                width: `${textElementWidth}px`,
-                height: `${textElementHeight}px`,
-                left: `${viewportX}px`,
+                width: `${width}px`,
+                height: `${height}px`,
+                left: `${viewportX - padding}px`,
                 top: `${viewportY}px`,
-                transform: getTransform(textElementWidth, textElementHeight, getTextElementAngle(updatedTextElement, container), appState, maxWidth, editorMaxHeight),
+                transform: getTransform(width, height, getTextElementAngle(updatedTextElement, container), appState, maxWidth, editorMaxHeight),
+                padding: `0 ${padding}px`,
                 textAlign,
                 verticalAlign,
                 color: updatedTextElement.strokeColor,
@@ -149,7 +160,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     editable.classList.add("excalidraw-wysiwyg");
     let whiteSpace = "pre";
     let wordBreak = "normal";
-    if (isBoundToContainer(element)) {
+    if (isBoundToContainer(element) || !element.autoResize) {
         whiteSpace = "pre-wrap";
         wordBreak = "break-word";
     }
@@ -159,7 +170,6 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         minHeight: "1em",
         backfaceVisibility: "hidden",
         margin: 0,
-        padding: 0,
         border: 0,
         outline: 0,
         resize: "none",
@@ -193,7 +203,7 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             if (container) {
                 const boundTextElement = getBoundTextElement(container, app.scene.getNonDeletedElementsMap());
                 const wrappedText = wrapText(`${editable.value}${data}`, font, getBoundTextMaxWidth(container, boundTextElement));
-                const width = getTextWidth(wrappedText, font);
+                const width = getTextWidth(wrappedText, font, true);
                 editable.style.width = `${width}px`;
             }
         };
@@ -319,13 +329,20 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             .reverse();
     };
     const stopEvent = (event) => {
-        event.preventDefault();
-        event.stopPropagation();
+        if (event.target instanceof HTMLCanvasElement) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
     };
     // using a state variable instead of passing it to the handleSubmit callback
     // so that we don't need to create separate a callback for event handlers
     let submittedViaKeyboard = false;
     const handleSubmit = () => {
+        // prevent double submit
+        if (isDestroyed) {
+            return;
+        }
+        isDestroyed = true;
         // cleanup must be run before onSubmit otherwise when app blurs the wysiwyg
         // it'd get stuck in an infinite loop of blur→onSubmit after we re-focus the
         // wysiwyg on update
@@ -334,10 +351,8 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         if (!updateElement) {
             return;
         }
-        let text = editable.value;
         const container = getContainerElement(updateElement, app.scene.getNonDeletedElementsMap());
         if (container) {
-            text = updateElement.text;
             if (editable.value.trim()) {
                 const boundTextElementId = getBoundTextElementId(container);
                 if (!boundTextElementId || boundTextElementId !== element.id) {
@@ -361,16 +376,11 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
             redrawTextBoundingBox(updateElement, container, app.scene.getNonDeletedElementsMap());
         }
         onSubmit({
-            text,
             viaKeyboard: submittedViaKeyboard,
-            originalText: editable.value,
+            nextOriginalText: editable.value,
         });
     };
     const cleanup = () => {
-        if (isDestroyed) {
-            return;
-        }
-        isDestroyed = true;
         // remove events to ensure they don't late-fire
         editable.onblur = null;
         editable.oninput = null;
@@ -394,65 +404,63 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
         // Also to handle cases such as picking a color which would trigger a blur
         // in that same tick.
         const target = event?.target;
-        const isTargetPickerTrigger = target instanceof HTMLElement &&
-            target.classList.contains("active-color");
+        const isPropertiesTrigger = target instanceof HTMLElement &&
+            target.classList.contains("properties-trigger");
         setTimeout(() => {
             editable.onblur = handleSubmit;
-            if (isTargetPickerTrigger) {
-                const callback = (mutationList, observer) => {
-                    const radixIsRemoved = mutationList.find((mutation) => mutation.removedNodes.length > 0 &&
-                        mutation.removedNodes[0].dataset
-                            ?.radixPopperContentWrapper !== undefined);
-                    if (radixIsRemoved) {
-                        // should work without this in theory
-                        // and i think it does actually but radix probably somewhere,
-                        // somehow sets the focus elsewhere
-                        setTimeout(() => {
-                            editable.focus();
-                        });
-                        observer.disconnect();
-                    }
-                };
-                const observer = new MutationObserver(callback);
-                observer.observe(document.querySelector(".excalidraw-container"), {
-                    childList: true,
-                });
-            }
             // case: clicking on the same property → no change → no update → no focus
-            if (!isTargetPickerTrigger) {
+            if (!isPropertiesTrigger) {
                 editable.focus();
             }
         });
     };
     // prevent blur when changing properties from the menu
     const onPointerDown = (event) => {
-        const isTargetPickerTrigger = event.target instanceof HTMLElement &&
-            event.target.classList.contains("active-color");
+        const target = event?.target;
+        const isPropertiesTrigger = target instanceof HTMLElement &&
+            target.classList.contains("properties-trigger");
         if (((event.target instanceof HTMLElement ||
             event.target instanceof SVGElement) &&
             event.target.closest(`.${CLASSES.SHAPE_ACTIONS_MENU}`) &&
             !isWritableElement(event.target)) ||
-            isTargetPickerTrigger) {
+            isPropertiesTrigger) {
             editable.onblur = null;
             window.addEventListener("pointerup", bindBlurEvent);
             // handle edge-case where pointerup doesn't fire e.g. due to user
             // alt-tabbing away
             window.addEventListener("blur", handleSubmit);
         }
+        else if (event.target instanceof HTMLElement &&
+            event.target instanceof HTMLCanvasElement &&
+            // Vitest simply ignores stopPropagation, capture-mode, or rAF
+            // so without introducing crazier hacks, nothing we can do
+            !isTestEnv()) {
+            // On mobile, blur event doesn't seem to always fire correctly,
+            // so we want to also submit on pointerdown outside the wysiwyg.
+            // Done in the next frame to prevent pointerdown from creating a new text
+            // immediately (if tools locked) so that users on mobile have chance
+            // to submit first (to hide virtual keyboard).
+            // Note: revisit if we want to differ this behavior on Desktop
+            requestAnimationFrame(() => {
+                handleSubmit();
+            });
+        }
     };
     // handle updates of textElement properties of editing element
-    const unbindUpdate = Scene.getScene(element).addCallback(() => {
+    const unbindUpdate = Scene.getScene(element).onUpdate(() => {
         updateWysiwygStyle();
-        const isColorPickerActive = !!document.activeElement?.closest(".color-picker-content");
-        if (!isColorPickerActive) {
+        const isPopupOpened = !!document.activeElement?.closest(".properties-content");
+        if (!isPopupOpened) {
             editable.focus();
         }
     });
     // ---------------------------------------------------------------------------
     let isDestroyed = false;
-    // select on init (focusing is done separately inside the bindBlurEvent()
-    // because we need it to happen *after* the blur event from `pointerdown`)
-    editable.select();
+    if (autoSelect) {
+        // select on init (focusing is done separately inside the bindBlurEvent()
+        // because we need it to happen *after* the blur event from `pointerdown`)
+        editable.select();
+    }
     bindBlurEvent();
     // reposition wysiwyg in case of canvas is resized. Using ResizeObserver
     // is preferred so we catch changes from host, where window may not resize.
@@ -466,7 +474,12 @@ export const textWysiwyg = ({ id, onChange, onSubmit, getViewportCoords, element
     else {
         window.addEventListener("resize", updateWysiwygStyle);
     }
-    window.addEventListener("pointerdown", onPointerDown);
+    editable.onpointerdown = (event) => event.stopPropagation();
+    // rAF (+ capture to by doubly sure) so we don't catch te pointerdown that
+    // triggered the wysiwyg
+    requestAnimationFrame(() => {
+        window.addEventListener("pointerdown", onPointerDown, { capture: true });
+    });
     window.addEventListener("wheel", stopEvent, {
         passive: false,
         capture: true,

package/dist/excalidraw/element/transformHandles.d.ts

@@ -1,6 +1,6 @@
-import { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
-import { Bounds } from "./bounds";
-import { Device, InteractiveCanvasAppState, Zoom } from "../types";
+import type { ElementsMap, ExcalidrawElement, NonDeletedExcalidrawElement, PointerType } from "./types";
+import type { Bounds } from "./bounds";
+import type { Device, InteractiveCanvasAppState, Zoom } from "../types";
 export type TransformHandleDirection = "n" | "s" | "w" | "e" | "nw" | "ne" | "sw" | "se";
 export type TransformHandleType = TransformHandleDirection | "rotation";
 export type TransformHandle = Bounds;

package/dist/excalidraw/element/transformHandles.js

@@ -1,7 +1,6 @@
 import { getElementAbsoluteCoords } from "./bounds";
 import { rotate } from "../math";
-import { isTextElement } from ".";
-import { isFrameLikeElement, isLinearElement } from "./typeChecks";
+import { isElbowArrow, isFrameLikeElement, isLinearElement, } from "./typeChecks";
 import { DEFAULT_TRANSFORM_HANDLE_SPACING, isAndroid, isIOS, } from "../constants";
 const transformHandleSizes = {
     mouse: 8,
@@ -28,12 +27,6 @@ export const OMIT_SIDES_FOR_FRAME = {
     w: true,
     rotation: true,
 };
-const OMIT_SIDES_FOR_TEXT_ELEMENT = {
-    e: true,
-    s: true,
-    n: true,
-    w: true,
-};
 const OMIT_SIDES_FOR_LINE_SLASH = {
     e: true,
     s: true,
@@ -123,7 +116,9 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
     // so that when locked element is selected (especially when you toggle lock
     // via keyboard) the locked element is visually distinct, indicating
     // you can't move/resize
-    if (element.locked) {
+    if (element.locked ||
+        // Elbow arrows cannot be rotated
+        isElbowArrow(element)) {
         return {};
     }
     if (element.type === "freedraw" || isLinearElement(element)) {
@@ -147,9 +142,6 @@ export const getTransformHandles = (element, zoom, elementsMap, pointerType = "m
             }
         }
     }
-    else if (isTextElement(element)) {
-        omitSides = OMIT_SIDES_FOR_TEXT_ELEMENT;
-    }
     else if (isFrameLikeElement(element)) {
         omitSides = {
             ...omitSides,
@@ -169,6 +161,9 @@ export const shouldShowBoundingBox = (elements, appState) => {
         return true;
     }
     const element = elements[0];
+    if (isElbowArrow(element)) {
+        return false;
+    }
     if (!isLinearElement(element)) {
         return true;
     }

package/dist/excalidraw/element/typeChecks.d.ts

@@ -1,6 +1,6 @@
-import { ElementOrToolType } from "../types";
-import { MarkNonNullable } from "../utility-types";
-import { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement } from "./types";
+import type { ElementOrToolType } from "../types";
+import type { MarkNonNullable } from "../utility-types";
+import type { ExcalidrawElement, ExcalidrawTextElement, ExcalidrawEmbeddableElement, ExcalidrawLinearElement, ExcalidrawBindableElement, ExcalidrawFreeDrawElement, InitializedExcalidrawImageElement, ExcalidrawImageElement, ExcalidrawTextElementWithContainer, ExcalidrawTextContainer, ExcalidrawFrameElement, RoundnessType, ExcalidrawFrameLikeElement, ExcalidrawElementType, ExcalidrawIframeElement, ExcalidrawIframeLikeElement, ExcalidrawMagicFrameElement, ExcalidrawArrowElement, ExcalidrawElbowArrowElement, PointBinding, FixedPointBinding } from "./types";
 export declare const isInitializedImageElement: (element: ExcalidrawElement | null) => element is InitializedExcalidrawImageElement;
 export declare const isImageElement: (element: ExcalidrawElement | null) => element is ExcalidrawImageElement;
 export declare const isEmbeddableElement: (element: ExcalidrawElement | null | undefined) => element is ExcalidrawEmbeddableElement;
@@ -14,10 +14,12 @@ export declare const isFreeDrawElement: (element?: ExcalidrawElement | null) =>
 export declare const isFreeDrawElementType: (elementType: ExcalidrawElementType) => boolean;
 export declare const isLinearElement: (element?: ExcalidrawElement | null) => element is ExcalidrawLinearElement;
 export declare const isArrowElement: (element?: ExcalidrawElement | null) => element is ExcalidrawArrowElement;
+export declare const isElbowArrow: (element?: ExcalidrawElement) => element is ExcalidrawElbowArrowElement;
 export declare const isLinearElementType: (elementType: ElementOrToolType) => boolean;
 export declare const isBindingElement: (element?: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawLinearElement;
 export declare const isBindingElementType: (elementType: ElementOrToolType) => boolean;
-export declare const isBindableElement: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawBindableElement;
+export declare const isBindableElement: (element: ExcalidrawElement | null | undefined, includeLocked?: boolean) => element is ExcalidrawBindableElement;
+export declare const isRectanguloidElement: (element?: ExcalidrawElement | null) => element is ExcalidrawBindableElement;
 export declare const isTextBindableContainer: (element: ExcalidrawElement | null, includeLocked?: boolean) => element is ExcalidrawTextContainer;
 export declare const isExcalidrawElement: (element: any) => element is ExcalidrawElement;
 export declare const hasBoundTextElement: (element: ExcalidrawElement | null) => element is MarkNonNullable<ExcalidrawBindableElement, "boundElements">;
@@ -30,3 +32,4 @@ export declare const getDefaultRoundnessTypeForElement: (element: ExcalidrawElem
 } | {
     type: 3;
 } | null;
+export declare const isFixedPointBinding: (binding: PointBinding) => binding is FixedPointBinding;

package/dist/excalidraw/element/typeChecks.js

@@ -40,6 +40,9 @@ export const isLinearElement = (element) => {
 export const isArrowElement = (element) => {
     return element != null && element.type === "arrow";
 };
+export const isElbowArrow = (element) => {
+    return isArrowElement(element) && element.elbowed;
+};
 export const isLinearElementType = (elementType) => {
     return (elementType === "arrow" || elementType === "line" // || elementType === "freedraw"
     );
@@ -65,6 +68,17 @@ export const isBindableElement = (element, includeLocked = true) => {
             element.type === "magicframe" ||
             (element.type === "text" && !element.containerId)));
 };
+export const isRectanguloidElement = (element) => {
+    return (element != null &&
+        (element.type === "rectangle" ||
+            element.type === "diamond" ||
+            element.type === "image" ||
+            element.type === "iframe" ||
+            element.type === "embeddable" ||
+            element.type === "frame" ||
+            element.type === "magicframe" ||
+            (element.type === "text" && !element.containerId)));
+};
 export const isTextBindableContainer = (element, includeLocked = true) => {
     return (element != null &&
         (!element.locked || includeLocked === true) &&
@@ -142,3 +156,6 @@ export const getDefaultRoundnessTypeForElement = (element) => {
     }
     return null;
 };
+export const isFixedPointBinding = (binding) => {
+    return binding.fixedPoint != null;
+};

package/dist/excalidraw/element/types.d.ts

@@ -1,7 +1,7 @@
-import { Point } from "../types";
-import { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
-import { MakeBrand, MarkNonNullable, ValueOf } from "../utility-types";
-import { MagicCacheData } from "../data/magic";
+import type { Point } from "../types";
+import type { FONT_FAMILY, ROUNDNESS, TEXT_ALIGN, THEME, VERTICAL_ALIGN } from "../constants";
+import type { MakeBrand, MarkNonNullable, Merge, ValueOf } from "../utility-types";
+import type { MagicCacheData } from "../data/magic";
 export type ChartType = "bar" | "line";
 export type FillStyle = "hachure" | "cross-hatch" | "solid" | "zigzag";
 export type FontFamilyKeys = keyof typeof FONT_FAMILY;
@@ -154,6 +154,13 @@ export type ExcalidrawTextElement = _ExcalidrawElementBase & Readonly<{
     verticalAlign: VerticalAlign;
     containerId: ExcalidrawGenericElement["id"] | null;
     originalText: string;
+    /**
+     * If `true` the width will fit the text. If `false`, the text will
+     * wrap to fit the width.
+     *
+     * @default true
+     */
+    autoResize: boolean;
     /**
      * Unitless line height (aligned to W3C). To get line height in px, multiply
      *  with font size (using `getLineHeightInPx` helper).
@@ -167,11 +174,16 @@ export type ExcalidrawTextContainer = ExcalidrawRectangleElement | ExcalidrawDia
 export type ExcalidrawTextElementWithContainer = {
     containerId: ExcalidrawTextContainer["id"];
 } & ExcalidrawTextElement;
+export type FixedPoint = [number, number];
 export type PointBinding = {
     elementId: ExcalidrawBindableElement["id"];
     focus: number;
     gap: number;
+    fixedPoint: FixedPoint | null;
 };
+export type FixedPointBinding = Merge<PointBinding, {
+    fixedPoint: FixedPoint;
+}>;
 export type Arrowhead = "arrow" | "bar" | "dot" | "circle" | "circle_outline" | "triangle" | "triangle_outline" | "diamond" | "diamond_outline";
 export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{
     type: "line" | "arrow";
@@ -184,6 +196,12 @@ export type ExcalidrawLinearElement = _ExcalidrawElementBase & Readonly<{
 }>;
 export type ExcalidrawArrowElement = ExcalidrawLinearElement & Readonly<{
     type: "arrow";
+    elbowed: boolean;
+}>;
+export type ExcalidrawElbowArrowElement = Merge<ExcalidrawArrowElement, {
+    elbowed: true;
+    startBinding: FixedPointBinding | null;
+    endBinding: FixedPointBinding | null;
 }>;
 export type ExcalidrawFreeDrawElement = _ExcalidrawElementBase & Readonly<{
     type: "freedraw";

package/dist/excalidraw/emitter.d.ts

@@ -1,4 +1,4 @@
-import { UnsubscribeCallback } from "./types";
+import type { UnsubscribeCallback } from "./types";
 type Subscriber<T extends any[]> = (...payload: T) => void;
 export declare class Emitter<T extends any[] = []> {
     subscribers: Subscriber<T>[];

package/dist/excalidraw/fonts/ExcalidrawFont.d.ts

@@ -0,0 +1,21 @@
+export interface Font {
+    urls: URL[];
+    fontFace: FontFace;
+    getContent(): Promise<string>;
+}
+export declare const UNPKG_PROD_URL: string;
+export declare class ExcalidrawFont implements Font {
+    readonly urls: URL[];
+    readonly fontFace: FontFace;
+    constructor(family: string, uri: string, descriptors?: FontFaceDescriptors);
+    /**
+     * Tries to fetch woff2 content, based on the registered urls.
+     * Returns last defined url in case of errors.
+     *
+     * Note: uses browser APIs for base64 encoding - use dataurl outside the browser environment.
+     */
+    getContent(): Promise<string>;
+    private static createUrls;
+    private static getFormat;
+    private static normalizeBaseUrl;
+}

package/dist/excalidraw/fonts/ExcalidrawFont.js

@@ -0,0 +1,112 @@
+import { stringToBase64, toByteString } from "../data/encode";
+import { LOCAL_FONT_PROTOCOL } from "./metadata";
+export const UNPKG_PROD_URL = `https://unpkg.com/${import.meta.env.VITE_PKG_NAME
+    ? `${import.meta.env.VITE_PKG_NAME}@${import.meta.env.PKG_VERSION}` // should be provided by vite during package build
+    : "@excalidraw/excalidraw" // fallback to latest package version (i.e. for app)
+}/dist/prod/`;
+export class ExcalidrawFont {
+    urls;
+    fontFace;
+    constructor(family, uri, descriptors) {
+        this.urls = ExcalidrawFont.createUrls(uri);
+        const sources = this.urls
+            .map((url) => `url(${url}) ${ExcalidrawFont.getFormat(url)}`)
+            .join(", ");
+        this.fontFace = new FontFace(family, sources, {
+            display: "swap",
+            style: "normal",
+            weight: "400",
+            ...descriptors,
+        });
+    }
+    /**
+     * Tries to fetch woff2 content, based on the registered urls.
+     * Returns last defined url in case of errors.
+     *
+     * Note: uses browser APIs for base64 encoding - use dataurl outside the browser environment.
+     */
+    async getContent() {
+        let i = 0;
+        const errorMessages = [];
+        while (i < this.urls.length) {
+            const url = this.urls[i];
+            if (url.protocol === "data:") {
+                // it's dataurl, the font is inlined as base64, no need to fetch
+                return url.toString();
+            }
+            try {
+                const response = await fetch(url, {
+                    headers: {
+                        Accept: "font/woff2",
+                    },
+                });
+                if (response.ok) {
+                    const mimeType = await response.headers.get("Content-Type");
+                    const buffer = await response.arrayBuffer();
+                    return `data:${mimeType};base64,${await stringToBase64(await toByteString(buffer), true)}`;
+                }
+                // response not ok, try to continue
+                errorMessages.push(`"${url.toString()}" returned status "${response.status}"`);
+            }
+            catch (e) {
+                errorMessages.push(`"${url.toString()}" returned error "${e}"`);
+            }
+            i++;
+        }
+        console.error(`Failed to fetch font "${this.fontFace.family}" from urls "${this.urls.toString()}`, JSON.stringify(errorMessages, undefined, 2));
+        // in case of issues, at least return the last url as a content
+        // defaults to unpkg for bundled fonts (so that we don't have to host them forever) and http url for others
+        return this.urls.length ? this.urls[this.urls.length - 1].toString() : "";
+    }
+    static createUrls(uri) {
+        if (uri.startsWith(LOCAL_FONT_PROTOCOL)) {
+            // no url for local fonts
+            return [];
+        }
+        if (uri.startsWith("http") || uri.startsWith("data")) {
+            // one url for http imports or data url
+            return [new URL(uri)];
+        }
+        // absolute assets paths, which are found in tests and excalidraw-app build, won't work with base url, so we are stripping initial slash away
+        const assetUrl = uri.replace(/^\/+/, "");
+        const urls = [];
+        if (typeof window.EXCALIDRAW_ASSET_PATH === "string") {
+            const normalizedBaseUrl = this.normalizeBaseUrl(window.EXCALIDRAW_ASSET_PATH);
+            urls.push(new URL(assetUrl, normalizedBaseUrl));
+        }
+        else if (Array.isArray(window.EXCALIDRAW_ASSET_PATH)) {
+            window.EXCALIDRAW_ASSET_PATH.forEach((path) => {
+                const normalizedBaseUrl = this.normalizeBaseUrl(path);
+                urls.push(new URL(assetUrl, normalizedBaseUrl));
+            });
+        }
+        // fallback url for bundled fonts
+        urls.push(new URL(assetUrl, UNPKG_PROD_URL));
+        return urls;
+    }
+    static getFormat(url) {
+        try {
+            const pathname = new URL(url).pathname;
+            const parts = pathname.split(".");
+            if (parts.length === 1) {
+                return "";
+            }
+            return `format('${parts.pop()}')`;
+        }
+        catch (error) {
+            return "";
+        }
+    }
+    static normalizeBaseUrl(baseUrl) {
+        let result = baseUrl;
+        // in case user passed a root-relative url (~absolute path),
+        // like "/" or "/some/path", or relative (starts with "./"),
+        // prepend it with `location.origin`
+        if (/^\.?\//.test(result)) {
+            result = new URL(result.replace(/^\.?\/+/, ""), window?.location?.origin).toString();
+        }
+        // ensure there is a trailing slash, otherwise url won't be correctly concatenated
+        result = `${result.replace(/\/+$/, "")}/`;
+        return result;
+    }
+}