diff --git a/src/components/App.tsx b/src/components/App.tsx index 28d8401b..e0847bf8 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -5395,7 +5395,7 @@ class App extends React.Component { width: embedLink.aspectRatio.w, height: embedLink.aspectRatio.h, link, - validated: undefined, + validated: null, }); this.scene.replaceAllElements([ @@ -5583,7 +5583,7 @@ class App extends React.Component { } private createGenericElementOnPointerDown = ( - elementType: ExcalidrawGenericElement["type"], + elementType: ExcalidrawGenericElement["type"] | "embeddable", pointerDownState: PointerDownState, ): void => { const [gridX, gridY] = getGridPoint( @@ -5597,8 +5597,7 @@ class App extends React.Component { y: gridY, }); - const element = newElement({ - type: elementType, + const baseElementAttributes = { x: gridX, y: gridY, strokeColor: this.state.currentItemStrokeColor, @@ -5611,8 +5610,21 @@ class App extends React.Component { roundness: this.getCurrentItemRoundness(elementType), locked: false, frameId: topLayerFrame ? topLayerFrame.id : null, - ...(elementType === "embeddable" ? { validated: false } : {}), - }); + } as const; + + let element; + if (elementType === "embeddable") { + element = newEmbeddableElement({ + type: "embeddable", + validated: null, + ...baseElementAttributes, + }); + } else { + element = newElement({ + type: elementType, + ...baseElementAttributes, + }); + } if (element.type === "selection") { this.setState({ diff --git a/src/data/restore.ts b/src/data/restore.ts index 08fbe093..63f1e33c 100644 --- a/src/data/restore.ts +++ b/src/data/restore.ts @@ -286,7 +286,7 @@ const restoreElement = ( return restoreElementWithProperties(element, {}); case "embeddable": return restoreElementWithProperties(element, { - validated: undefined, + validated: null, }); case "frame": return restoreElementWithProperties(element, { diff --git a/src/element/newElement.ts b/src/element/newElement.ts index 012725bc..cb5657f1 100644 --- a/src/element/newElement.ts +++ b/src/element/newElement.ts @@ -134,7 +134,7 @@ export const newElement = ( export const newEmbeddableElement = ( opts: { type: "embeddable"; - validated: boolean | undefined; + validated: ExcalidrawEmbeddableElement["validated"]; } & ElementConstructorOpts, ): NonDeleted => { return { diff --git a/src/element/types.ts b/src/element/types.ts index 7d799f23..e8d71cae 100644 --- a/src/element/types.ts +++ b/src/element/types.ts @@ -86,15 +86,15 @@ export type ExcalidrawEllipseElement = _ExcalidrawElementBase & { export type ExcalidrawEmbeddableElement = _ExcalidrawElementBase & Readonly<{ + type: "embeddable"; /** * indicates whether the embeddable src (url) has been validated for rendering. - * nullish value indicates that the validation is pending. We reset the + * null value indicates that the validation is pending. We reset the * value on each restore (or url change) so that we can guarantee * the validation came from a trusted source (the editor). Also because we * may not have access to host-app supplied url validator during restore. */ - validated?: boolean; - type: "embeddable"; + validated: boolean | null; }>; export type ExcalidrawImageElement = _ExcalidrawElementBase & @@ -123,7 +123,6 @@ export type ExcalidrawFrameElement = _ExcalidrawElementBase & { export type ExcalidrawGenericElement = | ExcalidrawSelectionElement | ExcalidrawRectangleElement - | ExcalidrawEmbeddableElement | ExcalidrawDiamondElement | ExcalidrawEllipseElement; @@ -138,7 +137,8 @@ export type ExcalidrawElement = | ExcalidrawLinearElement | ExcalidrawFreeDrawElement | ExcalidrawImageElement - | ExcalidrawFrameElement; + | ExcalidrawFrameElement + | ExcalidrawEmbeddableElement; export type NonDeleted = TElement & { isDeleted: boolean; diff --git a/src/tests/fixtures/elementFixture.ts b/src/tests/fixtures/elementFixture.ts index ddd7b8b9..7f1231a8 100644 --- a/src/tests/fixtures/elementFixture.ts +++ b/src/tests/fixtures/elementFixture.ts @@ -34,6 +34,7 @@ export const rectangleFixture: ExcalidrawElement = { export const embeddableFixture: ExcalidrawElement = { ...elementBase, type: "embeddable", + validated: null, }; export const ellipseFixture: ExcalidrawElement = { ...elementBase, diff --git a/src/tests/helpers/api.ts b/src/tests/helpers/api.ts index 7f63203d..824a2295 100644 --- a/src/tests/helpers/api.ts +++ b/src/tests/helpers/api.ts @@ -15,7 +15,11 @@ import fs from "fs"; import util from "util"; import path from "path"; import { getMimeType } from "../../data/blob"; -import { newFreeDrawElement, newImageElement } from "../../element/newElement"; +import { + newEmbeddableElement, + newFreeDrawElement, + newImageElement, +} from "../../element/newElement"; import { Point } from "../../types"; import { getSelectedElements } from "../../scene/selection"; import { isLinearElementType } from "../../element/typeChecks"; @@ -178,14 +182,20 @@ export class API { case "rectangle": case "diamond": case "ellipse": - case "embeddable": element = newElement({ - type: type as "rectangle" | "diamond" | "ellipse" | "embeddable", + type: type as "rectangle" | "diamond" | "ellipse", width, height, ...base, }); break; + case "embeddable": + element = newEmbeddableElement({ + type: "embeddable", + ...base, + validated: null, + }); + break; case "text": const fontSize = rest.fontSize ?? appState.currentItemFontSize; const fontFamily = rest.fontFamily ?? appState.currentItemFontFamily;