@tosk/gen-ui 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/gen-ui.js +7 -19
- package/package.json +1 -1
package/gen-ui.js
CHANGED
|
@@ -114,7 +114,7 @@ class GenUi extends HTMLElement {
|
|
|
114
114
|
#abortController = null;
|
|
115
115
|
#fileHandle = null;
|
|
116
116
|
#currentCode = { html: '', css: '', javascript: '' };
|
|
117
|
-
static #prettierModules = null;
|
|
117
|
+
static #prettierModules = null;
|
|
118
118
|
|
|
119
119
|
constructor() {
|
|
120
120
|
super();
|
|
@@ -186,11 +186,11 @@ class GenUi extends HTMLElement {
|
|
|
186
186
|
multiple: false,
|
|
187
187
|
});
|
|
188
188
|
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
189
|
+
this.#fileHandle = handle;
|
|
190
|
+
await this.#directWriteToFile();
|
|
191
|
+
|
|
193
192
|
} catch (err) {
|
|
193
|
+
// ファイル選択キャンセル時などは何もしない
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
196
|
|
|
@@ -237,8 +237,6 @@ class GenUi extends HTMLElement {
|
|
|
237
237
|
const prettierData = await this.#loadPrettier();
|
|
238
238
|
const rawCode = this.#assembleFinalCode('web-component', myId);
|
|
239
239
|
|
|
240
|
-
// Prettier formatting ensures the inserted block is clean and consistently indented,
|
|
241
|
-
// reducing 'messy' diffs in the editor's Undo/Redo stack.
|
|
242
240
|
const formattedCode = await this.#formatCodeWithPrettier(rawCode, prettierData);
|
|
243
241
|
|
|
244
242
|
const newContent = originalContent.replace(targetRegex, formattedCode.trim());
|
|
@@ -247,8 +245,8 @@ class GenUi extends HTMLElement {
|
|
|
247
245
|
await writable.write(newContent);
|
|
248
246
|
await writable.close();
|
|
249
247
|
|
|
250
|
-
|
|
251
|
-
|
|
248
|
+
// 修正: 書き込み完了後のアラートとリロード確認を削除
|
|
249
|
+
|
|
252
250
|
} catch (err) {
|
|
253
251
|
console.error(err);
|
|
254
252
|
alert(`エラー: ${err.message}`);
|
|
@@ -265,8 +263,6 @@ class GenUi extends HTMLElement {
|
|
|
265
263
|
let targetRegex;
|
|
266
264
|
|
|
267
265
|
if (myId) {
|
|
268
|
-
// Improved Regex: Ensures we capture the full opening tag even with multiline attributes
|
|
269
|
-
// and lazily matches content up to the closing tag if it exists.
|
|
270
266
|
targetRegex = new RegExp(`<gen-ui[^>]*id=["']${myId}["'][^>]*>([\\s\\S]*?<\\/gen-ui>)?`, 'i');
|
|
271
267
|
if (!targetRegex.test(content)) throw new Error(`ID="${myId}" が見つかりません。`);
|
|
272
268
|
} else {
|
|
@@ -285,7 +281,6 @@ class GenUi extends HTMLElement {
|
|
|
285
281
|
|
|
286
282
|
if (mode === 'web-component') {
|
|
287
283
|
const processedJs = javascript.replace(/document\.(querySelector|querySelectorAll|getElementById)/g, 'root.$1');
|
|
288
|
-
// Intentionally unindented to let Prettier handle the final layout
|
|
289
284
|
return `
|
|
290
285
|
<gen-ui id="${componentId}">
|
|
291
286
|
<template>
|
|
@@ -343,7 +338,6 @@ ${html}
|
|
|
343
338
|
if (!template) return;
|
|
344
339
|
this.shadowRoot.innerHTML = '';
|
|
345
340
|
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
346
|
-
// Re-activate scripts by cloning them
|
|
347
341
|
this.shadowRoot.querySelectorAll('script').forEach(old => {
|
|
348
342
|
const fresh = document.createElement('script');
|
|
349
343
|
fresh.textContent = old.textContent;
|
|
@@ -366,18 +360,14 @@ ${html}
|
|
|
366
360
|
#renderPreview(html, css, javascript, title) {
|
|
367
361
|
this.#currentCode = { html, css, javascript };
|
|
368
362
|
|
|
369
|
-
// --- 変更点: iframe内のbodyスタイルからflex中央揃えを削除 ---
|
|
370
363
|
const iframeCss = `body{margin:0;padding:0;min-height:100vh;background:#fff;}*,*::before,*::after{box-sizing:border-box;}${css}`;
|
|
371
364
|
|
|
372
365
|
this.#elements.previewOutput.srcdoc = `<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><style>${iframeCss}</style></head><body>${html}<script>try{${javascript||''}}catch(e){console.error(e)}<\/script></body></html>`;
|
|
373
366
|
this.#elements.uiTitle.textContent = title || this.#requestPrompt || 'No Title';
|
|
374
367
|
|
|
375
|
-
// --- 追加点: iframe内での右クリック検知 ---
|
|
376
368
|
this.#elements.previewOutput.onload = () => {
|
|
377
369
|
try {
|
|
378
370
|
const doc = this.#elements.previewOutput.contentDocument;
|
|
379
|
-
|
|
380
|
-
// 右クリックでメニュー表示
|
|
381
371
|
doc.addEventListener('contextmenu', (e) => {
|
|
382
372
|
e.preventDefault();
|
|
383
373
|
const iframeRect = this.#elements.previewOutput.getBoundingClientRect();
|
|
@@ -385,8 +375,6 @@ ${html}
|
|
|
385
375
|
const y = e.clientY + iframeRect.top;
|
|
386
376
|
this.#showContextMenu(x, y);
|
|
387
377
|
});
|
|
388
|
-
|
|
389
|
-
// 左クリックでメニューを閉じる
|
|
390
378
|
doc.addEventListener('click', () => this.#hideContextMenu());
|
|
391
379
|
} catch (e) {
|
|
392
380
|
console.warn("Context menu access denied", e);
|