Skip to content

Commit

Permalink
[pr] command palette
Browse files Browse the repository at this point in the history
  • Loading branch information
@dwelle
dwelle committed Mar 26, 2024
1 parent 17fe000 commit 6624346
Show file tree
Hide file tree
Showing 58 changed files with 1,916 additions and 297 deletions.
182 changes: 182 additions & 0 deletions excalidraw-app/App.tsx
View file
Expand Up @@ -109,6 +109,16 @@ import { OverwriteConfirmDialog } from "../packages/excalidraw/components/Overwr
import Trans from "../packages/excalidraw/components/Trans";
import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
import CollabError, { collabErrorIndicatorAtom } from "./collab/CollabError";
import CommandPalette, {
DEFAULT_CATEGORIES,
getCategoryOrder,
} from "./components/CommandPalette";
import {
GithubIcon,
XBrandIcon,
DiscordIcon,
ExcalLogo,
} from "../packages/excalidraw/components/icons";

polyfill();

Expand Down Expand Up @@ -976,6 +986,178 @@ const ExcalidrawWrapper = () => {
{errorMessage}
</ErrorDialog>
)}

<CommandPalette
customCommandPaletteItems={[
{
name: t("labels.liveCollaboration"),
category: DEFAULT_CATEGORIES.app,
order: getCategoryOrder(DEFAULT_CATEGORIES.app),
keywords: [
"team",
"multiplayer",
"share",
"public",
"session",
"invite",
],
execute: () => {
setShareDialogState({
isOpen: true,
type: "collaborationOnly",
});
},
},
{
name: t("roomDialog.button_stopSession"),
category: DEFAULT_CATEGORIES.app,
predicate: () => !!collabAPI?.isCollaborating(),
order: getCategoryOrder(DEFAULT_CATEGORIES.app),
keywords: [
"stop",
"session",
"end",
"leave",
"close",
"exit",
"collaboration",
],
execute: () => {
if (collabAPI) {
collabAPI.stopCollaboration();
if (!collabAPI.isCollaborating()) {
setShareDialogState({ isOpen: false });
}
}
},
},
{
name: `${t("exportDialog.link_button")}...`,
category: DEFAULT_CATEGORIES.export,
order: getCategoryOrder(DEFAULT_CATEGORIES.export),
predicate: true,
keywords: [
"link",
"shareable",
"readonly",
"export",
"publish",
"snapshot",
"url",
],
execute: async () => {
if (excalidrawAPI) {
try {
await onExportToBackend(
excalidrawAPI.getSceneElements(),
excalidrawAPI.getAppState(),
excalidrawAPI.getFiles(),
);
} catch (error: any) {
setErrorMessage(error.message);
}
}
},
},
{
name: "GitHub",
icon: GithubIcon,
category: DEFAULT_CATEGORIES.links,
predicate: true,
order: getCategoryOrder(DEFAULT_CATEGORIES.links),
keywords: [
"issues",
"bugs",
"requests",
"report",
"features",
"social",
"community",
],
execute: () => {
window.open(
"https://github.com/excalidraw/excalidraw",
"_blank",
"noopener noreferrer",
);
},
},
{
name: t("labels.followUs"),
icon: XBrandIcon,
category: DEFAULT_CATEGORIES.links,
order: getCategoryOrder(DEFAULT_CATEGORIES.links),
predicate: true,
keywords: ["twitter", "contact", "social", "community"],
execute: () => {
window.open(
"https://x.com/excalidraw",
"_blank",
"noopener noreferrer",
);
},
},
{
name: t("labels.discordChat"),
category: DEFAULT_CATEGORIES.links,
order: getCategoryOrder(DEFAULT_CATEGORIES.links),
predicate: true,
icon: DiscordIcon,
keywords: [
"chat",
"talk",
"contact",
"bugs",
"requests",
"report",
"feedback",
"suggestions",
"social",
"community",
],
execute: () => {
window.open(
"https://discord.gg/UexuTaE",
"_blank",
"noopener noreferrer",
);
},
},
{
name: t("overwriteConfirm.action.excalidrawPlus.title"),
category: DEFAULT_CATEGORIES.links,
order: getCategoryOrder(DEFAULT_CATEGORIES.links),
predicate: true,
icon: <div style={{ width: 14 }}>{ExcalLogo}</div>,
keywords: ["plus", "subscription", "login", "signin"],
execute: () => {
window.open(
`${
import.meta.env.VITE_APP_PLUS_LP
}/plus?utm_source=excalidraw&utm_medium=app&utm_content=command_palette`,
"_blank",
);
},
},
{
name: t("overwriteConfirm.action.excalidrawPlus.button"),
category: DEFAULT_CATEGORIES.export,
predicate: true,
order: getCategoryOrder(DEFAULT_CATEGORIES.export),
keywords: ["plus", "export", "save", "backup"],
execute: () => {
if (excalidrawAPI) {
exportToExcalidrawPlus(
excalidrawAPI.getSceneElements(),
excalidrawAPI.getAppState(),
excalidrawAPI.getFiles(),
excalidrawAPI.getName(),
);
}
},
},
]}
/>
</Excalidraw>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion excalidraw-app/components/AppMainMenu.tsx
View file
Expand Up @@ -19,7 +19,7 @@ export const AppMainMenu: React.FC<{
onSelect={() => props.onCollabDialogOpen()}
/>
)}

<MainMenu.DefaultItems.CommandPalette />
<MainMenu.DefaultItems.Help />
<MainMenu.DefaultItems.ClearCanvas />
<MainMenu.Separator />
Expand Down
144 changes: 144 additions & 0 deletions excalidraw-app/components/CommandPalette.scss
View file
@@ -0,0 +1,144 @@
@import "../../packages/excalidraw/css/variables.module.scss";

.excalidraw {
.command-palette-dialog {
user-select: none;

.Modal__content {
height: 100%;
max-height: 750px;

.Island {
height: 100%;
padding: 1.5rem;
}

.Dialog__content {
height: 100%;
display: flex;
flex-direction: column;
}
}

.shortcuts-wrapper {
display: flex;
justify-content: center;
align-items: center;
margin-top: 12px;
gap: 1.5rem;
}

.shortcut {
display: flex;
justify-content: center;
align-items: center;
height: 16px;
font-size: 10px;
gap: 0.25rem;

.shortcut-wrapper {
display: flex;
}

.shortcut-plus {
margin: 0px 4px;
}

.shortcut-key {
padding: 0px 4px;
height: 16px;
border-radius: 4px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--color-primary-light);
}

.shortcut-desc {
margin-left: 4px;
color: var(--color-gray-50);
}
}

.commands {
overflow-y: auto;
box-sizing: border-box;
margin-top: 12px;
color: var(--popup-text-color);

.command-category {
display: flex;
flex-direction: column;
padding: 12px 0px;
margin-right: 0.25rem;
}

.command-category-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 6px;
display: flex;
align-items: center;
}

.command-item {
color: var(--popup-text-color);
height: 36px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
padding: 0 12px;
border-radius: var(--border-radius-lg);
cursor: pointer;

&:active {
background-color: var(--color-primary-light-darker);
}

.name {
display: flex;
align-items: center;
gap: 0.25rem;
}
}

.item-selected {
background-color: var(--color-surface-mid);
}

.item-disabled {
opacity: 0.3;
cursor: not-allowed;
}

.no-match {
display: flex;
justify-content: center;
align-items: center;
margin-top: 36px;
}
}

.icon {
width: 16px;
height: 16px;
margin-right: 6px;
}

b {
background-color: #ffe599;
color: var(--color-gray-100);
font-weight: inherit;

&:first-of-type {
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
&:last-of-type {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
}
}
}

0 comments on commit 6624346

Please sign in to comment.