긴 글 모달 편집기

글자 수가 보이는 창에서 긴 글 편집: Enter는 줄바꿈, Ctrl+Enter나 저장은 저장, Esc는 취소, singleClickEdit로 한 번 클릭에 열기.

한 번 클릭으로 여는 창에서 메모 편집.

이 데모의 코드

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' }는 창 가운데의 대화 상자에서 셀을 편집하므로 여러 문단을 쓸 수 있습니다. 메모, 주소, 설명처럼 셀에 다 들어가지 않는 글에 쓰세요. 짧은 여러 줄 글을 셀 위에서 고치려면 editor: { type: 'textarea' }가 있습니다.

기본 사용

{ 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…' } }

키보드와 버튼

키	동작
Enter	줄바꿈
Ctrl + Enter (⌘ + Enter)	저장하고 닫기
저장 버튼	저장하고 닫기
Esc, 취소, ×	저장하지 않고 닫기
Tab	글 입력칸과 버튼 사이 이동

옵션

이름	타입	설명
`title`	`string`	창 제목(기본: 컬럼 헤더).
`maxLength`	`number`	최대 글자 수. 아래 글자 수 표시가 n / max로 바뀝니다.
`rows`	`number`	입력칸 높이(줄 수, 기본 8). 크기를 끌어 바꿀 수 있습니다.
`placeholder`	`string`	빈 입력칸에 보이는 안내.
`singleClickEdit (column)`	`boolean`	더블클릭 대신 한 번 클릭으로 편집기를 엽니다(모든 편집기에 적용).

스크롤·규칙·행 편집

뒤의 그리드를 스크롤해도 창은 닫히지 않습니다(다른 편집기는 그리드를 스크롤하면 저장됨).
required·validate 안내는 창 안에 보이고, 글이 맞을 때까지 창이 열려 있습니다.
editType: 'row'에서는 창도 행 편집의 일부라, 행에서 Esc를 누르면 글도 되돌아갑니다.
창을 닫은 뒤 Ctrl+Z로 변경을 되돌립니다.