diff --git a/packages/app-cli/tests/MdToHtml.ts b/packages/app-cli/tests/MdToHtml.ts index 234ceb17e5..f3bf906de3 100644 --- a/packages/app-cli/tests/MdToHtml.ts +++ b/packages/app-cli/tests/MdToHtml.ts @@ -137,6 +137,14 @@ describe('MdToHtml', function() { } })); + it('should render an empty string', (async () => { + const mdToHtml = newTestMdToHtml(); + const result = await mdToHtml.render('', null, { splitted: true }); + // The TinyMCE component checks for this exact string to apply a hack, + // so make sure it doesn't change from version to version. + expect(result.html).toBe('
'); + })); + it('should split HTML and CSS', (async () => { const mdToHtml = newTestMdToHtml(); diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx index fe1208a5ee..8d72e31009 100644 --- a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx +++ b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx @@ -66,6 +66,26 @@ function newBlockSource(language: string = '', content: string = ''): any { }; } +// In TinyMCE 5.2, when setting the body to '
', +// it would end up as '

' once rendered +// (an additional
was inserted). +// +// This behaviour was "fixed" later on, possibly in 5.6, which has this change: +// +// - Fixed getContent with text format returning a new line when the editor is empty #TINY-6281 +// +// The problem is that the list plugin was, unknown to me, relying on this
+// being present. Without it, trying to add a bullet point or checkbox on an +// empty document, does nothing. The exact reason for this is unclear +// so as a workaround we manually add this
for empty documents, +// which fixes the issue. +// +// Perhaps upgrading the list plugin (which is a fork of TinyMCE own list plugin) +// would help? +function awfulBrHack(html: string): string { + return html === '
' ? '

' : html; +} + function findEditableContainer(node: any): any { while (node) { if (node.classList && node.classList.contains('joplin-editable')) return node; @@ -822,7 +842,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => { const result = await props.markupToHtml(props.contentMarkupLanguage, props.content, markupRenderOptions({ resourceInfos: props.resourceInfos })); if (cancelled) return; - editor.setContent(result.html); + editor.setContent(awfulBrHack(result.html)); if (lastOnChangeEventInfo.current.contentKey !== props.contentKey) { // Need to clear UndoManager to avoid this problem: