Dialog editor for long text

Edit long text in a dialog with a character count: Enter for new lines, Ctrl+Enter or Save to save, Escape to cancel, and singleClickEdit to open it with one click.

Memos edited in a dialog, opened with one click.

Code for this demo

import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(100).map((r, i) => ({ ...r, memo: i % 3 ? '' : h('Call before delivery.\nLeave it at the front desk.', '배송 전 전화 주세요.\n프런트에 맡겨 주세요.') }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'name', header: h('Name', '이름'), width: 150 },
      { field: 'memo', header: h('Delivery memo', '배송 메모'), width: 320, editable: true, singleClickEdit: true, wrapText: true,
        editor: { type: 'modal', title: h('Delivery memo', '배송 메모'), maxLength: 300, placeholder: h('Gate code, where to leave it…', '공동현관 비밀번호, 맡길 곳…') } },
    ],
    data, locale: ctx.lang, autoRowHeight: true,
  });
  grid.on('cellValueChanged', e => ctx.log(`#${e.row.id} memo saved (${String(e.newValue).length} characters)`));
  text(ctx, h('Click a memo once. Enter makes a new line; Ctrl+Enter or Save saves; Esc cancels.',
    '메모를 한 번 누르세요. Enter는 줄바꿈, Ctrl+Enter나 저장은 저장, Esc는 취소입니다.'));
  return grid;
}

editor: { type: 'modal' } edits a cell in a dialog in the middle of the window, with room for several paragraphs. Use it for memos, addresses or descriptions that do not fit in a cell. For short multi-line text in place, editor: { type: 'textarea' } opens over the cell instead.

Basic use

{ field: 'memo', header: 'Delivery memo', width: 200, editable: true,
  singleClickEdit: true,                 // one click opens the dialog
  wrapText: true,                        // show the lines in the cell too
  editor: { type: 'modal', title: 'Delivery memo', maxLength: 500, rows: 10, placeholder: 'Gate code, where to leave it…' } }

Keyboard and buttons

Key	Does
Enter	A new line
Ctrl + Enter (⌘ + Enter)	Save and close
Save button	Save and close
Esc, Cancel or ×	Close without saving
Tab	Moves between the text and the buttons

Options

Name	Type	Description
`title`	`string`	The dialog title (default: the column header).
`maxLength`	`number`	The most characters; the count under the text shows n / max.
`rows`	`number`	Height of the text box in lines (default 8); it can be resized.
`placeholder`	`string`	Hint shown in the empty box.
`singleClickEdit (column)`	`boolean`	Open the editor with one click instead of a double-click (works for every editor).

Scrolling, rules and row editing

Scrolling the grid behind the dialog does not close it (other editors save when the grid scrolls).
required and validate messages show inside the dialog; it stays open until the text fits.
With editType: 'row' the dialog is part of the row edit: Escape on the row puts the text back too.
Ctrl+Z after closing the dialog undoes the change.