Sign in

HTML Block Editor does not preserve whitespace

  • This topic has 6 replies, 2 voices, and was last updated 2 weeks, 6 days ago by .
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #8075
    Avatar photodjx

    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 photoTomasz Dziuda

    hi,

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8191
    Avatar photodjx

    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 photoTomasz Dziuda

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

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8203
    Avatar photodjx

    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 photoTomasz Dziuda

    @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).

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #8219
    Avatar photodjx

    @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…

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.