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 }
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.