Package configuration options

src/components/App.tsx

@@ -516,6 +516,7 @@ class App extends React.Component<AppProps, AppState> {
     const {
       onCollabButtonClick,
       renderTopRightUI,
+      renderMenuLinks,
       renderFooter,
       renderCustomStats,
     } = this.props;
@@ -562,6 +563,7 @@ class App extends React.Component<AppProps, AppState> {
                     langCode={getLanguage().code}
                     isCollaborating={this.props.isCollaborating}
                     renderTopRightUI={renderTopRightUI}
+                    renderMenuLinks={renderMenuLinks}
                     renderCustomFooter={renderFooter}
                     renderCustomStats={renderCustomStats}
                     renderCustomSidebar={this.props.renderSidebar}
@@ -576,6 +578,7 @@ class App extends React.Component<AppProps, AppState> {
                     id={this.id}
                     onImageAction={this.onImageAction}
                     renderWelcomeScreen={
+                      this.props.hideWelcomeScreen !== true &&
                       this.state.showWelcomeScreen &&
                       this.state.activeTool.type === "selection" &&
                       !this.scene.getElementsIncludingDeleted().length

src/components/LayerUI.tsx

@@ -71,6 +71,7 @@ interface LayerUIProps {
   langCode: Language["code"];
   isCollaborating: boolean;
   renderTopRightUI?: ExcalidrawProps["renderTopRightUI"];
+  renderMenuLinks?: ExcalidrawProps["renderMenuLinks"];
   renderCustomFooter?: ExcalidrawProps["renderFooter"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderCustomSidebar?: ExcalidrawProps["renderSidebar"];
@@ -96,6 +97,7 @@ const LayerUI = ({
   showExitZenModeBtn,
   isCollaborating,
   renderTopRightUI,
+  renderMenuLinks,
   renderCustomFooter,
   renderCustomStats,
   renderCustomSidebar,
@@ -218,7 +220,8 @@ const LayerUI = ({
                 actionManager.renderAction("loadScene")}
               {/* // TODO barnabasmolnar/editor-redesign  */}
               {/* is this fine here? */}
-              {appState.fileHandle &&
+              {UIOptions.canvasActions.saveToActiveFile &&
+                appState.fileHandle &&
                 actionManager.renderAction("saveToActiveFile")}
               {renderJSONExportDialog()}
               {UIOptions.canvasActions.saveAsImage && (
@@ -240,8 +243,16 @@ const LayerUI = ({
               {actionManager.renderAction("toggleShortcuts", undefined, true)}
               {!appState.viewModeEnabled &&
                 actionManager.renderAction("clearCanvas")}
-              <Separator />
-              <MenuLinks />
+              {typeof renderMenuLinks === "undefined" ? ( //zsviczian
+                <Separator />
+              ) : (
+                renderMenuLinks && <Separator />
+              )}
+              {typeof renderMenuLinks === "undefined" ? ( //zsviczian
+                <MenuLinks />
+              ) : (
+                renderMenuLinks && renderMenuLinks(device.isMobile, appState)
+              )}
               <Separator />
               <div
                 style={{
@@ -251,9 +262,11 @@ const LayerUI = ({
                 }}
               >
                 <div>{actionManager.renderAction("toggleTheme")}</div>
-                <div style={{ padding: "0 0.625rem" }}>
-                  <LanguageList style={{ width: "100%" }} />
-                </div>
+                {UIOptions.canvasActions.languageList !== false && (
+                  <div style={{ padding: "0 0.625rem" }}>
+                    <LanguageList style={{ width: "100%" }} />
+                  </div>
+                )}
                 {!appState.viewModeEnabled && (
                   <div>
                     <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
@@ -484,9 +497,11 @@ const LayerUI = ({
           renderCustomFooter={renderCustomFooter}
           onImageAction={onImageAction}
           renderTopRightUI={renderTopRightUI}
+          renderMenuLinks={renderMenuLinks}
           renderCustomStats={renderCustomStats}
           renderSidebars={renderSidebars}
           device={device}
+          UIOptions={UIOptions}
         />
       )}
 

src/components/MobileMenu.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AppState, Device, ExcalidrawProps } from "../types";
+import { AppProps, AppState, Device, ExcalidrawProps } from "../types";
 import { ActionManager } from "../actions/manager";
 import { t } from "../i18n";
 import Stack from "./Stack";
@@ -45,10 +45,12 @@ type MobileMenuProps = {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
+  renderMenuLinks?: ExcalidrawProps["renderMenuLinks"];
   renderCustomStats?: ExcalidrawProps["renderCustomStats"];
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderWelcomeScreen?: boolean;
+  UIOptions: AppProps["UIOptions"];
 };
 
 export const MobileMenu = ({
@@ -66,10 +68,12 @@ export const MobileMenu = ({
   renderCustomFooter,
   onImageAction,
   renderTopRightUI,
+  renderMenuLinks,
   renderCustomStats,
   renderSidebars,
   device,
   renderWelcomeScreen,
+  UIOptions,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
     return (
@@ -111,8 +115,8 @@ export const MobileMenu = ({
                     />
                   </Stack.Row>
                 </Island>
-                {renderTopRightUI && renderTopRightUI(true, appState)}
                 <div className="mobile-misc-tools-container">
+                  {renderTopRightUI && renderTopRightUI(true, appState)}
                   <PenModeButton
                     checked={appState.penMode}
                     onChange={onPenModeToggle}
@@ -192,12 +196,14 @@ export const MobileMenu = ({
         {!appState.viewModeEnabled && actionManager.renderAction("loadScene")}
         {renderJSONExportDialog()}
         {renderImageExportDialog()}
-        <MenuItem
-          label={t("buttons.exportImage")}
-          icon={ExportImageIcon}
-          dataTestId="image-export-button"
-          onClick={() => setAppState({ openDialog: "imageExport" })}
-        />
+        {UIOptions.canvasActions.saveAsImage && (
+          <MenuItem
+            label={t("buttons.exportImage")}
+            icon={ExportImageIcon}
+            dataTestId="image-export-button"
+            onClick={() => setAppState({ openDialog: "imageExport" })}
+          />
+        )}
         {onCollabButtonClick && (
           <CollabButton
             isCollaborating={isCollaborating}
@@ -207,8 +213,16 @@ export const MobileMenu = ({
         )}
         {actionManager.renderAction("toggleShortcuts", undefined, true)}
         {!appState.viewModeEnabled && actionManager.renderAction("clearCanvas")}
-        <Separator />
-        <MenuLinks />
+        {typeof renderMenuLinks === "undefined" ? ( //zsviczian
+          <Separator />
+        ) : (
+          renderMenuLinks && <Separator />
+        )}
+        {typeof renderMenuLinks === "undefined" ? ( //zsviczian
+          <MenuLinks />
+        ) : (
+          renderMenuLinks && renderMenuLinks(device.isMobile, appState)
+        )}
         <Separator />
         {!appState.viewModeEnabled && (
           <div style={{ marginBottom: ".5rem" }}>

src/constants.ts

@@ -155,6 +155,7 @@ export const DEFAULT_UI_OPTIONS: AppProps["UIOptions"] = {
     saveToActiveFile: true,
     toggleTheme: null,
     saveAsImage: true,
+    languageList: true,
   },
 };
 

src/packages/excalidraw/README.md

@@ -392,6 +392,8 @@ No, Excalidraw package doesn't come with collaboration built in, since the imple
 | [`onPointerUpdate`](#onPointerUpdate) | Function |  | Callback triggered when mouse pointer is updated. |
 | [`langCode`](#langCode) | string | `en` | Language code string |
 | [`renderTopRightUI`](#renderTopRightUI) | Function |  | Function that renders custom UI in top right corner |
+| [`hideWelcomeScreen`](#hideWelcomeScreen) | boolean |  | This implies if the app should always hide the welcome sreen |
+| [`renderMenuLinks`](#renderMenuLinks) | Function |  | Function that renders custom list of links (or other custom UI) in the app menu |
 | [`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. |
 | [`renderSIdebar`](#renderSIdebar) | Function |  | Render function that renders custom sidebar. |
@@ -613,6 +615,22 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 
 A function returning JSX to render custom UI in the top right corner of the app.
 
+#### `hideWelcomeScreen`
+
+<pre>
+boolean
+</pre>
+
+Boolean value to override the displaying of the welcome screen elements. If set to true, the welcome screen will never be shown.
+
+#### `renderMenuLinks`
+
+<pre>
+((isMobile: boolean, appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L79">AppState</a>) => JSX | null)|null
+</pre>
+
+A function returning JSX to render custom UI (intended to be a list of custom links) replacing the default list of links in the app menu. If set to null, the list of links will not be displayed. If unset, the default list of links will be displayed.
+
 #### `renderFooter`
 
 <pre>
@@ -702,6 +720,7 @@ This prop can be used to customise UI of Excalidraw. Currently we support custom
 | `saveToActiveFile` | boolean | true | Implies whether to show `Save button` to save to current file |
 | `toggleTheme` | boolean &#124; null | null | Implies whether to show `Theme toggle`. When defined as `boolean`, takes precedence over [`props.theme`](#theme) to show `Theme toggle` |
 | `saveAsImage` | boolean | true | Implies whether to show `Save as image button` |
+| `languageList` | boolean | true | Implies whether to show the `Language Selector Dropdown list` |
 
 ##### `dockedSidebarBreakpoint`
 

src/packages/excalidraw/index.tsx

@@ -20,6 +20,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     isCollaborating = false,
     onPointerUpdate,
     renderTopRightUI,
+    hideWelcomeScreen,
+    renderMenuLinks,
     renderFooter,
     renderSidebar,
     langCode = defaultLang.code,
@@ -93,6 +95,8 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           isCollaborating={isCollaborating}
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
+          hideWelcomeScreen={hideWelcomeScreen}
+          renderMenuLinks={renderMenuLinks}
           renderFooter={renderFooter}
           langCode={langCode}
           viewModeEnabled={viewModeEnabled}

src/types.ts

@@ -284,6 +284,10 @@ export interface ExcalidrawProps {
     isMobile: boolean,
     appState: AppState,
   ) => JSX.Element | null;
+  renderMenuLinks?:
+    | ((isMobile: boolean, appState: AppState) => JSX.Element | null)
+    | null;
+  hideWelcomeScreen?: boolean;
   renderFooter?: (isMobile: boolean, appState: AppState) => JSX.Element | null;
   langCode?: Language["code"];
   viewModeEnabled?: boolean;
@@ -363,6 +367,7 @@ type CanvasActions = {
   saveToActiveFile?: boolean;
   toggleTheme?: boolean | null;
   saveAsImage?: boolean;
+  languageList?: boolean;
 };
 
 export type AppProps = Merge<