Lexical: Conditionally include nodes

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2023-05-22 18:15:43 +02:00
parent b6f4897450
commit 83ac03eb00
3 changed files with 54 additions and 38 deletions

View file

@ -32,7 +32,7 @@ const LINK_MATCHERS = [
),
];
import nodes from './nodes';
import { useNodes } from './nodes';
import AutosuggestPlugin from './plugins/autosuggest-plugin';
import FloatingLinkEditorPlugin from './plugins/floating-link-editor-plugin';
import FloatingTextFormatToolbarPlugin from './plugins/floating-text-format-toolbar-plugin';
@ -69,6 +69,7 @@ const ComposeEditor = React.forwardRef<string, IComposeEditor>(({
}, editorStateRef) => {
const dispatch = useAppDispatch();
const features = useFeatures();
const nodes = useNodes();
const [suggestionsHidden, setSuggestionsHidden] = useState(true);

View file

@ -1,37 +0,0 @@
/*
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the /app/soapbox/features/compose/editor directory.
*/
import { CodeHighlightNode, CodeNode } from '@lexical/code';
import { HashtagNode } from '@lexical/hashtag';
import { AutoLinkNode, LinkNode } from '@lexical/link';
import { ListItemNode, ListNode } from '@lexical/list';
import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import { EmojiNode } from './nodes/emoji-node';
import { MentionNode } from './nodes/mention-node';
import type { Klass, LexicalNode } from 'lexical';
const ComposeNodes: Array<Klass<LexicalNode>> = [
HeadingNode,
QuoteNode,
CodeNode,
CodeHighlightNode,
AutoLinkNode,
LinkNode,
ListItemNode,
ListNode,
HorizontalRuleNode,
HashtagNode,
EmojiNode,
MentionNode,
];
export default ComposeNodes;

View file

@ -0,0 +1,52 @@
/*
MIT License
Copyright (c) Meta Platforms, Inc. and affiliates.
This source code is licensed under the MIT license found in the
LICENSE file in the /app/soapbox/features/compose/editor directory.
*/
import { CodeHighlightNode, CodeNode } from '@lexical/code';
import { HashtagNode } from '@lexical/hashtag';
import { AutoLinkNode, LinkNode } from '@lexical/link';
import { ListItemNode, ListNode } from '@lexical/list';
import { HorizontalRuleNode } from '@lexical/react/LexicalHorizontalRuleNode';
import { HeadingNode, QuoteNode } from '@lexical/rich-text';
import { useFeatures, useInstance } from 'soapbox/hooks';
import { EmojiNode } from './emoji-node';
import { MentionNode } from './mention-node';
import type { Klass, LexicalNode } from 'lexical';
const useNodes = () => {
const features = useFeatures();
const instance = useInstance();
const nodes: Array<Klass<LexicalNode>> = [
AutoLinkNode,
HashtagNode,
EmojiNode,
MentionNode,
];
if (features.richText) {
nodes.push(
QuoteNode,
CodeNode,
CodeHighlightNode,
LinkNode,
ListItemNode,
ListNode,
HorizontalRuleNode,
);
}
if (instance.pleroma.getIn(['metadata', 'markup', 'allow_headings'])) nodes.push(HeadingNode);
return nodes;
};
export { useNodes };