{questionCircle}
+
+ {
+ updateData(theme === THEME.DARK);
+ }}
+ title={t("imageExportDialog.label.darkMode")}
+ />
+
+ ),
+});
diff --git a/packages/excalidraw/actions/actionFinalize.tsx b/packages/excalidraw/actions/actionFinalize.tsx
new file mode 100644
index 0000000..f2d8c01
--- /dev/null
+++ b/packages/excalidraw/actions/actionFinalize.tsx
@@ -0,0 +1,223 @@
+import { KEYS } from "../keys";
+import { isInvisiblySmallElement } from "../element";
+import { arrayToMap, updateActiveTool } from "../utils";
+import { ToolButton } from "../components/ToolButton";
+import { done } from "../components/icons";
+import { t } from "../i18n";
+import { register } from "./register";
+import { mutateElement } from "../element/mutateElement";
+import { LinearElementEditor } from "../element/linearElementEditor";
+import {
+ maybeBindLinearElement,
+ bindOrUnbindLinearElement,
+} from "../element/binding";
+import { isBindingElement, isLinearElement } from "../element/typeChecks";
+import type { AppState } from "../types";
+import { resetCursor } from "../cursor";
+import { CaptureUpdateAction } from "../store";
+import { pointFrom } from "@excalidraw/math";
+import { isPathALoop } from "../shapes";
+
+export const actionFinalize = register({
+ name: "finalize",
+ label: "",
+ trackEvent: false,
+ perform: (elements, appState, _, app) => {
+ const { interactiveCanvas, focusContainer, scene } = app;
+
+ const elementsMap = scene.getNonDeletedElementsMap();
+
+ if (appState.editingLinearElement) {
+ const { elementId, startBindingElement, endBindingElement } =
+ appState.editingLinearElement;
+ const element = LinearElementEditor.getElement(elementId, elementsMap);
+
+ if (element) {
+ if (isBindingElement(element)) {
+ bindOrUnbindLinearElement(
+ element,
+ startBindingElement,
+ endBindingElement,
+ elementsMap,
+ scene,
+ );
+ }
+ return {
+ elements:
+ element.points.length < 2 || isInvisiblySmallElement(element)
+ ? elements.filter((el) => el.id !== element.id)
+ : undefined,
+ appState: {
+ ...appState,
+ cursorButton: "up",
+ editingLinearElement: null,
+ },
+ captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+ };
+ }
+ }
+
+ let newElements = elements;
+
+ const pendingImageElement =
+ appState.pendingImageElementId &&
+ scene.getElement(appState.pendingImageElementId);
+
+ if (pendingImageElement) {
+ mutateElement(pendingImageElement, { isDeleted: true }, false);
+ }
+
+ if (window.document.activeElement instanceof HTMLElement) {
+ focusContainer();
+ }
+
+ const multiPointElement = appState.multiElement
+ ? appState.multiElement
+ : appState.newElement?.type === "freedraw"
+ ? appState.newElement
+ : null;
+
+ if (multiPointElement) {
+ // pen and mouse have hover
+ if (
+ multiPointElement.type !== "freedraw" &&
+ appState.lastPointerDownWith !== "touch"
+ ) {
+ const { points, lastCommittedPoint } = multiPointElement;
+ if (
+ !lastCommittedPoint ||
+ points[points.length - 1] !== lastCommittedPoint
+ ) {
+ mutateElement(multiPointElement, {
+ points: multiPointElement.points.slice(0, -1),
+ });
+ }
+ }
+
+ if (isInvisiblySmallElement(multiPointElement)) {
+ // TODO: #7348 in theory this gets recorded by the store, so the invisible elements could be restored by the undo/redo, which might be not what we would want
+ newElements = newElements.filter(
+ (el) => el.id !== multiPointElement.id,
+ );
+ }
+
+ // If the multi point line closes the loop,
+ // set the last point to first point.
+ // This ensures that loop remains closed at different scales.
+ const isLoop = isPathALoop(multiPointElement.points, appState.zoom.value);
+ if (
+ multiPointElement.type === "line" ||
+ multiPointElement.type === "freedraw"
+ ) {
+ if (isLoop) {
+ const linePoints = multiPointElement.points;
+ const firstPoint = linePoints[0];
+ mutateElement(multiPointElement, {
+ points: linePoints.map((p, index) =>
+ index === linePoints.length - 1
+ ? pointFrom(firstPoint[0], firstPoint[1])
+ : p,
+ ),
+ });
+ }
+ }
+
+ if (
+ isBindingElement(multiPointElement) &&
+ !isLoop &&
+ multiPointElement.points.length > 1
+ ) {
+ const [x, y] = LinearElementEditor.getPointAtIndexGlobalCoordinates(
+ multiPointElement,
+ -1,
+ arrayToMap(elements),
+ );
+ maybeBindLinearElement(
+ multiPointElement,
+ appState,
+ { x, y },
+ elementsMap,
+ elements,
+ );
+ }
+ }
+
+ if (
+ (!appState.activeTool.locked &&
+ appState.activeTool.type !== "freedraw") ||
+ !multiPointElement
+ ) {
+ resetCursor(interactiveCanvas);
+ }
+
+ let activeTool: AppState["activeTool"];
+ if (appState.activeTool.type === "eraser") {
+ activeTool = updateActiveTool(appState, {
+ ...(appState.activeTool.lastActiveTool || {
+ type: "selection",
+ }),
+ lastActiveToolBeforeEraser: null,
+ });
+ } else {
+ activeTool = updateActiveTool(appState, {
+ type: "selection",
+ });
+ }
+
+ return {
+ elements: newElements,
+ appState: {
+ ...appState,
+ cursorButton: "up",
+ activeTool:
+ (appState.activeTool.locked ||
+ appState.activeTool.type === "freedraw") &&
+ multiPointElement
+ ? appState.activeTool
+ : activeTool,
+ activeEmbeddable: null,
+ newElement: null,
+ selectionElement: null,
+ multiElement: null,
+ editingTextElement: null,
+ startBoundElement: null,
+ suggestedBindings: [],
+ selectedElementIds:
+ multiPointElement &&
+ !appState.activeTool.locked &&
+ appState.activeTool.type !== "freedraw"
+ ? {
+ ...appState.selectedElementIds,
+ [multiPointElement.id]: true,
+ }
+ : appState.selectedElementIds,
+ // To select the linear element when user has finished mutipoint editing
+ selectedLinearElement:
+ multiPointElement && isLinearElement(multiPointElement)
+ ? new LinearElementEditor(multiPointElement)
+ : appState.selectedLinearElement,
+ pendingImageElementId: null,
+ },
+ // TODO: #7348 we should not capture everything, but if we don't, it leads to incosistencies -> revisit
+ captureUpdate: CaptureUpdateAction.IMMEDIATELY,
+ };
+ },
+ keyTest: (event, appState) =>
+ (event.key === KEYS.ESCAPE &&
+ (appState.editingLinearElement !== null ||
+ (!appState.newElement && appState.multiElement === null))) ||
+ ((event.key === KEYS.ESCAPE || event.key === KEYS.ENTER) &&
+ appState.multiElement !== null),
+ PanelComponent: ({ appState, updateData, data }) => (
+
+
+
+
+
+ ) : collaborator.isMuted ? (
+
+ {microphoneMutedIcon}
+
+ ) : (
+ {microphoneIcon}
+ )
+ ) : null;
+
+ return withName ? (
+ updateData(collaborator)}
+ >
+ {}}
+ name={collaborator.username || ""}
+ src={collaborator.avatarUrl}
+ className={statusClassNames}
+ />
+
+ ) : (
+
+ {collaborator.username}
+
+
+ {isBeingFollowed && (
+
+
+ {eyeIcon}
+
+ )}
+ {statusIconJSX}
+
+ {
+ updateData(collaborator);
+ }}
+ name={collaborator.username || ""}
+ src={collaborator.avatarUrl}
+ className={statusClassNames}
+ />
+ {statusIconJSX && (
+
+ );
+ },
+});
diff --git a/packages/excalidraw/actions/actionProperties.test.tsx b/packages/excalidraw/actions/actionProperties.test.tsx
new file mode 100644
index 0000000..80d2ca2
--- /dev/null
+++ b/packages/excalidraw/actions/actionProperties.test.tsx
@@ -0,0 +1,168 @@
+import React from "react";
+import { Excalidraw } from "../index";
+import { queryByTestId } from "@testing-library/react";
+import { render } from "../tests/test-utils";
+import { UI } from "../tests/helpers/ui";
+import { API } from "../tests/helpers/api";
+import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
+import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
+
+describe("element locking", () => {
+ beforeEach(async () => {
+ await render(
+ {statusIconJSX}
+
+ )}
+ {t("labels.stroke")}
+{t("labels.background")}
+ ${json}
`,
+ },
+ }),
+ );
+ expect(clipboardData.elements).toEqual([rect]);
+ // -------------------------------------------------------------------------
+ });
+
+ it("should parse 
`,
+ },
+ }),
+ );
+ expect(clipboardData.mixedContent).toEqual([
+ {
+ type: "imageUrl",
+ value: "https://example.com/image.png",
+ },
+ ]);
+ // -------------------------------------------------------------------------
+ clipboardData = await parseClipboard(
+ createPasteEvent({
+ types: {
+ "text/html": `
`,
+ },
+ }),
+ );
+ expect(clipboardData.mixedContent).toEqual([
+ {
+ type: "imageUrl",
+ value: "https://example.com/image.png",
+ },
+ {
+ type: "imageUrl",
+ value: "https://example.com/image2.png",
+ },
+ ]);
+ });
+
+ it("should parse text content alongside
+
+ );
+};
+
+export const ShapesSwitcher = ({
+ activeTool,
+ appState,
+ app,
+ UIOptions,
+}: {
+ activeTool: UIAppState["activeTool"];
+ appState: UIAppState;
+ app: AppClassProperties;
+ UIOptions: AppProps["UIOptions"];
+}) => {
+ const [isExtraToolsMenuOpen, setIsExtraToolsMenuOpen] = useState(false);
+
+ const frameToolSelected = activeTool.type === "frame";
+ const laserToolSelected = activeTool.type === "laser";
+ const embeddableToolSelected = activeTool.type === "embeddable";
+
+ const { TTDDialogTriggerTunnel } = useTunnels();
+
+ return (
+ <>
+ {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
+ if (
+ UIOptions.tools?.[
+ value as Extract
+ {canChangeStrokeColor(appState, targetElements) &&
+ renderAction("changeStrokeColor")}
+
+ {canChangeBackgroundColor(appState, targetElements) && (
+ {renderAction("changeBackgroundColor")}
+ )}
+ {showFillIcons && renderAction("changeFillStyle")}
+
+ {(hasStrokeWidth(appState.activeTool.type) ||
+ targetElements.some((element) => hasStrokeWidth(element.type))) &&
+ renderAction("changeStrokeWidth")}
+
+ {(appState.activeTool.type === "freedraw" ||
+ targetElements.some((element) => element.type === "freedraw")) &&
+ renderAction("changeStrokeShape")}
+
+ {(hasStrokeStyle(appState.activeTool.type) ||
+ targetElements.some((element) => hasStrokeStyle(element.type))) && (
+ <>
+ {renderAction("changeStrokeStyle")}
+ {renderAction("changeSloppiness")}
+
+ )}
+
+ {(canChangeRoundness(appState.activeTool.type) ||
+ targetElements.some((element) => canChangeRoundness(element.type))) && (
+ <>{renderAction("changeRoundness")}
+ )}
+
+ {(toolIsArrow(appState.activeTool.type) ||
+ targetElements.some((element) => toolIsArrow(element.type))) && (
+ <>{renderAction("changeArrowType")}
+ )}
+
+ {(appState.activeTool.type === "text" ||
+ targetElements.some(isTextElement)) && (
+ <>
+ {renderAction("changeFontFamily")}
+ {renderAction("changeFontSize")}
+ {(appState.activeTool.type === "text" ||
+ suppportsHorizontalAlign(targetElements, elementsMap)) &&
+ renderAction("changeTextAlign")}
+
+ )}
+
+ {shouldAllowVerticalAlign(targetElements, elementsMap) &&
+ renderAction("changeVerticalAlign")}
+ {(canHaveArrowheads(appState.activeTool.type) ||
+ targetElements.some((element) => canHaveArrowheads(element.type))) && (
+ <>{renderAction("changeArrowhead")}
+ )}
+
+ {renderAction("changeOpacity")}
+
+
+
+ {showAlignActions && !isSingleElementBoundContainer && (
+
+ )}
+ {!isEditingTextOrNewElement && targetElements.length > 0 && (
+
+ )}
+
+ Generate
+
+ {app.props.aiEnabled !== false &&
+
+);
+
+export const ExitZenModeAction = ({
+ actionManager,
+ showExitZenModeBtn,
+}: {
+ actionManager: ActionManager;
+ showExitZenModeBtn: boolean;
+}) => (
+
+);
+
+export const FinalizeAction = ({
+ renderAction,
+ className,
+}: {
+ renderAction: ActionManager["renderAction"];
+ className?: string;
+}) => (
+
+ {renderAction("undo")}
+
+
+ {renderAction("redo")}
+
+
+ {renderAction("finalize", { size: "small" })}
+
+);
diff --git a/packages/excalidraw/components/ActiveConfirmDialog.tsx b/packages/excalidraw/components/ActiveConfirmDialog.tsx
new file mode 100644
index 0000000..699fbc6
--- /dev/null
+++ b/packages/excalidraw/components/ActiveConfirmDialog.tsx
@@ -0,0 +1,35 @@
+import { actionClearCanvas } from "../actions";
+import { t } from "../i18n";
+import { atom, useAtom } from "../editor-jotai";
+import { useExcalidrawActionManager } from "./App";
+import ConfirmDialog from "./ConfirmDialog";
+
+export const activeConfirmDialogAtom = atom<"clearCanvas" | null>(null);
+
+export const ActiveConfirmDialog = () => {
+ const [activeConfirmDialog, setActiveConfirmDialog] = useAtom(
+ activeConfirmDialogAtom,
+ );
+ const actionManager = useExcalidrawActionManager();
+
+ if (!activeConfirmDialog) {
+ return null;
+ }
+
+ if (activeConfirmDialog === "clearCanvas") {
+ return (
+ {t("alerts.clearReset")}
+
+
+
+ Generating...
+ `);
+ },
+ } as const;
+ } else {
+ let message: string;
+ if (data.code === "ERR_GENERATION_INTERRUPTED") {
+ message = "Generation was interrupted...";
+ } else {
+ message = data.message || "Generation failed";
+ }
+ src = {
+ intrinsicSize: { w: el.width, h: el.height },
+ type: "document",
+ srcdoc: () => {
+ return createSrcDoc(`
+
+ Error!
+${message}
+ `); + }, + } as const; + } + } else { + src = getEmbedLink(toValidURL(el.link || "")); + } + + const isActive = + this.state.activeEmbeddable?.element === el && + this.state.activeEmbeddable?.state === "active"; + const isHovered = + this.state.activeEmbeddable?.element === el && + this.state.activeEmbeddable?.state === "hover"; + + return ( +
+
{
+ if (!this.excalidrawContainerRef.current) {
+ return;
+ }
+ const container = this.excalidrawContainerRef.current;
+ const sh = container.scrollHeight;
+ const ch = container.clientHeight;
+ if (sh !== ch) {
+ container.style.height = `${sh}px`;
+ setTimeout(() => {
+ container.style.height = `100%`;
+ });
+ }
+ }}*/
+ className="excalidraw__embeddable-container__inner"
+ style={{
+ width: isVisible ? `${el.width}px` : 0,
+ height: isVisible ? `${el.height}px` : 0,
+ transform: isVisible ? `rotate(${el.angle}rad)` : "none",
+ pointerEvents: isActive
+ ? POINTER_EVENTS.enabled
+ : POINTER_EVENTS.disabled,
+ }}
+ >
+ {isHovered && (
+
+ {t("buttons.embeddableInteractionButton")}
+
+ )}
+
+ {(isEmbeddableElement(el)
+ ? this.props.renderEmbeddable?.(el, this.state)
+ : null) ?? (
+