From 6ec259a0e71174651bae95d4628138bf6fd68742 Mon Sep 17 00:00:00 2001 From: kj_sh604 Date: Sun, 15 Mar 2026 16:19:35 -0400 Subject: refactor: packages/ --- packages/excalidraw/components/HelpDialog.tsx | 503 ++++++++++++++++++++++++++ 1 file changed, 503 insertions(+) create mode 100644 packages/excalidraw/components/HelpDialog.tsx (limited to 'packages/excalidraw/components/HelpDialog.tsx') diff --git a/packages/excalidraw/components/HelpDialog.tsx b/packages/excalidraw/components/HelpDialog.tsx new file mode 100644 index 0000000..926096c --- /dev/null +++ b/packages/excalidraw/components/HelpDialog.tsx @@ -0,0 +1,503 @@ +import type { JSX } from "react"; +import React from "react"; +import { t } from "../i18n"; +import { KEYS } from "../keys"; +import { Dialog } from "./Dialog"; +import { getShortcutKey } from "../utils"; +import "./HelpDialog.scss"; +import { ExternalLinkIcon, GithubIcon, youtubeIcon } from "./icons"; +import { probablySupportsClipboardBlob } from "../clipboard"; +import { isDarwin, isFirefox, isWindows } from "../constants"; +import { getShortcutFromShortcutName } from "../actions/shortcuts"; + +const Header = () => ( +
+ +
{ExternalLinkIcon}
+ {t("helpDialog.documentation")} + + +
{ExternalLinkIcon}
+ {t("helpDialog.blog")} + + +
{GithubIcon}
+ {t("helpDialog.github")} + + +
{youtubeIcon}
+ YouTube + +
+); + +const Section = (props: { title: string; children: React.ReactNode }) => ( + <> +

{props.title}

+
{props.children}
+ +); + +const ShortcutIsland = (props: { + caption: string; + children: React.ReactNode; + className?: string; +}) => ( +
+

{props.caption}

+
{props.children}
+
+); + +function* intersperse(as: JSX.Element[][], delim: string | null) { + let first = true; + for (const x of as) { + if (!first) { + yield delim; + } + first = false; + yield x; + } +} + +const upperCaseSingleChars = (str: string) => { + return str.replace(/\b[a-z]\b/, (c) => c.toUpperCase()); +}; + +const Shortcut = ({ + label, + shortcuts, + isOr = true, +}: { + label: string; + shortcuts: string[]; + isOr?: boolean; +}) => { + const splitShortcutKeys = shortcuts.map((shortcut) => { + const keys = shortcut.endsWith("++") + ? [...shortcut.slice(0, -2).split("+"), "+"] + : shortcut.split("+"); + + return keys.map((key) => ( + {upperCaseSingleChars(key)} + )); + }); + + return ( +
+
{label}
+
+ {[...intersperse(splitShortcutKeys, isOr ? t("helpDialog.or") : null)]} +
+
+ ); +}; + +const ShortcutKey = (props: { children: React.ReactNode }) => ( + +); + +export const HelpDialog = ({ onClose }: { onClose?: () => void }) => { + const handleClose = React.useCallback(() => { + if (onClose) { + onClose(); + } + }, [onClose]); + + return ( + <> + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* firefox supports clipboard API under a flag, so we'll + show users what they can do in the error message */} + {(probablySupportsClipboardBlob || isFirefox) && ( + + )} + + + + + + + + + + + + + + + + + + + + + + + ")]} + /> + +
+
+ + ); +}; -- cgit v1.2.3