diff --git a/web/app/@types/markdown-toolbar-element/index.d.ts b/web/app/@types/markdown-toolbar-element/index.d.ts index dd95648c..a8812c83 100644 --- a/web/app/@types/markdown-toolbar-element/index.d.ts +++ b/web/app/@types/markdown-toolbar-element/index.d.ts @@ -11,5 +11,7 @@ declare namespace JSX { 'md-quote': any; 'md-code': any; 'md-link': any; + 'md-unordered-list': any; + 'md-ordered-list': any; } } diff --git a/web/app/components/input/markdown-toolbar-icons/ordered-list-icon.tsx b/web/app/components/input/markdown-toolbar-icons/ordered-list-icon.tsx new file mode 100644 index 00000000..c58b1778 --- /dev/null +++ b/web/app/components/input/markdown-toolbar-icons/ordered-list-icon.tsx @@ -0,0 +1,13 @@ +/** @jsx h */ +import { h } from 'preact'; + +export default function OrderedListIcon() { + return ( + + ); +} diff --git a/web/app/components/input/markdown-toolbar-icons/unordered-list-icon.tsx b/web/app/components/input/markdown-toolbar-icons/unordered-list-icon.tsx new file mode 100644 index 00000000..a82ada9e --- /dev/null +++ b/web/app/components/input/markdown-toolbar-icons/unordered-list-icon.tsx @@ -0,0 +1,13 @@ +/** @jsx h */ +import { h } from 'preact'; + +export default function UnorderedListIcon() { + return ( + + ); +} diff --git a/web/app/components/input/markdown-toolbar.tsx b/web/app/components/input/markdown-toolbar.tsx index 66473bff..a50c9ba5 100644 --- a/web/app/components/input/markdown-toolbar.tsx +++ b/web/app/components/input/markdown-toolbar.tsx @@ -7,6 +7,8 @@ import ItalicIcon from './markdown-toolbar-icons/italic-icon'; import QuoteIcon from './markdown-toolbar-icons/quote-icon'; import CodeIcon from './markdown-toolbar-icons/code-icon'; import LinkIcon from './markdown-toolbar-icons/link-icon'; +import UnorderedListIcon from './markdown-toolbar-icons/unordered-list-icon'; +import OrderedListIcon from './markdown-toolbar-icons/ordered-list-icon'; interface Props { textareaId: string; @@ -18,6 +20,8 @@ const italicLabel = 'Add italic text '; const quoteLabel = 'Insert a quote'; const codeLabel = 'Insert a code'; const linkLabel = 'Add a link '; +const unorderedListLabel = 'Add a bulleted list'; +const orderedListLabel = 'Add a numbered list'; export default class MarkdownToolbar extends Component { render(props: RenderableProps) { @@ -45,6 +49,14 @@ export default class MarkdownToolbar extends Component { +
+ + + + + + +
); }