@symphony-ui/adk-rtb v1.0.0-beta.24

Quick start

Run yarn dev in adk-rtb root directory to launch the examples in a local server, then go on http://localhost:3000/

Run yarn build in adk-rtb to build the project.

Introduction

RichTextBlock enables authors to create rich text block, similar to traditional "What you see is what you get" (wysiwyg) editors. It will be translated into a Symphony specific syntax (PresentationML).

How to use?

{
        kind: "richtextblock",
        content: [{
            kind: "p",
            content: ["Hello John, here are some interesting data"]
        }, {
            kind: "datablock",
            name: "Chart ABC",
            data: {
                // data here
            },
            preview: [{ // optional
                kind: "p",
                content: ["Some preview content can be provided here"]
            }]
        }]
    }

Utility methods

To ease the write of this syntax, we have provided some utility methods.

import { table, tr, td, p, h, em, rtb, span, img, strong, dataBlock, mention, hashtag, dataTag, cashtag, ol, li } from '@symphony-ui/adk-rtb';

 const r = rtb([
            p([
                "Colors: ",
                span("accent 1", { color: "a1" }), ", ",
                span("accent 2", { color: "a2" }), ", ",
                span("primary 1", { color: "p1" }), ", ",
                span("primary 2", { color: "p2" }), ", ",
                span("secondary 1", { color: "s1" }), ", ",
                span("secondary 2", { color: "s2" }), ", ",
                span("sublte 1", { color: "t1" }), ", ",
                span("subtle 2", { color: "t2" })
            ]),
            p([
                "Background colors: ",
                span(" accent 1 ", { bkgColor: "a1" }), ", ",
                span(" accent 2 ", { bkgColor: "a2" }), ", ",
                span(" primary 1 ", { bkgColor: "p1" }), ", ",
                span(" primary 2 ", { bkgColor: "p2" }), ", ",
                span(" secondary 1 ", { bkgColor: "s1" }), ", ",
                span(" secondary 2 ", { bkgColor: "s2" }), ", ",
                span(" subtle 1 ", { bkgColor: "t1" }), ", ",
                span(" subtle 2", { bkgColor: "t2" })
            ]),
            p(" "),
            h(3, "Data block:"),

            dataBlock("EURUSD Chart", {
                type: "fdc3.chart",
                instruments: [
                    {
                        type: "fdc3.instrument",
                        id: {
                            ticker: "EURUSD"
                        }
                    }
                ],
                range: {
                    type: "fdc3.dateRange",
                    starttime: "2020-09-01T08:00:00.000Z",
                    endtime: "2020-10-31T08:00:00.000Z"
                },
                style: "candle"
            }, {
                preview: [
                    img("https://share.chartiq.com/L0V2034HZB.png", "news", { width: 300 })
                ]
            }),

            dataBlock("Symphony New CRO", {
                // any data here
                type: "com.symphony.news",
                articleId: 123456789,
                title: "Symphony names chief revenue officer and announces new commercial structure",
                content: "Symphony has named StreetLinx co-founder and former CEO Gary Godshaw as the company's chief revenue officer (CRO)"
            }, {
                preview: [
                    // preview RTB
                    table([
                        tr([
                            td([
                                img(root + "news_355x255_N.png", "news", { width: 130 })
                            ]),
                            td([
                                h(3, "Symphony names chief revenue officer and announces new commercial structure"),
                                p(span("By: Symphony Communication Services, LLC", { color: "t1" })),
                                p(span("Symphony has named StreetLinx co-founder and former CEO Gary Godshaw as the company's chief revenue officer (CRO)", { color: "t1" })),
                            ], { width: 400 })
                        ]),
                        tr([
                            td([
                                p(span("Symphony - 29 November 2021", { color: "t1" })),
                            ], { colspan: 2 })
                        ])
                    ])
                ]
            }),
            p(" "),
            h(3, "Data tags:"),
            p([
                "mention: ",
                mention(
                    { type: "fdc3.contact", name: "JB", id: { email: "james@mi6.uk" } },
                    { name: "James", title: "James Bond" }
                ),
                " cashtag: ",
                cashtag({ type: "fdc3.instrument", id: { ticker: "MSFT" } }),
                " hashtag: ",
                hashtag("#foo"),
                " any tag: ",
                dataTag("XYZ.ABC DEF-MSFT+", { type: "foo.bar", message: "Hello world!" }, {
                    bkgColor: "s2", preview: [
                        span("XYZ", { bkgColor: "p1" }),
                        ".",
                        span("ABC", { bkgColor: "p2" }),
                        " ",
                        strong("DEF-MSFT+")
                    ]
                })
            ]),
        ]);