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: