From 1.382.0 to Latest

Text Editor Update for Table Tool

The inline text editor for the Table tool has been updated. Existing tables in saved designs will continue using the legacy editor, while new ones dropped into designs will use the updated editor.

API Changes

Each cell in the Table tool's headers, rows, and footers arrays now includes a textJson property alongside the existing text property. The textJson value uses a JSON structure, while text remains an HTML string.

Before (1.382.0):

unlayer.init({
  tools: {
    table: {
      properties: {
        table: {
          value: {
            headers: [
              {
                cells: [
                  { text: '<p>Add header text</p>', width: 50 },
                  { text: '', width: 50 },
                ],
                height: 50,
              },
            ],
            rows: [
              {
                cells: [
                  { text: '<p>Add text</p>', width: 50 },
                  { text: '', width: 50 },
                ],
                height: 50,
              },
            ],
            footers: [
              {
                cells: [
                  { text: '', width: 50 },
                  { text: '', width: 50 },
                ],
                height: 50,
              },
            ],
          },
        },
      },
    },
  },
});

After (Latest):

unlayer.init({
  tools: {
    table: {
      properties: {
        table: {
          value: {
            headers: [
              {
                cells: [
                  {
                    textJson:
                      '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Add header text","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '<p>Add header text</p>',
                    width: 50,
                  },
                  {
                    textJson:
                      '{"root":{"children":[{"children":[],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '',
                    width: 50,
                  },
                ],
                height: 50,
              },
            ],
            rows: [
              {
                cells: [
                  {
                    textJson:
                      '{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Add text","type":"extended-text","version":1}],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '<p>Add text</p>',
                    width: 50,
                  },
                  {
                    textJson:
                      '{"root":{"children":[{"children":[],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '',
                    width: 50,
                  },
                ],
                height: 50,
              },
            ],
            footers: [
              {
                cells: [
                  {
                    textJson:
                      '{"root":{"children":[{"children":[],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '',
                    width: 50,
                  },
                  {
                    textJson:
                      '{"root":{"children":[{"children":[],"format":"","indent":0,"type":"extended-paragraph","version":1,"textFormat":0}],"format":"","indent":0,"type":"root","version":1}}',
                    text: '',
                    width: 50,
                  },
                ],
                height: 50,
              },
            ],
          },
        },
      },
    },
  },
});

JSON Structure Reference

The textJson value for each cell 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
      }
    ],
    "format": "",
    "indent": 0,
    "type": "root",
    "version": 1
  }
}

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

rich_text Property Editor Deprecated

The rich_text property editor for custom tools has been deprecated. Use rich_text_v2 instead. It's a direct replacement with the same HTML string format — no changes needed in your value handling.

Before:

unlayer.registerTool({
  properties: {
    content: {
      editor: {
        data: {
          widget: 'rich_text', // Deprecated
        },
      },
    },
  },
});

After:

unlayer.registerTool({
  properties: {
    content: {
      editor: {
        data: {
          widget: 'rich_text_v2', // Use this instead
        },
      },
    },
  },
});