Skip to content

Commit

Permalink
Rework shortcuts
Browse files Browse the repository at this point in the history
  • Loading branch information
@0xi4o
0xi4o committed Aug 28, 2024
1 parent 6841243 commit 21cf082
Show file tree
Hide file tree
Showing 5 changed files with 127 additions and 91 deletions.
115 changes: 33 additions & 82 deletions app/components/editor/help-dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,11 @@ import {
DialogTitle,
} from '~/components/ui/dialog'
import { Separator } from '~/components/ui/separator'
import { FORMATTING_SHORTCUTS, GENERAL_SHORTCUTS } from '~/lib/constants'
import {
FORMATTING_SHORTCUTS,
GENERAL_SHORTCUTS,
MARKDOWN_SHORTCUTS,
} from '~/lib/constants'
import {
allShortcuts,
getGlobalShortcuts,
Expand All @@ -19,6 +23,8 @@ import { HelpDialogProps, ShortcutConfig } from '~/lib/types'
import { getShortcutWithModifiers } from '~/lib/utils'

const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
const APP_SHORTCUTS = [...Object.values(allShortcuts), ...GENERAL_SHORTCUTS]

return (
<Dialog onOpenChange={setHelpOpen} open={helpOpen}>
<DialogContent className='w-[48rem] max-w-none flex flex-col gap-8'>
Expand All @@ -45,17 +51,17 @@ const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
{/* </Link>*/}
</div>
</DialogHeader>
<h3 className='text-lg font-semibold'>Keyboard Shortcuts</h3>
<div className='columns-2 gap-x-8'>
<section className='break-inside-avoid-column flex flex-col items-start justify-start gap-4 mb-4'>
<h4 className='text-base font-semibold'>
Keyboard Shortcuts
</h4>
<h4 className='text-base font-semibold'>App</h4>
<ul className='w-full border border-subtle divide-y divide-subtle rounded-lg text-sm'>
{[
...Object.entries(allShortcuts),
...Object.entries(getGlobalShortcuts()),
].map(([_, config], index) => {
const { description, key, modifiers } =
{APP_SHORTCUTS.sort((a, b) => {
return a.description.localeCompare(
b.description
)
}).map((config, index) => {
const { description, key, label, modifiers } =
config as ShortcutConfig

return (
Expand All @@ -66,15 +72,24 @@ const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
<p>{description}</p>
<KeyboardShortcut
keys={getShortcutWithModifiers(
key,
label ?? key,
modifiers
)}
/>
</li>
)
})}
{GENERAL_SHORTCUTS.map((config, index) => {
const { description, key, modifiers } =
</ul>
</section>
<section className='break-inside-avoid-column flex flex-col items-start justify-start gap-4 mb-4'>
<h4 className='text-base font-semibold'>Formatting</h4>
<ul className='w-full border border-subtle divide-y divide-subtle rounded-lg text-sm'>
{FORMATTING_SHORTCUTS.sort((a, b) => {
return a.description.localeCompare(
b.description
)
}).map((config, index) => {
const { description, key, label, modifiers } =
config as ShortcutConfig

return (
Expand All @@ -85,7 +100,7 @@ const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
<p>{description}</p>
<KeyboardShortcut
keys={getShortcutWithModifiers(
key,
label ?? key,
modifiers
)}
/>
Expand All @@ -95,12 +110,10 @@ const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
</ul>
</section>
<section className='break-inside-avoid-column flex flex-col items-start justify-start gap-4 mb-4'>
<h4 className='text-base font-semibold'>
Formatting Shortcuts
</h4>
<h4 className='text-base font-semibold'>Markdown</h4>
<ul className='w-full border border-subtle divide-y divide-subtle rounded-lg text-sm'>
{FORMATTING_SHORTCUTS.map((config, index) => {
const { description, key, modifiers } =
{MARKDOWN_SHORTCUTS.map((config, index) => {
const { description, key, label, modifiers } =
config as ShortcutConfig

return (
Expand All @@ -111,78 +124,16 @@ const HelpDialog = ({ helpOpen, setHelpOpen }: HelpDialogProps) => {
<p>{description}</p>
<KeyboardShortcut
keys={getShortcutWithModifiers(
key,
label ?? key,
modifiers
)}
lowercase={true}
/>
</li>
)
})}
</ul>
</section>
<section className='break-inside-avoid-column flex flex-col items-start justify-start gap-4 mb-4'>
<h4 className='text-base font-semibold'>
Markdown Shortcuts
</h4>
<ul className='w-full border border-subtle divide-y divide-subtle rounded-lg text-sm'>
<li className='flex items-center justify-between px-4 py-2'>
<p>## text</p>
<p>Heading 2</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>### text</p>
<p>Heading 3</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>#### text</p>
<p>Heading 4</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>- text</p>
<p>Bulleted List</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>1. text</p>
<p>Numbered List</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>**text**</p>
<p>Bold</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>*text*</p>
<p>Italics</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>~text~</p>
<p>Strikethrough</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>[text](url)</p>
<p>Hyperlink</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>==text==</p>
<p>Highlight</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>`text`</p>
<p>Inline Code</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>```</p>
<p>Code Block</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>{'> text'}</p>
<p>Blockquote</p>
</li>
<li className='flex items-center justify-between px-4 py-2'>
<p>---</p>
<p>Divider</p>
</li>
</ul>
</section>
</div>
</DialogContent>
</Dialog>
Expand Down
12 changes: 10 additions & 2 deletions app/components/editor/keyboard-shortcut.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@ import { Fragment } from 'react'

import { capitalize } from '~/lib/utils'

const KeyboardShortcut = ({ keys }: { keys: string }) => {
const KeyboardShortcut = ({
keys,
lowercase = false,
}: {
keys: string
lowercase?: boolean
}) => {
if (!keys) return null

return (
Expand All @@ -11,7 +17,9 @@ const KeyboardShortcut = ({ keys }: { keys: string }) => {
<Fragment key={key}>
{key && (
<kbd className='px-1 py-0.5 font-semibold text-foreground bg-card border border-border rounded text-xs shadow-md'>
{capitalize({ str: key, lower: true })}
{lowercase
? key
: capitalize({ str: key, lower: true })}
</kbd>
)}
</Fragment>
Expand Down
77 changes: 76 additions & 1 deletion app/lib/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,9 @@ export const SITE_THEMES = [

export const GENERAL_SHORTCUTS: ShortcutConfig[] = [
{
description: 'Fullscreen',
key: 'F11',
modifiers: {},
description: 'Fullscreen',
},
]

Expand Down Expand Up @@ -101,6 +101,79 @@ export const FORMATTING_SHORTCUTS: ShortcutConfig[] = [
},
]

export const MARKDOWN_SHORTCUTS: ShortcutConfig[] = [
{
description: 'Heading 2',
key: '##',
modifiers: {},
},
{
description: 'Heading 3',
key: '###',
modifiers: {},
},
{
description: 'Heading 4',
key: '####',
modifiers: {},
},
{
description: 'Bulleted List',
key: '-',
modifiers: {},
},
{
description: 'Numbered List',
key: '1.',
modifiers: {},
},
{
description: 'Bold',
key: '**text**',
modifiers: {},
},
{
description: 'Italics',
key: '*text*',
modifiers: {},
},
{
description: 'Strikethrough',
key: '~text~',
modifiers: {},
},
{
description: 'Highlight',
key: '==text==',
modifiers: {},
},
{
description: 'Hyperlink',
key: '[text](url)',
modifiers: {},
},
{
description: 'Inline Code',
key: '`text`',
modifiers: {},
},
{
description: 'Code Block',
key: '```',
modifiers: {},
},
{
description: 'Blockquote',
key: '>',
modifiers: {},
},
{
description: 'Divider',
key: '---',
modifiers: {},
},
]

export const GETTING_STARTED_GUIDE = {
title: 'Getting started with Aurelius',
content: content,
Expand All @@ -112,11 +185,13 @@ export const ARLS_OPTIONS: SqliteQueryOptions = {
}

export const ROUTES = {
ABOUT: '/about',
BASE: '/',
EDITOR: {
BASE: '/editor',
POST: '/editor/posts',
},
PRIVACY: '/privacy',
VIEW: {
POSTS: '/posts',
WRITING_SESSIONS: '/sessions',
Expand Down
13 changes: 7 additions & 6 deletions app/lib/hooks/useKeyboardShortcuts.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const allShortcuts: AllShortcuts = {
[EditorShortcuts.BLUR]: {
description: 'Blur',
key: 'Escape',
label: 'Esc',
modifiers: {},
runInInputs: true,
},
Expand All @@ -38,12 +39,12 @@ const allShortcuts: AllShortcuts = {
[EditorShortcuts.MAIN_MENU]: {
description: 'Main Menu',
key: 'm',
modifiers: { ctrl: true, shift: true },
modifiers: {},
},
// TODO: this is a global shortcut
[EditorShortcuts.NEW_POST]: {
description: 'New Post',
key: 'n',
key: 'p',
modifiers: {},
},
// TODO: this is a global shortcut
Expand All @@ -54,13 +55,13 @@ const allShortcuts: AllShortcuts = {
},
[EditorShortcuts.RESET_EDITOR]: {
description: 'Reset Editor',
key: 'e',
key: 'r',
modifiers: {},
},
// TODO: this is a global shortcut
[EditorShortcuts.SPLASH_DIALOG]: {
description: 'Show Splash Screen',
key: 's',
description: 'Quick Start',
key: 'q',
modifiers: {},
},
[EditorShortcuts.VIEW_ALL_POSTS]: {
Expand All @@ -75,7 +76,7 @@ const allShortcuts: AllShortcuts = {
},
[EditorShortcuts.WRITING_SESSION]: {
description: 'New Writing Session',
key: 't',
key: 'w',
modifiers: {},
},
}
Expand Down
1 change: 1 addition & 0 deletions app/lib/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ export type ModifierKeys = {
}

export type ShortcutConfig = {
label?: string
description: string
global?: boolean
key: string
Expand Down

0 comments on commit 21cf082

Please sign in to comment.