@iyulab/editor-components 0.0.1 → 0.1.0

package/CHANGELOG.md

@@ -1,4 +1,24 @@
-# Changelog
-
-## [Unreleased]
-- Initial library version release
+# Changelog
+
+## [0.1.0] - 2026-07-19
+
+### Fixed
+- **`UTextEditor` 가 해제 후 접근에서 깨질 수 있던 타입 거짓말 제거** — `quill` 필드가 `Quill`(non-null 단언)로 선언돼 있는데 `disconnectedCallback` 은 `null as any` 로 null 을 대입하고 있었다. 타입 시스템을 속인 탓에 null 검사 누락 5곳이 가려져 있었다. 필드를 `Quill | null` 로 정직하게 선언하고, `text-change` 핸들러는 생성 시점의 지역 참조를 캡처하도록, `setQuillContents` 는 초기화 전/해제 후 호출을 무시하도록 고쳤다.
+
+### Changed
+- **이 패키지의 eslint 가 실제로 동작하기 시작했다.** `files` 패턴의 확장자 누락과 배열 프리셋 객체 스프레드 결함을 수정했다. `build` 스크립트의 `eslint &&` 게이트는 매칭 파일이 0개라 항상 통과하고 있었다. 위 null 결함은 이 복구로 처음 드러났다.
+- `npm run lint` / `npm run lint:fix` 스크립트 추가.
+- **Delta 타입 정밀화(소비자 영향 가능)**: `getDelta()` 가 `any` → `QuillDelta | null`, `setDelta()` 파라미터가 `any` → `QuillDeltaInput` 으로 좁혀졌다. 두 타입은 `quill-delta` 를 새 의존성으로 들이지 않고 Quill 자체 시그니처(`ReturnType<Quill['getContents']>` 등)에서 유도하므로 Quill 버전 변화를 자동으로 따라간다. `getDelta()` 가 `null` 을 반환할 수 있음이 이제 타입에 드러난다.
+- Lit 생명주기 파라미터(`firstUpdated`/`updated`)의 `any` 를 `PropertyValues` 로, Monaco worker 의 `(self as any)` 를 명시적 인터페이스로 교체.
+
+## [0.0.2] - 2026-07-17
+
+### Fixed
+- `u-code-editor`: 프로그램적 `value` 세팅 시 Monaco `onDidChangeModelContent`가 그대로 `change` 이벤트로 노출되어, controlled 래퍼(React 등)에서 에코 루프·state 오염을 유발하던 문제 수정. 이제 `change`는 사용자 편집에서만 발화한다.
+- `u-text-editor`: 프로그램적 `value` 세팅·초기 콘텐츠 주입이 `quill.root.innerHTML` 직접 변이로 이뤄져 Quill MutationObserver가 이를 사용자 편집(`source='user'`)으로 오인해 `change`가 발화되던 문제 수정. 콘텐츠 주입을 `clipboard.convert()` + `setContents(delta, 'silent')`로 전환하고, `text-change` 리스너는 `source='user'`만 `change`로 노출한다. 사용자 편집 시 `value` 프로퍼티도 동기화된다.
+- `u-text-editor`: 명령형 API도 동일 규약으로 정리 — `setHTML()`이 innerHTML 직접 변이로 change를 위장 발화하던 문제 수정(이제 `value` 프로퍼티 경로 위임), `setDelta()`/`clear()`는 silent source 전환 + `value` 프로퍼티 동기화.
+- README를 실제 구현에 맞게 재작성 — 잘못된 태그명(`<code-editor>`/`<rich-text-editor>` → `u-code-editor`/`u-text-editor`), 잘못된 prop(`noHeader` → `headless`), 존재하지 않는 `copy` 이벤트·`demo.html` 서술 제거, change 의미론·`/react` 서브패스 문서화.
+- 위 수정은 `@iyulab/components` 1.7.0의 "change = 사용자 상호작용 전용" 규약 정합 작업의 일환.
+
+## [Unreleased]
+- Initial library version release

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2025 Iyulab, Inc.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2025 Iyulab, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -1,116 +1,103 @@
-# @iyulab/editor-components
-
-다양한 에디터 컴포넌트를 제공하는 라이브러리입니다.
-
-## 포함된 컴포넌트
-
-### CodeEditor
-Monaco Editor를 기반으로 한 코드 에디터 컴포넌트입니다.
-
-**특징:**
-- 구문 강조 (JavaScript, TypeScript, JSON, CSS, HTML, Python 등)
-- 자동완성 및 IntelliSense
-- 에러 검사 및 린팅
-- 다크/라이트 테마 지원
-- 읽기 전용 모드
-- 커스터마이징 가능한 폰트 크기
-
-**사용법:**
-```html
-<code-editor
-  label="My Code Editor"
-  language="javascript"
-  theme="light"
-  font-size="14"
-  value="console.log('Hello World!');"
-  read-only="false">
-</code-editor>
-```
-
-**Properties:**
-- `noHeader`: 헤더 표시 여부 (boolean, default: false)
-- `label`: 헤더 레이블 텍스트 (string, default: "Editor")
-- `theme`: 테마 ("light" | "dark", default: "light")
-- `readOnly`: 읽기 전용 모드 (boolean, default: false)
-- `language`: 프로그래밍 언어 (string, default: "json")
-- `fontSize`: 폰트 크기 (number, default: 14)
-- `value`: 에디터 내용 (string, default: "")
-
-### RichTextEditor
-Quill.js를 기반으로 한 리치 텍스트 에디터 컴포넌트입니다.
-
-**특징:**
-- WYSIWYG 편집 환경
-- 다양한 텍스트 포맷팅 (굵게, 기울임, 밑줄 등)
-- 목록, 헤더, 인용구 지원
-- 링크 및 이미지 삽입
-- 커스터마이징 가능한 툴바
-- 다크/라이트 테마 지원
-- HTML, 텍스트, Delta 형식 지원
-
-**사용법:**
-```html
-<rich-text-editor
-  label="My Rich Text Editor"
-  theme="light"
-  height="300"
-  placeholder="Start writing..."
-  value="<h2>Hello World!</h2><p>This is <strong>rich text</strong>.</p>"
-  read-only="false">
-</rich-text-editor>
-```
-
-**Properties:**
-- `noHeader`: 헤더 표시 여부 (boolean, default: false)
-- `label`: 헤더 레이블 텍스트 (string, default: "Rich Text Editor")
-- `theme`: 테마 ("light" | "dark", default: "light")
-- `readOnly`: 읽기 전용 모드 (boolean, default: false)
-- `placeholder`: 플레이스홀더 텍스트 (string, default: "Start writing...")
-- `value`: 에디터 HTML 내용 (string, default: "")
-- `height`: 에디터 높이 (number, default: 300)
-- `toolbar`: 커스텀 툴바 설정 (array, optional)
-
-**Methods:**
-- `getHTML()`: HTML 형식으로 내용 반환
-- `getText()`: 플레인 텍스트로 내용 반환
-- `getDelta()`: Quill Delta 형식으로 내용 반환
-- `setHTML(html)`: HTML 형식으로 내용 설정
-- `setDelta(delta)`: Delta 형식으로 내용 설정
-- `clear()`: 모든 내용 삭제
-- `focus()`: 에디터에 포커스
-
-## 설치
-
-```bash
-npm install @iyulab/editor-components
-```
-
-## 사용법
-
-```javascript
-import '@iyulab/editor-components';
-
-// 또는 개별 컴포넌트만 import
-import { CodeEditor, RichTextEditor } from '@iyulab/editor-components';
-```
-
-## 이벤트
-
-### CodeEditor
-- `change`: 에디터 내용이 변경될 때 발생 (detail: string)
-
-### RichTextEditor
-- `change`: 에디터 내용이 변경될 때 발생 (detail: { html, text, delta })
-- `copy`: 복사 버튼 클릭 시 발생 (detail: string)
-
-## 데모
-
-프로젝트에 포함된 `demo.html` 파일을 통해 컴포넌트들을 실제로 테스트해볼 수 있습니다.
-
-```bash
-npm run start
-```
-
-## 라이선스
-
-MIT
+# @iyulab/editor-components
+
+다양한 에디터 컴포넌트를 제공하는 라이브러리입니다.
+
+## 설치
+
+```bash
+npm install @iyulab/editor-components
+```
+
+```javascript
+import '@iyulab/editor-components';
+
+// 또는 개별 컴포넌트만 import
+import { UCodeEditor, UTextEditor } from '@iyulab/editor-components';
+```
+
+React 래퍼는 `/react` 서브패스로 제공됩니다:
+
+```tsx
+import { UCodeEditor, UTextEditor } from '@iyulab/editor-components/react';
+```
+
+## 포함된 컴포넌트
+
+### `u-code-editor` (UCodeEditor)
+
+Monaco Editor 기반 코드 에디터 컴포넌트입니다.
+
+**특징:** 구문 강조 · 자동완성/IntelliSense · 다크/라이트 테마 자동 추적 · 읽기 전용 모드
+
+```html
+<u-code-editor
+  label="My Code Editor"
+  language="javascript"
+  font-size="14"
+  value="console.log('Hello World!');">
+</u-code-editor>
+```
+
+**Properties:**
+
+| Property | Type | Default | 설명 |
+|----------|------|---------|------|
+| `headless` | `boolean` | `false` | 헤더(라벨 영역) 숨김 |
+| `label` | `string` | `"Editor"` | 헤더 라벨 텍스트 |
+| `theme` | `"light" \| "dark"` | 시스템 테마 추적 | 에디터 테마 |
+| `readOnly` | `boolean` | `false` | 읽기 전용 모드 |
+| `language` | `string` | `"json"` | 구문 강조 언어 |
+| `fontSize` | `number` | `14` | 폰트 크기(px) |
+| `value` | `string` | `""` | 에디터 내용 |
+
+### `u-text-editor` (UTextEditor)
+
+Quill.js 기반 리치 텍스트(WYSIWYG) 에디터 컴포넌트입니다.
+
+**특징:** 텍스트 포맷팅 · 목록/헤더/인용구 · 링크/이미지 · 커스텀 툴바 · 다크/라이트 테마 자동 추적
+
+```html
+<u-text-editor
+  label="My Rich Text Editor"
+  height="300"
+  placeholder="Start writing..."
+  value="<h2>Hello World!</h2><p>This is <strong>rich text</strong>.</p>">
+</u-text-editor>
+```
+
+**Properties:**
+
+| Property | Type | Default | 설명 |
+|----------|------|---------|------|
+| `headless` | `boolean` | `false` | 헤더(라벨 영역) 숨김 |
+| `label` | `string` | `"Rich Text Editor"` | 헤더 라벨 텍스트 |
+| `theme` | `"light" \| "dark" \| "system"` | 시스템 테마 추적 | 에디터 테마 |
+| `readOnly` | `boolean` | `false` | 읽기 전용 모드 |
+| `placeholder` | `string` | `"Start writing..."` | 플레이스홀더 텍스트 |
+| `value` | `string` | `""` | 에디터 HTML 내용 |
+| `height` | `number` | `300` | 에디터 높이(px) |
+| `toolbar` | `string[][]` | 기본 툴바 | 커스텀 툴바 설정 |
+
+**Methods:**
+
+- `getHTML()` / `getText()` / `getDelta()`: HTML / 플레인 텍스트 / Quill Delta 형식으로 내용 반환
+- `setHTML(html)` / `setDelta(delta)`: 내용 설정 (프로그램적 — `change` 미발화)
+- `clear()`: 모든 내용 삭제 (프로그램적 — `change` 미발화)
+- `focus()`: 에디터에 포커스
+
+## 이벤트
+
+`change`는 네이티브 폼 컨트롤 규약을 따라 **사용자 편집에서만** 발화합니다. 프로그램적 `value` 세팅·`setHTML()`/`setDelta()`/`clear()`는 발화하지 않으므로, React 등 controlled 래퍼에서 에코 루프 없이 안전하게 바인딩할 수 있습니다.
+
+### `u-code-editor`
+- `change`: 사용자 편집으로 내용이 변경될 때 발생. 현재 값은 `event.target.value`로 읽습니다.
+
+### `u-text-editor`
+- `change`: 사용자 편집으로 내용이 변경될 때 발생 (`detail: { html, text, delta }`)
+
+## 개발
+
+```bash
+npm test         # Vite 개발 서버 (컴포넌트 프리뷰)
+npm run build    # 프로덕션 빌드 (eslint + vite)
+```

package/dist/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.139.0/helpers/esm}/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorate.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -6,4 +6,4 @@ function __decorate(decorators, target, key, desc) {
 	return c > 3 && r && Object.defineProperty(target, key, r), r;
 }
 //#endregion
-export { __decorate };
+export { __decorate as default };

package/dist/_virtual/{_@oxc-project_runtime@0.130.0/helpers → _@oxc-project_runtime@0.139.0/helpers/esm}/decorateMetadata.js

@@ -1,6 +1,6 @@
-//#region \0@oxc-project+runtime@0.130.0/helpers/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.139.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }
 //#endregion
-export { __decorateMetadata };
+export { __decorateMetadata as default };

package/dist/components/code-editor/UCodeEditor.d.ts

@@ -1,6 +1,9 @@
+import { PropertyValues } from 'lit';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
 /**
  * code editor component used by monaco-editor
+ *
+ * @event change - Fired when the content of the editor changes. The event detail contains the current HTML, text, and delta representation of the content.
  */
 export declare class UCodeEditor extends UElement {
     static styles: import('lit').CSSResultGroup[];
@@ -20,11 +23,14 @@ export declare class UCodeEditor extends UElement {
     value: string;
     private container;
     private editor?;
+    /** 프로그램적 value 동기화 중 여부 — Monaco onDidChangeModelContent는 setValue에서도
+     *  발화하므로, 이 플래그로 프로그램적 변경이 change 이벤트로 위장되는 것을 막는다. */
+    private syncingValue;
     private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(changedProperties: any): Promise<void>;
-    protected updated(changedProperties: any): Promise<void>;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/components/code-editor/UCodeEditor.js

@@ -1,7 +1,7 @@
 import "./UCodeEditor.worker.js";
 import { styles } from "./UCodeEditor.styles.js";
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -21,6 +21,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
 		this.fontSize = 14;
 		this.value = "";
 		this.container = createRef();
+		this.syncingValue = false;
 		this.observer = new MutationObserver(() => {
 			const theme = Theme.get() === "dark" ? "dark" : "light";
 			if (this.theme !== theme) this.theme = theme;
@@ -62,6 +63,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
 			scrollbar: { alwaysConsumeMouseWheel: false }
 		});
 		this.editor.onDidChangeModelContent(() => {
+			if (this.syncingValue) return;
 			this.value = this.editor.getValue();
 			this.dispatchEvent(new Event("change", {
 				bubbles: true,
@@ -71,7 +73,11 @@ var UCodeEditor = class UCodeEditor extends UElement {
 	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
-		if (changedProperties.has("value") && this.value !== this.editor?.getValue() && !this.editor?.hasWidgetFocus()) this.editor?.setValue(this.value);
+		if (changedProperties.has("value") && this.value !== this.editor?.getValue() && !this.editor?.hasWidgetFocus()) {
+			this.syncingValue = true;
+			this.editor?.setValue(this.value);
+			this.syncingValue = false;
+		}
 		if (changedProperties.has("theme") && this.editor) this.editor.updateOptions({ theme: this.theme === "light" ? "vs-light" : "vs-dark" });
 		if (changedProperties.has("language") && this.editor) monaco.editor.setModelLanguage(this.editor.getModel(), this.language);
 	}

package/dist/components/text-editor/UTextEditor.d.ts

@@ -1,4 +1,14 @@
+import { PropertyValues } from 'lit';
+import { default as Quill } from 'quill';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/** Quill 의 Delta 타입. quill-delta 를 직접 의존하지 않고 Quill 시그니처에서 유도한다. */
+type QuillDelta = ReturnType<Quill["getContents"]>;
+type QuillDeltaInput = Parameters<Quill["setContents"]>[0];
+/**
+ * A rich text editor component built using Quill.js, providing a customizable and user-friendly interface for text editing. It supports various formatting options, themes, and can be configured to be read-only or editable.
+ *
+ * @event change - Fired when the content of the editor changes. The event detail includes the current HTML, plain text, and Quill Delta representation of the content.
+ */
 export declare class UTextEditor extends UElement {
     static styles: import('lit').CSSResultGroup[];
     /** Specifies whether the header should be displayed or not. @default false */
@@ -22,8 +32,11 @@ export declare class UTextEditor extends UElement {
     private observer;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    protected firstUpdated(changedProperties: any): Promise<void>;
-    protected updated(changedProperties: any): Promise<void>;
+    protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    protected updated(changedProperties: PropertyValues): Promise<void>;
+    /** HTML을 Quill Delta로 변환해 silent source로 주입한다 — 프로그램적 콘텐츠 세팅이
+     *  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */
+    private setQuillContents;
     render(): import('lit-html').TemplateResult<1>;
     private updateEditorHeight;
     /**
@@ -37,17 +50,20 @@ export declare class UTextEditor extends UElement {
     /**
      * Get the current content as Quill Delta
      */
-    getDelta(): any;
+    getDelta(): QuillDelta | null;
     /**
-     * Set content from HTML
+     * Set content from HTML.
+     * 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다 (value 프로퍼티 경로와 동일).
      */
     setHTML(html: string): void;
     /**
-     * Set content from Quill Delta
+     * Set content from Quill Delta.
+     * 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다.
      */
-    setDelta(delta: any): void;
+    setDelta(delta: QuillDeltaInput): void;
     /**
-     * Clear all content
+     * Clear all content.
+     * 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다.
      */
     clear(): void;
     /**
@@ -60,3 +76,4 @@ declare global {
         "u-text-editor": UTextEditor;
     }
 }
+export {};

package/dist/components/text-editor/UTextEditor.js

@@ -1,5 +1,5 @@
-import { __decorateMetadata } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js";
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
 import { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -20,6 +20,7 @@ var UTextEditor = class UTextEditor extends UElement {
 		this.value = "";
 		this.height = 300;
 		this.container = createRef();
+		this.quill = null;
 		this.observer = new MutationObserver(() => {
 			const theme = Theme.get();
 			if (this.theme !== theme) this.theme = theme;
@@ -88,13 +89,16 @@ var UTextEditor = class UTextEditor extends UElement {
 			placeholder: this.placeholder,
 			modules: { toolbar: this.toolbar || defaultToolbar }
 		});
-		if (this.value) this.quill.root.innerHTML = this.value;
-		this.quill.on("text-change", () => {
-			const html = this.quill.root.innerHTML;
+		if (this.value) this.setQuillContents(this.value);
+		const quill = this.quill;
+		quill.on("text-change", (_delta, _oldDelta, source) => {
+			if (source !== "user") return;
+			const html = quill.root.innerHTML;
+			this.value = html;
 			this.dispatchEvent(new CustomEvent("change", { detail: {
 				html,
-				text: this.quill.getText(),
-				delta: this.quill.getContents()
+				text: quill.getText(),
+				delta: quill.getContents()
 			} }));
 		});
 		this.updateEditorHeight();
@@ -103,12 +107,19 @@ var UTextEditor = class UTextEditor extends UElement {
 		super.updated(changedProperties);
 		await this.updateComplete;
 		if (this.quill) {
-			if (changedProperties.has("value") && this.value !== this.quill.root.innerHTML) this.quill.root.innerHTML = this.value;
+			if (changedProperties.has("value") && this.value !== this.quill.root.innerHTML) this.setQuillContents(this.value);
 			if (changedProperties.has("readOnly")) this.quill.enable(!this.readOnly);
 			if (changedProperties.has("placeholder")) this.quill.root.dataset.placeholder = this.placeholder;
 			if (changedProperties.has("height")) this.updateEditorHeight();
 		}
 	}
+	/** HTML을 Quill Delta로 변환해 silent source로 주입한다 — 프로그램적 콘텐츠 세팅이
+	*  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */
+	setQuillContents(htmlValue) {
+		if (!this.quill) return;
+		const delta = this.quill.clipboard.convert({ html: htmlValue });
+		this.quill.setContents(delta, Quill.sources.SILENT);
+	}
 	render() {
 		return html`
       <div class="header" ?hidden=${this.headless}>
@@ -146,22 +157,31 @@ var UTextEditor = class UTextEditor extends UElement {
 		return this.quill ? this.quill.getContents() : null;
 	}
 	/**
-	* Set content from HTML
+	* Set content from HTML.
+	* 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다 (value 프로퍼티 경로와 동일).
 	*/
 	setHTML(html) {
-		if (this.quill) this.quill.root.innerHTML = html;
+		this.value = html;
 	}
 	/**
-	* Set content from Quill Delta
+	* Set content from Quill Delta.
+	* 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다.
 	*/
 	setDelta(delta) {
-		if (this.quill) this.quill.setContents(delta);
+		if (this.quill) {
+			this.quill.setContents(delta, Quill.sources.SILENT);
+			this.value = this.quill.root.innerHTML;
+		}
 	}
 	/**
-	* Clear all content
+	* Clear all content.
+	* 프로그램적 세팅이므로 change 이벤트는 발화하지 않는다.
 	*/
 	clear() {
-		if (this.quill) this.quill.setText("");
+		if (this.quill) {
+			this.quill.setText("", Quill.sources.SILENT);
+			this.value = this.quill.root.innerHTML;
+		}
 	}
 	/**
 	* Focus the editor

package/dist/react/UCodeEditor.d.ts

@@ -3,6 +3,7 @@ import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCo
 
 export declare const UCodeEditor: React.ForwardRefExoticComponent<
   Partial<UCodeEditorElement> & React.HTMLAttributes<UCodeEditorElement> & {
+  onChange?: (event: CustomEvent) => void;
   }
 >;
 

package/dist/react/UCodeEditor.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UCodeEditor } from '../components/code-editor/UCodeEditor.js';
+import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor.js';
 
 export const UCodeEditor = createComponent({
   react: React,
   tagName: 'u-code-editor',
-  elementClass: UCodeEditor,
-  events: {},
+  elementClass: UCodeEditorElement,
+  events: {
+    onChange: 'change',
+  },
 });

package/dist/react/UTextEditor.d.ts

@@ -3,6 +3,7 @@ import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTe
 
 export declare const UTextEditor: React.ForwardRefExoticComponent<
   Partial<UTextEditorElement> & React.HTMLAttributes<UTextEditorElement> & {
+  onChange?: (event: CustomEvent) => void;
   }
 >;
 

package/dist/react/UTextEditor.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTextEditor } from '../components/text-editor/UTextEditor.js';
+import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor.js';
 
 export const UTextEditor = createComponent({
   react: React,
   tagName: 'u-text-editor',
-  elementClass: UTextEditor,
-  events: {},
+  elementClass: UTextEditorElement,
+  events: {
+    onChange: 'change',
+  },
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -37,10 +37,12 @@
   },
   "scripts": {
     "test": "vite",
+    "lint": "eslint src/",
+    "lint:fix": "eslint src/ --fix",
     "build": "eslint && vite build"
   },
   "dependencies": {
-    "@iyulab/components": "^1.0.6",
+    "@iyulab/components": "^1.5.1",
     "lit": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "quill": "^2.0.3"
@@ -59,13 +61,13 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@types/node": "^25.8.0",
+    "@types/node": "^26.1.1",
     "eslint": "^9.39.4",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^5.0.0"
+    "typescript-eslint": "^8.64.0",
+    "vite": "^8.1.4",
+    "vite-plugin-dts": "^5.0.3"
   }
 }