Add the shortcut input to the snippet editor.

source/options/markdown-toolbar-editor.tsx

@@ -226,6 +226,7 @@ type SnippetEditorState = {
   markdown: MarkdownSnippet["markdown"];
   name: MarkdownSnippet["name"];
   position: MarkdownSnippet["position"];
+  shortcut: MarkdownSnippet["shortcut"];
   toBeRemoved: boolean;
 };
 
@@ -233,7 +234,8 @@ class SnippetEditor extends Component<SnippetEditorProps, SnippetEditorState> {
   constructor(props: SnippetEditorProps) {
     super(props);
 
-    const {enabled, inDropdown, markdown, name, position} = props.snippet.value;
+    const {enabled, inDropdown, markdown, name, position, shortcut} =
+      props.snippet.value;
 
     this.state = {
       enabled,
@@ -242,6 +244,7 @@ class SnippetEditor extends Component<SnippetEditorProps, SnippetEditorState> {
       markdown,
       name,
       position,
+      shortcut,
       toBeRemoved: false,
     };
   }
@@ -277,14 +280,22 @@ class SnippetEditor extends Component<SnippetEditorProps, SnippetEditorState> {
 
   save = async () => {
     let {snippet} = this.props;
-    const {enabled, inDropdown, markdown, name, position, toBeRemoved} =
-      this.state;
+    const {
+      enabled,
+      inDropdown,
+      markdown,
+      name,
+      position,
+      shortcut,
+      toBeRemoved,
+    } = this.state;
 
     snippet.value.enabled = enabled;
     snippet.value.inDropdown = inDropdown;
     snippet.value.markdown = markdown;
     snippet.value.name = name;
     snippet.value.position = position;
+    snippet.value.shortcut = shortcut;
 
     const isBuiltin = snippet.value.id < 0;
     if (isBuiltin || toBeRemoved) {
@@ -327,6 +338,7 @@ class SnippetEditor extends Component<SnippetEditorProps, SnippetEditorState> {
       markdown,
       name,
       position,
+      shortcut,
       toBeRemoved,
     } = this.state;
 
@@ -376,6 +388,17 @@ class SnippetEditor extends Component<SnippetEditorProps, SnippetEditorState> {
             }}
           />
 
+          <input
+            class="snippet-shortcut"
+            placeholder="Shortcut"
+            title="Shortcut"
+            type="text"
+            value={shortcut}
+            onInput={(event) => {
+              onEdit(event, "shortcut");
+            }}
+          />
+
           <label class="snippet-enabled">
             Enable{" "}
             <input

source/scss/markdown-toolbar-editor.scss

@@ -139,7 +139,7 @@
     .top-controls {
       display: grid;
       gap: 8px;
-      grid-template-columns: 6rem auto max-content max-content;
+      grid-template-columns: 6rem auto 9rem max-content max-content;
       margin-bottom: 8px;
     }
 

source/storage/markdown-toolbar.ts

@@ -23,6 +23,9 @@ export type MarkdownSnippet = {
 
   /** The position of the snippet in the toolbar. */
   position: number;
+
+  /** The keyboard shortcut for this snippet. */
+  shortcut?: string;
 };
 
 /**