[improvement] Add comma key to kbd shortcuts menu

[EmilyYoung71415]

From this issue: #3531

Add a description for the comma key in shortcuts modal of the ? menu in the bottom right

Change Type

• sdk — Changes the tldraw SDK
• dotcom — Changes the tldraw.com web app
• docs — Changes to the documentation, examples, or templates.
• vs code — Changes to the vscode plugin
• internal — Does not affect user-facing stuff

• bugfix — Bug fix
• feature — New feature
• improvement — Improving existing features
• chore — Updating dependencies, other boring stuff
• galaxy brain — Architectural changes
• tests — Changes to any test code
• tools — Changes to infrastructure, CI, internal scripts, debugging tools, etc.
• dunno — I don't know

One more thing

I got a problem when I use the kbd(str: string) function, since the input parameter is , but the internal logic has something like this str.split(',')[0], which will happen to ignore ,

I just modify it by hard code for this case, I know it is not elegant enough.

export function kbd(str: string) {
++if (str === ',') return [',']

	return str
		.split(',')[0]
		.split('')
		.map((sub) => {
			const subStr = sub.replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, '⇧')
			return subStr[0].toUpperCase() + subStr.slice(1)
		})
}

Hence, I think out another solution: maybe we could have a new convention for kdb to demonstrate a split, using space key instead of comma key.

// before
kbd: 'd,b,x',
kbd: '⌫,del,backspace',

// after
kbd: 'd b x',
kbd: '⌫ del backspace',

I will be pleasure for further improvement about this, feel free to correct me :)

[vercel]

@EmilyYoung71415 is attempting to deploy a commit to the tldraw Team on Vercel.

A member of the Team first needs to authorize it.

[huppy-bot]

Hey, thanks for your pull request! Before we can merge your PR, you will need to sign our Contributor License Agreement by posting a comment that reads:

I have read and agree to the Contributor License Agreement.