diff --git a/src/components/App.tsx b/src/components/App.tsx index 95e57777..82f8207d 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -458,6 +458,7 @@ class App extends React.Component { showExitZenModeBtn={ typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled } + libraryReturnUrl={this.props.libraryReturnUrl} />
{this.state.showStats && ( @@ -588,7 +589,7 @@ class App extends React.Component { private importLibraryFromUrl = async (url: string) => { window.history.replaceState({}, APP_NAME, window.location.origin); try { - const request = await fetch(url); + const request = await fetch(decodeURIComponent(url)); const blob = await request.blob(); const json = JSON.parse(await blob.text()); if (!isValidLibrary(json)) { diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 6bcaac7e..848f6b9e 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -17,7 +17,7 @@ import { Language, t } from "../i18n"; import useIsMobile from "../is-mobile"; import { calculateScrollCenter, getSelectedElements } from "../scene"; import { ExportType } from "../scene/types"; -import { AppState, LibraryItem, LibraryItems } from "../types"; +import { AppState, ExcalidrawProps, LibraryItem, LibraryItems } from "../types"; import { muteFSAbortError } from "../utils"; import { SelectedShapeActions, ShapesSwitcher, ZoomActions } from "./Actions"; import { BackgroundPickerAndDarkModeToggle } from "./BackgroundPickerAndDarkModeToggle"; @@ -63,6 +63,7 @@ interface LayerUIProps { ) => void; renderCustomFooter?: (isMobile: boolean) => JSX.Element; viewModeEnabled: boolean; + libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"]; } const useOnClickOutside = ( @@ -101,6 +102,7 @@ const LibraryMenuItems = ({ pendingElements, setAppState, setLibraryItems, + libraryReturnUrl, }: { library: LibraryItems; pendingElements: LibraryItem; @@ -109,6 +111,7 @@ const LibraryMenuItems = ({ onAddToLibrary: (elements: LibraryItem) => void; setAppState: React.Component["setState"]; setLibraryItems: (library: LibraryItems) => void; + libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"]; }) => { const isMobile = useIsMobile(); const numCells = library.length + (pendingElements.length > 0 ? 1 : 0); @@ -117,6 +120,8 @@ const LibraryMenuItems = ({ const rows = []; let addedPendingElements = false; + const referrer = libraryReturnUrl || window.location.origin; + rows.push(
- + {t("labels.libraries")}
, @@ -219,12 +227,14 @@ const LibraryMenu = ({ pendingElements, onAddToLibrary, setAppState, + libraryReturnUrl, }: { pendingElements: LibraryItem; onClickOutside: (event: MouseEvent) => void; onInsertShape: (elements: LibraryItem) => void; onAddToLibrary: () => void; setAppState: React.Component["setState"]; + libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"]; }) => { const ref = useRef(null); useOnClickOutside(ref, (event) => { @@ -297,6 +307,7 @@ const LibraryMenu = ({ pendingElements={pendingElements} setAppState={setAppState} setLibraryItems={setLibraryItems} + libraryReturnUrl={libraryReturnUrl} /> )} @@ -319,6 +330,7 @@ const LayerUI = ({ onExportToBackend, renderCustomFooter, viewModeEnabled, + libraryReturnUrl, }: LayerUIProps) => { const isMobile = useIsMobile(); @@ -482,6 +494,7 @@ const LayerUI = ({ onInsertShape={onInsertElements} onAddToLibrary={deselectItems} setAppState={setAppState} + libraryReturnUrl={libraryReturnUrl} /> ) : null; diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 1f83b992..4689bf12 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -12,6 +12,16 @@ The change should be grouped under one of the below section and must contain PR Please add the latest change on the top under the correct section. --> +## Unreleased + +## Excalidraw API + +### Features + +- Support `libraryReturnUrl` prop to indicate what URL to install libraries to [#3227](https://github.com/excalidraw/excalidraw/pull/3227). + +--- + ## 0.4.3 ## Excalidraw API diff --git a/src/packages/excalidraw/README.md b/src/packages/excalidraw/README.md index 7d8d1d18..2bb6d518 100644 --- a/src/packages/excalidraw/README.md +++ b/src/packages/excalidraw/README.md @@ -376,6 +376,7 @@ export default function IndexPage() { | [`viewModeEnabled`](#viewModeEnabled) | boolean | | This implies if the app is in view mode. | | [`zenModeEnabled`](#zenModeEnabled) | boolean | | This implies if the zen mode is enabled | | [`gridModeEnabled`](#gridModeEnabled) | boolean | | This implies if the grid mode is enabled | +| [`libraryReturnUrl`](#libraryReturnUrl) | string | | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to | #### `width` @@ -533,6 +534,10 @@ This prop indicates whether the app is in `zen mode`. When supplied, the value t This prop indicates whether the shows the grid. When supplied, the value takes precedence over `intialData.appState.gridModeEnabled`, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app. +### `libraryReturnUrl` + +If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com). Default to `window.location.origin`. + ### Extra API's #### `getSceneVersion` diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx index 773b9f47..cb654a4c 100644 --- a/src/packages/excalidraw/index.tsx +++ b/src/packages/excalidraw/index.tsx @@ -29,6 +29,7 @@ const Excalidraw = (props: ExcalidrawProps) => { viewModeEnabled, zenModeEnabled, gridModeEnabled, + libraryReturnUrl, } = props; useEffect(() => { @@ -69,6 +70,7 @@ const Excalidraw = (props: ExcalidrawProps) => { viewModeEnabled={viewModeEnabled} zenModeEnabled={zenModeEnabled} gridModeEnabled={gridModeEnabled} + libraryReturnUrl={libraryReturnUrl} /> diff --git a/src/types.ts b/src/types.ts index 4e192daa..1813b018 100644 --- a/src/types.ts +++ b/src/types.ts @@ -189,6 +189,7 @@ export interface ExcalidrawProps { viewModeEnabled?: boolean; zenModeEnabled?: boolean; gridModeEnabled?: boolean; + libraryReturnUrl?: string; } export type SceneData = {