|
@@ -737,11 +737,16 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
|
|
this.scene.addCallback(this.onSceneUpdated);
|
|
|
this.addEventListeners();
|
|
|
|
|
|
- // optim to avoid extra render on init
|
|
|
- if (
|
|
|
+ const searchParams = new URLSearchParams(window.location.search.slice(1));
|
|
|
+
|
|
|
+ if (searchParams.has("web-share-target")) {
|
|
|
+ // Obtain a file that was shared via the Web Share Target API.
|
|
|
+ this.restoreFileFromShare();
|
|
|
+ } else if (
|
|
|
typeof this.props.offsetLeft === "number" &&
|
|
|
typeof this.props.offsetTop === "number"
|
|
|
) {
|
|
|
+ // Optimization to avoid extra render on init.
|
|
|
this.initializeScene();
|
|
|
} else {
|
|
|
this.setState(this.getCanvasOffsets(this.props), () => {
|
|
@@ -1278,6 +1283,22 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
|
|
this.setState({ toastMessage: null });
|
|
|
};
|
|
|
|
|
|
+ restoreFileFromShare = async () => {
|
|
|
+ try {
|
|
|
+ const webShareTargetCache = await caches.open("web-share-target");
|
|
|
+
|
|
|
+ const file = await webShareTargetCache.match("shared-file");
|
|
|
+ if (file) {
|
|
|
+ const blob = await file.blob();
|
|
|
+ this.loadFileToCanvas(blob);
|
|
|
+ await webShareTargetCache.delete("shared-file");
|
|
|
+ window.history.replaceState(null, APP_NAME, window.location.pathname);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.setState({ errorMessage: error.message });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
public updateScene = withBatchedUpdates((sceneData: SceneData) => {
|
|
|
if (sceneData.commitToHistory) {
|
|
|
history.resumeRecording();
|
|
@@ -3576,20 +3597,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
|
|
console.warn(error.name, error.message);
|
|
|
}
|
|
|
}
|
|
|
- loadFromBlob(file, this.state)
|
|
|
- .then(({ elements, appState }) =>
|
|
|
- this.syncActionResult({
|
|
|
- elements,
|
|
|
- appState: {
|
|
|
- ...(appState || this.state),
|
|
|
- isLoading: false,
|
|
|
- },
|
|
|
- commitToHistory: true,
|
|
|
- }),
|
|
|
- )
|
|
|
- .catch((error) => {
|
|
|
- this.setState({ isLoading: false, errorMessage: error.message });
|
|
|
- });
|
|
|
+ this.loadFileToCanvas(file);
|
|
|
} else if (
|
|
|
file?.type === MIME_TYPES.excalidrawlib ||
|
|
|
file?.name.endsWith(".excalidrawlib")
|
|
@@ -3609,6 +3617,23 @@ class App extends React.Component<ExcalidrawProps, AppState> {
|
|
|
}
|
|
|
};
|
|
|
|
|
|
+ loadFileToCanvas = (file: Blob) => {
|
|
|
+ loadFromBlob(file, this.state)
|
|
|
+ .then(({ elements, appState }) =>
|
|
|
+ this.syncActionResult({
|
|
|
+ elements,
|
|
|
+ appState: {
|
|
|
+ ...(appState || this.state),
|
|
|
+ isLoading: false,
|
|
|
+ },
|
|
|
+ commitToHistory: true,
|
|
|
+ }),
|
|
|
+ )
|
|
|
+ .catch((error) => {
|
|
|
+ this.setState({ isLoading: false, errorMessage: error.message });
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
private handleCanvasContextMenu = (
|
|
|
event: React.PointerEvent<HTMLCanvasElement>,
|
|
|
) => {
|