diff --git a/README.md b/README.md
index 267db969c..09baa83a1 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
+ Ask questions or hang out on our discord.gg/UexuTaE.
## Try it now
@@ -19,6 +20,14 @@ Go to [excalidraw.com](https://excalidraw.com) to start sketching.
Read the latest news and updates on our [blog](https://blog.excalidraw.com). A good start is to see all the updates of [One Year of Excalidraw](https://blog.excalidraw.com/one-year-of-excalidraw/).
+## We accept donations
+
+If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).
+
+
+
+
+
## Documentation
### Shortcuts
diff --git a/src/actions/actionToggleGridMode.tsx b/src/actions/actionToggleGridMode.tsx
index 152a9da9a..983d19a02 100644
--- a/src/actions/actionToggleGridMode.tsx
+++ b/src/actions/actionToggleGridMode.tsx
@@ -17,6 +17,6 @@ export const actionToggleGridMode = register({
};
},
checked: (appState: AppState) => appState.gridSize !== null,
- contextItemLabel: "labels.gridMode",
+ contextItemLabel: "labels.showGrid",
keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
});
diff --git a/src/components/App.tsx b/src/components/App.tsx
index de2bdc4cd..e2136968e 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -48,6 +48,7 @@ import {
ELEMENT_TRANSLATE_AMOUNT,
ENV,
EVENT,
+ GRID_SIZE,
LINE_CONFIRM_THRESHOLD,
MIME_TYPES,
POINTER_BUTTON,
@@ -300,6 +301,8 @@ class App extends React.Component {
offsetTop,
excalidrawRef,
viewModeEnabled = false,
+ zenModeEnabled = false,
+ gridModeEnabled = false,
} = props;
this.state = {
...defaultAppState,
@@ -308,6 +311,8 @@ class App extends React.Component {
height,
...this.getCanvasOffsets({ offsetLeft, offsetTop }),
viewModeEnabled,
+ zenModeEnabled,
+ gridSize: gridModeEnabled ? GRID_SIZE : null,
};
if (excalidrawRef) {
const readyPromise =
@@ -454,6 +459,9 @@ class App extends React.Component {
onExportToBackend={onExportToBackend}
renderCustomFooter={renderFooter}
viewModeEnabled={viewModeEnabled}
+ showExitZenModeBtn={
+ typeof this.props?.zenModeEnabled === "undefined" && zenModeEnabled
+ }
/>
{this.state.showStats && (
@@ -513,11 +521,21 @@ class App extends React.Component {
}
let viewModeEnabled = actionResult?.appState?.viewModeEnabled || false;
+ let zenModeEnabled = actionResult?.appState?.zenModeEnabled || false;
+ let gridSize = actionResult?.appState?.gridSize || null;
if (typeof this.props.viewModeEnabled !== "undefined") {
viewModeEnabled = this.props.viewModeEnabled;
}
+ if (typeof this.props.zenModeEnabled !== "undefined") {
+ zenModeEnabled = this.props.zenModeEnabled;
+ }
+
+ if (typeof this.props.gridModeEnabled !== "undefined") {
+ gridSize = this.props.gridModeEnabled ? GRID_SIZE : null;
+ }
+
this.setState(
(state) => ({
...actionResult.appState,
@@ -528,6 +546,8 @@ class App extends React.Component {
offsetTop: state.offsetTop,
offsetLeft: state.offsetLeft,
viewModeEnabled,
+ zenModeEnabled,
+ gridSize,
}),
() => {
if (actionResult.syncHistory) {
@@ -847,6 +867,15 @@ class App extends React.Component {
this.addEventListeners();
}
+ if (prevProps.zenModeEnabled !== this.props.zenModeEnabled) {
+ this.setState({ zenModeEnabled: !!this.props.zenModeEnabled });
+ }
+
+ if (prevProps.gridModeEnabled !== this.props.gridModeEnabled) {
+ this.setState({
+ gridSize: this.props.gridModeEnabled ? GRID_SIZE : null,
+ });
+ }
if (
prevState.showStats !== this.state.showStats ||
prevProps.isCollaborating !== this.props.isCollaborating
@@ -3745,8 +3774,10 @@ class App extends React.Component {
separator,
actionSelectAll,
separator,
- actionToggleGridMode,
- actionToggleZenMode,
+ typeof this.props.gridModeEnabled === "undefined" &&
+ actionToggleGridMode,
+ typeof this.props.zenModeEnabled === "undefined" &&
+ actionToggleZenMode,
typeof this.props.viewModeEnabled === "undefined" &&
actionToggleViewMode,
actionToggleStats,
diff --git a/src/components/HelpDialog.tsx b/src/components/HelpDialog.tsx
index a66708977..156e62ba0 100644
--- a/src/components/HelpDialog.tsx
+++ b/src/components/HelpDialog.tsx
@@ -224,7 +224,7 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
shortcuts={[getShortcutKey("Alt+Z")]}
/>
void;
onInsertElements: (elements: readonly NonDeletedExcalidrawElement[]) => void;
zenModeEnabled: boolean;
+ showExitZenModeBtn: boolean;
toggleZenMode: () => void;
langCode: Language["code"];
isCollaborating: boolean;
@@ -296,6 +297,7 @@ const LayerUI = ({
onLockToggle,
onInsertElements,
zenModeEnabled,
+ showExitZenModeBtn,
toggleZenMode,
isCollaborating,
onExportToBackend,
@@ -513,17 +515,18 @@ const LayerUI = ({
"transition-right": zenModeEnabled,
})}
>
- {Array.from(appState.collaborators)
- // Collaborator is either not initialized or is actually the current user.
- .filter(([_, client]) => Object.keys(client).length !== 0)
- .map(([clientId, client]) => (
-
- {actionManager.renderAction("goToCollaborator", clientId)}
-
- ))}
+ {appState.collaborators.size > 0 &&
+ Array.from(appState.collaborators)
+ // Collaborator is either not initialized or is actually the current user.
+ .filter(([_, client]) => Object.keys(client).length !== 0)
+ .map(([clientId, client]) => (
+
+ {actionManager.renderAction("goToCollaborator", clientId)}
+
+ ))}
@@ -578,7 +581,7 @@ const LayerUI = ({