Desktop: Added doc about Rich Text editor and added way to dismiss warning banner

README.md

@@ -84,6 +84,7 @@ The Web Clipper is a browser extension that allows you to save web pages and scr
 	- [How to enable end-to-end encryption](https://github.com/laurent22/joplin/blob/dev/readme/e2ee.md)
 	- [What is a conflict?](https://github.com/laurent22/joplin/blob/dev/readme/conflict.md)
 	- [How to enable debug mode](https://github.com/laurent22/joplin/blob/dev/readme/debugging.md)
+	- [About the Rich Text editor limitations](https://github.com/laurent22/joplin/blob/dev/readme/rich_text_editor.md)
 	- [FAQ](https://github.com/laurent22/joplin/blob/dev/readme/faq.md)
 
 - Joplin API - Get Started

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

@@ -283,10 +283,6 @@ function NoteEditor(props: NoteEditorProps) {
 
 	const onMessage = useMessageHandler(scrollWhenReady, setScrollWhenReady, editorRef, setLocalSearchResultCount, props.dispatch, formNote);
 
-	const introductionPostLinkClick = useCallback(() => {
-		bridge().openExternal('https://www.patreon.com/posts/34246624');
-	}, []);
-
 	const externalEditWatcher_noteChange = useCallback((event) => {
 		if (event.id === formNote.id) {
 			const newFormNote = {
@@ -414,9 +410,19 @@ function NoteEditor(props: NoteEditorProps) {
 		throw new Error(`Invalid editor: ${props.bodyEditor}`);
 	}
 
-	const wysiwygBanner = props.bodyEditor !== 'TinyMCE' ? null : (
-		<div style={{ ...styles.warningBanner }}>
-			This is an experimental Rich Text editor for evaluation only. Please do not use with important notes as you may lose some data! See the <a style={styles.urlColor} onClick={introductionPostLinkClick} href="#">introduction post</a> for more information. To switch to the Markdown Editor please press the "Toggle editors" in the top right-hand corner.
+	const onRichTextReadMoreLinkClick = useCallback(() => {
+		bridge().openExternal('https://joplinapp.org/rich_text_editor');
+	}, []);
+
+	const onRichTextDismissLinkClick = useCallback(() => {
+		Setting.setValue('richTextBannerDismissed', true);
+	}, []);
+
+	const wysiwygBanner = props.bodyEditor !== 'TinyMCE' || props.richTextBannerDismissed ? null : (
+		<div style={styles.warningBanner}>
+			{_('This Rich Text editor has a number of limitations and it is recommended to be aware of them before using it.')}
+			&nbsp;&nbsp;<a onClick={onRichTextReadMoreLinkClick} style={styles.warningBannerLink} href="#">[ {_('Read more about it')} ]</a>
+			&nbsp;&nbsp;<a onClick={onRichTextDismissLinkClick} style={styles.warningBannerLink} href="#">[ {_('Dismiss')} ]</a>
 		</div>
 	);
 
@@ -567,6 +573,7 @@ const mapStateToProps = (state: AppState) => {
 		editorNoteStatuses: state.editorNoteStatuses,
 		syncStarted: state.syncStarted,
 		themeId: state.settings.theme,
+		richTextBannerDismissed: state.settings.richTextBannerDismissed,
 		watchedNoteFiles: state.watchedNoteFiles,
 		notesParentType: state.notesParentType,
 		selectedNoteTags: state.selectedNoteTags,

packages/app-desktop/gui/NoteEditor/styles/index.ts

@@ -33,9 +33,16 @@ export default function styles(props: NoteEditorProps) {
 				fontFamily: theme.fontFamily,
 				padding: 10,
 				fontSize: theme.fontSize,
+				lineHeight: '1.6em',
 				marginTop: 5,
 				marginBottom: 5,
 			},
+			warningBannerLink: {
+				color: theme.color,
+				fontFamily: theme.fontFamily,
+				fontSize: theme.fontSize,
+				fontWeight: 'bold',
+			},
 			tinyMCE: {
 				width: '100%',
 				height: '100%',

packages/app-desktop/gui/NoteEditor/utils/types.ts

@@ -34,6 +34,7 @@ export interface NoteEditorProps {
 	plugins: PluginStates;
 	toolbarButtonInfos: ToolbarButtonInfo[];
 	setTagsToolbarButtonInfo: ToolbarButtonInfo;
+	richTextBannerDismissed: boolean;
 }
 
 export interface NoteBodyEditorProps {

packages/lib/models/Setting.ts

@@ -350,6 +350,8 @@ class Setting extends BaseModel {
 			// to the last folder that was selected.
 			activeFolderId: { value: '', type: SettingItemType.String, public: false },
 
+			richTextBannerDismissed: { value: false, type: SettingItemType.Bool, public: false },
+
 			firstStart: { value: true, type: SettingItemType.Bool, public: false },
 			locale: {
 				value: defaultLocale(),

readme/rich_text_editor.md

@@ -0,0 +1,17 @@
+# About the Rich Text editor
+
+**TLDR:** Avoid using Markdown plugins if you primarily intend to use the Rich Text editor, and be aware of the editor's limitations.
+
+At its core, Joplin stores notes in [Markdown format](https://github.com/laurent22/joplin/blob/dev/readme/markdown.md). Markdown is a simple way to format text that looks great on any device and, while it's formatted text, it still looks perfectly readable in a plain text editor.
+
+In some cases however, the extra markup format that appears in notes can be seen as a drawback. Bold text will `look **like this**` for example, and tables might not be particularly readable. For that reason, Joplin also features a Rich Text editor, which allows you to edit notes with a [WYSIWYG](https://en.wikipedia.org/wiki/WYSIWYG) editing experience. Bold text will "look **like this**" and tables will be more readable, among others.
+
+However **there is a catch**: in Joplin, notes, even when edited with this Rich Text editor, are **still Markdown** under the hood. This is generally a good thing, because it means you can switch at any time between Markdown and Rich Text editor, and the note is still readable. It is also good if you sync with the mobile application, which doesn't have a rich text editor. The catch is that since Markdown is used under the hood, it means the rich text editor has a number of limitations it inherits from that format:
+
+- For a start, **most Markdown plugins will not be compatible**. If you open a Markdown note that makes use of such plugin in the Rich Text editor, it is likely you will lose the plugin special formatting. The only supported plugins are the "fenced" plugins - those that wrap a section of text in triple backticks (for example, KaTeX, Mermaid, etc. are working). You can see on the Markdown config screen which plugins that are compatible or not.
+
+- It is not possible to have multiple new lines in a row. Because in Markdown, multiple new lines would be collapsed into one when rendered.
+
+- Tables must have a header, because this is a requirement in Markdown. When you create a table, it will let you create it without a header, but under the hood it will add an empty one. And next time you open the note, this empty header will be present.
+
+Those are the known limitations but if you notice any other issue not listed here, please let us know [in the forum](https://discourse.joplinapp.org/).