diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts b/web/app/@types/markdown-toolbar-element/index.d.ts
index d5eaab75..b7849c6a 100644
--- a/web/app/@types/markdown-toolbar-element/index.d.ts
+++ b/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;
}
}
diff --git a/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
index 7db3f8ba..1122ca4e 100644
--- a/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
+++ b/web/app/components/input/__markdown-toolbar/input__markdown-toolbar.scss
@@ -1,4 +1,4 @@
-markdown-toolbar {
+.input__toolbar {
display: block;
float: right;
}
diff --git a/web/app/components/input/markdown-toolbar-icons/italic-icon.tsx b/web/app/components/input/markdown-toolbar-icons/italic-icon.tsx
new file mode 100644
index 00000000..19fec985
--- /dev/null
+++ b/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 (
+
+ );
+}
diff --git a/web/app/components/input/markdown-toolbar.tsx b/web/app/components/input/markdown-toolbar.tsx
index 40183ebf..3ff6b30d 100644
--- a/web/app/components/input/markdown-toolbar.tsx
+++ b/web/app/components/input/markdown-toolbar.tsx
@@ -3,6 +3,7 @@ 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;
@@ -10,11 +11,12 @@ interface Props {
const boldLabel = 'Add bold text ';
const headerLabel = 'Add header text';
+const italicLabel = 'Add italic text ';
export default class MarkdownToolbar extends Component {
render(props: RenderableProps) {
return (
-
+
@@ -22,6 +24,9 @@ export default class MarkdownToolbar extends Component {
+
+
+
);