+
+ {excalidrawAPI?.getEditorInterface().formFactor === "desktop" && (
+
setShareDialogState({ isOpen: true, type: "share" })
}
+ editorInterface={editorInterface}
/>
);
@@ -908,10 +1020,15 @@ const ExcalidrawWrapper = () => {
{isCollaborating && isOffline && (
-
+
{t("alerts.collabOfflineWarning")}
)}
+ {localStorageQuotaExceeded && (
+
+ {t("alerts.localStorageQuotaExceeded")}
+
+ )}
{latestShareableLink && (
{
}}
/>
+ setErrorMessage("")}>
{errorMessage}
@@ -1157,7 +1276,9 @@ const ExcalidrawApp = () => {
return (
-
+
);
diff --git a/excalidraw-app/app_constants.ts b/excalidraw-app/app_constants.ts
index 1dc6c6f462..e4370e7986 100644
--- a/excalidraw-app/app_constants.ts
+++ b/excalidraw-app/app_constants.ts
@@ -8,7 +8,8 @@ export const SYNC_BROWSER_TABS_TIMEOUT = 50;
export const CURSOR_SYNC_TIMEOUT = 33; // ~30fps
export const DELETED_ELEMENT_TIMEOUT = 24 * 60 * 60 * 1000; // 1 day
-export const FILE_UPLOAD_MAX_BYTES = 3 * 1024 * 1024; // 3 MiB
+// should be aligned with MAX_ALLOWED_FILE_BYTES
+export const FILE_UPLOAD_MAX_BYTES = 4 * 1024 * 1024; // 4 MiB
// 1 year (https://stackoverflow.com/a/25201898/927631)
export const FILE_CACHE_MAX_AGE_SEC = 31536000;
@@ -45,6 +46,7 @@ export const STORAGE_KEYS = {
VERSION_FILES: "version-files",
IDB_LIBRARY: "excalidraw-library",
+ IDB_TTD_CHATS: "excalidraw-ttd-chats",
// do not use apart from migrations
__LEGACY_LOCAL_STORAGE_LIBRARY: "excalidraw-library",
diff --git a/excalidraw-app/collab/Collab.tsx b/excalidraw-app/collab/Collab.tsx
index bed130e24a..622f92fb5e 100644
--- a/excalidraw-app/collab/Collab.tsx
+++ b/excalidraw-app/collab/Collab.tsx
@@ -6,7 +6,7 @@ import {
reconcileElements,
} from "@excalidraw/excalidraw";
import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, EVENT } from "@excalidraw/common";
+import { APP_NAME, cloneJSON, EVENT, toBrandedType } from "@excalidraw/common";
import {
IDLE_THRESHOLD,
ACTIVE_THRESHOLD,
@@ -29,6 +29,8 @@ import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
import throttle from "lodash.throttle";
import { PureComponent } from "react";
+import { bumpElementVersions } from "@excalidraw/excalidraw/data/restore";
+
import type {
ReconciledExcalidrawElement,
RemoteExcalidrawElement,
@@ -70,6 +72,7 @@ import {
FileManager,
updateStaleImageStatuses,
} from "../data/FileManager";
+import { FileStatusStore } from "../data/fileStatusStore";
import { LocalData } from "../data/LocalData";
import {
isSavedToFirebase,
@@ -147,6 +150,7 @@ class Collab extends PureComponent {
};
this.portal = new Portal(this);
this.fileManager = new FileManager({
+ onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore),
getFiles: async (fileIds) => {
const { roomId, roomKey } = this.portal;
if (!roomId || !roomKey) {
@@ -311,6 +315,7 @@ class Collab extends PureComponent {
saveCollabRoomToFirebase = async (
syncableElements: readonly SyncableExcalidrawElement[],
) => {
+ syncableElements = cloneJSON(syncableElements);
try {
const storedElements = await saveToFirebase(
this.portal,
@@ -441,7 +446,7 @@ class Collab extends PureComponent {
};
private decryptPayload = async (
- iv: Uint8Array,
+ iv: Uint8Array,
encryptedData: ArrayBuffer,
decryptionKey: string,
): Promise> => {
@@ -530,7 +535,10 @@ class Collab extends PureComponent {
return null;
}
- if (!existingRoomLinkData) {
+ if (existingRoomLinkData) {
+ // when joining existing room, don't merge it with current scene data
+ this.excalidrawAPI.resetScene();
+ } else {
const elements = this.excalidrawAPI.getSceneElements().map((element) => {
if (isImageElement(element) && element.status === "saved") {
return newElementWith(element, { status: "pending" });
@@ -559,7 +567,7 @@ class Collab extends PureComponent {
// All socket listeners are moving to Portal
this.portal.socket.on(
"client-broadcast",
- async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
+ async (encryptedData: ArrayBuffer, iv: Uint8Array) => {
if (!this.portal.roomKey) {
return;
}
@@ -576,7 +584,9 @@ class Collab extends PureComponent {
case WS_SUBTYPES.INIT: {
if (!this.portal.socketInitialized) {
this.initializeRoom({ fetchScene: false });
- const remoteElements = decryptedData.payload.elements;
+ const remoteElements = toBrandedType<
+ readonly RemoteExcalidrawElement[]
+ >(decryptedData.payload.elements);
const reconciledElements =
this._reconcileElements(remoteElements);
this.handleRemoteSceneUpdate(reconciledElements);
@@ -590,7 +600,11 @@ class Collab extends PureComponent {
}
case WS_SUBTYPES.UPDATE:
this.handleRemoteSceneUpdate(
- this._reconcileElements(decryptedData.payload.elements),
+ this._reconcileElements(
+ toBrandedType(
+ decryptedData.payload.elements,
+ ),
+ ),
);
break;
case WS_SUBTYPES.MOUSE_LOCATION: {
@@ -739,17 +753,28 @@ class Collab extends PureComponent {
};
private _reconcileElements = (
- remoteElements: readonly ExcalidrawElement[],
+ remoteElements: readonly RemoteExcalidrawElement[],
): ReconciledExcalidrawElement[] => {
- const localElements = this.getSceneElementsIncludingDeleted();
const appState = this.excalidrawAPI.getAppState();
- const restoredRemoteElements = restoreElements(remoteElements, null);
- const reconciledElements = reconcileElements(
- localElements,
- restoredRemoteElements as RemoteExcalidrawElement[],
+
+ const existingElements = this.getSceneElementsIncludingDeleted();
+
+ // NOTE ideally we restore _after_ reconciliation but we can't do that
+ // as we'd regenerate even elements such as appState.newElement which would
+ // break the state
+ remoteElements = restoreElements(remoteElements, existingElements);
+
+ let reconciledElements = reconcileElements(
+ existingElements,
+ remoteElements,
appState,
);
+ reconciledElements = bumpElementVersions(
+ reconciledElements,
+ existingElements,
+ );
+
// Avoid broadcasting to the rest of the collaborators the scene
// we just received!
// Note: this needs to be set before updating the scene as it
diff --git a/excalidraw-app/components/AI.tsx b/excalidraw-app/components/AI.tsx
index 9a222a968e..546cfa18dc 100644
--- a/excalidraw-app/components/AI.tsx
+++ b/excalidraw-app/components/AI.tsx
@@ -4,12 +4,15 @@ import {
getTextFromElements,
MIME_TYPES,
TTDDialog,
+ TTDStreamFetch,
} from "@excalidraw/excalidraw";
import { getDataURL } from "@excalidraw/excalidraw/data/blob";
import { safelyParseJSON } from "@excalidraw/common";
import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import { TTDIndexedDBAdapter } from "../data/TTDStorage";
+
export const AIComponents = ({
excalidrawAPI,
}: {
@@ -99,61 +102,23 @@ export const AIComponents = ({
/>
{
- try {
- const response = await fetch(
- `${
- import.meta.env.VITE_APP_AI_BACKEND
- }/v1/ai/text-to-diagram/generate`,
- {
- method: "POST",
- headers: {
- Accept: "application/json",
- "Content-Type": "application/json",
- },
- body: JSON.stringify({ prompt: input }),
- },
- );
+ onTextSubmit={async (props) => {
+ const { onChunk, onStreamCreated, signal, messages } = props;
- const rateLimit = response.headers.has("X-Ratelimit-Limit")
- ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
- : undefined;
+ const result = await TTDStreamFetch({
+ url: `${
+ import.meta.env.VITE_APP_AI_BACKEND
+ }/v1/ai/text-to-diagram/chat-streaming`,
+ messages,
+ onChunk,
+ onStreamCreated,
+ extractRateLimits: true,
+ signal,
+ });
- const rateLimitRemaining = response.headers.has(
- "X-Ratelimit-Remaining",
- )
- ? parseInt(
- response.headers.get("X-Ratelimit-Remaining") || "0",
- 10,
- )
- : undefined;
-
- const json = await response.json();
-
- if (!response.ok) {
- if (response.status === 429) {
- return {
- rateLimit,
- rateLimitRemaining,
- error: new Error(
- "Too many requests today, please try again tomorrow!",
- ),
- };
- }
-
- throw new Error(json.message || "Generation failed...");
- }
-
- const generatedResponse = json.generatedResponse;
- if (!generatedResponse) {
- throw new Error("Generation failed...");
- }
-
- return { generatedResponse, rateLimit, rateLimitRemaining };
- } catch (err: any) {
- throw new Error("Request failed");
- }
+ return result;
}}
+ persistenceAdapter={TTDIndexedDBAdapter}
/>
);
diff --git a/excalidraw-app/components/AppFooter.tsx b/excalidraw-app/components/AppFooter.tsx
index 7d42d46bf8..5e2cb27cb3 100644
--- a/excalidraw-app/components/AppFooter.tsx
+++ b/excalidraw-app/components/AppFooter.tsx
@@ -5,7 +5,6 @@ import { isExcalidrawPlusSignedUser } from "../app_constants";
import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";
import { EncryptedIcon } from "./EncryptedIcon";
-import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
export const AppFooter = React.memo(
({ onChange }: { onChange: () => void }) => {
@@ -19,11 +18,7 @@ export const AppFooter = React.memo(
}}
>
{isVisualDebuggerEnabled() &&
);
diff --git a/excalidraw-app/components/AppMainMenu.tsx b/excalidraw-app/components/AppMainMenu.tsx
index cd0aca2683..a3f847385f 100644
--- a/excalidraw-app/components/AppMainMenu.tsx
+++ b/excalidraw-app/components/AppMainMenu.tsx
@@ -62,7 +62,7 @@ export const AppMainMenu: React.FC<{
{isDevEnv() && (
{
+ onSelect={() => {
if (window.visualDebug) {
delete window.visualDebug;
saveDebugState({ enabled: false });
@@ -77,6 +77,7 @@ export const AppMainMenu: React.FC<{
)}
+
{
+ const { theme, openSidebar } = useUIAppState();
+
+ return (
+
+
+
+ {messageCircleIcon}
+
+
+ {presentationIcon}
+
+
+
+
+
+
+ Make comments with Excalidraw+
+
+
+ Sign up now
+
+
+
+
+
+
+ Create presentations with Excalidraw+
+
+
+ Sign up now
+
+
+
+ );
+};
diff --git a/excalidraw-app/components/AppWelcomeScreen.tsx b/excalidraw-app/components/AppWelcomeScreen.tsx
index 5bb5073e9c..903af7a5f7 100644
--- a/excalidraw-app/components/AppWelcomeScreen.tsx
+++ b/excalidraw-app/components/AppWelcomeScreen.tsx
@@ -33,7 +33,15 @@ export const AppWelcomeScreen: React.FC<{
return bit;
});
} else {
- headingContent = t("welcomeScreen.app.center_heading");
+ headingContent = (
+ <>
+ {t("welcomeScreen.app.center_heading")}
+
- Go to Excalidraw+
-
- );
-};
diff --git a/excalidraw-app/components/ExcalidrawPlusPromoBanner.tsx b/excalidraw-app/components/ExcalidrawPlusPromoBanner.tsx
new file mode 100644
index 0000000000..8cd0aa1ef9
--- /dev/null
+++ b/excalidraw-app/components/ExcalidrawPlusPromoBanner.tsx
@@ -0,0 +1,22 @@
+export const ExcalidrawPlusPromoBanner = ({
+ isSignedIn,
+}: {
+ isSignedIn: boolean;
+}) => {
+ return (
+
+ Excalidraw+
+
+ );
+};
diff --git a/excalidraw-app/components/GitHubCorner.tsx b/excalidraw-app/components/GitHubCorner.tsx
deleted file mode 100644
index 6a4108813c..0000000000
--- a/excalidraw-app/components/GitHubCorner.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { THEME } from "@excalidraw/common";
-import oc from "open-color";
-import React from "react";
-
-import type { Theme } from "@excalidraw/element/types";
-
-// https://github.com/tholman/github-corners
-export const GitHubCorner = React.memo(
- ({ theme, dir }: { theme: Theme; dir: string }) => (
-
-
-
-
- ),
-);
diff --git a/excalidraw-app/data/FileManager.ts b/excalidraw-app/data/FileManager.ts
index 435d813252..849e47bc92 100644
--- a/excalidraw-app/data/FileManager.ts
+++ b/excalidraw-app/data/FileManager.ts
@@ -40,10 +40,12 @@ export class FileManager {
private _getFiles;
private _saveFiles;
+ private _onFileStatusChange;
constructor({
getFiles,
saveFiles,
+ onFileStatusChange,
}: {
getFiles: (fileIds: FileId[]) => Promise<{
loadedFiles: BinaryFileData[];
@@ -53,9 +55,13 @@ export class FileManager {
savedFiles: Map;
erroredFiles: Map;
}>;
+ onFileStatusChange?: (
+ updates: Array<[FileId, "loading" | "loaded" | "error"]>,
+ ) => void;
}) {
this._getFiles = getFiles;
this._saveFiles = saveFiles;
+ this._onFileStatusChange = onFileStatusChange;
}
/**
@@ -146,6 +152,8 @@ export class FileManager {
this.fetchingFiles.set(id, true);
}
+ this._onFileStatusChange?.(ids.map((id) => [id, "loading"]));
+
try {
const { loadedFiles, erroredFiles } = await this._getFiles(ids);
@@ -156,6 +164,13 @@ export class FileManager {
this.erroredFiles_fetch.set(fileId, true);
}
+ this._onFileStatusChange?.([
+ ...loadedFiles.map((f) => [f.id, "loaded"] as [FileId, "loaded"]),
+ ...[...erroredFiles.keys()].map(
+ (id) => [id, "error"] as [FileId, "error"],
+ ),
+ ]);
+
return { loadedFiles, erroredFiles };
} finally {
for (const id of ids) {
@@ -195,6 +210,13 @@ export class FileManager {
};
reset() {
+ if (this._onFileStatusChange && this.fetchingFiles.size) {
+ this._onFileStatusChange(
+ [...this.fetchingFiles.keys()].map(
+ (id) => [id, "error"] as [FileId, "error"],
+ ),
+ );
+ }
this.fetchingFiles.clear();
this.savingFiles.clear();
this.savedFiles.clear();
diff --git a/excalidraw-app/data/LocalData.ts b/excalidraw-app/data/LocalData.ts
index 9ad6dc9256..634fdc4f1c 100644
--- a/excalidraw-app/data/LocalData.ts
+++ b/excalidraw-app/data/LocalData.ts
@@ -16,7 +16,6 @@ import {
DEFAULT_SIDEBAR,
debounce,
} from "@excalidraw/common";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
import {
createStore,
entries,
@@ -27,6 +26,9 @@ import {
get,
} from "idb-keyval";
+import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
+import { getNonDeletedElements } from "@excalidraw/element";
+
import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
import type { ExcalidrawElement, FileId } from "@excalidraw/element/types";
@@ -40,11 +42,14 @@ import type { MaybePromise } from "@excalidraw/common/utility-types";
import { SAVE_TO_LOCAL_STORAGE_TIMEOUT, STORAGE_KEYS } from "../app_constants";
import { FileManager } from "./FileManager";
+import { FileStatusStore } from "./fileStatusStore";
import { Locker } from "./Locker";
import { updateBrowserStateVersion } from "./tabSync";
const filesStore = createStore("files-db", "files-store");
+export const localStorageQuotaExceededAtom = atom(false);
+
class LocalFileManager extends FileManager {
clearObsoleteFiles = async (opts: { currentFileIds: FileId[] }) => {
await entries(filesStore).then((entries) => {
@@ -69,6 +74,9 @@ const saveDataStateToLocalStorage = (
elements: readonly ExcalidrawElement[],
appState: AppState,
) => {
+ const localStorageQuotaExceeded = appJotaiStore.get(
+ localStorageQuotaExceededAtom,
+ );
try {
const _appState = clearAppStateForLocalStorage(appState);
@@ -81,19 +89,29 @@ const saveDataStateToLocalStorage = (
localStorage.setItem(
STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
- JSON.stringify(clearElementsForLocalStorage(elements)),
+ JSON.stringify(getNonDeletedElements(elements)),
);
localStorage.setItem(
STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
JSON.stringify(_appState),
);
updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
+ if (localStorageQuotaExceeded) {
+ appJotaiStore.set(localStorageQuotaExceededAtom, false);
+ }
} catch (error: any) {
// Unable to access window.localStorage
console.error(error);
+ if (isQuotaExceededError(error) && !localStorageQuotaExceeded) {
+ appJotaiStore.set(localStorageQuotaExceededAtom, true);
+ }
}
};
+const isQuotaExceededError = (error: any) => {
+ return error instanceof DOMException && error.name === "QuotaExceededError";
+};
+
type SavingLockTypes = "collaboration";
export class LocalData {
@@ -149,6 +167,7 @@ export class LocalData {
// ---------------------------------------------------------------------------
static fileStorage = new LocalFileManager({
+ onFileStatusChange: FileStatusStore.updateStatuses.bind(FileStatusStore),
getFiles(ids) {
return getMany(ids, filesStore).then(
async (filesData: (BinaryFileData | undefined)[]) => {
diff --git a/excalidraw-app/data/TTDStorage.ts b/excalidraw-app/data/TTDStorage.ts
new file mode 100644
index 0000000000..d7fe5d89e7
--- /dev/null
+++ b/excalidraw-app/data/TTDStorage.ts
@@ -0,0 +1,51 @@
+import { createStore, get, set } from "idb-keyval";
+
+import type { SavedChats } from "@excalidraw/excalidraw/components/TTDDialog/types";
+
+import { STORAGE_KEYS } from "../app_constants";
+
+/**
+ * IndexedDB adapter for TTD chat storage.
+ * Implements TTDPersistenceAdapter interface.
+ */
+export class TTDIndexedDBAdapter {
+ /** IndexedDB database name */
+ private static idb_name = STORAGE_KEYS.IDB_TTD_CHATS;
+ /** Store key for chat data */
+ private static key = "ttdChats";
+
+ private static store = createStore(
+ `${TTDIndexedDBAdapter.idb_name}-db`,
+ `${TTDIndexedDBAdapter.idb_name}-store`,
+ );
+
+ /**
+ * Load saved chats from IndexedDB.
+ * @returns Promise resolving to saved chats array (empty if none found)
+ */
+ static async loadChats(): Promise {
+ try {
+ const data = await get(
+ TTDIndexedDBAdapter.key,
+ TTDIndexedDBAdapter.store,
+ );
+ return data || [];
+ } catch (error) {
+ console.warn("Failed to load TTD chats from IndexedDB:", error);
+ return [];
+ }
+ }
+
+ /**
+ * Save chats to IndexedDB.
+ * @param chats - The chats array to persist
+ */
+ static async saveChats(chats: SavedChats): Promise {
+ try {
+ await set(TTDIndexedDBAdapter.key, chats, TTDIndexedDBAdapter.store);
+ } catch (error) {
+ console.warn("Failed to save TTD chats to IndexedDB:", error);
+ throw error;
+ }
+ }
+}
diff --git a/excalidraw-app/data/fileStatusStore.ts b/excalidraw-app/data/fileStatusStore.ts
new file mode 100644
index 0000000000..ff9363ed5d
--- /dev/null
+++ b/excalidraw-app/data/fileStatusStore.ts
@@ -0,0 +1,48 @@
+import { VersionedSnapshotStore } from "@excalidraw/common";
+
+import type { FileId } from "@excalidraw/element/types";
+
+export type FileLoadingStatus = "loading" | "loaded" | "error";
+
+export class FileStatusStore {
+ private static store = new VersionedSnapshotStore<
+ Map
+ >(new Map());
+
+ static getSnapshot() {
+ return this.store.getSnapshot();
+ }
+
+ static pull(sinceVersion?: number) {
+ return this.store.pull(sinceVersion);
+ }
+
+ static updateStatuses(updates: Array<[FileId, FileLoadingStatus]>) {
+ if (!updates.length) {
+ return;
+ }
+ this.store.update((prev) => {
+ let changed = false;
+ const next = new Map(prev);
+ for (const [id, status] of updates) {
+ if (next.get(id) !== status) {
+ next.set(id, status);
+ changed = true;
+ }
+ }
+ return changed ? next : prev;
+ });
+ }
+
+ static getPendingCount(statuses: Map) {
+ let pending = 0;
+ let total = 0;
+ for (const status of statuses.values()) {
+ total++;
+ if (status === "loading") {
+ pending++;
+ }
+ }
+ return { pending, total };
+ }
+}
diff --git a/excalidraw-app/data/firebase.ts b/excalidraw-app/data/firebase.ts
index 568054f7ef..11177d90aa 100644
--- a/excalidraw-app/data/firebase.ts
+++ b/excalidraw-app/data/firebase.ts
@@ -1,5 +1,5 @@
import { reconcileElements } from "@excalidraw/excalidraw";
-import { MIME_TYPES } from "@excalidraw/common";
+import { MIME_TYPES, toBrandedType } from "@excalidraw/common";
import { decompressData } from "@excalidraw/excalidraw/data/encode";
import {
encryptData,
@@ -105,8 +105,8 @@ const decryptElements = async (
data: FirebaseStoredScene,
roomKey: string,
): Promise => {
- const ciphertext = data.ciphertext.toUint8Array();
- const iv = data.iv.toUint8Array();
+ const ciphertext = data.ciphertext.toUint8Array() as Uint8Array;
+ const iv = data.iv.toUint8Array() as Uint8Array;
const decrypted = await decryptData(iv, ciphertext, roomKey);
const decodedData = new TextDecoder("utf-8").decode(
@@ -243,7 +243,7 @@ export const saveToFirebase = async (
FirebaseSceneVersionCache.set(socket, storedElements);
- return storedElements;
+ return toBrandedType(storedElements);
};
export const loadFromFirebase = async (
@@ -259,7 +259,9 @@ export const loadFromFirebase = async (
}
const storedScene = docSnap.data() as FirebaseStoredScene;
const elements = getSyncableElements(
- restoreElements(await decryptElements(storedScene, roomKey), null),
+ restoreElements(await decryptElements(storedScene, roomKey), null, {
+ deleteInvisibleElements: true,
+ }),
);
if (socket) {
diff --git a/excalidraw-app/data/index.ts b/excalidraw-app/data/index.ts
index 75aa278779..bf765941a2 100644
--- a/excalidraw-app/data/index.ts
+++ b/excalidraw-app/data/index.ts
@@ -8,7 +8,6 @@ import {
IV_LENGTH_BYTES,
} from "@excalidraw/excalidraw/data/encryption";
import { serializeAsJSON } from "@excalidraw/excalidraw/data/json";
-import { restore } from "@excalidraw/excalidraw/data/restore";
import { isInvisiblySmallElement } from "@excalidraw/element";
import { isInitializedImageElement } from "@excalidraw/element";
import { t } from "@excalidraw/excalidraw/i18n";
@@ -84,13 +83,13 @@ export type SocketUpdateDataSource = {
SCENE_INIT: {
type: WS_SUBTYPES.INIT;
payload: {
- elements: readonly ExcalidrawElement[];
+ elements: readonly OrderedExcalidrawElement[];
};
};
SCENE_UPDATE: {
type: WS_SUBTYPES.UPDATE;
payload: {
- elements: readonly ExcalidrawElement[];
+ elements: readonly OrderedExcalidrawElement[];
};
};
MOUSE_LOCATION: {
@@ -200,7 +199,7 @@ const legacy_decodeFromBackend = async ({
};
};
-const importFromBackend = async (
+export const importFromBackend = async (
id: string,
decryptionKey: string,
): Promise => {
@@ -242,40 +241,6 @@ const importFromBackend = async (
}
};
-export const loadScene = async (
- id: string | null,
- privateKey: string | null,
- // Supply local state even if importing from backend to ensure we restore
- // localStorage user settings which we do not persist on server.
- // Non-optional so we don't forget to pass it even if `undefined`.
- localDataState: ImportedDataState | undefined | null,
-) => {
- let data;
- if (id != null && privateKey != null) {
- // the private key is used to decrypt the content from the server, take
- // extra care not to leak it
- data = restore(
- await importFromBackend(id, privateKey),
- localDataState?.appState,
- localDataState?.elements,
- { repairBindings: true, refreshDimensions: false },
- );
- } else {
- data = restore(localDataState || null, null, null, {
- repairBindings: true,
- });
- }
-
- return {
- elements: data.elements,
- appState: data.appState,
- // note: this will always be empty because we're not storing files
- // in the scene database/localStorage, and instead fetch them async
- // from a different database
- files: data.files,
- };
-};
-
type ExportToBackendResult =
| { url: null; errorMessage: string }
| { url: string; errorMessage: null };
diff --git a/excalidraw-app/data/localStorage.ts b/excalidraw-app/data/localStorage.ts
index bc0df4a678..28c166cd74 100644
--- a/excalidraw-app/data/localStorage.ts
+++ b/excalidraw-app/data/localStorage.ts
@@ -2,7 +2,6 @@ import {
clearAppStateForLocalStorage,
getDefaultAppState,
} from "@excalidraw/excalidraw/appState";
-import { clearElementsForLocalStorage } from "@excalidraw/element";
import type { ExcalidrawElement } from "@excalidraw/element/types";
import type { AppState } from "@excalidraw/excalidraw/types";
@@ -50,7 +49,7 @@ export const importFromLocalStorage = () => {
let elements: ExcalidrawElement[] = [];
if (savedElements) {
try {
- elements = clearElementsForLocalStorage(JSON.parse(savedElements));
+ elements = JSON.parse(savedElements);
} catch (error: any) {
console.error(error);
// Do nothing because elements array is already empty
diff --git a/excalidraw-app/index.html b/excalidraw-app/index.html
index 750824c585..1c29d7220a 100644
--- a/excalidraw-app/index.html
+++ b/excalidraw-app/index.html
@@ -2,7 +2,7 @@
Excalidraw | Hand-drawn look & feel • Collaborative • Secure
+ Excalidraw Whiteboard
(
+ "FeatureFlags",
+ );
+if (flagsIntegration) {
+ flagsIntegration.addFeatureFlag(
+ "COMPLEX_BINDINGS",
+ getFeatureFlag("COMPLEX_BINDINGS"),
+ );
+}
diff --git a/excalidraw-app/share/QRCode.tsx b/excalidraw-app/share/QRCode.tsx
new file mode 100644
index 0000000000..4418328319
--- /dev/null
+++ b/excalidraw-app/share/QRCode.tsx
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import Spinner from "@excalidraw/excalidraw/components/Spinner";
+
+interface QRCodeProps {
+ value: string;
+}
+
+export const QRCode = ({ value }: QRCodeProps) => {
+ const [svgData, setSvgData] = useState(null);
+ const [error, setError] = useState(false);
+
+ useEffect(() => {
+ let mounted = true;
+
+ import("./qrcode.chunk")
+ .then(({ generateQRCodeSVG }) => {
+ if (mounted) {
+ try {
+ setSvgData(generateQRCodeSVG(value));
+ } catch {
+ setError(true);
+ }
+ }
+ })
+ .catch(() => {
+ if (mounted) {
+ setError(true);
+ }
+ });
+
+ return () => {
+ mounted = false;
+ };
+ }, [value]);
+
+ if (error) {
+ return null;
+ }
+
+ if (!svgData) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ );
+};
diff --git a/excalidraw-app/share/ShareDialog.scss b/excalidraw-app/share/ShareDialog.scss
index 436f411248..169cc03bd1 100644
--- a/excalidraw-app/share/ShareDialog.scss
+++ b/excalidraw-app/share/ShareDialog.scss
@@ -140,6 +140,31 @@
gap: 0.75rem;
}
+ &__qrcode {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ align-self: center;
+ padding: 1rem;
+ background: #fff;
+ border-radius: 0.5rem;
+ border: 1px solid #e0e0e0;
+
+ $size: 150px;
+ width: $size;
+ height: $size;
+
+ & svg {
+ width: $size;
+ height: $size;
+ }
+
+ &--loading {
+ background: var(--island-bg-color);
+ border: 1px solid var(--dialog-border-color);
+ }
+ }
+
&__description {
border-top: 1px solid var(--color-gray-20);
diff --git a/excalidraw-app/share/ShareDialog.tsx b/excalidraw-app/share/ShareDialog.tsx
index 884d64680d..051393910a 100644
--- a/excalidraw-app/share/ShareDialog.tsx
+++ b/excalidraw-app/share/ShareDialog.tsx
@@ -22,6 +22,7 @@ import { atom, useAtom, useAtomValue } from "../app-jotai";
import { activeRoomLinkAtom } from "../collab/Collab";
import "./ShareDialog.scss";
+import { QRCode } from "./QRCode";
import type { CollabAPI } from "../collab/Collab";
@@ -142,6 +143,7 @@ const ActiveRoomDialog = ({
}}
/>
{
+ return renderSVG(text);
+};
diff --git a/excalidraw-app/tests/MobileMenu.test.tsx b/excalidraw-app/tests/MobileMenu.test.tsx
index 3b05e72968..70f2162f9b 100644
--- a/excalidraw-app/tests/MobileMenu.test.tsx
+++ b/excalidraw-app/tests/MobileMenu.test.tsx
@@ -17,30 +17,15 @@ describe("Test MobileMenu", () => {
beforeEach(async () => {
await render(
- All your data is saved locally in your browser.
+ Your drawings are saved in your browser's storage.
+
-
+ 
-
+ 
-
+ 
-
+ 
- 
-
+ 
-
+