+ );
+};
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
new file mode 100644
index 0000000000..2f1adf2fd1
--- /dev/null
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
@@ -0,0 +1,125 @@
+import PropTypes from 'prop-types';
+import { PureComponent } from 'react';
+
+import classNames from 'classnames';
+
+import { supportsPassiveEvents } from 'detect-passive-events';
+
+import { Icon } from 'flavours/glitch/components/icon';
+
+const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
+
+// copied from PrivacyDropdown; will require refactor with upstream down the line
+class DropdownMenu extends PureComponent {
+
+ static propTypes = {
+ style: PropTypes.object,
+ items: PropTypes.array.isRequired,
+ value: PropTypes.string.isRequired,
+ onClose: PropTypes.func.isRequired,
+ onChange: PropTypes.func.isRequired,
+ };
+
+ handleDocumentClick = e => {
+ if (this.node && !this.node.contains(e.target)) {
+ this.props.onClose();
+ e.stopPropagation();
+ }
+ };
+
+ handleKeyDown = e => {
+ const { items } = this.props;
+ const value = e.currentTarget.getAttribute('data-index');
+ const index = items.findIndex(item => {
+ return (item.value === value);
+ });
+ let element = null;
+
+ switch(e.key) {
+ case 'Escape':
+ this.props.onClose();
+ break;
+ case 'Enter':
+ this.handleClick(e);
+ break;
+ case 'ArrowDown':
+ element = this.node.childNodes[index + 1] || this.node.firstChild;
+ break;
+ case 'ArrowUp':
+ element = this.node.childNodes[index - 1] || this.node.lastChild;
+ break;
+ case 'Tab':
+ if (e.shiftKey) {
+ element = this.node.childNodes[index - 1] || this.node.lastChild;
+ } else {
+ element = this.node.childNodes[index + 1] || this.node.firstChild;
+ }
+ break;
+ case 'Home':
+ element = this.node.firstChild;
+ break;
+ case 'End':
+ element = this.node.lastChild;
+ break;
+ }
+
+ if (element) {
+ element.focus();
+ this.props.onChange(element.getAttribute('data-index'));
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ };
+
+ handleClick = e => {
+ const value = e.currentTarget.getAttribute('data-index');
+
+ e.preventDefault();
+
+ this.props.onClose();
+ this.props.onChange(value);
+ };
+
+ componentDidMount () {
+ document.addEventListener('click', this.handleDocumentClick, { capture: true });
+ document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
+ if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
+ }
+
+ componentWillUnmount () {
+ document.removeEventListener('click', this.handleDocumentClick, { capture: true });
+ document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+ }
+
+ setRef = c => {
+ this.node = c;
+ };
+
+ setFocusRef = c => {
+ this.focusedItem = c;
+ };
+
+ render () {
+ const { style, items, value } = this.props;
+
+ return (
+
+ {items.map(item => (
+
+
+
+
+
+
+ {item.text}
+ {item.meta}
+
+
+ ))}
+
+ );
+ }
+
+}
+
+export default DropdownMenu;
diff --git a/app/javascript/flavours/glitch/locales/en.json b/app/javascript/flavours/glitch/locales/en.json
index b513e837b9..1fd648c6e0 100644
--- a/app/javascript/flavours/glitch/locales/en.json
+++ b/app/javascript/flavours/glitch/locales/en.json
@@ -14,6 +14,13 @@
"column_subheading.lists": "Lists",
"column_subheading.navigation": "Navigation",
"community.column_settings.allow_local_only": "Show local-only toots",
+ "compose.content-type.change": "Change advanced formatting options",
+ "compose.content-type.html": "HTML",
+ "compose.content-type.html_meta": "Format your posts using HTML",
+ "compose.content-type.markdown": "Markdown",
+ "compose.content-type.markdown_meta": "Format your posts using Markdown",
+ "compose.content-type.plain": "Plain text",
+ "compose.content-type.plain_meta": "Write with no advanced formatting",
"compose_form.sensitive.hide": "{count, plural, one {Mark media as sensitive} other {Mark media as sensitive}}",
"compose_form.sensitive.marked": "{count, plural, one {Media is marked as sensitive} other {Media is marked as sensitive}}",
"compose_form.sensitive.unmarked": "{count, plural, one {Media is not marked as sensitive} other {Media is not marked as sensitive}}",