rupertlssmith / rte-toolkit-patch / RichText.Html

This module contains convenience functions for econding and decoding editor nodes to and from html. Its intent is to help developers who want to import and export editor state as html.

toHtml : RichText.Config.Spec.Spec -> RichText.Model.Node.Block -> String

Converts a block to an html string.

exampleBlock : Block
exampleBlock =
    block
        (Element.element doc [])
        (blockChildren <|
            Array.fromList
                [ block
                    (Element.element paragraph [])
                    (inlineChildren <|
                        Array.fromList
                            [ plainText "text"
                            , inlineElement (Element.element image [ StringAttribute "src" "logo.svg" ]) []
                            , plainText "text2"
                            ]
                    )
                ]
        )

exampleHtml : String
exampleHtml =
    "<div data-rte-doc=\"true\"><p>text<img src=\"logo.svg\">text2</p></div>"

(toHtml markdown exampleBlock) == exampleHtml
--> True

toHtmlNode : RichText.Config.Spec.Spec -> RichText.Model.Node.Block -> RichText.Model.HtmlNode.HtmlNode

Converts a block to an HtmlNode.

exampleBlock : Block
exampleBlock =
    block
        (Element.element doc [])
        (blockChildren <|
            Array.fromList
                [ block
                    (Element.element paragraph [])
                    (inlineChildren <|
                        Array.fromList
                            [ plainText "text"
                            , inlineElement (Element.element image [ StringAttribute "src" "logo.svg" ]) []
                            , plainText "text2"
                            ]
                    )
                ]
        )

exampleHtmlNode : HtmlNode
exampleHtmlNode =
    ElementNode "div" [ ( "data-rte-doc", "true" ) ] <|
        Array.fromList
            [ ElementNode "p" [] <|
                Array.fromList
                    [ TextNode "text"
                    , ElementNode "img" [ ( "src", "logo.svg" ) ] Array.empty
                    , TextNode "text2"
                    ]
            ]

(toHtmlNode markdown exampleBlock) == exampleHtmlNode
--> True

fromHtml : RichText.Config.Spec.Spec -> String -> Result String (Array RichText.Node.Fragment)

Decodes an html string to an array of editor fragments, or returns an error if there was an issue decoding the html.

exampleBlock : Block
exampleBlock =
    block
        (Element.element doc [])
        (blockChildren <|
            Array.fromList
                [ block
                    (Element.element paragraph [])
                    (inlineChildren <|
                        Array.fromList
                            [ plainText "text"
                            , inlineElement (Element.element image [ StringAttribute "src" "logo.svg" ]) []
                            , plainText "text2"
                            ]
                    )
                ]
        )

exampleFragment : Fragment
exampleFragment =
    BlockFragment <| Array.fromList [ exampleBlock ]


exampleHtml : String
exampleHtml =
    "<div data-rte-doc=\"true\"><p>text<img src=\"logo.svg\">text2</p></div>"

(Ok (Array.fromList [ exampleFragment ])) == (fromHtml markdown exampleHtml)
--> True

blockFromHtml : RichText.Config.Spec.Spec -> String -> Result String RichText.Model.Node.Block

Convenience function that parses html and returns the first editor block that was decoded, or an error if there was an issue decoding the html.

exampleBlock : Block
exampleBlock =
    block
        (Element.element doc [])
        (blockChildren <|
            Array.fromList
                [ block
                    (Element.element paragraph [])
                    (inlineChildren <|
                        Array.fromList
                            [ plainText "text"
                            , inlineElement (Element.element image [ StringAttribute "src" "logo.svg" ]) []
                            , plainText "text2"
                            ]
                    )
                ]
        )

exampleHtml : String
exampleHtml =
    "<div data-rte-doc=\"true\"><p>text<img src=\"logo.svg\">text2</p></div>"

(Ok exampleBlock) (blockFromHtml markdown exampleHtml)
--> True