Developer

Create Rich Text in a Workspace

Objective: Create Rich Text elements which can be customized and stylized at creation time in order to add more depth to the Workspace. To perform this, the user only needs the workspaceId of where they want the text Element to be added.

All GraphQL API endpoints share the same base URL:

/v3/graphql

Implementation using GraphQL APIs

Query createText
Comments Only workspaceId is needed for this call

Example Query:

mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
        createText(workspaceId: $workspaceId, input: $input) {
            id
            transform {x y scaleX scaleY}
            pinned
            zIndex
            text
            style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
            blocks {
                ...on TextBlock { align content}
            }
        }
    }

This mutation can be called with the following variables:

{
    "workspaceId": <workspaceId>,
    "input": {
        "blocks": {
            "block": {
            "align": "left",
            "content": {
                "span": {
                    "text": "Rich Text Example...",
                    "fontSize": 30,
                    "fontFamily": "Helvetica",
                    "fontWeight": "normal",
                    "fontStyle": "italic",
                    "textDecoration": "underline",
                    "color": { "r": 255, "g": 255, "b":255, "a": 1},
                    "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
                        }
                    }
                }
            } 
        }
    }

And this is the text you will see created in your workspace:

Code sample

See below for full code examples of this implementation in Python and Node.js.

curl --location --request POST '/v3/graphql/' \
--header 'Authorization: Bearer <SET_TOKEN>' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {\n        createText(workspaceId: $workspaceId, input: $input) {\n            ... on Text {\n            id\n            transform {x y scaleX scaleY}\n            pinned\n            zIndex\n            text\n            style { textTransform fontSize fontFamily verticalAlign color {r g b a }}\n            blocks {\n                ...on TextBlock {\n                align content}}\n                }\n            }\n    }","variables":{"workspaceId":{workspaceId},"input":{"blocks":{"block":{"align":"left","content":{"span":{"text":"Rich Text Example...","fontSize":30,"fontFamily":"Helvetica","fontWeight":"normal","fontStyle":"italic","textDecoration":"underline","color":{"r":23,"g":56,"b":100,"a":1},"backgroundColor":{"r":223,"g":156,"b":200,"a":1}}}}}}}}'

const axios = require('axios');

const url = "/v3/graphql/"
const token = "<SET_TOKEN>"
const workspaceId = "<WORKSPACE_ID>";
const createTextQuery = 
    `mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
        createText(workspaceId: $workspaceId, input: $input) {
            ... on Text {
              id
              transform {x y scaleX scaleY}
              pinned
              zIndex
              text
              style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
              blocks {
                ...on TextBlock {
                  align content}}
                }
              }
            }`

const textParams = {
    "workspaceId": workspaceId,
    "input": {
        "blocks": {
            "block": {
            "align": "left",
            "content": {
                "span": {
                    "text": "Rich Text Example...",
                    "fontSize": 30,
                    "fontFamily": "Helvetica",
                    "fontWeight": "normal",
                    "fontStyle": "italic",
                    "textDecoration": "underline",
                    "color": { "r": 255, "g": 255, "b":255, "a": 1},
                    "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
                        }
                    }
                }
            } 
        }
    }
const createText = async () => {
    try {
        const response = await axios.post(url,
            {query: createTextQuery, variables: textParams}, 
            {headers: {"Authorization": "Bearer " + token}})
        
        console.log(response.data);
        return response
    }
    catch(error) {
        console.error(error)
    }
}

createText();

import requests
import pprint

url = "/v3/graphql/"
token = "<SET_TOKEN>"
workspaceId = "<WORKSPACE_ID>";
query = """
    mutation addRichTextExample($workspaceId: String!, $input: CreateTextInput!) {
        createText(workspaceId: $workspaceId, input: $input) {
            ... on Text {
            id
            transform {x y scaleX scaleY}
            pinned
            zIndex
            text
            style { textTransform fontSize fontFamily verticalAlign color {r g b a }}
            blocks {
                ...on TextBlock {
                align content}}
                }
            }
    }
    """

params = {
    "workspaceId": workspaceId,
    "input": {
        "blocks": {
            "block": {
            "align": "left",
            "content": {
                "span": {
                    "text": "Rich Text Example...",
                    "fontSize": 30,
                    "fontFamily": "Helvetica",
                    "fontWeight": "normal",
                    "fontStyle": "italic",
                    "textDecoration": "underline",
                    "color": { "r": 255, "g": 255, "b":255, "a": 1},
                    "backgroundColor": { "r": 0, "g": 0, "b": 200, "a": 1}
                        }
                    }
                }
            } 
        }
    }
def makeQuery():
    try:
        response = requests.post(url, 
        headers={"Authorization": "Bearer " + token},
        json={'query': query,
            'variables': params})
        response.raise_for_status()
    except requests.exceptions.HTTPError as err:
        raise SystemExit(err)
    
    return response.json()
    

if __name__ == "__main__":
    response = makeQuery()
    pprint.pprint(response)

Output

{
    "data": {
        "createText": {
            "id": "<object_ID>",
            "transform": {
                "x": 0,
                "y": 0,
                "scaleX": 1,
                "scaleY": 1
            },
            "pinned": false,
            "zIndex": 4,
            "text": "Rich Text Example...",
            "style": {
                "textTransform": "none",
                "fontSize": 64,
                "fontFamily": "Dosis",
                "verticalAlign": "top",
                "color": {
                    "r": 255,
                    "g": 255,
                    "b": 255,
                    "a": 1
                }
            },
            "blocks": [
                {
                    "align": "left",
                    "content": [
                        {
                            "span": {
                                "fontFamily": "Helvetica",
                                "fontSize": 30,
                                "fontStyle": "italic",
                                "textDecoration": [
                                    "underline"
                                ],
                                "color": {
                                    "r": 255,
                                    "g": 255,
                                    "b": 255,
                                    "a": 1
                                },
                                "backgroundColor": {
                                    "r": 0,
                                    "g": 0,
                                    "b": 200,
                                    "a": 1
                                },
                                "content": [
                                    {
                                        "text": "Rich Text Example..."
                                    }
                                ]
                            }
                        }
                    ]
                }
            ]
        }
    }
}

After running the mutation above, the Rich Text element will be added to the workspace.

If you want to create more complex structures, such as lists and applying specific format to a particular word or group of words, please see the example below.
To generate the following Text element:
then use this graphQL mutation:

mutation myCreateTextWithBlocks($ws: String! $x: Float! $y: Float!, $width:Float!, $height:Float!) {
        createText(
            workspaceId: $ws
            input: {
                transform: {
                    x:$x 
                    y:$y
                }
                style:{
                    width:$width
                    height:$height
                    fontSize:65
                    fontFamily:"Helvetica"
                    textTransform:none
                    verticalAlign:top
                    color:{ r:255 g:255 b:255 a:1 }
                    backgroundColor:{ r:0 g:0 b:255 a:1 }
                }
                blocks: [
                    {
                        block:{
                            align: left
                            content: [
                                { text: "text block example, line one" }
                            ]
                        }
                    },
                    {
                        block:{
                            align: left
                            content: [
                                { text: "" }
                            ]
                        }
                    },
                    {
                        list:{
                            kind:bullet
                            items: [
                            {
                                indent: 0,
                                content: [
                                    { text: "list 1" }
                                ]
                            },
                            {
                                indent: 1,
                                content: [
                                    { text: "list 2" }
                                ]
                            }
                        ]
                        }
                    },
                    {
                        block:{
                            align: left
                            content: [
                                { text: "" }
                            ]
                        }
                    },
                    {
                        block:{
                            content:[
                                { text:"new " },
                                {
                                    span:{
                                        fontWeight:bold
                                        content:[
                                            { text:"BOLD" }
                                        ]
                                    }
                                },
                                { text:" text" }
                            ]
                        }
                    }       
                ]
            }
        )
        {
            id
            text
            transform {x y}
        }
      }
with these variables:
{
    "ws": "",
    "x": 0,
    "y": 0,
    "width": 900,
    "height":600
}

Query Rich Text in GraphQL

If you want to see the details of the format of Text elements with Rich Text, you can use the query below:

query getTextElementsfromWorkspace ($workspaceId: String!){
    elements(workspaceId: $workspaceId type: Text ) {
        type: __typename        
        id        
        ... on Text {
              id
            transform {
              x y
            }
            style {
                color { r g b a}
            } 
          blocks {
            ... on TextBlock {
              align            
              content               
            }
            ... on TextList {
              align
              kind
              items {
                align
                indent
                content
              }
            }
            
          }
              
        } 
    }
}

use these variables:

{
    "workspaceId": <workspaceId>
}

This query returns a large amount of information on the text element, however it can be altered to return more or less details depending on what is needed.


If you have any questions or comments, please contact us in the Bluescape Community site.