mynode/packages/app-desktop/gui/NoteEditor/WarningBanner/WarningBanner.tsx

import * as React from 'react';
import { connect } from 'react-redux';
import { AppState } from '../../../app.reducer';
import Setting from '@joplin/lib/models/Setting';
import BannerContent from './BannerContent';
import { _ } from '@joplin/lib/locale';
import onRichTextReadMoreLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextReadMoreLinkClick';
import onRichTextDismissLinkClick from '@joplin/lib/components/shared/NoteEditor/WarningBanner/onRichTextDismissLinkClick';
import useEditorTypeMigrationBanner from '@joplin/lib/components/shared/NoteEditor/WarningBanner/useEditorTypeMigrationBanner';
import { useMemo } from 'react';
import { PluginStates } from '@joplin/lib/services/plugins/reducer';
import PluginService from '@joplin/lib/services/plugins/PluginService';
import { NoteBodyEditorType } from '../utils/types';

interface Props {
	bodyEditor: NoteBodyEditorType;
	lockedInShare: boolean;
	editorMigrationVersion: number;
	richTextBannerDismissed: boolean;
	inEditorRenderingEnabled: boolean;
	pluginCompatibilityBannerDismissedFor: string[];
	plugins: PluginStates;
}

const onSwitchToLegacyEditor = () => {
	Setting.setValue('editor.legacyMarkdown', true);
};

const onDismissLegacyEditorPrompt = () => {
	Setting.setValue('editor.pluginCompatibilityBannerDismissedFor', [...PluginService.instance().pluginIds]);
};

const incompatiblePluginIds = [
	// cSpell:disable
	'com.septemberhx.Joplin.Enhancement',
	'ylc395.noteLinkSystem',
	'joplin.plugin.cmoptions',
	'com.asdibiase.joplin-languagetool',
	// cSpell:enable
];

const WarningBanner: React.FC<Props> = props => {

	const editorMigrationMessage = useEditorTypeMigrationBanner({
		markdownEditorEnabled: props.bodyEditor === 'CodeMirror6',
		editorMigrationVersion: props.editorMigrationVersion,
		inEditorRenderingEnabled: props.inEditorRenderingEnabled,
	});
	const editorMigrationBanner = (
		<BannerContent
			visible={editorMigrationMessage.enabled}
			acceptMessage={editorMigrationMessage.keepEnabled.label}
			onAccept={editorMigrationMessage.keepEnabled.onPress}
			onDismiss={editorMigrationMessage.disable.onPress}
			dismissMessage={editorMigrationMessage.disable.label}
		>{editorMigrationMessage.label}</BannerContent>
	);

	const lockedInShareBanner = (
		<BannerContent visible={props.lockedInShare}>
			{_('This note is read-only because it is locked and contained within a share. To enable editing, it must be moved outside of the share.')}
		</BannerContent>
	);

	const wysiwygBanner = (
		<BannerContent
			acceptMessage={_('Read more about it')}
			onAccept={onRichTextReadMoreLinkClick}
			onDismiss={onRichTextDismissLinkClick}
			visible={props.bodyEditor === 'TinyMCE' && !props.richTextBannerDismissed}
		>
			{_('This Rich Text editor has a number of limitations and it is recommended to be aware of them before using it.')}
		</BannerContent>
	);

	const incompatiblePluginNames = useMemo(() => {
		if (props.bodyEditor !== 'CodeMirror6') {
			return [];
		}

		const runningPluginIds = Object.keys(props.plugins);

		return runningPluginIds.map((id): string|string[] => {
			if (props.pluginCompatibilityBannerDismissedFor?.includes(id)) {
				return [];
			}

			if (incompatiblePluginIds.includes(id)) {
				return PluginService.instance().pluginById(id).manifest.name;
			} else {
				return [];
			}
		}).flat();
	}, [props.bodyEditor, props.plugins, props.pluginCompatibilityBannerDismissedFor]);

	const markdownPluginBanner = (
		<BannerContent
			acceptMessage={_('Switch to the legacy editor')}
			onAccept={onSwitchToLegacyEditor}
			onDismiss={onDismissLegacyEditorPrompt}
			visible={incompatiblePluginNames.length > 0}
		>
			{_('The following plugins may not support the current markdown editor:')}
			<ul>
				{incompatiblePluginNames.map((name, index) => <li key={index}>{name}</li>)}
			</ul>
		</BannerContent>
	);

	return <>
		{lockedInShareBanner}
		{wysiwygBanner}
		{markdownPluginBanner}
		{editorMigrationBanner}
	</>;
};

export default connect((state: AppState) => {
	return {
		richTextBannerDismissed: state.settings.richTextBannerDismissed,
		pluginCompatibilityBannerDismissedFor: state.settings['editor.pluginCompatibilityBannerDismissedFor'],
		plugins: state.pluginService.plugins,
		editorMigrationVersion: state.settings['editor.migration'],
		inEditorRenderingEnabled: state.settings['editor.inlineRendering'],
	};
})(WarningBanner);