From 30ae4b8bf2257e12ab36bac68930f608e442f44b Mon Sep 17 00:00:00 2001 From: David Luzar Date: Fri, 26 Mar 2021 18:32:38 +0100 Subject: [PATCH] feat: don't unnecessarily prompt when installing libraries (#3329) --- src/components/App.tsx | 3 ++- src/components/LayerUI.tsx | 2 +- src/data/library.ts | 2 ++ src/excalidraw-app/index.tsx | 7 +++---- src/packages/excalidraw/CHANGELOG.md | 1 + src/packages/excalidraw/README.md | 2 +- 6 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/App.tsx b/src/components/App.tsx index a8d2442d..8340e193 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -609,7 +609,7 @@ class App extends React.Component { this.onSceneUpdated(); }; - private importLibraryFromUrl = async (url: string) => { + private importLibraryFromUrl = async (url: string, token?: string | null) => { if (window.location.hash.includes(URL_HASH_KEYS.addLibrary)) { const hash = new URLSearchParams(window.location.hash.slice(1)); hash.delete(URL_HASH_KEYS.addLibrary); @@ -628,6 +628,7 @@ class App extends React.Component { throw new Error(); } if ( + token === Library.csrfToken || window.confirm( t("alerts.confirmAddLibrary", { numShapes: json.library.length }), ) diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 9e03f9bb..32b8fac5 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -179,7 +179,7 @@ const LibraryMenuItems = ({ {t("labels.libraries")} diff --git a/src/data/library.ts b/src/data/library.ts index 4f5c11a8..665881c3 100644 --- a/src/data/library.ts +++ b/src/data/library.ts @@ -4,9 +4,11 @@ import { restoreElements } from "./restore"; import { STORAGE_KEYS } from "../constants"; import { getNonDeletedElements } from "../element"; import { NonDeleted, ExcalidrawElement } from "../element/types"; +import { nanoid } from "nanoid"; export class Library { private static libraryCache: LibraryItems | null = null; + public static csrfToken = nanoid(); static resetLibrary = () => { Library.libraryCache = null; diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index d0ddc5ae..31fbeb81 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -221,16 +221,15 @@ function ExcalidrawWrapper() { const onHashChange = (event: HashChangeEvent) => { event.preventDefault(); - const libraryUrl = new URLSearchParams(window.location.hash.slice(1)).get( - URL_HASH_KEYS.addLibrary, - ); + const hash = new URLSearchParams(window.location.hash.slice(1)); + const libraryUrl = hash.get(URL_HASH_KEYS.addLibrary); if (libraryUrl) { // If hash changed and it contains library url, import it and replace // the url to its previous state (important in case of collaboration // and similar). // Using history API won't trigger another hashchange. window.history.replaceState({}, "", event.oldURL); - excalidrawAPI.importLibrary(libraryUrl); + excalidrawAPI.importLibrary(libraryUrl, hash.get("token")); } else { initializeScene({ collabAPI }).then((scene) => { if (scene) { diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 3f89c14d..072ed8ec 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -18,6 +18,7 @@ Please add the latest change on the top under the correct section. ### Features +- Support passing a CSRF token when importing libraries to prevent prompting before installation. The token is passed from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/) using the `token` URL key [#3329](https://github.com/excalidraw/excalidraw/pull/3329). - #### BREAKING CHANGE Use `location.hash` when importing libraries to fix installation issues. This will require host apps to add a `hashchange` listener and call the newly exposed `excalidrawAPI.importLibrary(url)` API when applicable [#3320](https://github.com/excalidraw/excalidraw/pull/3320). - Append `location.pathname` to `libraryReturnUrl` default url [#3325](https://github.com/excalidraw/excalidraw/pull/3325). diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 7dd4e132..bdc8806b 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -473,7 +473,7 @@ You can pass a `ref` when you want to access some excalidraw APIs. We expose the | history | `{ clear: () => void }` | This is the history API. `history.clear()` will clear the history | | setScrollToContent | 
 (ExcalidrawElement[]) => void
| Scroll to the nearest element to center | | setCanvasOffsets | `() => void` | Updates the offsets for the Excalidraw component so that the coordinates are computed correctly (for example the cursor position). You should call this API when your app changes the dimensions/position of the Excalidraw container, such as when toggling a sidebar. You don't have to call this when the position is changed on page scroll (we handled that ourselves). | -| importLibrary | `(url: string) => void` | Imports library from given URL. You should call this on `hashchange`, passing the `addLibrary` value if you detect it. | +| importLibrary | `(url: string, token?: string) => void` | Imports library from given URL. You should call this on `hashchange`, passing the `addLibrary` value if you detect it. Optionally pass a CSRF `token` to skip prompting during installation (retrievable via `token` key from the url coming from [https://libraries.excalidraw.com](https://libraries.excalidraw.com/)). | #### `readyPromise`