@iyulab/editor-components 0.3.3 → 0.5.0

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

@@ -1,12 +1,12 @@
 import "./UCodeEditor.worker.js";
+import _virtual_monaco_structure_css_default from "../../_virtual/_virtual_monaco-structure-css.js";
 import { styles } from "./UCodeEditor.styles.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.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";
 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
@@ -30,7 +30,7 @@ var UCodeEditor = class UCodeEditor extends UElement {
 	static {
 		this.styles = [
 			super.styles,
-			unsafeCSS(monacoStyles),
+			unsafeCSS(_virtual_monaco_structure_css_default),
 			styles
 		];
 	}

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

@@ -1,20 +1,23 @@
 import { css } from "lit";
 //#region src/components/code-editor/UCodeEditor.styles.ts
 var styles = css`
+  /* 크기는 «호스트 상자» 가 정한다 — monaco 는 automaticLayout 으로 컨테이너를 따라온다.
+     ⚠부모가 auto 높이면 height:100% 가 무효라 편집 영역이 0 이 된다(계약으로 문서에 적었다).
+     머리글 높이를 숫자로 가정하지 않는다 — 세로 flex 가 «머리글을 뺀 나머지» 를 편집 영역에 준다.
+     종전에는 --header-height: 32px 를 빼는 계산이었는데 실제 머리글은 24px 라 8px 을 못 쓰고 있었다
+     (형제 u-text-editor 에서 같은 부류의 «툴바 높이를 숫자로 가정» 을 걷어낸 것과 같은 이유). */
   :host {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     height: 100%;
     overflow: hidden;
-    --header-height: 32px;
-  }
-  :host([headless]) {
-    --header-height: 0px;
   }
 
   .header {
     position: relative;
+    flex: none;
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -38,9 +41,10 @@ var styles = css`
   }
 
   .editor {
-    position: absolute;
+    position: relative;
+    flex: 1 1 auto;
+    min-height: 0;
     width: 100%;
-    height: calc(100% - var(--header-height));
     overflow: hidden;
 
     main {

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

@@ -1,8 +1,8 @@
-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";
+import editorWorker from "monaco-editor/editor/editor.worker.js?worker";
+import jsonWorker from "monaco-editor/language/json/json.worker.js?worker";
+import cssWorker from "monaco-editor/language/css/css.worker.js?worker";
+import htmlWorker from "monaco-editor/language/html/html.worker.js?worker";
+import tsWorker from "monaco-editor/language/typescript/ts.worker.js?worker";
 //#region src/components/code-editor/UCodeEditor.worker.ts
 self.MonacoEnvironment = { getWorker(_moduleId, label) {
 	if (label === "json") return new jsonWorker();

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

@@ -21,7 +21,17 @@ export declare class UTextEditor extends UElement {
     placeholder: string;
     /** The current HTML content of the rich text editor. @default "" */
     value: string;
-    /** The height of the editor in pixels. @default 300 */
+    /**
+     * 편집 영역의 **기본** 높이(px) — 호스트에 높이 제약이 없을 때의 값. 그때 호스트 상자는 여기에
+     * 머리글이 더해진 크기다(`headless` 면 머리글 없음).
+     *
+     * **높이의 주인은 호스트 상자다**(형제 `u-code-editor` 와 같은 계약). 호스트에 CSS `height` /
+     * `max-height` 를 주면 머리글은 그대로이고 편집 영역이 나머지를 채운다 — 부모를 채우려면
+     * `height: 100%` 같은 CSS 로 넘기면 된다. Quill 의 떠 있는 UI(선택기 목록 · 링크 툴팁)는
+     * 상자 밖으로 나가도 잘리지 않는다. 계약은 `tests/browser/text-editor-layout.browser.test.ts` 가 고정한다.
+     *
+     * @default 300
+     */
     height: number;
     /** Custom toolbar configuration. If not provided, uses default toolbar. */
     toolbar?: string[][];
@@ -34,7 +44,6 @@ export declare class UTextEditor extends UElement {
      *  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */
     private setQuillContents;
     render(): import('lit-html').TemplateResult<1>;
-    private updateEditorHeight;
     /**
      * Get the current content as HTML
      */

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

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.147.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -90,7 +90,6 @@ var UTextEditor = class UTextEditor extends UElement {
 				composed: true
 			}));
 		});
-		this.updateEditorHeight();
 	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
@@ -99,7 +98,6 @@ var UTextEditor = class UTextEditor extends UElement {
 			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로 주입한다 — 프로그램적 콘텐츠 세팅이
@@ -121,12 +119,6 @@ var UTextEditor = class UTextEditor extends UElement {
       </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
 	*/

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

@@ -22,15 +22,22 @@ import { css } from "lit";
 * 색 선언 수 25 → 9.
 */
 var styles = css`
+  /* 호스트는 자르지 않는다 — Quill 의 떠 있는 UI(선택기 목록 · 링크 툴팁)는 편집기 상자 밖으로 나갈 수 있어야 한다.
+     종전 overflow: hidden 은 짧은 편집기에서 그것들을 잘라 누를 수 없게 만들었다. 둥근 모서리는 배경을 칠하는
+     머리글(과 머리글이 없을 때의 툴바)이 자기 위 모서리를 둥글게 해서 지킨다. */
+  /* 세로 flex 인 이유 — 호스트 상자가 높이의 주인이다(형제 u-code-editor 와 같은 계약, HD-60).
+     소비자가 호스트에 CSS 높이를 주면 머리글은 고정이고 편집 영역이 나머지를 채운다. 주지 않으면
+     편집 영역은 자기 기본 높이(height 프로퍼티)로 서고 호스트는 그 합만큼 자란다 — 종전과 같은 모습이다. */
   :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     border: 1px solid var(--u-border-color, #E0E0E0);
     border-radius: var(--u-radius-md, 4px);
     background: var(--u-panel-bg-color, #FFFFFF);
-    overflow: hidden;
   }
 
   .header {
+    flex: none;
     display: flex;
     align-items: center;
     padding: 12px 20px;
@@ -38,6 +45,11 @@ var styles = css`
     background: var(--u-bg-color-hover, #F5F5F5);
     min-height: 48px;
     gap: 12px;
+    border-radius: calc(var(--u-radius-md, 4px) - 1px) calc(var(--u-radius-md, 4px) - 1px) 0 0;
+  }
+
+  :host([headless]) .ql-toolbar {
+    border-radius: calc(var(--u-radius-md, 4px) - 1px) calc(var(--u-radius-md, 4px) - 1px) 0 0;
   }
 
   .title {
@@ -51,13 +63,45 @@ var styles = css`
 
   .editor {
     position: relative;
+    /* 렌더의 인라인 style 이 height 프로퍼티 값으로 덮는 폴백이다. flex-basis 가 auto 라 그 값은
+       «제약이 없을 때의 기본 높이» 가 된다 — 호스트에 높이가 있으면 아래 flex 규칙이 이 값을 이긴다.
+       (주석에도 백틱을 쓰지 않는다 — css 템플릿이 그 자리에서 끝난다.) */
     height: 300px;
+    flex: 1 1 auto;
+    min-height: 0;
   }
 
   .quill-container {
     height: 100%;
   }
 
+  /* 편집 영역은 «높이에서 툴바를 뺀 나머지» 다 — 툴바 높이를 숫자로 가정하지 않는다(좁으면 툴바가 여러 줄로 접힌다).
+     종전에는 편집 영역을 height - 42px 로 줘, 툴바가 접히면 편집 영역이 상자 밖으로 밀려나 아래가 잘렸다.
+     ⚠Quill 은 넘겨받은 요소(.quill-container)를 .ql-container 로 만들고, 툴바를 그 «앞 형제» 로 .editor 안에 넣는다 —
+     그래서 세로 배치의 주인은 .editor 다. */
+  .editor {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .editor > .ql-toolbar {
+    flex: none;
+  }
+
+  .editor > .ql-container {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ql-container > .ql-editor {
+    flex: 1 1 auto;
+    min-height: 0;
+    height: auto;
+  }
+
   .ql-editor {
     font-family: var(--u-font-base);
     font-size: 24px;
@@ -80,12 +124,28 @@ var styles = css`
     color: var(--u-txt-color, #212121);
   }
 
+  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다(사람 결정 HD-58 ⒜). 소비자가 보는 것은 우리 컴포넌트이고,
+     WCAG 2.2 SC 2.5.8 은 «누가 그렸는가» 를 묻지 않는다.
+     ⑴ 색 견본 16×16(붙어 있어 간격 예외도 서지 않는다) → 24×24 · 한 줄 일곱 칸이라 목록 폭도 함께(7×(24+4)+10).
+     ⑵ 링크 툴팁의 Edit·Remove 는 줄 높이가 26 인데 인라인이라 실제 높이가 19 였다 → inline-block 으로 26. */
+  .ql-snow .ql-color-picker .ql-picker-item {
+    width: 24px;
+    height: 24px;
+  }
+  .ql-snow .ql-color-picker .ql-picker-options {
+    width: 206px;
+  }
+  .ql-snow .ql-tooltip a.ql-action,
+  .ql-snow .ql-tooltip a.ql-remove {
+    display: inline-block;
+  }
+
   .ql-toolbar .ql-stroke {
-    stroke: var(--u-txt-color-weak, #757575);
+    stroke: var(--u-txt-color-weak, #616161);
   }
 
   .ql-toolbar .ql-fill {
-    fill: var(--u-txt-color-weak, #757575);
+    fill: var(--u-txt-color-weak, #616161);
   }
 
   /* 강조는 역할 토큰 경유 — 소비자가 브랜드를 바꾸면 함께 따라온다. */

package/dist/react/UCodeEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor';
+import { UCodeEditor as UCodeEditorElement } from '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
 
 export declare const UCodeEditor: React.ForwardRefExoticComponent<
   Omit<Partial<UCodeEditorElement>, keyof React.HTMLAttributes<UCodeEditorElement>>

package/dist/react/UCodeEditor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UCodeEditor as UCodeEditorElement } from '../components/code-editor/UCodeEditor.js';
+import { UCodeEditor as UCodeEditorElement } from '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
 
 export const UCodeEditor = createComponent({
   react: React,

package/dist/react/UTextEditor.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor';
+import { UTextEditor as UTextEditorElement } from '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
 
 export declare const UTextEditor: React.ForwardRefExoticComponent<
   Omit<Partial<UTextEditorElement>, keyof React.HTMLAttributes<UTextEditorElement>>

package/dist/react/UTextEditor.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { createComponent } from '@lit/react';
-import { UTextEditor as UTextEditorElement } from '../components/text-editor/UTextEditor.js';
+import { UTextEditor as UTextEditorElement } from '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
 
 export const UTextEditor = createComponent({
   react: React,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.3.3",
+  "version": "0.5.0",
   "keywords": [
     "iyulab",
     "web-components",
@@ -46,6 +46,7 @@
     }
   },
   "scripts": {
+    "preversion": "node -e \"if(require('fs').existsSync('../../scripts/preversion-check.mjs'))require('child_process').execFileSync('node',['../../scripts/preversion-check.mjs'],{stdio:'inherit'})\"",
     "preview": "vite",
     "test": "vitest run",
     "test:watch": "vitest",
@@ -55,14 +56,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@iyulab/components": "^1.15.0",
     "lit": "^3.3.3",
-    "monaco-editor": "^0.55.1 || ^0.56.0",
     "quill": "^2.0.3"
   },
   "peerDependencies": {
+    "@iyulab/components": ">=1.15.0",
     "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "monaco-editor": "^0.56.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {
@@ -73,13 +74,14 @@
     }
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
     "@vitest/browser-playwright": "^4.1.10",
-    "eslint": "^9.39.4",
+    "eslint": "^10.1.0",
     "glob": "^13.0.6",
     "globals": "^17.7.0",
-    "typescript": "^5.9.3",
+    "monaco-editor": "^0.56.0",
+    "typescript": "^6.0.2",
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",

package/skills/iyulab-editor-components/references/components/code-editor.md

@@ -29,6 +29,29 @@ Monaco Editor wrapped as a custom element. Syntax highlighting, per-language con
 | `fontSize` | `number` | `14` | — | Editor font size in pixels |
 | `value` | `string` | `''` | — | Current text content |
 
+## Sizing
+
+**The host box owns the size.** `:host` is `width: 100%; height: 100%`, and the editing area is
+whatever the header leaves — Monaco re-layouts into it (`automaticLayout`). There is no `height`
+property: size the element, or give its parent a height.
+
+```html
+<!-- ✓ the parent has a height, so the editor fills it -->
+<div style="height: 400px"><u-code-editor></u-code-editor></div>
+
+<!-- ✓ or size the element itself -->
+<u-code-editor style="height: 400px"></u-code-editor>
+```
+
+⚠ **In a parent that has no height of its own, `height: 100%` resolves to nothing and the editing
+area collapses to a few pixels** — you get the header and an empty strip, with no error and nothing
+in the console. Give the parent a height, or set one on the element.
+
+`headless` removes the header, so the editing area is then the whole host box.
+
+`u-text-editor` shares this contract since 0.5.0; its `height` property is only the editing area's default when the host has no constraint.
+other unchanged.
+
 ## Slots
 
 | Name | Description |
@@ -43,4 +66,4 @@ Monaco Editor wrapped as a custom element. Syntax highlighting, per-language con
 
 ## CSS Custom Properties
 
-None. `UCodeEditor.styles.ts` only sets a private layout variable (`--header-height`, not documented as a consumer override point) and otherwise relies on Monaco's own theme (`vs-light`/`vs-dark`) rather than this library's `--u-*` design tokens.
+None. Layout is plain flexbox — the header keeps its own height and the editing area takes the rest — so there is no layout variable to override (see [Sizing](#sizing) for how the element is sized), and colours come from Monaco's own theme (`vs-light`/`vs-dark`) rather than this library's `--u-*` design tokens.

package/skills/iyulab-editor-components/references/components/text-editor.md

@@ -26,9 +26,32 @@ Rich text editor built on [Quill](https://quilljs.com/). Reads and writes HTML,
 | `readOnly` | `boolean` | `false` | — | Prevents user input |
 | `placeholder` | `string` | `'Start writing...'` | — | Placeholder shown when empty |
 | `value` | `string` | `''` | — | Current content as HTML |
-| `height` | `number` | `300` | — | Editor height in pixels |
+| `height` | `number` | `300` | — | Editing-area height in pixels **when the host has no height constraint** — see [Sizing](#sizing) |
 | `toolbar` | `string[][]` | `undefined` | — | Custom toolbar configuration. When left unset, falls back at runtime to Quill's default 14-group toolbar (not a declared property default) |
 
+## Sizing
+
+**The host box owns the height** (since 0.5.0 — the same contract as `u-code-editor`). Give the
+host a CSS `height` or `max-height` and the header stays fixed while the editing area takes the
+rest; `height: 100%` fills a parent. `height` (the property) is the editing area's **default**
+when the host has no constraint: a plain `<u-text-editor>` is about 349px tall (48px header +
+300px + border), `headless` removes the header.
+
+The host never clips — Quill's floating UI (picker lists, the link tooltip) has to be able to
+leave the box.
+
+```html
+<!-- ✓ the parent has a height, so the editor fills it (header + editing area = 400px) -->
+<div style="height: 400px"><u-text-editor style="height: 100%"></u-text-editor></div>
+
+<!-- ✓ no constraint: the editing area is 300px by default, or whatever height says -->
+<u-text-editor height="200"></u-text-editor>
+```
+
+⚠ Until 0.4.x the contract was the opposite (the property was the only way to size the editor and
+host CSS was ignored). A layout that relied on host CSS *not* reaching the editing area changes
+with 0.5.0 — see the CHANGELOG.
+
 ## Methods
 
 | Method | Returns | Description |