diff --git a/src/components/App.tsx b/src/components/App.tsx index e38cc3a6..99a9ba5e 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -452,7 +452,7 @@ class App extends React.Component { const { onCollabButtonClick, onExportToBackend, - renderTopRight, + renderTopRightUI, renderFooter, renderCustomStats, } = this.props; @@ -493,7 +493,7 @@ class App extends React.Component { langCode={getLanguage().code} isCollaborating={this.props.isCollaborating || false} onExportToBackend={onExportToBackend} - renderTopRight={renderTopRight} + renderTopRightUI={renderTopRightUI} renderCustomFooter={renderFooter} viewModeEnabled={viewModeEnabled} showExitZenModeBtn={ diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx index 8f8e92de..65e5e5b6 100644 --- a/src/components/LayerUI.tsx +++ b/src/components/LayerUI.tsx @@ -67,7 +67,7 @@ interface LayerUIProps { appState: AppState, canvas: HTMLCanvasElement | null, ) => void; - renderTopRight?: (isMobile: boolean, appState: AppState) => JSX.Element; + renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element; renderCustomFooter?: (isMobile: boolean) => JSX.Element; viewModeEnabled: boolean; libraryReturnUrl: ExcalidrawProps["libraryReturnUrl"]; @@ -371,7 +371,7 @@ const LayerUI = ({ toggleZenMode, isCollaborating, onExportToBackend, - renderTopRight, + renderTopRightUI, renderCustomFooter, viewModeEnabled, libraryReturnUrl, @@ -627,7 +627,7 @@ const LayerUI = ({ ))} - {renderTopRight?.(isMobile, appState)} + {renderTopRightUI?.(isMobile, appState)} diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx index 56479861..e303dba1 100644 --- a/src/excalidraw-app/index.tsx +++ b/src/excalidraw-app/index.tsx @@ -304,7 +304,7 @@ const ExcalidrawWrapper = () => { } }; - const renderTopRight = useCallback( + const renderTopRightUI = useCallback( (isMobile: boolean, appState: AppState) => { return (
{ isCollaborating={collabAPI?.isCollaborating()} onPointerUpdate={collabAPI?.onPointerUpdate} onExportToBackend={onExportToBackend} - renderTopRight={renderTopRight} + renderTopRightUI={renderTopRightUI} renderFooter={renderFooter} langCode={langCode} renderCustomStats={renderCustomStats} diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 3de5552b..fda3913f 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -18,7 +18,7 @@ Please add the latest change on the top under the correct section. ### Features - Expose [`serializeAsJSON`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#serializeAsJSON) helper that we use when saving Excalidraw scene to a file [#3538](https://github.com/excalidraw/excalidraw/pull/3538). -- Add support to render custom UI in the top right corner via [`renderTopRight`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRight) prop [#3539](https://github.com/excalidraw/excalidraw/pull/3539). +- Add support to render custom UI in the top right corner via [`renderTopRightUI`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#renderTopRightUI) prop [#3539](https://github.com/excalidraw/excalidraw/pull/3539), [#3572](https://github.com/excalidraw/excalidraw/pull/3572) . This also removes the GitHub icon, keeping it local to the https://excalidraw.com app. diff --git a/src/packages/excalidraw/README_NEXT.md b/src/packages/excalidraw/README_NEXT.md index a5118681..828af5e7 100644 --- a/src/packages/excalidraw/README_NEXT.md +++ b/src/packages/excalidraw/README_NEXT.md @@ -355,7 +355,7 @@ To view the full example visit :point_down: | [`onPointerUpdate`](#onPointerUpdate) | Function | | Callback triggered when mouse pointer is updated. | | [`onExportToBackend`](#onExportToBackend) | Function | | Callback triggered when link button is clicked on export dialog | | [`langCode`](#langCode) | string | `en` | Language code string | -| [`renderTopRight `](#renderTopRight) | Function | | Function that renders custom UI in top right corner | +| [`renderTopRightUI`](#renderTopRightUI) | Function | | Function that renders custom UI in top right corner | | [`renderFooter `](#renderFooter) | Function | | Function that renders custom UI footer | | [`renderCustomStats`](#renderCustomStats) | Function | | Function that can be used to render custom stats on the stats dialog. | | [`viewModeEnabled`](#viewModeEnabled) | boolean | | This implies if the app is in view mode. | @@ -503,7 +503,7 @@ import { defaultLang, languages } from "@excalidraw/excalidraw"; | defaultLang | string | | languages | [Language[]](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L8) | -#### `renderTopRight` +#### `renderTopRightUI` A function returning JSX to render custom UI in the top right corner of the app. diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx index 017e7b7d..69af5695 100644 --- a/src/packages/excalidraw/index.tsx +++ b/src/packages/excalidraw/index.tsx @@ -20,7 +20,7 @@ const Excalidraw = (props: ExcalidrawProps) => { isCollaborating, onPointerUpdate, onExportToBackend, - renderTopRight, + renderTopRightUI, renderFooter, langCode = defaultLang.code, viewModeEnabled, @@ -73,7 +73,7 @@ const Excalidraw = (props: ExcalidrawProps) => { isCollaborating={isCollaborating} onPointerUpdate={onPointerUpdate} onExportToBackend={onExportToBackend} - renderTopRight={renderTopRight} + renderTopRightUI={renderTopRightUI} renderFooter={renderFooter} langCode={langCode} viewModeEnabled={viewModeEnabled} diff --git a/src/types.ts b/src/types.ts index b781b4da..48ce26bc 100644 --- a/src/types.ts +++ b/src/types.ts @@ -182,7 +182,7 @@ export interface ExcalidrawProps { data: ClipboardData, event: ClipboardEvent | null, ) => Promise | boolean; - renderTopRight?: (isMobile: boolean, appState: AppState) => JSX.Element; + renderTopRightUI?: (isMobile: boolean, appState: AppState) => JSX.Element; renderFooter?: (isMobile: boolean) => JSX.Element; langCode?: Language["code"]; viewModeEnabled?: boolean;