diff --git a/README.md b/README.md index f7b6c91a4f..0b2509ecae 100644 --- a/README.md +++ b/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 diff --git a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx b/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx index 0996d6b73c..32d72a14bc 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteEditor.tsx +++ b/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 : ( -
- 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 introduction post 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 : ( +
+ {_('This Rich Text editor has a number of limitations and it is recommended to be aware of them before using it.')} +   [ {_('Read more about it')} ] +   [ {_('Dismiss')} ]
); @@ -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, diff --git a/packages/app-desktop/gui/NoteEditor/styles/index.ts b/packages/app-desktop/gui/NoteEditor/styles/index.ts index 6600652dc4..f64c3d0474 100644 --- a/packages/app-desktop/gui/NoteEditor/styles/index.ts +++ b/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%', diff --git a/packages/app-desktop/gui/NoteEditor/utils/types.ts b/packages/app-desktop/gui/NoteEditor/utils/types.ts index 94f015989f..837048e690 100644 --- a/packages/app-desktop/gui/NoteEditor/utils/types.ts +++ b/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 { diff --git a/packages/lib/models/Setting.ts b/packages/lib/models/Setting.ts index 6ec2c0ac8b..8b1990edea 100644 --- a/packages/lib/models/Setting.ts +++ b/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(), diff --git a/readme/rich_text_editor.md b/readme/rich_text_editor.md new file mode 100644 index 0000000000..97dbdd67ac --- /dev/null +++ b/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/). \ No newline at end of file