@iyulab/editor-components 0.3.2 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## [0.3.3] - 2026-08-25
+
+### Added
+
+- Agent-skill reference docs for both components (`skills/iyulab-editor-components/`) —
+  properties, slots, events, and methods for `u-code-editor`/`u-text-editor`.
+
+### Fixed
+
+- 🔴**`monaco-editor` bundles a vulnerable `dompurify` (`3.4.8`) with no pin protecting it.**
+  Four moderate/low DOMPurify advisories (GHSA-c2j3-45gr-mqc4, GHSA-cmwh-pvxp-8882,
+  GHSA-vxr8-fq34-vvx9, GHSA-55q2-fjhq-7xh7) affect `<=3.4.12`; a fresh install of this package
+  resolved the vulnerable version with nothing to stop it. Added `overrides: { dompurify:
+  "^3.4.13" }` — `dompurify` is a transitive dependency here (bundled via `monaco-editor`), not
+  a direct one, so this pins cleanly without touching `dependencies`. Verified with a clean
+  install: `npm audit` no longer reports any dompurify advisory, typecheck/lint/test/build all
+  pass. (`quill`'s own advisory, GHSA-v3m3-f69x-jf25, has no upstream fix yet and is unrelated
+  to this pin — still open, tracked separately.)
+
 ## [0.3.2] - 2026-08-18
 
 ### Changed

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

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.144.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.147.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);

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

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

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.144.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.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 { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.144.0/helpers/esm/decorate.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 { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "keywords": [
     "iyulab",
     "web-components",
@@ -18,6 +18,7 @@
   },
   "files": [
     "dist",
+    "skills",
     "LICENSE",
     "README.md",
     "CHANGELOG.md",
@@ -83,5 +84,8 @@
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10"
+  },
+  "overrides": {
+    "dompurify": "^3.4.13"
   }
 }

package/skills/iyulab-editor-components/SKILL.md

@@ -0,0 +1,47 @@
+---
+name: iyulab-editor-components
+description: Editor web components — a Monaco-based code editor and a Quill-based rich text editor. Both auto-sync with the surrounding document theme (code editor) or the shared @iyulab/components design tokens (text editor). Use when working with @iyulab/editor-components package.
+license: MIT
+metadata:
+  author: iyulab
+  version: "0.3.3"
+---
+
+# @iyulab/editor-components
+
+Editor web components built on [Lit](https://lit.dev/). Custom elements (`u-*` tags) that work in any framework or vanilla HTML.
+
+## Quick Start
+
+```bash
+npm install @iyulab/editor-components
+```
+
+Import all components at once:
+
+```ts
+import '@iyulab/editor-components';
+```
+
+Import individual components (tree-shakable):
+
+```ts
+import '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
+import '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
+```
+
+---
+
+## Components
+
+- [`u-code-editor`](./references/components/code-editor.md) — Monaco-based code editor. Language-aware syntax highlighting, automatic light/dark theme sync
+- [`u-text-editor`](./references/components/text-editor.md) — Quill-based rich text editor. HTML/plain-text/Delta content access, customizable toolbar
+
+---
+
+## Events
+
+| Event | Source | Detail | Description |
+|-------|--------|--------|--------------|
+| `change` | `u-code-editor` | none (plain `Event`) | User edit in the Monaco editor |
+| `change` | `u-text-editor` | `{ html, text, delta }` | User edit in the Quill editor |

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

@@ -0,0 +1,46 @@
+# u-code-editor
+
+```ts
+import '@iyulab/editor-components/dist/components/code-editor/UCodeEditor.js';
+```
+
+**Tag:** `u-code-editor`
+
+Monaco Editor wrapped as a custom element. Syntax highlighting, per-language configuration, and automatic light/dark sync with the document theme (`Theme.resolved()` from `@iyulab/components`).
+
+```html
+<u-code-editor language="typescript" .value=${"const x: number = 42;"}></u-code-editor>
+
+<!-- Without header -->
+<u-code-editor language="json" headless .value=${JSON.stringify({key: 'value'}, null, 2)}></u-code-editor>
+```
+
+---
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `headless` | `boolean` | `false` | ✓ | Hides the header (label + `header-actions` slot) |
+| `label` | `string` | `'Editor'` | — | Header title text |
+| `theme` | `'light' \| 'dark'` | `'light'` | — | Editor color theme. Synced automatically from `Theme.resolved()` on connect and on every `data-theme`/`theme` attribute mutation on `document.documentElement` — the declared default is overwritten before first render, and setting it directly is overwritten by the next sync |
+| `readOnly` | `boolean` | `false` | — | Prevents user input |
+| `language` | `string` | `'json'` | — | Monaco language id (`"javascript"`, `"typescript"`, …) |
+| `fontSize` | `number` | `14` | — | Editor font size in pixels |
+| `value` | `string` | `''` | — | Current text content |
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header-actions` | Content placed at the end of the header (e.g. extra toolbar buttons) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|--------------|
+| `change` | none (plain `Event`) | Fired on user edits (`Monaco.onDidChangeModelContent`). Not fired for programmatic `value` assignment while Monaco already holds that value. Read the new content from `value` |
+
+## 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.

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

@@ -0,0 +1,64 @@
+# u-text-editor
+
+```ts
+import '@iyulab/editor-components/dist/components/text-editor/UTextEditor.js';
+```
+
+**Tag:** `u-text-editor`
+
+Rich text editor built on [Quill](https://quilljs.com/). Reads and writes HTML, plain text, or Quill Delta.
+
+```html
+<u-text-editor placeholder="Start writing..." .value=${"<p>Hello</p>"}></u-text-editor>
+
+<!-- Without header, custom toolbar -->
+<u-text-editor headless .toolbar=${[['bold', 'italic'], ['link']]}></u-text-editor>
+```
+
+---
+
+## Properties
+
+| Property | Type | Default | Reflect | Description |
+|----------|------|---------|---------|-------------|
+| `headless` | `boolean` | `false` | ✓ | Hides the header (label + `header-actions` slot) |
+| `label` | `string` | `'Rich Text Editor'` | — | Header title text |
+| `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 |
+| `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) |
+
+## Methods
+
+| Method | Returns | Description |
+|--------|---------|--------------|
+| `getHTML()` | `string` | Current content as HTML |
+| `getText()` | `string` | Current content as plain text |
+| `getDelta()` | `QuillDelta \| null` | Current content as a Quill Delta |
+| `setHTML(html)` | `void` | Set content from HTML (same as setting `.value`) |
+| `setDelta(delta)` | `void` | Set content from a Quill Delta |
+| `clear()` | `void` | Clear all content |
+| `focus()` | `void` | Focus the editor |
+
+`setHTML`/`setDelta`/`clear` are programmatic — like the `value` property path, they do not fire `change`.
+
+## Slots
+
+| Name | Description |
+|------|-------------|
+| `header-actions` | Content placed at the end of the header (e.g. extra toolbar buttons) |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|--------------|
+| `change` | `{ html: string, text: string, delta: QuillDelta }` | Fired only for user edits (Quill `source === 'user'`) — composed so it crosses the shadow boundary |
+
+## CSS Custom Properties
+
+`UTextEditor` doesn't declare any custom properties of its own — its styles read the shared
+`@iyulab/components` design tokens directly (`--u-border-color`, `--u-panel-bg-color`,
+`--u-txt-color`, `--u-txt-color-weak`, `--u-bg-color-hover`, `--u-radius-md`, `--u-primary-color`,
+`--u-font-base`), so it re-themes automatically with the rest of the library and has nothing
+component-specific to override.