Lexical: Only allow headings if supported by backend

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/compose/editor/index.tsx

@@ -71,55 +71,53 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
 
   const [suggestionsHidden, setSuggestionsHidden] = useState(true);
 
-  const initialConfig: InitialConfigType = useMemo(function() {
-    return {
-      namespace: 'ComposeForm',
-      onError: console.error,
-      nodes,
-      theme: {
-        hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
-        mention: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
-        text: {
-          bold: 'font-bold',
-          code: 'font-mono',
-          italic: 'italic',
-          strikethrough: 'line-through',
-          underline: 'underline',
-          underlineStrikethrough: 'underline-line-through',
-        },
-        heading: {
-          h1: 'text-2xl font-bold',
-          h2: 'text-xl font-bold',
-          h3: 'text-lg font-semibold',
-        },
+  const initialConfig: InitialConfigType = useMemo(() => ({
+    namespace: 'ComposeForm',
+    onError: console.error,
+    nodes,
+    theme: {
+      hashtag: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
+      mention: 'hover:underline text-primary-600 dark:text-accent-blue hover:text-primary-800 dark:hover:text-accent-blue',
+      text: {
+        bold: 'font-bold',
+        code: 'font-mono',
+        italic: 'italic',
+        strikethrough: 'line-through',
+        underline: 'underline',
+        underlineStrikethrough: 'underline-line-through',
       },
-      editorState: dispatch((_, getState) => {
-        const state = getState();
-        const compose = state.compose.get(composeId);
+      heading: {
+        h1: 'text-2xl font-bold',
+        h2: 'text-xl font-bold',
+        h3: 'text-lg font-semibold',
+      },
+    },
+    editorState: dispatch((_, getState) => {
+      const state = getState();
+      const compose = state.compose.get(composeId);
 
-        if (!compose) return;
+      if (!compose) return;
 
-        if (compose.editorState) {
-          return compose.editorState;
+      if (compose.editorState) {
+        return compose.editorState;
+      }
+
+      return function() {
+        if (compose.content_type === 'text/markdown') {
+          $convertFromMarkdownString(compose.text, TO_WYSIWYG_TRANSFORMERS);
+        } else {
+          const paragraph = $createParagraphNode();
+          const textNode = $createTextNode(compose.text);
+
+          paragraph.append(textNode);
+
+          $getRoot()
+            .clear()
+            .append(paragraph);
         }
-
-        return function() {
-          if (compose.content_type === 'text/markdown') {
-            $convertFromMarkdownString(compose.text, TO_WYSIWYG_TRANSFORMERS);
-          } else {
-            const paragraph = $createParagraphNode();
-            const textNode = $createTextNode(compose.text);
-
-            paragraph.append(textNode);
-
-            $getRoot()
-              .clear()
-              .append(paragraph);
-          }
-        };
-      }),
-    };
-  }, []);
+      };
+    }),
+  }), []);
 
   const [floatingAnchorElem, setFloatingAnchorElem] =
     useState<HTMLDivElement | null>(null);

app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx

@@ -45,6 +45,7 @@ import * as React from 'react';
 import { createPortal } from 'react-dom';
 
 import { Icon } from 'soapbox/components/ui';
+import { useInstance } from 'soapbox/hooks';
 
 import { getDOMRangeRect } from '../utils/get-dom-range-rect';
 import { getSelectedNode } from '../utils/get-selected-node';
@@ -104,6 +105,8 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
   blockType: keyof typeof blockTypeToBlockName
   icon: string
 }) => {
+  const instance = useInstance();
+
   const [showDropDown, setShowDropDown] = useState(false);
 
   const formatParagraph = () => {
@@ -205,21 +208,25 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
               active={blockType === 'paragraph'}
               icon={blockTypeToIcon.paragraph}
             />
-            <ToolbarButton
-              onClick={() => formatHeading('h1')}
-              active={blockType === 'h1'}
-              icon={blockTypeToIcon.h1}
-            />
-            <ToolbarButton
-              onClick={() => formatHeading('h2')}
-              active={blockType === 'h2'}
-              icon={blockTypeToIcon.h2}
-            />
-            <ToolbarButton
-              onClick={() => formatHeading('h3')}
-              active={blockType === 'h3'}
-              icon={blockTypeToIcon.h3}
-            />
+            {instance.pleroma.getIn(['metadata', 'markup', 'allow_headings']) === true && (
+              <>
+                <ToolbarButton
+                  onClick={() => formatHeading('h1')}
+                  active={blockType === 'h1'}
+                  icon={blockTypeToIcon.h1}
+                />
+                <ToolbarButton
+                  onClick={() => formatHeading('h2')}
+                  active={blockType === 'h2'}
+                  icon={blockTypeToIcon.h2}
+                />
+                <ToolbarButton
+                  onClick={() => formatHeading('h3')}
+                  active={blockType === 'h3'}
+                  icon={blockTypeToIcon.h3}
+                />
+              </>
+            )}
             <ToolbarButton
               onClick={formatBulletList}
               active={blockType === 'bullet'}