feat: set window.name in excalidraw app & also support target for excalidraw libraries (#3299)

* feat: set window.name in excalidraw app so library installation always opens on same tab & also support target for excalidraw libraries

* update changelog and readme

* Update public/index.html

Co-authored-by: David Luzar <luzar.david@gmail.com>

* use level 4 heading

* Update src/packages/excalidraw/README.md

Co-authored-by: David Luzar <luzar.david@gmail.com>

Co-authored-by: David Luzar <luzar.david@gmail.com>

public/index.html

@@ -88,6 +88,8 @@
     <link rel="stylesheet" href="fonts.css" type="text/css" />
     <script>
       window.EXCALIDRAW_ASSET_PATH = "/";
+      // setting this so that libraries installation reuses this window tab.
+      window.name = "_excalidraw";
     </script>
     <% if (process.env.REACT_APP_GOOGLE_ANALYTICS_ID) { %>
     <script

src/components/LayerUI.tsx

@@ -176,7 +176,9 @@ const LibraryMenuItems = ({
         </>
       )}
       <a
-        href={`https://libraries.excalidraw.com?referrer=${referrer}`}
+        href={`https://libraries.excalidraw.com?target=${
+          window.name || "_blank"
+        }&referrer=${referrer}`}
         target="_excalidraw_libraries"
       >
         {t("labels.libraries")}

src/packages/excalidraw/CHANGELOG.md

@@ -18,6 +18,7 @@ Please add the latest change on the top under the correct section.
 
 ### Features
 
+- Set the target to `window.name` if present during excalidraw libraries installation so it opens in same tab for the host. If `window.name` is not set it will open in a new tab [#3299](https://github.com/excalidraw/excalidraw/pull/3299).
 - Add `name` prop to indicate the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over `intialData.appState.name`, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw [#3273](https://github.com/excalidraw/excalidraw/pull/3273).
 - Export API `setCanvasOffsets` via `ref` to set the offsets for Excalidraw[#3265](https://github.com/excalidraw/excalidraw/pull/3265).
   #### BREAKING CHANGE

src/packages/excalidraw/README.md

@@ -527,15 +527,15 @@ 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`
+#### `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`.
+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`. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
-### `theme`
+#### `theme`
 
 This prop controls Excalidraw's theme. When supplied, the value takes precedence over `intialData.appState.theme`, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
-### `name`
+#### `name`
 
 This prop sets the name of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over `intialData.appState.name`, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.