@kubohiroya/turbowarp-extension-data-editor 0.5.0 → 0.7.0

package/README.ja.md

@@ -10,8 +10,13 @@ TurboWarp拡張が扱う構造化データを、フォームや独自UIで編集
 
 タブ・グループ・グリッドは[共通レイアウトガイド](docs/common-layout.ja.md)を参照してください。標準RJSFとSource/Formで同じJSON宣言を使用し、ホストの起動時フラグ `commonLayout` で有効にします（既定OFF）。
 
-[公開エディター・日英案内](https://kubohiroya.github.io/turbowarp-extension-data-editor/) と
-[公開・検証の運用Issue #26](https://github.com/kubohiroya/turbowarp-extension-data-editor/issues/26) も本リポジトリが所有します。
+既存フォームと下書きを共有する視覚プレビュー、アイコンのホバー表示は[ブロックプレビュー](docs/block-preview.md)を参照してください。
+
+本パッケージはライブラリです。統合したEditorのビルド・検証・GitHub Pages配信は、下流の [TurboWarp-Plus-Editor](https://github.com/kubohiroya/turbowarp-plus-editor) が所有します。本リポジトリのGitHub Pages提供は廃止し、旧URLでEditorやリダイレクトを提供しません。
+
+<p><a class="twpe-edit-button" href="https://kubohiroya.github.io/turbowarp-plus-editor/editor.html?lang=ja"><img src="https://kubohiroya.github.io/turbowarp-plus-editor/assets/icon.svg" width="32" height="32" alt=""> TurboWarp-Plus-Editorで編集</a></p>
+
+ボタンのHTMLとスタイルは [TurboWarp-Plus-EditorのREADME](https://github.com/kubohiroya/turbowarp-plus-editor#edit-button) を参照してください。
 
 ## 標準の JSON Schema エディター
 
@@ -127,12 +132,12 @@ npm install --save-exact @kubohiroya/turbowarp-extension-data-editor@0.2.2
 
 対応GUIはダイアログ、ソースフォーム、共通レイアウト、固定入力、子孫編集、一括セキュリティ確認を標準で提供します。
 通常の `editor.html?lang=ja` で利用でき、有効化用URLスイッチは不要です。低水準APIのhost能力交渉は維持します。
-切戻しはGUIの変更と公開ページのGUI pinを一組でrevertします。
+切戻しはGUIの変更とTurboWarp-Plus-Editorの固定ソース設定を対応させてrevertします。
 確定値は既存引数へ保存し、UI・下書き・関数・revision をプロジェクトデータへ追加しません。
 
 ## webpack 4 / E2E
 
-[webpack 4配布物と設定API](docs/webpack4.md)、[GUI接続E2EとCIの実行手順](docs/block-editor-e2e.md)を参照。専用編集UIから互換ビルド・E2Eまで共通側で管理し、GUIには明示的なホスト接続とCI呼出しを残す。
+[webpack 4配布物と設定API](docs/webpack4.md)、[GUI接続E2EとCIの実行手順](docs/block-editor-e2e.md)を参照。本リポジトリは専用編集UIと互換ビルドを管理します。GUIはホスト接続、TurboWarp-Plus-Editorは統合ビルド・E2E・配信を管理します。
 
 ## Schemaの共通型と診断変換
 

package/README.md

@@ -10,8 +10,11 @@ Japanese guides for usage, APIs, GUI integration, publishing, and validation rec
 
 For tabs, groups, and grids, see the [shared layout guide (Japanese)](docs/common-layout.ja.md). Standard RJSF and Source/Form use the same JSON declarations, enabled by the host's startup flag `commonLayout` (off by default).
 
-This repository also owns the [public editor and English/Japanese guides](https://kubohiroya.github.io/turbowarp-extension-data-editor/) and
-[deployment and validation tracking issue #26](https://github.com/kubohiroya/turbowarp-extension-data-editor/issues/26).
+This package is a library. The downstream [TurboWarp-Plus-Editor](https://github.com/kubohiroya/turbowarp-plus-editor) owns the integrated Editor build, validation and GitHub Pages distribution. This repository no longer provides GitHub Pages; its former URL does not serve an Editor or a redirect.
+
+<p><a class="twpe-edit-button" href="https://kubohiroya.github.io/turbowarp-plus-editor/editor.html?lang=en"><img src="https://kubohiroya.github.io/turbowarp-plus-editor/assets/icon.svg" width="32" height="32" alt=""> Edit in TurboWarp-Plus-Editor</a></p>
+
+See the [TurboWarp-Plus-Editor README](https://github.com/kubohiroya/turbowarp-plus-editor#edit-button) for the reusable button HTML and stylesheet.
 
 ## Standard JSON Schema editor
 
@@ -127,12 +130,12 @@ For `.sb3` saving, reloading through `project_url` and the OS file picker, Engli
 
 Supported GUIs provide dialogs, source forms, shared layouts, fixed inputs, descendant editing, and batch security confirmation by default.
 These are available at the normal `editor.html?lang=ja` URL without activation switches. Low-level API host capability negotiation remains in place.
-To roll back, revert the GUI changes together with the public page's GUI pin.
+To roll back, revert the GUI changes together with TurboWarp-Plus-Editor's pinned source configuration.
 Committed values are stored in existing arguments. UI state, drafts, functions, and revisions are not added to project data.
 
 ## webpack 4 / E2E
 
-See the [webpack 4 distribution and configuration API (Japanese)](docs/webpack4.md) and [GUI integration E2E and CI procedures (Japanese)](docs/block-editor-e2e.md). This shared repository manages the custom editor UI, compatibility builds, and E2E tests; the GUI retains explicit host integration and CI calls.
+See the [webpack 4 distribution and configuration API (Japanese)](docs/webpack4.md) and [GUI integration E2E and CI procedures (Japanese)](docs/block-editor-e2e.md). This shared repository manages the custom editor UI and compatibility builds. The GUI owns host integration, and TurboWarp-Plus-Editor owns integrated builds, E2E tests and distribution.
 
 ## Shared Schema types and diagnostic conversion
 

package/dist/build-info.json

@@ -1,10 +1,10 @@
 {
   "name": "@kubohiroya/turbowarp-extension-data-editor",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "repository": "https://github.com/kubohiroya/turbowarp-extension-data-editor",
-  "revision": "df1e78b6982ccc0c1ddb8a741a8d57848519c74d",
+  "revision": "d96532a91bc6046d4a3fda878425b30d6d10483e",
   "sourceState": "commit",
-  "sourceSha256": "a1a4a1937cb033e4eee92fbd626511f76c8872506bdb81e921b65719d46c199b",
+  "sourceSha256": "daf5c14dd2a7eafbc5208413f168eb42fc817978e8517a66c31838dc48aa1841",
   "capabilities": {
     "preparedSource": 1
   }

package/dist/descendants.js

@@ -260,6 +260,7 @@ _DescendantSession_snapshot = new WeakMap(), _DescendantSession_host = new WeakM
     const listeners = new Set();
     const editor = Object.freeze({
         reference: descriptor.reference,
+        getSnapshot: () => snapshot,
         getDraft: () => { __classPrivateFieldGet(this, _DescendantSession_instances, "m", _DescendantSession_assertOpen).call(this); return cloneJson(record.draft); },
         setDraft: (draft) => {
             __classPrivateFieldGet(this, _DescendantSession_instances, "m", _DescendantSession_assertEditable).call(this);

package/dist/dialog-window.d.ts

@@ -0,0 +1,8 @@
+interface WindowLabels {
+    readonly headerClassName?: string | undefined;
+    readonly maximize?: string | undefined;
+    readonly restore?: string | undefined;
+}
+/** Add window controls to the injected host frame without depending on GUI internals. */
+export declare function attachEditorDialogWindow(body: HTMLElement, labels: WindowLabels): (() => void) | undefined;
+export {};

package/dist/dialog-window.js

@@ -0,0 +1,155 @@
+/** Add window controls to the injected host frame without depending on GUI internals. */
+export function attachEditorDialogWindow(body, labels) {
+    var _a;
+    const dialog = body.closest('[role="dialog"]');
+    const header = (labels.headerClassName ? dialog === null || dialog === void 0 ? void 0 : dialog.getElementsByClassName(labels.headerClassName)[0] :
+        dialog === null || dialog === void 0 ? void 0 : dialog.querySelector('header'));
+    const content = body.closest('[data-block-editor-body]');
+    if (!dialog || !header || !content || !((_a = header.parentElement) === null || _a === void 0 ? void 0 : _a.contains(content)))
+        return;
+    const doc = dialog.ownerDocument, win = doc.defaultView;
+    if (!win)
+        return;
+    const frame = header.parentElement;
+    const initialStyle = dialog.style.cssText;
+    const language = doc.documentElement.lang || new URLSearchParams(win.location.search).get('lang') || win.navigator.language;
+    const japanese = language.startsWith('ja');
+    const maximizeLabel = labels.maximize || (japanese ? '全画面化' : 'Maximize');
+    const restoreLabel = labels.restore || (japanese ? '元のサイズに戻す' : 'Restore window');
+    let restoreBounds = null;
+    let gesture = null;
+    const handles = [];
+    dialog.setAttribute('data-block-editor-window', '');
+    if (frame !== dialog)
+        frame.setAttribute('data-block-editor-window-frame', '');
+    header.setAttribute('data-block-editor-titlebar', '');
+    const maximize = doc.createElement('button');
+    maximize.type = 'button';
+    maximize.setAttribute('data-block-editor-maximize', '');
+    const closeContainer = header.lastElementChild;
+    if (closeContainer === null || closeContainer === void 0 ? void 0 : closeContainer.querySelector('button, [role="button"]'))
+        closeContainer.prepend(maximize);
+    else
+        header.insertBefore(maximize, closeContainer);
+    const viewport = () => ({ width: win.innerWidth, height: win.innerHeight });
+    const bounds = () => {
+        const { x, y, width, height } = dialog.getBoundingClientRect();
+        return { x, y, width, height };
+    };
+    const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+    function fit(rect) {
+        const view = viewport();
+        const width = clamp(rect.width, Math.min(360, view.width), view.width);
+        const height = clamp(rect.height, Math.min(280, view.height), view.height);
+        return { width, height, x: clamp(rect.x, 0, view.width - width), y: clamp(rect.y, 0, view.height - height) };
+    }
+    function place(rect) {
+        Object.assign(dialog.style, { margin: '0', inset: 'auto', transform: 'none', maxHeight: '100dvh',
+            left: `${rect.x}px`, top: `${rect.y}px`, width: `${rect.width}px`, height: `${rect.height}px` });
+    }
+    function stop(event) {
+        if (!gesture || (event && 'pointerId' in event && event.pointerId !== gesture.id))
+            return;
+        const { target, id } = gesture;
+        gesture = null;
+        if (target.hasPointerCapture(id))
+            target.releasePointerCapture(id);
+        dialog.removeAttribute('data-block-editor-dragging');
+    }
+    function start(event, edge) {
+        if (restoreBounds || gesture || event.button !== 0 || !event.isPrimary)
+            return;
+        if (!edge && event.target.closest('button, a, input, select, textarea, [role="button"]'))
+            return;
+        event.preventDefault();
+        const target = event.currentTarget;
+        gesture = { id: event.pointerId, target, edge, x: event.clientX, y: event.clientY, rect: fit(bounds()) };
+        place(gesture.rect);
+        target.setPointerCapture(event.pointerId);
+        dialog.setAttribute('data-block-editor-dragging', '');
+    }
+    function move(event) {
+        if (!gesture || event.pointerId !== gesture.id)
+            return;
+        const { rect, edge } = gesture, view = viewport();
+        const dx = event.clientX - gesture.x, dy = event.clientY - gesture.y;
+        if (!edge) {
+            place(fit({ ...rect, x: rect.x + dx, y: rect.y + dy }));
+            return;
+        }
+        const minWidth = Math.min(360, view.width), minHeight = Math.min(280, view.height);
+        let left = rect.x, top = rect.y, right = rect.x + rect.width, bottom = rect.y + rect.height;
+        if (edge.includes('w'))
+            left = clamp(left + dx, 0, right - minWidth);
+        if (edge.includes('e'))
+            right = clamp(right + dx, left + minWidth, view.width);
+        if (edge.includes('n'))
+            top = clamp(top + dy, 0, bottom - minHeight);
+        if (edge.includes('s'))
+            bottom = clamp(bottom + dy, top + minHeight, view.height);
+        place({ x: left, y: top, width: right - left, height: bottom - top });
+    }
+    const startMove = (event) => start(event, '');
+    header.addEventListener('pointerdown', startMove);
+    for (const edge of ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw']) {
+        const handle = doc.createElement('div');
+        handle.setAttribute('data-block-editor-resize', edge);
+        handle.setAttribute('aria-hidden', 'true');
+        handle.addEventListener('pointerdown', event => start(event, edge));
+        dialog.append(handle);
+        handles.push(handle);
+    }
+    function updateButton() {
+        const label = restoreBounds ? restoreLabel : maximizeLabel;
+        maximize.setAttribute('aria-label', label);
+        maximize.setAttribute('aria-pressed', String(Boolean(restoreBounds)));
+        maximize.title = label;
+        maximize.textContent = restoreBounds ? '❐' : '⛶';
+        dialog.toggleAttribute('data-block-editor-maximized', Boolean(restoreBounds));
+    }
+    function toggle() {
+        stop();
+        if (restoreBounds) {
+            place(fit(restoreBounds));
+            restoreBounds = null;
+        }
+        else {
+            restoreBounds = bounds();
+            place({ x: 0, y: 0, ...viewport() });
+        }
+        updateButton();
+    }
+    function resize() {
+        stop();
+        if (restoreBounds)
+            place({ x: 0, y: 0, ...viewport() });
+        else
+            place(fit(bounds()));
+    }
+    maximize.addEventListener('click', toggle);
+    win.addEventListener('pointermove', move);
+    win.addEventListener('pointerup', stop);
+    win.addEventListener('pointercancel', stop);
+    win.addEventListener('blur', stop);
+    win.addEventListener('resize', resize);
+    dialog.addEventListener('lostpointercapture', stop);
+    updateButton();
+    return () => {
+        stop();
+        header.removeEventListener('pointerdown', startMove);
+        win.removeEventListener('pointermove', move);
+        win.removeEventListener('pointerup', stop);
+        win.removeEventListener('pointercancel', stop);
+        win.removeEventListener('blur', stop);
+        win.removeEventListener('resize', resize);
+        dialog.removeEventListener('lostpointercapture', stop);
+        maximize.remove();
+        handles.forEach(handle => handle.remove());
+        dialog.style.cssText = initialStyle;
+        for (const name of ['window', 'maximized', 'dragging'])
+            dialog.removeAttribute(`data-block-editor-${name}`);
+        if (frame !== dialog)
+            frame.removeAttribute('data-block-editor-window-frame');
+        header.removeAttribute('data-block-editor-titlebar');
+    };
+}

package/dist/preview.d.ts

@@ -0,0 +1,3 @@
+import type { BlockPreviewDefinition, EditorDefinition } from './types.js';
+/** Compose presentation only; the original definition retains sole authority over persistence. */
+export declare function withBlockPreview(original: EditorDefinition | undefined, preview: BlockPreviewDefinition, opcode: string): EditorDefinition;

package/dist/preview.js

@@ -0,0 +1,100 @@
+const cache = new WeakMap();
+/** Compose presentation only; the original definition retains sole authority over persistence. */
+export function withBlockPreview(original, preview, opcode) {
+    let entries = cache.get(preview);
+    if (!entries) {
+        entries = new Map();
+        cache.set(preview, entries);
+    }
+    const previous = entries.get(opcode);
+    if (previous && previous.original === original)
+        return previous.result;
+    const fallback = {
+        apiVersion: 1, extensionId: preview.extensionId, editorId: 'block-preview', opcodes: [opcode], editableArguments: [],
+        read: () => ({}), validate: () => [], createPatch: () => []
+    };
+    const result = Object.freeze({ ...original !== null && original !== void 0 ? original : fallback, mount(container, context) {
+            var _a;
+            const snapshot = (_a = context.getSnapshot) === null || _a === void 0 ? void 0 : _a.call(context);
+            if (!snapshot)
+                throw new TypeError('Block preview requires a captured snapshot.');
+            const document = container.ownerDocument;
+            const layout = document.createElement('div');
+            layout.dataset.blockPreviewLayout = '';
+            layout.dataset.blockPreviewHasForm = String(typeof (original === null || original === void 0 ? void 0 : original.mount) === 'function');
+            const style = document.createElement('style');
+            style.textContent = `
+      [data-block-preview-layout] {
+        display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
+        min-width: 0; width: 100%; align-items: start;
+      }
+      [data-block-preview-layout] > [data-block-preview-visual],
+      [data-block-preview-layout] > [data-block-preview-form] {
+        min-width: 0; max-width: 100%; overflow-wrap: anywhere;
+      }
+      @media (min-width: 900px) {
+        [data-block-preview-layout][data-block-preview-has-form="true"] {
+          grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        }
+        [data-block-preview-layout][data-block-preview-has-form="true"] > [data-block-preview-visual] {
+          position: sticky; top: 0; align-self: start;
+        }
+      }
+    `;
+            const visual = document.createElement('div');
+            visual.dataset.blockPreviewVisual = '';
+            const form = document.createElement('div');
+            form.dataset.blockPreviewForm = '';
+            form.hidden = typeof (original === null || original === void 0 ? void 0 : original.mount) !== 'function';
+            layout.append(visual, form);
+            container.append(style, layout);
+            const removeLayout = () => { layout.remove(); style.remove(); };
+            let removeForm;
+            let removePreview;
+            try {
+                if (original === null || original === void 0 ? void 0 : original.mount) {
+                    const cleanup = original.mount(form, context);
+                    if (typeof cleanup !== 'function')
+                        throw new TypeError('mount() must return a cleanup function.');
+                    removeForm = cleanup;
+                }
+                const cleanup = preview.mount(visual, context, snapshot);
+                if (typeof cleanup !== 'function')
+                    throw new TypeError('preview.mount() must return a cleanup function.');
+                removePreview = cleanup;
+            }
+            catch (error) {
+                try {
+                    removePreview === null || removePreview === void 0 ? void 0 : removePreview();
+                }
+                finally {
+                    try {
+                        removeForm === null || removeForm === void 0 ? void 0 : removeForm();
+                    }
+                    finally {
+                        removeLayout();
+                    }
+                }
+                throw error;
+            }
+            let active = true;
+            return () => {
+                if (!active)
+                    return;
+                active = false;
+                try {
+                    removePreview === null || removePreview === void 0 ? void 0 : removePreview();
+                }
+                finally {
+                    try {
+                        removeForm === null || removeForm === void 0 ? void 0 : removeForm();
+                    }
+                    finally {
+                        removeLayout();
+                    }
+                }
+            };
+        } });
+    entries.set(opcode, { original, result });
+    return result;
+}

package/dist/react.css

@@ -349,3 +349,73 @@
     color: var(--block-editor-error-text, #a61b1b);
     margin-bottom: 0;
 }
+
+/* Window controls also work with a host modal rendered through a portal. */
+:global([data-block-editor-window]) {
+    position: fixed;
+    top: min(60px, 5vh);
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    margin: 0;
+    max-width: 100vw;
+    max-height: calc(100dvh - min(60px, 5vh) - 16px);
+}
+:global([data-block-editor-window-frame]) {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+}
+:global([data-block-editor-titlebar]) {
+    flex: 0 0 auto;
+    cursor: move;
+    touch-action: none;
+    user-select: none;
+}
+:global([data-block-editor-titlebar]) > div:first-child { cursor: inherit; }
+:global([data-block-editor-window]) :global([data-block-editor-body]) {
+    flex: 1 1 auto;
+    min-height: 0;
+    max-height: none;
+    box-sizing: border-box;
+}
+:global([data-block-editor-window]) .editor-body { flex: 1 1 auto; }
+:global([data-block-editor-maximize]) {
+    display: inline-grid;
+    flex: 0 0 auto;
+    place-items: center;
+    width: 34px;
+    height: 34px;
+    margin-inline-end: 8px;
+    padding: 0;
+    border: 1px solid currentColor;
+    border-radius: 5px;
+    background: transparent;
+    color: inherit;
+    font: 24px/1 system-ui, sans-serif;
+    cursor: pointer;
+}
+:global([data-block-editor-maximize]):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+:global([data-block-editor-maximized]) { border-radius: 0; max-height: 100dvh; }
+:global([data-block-editor-maximized]) :global([data-block-editor-titlebar]) { cursor: default; }
+:global([data-block-editor-dragging]), :global([data-block-editor-dragging]) * { user-select: none; }
+:global([data-block-editor-resize]) { position: absolute; z-index: 10; touch-action: none; }
+:global([data-block-editor-resize="n"]), :global([data-block-editor-resize="s"]) { left: 9px; right: 9px; height: 7px; cursor: ns-resize; }
+:global([data-block-editor-resize="n"]) { top: 0; }
+:global([data-block-editor-resize="s"]) { bottom: 0; }
+:global([data-block-editor-resize="e"]), :global([data-block-editor-resize="w"]) { top: 9px; bottom: 9px; width: 7px; cursor: ew-resize; }
+:global([data-block-editor-resize="e"]) { right: 0; }
+:global([data-block-editor-resize="w"]) { left: 0; }
+:global([data-block-editor-resize="ne"]), :global([data-block-editor-resize="se"]),
+:global([data-block-editor-resize="sw"]), :global([data-block-editor-resize="nw"]) { width: 10px; height: 10px; }
+:global([data-block-editor-resize="ne"]), :global([data-block-editor-resize="nw"]) { top: 0; }
+:global([data-block-editor-resize="se"]), :global([data-block-editor-resize="sw"]) { bottom: 0; }
+:global([data-block-editor-resize="ne"]), :global([data-block-editor-resize="se"]) { right: 0; }
+:global([data-block-editor-resize="nw"]), :global([data-block-editor-resize="sw"]) { left: 0; }
+:global([data-block-editor-resize="ne"]), :global([data-block-editor-resize="sw"]) { cursor: nesw-resize; }
+:global([data-block-editor-resize="nw"]), :global([data-block-editor-resize="se"]) { cursor: nwse-resize; }
+:global([data-block-editor-maximized]) > :global([data-block-editor-resize]) { display: none; }

package/dist/react.d.ts

@@ -35,6 +35,8 @@ export interface EditorDialogMessages {
     readonly structuralNode: string;
     /** Fixed forms retain technical diagnostics in the API while showing a localized summary. */
     readonly invalidInput?: string;
+    readonly maximize?: string;
+    readonly restore?: string;
 }
 export interface EditorNodeAppearance {
     readonly name?: string;
@@ -75,6 +77,7 @@ export declare class BlockEditorDialog extends React.Component<BlockEditorDialog
     private removeListener;
     private unmountBody;
     private stopFieldErrors;
+    private stopWindow;
     constructor(props: BlockEditorDialogProps);
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/react.js

@@ -1,4 +1,5 @@
 import bindBlockEditorFieldErrors from './field-errors.js';
+import { attachEditorDialogWindow } from './dialog-window.js';
 export { default as bindBlockEditorFieldErrors } from './field-errors.js';
 import * as React from 'react';
 import { BlockEditorConflictError } from './types.js';
@@ -164,18 +165,19 @@ export class BlockEditorDialog extends React.Component {
         this.mountBody();
     }
     componentWillUnmount() {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         this.unmounting = true;
         this.mounted = false;
         if (this.focusFrame !== undefined)
             cancelAnimationFrame(this.focusFrame);
         this.removeListener();
         (_a = this.stopFieldErrors) === null || _a === void 0 ? void 0 : _a.call(this);
+        (_b = this.stopWindow) === null || _b === void 0 ? void 0 : _b.call(this);
         try {
-            (_b = this.unmountBody) === null || _b === void 0 ? void 0 : _b.call(this);
+            (_c = this.unmountBody) === null || _c === void 0 ? void 0 : _c.call(this);
         }
         catch (error) {
-            (_d = (_c = this.props).onError) === null || _d === void 0 ? void 0 : _d.call(_c, error);
+            (_e = (_d = this.props).onError) === null || _e === void 0 ? void 0 : _e.call(_d, error);
         }
         finally {
             this.props.session.dispose();
@@ -185,6 +187,12 @@ export class BlockEditorDialog extends React.Component {
         if (!this.body || this.unmountBody || this.state.mountFailed)
             return;
         try {
+            if (!this.stopWindow)
+                this.stopWindow = attachEditorDialogWindow(this.body, {
+                    headerClassName: this.props.styles.header,
+                    maximize: this.props.messages.maximize,
+                    restore: this.props.messages.restore
+                });
             if (!this.stopFieldErrors)
                 this.stopFieldErrors = bindBlockEditorFieldErrors(this.body);
             if (typeof this.props.session.getNodes !== 'function')
@@ -224,7 +232,7 @@ export class BlockEditorDialog extends React.Component {
             /ブロック|block/i.test(messages.title) ? messages.title.replace(/ブロック|block/i, () => name) :
                 `${name}: ${messages.title}` : messages.title;
         return React.createElement(ModalComponent, { className: `${styles.modalContent || ''} ${hierarchy ? styles.hierarchyModal : ''} ${this.props.className || ''}`, contentLabel: title, ...((appearance === null || appearance === void 0 ? void 0 : appearance.iconURI) ? { headerImage: appearance.iconURI } : {}), headerClassName: styles.header, id: "blockEditorModal", onRequestClose: this.handleClose },
-            React.createElement("div", { "aria-busy": saving, className: styles.body, onCompositionStart: () => { this.composing = true; }, onCompositionEnd: () => { this.composing = false; }, onKeyDownCapture: event => {
+            React.createElement("div", { "aria-busy": saving, className: styles.body, "data-block-editor-body": "", onCompositionStart: () => { this.composing = true; }, onCompositionEnd: () => { this.composing = false; }, onKeyDownCapture: event => {
                     if (this.composing || event.nativeEvent.isComposing || event.keyCode === 229)
                         event.stopPropagation();
                 } },

package/dist/registry.d.ts

@@ -1,3 +1,4 @@
+import type { BlockPreviewDefinition } from './types.js';
 import { EditorSession } from './session.js';
 import { DescendantSession } from './descendants.js';
 import type { DescendantLimits } from './descendant-types.js';
@@ -6,6 +7,8 @@ import type { PreparedEditorDefinition } from './prepared-types.js';
 import type { FixedInputDeclaration, FixedInputEditorDefinition } from './fixed-input-types.js';
 export declare class EditorRegistry {
     #private;
+    registerPreview(definition: BlockPreviewDefinition): () => void;
+    resolvePreview(opcode: string): BlockPreviewDefinition | undefined;
     register(definition: EditorDefinition): () => void;
     registerPrepared(definition: PreparedEditorDefinition): () => void;
     registerFixed<C = null>(definition: FixedInputEditorDefinition<C>): () => void;

package/dist/registry.js

@@ -3,8 +3,9 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _EditorRegistry_instances, _EditorRegistry_editors, _EditorRegistry_opcodes, _EditorRegistry_fixedDeclarations, _EditorRegistry_changes, _EditorRegistry_register, _EditorRegistry_notifyChanges;
+var _EditorRegistry_instances, _EditorRegistry_previews, _EditorRegistry_editors, _EditorRegistry_opcodes, _EditorRegistry_fixedDeclarations, _EditorRegistry_changes, _EditorRegistry_definition, _EditorRegistry_register, _EditorRegistry_notifyChanges;
 import { captureReference, captureSnapshot } from './data.js';
+import { withBlockPreview } from './preview.js';
 import { EditorSession } from './session.js';
 import { DescendantSession } from './descendants.js';
 import { supportsDescendantEditing } from './descendant-types.js';
@@ -17,11 +18,35 @@ import { supportsFixedInputEditing } from './fixed-input-types.js';
 export class EditorRegistry {
     constructor() {
         _EditorRegistry_instances.add(this);
+        _EditorRegistry_previews.set(this, new Map());
         _EditorRegistry_editors.set(this, new Map());
         _EditorRegistry_opcodes.set(this, new Map());
         _EditorRegistry_fixedDeclarations.set(this, new Map());
         _EditorRegistry_changes.set(this, new Set());
     }
+    registerPreview(definition) {
+        if (!definition || !/^[a-z0-9]+$/i.test(definition.extensionId) ||
+            !Array.isArray(definition.opcodes) || !definition.opcodes.length ||
+            new Set(definition.opcodes).size !== definition.opcodes.length ||
+            definition.opcodes.some(op => typeof op !== 'string' || !op.startsWith(`${definition.extensionId}_`) ||
+                op === `${definition.extensionId}_` || __classPrivateFieldGet(this, _EditorRegistry_previews, "f").has(op)) ||
+            typeof definition.mount !== 'function' ||
+            (definition.hover !== undefined && typeof definition.hover !== 'function')) {
+            throw new TypeError('Invalid or duplicate block preview.');
+        }
+        const entry = Object.freeze({ ...definition, opcodes: Object.freeze([...definition.opcodes]) });
+        for (const op of entry.opcodes)
+            __classPrivateFieldGet(this, _EditorRegistry_previews, "f").set(op, entry);
+        __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_notifyChanges).call(this);
+        return () => {
+            if (__classPrivateFieldGet(this, _EditorRegistry_previews, "f").get(entry.opcodes[0]) !== entry)
+                return;
+            for (const op of entry.opcodes)
+                __classPrivateFieldGet(this, _EditorRegistry_previews, "f").delete(op);
+            __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_notifyChanges).call(this);
+        };
+    }
+    resolvePreview(opcode) { return __classPrivateFieldGet(this, _EditorRegistry_previews, "f").get(opcode); }
     register(definition) {
         if (isFixedInputEditor(definition))
             throw new TypeError('Fixed input editors require registerFixed().');
@@ -39,7 +64,7 @@ export class EditorRegistry {
         return __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_register).call(this, captureFixedInputEditorDefinition(definition));
     }
     resolve(opcode) {
-        const entry = __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(opcode);
+        const entry = __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, opcode);
         if (!entry)
             return undefined;
         return Object.freeze({
@@ -57,7 +82,7 @@ export class EditorRegistry {
         const live = host.readBlock(capturedReference);
         if (!live)
             return undefined;
-        const entry = __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(live.opcode);
+        const entry = __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, live.opcode);
         if (!entry) {
             // Preserve legacy snapshot validation even when no editor is registered.
             captureSnapshot(live, capturedReference);
@@ -70,14 +95,14 @@ export class EditorRegistry {
             if (!fixed || fixed.opcode !== live.opcode)
                 return undefined;
             const snapshot = captureFixedSnapshot(fixed, capturedReference, entry);
-            return new EditorSession(entry, snapshot, host, () => __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(snapshot.opcode) === entry, listener => {
+            return new EditorSession(entry, snapshot, host, () => __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, snapshot.opcode) === entry, listener => {
                 __classPrivateFieldGet(this, _EditorRegistry_changes, "f").add(listener);
                 return () => { __classPrivateFieldGet(this, _EditorRegistry_changes, "f").delete(listener); };
             });
         }
         const snapshot = captureSnapshot(live, capturedReference);
-        return new EditorSession(entry, snapshot, host, isPreparedEditor(entry)
-            ? () => __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(snapshot.opcode) === entry : undefined);
+        return new EditorSession(entry, snapshot, host, isPreparedEditor(entry) || __classPrivateFieldGet(this, _EditorRegistry_previews, "f").has(snapshot.opcode)
+            ? () => __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, snapshot.opcode) === entry : undefined);
     }
     openDescendants(reference, host, limits) {
         if (!supportsDescendantEditing(host))
@@ -89,11 +114,11 @@ export class EditorRegistry {
         if (!live)
             return undefined;
         const captured = captureSubtree(live, capturedReference, resolvedLimits);
-        const root = __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(captured.snapshot.nodes[0].block.opcode);
+        const root = __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, captured.snapshot.nodes[0].block.opcode);
         if (!root || isFixedInputEditor(root))
             return undefined;
         return new DescendantSession(captured, port, opcode => {
-            const entry = __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(opcode);
+            const entry = __classPrivateFieldGet(this, _EditorRegistry_instances, "m", _EditorRegistry_definition).call(this, opcode);
             return entry && !isFixedInputEditor(entry) ? entry : undefined;
         }, listener => {
             __classPrivateFieldGet(this, _EditorRegistry_changes, "f").add(listener);
@@ -101,7 +126,11 @@ export class EditorRegistry {
         }, resolvedLimits);
     }
 }
-_EditorRegistry_editors = new WeakMap(), _EditorRegistry_opcodes = new WeakMap(), _EditorRegistry_fixedDeclarations = new WeakMap(), _EditorRegistry_changes = new WeakMap(), _EditorRegistry_instances = new WeakSet(), _EditorRegistry_register = function _EditorRegistry_register(definition) {
+_EditorRegistry_previews = new WeakMap(), _EditorRegistry_editors = new WeakMap(), _EditorRegistry_opcodes = new WeakMap(), _EditorRegistry_fixedDeclarations = new WeakMap(), _EditorRegistry_changes = new WeakMap(), _EditorRegistry_instances = new WeakSet(), _EditorRegistry_definition = function _EditorRegistry_definition(opcode) {
+    const original = __classPrivateFieldGet(this, _EditorRegistry_opcodes, "f").get(opcode);
+    const preview = __classPrivateFieldGet(this, _EditorRegistry_previews, "f").get(opcode);
+    return preview ? withBlockPreview(original, preview, opcode) : original;
+}, _EditorRegistry_register = function _EditorRegistry_register(definition) {
     if (definition.apiVersion !== EDITOR_API_VERSION)
         throw new TypeError('Unsupported editor API version.');
     if (!/^[a-z0-9]+$/i.test(definition.extensionId) ||

package/dist/rjsf.d.ts

@@ -16,7 +16,7 @@ import type { SchemaBundle, SchemaJsonObject, SchemaValidationContext, SyncOwner
 import type { SourceFormat } from './codec.js';
 import { EditorRegistry } from './registry.js';
 import { EDITOR_API_VERSION } from './types.js';
-import type { BlockSnapshot, EditorDefinition, JsonValue, ValidationIssue } from './types.js';
+import type { BlockPreviewDefinition, BlockSnapshot, EditorDefinition, JsonValue, ValidationIssue } from './types.js';
 export interface SchemaEditorOptions {
     readonly apiVersion: typeof EDITOR_API_VERSION;
     readonly extensionId: string;
@@ -41,6 +41,7 @@ export declare function createSchemaBundleEditor<C>(options: SchemaBundleEditorO
 export interface BlockEditorRegistrationAPI {
     readonly apiVersion: typeof EDITOR_API_VERSION;
     register(definition: EditorDefinition | SchemaEditorOptions): () => void;
+    registerPreview?(definition: BlockPreviewDefinition): () => void;
     registerSchema(definition: SchemaEditorOptions): () => void;
     registerSchemaBundle?<C>(definition: SchemaBundleEditorOptions<C>): () => void;
     registerSourceEditor?<C = null>(definition: SourceEditorOptions<C>): () => void;