#299 add code format button

web/app/@types/markdown-toolbar-element/index.d.ts

@@ -9,5 +9,6 @@ declare namespace JSX {
     'md-header': any;
     'md-italic': any;
     'md-quote': any;
+    'md-code': any;
   }
 }

web/app/components/input/markdown-toolbar-icons/code-icon.tsx

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function CodeIcon() {
+  return (
+    <svg className="input__toolbar-icon" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        d="M9.5 3L8 4.5 11.5 8 8 11.5 9.5 13 14 8 9.5 3zm-5 0L0 8l4.5 5L6 11.5 2.5 8 6 4.5 4.5 3z"
+      />
+    </svg>
+  );
+}

web/app/components/input/markdown-toolbar.tsx

@@ -5,6 +5,7 @@ import BoldIcon from './markdown-toolbar-icons/bold-icon';
 import HeaderIcon from './markdown-toolbar-icons/header-icon';
 import ItalicIcon from './markdown-toolbar-icons/italic-icon';
 import QuoteIcon from './markdown-toolbar-icons/quote-icon';
+import CodeIcon from './markdown-toolbar-icons/code-icon';
 
 interface Props {
   textareaId: string;
@@ -13,7 +14,8 @@ interface Props {
 const boldLabel = 'Add bold text <cmd-b>';
 const headerLabel = 'Add header text';
 const italicLabel = 'Add italic text <cmd-i>';
-const quoteLabel = 'Add italic text <cmd-i>';
+const quoteLabel = 'Insert a quote';
+const codeLabel = 'Insert a code';
 
 export default class MarkdownToolbar extends Component<Props> {
   render(props: RenderableProps<Props>) {
@@ -34,6 +36,9 @@ export default class MarkdownToolbar extends Component<Props> {
           <md-quote className="input__toolbar-item" title={quoteLabel} aria-label={quoteLabel}>
             <QuoteIcon />
           </md-quote>
+          <md-code className="input__toolbar-item" title={codeLabel} aria-label={codeLabel}>
+            <CodeIcon />
+          </md-code>
         </div>
       </markdown-toolbar>
     );