Textstyles

Styles and optional styles are enabled here. All text styles in Naviga Writer has a corresponding component which is responsible for visualizing the text style in the content area, and convert the text to/from the NewsML document format.

Plugin configuration

{
    "id": "io.infomaker.textstyles",
    "name": "im-textstyles",
    "url": "https://plugins.writer.infomaker.io/v1/infomaker/im-textstyles/{PLUGIN_VERSION}/index.js",
    "style": "https://plugins.writer.infomaker.io/v1/infomaker/im-textstyles/{PLUGIN_VERSION}/style.css",
    "enabled": true,
    "mandatory": false,
    "data": {
        "styles": {
            "headline": {},
            "subheadline": {},
            "subheadline2": {
                "shortcut": {
                    "default": "ctrl+alt+4",
                    "mac": "cmd+alt+4"
                }
            },
            "subheadline3": {
                "disableUseOfAnnotationTools": true
            },
            "subheadline4": {},
            "subheadline5": {},
            "blockquote": {},
            "dateline": {},
            "drophead": {},
            "fact-body": {},
            "pagedateline": {},
            "preamble": {},
            "preleadin": {},
            "madmansrow": {},
            "monospace": {}
        },
        "customStyles": {
            "funny-headline": {
                "label": "Funny headline",
                "shortLabel": "FUN",
                "fallback": "headline",
                "style": {
                    "background": "-webkit-linear-gradient(right, orange , yellow, green, cyan, blue, violet)",
                    "font-family": "Comic Sans MS",
                    "font-size": "45px",
                    "-webkit-background-clip": "text",
                    "-webkit-text-fill-color": "transparent"
                }
            },
            "thin-paragraph": {
                "label": "Thin Paragraph",
                "shortLabel": "TNY",
                "style": {
                    "font-size": "20px",
                    "font-weight": "100"
                }
            }
        }
    }
}

Options

Only include text styles you want to support. Only override keyboard shortcuts if neccessary.

Property	Type	Required	Description
styles	Object	true	Styles you want to enable. For supported types see table below.
customStyles	Object	false	Optional Object with the option to specify and design your own textstyles

Supported types for styles

Each style defines a configuration object which can be used to set a keyboard shortcut for that style. See Plugin configuration for example.

Style
"headline": {}
"subheadline": {}
"subheadline2": {}
"subheadline3": {}
"subheadline4": {}
"subheadline5": {}
"dateline": {}
"drophead": {}
"fact-body": {}
"pagedateline": {}
"preamble": {}
"preleadin": {}
"madmansrow": {}
"blockqoute": {}
"monospace": {}

Style type configuration

Property	Type	Required	Description
shortcut	object	false	Keyboard shortcut for trigger style. Can specify both Mac or/and Win
disableUseOfAnnotationTools	boolean	false	Disables all annotations tools (bold, italics, link, etc) for text style

Custom Textstyle configuration

Property	Type	Required	Description
label	string	true	The label that shows up on a new empty line in the Writer
shortLabel	string	true	Abbreviation of the label, shows up as an identifer left of the textnode
fallback	string	false	Text style to use as a fallback when consumer of article don't support the custom textstyle. If nothing is supplied, the paragraph type body will be used.
style	Object	true	CSS object for specifying the style of the textstyle
disableUseOfAnnotationTools	boolean	false	Disables all annotations tools (bold, italics, link, etc) for custom style

Output

All styles element will be presented in <group type="body"> and you can example below.

<newsItem>
    <contentSet>
        <inlineXML>
            <idf xmlns="http://www.infomaker.se/idf/1.0" dir="ltr" xml:lang="sv">
                <group type="body">
                    <element id="headline-d1f5ac9f52fc17b4da89004c9c7493da" type="headline">I'm a headline</element>
                    <element id="preamble-a5efff9f3af396a0b0f095f2284b9023" type="preamble">Preamble</element>
                    <element id="MTA2LDIxMCwyNSwxMjE" type="dateline">Dateline</element>
                    <element id="MTgyLDIyLDIyNSwxNDk" type="headline" variation="funny-headline">A funny headline</element>
                    <element id="NDYsMjA0LDE3OSw0MA" type="body" variation="thin-paragraph">Thin paragraph</element>
                </group>
            </idf>
        </inlineXML>
    </contentSet>
</newsItem>