diff --git a/app/soapbox/features/compose/editor/index.tsx b/app/soapbox/features/compose/editor/index.tsx index 9678fd280..4c7388998 100644 --- a/app/soapbox/features/compose/editor/index.tsx +++ b/app/soapbox/features/compose/editor/index.tsx @@ -71,55 +71,53 @@ const ComposeEditor = React.forwardRef(({ 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(null); diff --git a/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx b/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx index df05e2967..078f1822e 100644 --- a/app/soapbox/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx +++ b/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} /> - formatHeading('h1')} - active={blockType === 'h1'} - icon={blockTypeToIcon.h1} - /> - formatHeading('h2')} - active={blockType === 'h2'} - icon={blockTypeToIcon.h2} - /> - formatHeading('h3')} - active={blockType === 'h3'} - icon={blockTypeToIcon.h3} - /> + {instance.pleroma.getIn(['metadata', 'markup', 'allow_headings']) === true && ( + <> + formatHeading('h1')} + active={blockType === 'h1'} + icon={blockTypeToIcon.h1} + /> + formatHeading('h2')} + active={blockType === 'h2'} + icon={blockTypeToIcon.h2} + /> + formatHeading('h3')} + active={blockType === 'h3'} + icon={blockTypeToIcon.h3} + /> + + )}