Skip to main content
Version: Latest

From 1.339.0 to 1.364.0

Text Editor Update for Heading and Button Tools​

The inline text editor for Heading and Button tools has been updated. Existing headings and buttons in saved designs will continue using the legacy editor, while new ones dropped into designs will use the updated editor.

API Changes​

For both the Heading and Button tools, the text property has been renamed to textJson. The value format changed from a plain string to a JSON structure.

Heading Tool​

Before (1.339.0):

unlayer.init({
  tools: {
    heading: {
      properties: {
        text: {
          value: 'This is a heading',
        },
      },
    },
  },
});

After (1.364.0):

unlayer.init({
  tools: {
    heading: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"This is a heading","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

Button Tool​

Before (1.339.0):

unlayer.init({
  tools: {
    button: {
      properties: {
        text: {
          value: 'Click here',
        },
      },
    },
  },
});

After (1.364.0):

unlayer.init({
  tools: {
    button: {
      properties: {
        textJson: {
          value:
            '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Click here","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0,"isInlineTool":true}],"format":"","indent":0,"type":"root","version":1}}',
        },
      },
    },
  },
});

JSON Structure Reference​

The new textJson value follows this structure:

{
  "root": {
    "children": [
      {
        "children": [
          {
            "detail": 0,
            "format": 0,
            "mode": "normal",
            "style": "",
            "text": "Your text here",
            "type": "extended-text",
            "version": 1
          }
        ],
        "format": "",
        "indent": 0,
        "type": "extended-paragraph",
        "version": 1,
        "textFormat": 0,
        "isInlineTool": true
      }
    ],
    "format": "",
    "indent": 0,
    "type": "root",
    "version": 1
  }
}

To customize the text content, replace the "text" field value inside the extended-text node.