@next-buildr/editor 2.0.1 → 3.0.0-rc.0

package/dist/panels/inspector/author-fields.js

@@ -0,0 +1,191 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { checkAttributes, checkClasses, compileCustomCss, MAX_ATTRIBUTES, MAX_CLASSES, MAX_CUSTOM_CSS_LENGTH, } from '@next-buildr/core';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { interpolate, useT } from '../../messages/index.js';
+import { useEditor } from '../../store/index.js';
+import { Button, IconButton, Input } from '../../ui/index.js';
+/** Adds " (line N)" to a CSS problem that quotes a piece of the source: the first line it appears on. */
+export function describeCssProblem(source, message, line) {
+    const quoted = /"([^"]{1,40})"/.exec(message)?.[1];
+    const at = quoted === undefined ? -1 : source.indexOf(quoted);
+    if (at < 0)
+        return message;
+    return `${message} (${interpolate(line, { line: String(source.slice(0, at).split('\n').length) })})`;
+}
+/** Why a CSS source cannot be stored; empty when it can (or when it is empty). */
+export function cssProblems(source) {
+    return source.trim() === '' ? [] : compileCustomCss('.b-check', source).errors;
+}
+/** Runs `node.setAttr`; the message of a refusal, or `''`. */
+function useWriteAttr(nodeId) {
+    const store = useEditor();
+    return (key, value) => {
+        const result = store.dispatch({
+            type: 'node.setAttr',
+            payload: { id: nodeId, key, value },
+        });
+        return result.ok ? '' : (result.error?.message ?? '');
+    };
+}
+function Problems(props) {
+    if (props.list.length === 0)
+        return null;
+    return (_jsxs("div", { id: props.id, role: "alert", className: "bd-author-problems", children: [_jsx("strong", { children: props.title }), _jsx("ul", { children: props.list.map((problem) => (_jsx("li", { children: problem }, problem))) })] }));
+}
+/** Custom CSS for the block: a code field that applies when it loses focus (or with Ctrl+Enter) and only when valid. */
+export function CssField({ node, disabled }) {
+    const t = useT();
+    const id = useId();
+    const write = useWriteAttr(node.id);
+    const stored = node.customCss ?? '';
+    const [draft, setDraft] = useState(undefined);
+    const [refused, setRefused] = useState('');
+    const shown = draft ?? stored;
+    // An undo or a redo changes the stored CSS: show it, dropping a draft it replaces.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only a change of the stored value resets the draft
+    useEffect(() => {
+        setDraft(undefined);
+        setRefused('');
+    }, [stored]);
+    const line = t('inspector.css.line');
+    const problems = useMemo(() => cssProblems(shown).map((message) => describeCssProblem(shown, message, line)), [shown, line]);
+    const list = refused !== '' && problems.length === 0 ? [refused] : problems;
+    const apply = () => {
+        if (draft === undefined || problems.length > 0)
+            return;
+        const value = draft.trim();
+        if (value === stored.trim()) {
+            setDraft(undefined);
+            return;
+        }
+        const message = write('customCss', value === '' ? null : value);
+        setRefused(message);
+        if (message === '')
+            setDraft(undefined);
+    };
+    const remove = () => {
+        setRefused(write('customCss', null));
+        setDraft(undefined);
+    };
+    const errorId = `${id}-error`;
+    return (_jsxs("div", { className: "bd-field bd-author-field", "data-attr": "customCss", children: [_jsx("div", { className: "bd-field-head", children: _jsx("label", { className: "bd-field-label", htmlFor: id, children: t('inspector.css.label') }) }), _jsx("textarea", { id: id, className: "bd-input bd-textarea bd-code", rows: 8, value: shown, maxLength: MAX_CUSTOM_CSS_LENGTH, disabled: disabled, spellCheck: false, autoComplete: "off", autoCapitalize: "off", placeholder: "& { }", "aria-invalid": list.length > 0, "aria-describedby": list.length > 0 ? errorId : `${id}-hint`, onChange: (event) => {
+                    setDraft(event.target.value);
+                    setRefused('');
+                }, onBlur: apply, onKeyDown: (event) => {
+                    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
+                        event.preventDefault();
+                        apply();
+                    }
+                } }), _jsx(Problems, { id: errorId, title: t('inspector.css.error'), list: list }), _jsx("p", { className: "bd-field-hint", id: `${id}-hint`, children: t('inspector.css.hint') }), _jsxs("div", { className: "bd-author-actions", children: [_jsx(Button, { variant: "ghost", disabled: disabled || draft === undefined || problems.length > 0, onClick: apply, children: t('inspector.css.apply') }), stored !== '' ? (_jsx(Button, { variant: "ghost", disabled: disabled, onClick: remove, children: t('inspector.css.remove') })) : null, draft === undefined && stored !== '' ? (_jsx("span", { className: "bd-author-ok", role: "status", children: t('inspector.css.applied') })) : null] })] }));
+}
+const tokensOf = (text) => text.split(/\s+/).filter((part) => part !== '');
+/** CSS classes of the block, as a space-separated list. */
+export function ClassesField({ node, disabled }) {
+    const t = useT();
+    const id = useId();
+    const write = useWriteAttr(node.id);
+    const stored = (node.classes ?? []).join(' ');
+    const [draft, setDraft] = useState(undefined);
+    const [refused, setRefused] = useState('');
+    const shown = draft ?? stored;
+    // An undo or a redo changes the stored classes: show them, dropping a draft they replace.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only a change of the stored value resets the draft
+    useEffect(() => {
+        setDraft(undefined);
+        setRefused('');
+    }, [stored]);
+    const checked = useMemo(() => {
+        const names = tokensOf(shown);
+        return names.length === 0 ? undefined : checkClasses(names);
+    }, [shown]);
+    const problem = checked !== undefined && !checked.ok ? checked.error : refused;
+    const apply = () => {
+        if (draft === undefined || (checked !== undefined && !checked.ok))
+            return;
+        const names = checked?.ok === true ? checked.value : [];
+        if (names.join(' ') === stored) {
+            setDraft(undefined);
+            return;
+        }
+        const message = write('classes', names.length === 0 ? null : names);
+        setRefused(message);
+        if (message === '')
+            setDraft(undefined);
+    };
+    return (_jsxs("div", { className: "bd-field bd-author-field", "data-attr": "classes", children: [_jsx("div", { className: "bd-field-head", children: _jsx("label", { className: "bd-field-label", htmlFor: id, children: t('inspector.classes.label') }) }), _jsx(Input, { id: id, className: "bd-code", value: shown, disabled: disabled, spellCheck: false, autoComplete: "off", autoCapitalize: "off", "aria-invalid": problem !== '', "aria-describedby": problem !== '' ? `${id}-error` : `${id}-hint`, onChange: (event) => {
+                    setDraft(event.target.value);
+                    setRefused('');
+                }, onBlur: apply, onKeyDown: (event) => {
+                    if (event.key === 'Enter')
+                        apply();
+                } }), _jsx(Problems, { id: `${id}-error`, title: t('inspector.css.error'), list: problem === '' ? [] : [problem] }), _jsx("p", { className: "bd-field-hint", id: `${id}-hint`, children: interpolate(t('inspector.classes.hint'), { max: MAX_CLASSES }) })] }));
+}
+const canonical = (record) => JSON.stringify(Object.entries(record).sort(([a], [b]) => (a < b ? -1 : a > b ? 1 : 0)));
+/** The record the rows stand for (rows without a name are ignored), or the first problem. */
+function recordOf(rows, duplicate) {
+    const out = {};
+    for (const row of rows) {
+        const name = row.name.trim();
+        if (name === '')
+            continue;
+        if (Object.hasOwn(out, name))
+            return { ok: false, error: `${duplicate}: ${name}` };
+        Object.defineProperty(out, name, {
+            value: row.value,
+            enumerable: true,
+            writable: true,
+            configurable: true,
+        });
+    }
+    const checked = checkAttributes(out);
+    return checked.ok ? { ok: true, value: out } : { ok: false, error: checked.error };
+}
+/** HTML attributes of the block as name and value rows; a row applies once its name and value are valid. */
+export function AttributesField({ node, disabled }) {
+    const t = useT();
+    const id = useId();
+    const write = useWriteAttr(node.id);
+    const counter = useRef(0);
+    const fromNode = () => Object.entries(node.attributes ?? {}).map(([name, value]) => ({
+        key: counter.current++,
+        name,
+        value,
+    }));
+    const [rows, setRows] = useState(fromNode);
+    const [refused, setRefused] = useState('');
+    const storedKey = canonical(node.attributes ?? {});
+    const parsed = recordOf(rows, t('inspector.attributes.duplicate'));
+    const problem = !parsed.ok ? parsed.error : refused;
+    // An undo or a redo changes the stored attributes under the rows: show what is stored.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: only a change of the stored value resets the rows
+    useEffect(() => {
+        const now = recordOf(rows, '');
+        if (!now.ok || canonical(now.value) !== storedKey) {
+            setRows(fromNode());
+            setRefused('');
+        }
+    }, [storedKey]);
+    const commit = (next) => {
+        const record = recordOf(next, t('inspector.attributes.duplicate'));
+        if (!record.ok)
+            return;
+        if (canonical(record.value) === storedKey)
+            return;
+        const message = write('attributes', Object.keys(record.value).length === 0 ? null : record.value);
+        setRefused(message);
+    };
+    const edit = (key, patch) => {
+        setRows(rows.map((row) => (row.key === key ? { ...row, ...patch } : row)));
+        setRefused('');
+    };
+    return (_jsxs("div", { className: "bd-field bd-author-field", "data-attr": "attributes", children: [_jsx("ul", { className: "bd-author-attrs", children: rows.map((row) => (_jsxs("li", { className: "bd-author-attr", children: [_jsx(Input, { className: "bd-code", "aria-label": t('inspector.attributes.name'), placeholder: "data-id", value: row.name, disabled: disabled, spellCheck: false, autoComplete: "off", onChange: (event) => edit(row.key, { name: event.target.value }), onBlur: () => commit(rows) }), _jsx(Input, { className: "bd-code", "aria-label": t('inspector.attributes.value'), value: row.value, disabled: disabled, spellCheck: false, autoComplete: "off", onChange: (event) => edit(row.key, { value: event.target.value }), onBlur: () => commit(rows) }), _jsx(IconButton, { variant: "ghost", icon: "trash-2", label: t('inspector.attributes.remove'), disabled: disabled, onClick: () => {
+                                const next = rows.filter((other) => other.key !== row.key);
+                                setRows(next);
+                                commit(next);
+                            } })] }, row.key))) }), _jsx(Problems, { id: `${id}-error`, title: t('inspector.attributes.error'), list: problem === '' ? [] : [problem] }), _jsx("div", { className: "bd-author-actions", children: _jsx(Button, { variant: "ghost", disabled: disabled || rows.length >= MAX_ATTRIBUTES, onClick: () => setRows([...rows, { key: counter.current++, name: '', value: '' }]), children: t('inspector.attributes.add') }) }), _jsx("p", { className: "bd-field-hint", children: t('inspector.attributes.hint') })] }));
+}
+/** What the Advanced tab says while the host has not enabled author code: a quiet note, no fields. */
+export function AuthorOffNote({ held }) {
+    const t = useT();
+    return (_jsxs("div", { className: "bd-author-off", "data-state": "author-off", children: [_jsx("p", { className: "bd-field-hint", children: t('inspector.author.off') }), held ? _jsx("p", { className: "bd-field-hint", children: t('inspector.author.offHeld') }) : null] }));
+}

package/dist/panels/inspector/author-fields.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=author-fields.test.d.ts.map

package/dist/panels/inspector/author-fields.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"author-fields.test.d.ts","sourceRoot":"","sources":["../../../src/panels/inspector/author-fields.test.tsx"],"names":[],"mappings":""}

package/dist/panels/inspector/author-fields.test.js

@@ -0,0 +1,237 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { createRegistryMeta, createSeededIdGenerator, p, toManifest, } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { ManifestProvider } from '../../app/manifest.js';
+import { MessagesProvider } from '../../messages/index.js';
+import { createEditorStore, EditorStoreProvider } from '../../store/index.js';
+import { cssProblems, describeCssProblem } from './author-fields.js';
+import { Inspector } from './inspector.js';
+import { hasTextModes } from './props-panel.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+const text = {
+    type: 'buildr/text',
+    version: 1,
+    label: 'Text',
+    category: 'content',
+    props: {
+        mode: p.select({ options: ['plain', 'rich', 'html'], default: 'plain', group: 'content' }),
+        text: p.textarea({ default: 'Hello', group: 'content' }),
+        rich: p.richText({ label: 'Rich text', group: 'content' }),
+        html: p.textarea({ format: 'html', default: '', group: 'content' }),
+    },
+    contentCategories: ['flow'],
+    styles: { groups: [] },
+    runtime: 'shared',
+    slots: { default: {} },
+};
+const page = {
+    ...text,
+    type: 'buildr/page',
+    label: 'Page',
+    props: {},
+    capabilities: { root: true },
+};
+const registry = createRegistryMeta({ components: [page, text] });
+const manifest = toManifest(registry);
+const fixture = () => ({
+    schemaVersion: 1,
+    root: 'root',
+    nodes: {
+        root: { id: 'root', type: 'buildr/page', slots: { default: ['text00001'] } },
+        text00001: { id: 'text00001', type: 'buildr/text' },
+    },
+    components: {},
+});
+let container;
+let root;
+beforeEach(() => {
+    container = document.createElement('div');
+    document.body.append(container);
+    root = createRoot(container);
+    Element.prototype.scrollIntoView ??= () => { };
+    Element.prototype.hasPointerCapture ??= () => false;
+    Element.prototype.setPointerCapture ??= () => { };
+    Element.prototype.releasePointerCapture ??= () => { };
+});
+afterEach(() => {
+    act(() => root.unmount());
+    document.body.innerHTML = '';
+});
+async function mount(authorCode, tab = 'Advanced') {
+    const store = createEditorStore({
+        doc: fixture(),
+        registry,
+        generateId: createSeededIdGenerator(3),
+        validationDelayMs: null,
+        ...(authorCode === undefined ? {} : { capabilities: { authorCode } }),
+    });
+    store.select('text00001');
+    await act(async () => root.render(_jsx(MessagesProvider, { locale: "en", children: _jsx(ManifestProvider, { manifest: manifest, children: _jsx(EditorStoreProvider, { store: store, children: _jsx(Inspector, {}) }) }) })));
+    await act(async () => {
+        const el = [...container.querySelectorAll('[role=tab]')].find((t) => t.textContent === tab);
+        el?.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, button: 0 }));
+    });
+    return store;
+}
+const typeInto = (element, value) => act(async () => {
+    const proto = element instanceof HTMLTextAreaElement
+        ? HTMLTextAreaElement.prototype
+        : HTMLInputElement.prototype;
+    Object.getOwnPropertyDescriptor(proto, 'value')?.set?.call(element, value);
+    element.dispatchEvent(new Event('input', { bubbles: true }));
+});
+const blur = (element) => act(async () => {
+    element.dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
+});
+const attr = (name) => container.querySelector(`[data-attr=${name}]`);
+const node = (store) => store.getState().doc.nodes['text00001'];
+describe('capability plumbing', () => {
+    it('is off unless the host passes exactly true', async () => {
+        expect((await mount(undefined)).authorCode).toBe(false);
+        expect((await mount(false)).authorCode).toBe(false);
+        expect((await mount(true)).authorCode).toBe(true);
+    });
+    it('refuses author attributes through the command while off', async () => {
+        const store = await mount(false);
+        const result = store.dispatch({
+            type: 'node.setAttr',
+            payload: { id: 'text00001', key: 'classes', value: ['hero'] },
+        });
+        expect(result.ok).toBe(false);
+        expect(node(store)?.classes).toBeUndefined();
+    });
+});
+describe('Advanced author fields', () => {
+    it('shows a quiet note and no fields while author code is off', async () => {
+        await mount(false);
+        expect(container.querySelector('[data-state=author-off]')).not.toBeNull();
+        expect(attr('customCss')).toBeNull();
+        expect(attr('classes')).toBeNull();
+        expect(attr('attributes')).toBeNull();
+    });
+    it('shows the three fields while it is on', async () => {
+        await mount(true);
+        expect(container.querySelector('[data-state=author-off]')).toBeNull();
+        expect(attr('customCss')).not.toBeNull();
+        expect(attr('classes')).not.toBeNull();
+        expect(attr('attributes')).not.toBeNull();
+    });
+    it('applies valid CSS on blur and keeps a refused one out of the document', async () => {
+        const store = await mount(true);
+        const area = attr('customCss').querySelector('textarea');
+        await typeInto(area, '& { color: red; }');
+        await blur(area);
+        expect(node(store)?.customCss).toBe('& { color: red; }');
+        await typeInto(area, '@import url("https://x.test/a.css");');
+        await blur(area);
+        expect(attr('customCss').querySelector('[role=alert]')).not.toBeNull();
+        expect(node(store)?.customCss).toBe('& { color: red; }');
+    });
+    it('writes classes and rejects an unsafe one', async () => {
+        const store = await mount(true);
+        const field = attr('classes').querySelector('input');
+        await typeInto(field, 'hero wide');
+        await blur(field);
+        expect(node(store)?.classes).toEqual(['hero', 'wide']);
+        await typeInto(field, 'bad"class');
+        await blur(field);
+        expect(attr('classes').querySelector('[role=alert]')).not.toBeNull();
+        expect(node(store)?.classes).toEqual(['hero', 'wide']);
+    });
+    it('shows the stored CSS again after an undo, dropping an unapplied draft', async () => {
+        const store = await mount(true);
+        const area = attr('customCss').querySelector('textarea');
+        await typeInto(area, '& { color: red; }');
+        await blur(area);
+        await typeInto(area, '& { color: blue; }');
+        expect(area.value).toBe('& { color: blue; }');
+        await act(async () => void store.undo());
+        expect(node(store)?.customCss).toBeUndefined();
+        expect(area.value).toBe('');
+    });
+    it('shows the stored classes again after an undo, dropping an unapplied draft', async () => {
+        const store = await mount(true);
+        const field = attr('classes').querySelector('input');
+        await typeInto(field, 'hero');
+        await blur(field);
+        await typeInto(field, 'hero extra');
+        await act(async () => void store.undo());
+        expect(field.value).toBe('');
+    });
+    it('states the class limit through the localized hint', async () => {
+        await mount(true);
+        expect(attr('classes').textContent).toMatch(/\(\d+ max\)/);
+        expect(attr('classes').textContent).not.toContain('{max}');
+    });
+    it('writes an attribute row once its name is set', async () => {
+        const store = await mount(true);
+        const add = [...attr('attributes').querySelectorAll('button')].find((b) => b.textContent?.includes('Add'));
+        await act(async () => add?.click());
+        const [name, value] = [...attr('attributes').querySelectorAll('input')];
+        await typeInto(name, 'data-id');
+        await typeInto(value, '7');
+        await blur(value);
+        expect(node(store)?.attributes).toEqual({ 'data-id': '7' });
+    });
+});
+describe('css problems', () => {
+    it('is empty for valid or empty CSS', () => {
+        expect(cssProblems('')).toEqual([]);
+        expect(cssProblems('& { color: red; }')).toEqual([]);
+    });
+    it('adds a line number when the message quotes the source', () => {
+        expect(describeCssProblem('a\nfoo', 'bad "foo" here', 'line {line}')).toBe('bad "foo" here (line 2)');
+        expect(describeCssProblem('a', 'no quote', 'line {line}')).toBe('no quote');
+    });
+});
+describe('Text modes', () => {
+    it('is recognised by the prop shape', () => {
+        expect(hasTextModes(text.props)).toBe(true);
+        expect(hasTextModes({ ...text.props, rich: p.text({}) })).toBe(false);
+    });
+    it('shows only the field of the chosen mode', async () => {
+        const store = await mount(true, 'Content');
+        const has = (name) => container.querySelector(`[data-prop=${name}]`) !== null;
+        expect(has('text')).toBe(true);
+        expect(has('rich')).toBe(false);
+        expect(has('html')).toBe(false);
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setProp',
+                payload: {
+                    id: 'text00001',
+                    prop: 'mode',
+                    value: { kind: 'static', value: 'html' },
+                },
+            });
+        });
+        expect(has('text')).toBe(false);
+        expect(has('html')).toBe(true);
+    });
+    it('disables the HTML mode and its field while author code is off', async () => {
+        await mount(false, 'Content');
+        const html = [...container.querySelectorAll('.bd-segment')].find((b) => b.textContent === 'HTML code');
+        expect(html.disabled).toBe(true);
+    });
+    it('reports what the sanitiser removes', async () => {
+        const store = await mount(true, 'Content');
+        await act(async () => {
+            store.dispatch({
+                type: 'node.setProp',
+                payload: {
+                    id: 'text00001',
+                    prop: 'mode',
+                    value: { kind: 'static', value: 'html' },
+                },
+            });
+        });
+        const area = container.querySelector('[data-prop=html] textarea');
+        await typeInto(area, '<p>ok</p><script>alert(1)</script>');
+        expect(container.querySelector('.bd-author-problems[data-kind=removed]')).not.toBeNull();
+        expect(container.querySelector('.bd-code-preview')?.textContent).toContain('<p>ok</p>');
+        expect(container.querySelector('.bd-code-preview')?.textContent).not.toContain('script');
+    });
+});

package/dist/panels/inspector/controls/external-link.d.ts

@@ -0,0 +1,24 @@
+export interface ExternalLinkEntryProps {
+    /** The accessible name of the prop the link is for. */
+    readonly label: string;
+    readonly disabled: boolean;
+    /** Called with the checked address, after the author confirmed the warning. */
+    readonly onAdd: (url: string) => void;
+}
+/**
+ * A field for an address outside the site (ADR-028). The address is checked for feedback (HTTPS,
+ * no credentials), then the "Zewnętrzne źródło" warning opens; the value is stored only when the
+ * author confirms, and Cancel stores nothing.
+ */
+export declare function ExternalLinkEntry({ label, disabled, onAdd }: ExternalLinkEntryProps): import("react").JSX.Element;
+export interface ExternalUrlControlProps {
+    readonly id: string;
+    readonly label: string;
+    readonly describedBy: string | undefined;
+    readonly value: unknown;
+    readonly disabled: boolean;
+    readonly onChange: (value: unknown) => void;
+}
+/** A text prop that is always an external address (the iframe's `url`): shows it, removes it, adds one after the warning. */
+export declare function ExternalUrlControl({ id, label, describedBy, value, disabled, onChange, }: ExternalUrlControlProps): import("react").JSX.Element;
+//# sourceMappingURL=external-link.d.ts.map

package/dist/panels/inspector/controls/external-link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-link.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/external-link.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,uDAAuD;IACvD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,+EAA+E;IAC/E,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACvC;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,sBAAsB,+BA2DnF;AAED,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IACzC,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAC7C;AAED,6HAA6H;AAC7H,wBAAgB,kBAAkB,CAAC,EACjC,EAAE,EACF,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,+BA8BzB"}

package/dist/panels/inspector/controls/external-link.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from 'react';
+import { ExternalSourceDialog } from '../../../dialogs/external-source.js';
+import { normalizeExternalUrl } from '../../../dialogs/media-picker/media-ref.js';
+import { useT } from '../../../messages/index.js';
+import { Button, Input } from '../../../ui/index.js';
+/**
+ * A field for an address outside the site (ADR-028). The address is checked for feedback (HTTPS,
+ * no credentials), then the "Zewnętrzne źródło" warning opens; the value is stored only when the
+ * author confirms, and Cancel stores nothing.
+ */
+export function ExternalLinkEntry({ label, disabled, onAdd }) {
+    const t = useT();
+    const id = useId();
+    const [text, setText] = useState('');
+    const [invalid, setInvalid] = useState(false);
+    const [pending, setPending] = useState(null);
+    const submit = () => {
+        const url = normalizeExternalUrl(text);
+        setInvalid(url === undefined);
+        if (url !== undefined)
+            setPending(url);
+    };
+    return (_jsxs("div", { className: "bd-external-entry", children: [_jsxs("div", { className: "bd-external-row", children: [_jsx(Input, { type: "url", value: text, disabled: disabled, placeholder: t('media.external.placeholder'), "aria-label": `${label}: ${t('media.external.label')}`, "aria-invalid": invalid, "aria-describedby": invalid ? `${id}-error` : undefined, onChange: (event) => {
+                            setText(event.target.value);
+                            setInvalid(false);
+                        }, onKeyDown: (event) => {
+                            if (event.key === 'Enter') {
+                                event.preventDefault();
+                                submit();
+                            }
+                        } }), _jsx(Button, { disabled: disabled || text.trim() === '', "aria-label": `${label}: ${t('media.external.add')}`, onClick: submit, children: t('media.external.add') })] }), invalid ? (_jsx("p", { role: "alert", id: `${id}-error`, className: "bd-media-error", children: t('media.external.invalid') })) : null, _jsx(ExternalSourceDialog, { url: pending, onCancel: () => setPending(null), onConfirm: (url) => {
+                    setPending(null);
+                    setText('');
+                    onAdd(url);
+                } })] }));
+}
+/** A text prop that is always an external address (the iframe's `url`): shows it, removes it, adds one after the warning. */
+export function ExternalUrlControl({ id, label, describedBy, value, disabled, onChange, }) {
+    const t = useT();
+    const current = typeof value === 'string' && value !== '' ? value : undefined;
+    return (_jsxs("div", { className: "bd-media-control", id: id, "aria-describedby": describedBy, children: [current !== undefined ? (_jsxs("div", { className: "bd-media-preview", children: [_jsx("span", { className: "bd-media-badge", children: t('media.external.badge') }), _jsx("span", { className: "bd-media-name", title: current, children: current })] })) : (_jsx("p", { className: "bd-field-hint", children: t('media.none') })), current !== undefined ? (_jsx("div", { className: "bd-media-actions", children: _jsx(Button, { variant: "ghost", disabled: disabled, "aria-label": `${label}: ${t('media.remove')}`, onClick: () => onChange(''), children: t('media.remove') }) })) : null, _jsx(ExternalLinkEntry, { label: label, disabled: disabled, onAdd: (url) => onChange(url) })] }));
+}

package/dist/panels/inspector/controls/external-link.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=external-link.test.d.ts.map

package/dist/panels/inspector/controls/external-link.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"external-link.test.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/external-link.test.tsx"],"names":[],"mappings":""}

package/dist/panels/inspector/controls/external-link.test.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// @vitest-environment jsdom
+import { p } from '@next-buildr/core';
+import { act } from 'react';
+import { createRoot } from 'react-dom/client';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { normalizeExternalUrl, parseExternalMedia, } from '../../../dialogs/media-picker/media-ref.js';
+import { MessagesProvider } from '../../../messages/index.js';
+import { ExternalUrlControl } from './external-link.js';
+import { MediaControl } from './media.js';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+describe('external media values', () => {
+    it('accepts only https addresses without credentials', () => {
+        expect(normalizeExternalUrl(' https://cdn.example.com/a.mp4 ')).toBe('https://cdn.example.com/a.mp4');
+        expect(normalizeExternalUrl('http://cdn.example.com/a.mp4')).toBeUndefined();
+        expect(normalizeExternalUrl('https://user:pw@cdn.example.com/a')).toBeUndefined();
+        expect(normalizeExternalUrl('javascript:alert(1)')).toBeUndefined();
+        expect(normalizeExternalUrl('not a url')).toBeUndefined();
+        expect(normalizeExternalUrl(`https://a.example/${'x'.repeat(2100)}`)).toBeUndefined();
+    });
+    it('reads the stored shape back and ignores the rest', () => {
+        const value = { external: true, url: 'https://a.example/x.png' };
+        expect(parseExternalMedia(value)).toEqual(value);
+        expect(parseExternalMedia({ external: false, url: 'https://a.example' })).toBeUndefined();
+        expect(parseExternalMedia(null)).toBeUndefined();
+    });
+});
+describe('the external source warning', () => {
+    let container;
+    let root;
+    beforeEach(() => {
+        container = document.createElement('div');
+        document.body.append(container);
+        root = createRoot(container);
+        Element.prototype.scrollIntoView ??= () => { };
+        Element.prototype.hasPointerCapture ??= () => false;
+        Element.prototype.setPointerCapture ??= () => { };
+        Element.prototype.releasePointerCapture ??= () => { };
+    });
+    afterEach(() => {
+        act(() => root.unmount());
+        document.body.innerHTML = '';
+    });
+    const render = (locale, node) => act(async () => root.render(_jsx(MessagesProvider, { locale: locale, children: node })));
+    const byText = (text) => [...document.querySelectorAll('button')].find((b) => b.textContent?.includes(text));
+    const type = (element, value) => act(async () => {
+        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set?.call(element, value);
+        element.dispatchEvent(new Event('input', { bubbles: true }));
+    });
+    const input = () => container.querySelector('input[type="url"]');
+    const mediaDef = p.media({ label: 'Image', accept: ['image'] });
+    it('stores an external media value only after "Potwierdzam i dodaję link"', async () => {
+        const onChange = vi.fn();
+        await render('pl', _jsx(MediaControl, { id: "i", def: mediaDef, label: "Obraz", describedBy: undefined, value: null, disabled: false, onChange: onChange }));
+        await type(input(), 'https://cdn.example.com/a.png');
+        await act(async () => byText('Dodaj link')?.click());
+        const dialog = document.querySelector('[role="alertdialog"]');
+        expect(dialog?.textContent).toContain('Zewnętrzne źródło');
+        expect(dialog?.textContent).toContain('biblioteki mediów');
+        expect(onChange).not.toHaveBeenCalled();
+        await act(async () => byText('Potwierdzam i dodaję link')?.click());
+        expect(onChange).toHaveBeenCalledWith({
+            external: true,
+            url: 'https://cdn.example.com/a.png',
+        });
+        expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+    });
+    it('stores nothing when the warning is cancelled', async () => {
+        const onChange = vi.fn();
+        await render('pl', _jsx(MediaControl, { id: "i", def: mediaDef, label: "Obraz", describedBy: undefined, value: null, disabled: false, onChange: onChange }));
+        await type(input(), 'https://cdn.example.com/a.png');
+        await act(async () => byText('Dodaj link')?.click());
+        await act(async () => byText('Anuluj')?.click());
+        expect(onChange).not.toHaveBeenCalled();
+        expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+    });
+    it('refuses an address that is not https without opening the warning', async () => {
+        const onChange = vi.fn();
+        await render('en', _jsx(MediaControl, { id: "i", def: mediaDef, label: "Image", describedBy: undefined, value: null, disabled: false, onChange: onChange }));
+        await type(input(), 'http://cdn.example.com/a.png');
+        await act(async () => byText('Add link')?.click());
+        expect(document.querySelector('[role="alertdialog"]')).toBeNull();
+        expect(container.textContent).toContain('starts with https://');
+        expect(onChange).not.toHaveBeenCalled();
+    });
+    it('shows a stored external value with its badge and removes it', async () => {
+        const onChange = vi.fn();
+        await render('en', _jsx(MediaControl, { id: "i", def: mediaDef, label: "Image", describedBy: undefined, value: { external: true, url: 'https://cdn.example.com/a.png' }, disabled: false, onChange: onChange }));
+        expect(container.textContent).toContain('External');
+        expect(container.textContent).toContain('https://cdn.example.com/a.png');
+        await act(async () => byText('Remove')?.click());
+        expect(onChange).toHaveBeenCalledWith(null);
+    });
+    it('asks for the same confirmation for a text address (the iframe url)', async () => {
+        const onChange = vi.fn();
+        await render('pl', _jsx(ExternalUrlControl, { id: "u", label: "Adres", describedBy: undefined, value: "", disabled: false, onChange: onChange }));
+        await type(input(), 'https://maps.example.com/embed');
+        await act(async () => byText('Dodaj link')?.click());
+        await act(async () => byText('Anuluj')?.click());
+        expect(onChange).not.toHaveBeenCalled();
+        await act(async () => byText('Dodaj link')?.click());
+        await act(async () => byText('Potwierdzam i dodaję link')?.click());
+        expect(onChange).toHaveBeenCalledWith('https://maps.example.com/embed');
+    });
+});

package/dist/panels/inspector/controls/index.d.ts

@@ -1,5 +1,6 @@
 export { BooleanControl } from './boolean.tsx';
 export { ListControl, moveItem, ObjectControl, renderControl } from './compound.tsx';
+export { ExternalLinkEntry, ExternalUrlControl } from './external-link.tsx';
 export { IconControl } from './icon.tsx';
 export { propLabel } from './label.ts';
 export { LinkControl } from './link.tsx';

package/dist/panels/inspector/controls/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/panels/inspector/controls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/panels/inspector/controls/index.js

@@ -1,5 +1,6 @@
 export { BooleanControl } from './boolean.js';
 export { ListControl, moveItem, ObjectControl, renderControl } from './compound.js';
+export { ExternalLinkEntry, ExternalUrlControl } from './external-link.js';
 export { IconControl } from './icon.js';
 export { propLabel } from './label.js';
 export { LinkControl } from './link.js';