From 8fb147e8b45139036ff50ed8b236c9b35ea47e48 Mon Sep 17 00:00:00 2001
From: konstantin krivlenia <krivlenia@gmail.com>
Date: Fri, 12 Apr 2019 20:41:36 +0300
Subject: [PATCH] #299 add code format button

---
 web/app/@types/markdown-toolbar-element/index.d.ts  |  1 +
 .../input/markdown-toolbar-icons/code-icon.tsx      | 13 +++++++++++++
 web/app/components/input/markdown-toolbar.tsx       |  7 ++++++-
 3 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 web/app/components/input/markdown-toolbar-icons/code-icon.tsx

diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts b/web/app/@types/markdown-toolbar-element/index.d.ts
index 2278aab9..64f9e96d 100644
--- a/web/app/@types/markdown-toolbar-element/index.d.ts
+++ b/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;
   }
 }
diff --git a/web/app/components/input/markdown-toolbar-icons/code-icon.tsx b/web/app/components/input/markdown-toolbar-icons/code-icon.tsx
new file mode 100644
index 00000000..d2312313
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/app/components/input/markdown-toolbar.tsx b/web/app/components/input/markdown-toolbar.tsx
index 58f2fccb..c01ce2dc 100644
--- a/web/app/components/input/markdown-toolbar.tsx
+++ b/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>
     );