[{"name":"HtmlData.Extra","comment":"\n\n\n## Functions to\n\nto convert `HtmlData.Html` values into `String`\n\n@docs toTextHtml, toTextPlain, toElmHtml\n\n\n## Functions from\n\n@docs fromHtmlParserNodes\n\n\n## Configs\n\ndefault configurations on how content is sanitized for toTextHtml, and how layout is done for toTextPlain\n\n@docs SanitizeConfig, defaultSanitizeConfig, TextPlainConfig, defaultTextPlainConfig\n\n@docs escapeHtml, sanitize\n\n\n## More ~tests~ examples\n\n import HtmlData exposing (..)\n import HtmlData.Attributes exposing (..)\n\n div []\n [ h1 [] [ text \"Block-level elements\" ]\n , p []\n [ text \"In this article, we'll examine HTML block-level elements and how they differ from \"\n , a [ href \"https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements\" ] [ text \"inline-level elements\" ]\n , text \".\"\n ]\n , p []\n [ text \"HTML (\"\n , b [] [ text \"Hypertext Markup Language\" ]\n , text \") elements ... by CSS in the \"\n , a [ href \"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout\" ] [ text \"Flow Layout\" ]\n , text \". A Block-level element occupies ... contents, thereby creating a \\\"block\\\".\"\n , aside []\n [ strong [] [ text \"Note:\" ]\n , text \" A block-level element always starts on a new line and ... as it can).\"\n ]\n , h3 [] [ text \"See also\" ]\n , ol []\n [ li [] [ a [ href \"\" ] [ text \"Inline elements\" ] ]\n , li [] [ a [ href \"\" ] [ text \"display\" ] ]\n , li [] [ a [ href \"\" ] [ text \"Block and Inline Layout in Normal Flow\" ] ]\n ]\n ]\n ]\n |> toTextHtml\n --> \"

Block-level elements

In this article, we'll examine HTML block-level elements and how they differ from inline-level elements.

HTML (Hypertext Markup Language) elements ... by CSS in the Flow Layout. A Block-level element occupies ... contents, thereby creating a "block".

See also

  1. Inline elements
  2. display
  3. Block and Inline Layout in Normal Flow

\"\n\n\n -- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\n div []\n [ p []\n [ text \"Cryptids of Cornwall:\" ]\n , dl []\n [ dt []\n [ text \"Beast of Bodmin\" ]\n , dd []\n [ text \"A large feline inhabiting Bodmin Moor.\" ]\n , dt []\n [ text \"Morgawr\" ]\n , dd []\n [ text \"A sea serpent.\" ]\n , dt []\n [ text \"Owlman\" ]\n , dd []\n [ text \"A giant owl-like creature.\" ]\n ]\n ]\n |> toTextHtml\n --> \"

Cryptids of Cornwall:

Beast of Bodmin
A large feline inhabiting Bodmin Moor.
Morgawr
A sea serpent.
Owlman
A giant owl-like creature.
\"\n\n\n\n div []\n [ h1 [] [ text \"Block-level elements\" ]\n , p []\n [ text \"In this article, we'll examine HTML block-level elements and how they differ from \"\n , a [ href \"https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements\" ] [ text \"inline-level elements\" ]\n , text \".\"\n ]\n , p []\n [ text \"HTML (\"\n , b [] [ text \"Hypertext Markup Language\" ]\n , text \") elements ... by CSS in the \"\n , a [ href \"https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout\" ] [ text \"Flow Layout\" ]\n , text \". A Block-level element occupies ... contents, thereby creating a \\\"block\\\".\"\n , aside []\n [ strong [] [ text \"Note:\" ]\n , text \" A block-level element always starts on a new line and ... as it can).\"\n ]\n , h3 [] [ text \"See also\" ]\n , ol []\n [ li [] [ a [ href \"\" ] [ text \"Inline elements\" ] ]\n , li [] [ a [ href \"\" ] [ text \"display\" ] ]\n , li [] [ a [ href \"\" ] [ text \"Block and Inline Layout in Normal Flow\" ] ]\n ]\n ]\n ]\n |> toTextPlain defaultTextPlainConfig\n --> String.join \"\\n\"\n --> [ \"Block-level elements\"\n --> , \"\"\n --> , \"In this article, we'll examine HTML block-level elements and how they differ from inline-level elements https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements .\"\n --> , \"\"\n --> , \"HTML (Hypertext Markup Language) elements ... by CSS in the Flow Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout . A Block-level element occupies ... contents, thereby creating a \\\"block\\\".\"\n --> , \"\"\n --> , \"Note: A block-level element always starts on a new line and ... as it can).\"\n --> , \"\"\n --> , \"See also\"\n --> , \"\"\n --> , \" 1. Inline elements\"\n --> , \"\"\n --> , \" 2. display\"\n --> , \"\"\n --> , \" 3. Block and Inline Layout in Normal Flow\"\n --> ]\n\n\n -- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dd\n div []\n [ p []\n [ text \"Cryptids of Cornwall:\" ]\n , dl []\n [ dt []\n [ text \"Beast of Bodmin\" ]\n , dd []\n [ text \"A large feline inhabiting Bodmin Moor.\" ]\n , dt []\n [ text \"Morgawr\" ]\n , dd []\n [ text \"A sea serpent.\" ]\n , dt []\n [ text \"Owlman\" ]\n , dd []\n [ text \"A giant owl-like creature.\" ]\n ]\n ]\n |> toTextPlain defaultTextPlainConfig\n --> String.join \"\\n\"\n --> [ \"Cryptids of Cornwall:\"\n --> , \"\"\n --> , \"Beast of Bodmin\"\n --> , \"\"\n --> , \" A large feline inhabiting Bodmin Moor.\"\n --> , \"\"\n --> , \"Morgawr\"\n --> , \"\"\n --> , \" A sea serpent.\"\n --> , \"\"\n --> , \"Owlman\"\n --> , \"\"\n --> , \" A giant owl-like creature.\"\n --> ]\n\n div []\n [ text \"hi\"\n , p [] [ text \"hello\" ]\n , text \"world\"\n ]\n |> toTextPlain defaultTextPlainConfig\n --> String.join \"\\n\"\n --> [ \"hi\"\n --> , \"\"\n --> , \"hello\"\n --> , \"\"\n --> , \"world\"\n --> ]\n\n","unions":[],"aliases":[{"name":"SanitizeConfig","comment":" Config for sanitization of content (element and attributes)\n","args":[],"type":"{ urlAttributes : List.List String.String, removedAttributes : List.List String.String, isAllowedUrl : String.String -> Basics.Bool }"},{"name":"TextPlainConfig","comment":" Config for converting html to text\n","args":["msg"],"type":"{ textlinkFromHtml : List.List (HtmlData.Attributes.Attribute msg) -> List.List (HtmlData.Html msg) -> String.String }"}],"values":[{"name":"defaultSanitizeConfig","comment":" Default SanitizeConfig provided out of the box\n","type":"HtmlData.Extra.SanitizeConfig"},{"name":"defaultTextPlainConfig","comment":" Default TextPlainConfig provided out of the box\n\nNote: there's a space added behind the string to prevent punctuations from\nbeing confused as part of url.\n\n import HtmlData exposing (..)\n import HtmlData.Attributes exposing (..)\n\n defaultTextPlainConfig.textlinkFromHtml\n [ id \"some-id\"\n , href \"https://example.com/url\"\n , src \"https://example.com/src\"\n ]\n [ text \"Hello World \"\n , b [] [ text \"Everyone!\" ]\n , text \" How are you?\"\n ]\n --> \"Hello World Everyone! How are you? https://example.com/url \"\n\n defaultTextPlainConfig.textlinkFromHtml\n [ href \"https://example.com/url\" ]\n [ text \"Click here\"\n ]\n --> \"Click here https://example.com/url \"\n\n defaultTextPlainConfig.textlinkFromHtml\n [ href \"https://example.com/url\" ]\n [ text \"See https://example.com/url\"\n ]\n --> \"See https://example.com/url \"\n\n defaultTextPlainConfig.textlinkFromHtml\n [ href \"https://example.com/url\" ]\n [ text \"https://example.com/url\"\n ]\n --> \"https://example.com/url \"\n\n","type":"HtmlData.Extra.TextPlainConfig msg"},{"name":"escapeHtml","comment":" \n\n \"foo\\\" onmouseover=\\\"alert(1)\"\n |> escapeHtml\n --> \"<a href="/user/foo" onmouseover="alert(1)">foo" onmouseover="alert(1)</a>\"\n\n \"foo' onmouseover='alert(1)\"\n |> escapeHtml\n --> \"<a href='/user/foo' onmouseover='alert(1)'>foo' onmouseover='alert(1)</a>\"\n\n","type":"String.String -> String.String"},{"name":"fromHtmlParserNodes","comment":" Converts from [`Html.Parser.Node`](https://package.elm-lang.org/packages/hecrj/html-parser/latest/Html-Parser#Node) into `HtmlData.Html`\n\nWe could achieve `String -> List (HtmlData.Html msg)` by\n\n1. combining with [`Html.Parser.run`](https://package.elm-lang.org/packages/hecrj/html-parser/latest/Html-Parser#run)\n\n2. adding fallback value for error\n\nLike this\n\n import Html.Parser\n import HtmlData exposing (..)\n import HtmlData.Attributes exposing (..)\n\n fromString : String -> List (Html msg)\n fromString str =\n case Html.Parser.run str of\n Err err ->\n [ text (Debug.toString err) ]\n --\n Ok nodes ->\n fromHtmlParserNodes nodes\n\n fromString \"

young and dangerous

\"\n --> [Element \"p\" [Attribute \"class\" \"hello world\"] [Element \"b\" [] [Text \"young\"],Text \" and \",Element \"em\" [] [Text \"dangerous\"]]]\n\n","type":"List.List Html.Parser.Node -> List.List (HtmlData.Html msg)"},{"name":"sanitize","comment":" Given some `String`, run it through a sanitizer and get back safe `String` that we can use as `text/html`\n\n sanitize defaultSanitizeConfig \"\"\"

hello

\"\"\"\n --> Just \"

hello

\"\n\n sanitize defaultSanitizeConfig \"\"\"Cli>ckMe\"\"\"\n --> Just \"Cli>ckMe\"\n\n sanitize defaultSanitizeConfig \"\"\"click me!\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"blah\"/>\"\"\"\n --> Just \"blah"/>\"\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Just \"\"\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Just \"\"\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"ipt>alert(‘XSS’)\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Just \"\"\n\n sanitize defaultSanitizeConfig \"\"\"ClickMeipt>alert(\"hello\");\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"\"\"\"\n --> Just \"\"\n\n sanitize defaultSanitizeConfig \"\"\"< h1>strict\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\"

strict\"\"\"\n --> Nothing\n\n sanitize defaultSanitizeConfig \"\"\n --> Nothing\n\n","type":"HtmlData.Extra.SanitizeConfig -> String.String -> Maybe.Maybe String.String"},{"name":"toElmHtml","comment":" Converts into a regular [elm/html `Html msg`](https://package.elm-lang.org/packages/elm/html/1.0.0/Html)\n","type":"HtmlData.Html msg -> Html.Html msg"},{"name":"toTextHtml","comment":" Returns `String` in `text/html` format, suitable for use in email or static browser rendering.\n\n import HtmlData exposing (..)\n import HtmlData.Attributes exposing (..)\n\n div [ classList\n [ (\"hello\", True)\n , (\"world\", True )\n , (\"there\", False )\n ]\n ]\n [ button [ id \"Decrement\", name \"buttonDecrement\" ] [ text \"-\" ]\n , div [] [ text (\"Hello \" ++ String.fromInt 1999) ]\n , button [ id \"Increment\", name \"buttonIncrement\" ] [ text \"+\" ]\n ]\n |> toTextHtml\n --> \"
Hello 1999
\"\n\n text \" content\"\n |> toTextHtml\n --> \"<bad> content\"\n\n","type":"HtmlData.Html msg -> String.String"},{"name":"toTextPlain","comment":" Returns `String` in `text/plain` format, suitable for use in email or console output.\n\n import HtmlData exposing (..)\n import HtmlData.Attributes exposing (..)\n\n\n div [ class \"hello\" ]\n [ p [] [ text \"Hi Bob,\" ]\n , ol []\n [ li [] [ text \"Do this\" ]\n , li [] [ a [ href \"https://example.com\" ] [ text \"Go here\" ] ]\n ]\n ]\n |> toTextPlain defaultTextPlainConfig\n --> String.join \"\\n\"\n --> [ \"Hi Bob,\"\n --> , \"\"\n --> , \" 1. Do this\"\n --> , \"\"\n --> , \" 2. Go here https://example.com \"\n --> ]\n\n","type":"HtmlData.Extra.TextPlainConfig msg -> HtmlData.Html msg -> String.String"}],"binops":[]}]