@bbc/psammead-rich-text-transforms

v2.0.7

Published

2 years ago

A utility library to transform to structured rich text.

Downloads

`rich-text-transforms`

This libary provides two functions, one that takes candyXML, and one that takes a string. Both return rich text as structured JSON. The structured JSON uses the format that Optimo have opted for, see BBC confluence cps/Optimo+Client+Text+Blocks for more details.

Supported block types

The Optimo format consists of an array of nested ‘blocks’, where a block has a “type” (such as paragraph), and “model”. The model can contain fields such as ‘text’, attributes on that text - such as ‘bold’. The model can also contain an array of child blocks.

There are many types of block available.

Currently, this library only supports the following block types:

paragraph
text
urlLink
fragment

Installation

npm install @bbc/psammead-locales --save

Usage

`candyXmlToRichText`

const { candyXmlToRichText } = require("@bbc/psammead-rich-text-transforms")

const xml = `
<body>
  <paragraph>
    Read more:
      <link>
        <caption>foo</caption>
        <url href="https://example.com/foo"/>
      </link> bar <bold>baz</bold>
  </paragraph>
</body>
`

candyXmlToRichText(xml)

 {
  "type": "text",
    "model": {
      "blocks": [
      {
        "type": "paragraph",
        "model": {
          "text": "Read more: foo bar baz",
          "blocks": [
            {
              "type": "fragment",
              "model": {
                "text": "Read more: ",
                "attributes": []
              }
            },
          {
            "type": "urlLink",
            "model": {
              "text": "foo",
              "locator": "https://example.com/foo",
              "blocks": [
                {
                  "type": "fragment",
                  "model": {
                    "text": "foo",
                    "attributes": []
                  }
                }
              ]
            }
          },
          {
            "type": "fragment",
            "model": {
              "text": " bar ",
              "attributes": []
            }
          },
          {
            "type": "fragment",
            "model": {
              "text": "baz",
              "attributes": [
                "bold"
              ]
            }
          }
        ]
      }
    }
  ]
}

`stringToRichText`

const stringToRichText = require("@bbc/psammead-rich-text-transforms")

const string = "Hello world"

stringToRichText(string)

{
  "type": "text",
  "model": {
    "blocks": [
      {
        "type": "paragraph",
        "model": {
          "text": "Hello world",
          "blocks": [
            {
              "type": "fragment",
              "model": {
                "text": "Hello world",
                "attributes": []
              }
            }
          ]
        }
      }
    ]
  }
}

Contributing

Psammead is completely open source. We are grateful for any contributions, whether they be new components, bug fixes or general improvements. Please see our primary contributing guide which can be found at the root of the Psammead respository.

Code of Conduct

We welcome feedback and help on this work. By participating in this project, you agree to abide by the code of conduct. Please take a moment to read it.

License

Psammead is Apache 2.0 licensed.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

rich-text-transforms