dkodaj / rte / MiniRte

Don't forget to hook subscriptions and update into your app's own subscriptions and update function. Otherwise the RTE won't do anything.

Note: When the RTE is active (the textarea object is part of your view), it keeps taking away the focus from every other element. Use freeze to stop this.

Init and update


type Rte

The rich text editor. Under the hood, it is a record type that tracks cursor position, selection, formatting etc.

init : String -> Rte

The string you pass in is an id, which must be unique.

subscriptions : Rte -> Platform.Sub.Sub Types.Msg

Doesn't do anything when the RTE is freezed.

update : Types.Msg -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

View

textarea : Rte -> List (Html.Attribute Types.Msg) -> Html Types.Msg

Show the RTE.

showContent : Types.Content -> List (Html.Attribute Types.Msg) -> Html Types.Msg

Display, in an uneditable div, the content generated by the RTE.

showContentCustom : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> Types.Content -> List (Html.Attribute Types.Msg) -> Html Types.Msg

Same with some parameters.

showEncodedContent : List (Html.Attribute Types.Msg) -> String -> Html Types.Msg

Same but using a json generated with encodeContentString.

showEncodedContentCustom : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> List (Html.Attribute Types.Msg) -> String -> Html Types.Msg

Same with some parameters.

View Styled

Same as the previous but with Html.Styled.

textareaStyled : Rte -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg

showContentStyled : Types.Content -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg

showContentCustomStyled : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> Types.Content -> List (Html.Styled.Attribute Types.Msg) -> Html.Styled.Html Types.Msg

showEncodedContentStyled : List (Html.Styled.Attribute Types.Msg) -> String -> Html.Styled.Html Types.Msg

showEncodedContentCustomStyled : { fontSizeUnit : Maybe String, indentUnit : Maybe ( Basics.Float, String ), highlighter : Maybe (Types.Content -> Types.Content) } -> List (Html.Styled.Attribute Types.Msg) -> String -> Html.Styled.Html Types.Msg

Configure

makePastedLinksClickable : Basics.Bool -> Rte -> Rte

Control whether pasting something that begins with with http(s):// becomes a clickable link. Default is False.

setCharacterLimit : Basics.Int -> Rte -> Rte

Prevent typing more than a certain number of characters. There is no default limit, but the RTE becomes increasingly slow for longer texts (>10-12K characters).

setFontSizeUnit : String -> Rte -> Rte

Defaults to px.

setHighlighter : Maybe (Types.Content -> Types.Content) -> Rte -> Rte

See MiniRte.Types on highlighters.

setIndentUnit : ( Basics.Float, String ) -> Rte -> Rte

Defaults to (50,"px"). Matters when you use increaseIndent or decreaseIndent.

setSelectionStyle : List ( String, String ) -> Rte -> Rte

Controls how selected text looks. Defaults to [("background","hsl(217,71%,53%)"), ("color","hsl(0,0%,100%)")].

turnPastedImageLinksIntoImgElements : Basics.Bool -> Rte -> Rte

When you paste an image link x, it becomes an img element with src=x. Something qualifies as an image link iff it starts with data:image/ or it ends with .jpeg, .jpg, .gif, .png, .apng, .svg, .bmp, or .ico. Defaults to False.

Control

You can build a rich text editor toolbar from these (see the example in the repo).

addContent : Types.Content -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Add content at current cursor position.

addCustomHtml : Types.EmbeddedHtmlRecord -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Embed a custom html node within text.

addImageWithSrc : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

An img node with the specified src.

addLink : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Turn the current selection into a link.

addText : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Insert text at current cursor position.

copy : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Copy current selection. Results in a ToBrowserClipboard Msg which must be captured in update. See the example.

cut : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

decreaseIndent : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

freeze : Rte -> Rte

Hides cursor and stops listening to mouse and keyboard events.

increaseIndent : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

paste : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

replaceContent : Types.Content -> Rte -> Rte

Clears the editor and loads new content.

replaceContentString : String -> Rte -> Rte

Same with plain text.

setFontSize : Basics.Float -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Controls the font size within the selected text / at the current cursor position.

setSelection : ( Basics.Int, Basics.Int ) -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

setTextAlignment : Types.TextAlignType -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleBold : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleClass : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleFontFamily : List String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleHeading : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Turns the current paragraph into an h1 element.

toggleItalic : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleNodeType : String -> Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleStrikethrough : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

toggleUnderline : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

undo : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

unlink : Rte -> ( Rte, Platform.Cmd.Cmd Types.Msg )

Remove the href at the current cursor position.

unfreeze : Rte -> Rte

Show the cursor and activate mouse/keyboard listeners.

Info

content : Rte -> Types.Content

The edited content of the RTE.

fontFamily : Rte -> List String

The font-family (set with toggleFontFamily) at the cursor position.

fontSize : Rte -> Maybe Basics.Float

The font-size (set with setFontSize) at the cursor position.

freezed : Rte -> Basics.Bool

textContent : Rte -> String

The plain text content of the RTE.

Conversions

textToContent : String -> Types.Content

contentToText : Types.Content -> String

decodeContentString : String -> Result String Types.Content

Convert content json string into edited content.

decodeContentGZip : Bytes -> Result String Types.Content

Convert gzipped content json into edited content.

encodeContentString : Rte -> String

Encode the edited content in a json string.

encodeContentGZip : Rte -> Bytes

Encode the edited content in a gzipped json string.

Hardwired key combos