@operato/data-grist 10.0.0-beta.7 → 10.1.0

package/dist/src/data-grid/data-grid-body.js

@@ -33,6 +33,40 @@ function calcScrollPos(parent, child) {
         top: ct < pt ? scrollTop - (pt - ct) : cb > pb ? scrollTop - (pb - cb) - scrollbarHeight : undefined
     };
 }
+/* select 타입 붙여넣기: display 또는 value 텍스트와 매칭되는 옵션의 value를 반환 */
+function resolveSelectPasteValue(text, column, record) {
+    var _a, _b;
+    const rowOptionField = record[((_a = column.record) === null || _a === void 0 ? void 0 : _a.rowOptionField) || ''];
+    let { options = [] } = rowOptionField ? rowOptionField : column.record || {};
+    /* options가 함수인 경우 호출하여 배열을 가져옴 (arrow function이므로 this는 정의 시점에 바인딩됨) */
+    if (typeof options === 'function') {
+        try {
+            options = options();
+        }
+        catch (e) {
+            return undefined;
+        }
+    }
+    if (!Array.isArray(options)) {
+        return undefined;
+    }
+    const trimmed = String(text).trim();
+    if (!trimmed)
+        return undefined;
+    for (const opt of options) {
+        if (typeof opt === 'string') {
+            if (opt.trim() === trimmed)
+                return opt;
+        }
+        else if (opt && typeof opt === 'object') {
+            const display = String(opt.display || opt.name || '').trim();
+            const val = String((_b = opt.value) !== null && _b !== void 0 ? _b : '').trim();
+            if (display === trimmed || val === trimmed)
+                return opt.value;
+        }
+    }
+    return undefined;
+}
 const ZERO_FOCUS = {
     row: 0,
     column: 0
@@ -56,11 +90,18 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.from = -1;
         this.to = -1;
         this.fixedLefts = [];
+        this._imeComposing = false;
+        this._imeEditing = false;
+        this._lastPointerTouch = false;
         // 검색시 스크롤 맨 위로
         this._onFetchParamsChange = () => {
             this.scrollTop = 0;
         };
     }
+    /* 편집 가능한 셀이 하나라도 있는지 — 없으면(읽기 전용 그리드) IME 입력 버퍼로 포커스를 넘기지 않는다 */
+    get _hasEditableColumn() {
+        return this.columns.some(column => { var _a; return !column.hidden && !column.gutterName && !!((_a = column.record) === null || _a === void 0 ? void 0 : _a.editable); });
+    }
     resetEdit() {
         this.editTarget = null;
     }
@@ -157,6 +198,7 @@ let DataGridBody = class DataGridBody extends LitElement {
           `
             : nothing}
       ${start && end && start !== end ? html ` <div select-block></div> ` : html ``}
+      <input id="ime-buffer" type="text" />
       <slot></slot>
     `;
     }
@@ -165,12 +207,43 @@ let DataGridBody = class DataGridBody extends LitElement {
         // this.addEventListener('scroll', this.handleOnScroll.bind(this))
         /* focus() 를 받을 수 있도록 함. */
         this.setAttribute('tabindex', '-1');
+        /* 한글 IME composition을 위한 숨겨진 input 버퍼 설정 */
+        const imeBuffer = this.renderRoot.querySelector('#ime-buffer');
+        this._imeBuffer = imeBuffer;
+        imeBuffer.addEventListener('compositionstart', () => {
+            this._imeComposing = true;
+            this._imeEditing = true;
+            imeBuffer.classList.add('active');
+            this._positionIMEBuffer();
+        });
+        imeBuffer.addEventListener('compositionend', () => {
+            this._imeComposing = false;
+        });
+        imeBuffer.addEventListener('input', () => {
+            if (!this._imeComposing && !this._imeEditing && imeBuffer.value) {
+                /* 영어/숫자: 실제 값이 입력된 경우에만 활성화 */
+                this._imeEditing = true;
+                imeBuffer.classList.add('active');
+                this._positionIMEBuffer();
+            }
+        });
         /*
          * focusout 으로 property를 변경시키는 경우, focusout에 의해 update가 발생하는 경우에는,
          * 그리드 내부의 컴포넌트가 갱신되는 현상을 초래하게 된다.
          * 따라서, focusout 핸들러에서 update를 유발하는 코드는 강력하게 금지시킨다.
          */
         this.addEventListener('focusout', e => {
+            var _a;
+            /* IME buffer로 포커스가 이동하는 경우 keydown listener 유지 */
+            const related = e.relatedTarget;
+            if (related && ((_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(related))) {
+                return;
+            }
+            /* 그리드 외부로 포커스 이동 시 IME buffer 커밋 */
+            if (this._imeEditing) {
+                const { row = 0, column = 0 } = this.focused || {};
+                this._commitIMEBuffer(row, column);
+            }
             if (this._focusedListener) {
                 this.removeEventListener('keydown', this._focusedListener);
                 delete this._focusedListener;
@@ -205,8 +278,21 @@ let DataGridBody = class DataGridBody extends LitElement {
             }));
         });
         this.renderRoot.addEventListener('pointerdown', (e) => {
+            const pe = e;
+            const isTouch = pe.pointerType === 'touch';
+            /* 터치 이벤트 여부 기록 — 태블릿에서 input focus로 가상 키보드가 뜨는 것을 방지 */
+            this._lastPointerTouch = isTouch;
+            /* 클릭 시 IME buffer가 활성 상태면 먼저 커밋 */
+            if (this._imeEditing) {
+                const { row = 0, column = 0 } = this.focused || {};
+                this._commitIMEBuffer(row, column);
+            }
             this.setSelectBlock();
-            if ('buttons' in e && e.buttons !== 1) {
+            if (isTouch) {
+                /* 터치: click 이벤트에서 처리 (스크롤 시에는 click이 발생하지 않음) */
+                return;
+            }
+            if ('buttons' in e && pe.buttons !== 1) {
                 return;
             }
             e.preventDefault();
@@ -245,8 +331,10 @@ let DataGridBody = class DataGridBody extends LitElement {
             }
         });
         this.renderRoot.addEventListener('pointerup', (event) => {
-            event.preventDefault();
-            event.stopPropagation();
+            if (event.pointerType !== 'touch') {
+                event.preventDefault();
+                event.stopPropagation();
+            }
             this._draggable = false;
         });
         this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this));
@@ -254,8 +342,15 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.renderRoot.addEventListener('contextmenu', dataGridBodyContextMenuHandler.bind(this));
         this.addEventListener('focus-change', dataGridBodyFocusChangeHandler.bind(this));
         requestAnimationFrame(() => {
-            const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary');
-            this.style.setProperty('--focused-background-image', `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' fill-opacity='0.2' x='0' y='0' width='100%' height='100%'/></svg>")`);
+            // 1. 공백 찌꺼기가 들어갈 수 있으므로 .trim()으로 깔끔하게 처리
+            const primaryColor = getComputedStyle(this).getPropertyValue('--md-sys-color-primary').trim();
+            // 2. 가독성을 위해 svg 문자열 조립 분리
+            const svgString = `<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect fill='${primaryColor}' fill-opacity='0.2' x='0' y='0' width='100%' height='100%'/></svg>`;
+            // 3. Hex 코드의 '#' 기호 및 '< >' 괄호들이 파서를 깨뜨리는 것을 완벽 방지하기 위해 전체 인코딩
+            const encodedSvg = encodeURIComponent(svgString);
+            this.style.setProperty('--focused-background-image', 
+            // 4. 비표준인 ;utf8 태그를 떼어내고, 인코딩된 SVG 데이터를 주입
+            `url("data:image/svg+xml,${encodedSvg}")`);
         });
         this.addEventListener('show-record-view', (e) => this.popupRecordView(e.detail));
         this.addEventListener('scroll', function () {
@@ -298,6 +393,8 @@ let DataGridBody = class DataGridBody extends LitElement {
         if (this.editTarget && this.editTarget.row == row && this.editTarget.column == column) {
             return;
         }
+        /* 에디터 편집 전환 시 IME buffer 정리 */
+        this._resetIMEBuffer();
         this.editTarget = {
             row,
             column,
@@ -333,6 +430,11 @@ let DataGridBody = class DataGridBody extends LitElement {
             if (left !== undefined) {
                 this.scrollLeft = left;
             }
+            /* IME buffer 위치 업데이트 */
+            this._positionIMEBuffer();
+            if (!this.editTarget && this._imeBuffer && !this._lastPointerTouch && this._hasEditableColumn) {
+                this._imeBuffer.focus();
+            }
         }
         // 페이징 바뀌면 스크롤 맨 위로
         if (changes.has('data')) {
@@ -348,7 +450,18 @@ let DataGridBody = class DataGridBody extends LitElement {
         }
     }
     focus() {
-        super.focus();
+        if (this.editTarget) {
+            /* 에디터 편집 모드에서는 에디터가 자체적으로 포커스를 관리하므로 간섭하지 않는다 */
+            return;
+        }
+        if (this._imeBuffer && !this._lastPointerTouch && this._hasEditableColumn) {
+            /* 비편집 모드에서는 IME buffer로 포커스 리다이렉트 (터치 시/읽기 전용 그리드에서는 제외) */
+            this._positionIMEBuffer();
+            this._imeBuffer.focus();
+        }
+        else {
+            super.focus();
+        }
         if (this.focused === ZERO_FOCUS) {
             let { records } = this.data;
             let row = records.findIndex(record => record['__selected__']);
@@ -371,6 +484,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             delete this._recordViewRow;
         });
     }
+    /* 선택된 셀 블록의 값을 HTML(table)과 plain text(TSV) 두 가지 포맷으로 반환 */
     getSelectedBlockValues() {
         var { start, end } = this._selectBlock || {};
         if (!(start && end)) {
@@ -384,34 +498,117 @@ let DataGridBody = class DataGridBody extends LitElement {
             const endColumnIndex = start.columnIndex < end.columnIndex ? end.columnIndex : start.columnIndex;
             const columnArray = new Array(endColumnIndex - startColumnIndex + 1).fill(startColumnIndex);
             const columns = this.columns.filter(column => !column.hidden);
-            return ('<table>' +
-                new Array(endRowIndex - startRowIndex + 1)
-                    .fill(startRowIndex)
-                    .map((start, index) => {
-                    const rowIndex = start + index;
-                    const record = this.data.records[rowIndex];
-                    const tds = columnArray
-                        .map((start, index) => {
-                        const columnIndex = start + index;
-                        const column = columns[columnIndex];
-                        const value = record === null || record === void 0 ? void 0 : record[column.name];
-                        const type = typeof value;
-                        const text = value === undefined || value === null ? '' : type == 'object' ? JSON.stringify(value) : value;
-                        return `<td type=${type}>${text}</td>`;
-                    })
-                        .join('');
-                    return `<tr>${tds}</tr>`;
-                })
+            /*
+             * 클립보드에 두 가지 포맷(text/html, text/plain)을 동시에 저장한다.
+             * 붙여넣기하는 앱이 자신이 지원하는 포맷을 골라 읽는다.
+             *   생성되는 HTML:
+             *   <td type=object data-value="{&quot;id&quot;:...}">탈수 절임배추</td>
+             *                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  ^^^^^^^^^^^^
+             *                   그리드만 읽는 숨겨진 JSON               Excel/메모장이 보는 텍스트
+             */
+            const rows = new Array(endRowIndex - startRowIndex + 1).fill(startRowIndex).map((start, index) => {
+                const rowIndex = start + index;
+                const record = this.data.records[rowIndex];
+                const cells = columnArray.map((start, index) => {
+                    var _a, _b, _c, _d;
+                    const columnIndex = start + index;
+                    const column = columns[columnIndex];
+                    const value = record === null || record === void 0 ? void 0 : record[column.name];
+                    const type = typeof value;
+                    /* select 타입: value → display 텍스트 미리 계산 (htmlText/plainText 공용) */
+                    let selectDisplay = value;
+                    if (column.type === 'select' && value !== undefined && value !== null) {
+                        const src = (_b = record[((_a = column.record) === null || _a === void 0 ? void 0 : _a.rowOptionField) || '']) !== null && _b !== void 0 ? _b : column.record;
+                        const options = Array.isArray(src === null || src === void 0 ? void 0 : src.options) ? src.options : [];
+                        const opt = options.find((o) => { var _a; return (typeof o === 'string' ? o : String((_a = o === null || o === void 0 ? void 0 : o.value) !== null && _a !== void 0 ? _a : '')).trim() === String(value).trim(); });
+                        selectDisplay = opt ? (typeof opt === 'string' ? opt : opt.display || opt.name || value) : value;
+                    }
+                    /* htmlText: object는 JSON 문자열로 보존(data-value) → 그리드 붙여넣기 시 복원됨. select는 display 텍스트 */
+                    const htmlText = value === undefined || value === null ? '' : type == 'object' ? JSON.stringify(value) : column.type === 'select' ? selectDisplay : value;
+                    /* plainText: ① null/undefined → renderer ② object → name → renderer ③ select → display ④ 기타 → 값 그대로 */
+                    let plainText = '';
+                    if (value === undefined || value === null) {
+                        /* 값이 없지만 renderer가 record의 다른 경로로 텍스트를 표시할 수 있음 */
+                        if ((_c = column.record) === null || _c === void 0 ? void 0 : _c.renderer) {
+                            try {
+                                const r = column.record.renderer(value, column, record, rowIndex, null);
+                                if (typeof r === 'string')
+                                    plainText = r;
+                            }
+                            catch (e) { }
+                        }
+                    }
+                    else if (type == 'object') {
+                        /* object: name 필드가 문자열인 경우 우선, 없으면 renderer */
+                        const rawName = value === null || value === void 0 ? void 0 : value.name;
+                        plainText = typeof rawName === 'string' ? rawName : '';
+                        if (!plainText && ((_d = column.record) === null || _d === void 0 ? void 0 : _d.renderer)) {
+                            try {
+                                const r = column.record.renderer(value, column, record, rowIndex, null);
+                                if (typeof r === 'string')
+                                    plainText = r;
+                            }
+                            catch (e) { }
+                        }
+                    }
+                    else if (column.type === 'select') {
+                        plainText = selectDisplay;
+                    }
+                    else {
+                        plainText = value;
+                    }
+                    /* 안전장치: plainText가 object이면 빈 문자열로 대체하여 [object Object] 방지 */
+                    if (plainText !== null && plainText !== undefined && typeof plainText === 'object') {
+                        plainText = '';
+                    }
+                    return { type, htmlText, plainText };
+                });
+                return cells;
+            });
+            const escapeHtml = (unsafe) => {
+                if (unsafe == null)
+                    return '';
+                return String(unsafe).replace(/[&<>"']/g, function (m) {
+                    switch (m) {
+                        case '&':
+                            return '&amp;';
+                        case '<':
+                            return '&lt;';
+                        case '>':
+                            return '&gt;';
+                        case '"':
+                            return '&quot;';
+                        case "'":
+                            return '&#039;';
+                        default:
+                            return m;
+                    }
+                });
+            };
+            const html = '<table>' +
+                rows
+                    .map(cells => '<tr>' +
+                    cells
+                        .map(c => c.type == 'object' && c.htmlText
+                        ? `<td type=${c.type} data-value="${escapeHtml(c.htmlText)}">${escapeHtml(c.plainText)}</td>`
+                        : `<td type=${c.type}>${escapeHtml(c.htmlText)}</td>`)
+                        .join('') +
+                    '</tr>')
                     .join('') +
-                '</table>');
+                '</table>';
+            /* 태그 없는 TSV 포맷 (object는 name만) */
+            const text = rows.map(cells => cells.map(c => String(c.plainText)).join('\t')).join('\n');
+            return { html, text };
         }
     }
     async copy() {
         const copied = this.getSelectedBlockValues();
+        if (!copied)
+            return;
         await navigator.clipboard.write([
             new ClipboardItem({
-                'text/html': new Blob([copied], { type: 'text/html' }),
-                'text/plain': new Blob([copied], { type: 'text/plain' })
+                'text/html': new Blob([copied.html], { type: 'text/html' }),
+                'text/plain': new Blob([copied.text], { type: 'text/plain' })
             })
         ]);
         const selectBlock = this.selectBlock || this.focusedField;
@@ -487,10 +684,14 @@ let DataGridBody = class DataGridBody extends LitElement {
                     }
                     const cells = record.querySelectorAll('td');
                     cells.forEach((item, columnIndex) => {
+                        var _a;
                         const targetColumn = columns[column + columnIndex];
-                        let value = item.textContent;
-                        // let value = item.textContent?.trim() as any
-                        let type = targetColumn.type || item.getAttribute('type') || 'string';
+                        if (!targetColumn || targetColumn.gutterName)
+                            return;
+                        /* data-value 속성이 있으면 우선 사용 (그리드에서 복사한 object 데이터 복원용) */
+                        let value = (item.dataset.value || item.textContent);
+                        const sourceType = item.getAttribute('type') || 'string';
+                        let type = targetColumn.type || sourceType;
                         type = type.includes('object') ? 'object' : type; // 오브젝트 타입 예외처리
                         let { editable } = targetColumn.record;
                         if (typeof editable === 'function') {
@@ -506,13 +707,17 @@ let DataGridBody = class DataGridBody extends LitElement {
                                             ? null
                                             : value;
                                     }
-                                    catch (err) { }
+                                    catch (err) {
+                                        value = null;
+                                    }
                                     break;
                                 case 'parameters':
                                     try {
                                         value = JSON.parse(value || 'null');
                                     }
-                                    catch (err) { }
+                                    catch (err) {
+                                        value = null;
+                                    }
                                     break;
                                 case 'boolean':
                                 case 'checkbox':
@@ -526,19 +731,41 @@ let DataGridBody = class DataGridBody extends LitElement {
                                     break;
                                 case 'string':
                                     try {
-                                        value = JSON.parse(value).toString().trim();
+                                        const parsed = JSON.parse(value);
+                                        /* 오브젝트를 문자열 셀에 붙여넣을 때 셀의 표시 텍스트(textContent) 우선 사용 */
+                                        if (typeof parsed === 'object' && parsed !== null) {
+                                            value = ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || parsed.name || '';
+                                        }
+                                        else {
+                                            value = String(parsed).trim();
+                                        }
                                     }
                                     catch (err) { }
                                     break;
+                                case 'select':
+                                    /* select 타입: 붙여넣은 텍스트를 옵션의 display/value와 매칭하여 value로 변환 */
+                                    value = resolveSelectPasteValue(String(value), targetColumn, targetRecord);
+                                    break;
                                 default:
-                                    try {
-                                        value = JSON.parse(value);
+                                    /* 원본이 string 으로 복사된 값(color-map 등 JSON 문자열 저장 타입)은
+                                       파싱하지 않고 문자열 그대로 유지 */
+                                    if (sourceType === 'string' && !item.dataset.value) {
+                                        value = value === null || value === void 0 ? void 0 : value.trim();
+                                    }
+                                    else {
+                                        try {
+                                            value = JSON.parse(value);
+                                        }
+                                        catch (err) {
+                                            if (type === 'json' || type.includes('object'))
+                                                value = null;
+                                        }
                                     }
-                                    catch (err) { }
                             }
                         }
                         else {
-                            value = undefined; /* default value 로 설정되도록 하기위해서 undefined로 설정. */
+                            /* 기존 레코드(id 있음)는 명시적으로 비우기 위해 null, 신규 레코드는 default value 적용을 위해 undefined */
+                            value = targetRecord.id ? null : undefined;
                         }
                         if (targetColumn && !targetColumn.gutterName && editable) {
                             this.dispatchEvent(new CustomEvent('field-change', {
@@ -557,31 +784,54 @@ let DataGridBody = class DataGridBody extends LitElement {
                 });
                 return;
             }
-            else if (!selection && type === 'text/plain') {
-                const targetRecord = records[row] || { __dirty__: '+' };
-                const targetColumn = columns[column];
-                let { editable } = targetColumn.record;
-                if (typeof editable === 'function') {
-                    editable = editable.call(this, content, targetColumn, targetRecord, row, this);
-                }
-                if (targetColumn && !targetColumn.gutterName && editable) {
-                    this.dispatchEvent(new CustomEvent('field-change', {
-                        bubbles: true,
-                        composed: true,
-                        detail: {
-                            before: targetRecord[targetColumn.name],
-                            after: content,
-                            column: targetColumn,
-                            record: targetRecord,
-                            row: row
+            else if (type === 'text/plain') {
+                /* TSV 포맷 파싱: 줄바꿈으로 행 분리, 탭으로 열 분리 (엑셀 등 외부 소스 붙여넣기 지원) */
+                const tsvRows = content.split('\n');
+                tsvRows.forEach((line, rowOffset) => {
+                    const targetRowIndex = row + rowOffset;
+                    var targetRecord = records[targetRowIndex] || { __dirty__: '+' };
+                    if (targetRowIndex >= records.length) {
+                        records.push(targetRecord);
+                    }
+                    const tsvCells = line.split('\t');
+                    tsvCells.forEach((cellValue, colOffset) => {
+                        const targetColumn = columns[column + colOffset];
+                        if (!targetColumn || targetColumn.gutterName)
+                            return;
+                        let { editable } = targetColumn.record;
+                        if (typeof editable === 'function') {
+                            editable = editable.call(this, cellValue, targetColumn, targetRecord, targetRowIndex, this);
                         }
-                    }));
-                }
+                        if (editable) {
+                            /* select 타입: 붙여넣은 텍스트를 옵션의 display/value와 매칭하여 value로 변환 */
+                            /* 빈값: 기존 레코드(id 있음)는 명시적으로 비우기 위해 null, 신규 레코드는 default value 적용을 위해 undefined */
+                            let resolvedValue = cellValue || (targetRecord.id ? null : undefined);
+                            if (targetColumn.type === 'select' && cellValue) {
+                                resolvedValue = resolveSelectPasteValue(cellValue, targetColumn, targetRecord);
+                            }
+                            this.dispatchEvent(new CustomEvent('field-change', {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    before: targetRecord[targetColumn.name],
+                                    after: resolvedValue,
+                                    column: targetColumn,
+                                    record: targetRecord,
+                                    row: targetRowIndex
+                                }
+                            }));
+                        }
+                    });
+                });
             }
         }
         catch (e) {
             console.log('e : ', e);
         }
+        finally {
+            /* paste 완료 후 포커스를 그리드로 복원 */
+            this.focus();
+        }
     }
     setSelectBlock(start, end) {
         var _a;
@@ -620,6 +870,75 @@ let DataGridBody = class DataGridBody extends LitElement {
             return record;
         }, {});
     }
+    /** IME buffer를 포커스된 셀 위에 위치시킨다 */
+    _positionIMEBuffer() {
+        var _a;
+        const focusedEl = (_a = this.renderRoot) === null || _a === void 0 ? void 0 : _a.querySelector('[focused]');
+        if (focusedEl && this._imeBuffer) {
+            this._imeBuffer.style.left = focusedEl.offsetLeft + 'px';
+            this._imeBuffer.style.top = focusedEl.offsetTop + 'px';
+            this._imeBuffer.style.width = focusedEl.offsetWidth + 'px';
+            this._imeBuffer.style.height = focusedEl.offsetHeight + 'px';
+        }
+    }
+    /** IME buffer 값을 field-change 이벤트로 커밋한다 */
+    _commitIMEBuffer(row, column) {
+        var _a;
+        const text = (_a = this._imeBuffer) === null || _a === void 0 ? void 0 : _a.value;
+        this._resetIMEBuffer();
+        if (!text)
+            return;
+        const columns = this.columns.filter(c => !c.hidden);
+        const col = columns[column];
+        if (!col || col.gutterName)
+            return;
+        const record = this.data.records[row] || { __dirty__: '+' };
+        let { editable } = col.record;
+        if (typeof editable === 'function') {
+            editable = editable.call(this, record[col.name], col, record, row, this);
+        }
+        if (!editable)
+            return;
+        /* 타입에 따른 값 변환 */
+        let value = text;
+        switch (col.type) {
+            case 'number':
+            case 'float':
+            case 'integer':
+            case 'progress':
+                value = parseToNumberOrNull(text);
+                if (value === null)
+                    return;
+                break;
+            case 'boolean':
+            case 'checkbox':
+                return; /* boolean은 키보드 텍스트 입력으로 편집 불가 */
+        }
+        this.dispatchEvent(new CustomEvent('field-change', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                before: record[col.name],
+                after: value,
+                column: col,
+                record,
+                row
+            }
+        }));
+    }
+    /** IME buffer 취소 (값 버리기) */
+    _discardIMEBuffer() {
+        this._resetIMEBuffer();
+    }
+    /** IME buffer 초기화 */
+    _resetIMEBuffer() {
+        if (this._imeBuffer) {
+            this._imeBuffer.value = '';
+            this._imeBuffer.classList.remove('active');
+        }
+        this._imeEditing = false;
+        this._imeComposing = false;
+    }
 };
 DataGridBody.styles = [
     dataGridBodyStyle,
@@ -673,6 +992,38 @@ DataGridBody.styles = [
           box-shadow: none !important;
         }
       }
+
+      @media (pointer: coarse) {
+        /* 터치 디바이스에서는 길게 눌러 텍스트 선택 허용 */
+        :host {
+          user-select: auto;
+        }
+      }
+
+      /* 한글 IME composition을 위한 숨겨진 input 버퍼 — 기존 에디터 셀 스타일과 일치 */
+      #ime-buffer {
+        position: absolute;
+        opacity: 0;
+        z-index: 10;
+        background-color: var(--grid-record-editing-background-color, var(--grid-record-background-color, #fff));
+        color: var(--md-sys-color-on-background, inherit);
+        font: inherit;
+        font-size: var(--grid-record-wide-fontsize);
+        border: 1px solid transparent;
+        border-width: 1px 0;
+        border-top: var(--grid-record-editing-border, none);
+        border-bottom: var(--grid-record-editing-border, none);
+        padding: var(--grid-record-padding);
+        box-sizing: border-box;
+        outline: none;
+        overflow: hidden;
+        pointer-events: none;
+      }
+
+      #ime-buffer.active {
+        opacity: 1;
+        pointer-events: auto;
+      }
     `
 ];
 __decorate([