matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: support headings in wysiwyg editor on non-pleroma software

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-08-11 10:38:36 +02:00
parent b06bfcc6f1
commit aa5bbce5d0
4 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/pl-api/lib/features.ts
View File

@ -536,6 +536,13 @@ const getFeatures = (instance: Instance) => {
circles: instance.api_versions['kmyblue_circle_history.fedibird.pl-api'] >= 1,
composeAllowHeadings: any([
v.software !== PLEROMA && v.software !== AKKOMA,
instance.pleroma.metadata.markup.allow_headings,
]),
composeAllowInlineImages: instance.pleroma.metadata.markup.allow_inline_images,
/**
* Mastodon's newer solution for direct messaging.
* @see {@link https://docs.joinmastodon.org/methods/conversations/}

8
packages/pl-fe/src/features/compose/editor/nodes/index.ts
View File

@ -11,7 +11,7 @@ import { ListItemNode, ListNode } from '@lexical/list';
import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { EmojiNode } from './emoji-node';
import { ImageNode } from './image-node';
@ -20,7 +20,7 @@ import { MentionNode } from './mention-node';
import type { Klass, LexicalNode } from 'lexical';
const useNodes = (isWysiwyg?: boolean) => {
const instance = useInstance();
const { composeAllowHeadings, composeAllowInlineImages } = useFeatures();
const nodes: Array<Klass<LexicalNode>> = [
AutoLinkNode,
@ -41,8 +41,8 @@ const useNodes = (isWysiwyg?: boolean) => {
);
}
if (instance.pleroma.metadata.markup.allow_headings) nodes.push(HeadingNode);
if (instance.pleroma.metadata.markup.allow_inline_images) nodes.push(ImageNode);
if (composeAllowHeadings) nodes.push(HeadingNode);
if (composeAllowInlineImages) nodes.push(ImageNode);
return nodes;
};

7
packages/pl-fe/src/features/compose/editor/plugins/floating-block-type-toolbar-plugin.tsx
View File

@ -24,6 +24,7 @@ import { defineMessages, useIntl } from 'react-intl';
import { uploadFile } from 'pl-fe/actions/compose';
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { $createImageNode } from '../nodes/image-node';
@ -101,9 +102,7 @@ const BlockTypeFloatingToolbar = ({
}): JSX.Element => {
const intl = useIntl();
const popupCharStylesEditorRef = useRef<HTMLDivElement | null>(null);
const instance = useInstance();
const allowInlineImages = instance.pleroma.metadata.markup.allow_inline_images;
const { composeAllowInlineImages } = useFeatures();
const updateBlockTypeFloatingToolbar = useCallback(() => {
const selection = $getSelection();
@ -202,7 +201,7 @@ const BlockTypeFloatingToolbar = ({
>
{editor.isEditable() && (
<>
{allowInlineImages && <UploadButton onSelectFile={createImage} />}
{composeAllowInlineImages && <UploadButton onSelectFile={createImage} />}
<ToolbarButton
onClick={createHorizontalLine}
aria-label={intl.formatMessage(messages.createHorizontalLine)}

6
packages/pl-fe/src/features/compose/editor/plugins/floating-text-format-toolbar-plugin.tsx
View File

@ -40,7 +40,7 @@ import { createPortal } from 'react-dom';
import { defineMessages, useIntl } from 'react-intl';
import Icon from 'pl-fe/components/ui/icon';
import { useInstance } from 'pl-fe/hooks/use-instance';
import { useFeatures } from 'pl-fe/hooks/use-features';
import { getDOMRangeRect } from '../utils/get-dom-range-rect';
import { getSelectedNode } from '../utils/get-selected-node';
@ -109,7 +109,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
blockType: keyof typeof blockTypeToBlockName;
icon: string;
}) => {
const instance = useInstance();
const { composeAllowHeadings } = useFeatures();
const [showDropDown, setShowDropDown] = useState(false);
@ -200,7 +200,7 @@ const BlockTypeDropdown = ({ editor, anchorElem, blockType, icon }: {
active={blockType === 'paragraph'}
icon={blockTypeToIcon.paragraph}
/>
{instance.pleroma.metadata.markup.allow_headings === true && (
{composeAllowHeadings && (
<>
<ToolbarButton
onClick={() => formatHeading('h1')}