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 = {