elm-explorations / elm-explorations/markdown

Iframe reloads every time update is called

Open
#3 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
Elm
Stars
31
Forks
3
PR merge metrics
No merged PRs in 30d

Description

## This surprised me
If you render html containing an iframe it reloads the content every time you call `update`. This results in the iframe data being reloaded.

## Currently working solution
Use lazy

## Might be nice
A note in the docs on how why you might need to use lazy in combination with the `toHtml` functions

## SSCCE

### Problematic, keyed but not lazy
```
module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Keyed as Keyed
import Markdown exposing (defaultOptions)

main : Program () () Msg
main =
Browser.sandbox
{ init = ()
, view = view
, update = \_ _ -> ()
}

type Msg
= Foo

view : () -> Html Msg
view _ =
div []
[ button [ onClick Foo ] [ text "click" ]
, Keyed.node "div"
[]
[ ( "foo"
, Markdown.toHtmlWith { defaultOptions | sanitize = False }
[]
iframeString
)
]
]

iframeString : String
iframeString =
""""""

```
https://ellie-app.com/4Pj7WpKzTHKa1

### Possible solution, lazy
provided by @zwilias

```
module Main exposing (main)

import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)
import Html.Lazy as Lazy
import Markdown exposing (defaultOptions)

main : Program () () Msg
main =
Browser.sandbox
{ init = ()
, view = view
, update = \_ _ -> ()
}

type Msg
= Foo

view : () -> Html Msg
view _ =
div []
[ button [ onClick Foo ] [ text "click" ]
, Lazy.lazy markdown iframeString
]

markdown : String -> Html msg
markdown content =
Markdown.toHtmlWith
{ defaultOptions | sanitize = False }
[]
content

iframeString : String
iframeString =
""""""

```
https://ellie-app.com/4PkBNVJsKnka1

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.