umputun#299 add italic format button

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

@@ -3,8 +3,10 @@ declare namespace JSX {
     'markdown-toolbar': {
       for: string;
       children?: any;
+      className: string;
     };
     'md-bold': any;
     'md-header': any;
+    'md-italic': any;
   }
 }

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

@@ -1,4 +1,4 @@
-markdown-toolbar {
+.input__toolbar {
   display: block;
   float: right;
 }

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

@@ -0,0 +1,13 @@
+/** @jsx h */
+import { h } from 'preact';
+
+export default function ItalicIcon() {
+  return (
+    <svg className="input__toolbar-icon" viewBox="0 0 6 16" version="1.1" width="6" height="16" aria-hidden="true">
+      <path
+        fill-rule="evenodd"
+        d="M2.81 5h1.98L3 14H1l1.81-9zm.36-2.7c0-.7.58-1.3 1.33-1.3.56 0 1.13.38 1.13 1.03 0 .75-.59 1.3-1.33 1.3-.58 0-1.13-.38-1.13-1.03z"
+      />
+    </svg>
+  );
+}

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

@@ -3,25 +3,30 @@ 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';
+import ItalicIcon from './markdown-toolbar-icons/italic-icon';
 
 interface Props {
   textareaId: string;
 }
 
 const boldLabel = 'Add bold text <cmd-b>';
 const headerLabel = 'Add header text';
+const italicLabel = 'Add italic text <cmd-i>';
 
 export default class MarkdownToolbar extends Component<Props> {
   render(props: RenderableProps<Props>) {
     return (
-      <markdown-toolbar for={props.textareaId}>
+      <markdown-toolbar className="input__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>
+          <md-italic className="input__toolbar-item" title={italicLabel} aria-label={italicLabel}>
+            <ItalicIcon />
+          </md-italic>
         </div>
       </markdown-toolbar>
     );