npm - @operato/data-grist - Versions diffs - 8.2.19 → 8.2.22 - Mend

@operato/data-grist 8.2.19 → 8.2.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+### [8.2.22](https://github.com/hatiolab/operato/compare/v8.2.21...v8.2.22) (2026-04-10)
+### :bug: Bug Fix
+* 그리드 공백 2개일때 1개로 인식 현상 수정 ([8a4c2cd](https://github.com/hatiolab/operato/commit/8a4c2cd18113b32be2826217b1ff247b4da9c9b4))
+* 그리드 복붙 renderer 케이스 추가 ([61dfd01](https://github.com/hatiolab/operato/commit/61dfd013abb7ac11b68ff8936aa1d2cff614f438))
+* 그리드 복붙시 태그 제거 ([4a8fdc1](https://github.com/hatiolab/operato/commit/4a8fdc1c4198a7bb61afc77a8cafde3adfba453d))
+* 그리드 복붙시 태그 제거 ([a2c572c](https://github.com/hatiolab/operato/commit/a2c572c6f056744f1599bc61967364e273b77236))
+* 그리드 셀 ime-buffer로 한글 입력시 composing 유지 ([7fbcc88](https://github.com/hatiolab/operato/commit/7fbcc880ca80ad65860f5ef36fc54348999e85c3))
+* 그리드 셀 ime-buffer로 한글 입력시 composing 유지 ([690464f](https://github.com/hatiolab/operato/commit/690464f0ae8dddbf94612c573a6a6be8dc51fcea))
+* 복사후 그리드 포커스 빠짐 현상 수정 ([e020535](https://github.com/hatiolab/operato/commit/e020535cf370f659549f81521b06a0c9ffa8523e))
+* 체리픽 보정 ([5bbf3da](https://github.com/hatiolab/operato/commit/5bbf3da644f222212c70e451b84d03dd4e98e73f))
+### [8.2.20](https://github.com/hatiolab/operato/compare/v8.2.19...v8.2.20) (2026-02-09)
+### :bug: Bug Fix
+* 그리드 multiple 일때 헤더 체크박스 숨기기 ([c4ce8a4](https://github.com/hatiolab/operato/commit/c4ce8a43d4ff09468cc97a489b351d0262eb0bdb))
 ### [8.2.19](https://github.com/hatiolab/operato/compare/v8.2.18...v8.2.19) (2026-01-09)

package/dist/src/data-grid/data-grid-body-style.js CHANGED Viewed

@@ -53,7 +53,7 @@ export const dataGridBodyStyle = css `
     color: var(--grid-record-emphasized-color) !important;
   }
-  [editing] {
+  ox-grid-field[editing] {
     background-color: var(--grid-record-editing-background-color);
   }

package/dist/src/data-grid/data-grid-body-style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-auto-rows: var(--grid-record-height, min-content);\n\n overflow: auto;\n outline: none;\n color: var(--grid-record-color);\n position: relative;\n border-bottom: var(--grid-body-bottom-border);\n }\n\n ox-grid-field[odd] {\n background-color: var(--grid-record-odd-background-color);\n }\n\n ox-grid-field[disabled] {\n background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n color: var(--grid-record-disabled-color, var(--grid-record-color));\n opacity: var(--grid-record-disabled-opacity, 1);\n }\n ox-grid-field[odd][disabled] {\n background-color: var(\n --grid-odd-record-disabled-background-color,\n var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n );\n color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n }\n\n ox-grid-field[selected-row] {\n background-color: var(--grid-record-selected-background-color);\n color: var(--grid-record-selected-color);\n }\n\n ox-grid-field[focused-row] {\n box-shadow: var(--grid-record-focused-box-shadow);\n font-weight: bold;\n color: var(--grid-record-focused-color);\n background-image: var(--focused-background-image);\n background-blend-mode: darken;\n }\n\n ox-grid-field[focused] {\n border: var(--grid-record-focused-cell-border);\n }\n\n ox-grid-field[emphasized-row],\n ox-grid-field[emphasized-row][focused] {\n background-color: var(--grid-record-emphasized-background-color) !important;\n color: var(--grid-record-emphasized-color) !important;\n }\n\n [editing] {\n background-color: var(--grid-record-editing-background-color);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n ox-grid-field[focused] {\n border: none;\n }\n\n ox-grid-field[selected-row] {\n background-color: transparent;\n }\n\n ox-grid-field[emphasized-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[focused-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[editing] {\n background-color: transparent;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n ox-grid-field[focused-row] {\n background-blend-mode: lighten;\n }\n }\n\n @media (prefers-color-scheme: light) {\n ox-grid-field[focused-row] {\n background-blend-mode: darken;\n }\n }\n`\n"]}
1	+ {"version":3,"file":"data-grid-body-style.js","sourceRoot":"","sources":["../../../src/data-grid/data-grid-body-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgGnC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const dataGridBodyStyle = css`\n :host {\n display: grid;\n grid-template-columns: var(--grid-template-columns);\n grid-auto-rows: var(--grid-record-height, min-content);\n\n overflow: auto;\n outline: none;\n color: var(--grid-record-color);\n position: relative;\n border-bottom: var(--grid-body-bottom-border);\n }\n\n ox-grid-field[odd] {\n background-color: var(--grid-record-odd-background-color);\n }\n\n ox-grid-field[disabled] {\n background-color: var(--grid-record-disabled-background-color, var(--grid-record-background-color));\n color: var(--grid-record-disabled-color, var(--grid-record-color));\n opacity: var(--grid-record-disabled-opacity, 1);\n }\n ox-grid-field[odd][disabled] {\n background-color: var(\n --grid-odd-record-disabled-background-color,\n var(--grid-record-disabled-background-color, var(--grid-record-odd-background-color))\n );\n color: var(--grid-odd-record-disabled-color, var(--grid-record-disabled-color, var(--grid-record-color)));\n opacity: var(--grid-odd-record-disabled-opacity, var(--grid-record-disabled-opacity, 1));\n }\n\n ox-grid-field[selected-row] {\n background-color: var(--grid-record-selected-background-color);\n color: var(--grid-record-selected-color);\n }\n\n ox-grid-field[focused-row] {\n box-shadow: var(--grid-record-focused-box-shadow);\n font-weight: bold;\n color: var(--grid-record-focused-color);\n background-image: var(--focused-background-image);\n background-blend-mode: darken;\n }\n\n ox-grid-field[focused] {\n border: var(--grid-record-focused-cell-border);\n }\n\n ox-grid-field[emphasized-row],\n ox-grid-field[emphasized-row][focused] {\n background-color: var(--grid-record-emphasized-background-color) !important;\n color: var(--grid-record-emphasized-color) !important;\n }\n\n ox-grid-field[editing] {\n background-color: var(--grid-record-editing-background-color);\n }\n\n @media print {\n :host {\n grid-template-columns: var(--grid-template-print-columns);\n }\n ox-grid-field[focused] {\n border: none;\n }\n\n ox-grid-field[selected-row] {\n background-color: transparent;\n }\n\n ox-grid-field[emphasized-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[focused-row] {\n background-color: transparent;\n color: initial;\n }\n\n ox-grid-field[editing] {\n background-color: transparent;\n }\n }\n\n @media (prefers-color-scheme: dark) {\n ox-grid-field[focused-row] {\n background-blend-mode: lighten;\n }\n }\n\n @media (prefers-color-scheme: light) {\n ox-grid-field[focused-row] {\n background-blend-mode: darken;\n }\n }\n`\n"]}

package/dist/src/data-grid/data-grid-body.d.ts CHANGED Viewed

@@ -32,6 +32,9 @@ export declare class DataGridBody extends LitElement {
     private _recordViewRow?;
     private _draggable?;
     private _gridElement?;
+    private _imeBuffer?;
+    _imeComposing: boolean;
+    _imeEditing: boolean;
     resetEdit(): void;
     handleOnScroll(e: WheelEvent): void;
     render(): import("lit-html").TemplateResult<1>;
@@ -48,9 +51,20 @@ export declare class DataGridBody extends LitElement {
         row: number;
         record: GristRecord;
     }): void;
-    getSelectedBlockValues(): Array<Array<any>> | any | undefined;
+    getSelectedBlockValues(): {
+        html: string;
+        text: string;
+    } | undefined;
     copy(): Promise<void>;
     paste(): Promise<void>;
     setSelectBlock(start?: DataGridField, end?: DataGridField): void;
     buildAccumulatorRecord(): GristRecord;
+    /** IME buffer를 포커스된 셀 위에 위치시킨다 */
+    private _positionIMEBuffer;
+    /** IME buffer 값을 field-change 이벤트로 커밋한다 */
+    _commitIMEBuffer(row: number, column: number): void;
+    /** IME buffer 취소 (값 버리기) */
+    _discardIMEBuffer(): void;
+    /** IME buffer 초기화 */
+    private _resetIMEBuffer;
 }

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

@@ -55,6 +55,8 @@ let DataGridBody = class DataGridBody extends LitElement {
         this.from = -1;
         this.to = -1;
         this.fixedLefts = [];
+        this._imeComposing = false;
+        this._imeEditing = false;
         // 검색시 스크롤 맨 위로
         this._onFetchParamsChange = () => {
             this.scrollTop = 0;
@@ -156,6 +158,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>
     `;
     }
@@ -164,12 +167,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;
@@ -203,12 +237,18 @@ let DataGridBody = class DataGridBody extends LitElement {
                 }
             }));
         });
-        this.renderRoot.addEventListener('mousedown', (event) => {
-            const e = event;
+        this.renderRoot.addEventListener('pointerdown', (e) => {
+            /* 클릭 시 IME buffer가 활성 상태면 먼저 커밋 */
+            if (this._imeEditing) {
+                const { row = 0, column = 0 } = this.focused || {};
+                this._commitIMEBuffer(row, column);
+            }
             this.setSelectBlock();
-            if (e.buttons !== 1) {
+            if ('buttons' in e && e.buttons !== 1) {
                 return;
             }
+            e.preventDefault();
+            e.stopPropagation();
             this._draggable = true;
             var target = e.target.closest('ox-grid-field');
             var { rowIndex, columnIndex } = target || {};
@@ -224,11 +264,13 @@ let DataGridBody = class DataGridBody extends LitElement {
                 this.startEditTarget(rowIndex, columnIndex);
             }
         });
-        this.renderRoot.addEventListener('mousemove', (event) => {
+        this.renderRoot.addEventListener('pointermove', (event) => {
             const e = event;
-            if (e.buttons !== 1 || !this._draggable) {
+            if (('buttons' in e && e.buttons !== 1) || !this._draggable) {
                 return;
             }
+            e.preventDefault();
+            e.stopPropagation();
             const field = e.target;
             if (!this._selectBlock) {
                 this.setSelectBlock(this.focusedField || field, this.focusedField || field);
@@ -240,7 +282,9 @@ let DataGridBody = class DataGridBody extends LitElement {
                 this.setSelectBlock(start, end);
             }
         });
-        this.renderRoot.addEventListener('mouseup', (event) => {
+        this.renderRoot.addEventListener('pointerup', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
             this._draggable = false;
         });
         this.renderRoot.addEventListener('click', dataGridBodyClickHandler.bind(this));
@@ -292,6 +336,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,
@@ -327,6 +373,11 @@ let DataGridBody = class DataGridBody extends LitElement {
             if (left !== undefined) {
                 this.scrollLeft = left;
             }
+            /* IME buffer 위치 업데이트 */
+            this._positionIMEBuffer();
+            if (!this.editTarget && this._imeBuffer) {
+                this._imeBuffer.focus();
+            }
         }
         // 페이징 바뀌면 스크롤 맨 위로
         if (changes.has('data')) {
@@ -342,7 +393,18 @@ let DataGridBody = class DataGridBody extends LitElement {
         }
     }
     focus() {
-        super.focus();
+        if (this.editTarget) {
+            /* 에디터 편집 모드에서는 에디터가 자체적으로 포커스를 관리하므로 간섭하지 않는다 */
+            return;
+        }
+        if (this._imeBuffer) {
+            /* 비편집 모드에서는 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__']);
@@ -365,6 +427,7 @@ let DataGridBody = class DataGridBody extends LitElement {
             delete this._recordViewRow;
         });
     }
+    /* 선택된 셀 블록의 값을 HTML(table)과 plain text(TSV) 두 가지 포맷으로 반환 */
     getSelectedBlockValues() {
         var { start, end } = this._selectBlock || {};
         if (!(start && end)) {
@@ -378,34 +441,81 @@ 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;
+                    const columnIndex = start + index;
+                    const column = columns[columnIndex];
+                    const value = record === null || record === void 0 ? void 0 : record[column.name];
+                    const type = typeof value;
+                    /* htmlText: object는 JSON 문자열로 보존 → data-value 속성에 저장되어 그리드 붙여넣기 시 복원됨 */
+                    const htmlText = value === undefined || value === null ? '' : type == 'object' ? JSON.stringify(value) : value;
+                    /* plainText: ① null/undefined → renderer ② object → name → renderer ③ 기타 → 값 그대로 */
+                    let plainText = '';
+                    if (value === undefined || value === null) {
+                        /* 값이 없지만 renderer가 record의 다른 경로로 텍스트를 표시할 수 있음 */
+                        if ((_a = column.record) === null || _a === void 0 ? void 0 : _a.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 */
+                        plainText = (value === null || value === void 0 ? void 0 : value.name) || '';
+                        if (!plainText && ((_b = column.record) === null || _b === void 0 ? void 0 : _b.renderer)) {
+                            try {
+                                const r = column.record.renderer(value, column, record, rowIndex, null);
+                                if (typeof r === 'string')
+                                    plainText = r;
+                            }
+                            catch (e) { }
+                        }
+                    }
+                    else {
+                        plainText = value;
+                    }
+                    return { type, htmlText, plainText };
+                });
+                return cells;
+            });
+            const html = '<table>' +
+                rows
+                    .map(cells => '<tr>' +
+                    cells
+                        .map(c => c.type == 'object' && c.htmlText
+                        ? `<td type=${c.type} data-value="${String(c.htmlText).replace(/"/g, '&quot;')}">${c.plainText}</td>`
+                        : `<td type=${c.type}>${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;
@@ -482,8 +592,8 @@ let DataGridBody = class DataGridBody extends LitElement {
                     const cells = record.querySelectorAll('td');
                     cells.forEach((item, columnIndex) => {
                         const targetColumn = columns[column + columnIndex];
-                        let value = item.textContent;
-                        // let value = item.textContent?.trim() as any
+                        /* data-value 속성이 있으면 우선 사용 (그리드에서 복사한 object 데이터 복원용) */
+                        let value = (item.dataset.value || item.textContent);
                         let type = targetColumn.type || item.getAttribute('type') || 'string';
                         type = type.includes('object') ? 'object' : type; // 오브젝트 타입 예외처리
                         let { editable } = targetColumn.record;
@@ -551,31 +661,48 @@ 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) {
+                            this.dispatchEvent(new CustomEvent('field-change', {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    before: targetRecord[targetColumn.name],
+                                    after: cellValue || undefined,
+                                    column: targetColumn,
+                                    record: targetRecord,
+                                    row: targetRowIndex
+                                }
+                            }));
+                        }
+                    });
+                });
             }
         }
         catch (e) {
             console.log('e : ', e);
         }
+        finally {
+            /* paste 완료 후 포커스를 그리드로 복원 */
+            this.focus();
+        }
     }
     setSelectBlock(start, end) {
         var _a;
@@ -614,12 +741,84 @@ 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,
     css `
       :host {
         font-variation-settings: 'FILL' 1;
+        overscroll-behavior: none;
+        user-select: none;
       }
       [select-block] {
@@ -631,6 +830,7 @@ DataGridBody.styles = [
         border: var(--grid-record-focused-cell-border);
         background-image: var(--focused-background-image);
         pointer-events: none;
         z-index: 5;
       }
@@ -663,6 +863,31 @@ DataGridBody.styles = [
           box-shadow: none !important;
         }
       }
+      /* 한글 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([