@iyulab/editor-components 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+# Changelog
+
+## [Unreleased]
+- Initial library version release

package/LICENSE

@@ -0,0 +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
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# @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

package/dist/_virtual/_@oxc-project_runtime@0.130.0/helpers/decorate.js

@@ -0,0 +1,9 @@
+//#region \0@oxc-project+runtime@0.130.0/helpers/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);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+export { __decorate };

package/dist/_virtual/_@oxc-project_runtime@0.130.0/helpers/decorateMetadata.js

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

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

@@ -0,0 +1,34 @@
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/**
+ * code editor component used by monaco-editor
+ */
+export declare class UCodeEditor extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** Specifies whether the header should be displayed or not. @default false */
+    headless: boolean;
+    /** The label text displayed in the header of the code editor. @default "Editor" */
+    label: string;
+    /** The visual theme of the code editor. Can be "light" or "dark". @default "light" */
+    theme: "light" | "dark";
+    /** Whether the editor should be in read-only mode, preventing user input. @default false */
+    readOnly: boolean;
+    /** The programming language for syntax highlighting (e.g., "json", "javascript", "typescript"). @default "json" */
+    language: string;
+    /** The font size in pixels for the text in the editor. @default 14 */
+    fontSize: number;
+    /** The current text content of the code editor. @default "" */
+    value: string;
+    private container;
+    private editor?;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: any): Promise<void>;
+    protected updated(changedProperties: any): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-code-editor": UCodeEditor;
+    }
+}

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

@@ -0,0 +1,103 @@
+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 { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import * as monaco from "monaco-editor";
+import monacoStyles from "monaco-editor/min/vs/editor/editor.main.css?inline";
+import { Theme } from "@iyulab/components/dist/utilities/Theme.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+//#region src/components/code-editor/UCodeEditor.ts
+var UCodeEditor = class UCodeEditor extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headless = false;
+		this.label = "Editor";
+		this.theme = "light";
+		this.readOnly = false;
+		this.language = "json";
+		this.fontSize = 14;
+		this.value = "";
+		this.container = createRef();
+		this.observer = new MutationObserver(() => {
+			const theme = Theme.get() === "dark" ? "dark" : "light";
+			if (this.theme !== theme) this.theme = theme;
+		});
+	}
+	static {
+		this.styles = [
+			super.styles,
+			unsafeCSS(monacoStyles),
+			styles
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.theme = Theme.get() === "dark" ? "dark" : "light";
+		this.observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+	}
+	disconnectedCallback() {
+		this.observer.disconnect();
+		super.disconnectedCallback();
+	}
+	async firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		await this.updateComplete;
+		this.editor = monaco.editor.create(this.container.value, {
+			language: this.language,
+			theme: this.theme === "light" ? "vs-light" : "vs-dark",
+			fontSize: this.fontSize,
+			automaticLayout: true,
+			minimap: { enabled: false },
+			lineNumbersMinChars: 2,
+			lineDecorationsWidth: 1,
+			readOnly: this.readOnly,
+			value: this.value,
+			scrollBeyondLastLine: false,
+			scrollbar: { alwaysConsumeMouseWheel: false }
+		});
+		this.editor.onDidChangeModelContent(() => {
+			this.value = this.editor.getValue();
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		});
+	}
+	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("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);
+	}
+	render() {
+		return html`
+      <div class="header" ?hidden=${this.headless}>
+        <div class="title">${this.label}</div>
+        <div class="flex"></div>
+        <slot name="header-actions"></slot>
+      </div>
+      <div class="editor">
+        <main ${ref(this.container)}></main>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UCodeEditor.prototype, "headless", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "label", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "theme", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UCodeEditor.prototype, "readOnly", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "language", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UCodeEditor.prototype, "fontSize", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UCodeEditor.prototype, "value", void 0);
+UCodeEditor = __decorate([customElement("u-code-editor")], UCodeEditor);
+//#endregion
+export { UCodeEditor };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,53 @@
+import { css } from "lit";
+//#region src/components/code-editor/UCodeEditor.styles.ts
+var styles = css`
+  :host {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    --header-height: 32px;
+  }
+  :host([headless]) {
+    --header-height: 0px;
+  }
+
+  .header {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    height: 24px;
+    gap: 4px;
+    padding: 4px;
+
+    .title {
+      font-size: 16px;
+      line-height: 20px;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .flex {
+      flex: 1;
+    }
+  }
+
+  .editor {
+    position: absolute;
+    width: 100%;
+    height: calc(100% - var(--header-height));
+    overflow: hidden;
+
+    main {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`;
+//#endregion
+export { styles };

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,14 @@
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+//#region src/components/code-editor/UCodeEditor.worker.ts
+self.MonacoEnvironment = { getWorker(_moduleId, label) {
+	if (label === "json") return new jsonWorker();
+	if (label === "css" || label === "scss" || label === "less") return new cssWorker();
+	if (label === "html" || label === "handlebars" || label === "razor") return new htmlWorker();
+	if (label === "typescript" || label === "javascript") return new tsWorker();
+	return new editorWorker();
+} };
+//#endregion

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

@@ -0,0 +1,62 @@
+import { UElement } from '@iyulab/components/dist/components/UElement.js';
+export declare class UTextEditor extends UElement {
+    static styles: import('lit').CSSResultGroup[];
+    /** Specifies whether the header should be displayed or not. @default false */
+    headless: boolean;
+    /** The label text displayed in the header of the rich text editor. @default "Rich Text Editor" */
+    label: string;
+    /** The visual theme of the editor. Can be "light" or "dark". @default "light" */
+    theme?: "light" | "dark" | "system";
+    /** Whether the editor should be in read-only mode, preventing user input. @default false */
+    readOnly: boolean;
+    /** The placeholder text shown when the editor is empty. @default "Start writing..." */
+    placeholder: string;
+    /** The current HTML content of the rich text editor. @default "" */
+    value: string;
+    /** The height of the editor in pixels. @default 300 */
+    height: number;
+    /** Custom toolbar configuration. If not provided, uses default toolbar. */
+    toolbar?: string[][];
+    private container;
+    private quill;
+    private observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: any): Promise<void>;
+    protected updated(changedProperties: any): Promise<void>;
+    render(): import('lit-html').TemplateResult<1>;
+    private updateEditorHeight;
+    /**
+     * Get the current content as HTML
+     */
+    getHTML(): string;
+    /**
+     * Get the current content as plain text
+     */
+    getText(): string;
+    /**
+     * Get the current content as Quill Delta
+     */
+    getDelta(): any;
+    /**
+     * Set content from HTML
+     */
+    setHTML(html: string): void;
+    /**
+     * Set content from Quill Delta
+     */
+    setDelta(delta: any): void;
+    /**
+     * Clear all content
+     */
+    clear(): void;
+    /**
+     * Focus the editor
+     */
+    focus(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "u-text-editor": UTextEditor;
+    }
+}

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

@@ -0,0 +1,186 @@
+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 { styles } from "./UTextEditor.styles.js";
+import { html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { Theme } from "@iyulab/components/dist/utilities/Theme.js";
+import { UElement } from "@iyulab/components/dist/components/UElement.js";
+import Quill from "quill";
+import quillStyles from "quill/dist/quill.snow.css?inline";
+//#region src/components/text-editor/UTextEditor.ts
+var UTextEditor = class UTextEditor extends UElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headless = false;
+		this.label = "Rich Text Editor";
+		this.theme = "light";
+		this.readOnly = false;
+		this.placeholder = "Start writing...";
+		this.value = "";
+		this.height = 300;
+		this.container = createRef();
+		this.observer = new MutationObserver(() => {
+			const theme = Theme.get();
+			if (this.theme !== theme) this.theme = theme;
+		});
+	}
+	static {
+		this.styles = [
+			super.styles,
+			unsafeCSS(quillStyles),
+			styles
+		];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.theme = Theme.get();
+		this.observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["data-theme"]
+		});
+	}
+	disconnectedCallback() {
+		if (this.quill) this.quill = null;
+		this.observer.disconnect();
+		super.disconnectedCallback();
+	}
+	async firstUpdated(changedProperties) {
+		super.firstUpdated(changedProperties);
+		await this.updateComplete;
+		const defaultToolbar = [
+			[
+				"bold",
+				"italic",
+				"underline",
+				"strike"
+			],
+			["blockquote", "code-block"],
+			[{ "header": 1 }, { "header": 2 }],
+			[{ "list": "ordered" }, { "list": "bullet" }],
+			[{ "script": "sub" }, { "script": "super" }],
+			[{ "indent": "-1" }, { "indent": "+1" }],
+			[{ "direction": "rtl" }],
+			[{ "size": [
+				"small",
+				false,
+				"large",
+				"huge"
+			] }],
+			[{ "header": [
+				1,
+				2,
+				3,
+				4,
+				5,
+				6,
+				false
+			] }],
+			[{ "color": [] }, { "background": [] }],
+			[{ "font": [] }],
+			[{ "align": [] }],
+			["clean"],
+			["link", "image"]
+		];
+		this.quill = new Quill(this.container.value, {
+			theme: "snow",
+			readOnly: this.readOnly,
+			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;
+			this.dispatchEvent(new CustomEvent("change", { detail: {
+				html,
+				text: this.quill.getText(),
+				delta: this.quill.getContents()
+			} }));
+		});
+		this.updateEditorHeight();
+	}
+	async updated(changedProperties) {
+		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("readOnly")) this.quill.enable(!this.readOnly);
+			if (changedProperties.has("placeholder")) this.quill.root.dataset.placeholder = this.placeholder;
+			if (changedProperties.has("height")) this.updateEditorHeight();
+		}
+	}
+	render() {
+		return html`
+      <div class="header" ?hidden=${this.headless}>
+        <div class="title">${this.label}</div>
+        <div class="flex"></div>
+        <slot name="header-actions"></slot>
+      </div>
+      <div class="editor" style="height: ${this.height}px;">
+        <div class="quill-container" ${ref(this.container)}></div>
+      </div>
+    `;
+	}
+	updateEditorHeight() {
+		if (this.quill) {
+			const editorElement = this.shadowRoot?.querySelector(".ql-editor");
+			if (editorElement) editorElement.style.height = `${this.height - 42}px`;
+		}
+	}
+	/**
+	* Get the current content as HTML
+	*/
+	getHTML() {
+		return this.quill ? this.quill.root.innerHTML : "";
+	}
+	/**
+	* Get the current content as plain text
+	*/
+	getText() {
+		return this.quill ? this.quill.getText() : "";
+	}
+	/**
+	* Get the current content as Quill Delta
+	*/
+	getDelta() {
+		return this.quill ? this.quill.getContents() : null;
+	}
+	/**
+	* Set content from HTML
+	*/
+	setHTML(html) {
+		if (this.quill) this.quill.root.innerHTML = html;
+	}
+	/**
+	* Set content from Quill Delta
+	*/
+	setDelta(delta) {
+		if (this.quill) this.quill.setContents(delta);
+	}
+	/**
+	* Clear all content
+	*/
+	clear() {
+		if (this.quill) this.quill.setText("");
+	}
+	/**
+	* Focus the editor
+	*/
+	focus() {
+		if (this.quill) this.quill.focus();
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+}), __decorateMetadata("design:type", Boolean)], UTextEditor.prototype, "headless", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "label", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "theme", void 0);
+__decorate([property({ type: Boolean }), __decorateMetadata("design:type", Boolean)], UTextEditor.prototype, "readOnly", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "placeholder", void 0);
+__decorate([property({ type: String }), __decorateMetadata("design:type", String)], UTextEditor.prototype, "value", void 0);
+__decorate([property({ type: Number }), __decorateMetadata("design:type", Number)], UTextEditor.prototype, "height", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UTextEditor.prototype, "toolbar", void 0);
+UTextEditor = __decorate([customElement("u-text-editor")], UTextEditor);
+//#endregion
+export { UTextEditor };

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

@@ -0,0 +1 @@
+export declare const styles: import('lit').CSSResult;

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

@@ -0,0 +1,119 @@
+import { css } from "lit";
+//#region src/components/text-editor/UTextEditor.styles.ts
+var styles = css`
+  :host {
+    display: block;
+    border: 1px solid var(--u-neutral-300);
+    border-radius: 4px;
+    background: var(--u-neutral-0);
+    overflow: hidden;
+  }
+
+  :host([theme="dark"]) {
+    border-color: var(--u-neutral-700);
+    background: var(--u-neutral-900);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    padding: 12px 20px;
+    border-bottom: 1px solid var(--u-neutral-200);
+    background: var(--u-neutral-50);
+    min-height: 48px;
+    gap: 12px;
+  }
+
+  :host([theme="dark"]) .header {
+    border-bottom-color: var(--u-neutral-700);
+    background: var(--u-neutral-800);
+  }
+
+  .title {
+    font-weight: 600;
+    color: var(--u-neutral-700);
+  }
+
+  :host([theme="dark"]) .title {
+    color: var(--u-neutral-300);
+  }
+
+  .flex {
+    flex: 1;
+  }
+
+  .editor {
+    position: relative;
+    height: 300px;
+  }
+
+  .quill-container {
+    height: 100%;
+  }
+
+  .ql-editor {
+    font-family: var(--u-font-base);
+    font-size: 24px;
+    line-height: 1.6;
+  }
+
+  .ql-toolbar {
+    border: none !important;
+    border-bottom: 1px solid var(--u-neutral-200) !important;
+    background: var(--u-neutral-50);
+  }
+
+  :host([theme="dark"]) .ql-toolbar {
+    border-bottom-color: var(--u-neutral-700) !important;
+    background: var(--u-neutral-800);
+  }
+
+  .ql-container {
+    border: none !important;
+    font-family: var(--u-font-base);
+  }
+
+  .ql-editor {
+    padding: 20px;
+    color: var(--u-neutral-700);
+  }
+
+  :host([theme="dark"]) .ql-editor {
+    color: var(--u-neutral-300);
+    background: var(--u-neutral-900);
+  }
+
+  .ql-toolbar .ql-stroke {
+    stroke: var(--u-neutral-600);
+  }
+
+  .ql-toolbar .ql-fill {
+    fill: var(--u-neutral-600);
+  }
+
+  :host([theme="dark"]) .ql-toolbar .ql-stroke {
+    stroke: var(--u-neutral-400);
+  }
+
+  :host([theme="dark"]) .ql-toolbar .ql-fill {
+    fill: var(--u-neutral-400);
+  }
+
+  .ql-toolbar button:hover .ql-stroke {
+    stroke: var(--u-blue-600);
+  }
+
+  .ql-toolbar button:hover .ql-fill {
+    fill: var(--u-blue-600);
+  }
+
+  .ql-toolbar button.ql-active .ql-stroke {
+    stroke: var(--u-blue-600);
+  }
+
+  .ql-toolbar button.ql-active .ql-fill {
+    fill: var(--u-blue-600);
+  }
+`;
+//#endregion
+export { styles };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components/code-editor/UCodeEditor.js';
+export * from './components/text-editor/UTextEditor.js';

package/dist/index.js

@@ -0,0 +1,3 @@
+import { UCodeEditor } from "./components/code-editor/UCodeEditor.js";
+import { UTextEditor } from "./components/text-editor/UTextEditor.js";
+export { UCodeEditor, UTextEditor };

package/dist/react/UCodeEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor';
+
+export declare const UCodeEditor: React.ForwardRefExoticComponent<
+  Partial<UCodeEditorElement> & React.HTMLAttributes<UCodeEditorElement> & {
+  }
+>;
+
+export type UCodeEditorProps = React.ComponentProps<typeof UCodeEditor>;

package/dist/react/UCodeEditor.js

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

package/dist/react/UTextEditor.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor';
+
+export declare const UTextEditor: React.ForwardRefExoticComponent<
+  Partial<UTextEditorElement> & React.HTMLAttributes<UTextEditorElement> & {
+  }
+>;
+
+export type UTextEditorProps = React.ComponentProps<typeof UTextEditor>;

package/dist/react/UTextEditor.js

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

package/dist/react/index.d.ts

@@ -0,0 +1,2 @@
+export { UTextEditor, UTextEditorProps } from './UTextEditor';
+export { UCodeEditor, UCodeEditorProps } from './UCodeEditor';

package/dist/react/index.js

@@ -0,0 +1,2 @@
+export { UTextEditor } from './UTextEditor.js';
+export { UCodeEditor } from './UCodeEditor.js';

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@iyulab/editor-components",
+  "description": "various editor components by iyulab",
+  "version": "0.0.1",
+  "keywords": [
+    "iyulab",
+    "web-components",
+    "lit-element"
+  ],
+  "license": "MIT",
+  "author": "iyulab",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iyulab/node-editor-components.git"
+  },
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md",
+    "CHANGELOG.md",
+    "package.json"
+  ],
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./dist/*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*"
+    }
+  },
+  "scripts": {
+    "test": "vite",
+    "build": "eslint && vite build"
+  },
+  "dependencies": {
+    "@iyulab/components": "^1.0.6",
+    "lit": "^3.3.3",
+    "monaco-editor": "^0.55.1",
+    "quill": "^2.0.3"
+  },
+  "peerDependencies": {
+    "@lit/react": ">=1.0.8",
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@lit/react": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.4",
+    "@types/node": "^25.8.0",
+    "eslint": "^9.39.4",
+    "glob": "^13.0.6",
+    "globals": "^17.6.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.59.3",
+    "vite": "^8.0.13",
+    "vite-plugin-dts": "^5.0.0"
+  }
+}