Preserve leading whitespace in fences in Rich Text Editor

I'm working on fixing joplin-plugin-typograms#1, I'm following the example in the markdownItTestPlugin. I am able to get the <pre> block inserted correctly so that the rich text editor does not destroy the fence:

					<pre
						class="joplin-source"
						data-joplin-language="typogram"
						data-joplin-source-open="```typogram
"
						data-joplin-source-close="```"
					>          +----+     o    |          o       *      *   .----------.   *----&gt;-----.
  *-+---. '-* -+-    |    v         ^         \    /    |.--------.|              |
    |   '---&gt;   +----+  -&gt;*&lt;-      /   .-+-&gt;*&lt;-o--+     |'------&gt; ||              |
  &lt;-'       *---+     |&lt;-----&gt;|   +----' |  ^   \       '---------'|   &lt;----------'
                                         |__|    v      *----------'
</pre>

However, it is not preserving leading whitespace. After double clicking the diagram, the editor pop up shows the leading whitespace, but the spaces are removed when closing the editor. Is there a way to preserve leading whitespace? This is important for typograms as the leading whitespace is often needed for alignment.

				const richTextEditorMetadata = `
					<pre
						class="joplin-source"
						data-joplin-language="typogram"
						data-joplin-source-open="\`\`\`typogram\n"
						data-joplin-source-close="\`\`\`"
					>${markdownIt.utils.escapeHtml(token.content)}</pre>
				`;

				return `
				<div class="typogram-container joplin-editable" style="background-color:white">
					${richTextEditorMetadata}
					${diagram.outerHTML}
				</div>
				`;

I can also reproduce this with Joplin built-in code blocks. I'm reporting an issue on the main Joplin repository.

Edit: GitHub issue

1 Like