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.