Download
We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

HTML Block Editor does not preserve whitespace

  • #8075
    Avatar photo[anonymous]

    I am using Mermaid diagrams with Publii and it was working great until I started using the classDiagram type. Other diagram types support using semi-colon as a line break, but it seems this diagram type does not.

    It appears that when using the block editor for posts any of the HTML blocks will have their contents stripped of extra whitespace. This seems to be by design, and is probably a good default. Are there any known workarounds to having the HTML block preserve whitespace as it is entered?

    #8187
    Avatar photo[anonymous]

    hi,

    Could you provide an example of text which is malformed during save?

    #8191
    Avatar photo[anonymous]

    Sure! I’m using Mermaid diagrams in my page. I put the JS in the footer so that in any page I can put in a diagram and it “just works”.

    Here’s an example diagram from the mermaid.live test site:

    classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

    The problem is that upon saving or publishing, all of the whitespace is removed and it gets turned into this:

    classDiagram Animal <|-- Duck Animal <|-- Fish Animal <|-- Zebra Animal : +int age Animal : +String gender Animal: +isMammal() Animal: +mate() class Duck{ +String beakColor +swim() +quack() } class Fish{ -int sizeInFeet -canEat() } class Zebra{ +bool is_wild +run() }

    The mermaid diagram cannot process this because it relies on the line breaks.

    It would be nice if there was an option like “Save Without Beautify”, or a class similar to “pre” that would instruct the generator to leave the whitespace alone in that tag.

    #8196
    Avatar photo[anonymous]

    BTW – did you tried to disable HTML compression under site optimisation settings?

    #8203
    Avatar photo[anonymous]
    Tomasz Dziuda wrote:

    BTW – did you tried to disable HTML compression under site optimisation settings?

    I did just try this and it did not make a difference. However, in testing I did notice that this exact snippet works fine in the Block Editor. It seems the HTML component in the block editor preserves whitespace, but WYSIWYG doesn’t preserve it regardless of the HTML compression setting.

    #8211
    Avatar photo[anonymous]

    @djx – I think you can solve it in an easy way – just please use PRE tag instead of DIV tag 🙂 As I have tested – it perfectly preserves formatting in the WYSIWYG editor (in fact this tag is created to do this).

    #8219
    Avatar photo[anonymous]
    Tomasz Dziuda wrote:

    @djx – I think you can solve it in an easy way – just please use PRE tag instead of DIV tag 🙂 As I have tested – it perfectly preserves formatting in the WYSIWYG editor (in fact this tag is created to do this).

    Well now, that’s a simple and great solution! Thanks! I feel dumb for the time I spent on other attempted solutions…