feat: support custom UI rendering inside export dialog (#3666)

* feat: support custom UI rendering inside export dialog

* docs

* add

* remove assertion

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

src/components/JSONExportDialog.tsx

@@ -22,16 +22,17 @@ const JSONExportModal = ({
   elements,
   appState,
   actionManager,
-  onExportToBackend,
   exportOpts,
+  canvas,
 }: {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionsManagerInterface;
-  onExportToBackend?: ExportCB;
   onCloseRequest: () => void;
   exportOpts: ExportOpts;
+  canvas: HTMLCanvasElement | null;
 }) => {
+  const { onExportToBackend } = exportOpts;
   return (
     <div className="ExportDialog ExportDialog--json">
       <div className="ExportDialog-cards">
@@ -55,7 +56,7 @@ const JSONExportModal = ({
             />
           </Card>
         )}
-        {exportOpts.onExportToBackend && (
+        {onExportToBackend && (
           <Card color="pink">
             <div className="Card-icon">{link}</div>
             <h2>{t("exportDialog.link_title")}</h2>
@@ -66,10 +67,12 @@ const JSONExportModal = ({
               title={t("exportDialog.link_button")}
               aria-label={t("exportDialog.link_button")}
               showAriaLabel={true}
-              onClick={() => onExportToBackend!(elements)}
+              onClick={() => onExportToBackend(elements, appState, canvas)}
             />
           </Card>
         )}
+        {exportOpts.renderCustomUI &&
+          exportOpts.renderCustomUI(elements, appState, canvas)}
       </div>
     </div>
   );
@@ -79,14 +82,14 @@ export const JSONExportDialog = ({
   elements,
   appState,
   actionManager,
-  onExportToBackend,
   exportOpts,
+  canvas,
 }: {
   appState: AppState;
   elements: readonly NonDeletedExcalidrawElement[];
   actionManager: ActionsManagerInterface;
-  onExportToBackend?: ExportCB;
   exportOpts: ExportOpts;
+  canvas: HTMLCanvasElement | null;
 }) => {
   const [modalIsShown, setModalIsShown] = useState(false);
 
@@ -113,9 +116,9 @@ export const JSONExportDialog = ({
             elements={elements}
             appState={appState}
             actionManager={actionManager}
-            onExportToBackend={onExportToBackend}
             onCloseRequest={handleClose}
             exportOpts={exportOpts}
+            canvas={canvas}
           />
         </Dialog>
       )}

src/components/LayerUI.tsx

@@ -387,15 +387,8 @@ const LayerUI = ({
         elements={elements}
         appState={appState}
         actionManager={actionManager}
-        onExportToBackend={(elements) => {
-          UIOptions.canvasActions.export.onExportToBackend &&
-            UIOptions.canvasActions.export.onExportToBackend(
-              elements,
-              appState,
-              canvas,
-            );
-        }}
         exportOpts={UIOptions.canvasActions.export}
+        canvas={canvas}
       />
     );
   };

src/excalidraw-app/index.tsx

@@ -426,7 +426,9 @@ const ExcalidrawWrapper = () => {
         onPointerUpdate={collabAPI?.onPointerUpdate}
         UIOptions={{
           canvasActions: {
-            export: { onExportToBackend },
+            export: {
+              onExportToBackend,
+            },
           },
         }}
         renderTopRightUI={renderTopRightUI}

src/packages/excalidraw/CHANGELOG.md

@@ -13,10 +13,13 @@ Please add the latest change on the top under the correct section.
 
 ## Unreleased
 
+**This changes are not yet released but you can still try it out in [@excalidraw/excalidraw-next](https://www.npmjs.com/package/@excalidraw/excalidraw-next).**
+
 ## Excalidraw API
 
 ### Features
 
+- Added prop `UIOptions.canvasActions.export.renderCustomUI` to support Custom UI rendering inside export dialog [#3666](https://github.com/excalidraw/excalidraw/pull/3666).
 - Added prop `UIOptions.canvasActions.saveAsImage` to show/hide the **Save as image** button in the canvas actions. Defauls to `true` hence the **Save as Image** button is rendered [#3662](https://github.com/excalidraw/excalidraw/pull/3662).
 
 - Export dialog can be customised with [`UiOptions.canvasActions.export`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportOpts) [#3658](https://github.com/excalidraw/excalidraw/pull/3658).
@@ -35,6 +38,8 @@ Please add the latest change on the top under the correct section.
   - Removed `shouldAddWatermark: boolean` attribute from options for [export](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#export-utilities) APIs [#3639](https://github.com/excalidraw/excalidraw/pull/3639).
   - Removed `appState.shouldAddWatermark` so in case you were passing `shouldAddWatermark` in [initialData.AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L42) it will not work anymore.
 
+---
+
 ## 0.8.0 (2021-05-15)
 
 ## Excalidraw API

src/packages/excalidraw/README_NEXT.md

@@ -580,6 +580,7 @@ The below attributes can be set in `UIOptions.canvasActions.export` to customize
 | --- | --- | --- | --- |
 | `saveFileToDisk` | boolean | true | Implies if save file to disk button should be shown |
 | `exportToBackend` | <pre> (exportedElements: readonly NonDeletedExcalidrawElement[],appState: AppState,canvas: HTMLCanvasElement &#124; null) => void </pre> |  | This callback is triggered when the shareable-link button is clicked in the export dialog. The link button will only be shown if this callback is passed. |
+| `renderCustomUI` | <pre> (exportedElements: readonly NonDeletedExcalidrawElement[],appState: AppState,canvas: HTMLCanvasElement &#124; null) => void </pre> |  | This callback should be supplied if you want to render custom UI in the export dialog. |
 
 #### `onPaste`
 

src/types.ts

@@ -221,6 +221,11 @@ export type ExportOpts = {
     appState: AppState,
     canvas: HTMLCanvasElement | null,
   ) => void;
+  renderCustomUI?: (
+    exportedElements: readonly NonDeletedExcalidrawElement[],
+    appState: AppState,
+    canvas: HTMLCanvasElement | null,
+  ) => JSX.Element;
 };
 
 type CanvasActions = {