#299 add header format button

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

@@ -1,6 +1,10 @@
 declare namespace JSX {
   interface IntrinsicElements {
-    'markdown-toolbar': any;
+    'markdown-toolbar': {
+      for: string;
+      children?: any;
+    };
     'md-bold': any;
+    'md-header': any;
   }
 }

web/app/components/input/__control-panel/input__control-panel.scss

@@ -0,0 +1,4 @@
+.input__control-panel {
+  height: 30px;
+  background-color: #eee;
+}

web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss

@@ -1,11 +1,31 @@
 markdown-toolbar {
   display: block;
-  font-size: 16px;
-  line-height: 1.2;
-  border: 1px dashed;
-  border-radius: 2px;
+  float: right;
 }
 
-md-bold {
+.input__toolbar-item {
+  background: none;
+  border: 0;
+  color: #586069;
   display: block;
+  float: left;
+  padding: 4px 5px;
+
+  &:hover {
+    color: #0aa;
+  }
+}
+
+.input__toolbar-icon {
+  display: inline-block;
+  fill: currentColor;
+}
+
+.input__toolbar-group {
+  display: inline-block;
+  margin-left: 20px;
+}
+
+.input__toolbar-group:first-child {
+  margin-left: 0;
 }

web/app/components/input/_theme/_dark/input_theme_dark.scss

@@ -35,4 +35,15 @@
   .input__preview-wrapper {
     background: #eee;
   }
+
+  .input__toolbar-item {
+    color: #ddd;
+    &:hover {
+      color: #0aa;
+    }
+  }
+
+  .input__control-panel {
+    background-color: #333;
+  }
 }

web/app/components/input/input.scss

@@ -2,6 +2,7 @@
   position: relative;
   display: block;
   font-size: 0;
-  border: 12px solid;
+  border-style: solid;
+  border-width: 6px 12px 12px 12px;
   border-radius: 2px;
 }

web/app/components/input/input.tsx

@@ -2,7 +2,6 @@
 
 /* styles imports */
 import '@app/components/raw-content';
-import '@github/markdown-toolbar-element';
 import './styles';
 
 import { h, Component, RenderableProps } from 'preact';
@@ -14,6 +13,7 @@ import { StaticStore } from '@app/common/static_store';
 import { siteId, url, pageTitle } from '@app/common/settings';
 import { extractErrorMessageFromResponse } from '@app/utils/errorUtils';
 
+import MarkdownToolbar from './markdown-toolbar';
 import TextareaAutosize from './textarea-autosize';
 
 const RSS_THREAD_URL = `${BASE_URL}${API_BASE}/rss/post?site=${siteId}&url=${url}`;
@@ -169,10 +169,10 @@ export class Input extends Component<Props, State> {
         onSubmit={this.send}
         aria-label="New comment"
       >
+        <div className="input__control-panel">
+          <MarkdownToolbar textareaId={this.textareaId} />
+        </div>
         <div className="input__field-wrapper">
-          <markdown-toolbar for={this.textareaId}>
-            <md-bold>bold</md-bold>
-          </markdown-toolbar>
           <TextareaAutosize
             id={this.textareaId}
             ref={ref => (this.textAreaRef = ref)}

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

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function BoldIcon() {
+  return (
+    <svg className="input__toolbar-icon" viewBox="0 0 10 16" version="1.1" width="10" height="16" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        d="M1 2h3.83c2.48 0 4.3.75 4.3 2.95 0 1.14-.63 2.23-1.67 2.61v.06c1.33.3 2.3 1.23 2.3 2.86 0 2.39-1.97 3.52-4.61 3.52H1V2zm3.66 4.95c1.67 0 2.38-.66 2.38-1.69 0-1.17-.78-1.61-2.34-1.61H3.13v3.3h1.53zm.27 5.39c1.77 0 2.75-.64 2.75-1.98 0-1.27-.95-1.81-2.75-1.81h-1.8v3.8h1.8v-.01z"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function HeaderIcon() {
+  return (
+    <svg className="input__toolbar-icon" viewBox="0 0 18 16" version="1.1" width="18" height="16" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        d="M13.62 9.08L12.1 3.66h-.06l-1.5 5.42h3.08zM5.7 10.13S4.68 6.52 4.53 6.02h-.08l-1.13 4.11H5.7zM17.31 14h-2.25l-.95-3.25h-4.07L9.09 14H6.84l-.69-2.33H2.87L2.17 14H0l3.3-9.59h2.5l2.17 6.34L10.86 2h2.52l3.94 12h-.01z"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,29 @@
+/** @jsx h */
+import { h, Component, RenderableProps } from 'preact';
+import '@github/markdown-toolbar-element';
+import BoldIcon from './markdown-toolbar-icons/bold-icon';
+import HeaderIcon from './markdown-toolbar-icons/header-icon';
+
+interface Props {
+  textareaId: string;
+}
+
+const boldLabel = 'Add bold text <cmd-b>';
+const headerLabel = 'Add header text';
+
+export default class MarkdownToolbar extends Component<Props> {
+  render(props: RenderableProps<Props>) {
+    return (
+      <markdown-toolbar for={props.textareaId}>
+        <div className="input__toolbar-group">
+          <md-header className="input__toolbar-item" title={headerLabel} aria-label={headerLabel}>
+            <HeaderIcon />
+          </md-header>
+          <md-bold className="input__toolbar-item" title={boldLabel} aria-label={boldLabel}>
+            <BoldIcon />
+          </md-bold>
+        </div>
+      </markdown-toolbar>
+    );
+  }
+}

web/app/components/input/styles.ts

@@ -8,6 +8,7 @@ require('./__button/input__button.scss');
 require('./__button/_type/_preview/input__button_type_preview.scss');
 require('./__button/_type/_send/input__button_type_send.scss');
 
+require('./__control-panel/input__control-panel.scss');
 require('./__counter/input__counter.scss');
 require('./__error/input__error.scss');
 require('./__field/input__field.scss');