Add content_type selector to the compose box

Author: Steffo99

src/components/ICONS.jsx

@@ -174,4 +174,9 @@ export const ICONS = {
   'heart-break': () => import('@iconify-icons/mingcute/heart-crack-line'),
   'user-x': () => import('@iconify-icons/mingcute/user-x-line'),
   minimize: () => import('@iconify-icons/mingcute/arrows-down-line'),
+  'font': () => import('@iconify-icons/mingcute/font-line'),
+  'brackets-angle': () => import('@iconify-icons/mingcute/brackets-angle-line'),
+  'asterisk': () => import('@iconify-icons/mingcute/asterisk-line'),
+  'brackets': () => import('@iconify-icons/mingcute/brackets-line'),
+  'currency-dollar-2': () => import('@iconify-icons/mingcute/currency-dollar-2-line'),
 };

src/components/compose.jsx

@@ -51,6 +51,7 @@ import {
 import supports from '../utils/supports';
 import useCloseWatcher from '../utils/useCloseWatcher';
 import useInterval from '../utils/useInterval';
+import contentTypesIconMap from '../utils/content-types-icon-map.js';
 import visibilityIconsMap from '../utils/visibility-icons-map';
 
 import AccountBlock from './account-block';
@@ -248,6 +249,7 @@ function Compose({
   const textareaRef = useRef();
   const spoilerTextRef = useRef();
   const [visibility, setVisibility] = useState('public');
+  const [contentType, setContentType] = useState('text/plain');
   const [sensitive, setSensitive] = useState(false);
   const [language, setLanguage] = useState(
     store.session.get('currentLanguage') || DEFAULT_LANG,
@@ -1064,6 +1066,9 @@ function Compose({
                   // params.inReplyToId = replyToStatus?.id || undefined;
                   params.in_reply_to_id = replyToStatus?.id || undefined;
                 }
+                if (supports('@akkoma/post-content-type')) {
+                  params.content_type = contentType;
+                }
                 params = removeNullUndefined(params);
                 console.log('POST', params);
 
@@ -1150,6 +1155,38 @@ function Compose({
               />
               <Icon icon={`eye-${sensitive ? 'close' : 'open'}`} />
             </label>{' '}
+            {supports('@akkoma/post-content-type') && (
+              <>
+                <label class={`toolbar-button ${contentType !== 'text/plain' && !sensitive ? 'show-field' : ''} ${contentType !== 'text/plain' ? 'highlight' : ''}`}>
+                  <Icon icon={contentTypesIconMap[contentType]} alt={visibility} />
+                  <select
+                    name={'contentType'}
+                    value={contentType}
+                    onChange={(e) => {
+                      setContentType(e.target.value);
+                    }}
+                    disabled={uiState === 'loading'}
+                    dir={'auto'}
+                  >
+                    <option value="text/plain">
+                      <Trans>Plain text</Trans>
+                    </option>
+                    <option value="text/html">
+                      <Trans>HTML</Trans>
+                    </option>
+                    <option value="text/markdown">
+                      <Trans>Markdown</Trans>
+                    </option>
+                    <option value="text/bbcode">
+                      <Trans>BBCode</Trans>
+                    </option>
+                    <option value="text/x.misskeymarkdown">
+                      <Trans>MFM</Trans>
+                    </option>
+                  </select>
+                </label>{' '}
+              </>
+            )}
             <label
               class={`toolbar-button ${
                 visibility !== 'public' && !sensitive ? 'show-field' : ''

src/utils/content-types-icon-map.js

@@ -0,0 +1,7 @@
+export default {
+  "text/plain": 'font',
+  "text/html": 'brackets-angle',
+  "text/markdown": 'asterisk',
+  "text/bbcode": 'brackets',
+  "text/x.misskeymarkdown": 'currency-dollar-2',
+};

src/utils/supports.js

@@ -24,6 +24,7 @@ const platformFeatures = {
   '@pixelfed/global-feed': containPixelfed,
   '@pleroma/local-visibility-post': containPleroma,
   '@akkoma/local-visibility-post': containAkkoma,
+  '@akkoma/post-content-type': containAkkoma,
 };
 const supportsCache = {};