DataGrid eliding does not respect unicode character integrity

[krassowski]

Description

For example https://www.compart.com/en/unicode/U+1F4E6

Reproduce

https://mybinder.org/v2/gh/jupyterlab/jupyterlab-plugin-playground/main?urlpath=lab with:

import { JupyterFrontEnd, JupyterFrontEndPlugin } from '@jupyterlab/application';
import { MainAreaWidget } from '@jupyterlab/apputils';
import { DataGrid, DataModel, BasicKeyHandler, BasicMouseHandler, BasicSelectionModel } from '@lumino/datagrid';

class LargeDataModel extends DataModel {
  rowCount(region: DataModel.RowRegion): number {
    return region === 'body' ? 100 : 1;
  }

  columnCount(region: DataModel.ColumnRegion): number {
    return region === 'body' ? 10 : 1;
  }

  data(region: DataModel.CellRegion, row: number, column: number): any {
    if (region !== 'body') {
      return `${row}, ${column}`;
    }
    return '📦'.repeat(20);
  }
}

const extension: JupyterFrontEndPlugin<void> = {
  id: 'datagrid',
  autoStart: true,
  activate: (
    app: JupyterFrontEnd
  ) => {
    const model = new LargeDataModel();
    const content = new DataGrid();
  
    content.dataModel = model;
    // (handlers are not required for reproduction)
    content.keyHandler = new BasicKeyHandler();
    content.mouseHandler = new BasicMouseHandler();
    content.selectionModel = new BasicSelectionModel({
      dataModel: model
    });
    const widget = new MainAreaWidget({content});
    widget.id = 'datagrid-example';
    widget.title.label = 'Unicode Datagrid Example';
    app.shell.add(widget, 'main');
  },
};

export default extension;

1. Rune the example provided above
2. Try resizing one of the columns
3. See unknown character show up

Expected behavior

Unicode-aware slice is used, see https://stackoverflow.com/a/62341816