Add Content-Type back as a toggle button

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -27,6 +27,7 @@ import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
 import { CharacterCounter } from './character_counter';
+import { ContentTypeButton } from './content_type_button';
 import { EditIndicator } from './edit_indicator';
 import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
@@ -297,6 +298,7 @@ class ComposeForm extends ImmutablePureComponent {
                 <UploadButtonContainer />
                 <PollButtonContainer />
                 <SpoilerButtonContainer />
+                <ContentTypeButton />
                 <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
                 <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
               </div>

app/javascript/flavours/glitch/features/compose/components/content_type_button.jsx

@@ -0,0 +1,53 @@
+import { useCallback } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import CodeIcon from '@/material-icons/400-24px/code.svg?react';
+import MarkdownIcon from '@/material-icons/400-24px/markdown.svg?react';
+import { changeComposeContentType } from 'flavours/glitch/actions/compose';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/store';
+
+const messages = defineMessages({
+  disable_html: { id: 'compose.advanced_formatting.disable_html', defaultMessage: 'Disable HTML advanced formatting' },
+  disable_markdown: { id: 'compose.advanced_formatting.disable_markdown', defaultMessage: 'Disable Markdown advanced formatting' },
+  enable_markdown: { id: 'compose.advanced_formatting.enable_markdown', defaultMessage: 'Enable Markdown advanced formatting' },
+});
+
+export const ContentTypeButton = () => {
+  const intl = useIntl();
+
+  const showButton = useAppSelector((state) => state.getIn(['local_settings', 'show_content_type_choice']));
+  const contentType = useAppSelector((state) => state.getIn(['compose', 'content_type']));
+  const dispatch = useAppDispatch();
+
+  const handleClick = useCallback(() => {
+    dispatch(changeComposeContentType(contentType === 'text/plain' ? 'text/markdown' : 'text/plain'));
+  }, [contentType, dispatch]);
+
+  if (!showButton) {
+    return null;
+  }
+
+  const active = contentType !== 'text/plain';
+  const iconComponent = contentType === 'text/html' ? CodeIcon : MarkdownIcon;
+  const icon = contentType === 'text/html' ? 'code' : 'arrow-circle-down';
+
+  const title = {
+    'text/html': intl.formatMessage(messages.disable_html),
+    'text/markdown': intl.formatMessage(messages.disable_markdown),
+    'text/plain': intl.formatMessage(messages.enable_markdown),
+  }[contentType];
+
+  return (
+    <IconButton
+      onClick={handleClick}
+      icon={icon}
+      iconComponent={iconComponent}
+      title={title}
+      active={active}
+      size={18}
+      inverted
+    />
+  );
+};