diff --git a/src/components/JSONExportDialog.tsx b/src/components/JSONExportDialog.tsx
index 7efea4be..0c5d134a 100644
--- a/src/components/JSONExportDialog.tsx
+++ b/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 (
@@ -55,7 +56,7 @@ const JSONExportModal = ({
/>
)}
- {exportOpts.onExportToBackend && (
+ {onExportToBackend && (
{link}
{t("exportDialog.link_title")}
@@ -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)}
/>
)}
+ {exportOpts.renderCustomUI &&
+ exportOpts.renderCustomUI(elements, appState, canvas)}
);
@@ -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}
/>
)}
diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 6052da69..75963936 100644
--- a/src/components/LayerUI.tsx
+++ b/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}
/>
);
};
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 741b0d55..267793ce 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -426,7 +426,9 @@ const ExcalidrawWrapper = () => {
onPointerUpdate={collabAPI?.onPointerUpdate}
UIOptions={{
canvasActions: {
- export: { onExportToBackend },
+ export: {
+ onExportToBackend,
+ },
},
}}
renderTopRightUI={renderTopRightUI}
diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md
index 0d10a2e9..3c25794b 100644
--- a/src/packages/excalidraw/CHANGELOG.md
+++ b/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
diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md
index 8ebd9f60..f48ccb2a 100644
--- a/src/packages/excalidraw/README_NEXT.md
+++ b/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` | (exportedElements: readonly NonDeletedExcalidrawElement[],appState: AppState,canvas: HTMLCanvasElement | null) => void
| | 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` | (exportedElements: readonly NonDeletedExcalidrawElement[],appState: AppState,canvas: HTMLCanvasElement | null) => void
| | This callback should be supplied if you want to render custom UI in the export dialog. |
#### `onPaste`
diff --git a/src/types.ts b/src/types.ts
index 7863c0dd..d624df3c 100644
--- a/src/types.ts
+++ b/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 = {