dkodaj/rte/1.0.0

NOTE: the latest version is 10.0.1

MiniRte

Init and update

init : Parameters (Attribute msg) msg -> ( Rte msg, Cmd msg )
type alias Rte msg =
{ emojiBox : Bool
, inputBox : Maybe InputBox
, styling :
{ active : List (Attribute msg)
, inactive : List (Attribute msg)
}
, tagger : Msg -> msg
, textarea : Editor
}
initStyled : Parameters (Attribute msg) msg -> ( RteStyled msg, Cmd msg )

Same as init but you pss in lists of Html.Styled.Attributes in Parameters.

type alias RteStyled msg =
{ emojiBox : Bool
, inputBox : Maybe InputBox
, styling :
{ active : List (Attribute msg)
, inactive : List (Attribute msg)
}
, tagger : Msg -> msg
, textarea : Editor
}
type alias Parameters a msg =
{ id : String
, content : Maybe String
, fontSizeUnit : Maybe String
, highlighter : Maybe (Content -> Content)
, indentUnit : Maybe ( Float, String )
, selectionStyle : List ( String, String )
, styling :
{ active : List a
, inactive : List a
}
, tagger : Msg -> msg
}

id must be unique; it is used to monitor the position of characters.

content is the initial content of the textarea. It can be Just some plain text or a json string generated by encodedContent.

fontSizeUnit defaults to "px".

highlighter runs before each view update and it re-styles the text. See the example.

indentUnit defaults to (50,"px").

selectionStyle controls the appearance of selected text. It defaults to [("background", "hsl(217,71%,53%)"), ("color", "white")].

styling.active styles the textarea in active mode (when editing). Use update (Active True/False) to switch between modes.

tagger turns the package's own Msg type into your app's msg.

subscriptions : Rte msg -> Sub msg
subscriptionsStyled : RteStyled msg -> Sub msg
update : Msg -> Rte msg -> ( Rte msg, Cmd msg )
updateStyled : Msg -> RteStyled msg -> ( RteStyled msg, Cmd msg )

View

textarea : Rte msg -> Html msg

Displays the edited text plus the cursor. This object must not be the child of a position: relative node. It screws up cursor placement.

textareaStyled : RteStyled msg -> Html msg

Same as textarea but outputs Html.Styled.Html.

display : (Msg -> msg) -> DisplayParams (Attribute msg) -> Html msg

Display formatted text, without an editor.

If you want to preserve the option of editing it, create an editor with init and put it in passive mode with update (Active False).

displayStyled : (Msg -> msg) -> DisplayParams (Attribute msg) -> Html msg
type alias DisplayParams a =
{ content : String
, fontSizeUnit : Maybe String
, highlighter : Maybe (Content -> Content)
, indentUnit : Maybe ( Float, String )
, styling : List a
}

content can be plain text or a json string created with encodedContent.

fontSizeUnit defaults to "px".

indentUnit defaults to (50,"px").

Toolbar

emojiBox : Rte msg -> EmojiBoxParams (Attribute msg) -> Html msg
emojiBoxStyled : RteStyled msg -> EmojiBoxParams (Attribute msg) -> Html msg
type alias EmojiBoxParams a =
{ styling :
{ active : List a
, inactive : List a
}
, emojis : List String
}
fontSelector : Rte msg -> FontSelectorParams (Attribute msg) -> Html msg
fontSelectorStyled : RteStyled msg -> FontSelectorParams (Attribute msg) -> Html msg
type alias FontSelectorParams a =
{ styling : List a
, fonts : List (List String)
}
fontSizeSelector : Rte msg -> FontSizeSelectorParams (Attribute msg) -> Html msg
fontSizeSelectorStyled : RteStyled msg -> FontSizeSelectorParams (Attribute msg) -> Html msg
type alias FontSizeSelectorParams a =
{ styling : List a
, sizes : List Float
}
inputBox : Rte msg -> InputBoxParams (Attribute msg) -> Html msg
inputBoxStyled : RteStyled msg -> InputBoxParams (Attribute msg) -> Html msg
type alias InputBoxParams a =
{ styling :
{ active : List a
, inactive : List a
}
}
onOffSwitch : Rte msg -> SwitchParams -> Html msg
onOffSwitchStyled : RteStyled msg -> SwitchParams -> Html msg
type alias SwitchParams =
{ activeColor : String
, inactiveColor : String
, width : Float
}
type Msg
= Active Bool
| AddText String
| Bold
| Class String
| Core Msg
| Cut
| Copy
| Font (List String)
| FontSize Float
| FromBrowserClipboard String
| Heading
| ImageAdd String
| ImageInput String
| Indent
| Italic
| LinkAdd String
| LinkInput String
| NoOp
| StrikeThrough
| TextAlign TextAlign
| ToBrowserClipboard String
| ToggleEmojiBox
| ToggleImageBox
| ToggleLinkBox
| Underline
| Undo
| Unindent
| Unlink

For toolbar icons or shortcut keys. See the example for tips.

  Active Bool       -- turn editing on/off
| AddText String    -- insert text
| Bold              -- make text bold
| Class String      -- put a class on current paragraph 
| Core MiniRte.Core.Msg -- normally, you won't need this
| Cut
| Copy
| Font (List String)-- set current font families
                    -- e.g. ["Oswald", "sans-serif"]
| FontSize Float    -- set current font size
| FromBrowserClipboard String
                    -- see package description
| Heading           -- toggles between h1 and plain div
| ImageAdd String   -- embed image (the String is a link)
| ImageInput String -- normally, you won't need this
| Indent            -- increase indent of current para
| Italic            -- make text italic
| LinkAdd String    -- add link to current selection
| LinkInput String  -- normally, you won't need this
| NoOp              -- normally, you won't need this
| StrikeThrough     -- cross out text
| TextAlign MiniRte.Types.TextAlign
                    -- change alignment of current para
| ToBrowserClipboard String
                    -- see package description
| ToggleEmojiBox    -- turn emoji input box on/off
| ToggleImageBox    -- turn image link input box on/off
| ToggleLinkBox     -- turn link input box on/off
| Underline         -- underline text
| Undo              -- undo last action
| Unindent          -- decrease indent of current para
| Unlink            -- remove the link the cursor is touching

Info

encodedContent : { a | textarea : Editor } -> String

Serialize the content of the textarea, including formatting, links, and images. You can write the result into a database and use it later with init or display. Suitable for both Rte and RteStyled.

isActive : { a | textarea : Editor } -> Bool

Checks if the editor is active. Suitable for both Rte and RteStyled.

textContent : { a | textarea : Editor } -> String

The plain text content of the textarea. Suitable for both Rte and RteStyled.