How to accurately get the editor's max width, max height based on the text value?

[SanditZZ]

I'm working with a rich text editor built using Slate.js. My editor state is a JSON array of paragraphs, and each paragraph contains text with various formatting marks (like bold, fontSize, etc.).
I need to programmatically find the maximum width and the total height of all the text content as it would be rendered in the DOM. This is for tasks like dynamically resizing a container to fit the text.
For example, if I have editor's value like this:

[
    {
        "type": "p",
        "align": "left",
        "children": [
            {
                "text": "asd asd asdsdsdddsdsdasd",
                "fontSize": "24px"
            }
        ],
        "id": "H0X2hT1LCA"
    },
    {
        "type": "p",
        "align": "left",
        "id": "ERLUGjb7kZ",
        "children": [
            {
                "fontSize": "24px",
                "text": "asd"
            }
        ]
    }
]

Any advice would be appreciated. Thank you!

[dosubot[bot]]

There’s no built-in Plate or Slate API for measuring rendered text dimensions from the editor value. The two main approaches are:

1. DOM-based: Render your content offscreen (hidden div), then read scrollWidth/scrollHeight. This is accurate but can be slow for lots of content.
2. Canvas-based: Use a CanvasRenderingContext2D to measure text. This is fast and works well for programmatic measurement, especially if you extract font styles (like fontSize, fontWeight) from your editor value.

Here’s a basic example using canvas:

function measureText(text, { fontSize = '16px', fontWeight = 'normal', fontFamily = 'sans-serif' }) {
  const canvas = measureText._canvas || (measureText._canvas = document.createElement('canvas'));
  const ctx = canvas.getContext('2d');
  ctx.font = `${fontWeight} ${fontSize} ${fontFamily}`;
  const metrics = ctx.measureText(text);
  return {
    width: metrics.width,
    // Approximate height: font size in px (not perfect, but works for most cases)
    height: parseInt(fontSize, 10)
  };
}

// Example: flatten your Slate value and sum up widths/heights
function measureEditorValue(value) {
  let maxWidth = 0;
  let totalHeight = 0;
  value.forEach(block => {
    let blockWidth = 0;
    let blockHeight = 0;
    block.children.forEach(child => {
      const { width, height } = measureText(child.text, {
        fontSize: child.fontSize || '16px',
        fontWeight: child.bold ? 'bold' : 'normal',
        fontFamily: 'sans-serif'
      });
      blockWidth += width;
      blockHeight = Math.max(blockHeight, height);
    });
    maxWidth = Math.max(maxWidth, blockWidth);
    totalHeight += blockHeight;
  });
  return { maxWidth, totalHeight };
}

For best accuracy, match the font family, weight, and size to your editor’s CSS. If you have mixed formatting in a paragraph, measure each segment separately and sum their widths for that line. For multi-line wrapping, you’ll need to simulate line breaks based on a max width.

More details and discussion on this approach can be found in this Plate thread.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}