Newline not respected in contents of Element.paragraph with (style "white-space" "pre-wrap")

[ymtszw]

SSCCE: https://ellie-app.com/3B4HGWdB2gqa1

Expected behavior

Preformatted texts in Element.paragraph should be rendered as is, when style "white-space" "pre-wrap" is given. I'm using this for (obviously) showing preformatted texts given by end users as is, respecting newlines and other whitespaces.

I recon this was working in elm-ui 1.0.0 (probably), but not working in 1.1.0.

Currently texts presented via Element.text are wrapped in <div>s which have display: inline; white-space: normal; style attached. This should be the culprit. Although I suspect this is introduced for some other purposes, thus I cannot tell just removing this solves the problem or not.

As an alternative path, adding some special attribute so that preformatted texts can be rendered in paragraph would be cool, too.

Versions

• OS: Windows 10
• Chrome 69.0.3497.100
• Elm 0.19
• Elm UI Version 1.1.0

[PixelPartner]

I have a similar shortcoming with the new <div> layer above text.

In elm-ui 1.0.0, I could add htmlAttributes for "overflow:hidden; text-overflow:ellipsis; display:block" to the el over text.

With elm-ui 1.1.0 this doesn't work any longer. Replacing the styled el by a matching textColumn doesn't work, as this also adds the new <div> layer. It helps to put the text inside a paragraph, but i didn't find a way to limit its height to enforce overflow.

[ymtszw]

Insertion of div with display: inline; white-space: normal in OP seems only applied to Element.text inside wrappers that enforces inlined layout, such as Element.text inside Element.paragraph. So my current workaround is replacing them with Element.html (Html.text string) and avoid those shims.

Fortunately in my case, it is only some limited regions where I want to respect whitespaces from user input, and rendering functions for them are already contained in a dedicated module, so replacements were minimal.

[HenkPoley]

How do you currently get "terminal style" text in elm-ui ?

Edit: I see the hint is in the comment above:

module TerminalStyleExample exposing (main)

import Browser
import Element exposing (..)
import Element.Font as Font
import Html
import Html.Attributes exposing (style)
import String


main : Program () () ()
main =
    Browser.sandbox
        { init = ()
        , view = view
        , update = update
        }


update msg model =
    model


view _ =
    Element.layout
        []
    <|
        preFormattedElement """1. abc
2. de
3. f
"""


preFormattedElement : String -> Element msg
preFormattedElement text =
    paragraph
        [ Font.family [ Font.monospace ]
        , Element.htmlAttribute (style "white-space" "pre")
        ]
        [ Element.html
            (Html.text text)
        ]

Displays

1. abc
2. de
3. f

[AlienKevin]

Another workaround in case the newlines don't work is to use the good old column. You can also put paragraph inside a column for flexible inline styling:

Element.column
    [ Element.spacing 10 ]
    [ Element.paragraph []
        [ Element.text "Do you want to delete "
        , Element.el [ Font.bold, Font.size 20 ] (E.text "this very important file")
        , Element.text " ?"
        ]
    -- column automatically inserts a newline here :)
    , Element.el [ Font.size 15 ] (Element.text "This can't be undone.")
    ]
    )