@iyulab/editor-components 0.5.0 → 0.5.2

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

@@ -1,8 +1,8 @@
 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.149.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.151.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.d.ts

@@ -39,6 +39,12 @@ export declare class UTextEditor extends UElement {
     private quill;
     disconnectedCallback(): void;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
+    /**
+     * snow 테마의 링크 툴팁은 «Edit/Save» 와 «Remove» 를 `href` 없는 `<a>` 로 그린다 — 포커스를 받지 못하고 Enter 로 눌리지
+     * 않아 키보드로는 링크를 편집·제거할 수 없었다(Quill 마크업이라 우리 템플릿 밖이다). Quill 이 붙인 클릭 처리는 그대로 두고,
+     * 두 앵커를 버튼 역할·탭 정지로 드러내고 Enter/Space 를 클릭으로 옮긴다. 이름은 테마 시트의 생성 콘텐츠(`Edit`·`Remove`)다.
+     */
+    private enhanceLinkTooltipKeyboard;
     protected updated(changedProperties: PropertyValues): Promise<void>;
     /** HTML을 Quill Delta로 변환해 silent source로 주입한다 — 프로그램적 콘텐츠 세팅이
      *  text-change(→ change 이벤트)로 위장되지 않도록 하기 위함. */

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

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { styles } from "./UTextEditor.styles.js";
 import { html, unsafeCSS } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -74,6 +74,7 @@ var UTextEditor = class UTextEditor extends UElement {
 			placeholder: this.placeholder,
 			modules: { toolbar: this.toolbar || defaultToolbar }
 		});
+		this.enhanceLinkTooltipKeyboard(this.quill);
 		if (this.value) this.setQuillContents(this.value);
 		const quill = this.quill;
 		quill.on("text-change", (_delta, _oldDelta, source) => {
@@ -91,6 +92,27 @@ var UTextEditor = class UTextEditor extends UElement {
 			}));
 		});
 	}
+	/**
+	* snow 테마의 링크 툴팁은 «Edit/Save» 와 «Remove» 를 `href` 없는 `<a>` 로 그린다 — 포커스를 받지 못하고 Enter 로 눌리지
+	* 않아 키보드로는 링크를 편집·제거할 수 없었다(Quill 마크업이라 우리 템플릿 밖이다). Quill 이 붙인 클릭 처리는 그대로 두고,
+	* 두 앵커를 버튼 역할·탭 정지로 드러내고 Enter/Space 를 클릭으로 옮긴다. 이름은 테마 시트의 생성 콘텐츠(`Edit`·`Remove`)다.
+	*/
+	enhanceLinkTooltipKeyboard(quill) {
+		const root = quill.theme.tooltip?.root;
+		if (!root) return;
+		const ACTIONS = "a.ql-action, a.ql-remove";
+		for (const a of Array.from(root.querySelectorAll(ACTIONS))) {
+			a.setAttribute("role", "button");
+			a.setAttribute("tabindex", "0");
+		}
+		root.addEventListener("keydown", (e) => {
+			const target = e.target;
+			if ((e.key === "Enter" || e.key === " ") && target.matches(ACTIONS)) {
+				e.preventDefault();
+				target.click();
+			}
+		});
+	}
 	async updated(changedProperties) {
 		super.updated(changedProperties);
 		await this.updateComplete;

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

@@ -25,7 +25,7 @@ var styles = css`
   /* 호스트는 자르지 않는다 — Quill 의 떠 있는 UI(선택기 목록 · 링크 툴팁)는 편집기 상자 밖으로 나갈 수 있어야 한다.
      종전 overflow: hidden 은 짧은 편집기에서 그것들을 잘라 누를 수 없게 만들었다. 둥근 모서리는 배경을 칠하는
      머리글(과 머리글이 없을 때의 툴바)이 자기 위 모서리를 둥글게 해서 지킨다. */
-  /* 세로 flex 인 이유 — 호스트 상자가 높이의 주인이다(형제 u-code-editor 와 같은 계약, HD-60).
+  /* 세로 flex 인 이유 — 호스트 상자가 높이의 주인이다(형제 u-code-editor 와 같은 계약).
      소비자가 호스트에 CSS 높이를 주면 머리글은 고정이고 편집 영역이 나머지를 채운다. 주지 않으면
      편집 영역은 자기 기본 높이(height 프로퍼티)로 서고 호스트는 그 합만큼 자란다 — 종전과 같은 모습이다. */
   :host {
@@ -124,7 +124,7 @@ var styles = css`
     color: var(--u-txt-color, #212121);
   }
 
-  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다(사람 결정 HD-58 ⒜). 소비자가 보는 것은 우리 컴포넌트이고,
+  /* 🔴Quill 이 그리는 타깃의 치수 — 우리가 덮어쓴다. 소비자가 보는 것은 우리 컴포넌트이고,
      WCAG 2.2 SC 2.5.8 은 «누가 그렸는가» 를 묻지 않는다.
      ⑴ 색 견본 16×16(붙어 있어 간격 예외도 서지 않는다) → 24×24 · 한 줄 일곱 칸이라 목록 폭도 함께(7×(24+4)+10).
      ⑵ 링크 툴팁의 Edit·Remove 는 줄 높이가 26 인데 인라인이라 실제 높이가 19 였다 → inline-block 으로 26. */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/editor-components",
   "description": "various editor components by iyulab",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "keywords": [
     "iyulab",
     "web-components",
@@ -61,9 +61,9 @@
   },
   "peerDependencies": {
     "@iyulab/components": ">=1.15.0",
-    "@lit/react": ">=1.0.8",
-    "react": ">=18.0.0",
-    "monaco-editor": "^0.56.0"
+    "@lit/react": "^1.0.8",
+    "react": "^18.0.0 || ^19.0.0",
+    "monaco-editor": ">=0.56.0 <0.58.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {
@@ -76,16 +76,16 @@
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/node": "^26.1.1",
-    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.1.0",
     "glob": "^13.0.6",
     "globals": "^17.7.0",
-    "monaco-editor": "^0.56.0",
+    "monaco-editor": "^0.57.0",
     "typescript": "^6.0.2",
     "typescript-eslint": "^8.64.0",
     "vite": "^8.1.4",
     "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.10"
+    "vitest": "^5.0.0"
   },
   "overrides": {
     "dompurify": "^3.4.13"