@byline/admin 4.1.0 → 4.2.0

package/dist/fields/array/array-field.js

@@ -175,14 +175,26 @@ const ArrayField = ({ field, defaultValue, path, disableSorting = false, collect
                 className: classnames('byline-field-array-stack', array_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsx("span", {
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            onClick: ()=>{
-                                handleAddItem();
-                            },
-                            "aria-label": t('fields.array.addItemAriaLabel'),
-                            children: /*#__PURE__*/ jsx(PlusIcon, {})
-                        })
+                    /*#__PURE__*/ jsxs("div", {
+                        className: classnames('byline-field-array-add-row', array_field_module["add-row"]),
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>{
+                                    handleAddItem();
+                                },
+                                "aria-label": t('fields.array.addItemAriaLabel'),
+                                children: /*#__PURE__*/ jsx(PlusIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                tabIndex: -1,
+                                onClick: ()=>{
+                                    handleAddItem();
+                                },
+                                className: classnames('byline-field-array-add-label', array_field_module["add-label"]),
+                                children: t('fields.array.addItem')
+                            })
+                        ]
                     })
                 ]
             })

package/dist/fields/array/array-field.module.js

@@ -6,6 +6,10 @@ const array_field_module = {
     "group-header": "group-header-KJxpIV",
     groupHeader: "group-header-KJxpIV",
     "group-fields": "group-fields-Bmi_hA",
-    groupFields: "group-fields-Bmi_hA"
+    groupFields: "group-fields-Bmi_hA",
+    "add-row": "add-row-bCHtVe",
+    addRow: "add-row-bCHtVe",
+    "add-label": "add-label-KdsV2D",
+    addLabel: "add-label-KdsV2D"
 };
 export default array_field_module;

package/dist/fields/array/array-field_module.css

@@ -30,3 +30,26 @@
   display: flex;
 }
 
+:is(.add-row-bCHtVe, .byline-field-array-add-row) {
+  color: var(--muted);
+  align-items: center;
+  gap: var(--spacing-8);
+  font-size: .9rem;
+  display: flex;
+}
+
+:is(.add-label-KdsV2D, .byline-field-array-add-label) {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color .12s;
+}
+
+:is(.add-row-bCHtVe:hover .add-label-KdsV2D, .byline-field-array-add-row:hover .byline-field-array-add-label) {
+  color: var(--text);
+}
+

package/dist/fields/blocks/blocks-field.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
+import { getClientConfig } from "@byline/core";
 import { useTranslation } from "@byline/i18n/react";
 import { Card, CloseIcon, DraggableSortable, IconButton, Modal, PlusIcon, moveItem } from "@byline/ui/react";
 import classnames from "classnames";
@@ -17,6 +18,11 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
     const availableBlocks = useMemo(()=>field.blocks ?? [], [
         field.blocks
     ]);
+    const blockAdminByType = useMemo(()=>{
+        const map = new Map();
+        for (const entry of getClientConfig().blockAdmin ?? [])map.set(entry.blockType, entry);
+        return map;
+    }, []);
     const [selectedBlockName, setSelectedBlockName] = useState(()=>availableBlocks[0]?.blockType ?? '');
     useEffect(()=>{
         if (null == selectedBlockName || !availableBlocks.some((b)=>b.blockType === selectedBlockName)) setSelectedBlockName(availableBlocks[0]?.blockType ?? '');
@@ -130,7 +136,8 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
             },
             defaultValue: fieldData,
             path: arrayElementPath,
-            contentLocale: contentLocale
+            contentLocale: contentLocale,
+            fieldAdmin: blockAdminByType.get(item._type)?.fields
         }, subField.blockType);
         return /*#__PURE__*/ jsx(SortableItem, {
             id: itemWrapper.id,
@@ -153,17 +160,31 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 className: classnames('byline-field-blocks-stack', blocks_field_module.stack),
                 children: [
                     items.map((item, index)=>renderItem(item, index)),
-                    /*#__PURE__*/ jsx("div", {
+                    /*#__PURE__*/ jsxs("div", {
                         className: classnames('byline-field-blocks-add-row', blocks_field_module["add-row"]),
-                        children: /*#__PURE__*/ jsx(IconButton, {
-                            onClick: ()=>{
-                                setPendingInsertIndex(null);
-                                setShowAddBlockModal(true);
-                            },
-                            disabled: !selectedBlockName,
-                            "aria-label": t('fields.blocks.addBlockAriaLabel'),
-                            children: /*#__PURE__*/ jsx(PlusIcon, {})
-                        })
+                        children: [
+                            /*#__PURE__*/ jsx(IconButton, {
+                                onClick: ()=>{
+                                    setPendingInsertIndex(null);
+                                    setShowAddBlockModal(true);
+                                },
+                                disabled: !selectedBlockName,
+                                "aria-label": t('fields.blocks.addBlockAriaLabel'),
+                                variant: "outlined",
+                                children: /*#__PURE__*/ jsx(PlusIcon, {})
+                            }),
+                            /*#__PURE__*/ jsx("button", {
+                                type: "button",
+                                tabIndex: -1,
+                                disabled: !selectedBlockName,
+                                onClick: ()=>{
+                                    setPendingInsertIndex(null);
+                                    setShowAddBlockModal(true);
+                                },
+                                className: classnames('byline-field-blocks-add-label', blocks_field_module["add-label"]),
+                                children: t('fields.blocks.addBlock')
+                            })
+                        ]
                     })
                 ]
             }),
@@ -176,7 +197,7 @@ const BlocksField = ({ field, defaultValue, path, contentLocale })=>{
                 },
                 children: /*#__PURE__*/ jsxs(Modal.Container, {
                     style: {
-                        maxWidth: '600px'
+                        maxWidth: '700px'
                     },
                     children: [
                         /*#__PURE__*/ jsxs(Modal.Header, {

package/dist/fields/blocks/blocks-field.module.js

@@ -4,6 +4,8 @@ const blocks_field_module = {
     stack: "stack-Xxa89J",
     "add-row": "add-row-gEqjM_",
     addRow: "add-row-gEqjM_",
+    "add-label": "add-label-jiOURu",
+    addLabel: "add-label-jiOURu",
     "modal-head": "modal-head-BTxR9C",
     modalHead: "modal-head-BTxR9C",
     "modal-title": "modal-title-jwOfU_",

package/dist/fields/blocks/blocks-field_module.css

@@ -11,11 +11,32 @@
 }
 
 :is(.add-row-gEqjM_, .byline-field-blocks-add-row) {
+  color: var(--muted);
   align-items: center;
   gap: var(--spacing-8);
+  font-size: .9rem;
   display: flex;
 }
 
+:is(.add-label-jiOURu, .byline-field-blocks-add-label) {
+  appearance: none;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color .12s;
+}
+
+:is(.add-label-jiOURu:disabled, .byline-field-blocks-add-label:disabled) {
+  cursor: default;
+}
+
+:is(.add-row-gEqjM_:hover .add-label-jiOURu:not(:disabled), .byline-field-blocks-add-row:hover .byline-field-blocks-add-label:not(:disabled)) {
+  color: var(--text);
+}
+
 :is(.modal-head-BTxR9C, .byline-field-blocks-modal-head) {
   margin-bottom: var(--spacing-8);
   padding-top: 1rem;
@@ -28,6 +49,22 @@
 
 :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
   cursor: pointer;
+  overscroll-behavior: contain;
+  min-height: 0;
+  max-height: 80dvh;
+  overflow-y: auto;
+}
+
+@media (min-width: 40rem) {
+  :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
+    max-height: 70dvh;
+  }
+}
+
+@media (min-width: 64rem) {
+  :is(.modal-content-S12b_T, .byline-field-blocks-card-cursor) {
+    max-height: 60dvh;
+  }
 }
 
 :is(.grid-gALL6j, .byline-field-blocks-grid) {

package/dist/fields/code/code-editor.d.ts

@@ -0,0 +1,20 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+export interface CodeEditorProps {
+    id?: string;
+    /** Initial document. External updates sync only while the editor is unfocused. */
+    value: string;
+    /** Highlight language (canonical name or alias). Unknown → plain text. */
+    language?: string;
+    readOnly?: boolean;
+    onChange?: (value: string) => void;
+    ariaInvalid?: boolean;
+    ariaDescribedBy?: string;
+}
+declare const CodeEditor: ({ id, value, language, readOnly, onChange, ariaInvalid, ariaDescribedBy, }: CodeEditorProps) => import("react").JSX.Element;
+export default CodeEditor;

package/dist/fields/code/code-editor.js

@@ -0,0 +1,239 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { defaultKeymap, history as commands_history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { HighlightStyle, bracketMatching, syntaxHighlighting } from "@codemirror/language";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap, lineNumbers } from "@codemirror/view";
+import { tags } from "@lezer/highlight";
+const LANGUAGE_LOADERS = {
+    javascript: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript()),
+    jsx: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                jsx: true
+            })),
+    typescript: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                typescript: true
+            })),
+    tsx: ()=>import("@codemirror/lang-javascript").then((m)=>m.javascript({
+                jsx: true,
+                typescript: true
+            })),
+    json: ()=>import("@codemirror/lang-json").then((m)=>m.json()),
+    html: ()=>import("@codemirror/lang-html").then((m)=>m.html()),
+    css: ()=>import("@codemirror/lang-css").then((m)=>m.css()),
+    markdown: ()=>import("@codemirror/lang-markdown").then((m)=>m.markdown()),
+    python: ()=>import("@codemirror/lang-python").then((m)=>m.python()),
+    sql: ()=>import("@codemirror/lang-sql").then((m)=>m.sql()),
+    yaml: ()=>import("@codemirror/lang-yaml").then((m)=>m.yaml())
+};
+const LANGUAGE_ALIASES = {
+    js: "javascript",
+    ts: "typescript",
+    md: 'markdown',
+    py: 'python',
+    yml: 'yaml'
+};
+const resolveLanguageLoader = (language)=>{
+    if (!language) return null;
+    const key = LANGUAGE_ALIASES[language] ?? language;
+    return LANGUAGE_LOADERS[key] ?? null;
+};
+const bylineCodeTheme = EditorView.theme({
+    '&': {
+        backgroundColor: 'var(--byline-code-bg)',
+        color: 'var(--byline-code-fg)',
+        fontSize: 'var(--byline-code-font-size, 13px)',
+        border: '1px solid var(--byline-code-border)',
+        borderRadius: 'var(--byline-code-radius, 4px)'
+    },
+    '&.cm-focused': {
+        outline: '2px solid var(--byline-code-focus-ring)',
+        outlineOffset: '-1px'
+    },
+    '.cm-content': {
+        fontFamily: 'var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)',
+        caretColor: 'var(--byline-code-caret)',
+        minHeight: 'var(--byline-code-min-height, 6rem)'
+    },
+    '.cm-scroller': {
+        fontFamily: 'inherit',
+        maxHeight: 'var(--byline-code-max-height, 32rem)'
+    },
+    '.cm-gutters': {
+        backgroundColor: 'var(--byline-code-gutter-bg)',
+        color: 'var(--byline-code-gutter-fg)',
+        border: 'none',
+        borderRight: '1px solid var(--byline-code-border)'
+    },
+    '.cm-activeLine': {
+        backgroundColor: 'var(--byline-code-active-line)'
+    },
+    '.cm-activeLineGutter': {
+        backgroundColor: 'var(--byline-code-active-line)'
+    },
+    '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+        backgroundColor: 'var(--byline-code-selection) !important'
+    },
+    '.cm-cursor': {
+        borderLeftColor: 'var(--byline-code-caret)'
+    }
+});
+const bylineHighlightStyle = HighlightStyle.define([
+    {
+        tag: tags.keyword,
+        color: 'var(--byline-code-keyword)'
+    },
+    {
+        tag: [
+            tags.string,
+            tags.special(tags.string)
+        ],
+        color: 'var(--byline-code-string)'
+    },
+    {
+        tag: tags.comment,
+        color: 'var(--byline-code-comment)',
+        fontStyle: 'italic'
+    },
+    {
+        tag: [
+            tags.number,
+            tags.bool,
+            tags["null"]
+        ],
+        color: 'var(--byline-code-number)'
+    },
+    {
+        tag: [
+            tags["function"](tags.variableName),
+            tags["function"](tags.propertyName)
+        ],
+        color: 'var(--byline-code-function)'
+    },
+    {
+        tag: [
+            tags.typeName,
+            tags.className,
+            tags.tagName
+        ],
+        color: 'var(--byline-code-type)'
+    },
+    {
+        tag: [
+            tags.propertyName,
+            tags.attributeName
+        ],
+        color: 'var(--byline-code-property)'
+    },
+    {
+        tag: [
+            tags.operator,
+            tags.definitionKeyword
+        ],
+        color: 'var(--byline-code-operator)'
+    }
+]);
+const CodeEditor = ({ id, value, language, readOnly, onChange, ariaInvalid, ariaDescribedBy })=>{
+    const containerRef = useRef(null);
+    const viewRef = useRef(null);
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const languageCompartment = useRef(new Compartment());
+    const readOnlyCompartment = useRef(new Compartment());
+    const ariaCompartment = useRef(new Compartment());
+    const initialValueRef = useRef(value);
+    useEffect(()=>{
+        if (null == containerRef.current) return;
+        const state = EditorState.create({
+            doc: initialValueRef.current,
+            extensions: [
+                lineNumbers(),
+                commands_history(),
+                bracketMatching(),
+                keymap.of([
+                    ...defaultKeymap,
+                    ...historyKeymap,
+                    indentWithTab
+                ]),
+                EditorView.lineWrapping,
+                bylineCodeTheme,
+                syntaxHighlighting(bylineHighlightStyle),
+                languageCompartment.current.of([]),
+                readOnlyCompartment.current.of([]),
+                ariaCompartment.current.of([]),
+                EditorView.updateListener.of((update)=>{
+                    if (update.docChanged) onChangeRef.current?.(update.state.doc.toString());
+                })
+            ]
+        });
+        const view = new EditorView({
+            state,
+            parent: containerRef.current
+        });
+        viewRef.current = view;
+        return ()=>{
+            view.destroy();
+            viewRef.current = null;
+        };
+    }, []);
+    useEffect(()=>{
+        const view = viewRef.current;
+        if (null == view || view.hasFocus) return;
+        const current = view.state.doc.toString();
+        if (current !== value) view.dispatch({
+            changes: {
+                from: 0,
+                to: current.length,
+                insert: value
+            }
+        });
+    }, [
+        value
+    ]);
+    useEffect(()=>{
+        let cancelled = false;
+        const view = viewRef.current;
+        if (null == view) return;
+        const loader = resolveLanguageLoader(language);
+        if (null == loader) return void view.dispatch({
+            effects: languageCompartment.current.reconfigure([])
+        });
+        loader().then((extension)=>{
+            if (!cancelled && null != viewRef.current) viewRef.current.dispatch({
+                effects: languageCompartment.current.reconfigure(extension)
+            });
+        }).catch(()=>{});
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        language
+    ]);
+    useEffect(()=>{
+        viewRef.current?.dispatch({
+            effects: readOnlyCompartment.current.reconfigure([
+                EditorState.readOnly.of(true === readOnly),
+                EditorView.editable.of(true !== readOnly)
+            ])
+        });
+    }, [
+        readOnly
+    ]);
+    useEffect(()=>{
+        const attributes = {};
+        if (ariaInvalid) attributes['aria-invalid'] = 'true';
+        if (ariaDescribedBy) attributes['aria-describedby'] = ariaDescribedBy;
+        viewRef.current?.dispatch({
+            effects: ariaCompartment.current.reconfigure(EditorView.contentAttributes.of(attributes))
+        });
+    }, [
+        ariaInvalid,
+        ariaDescribedBy
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ref: containerRef,
+        id: id,
+        className: "byline-code-editor"
+    });
+};
+const code_editor = CodeEditor;
+export default code_editor;

package/dist/fields/code/code-field.d.ts

@@ -0,0 +1,21 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import React from 'react';
+import type { FieldComponentSlots, CodeField as FieldType } from '@byline/core';
+export declare const CodeField: ({ field, value, defaultValue, onChange, id, path, locale, components, }: {
+    field: FieldType;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    id?: string;
+    path?: string;
+    /** When provided, renders a LocaleBadge next to the field label. */
+    locale?: string;
+    /** Optional UI component slot overrides from the admin config. */
+    components?: FieldComponentSlots;
+}) => React.JSX.Element;

package/dist/fields/code/code-field.js

@@ -0,0 +1,124 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { Suspense, useCallback } from "react";
+import { ErrorText, HelpText, Label } from "@byline/ui/react";
+import classnames from "classnames";
+import { useFieldError, useFieldValue } from "../../forms/form-context.js";
+import { LocaleBadge } from "../locale-badge.js";
+import code_field_module from "./code-field.module.js";
+const CodeEditor = /*#__PURE__*/ react.lazy(()=>import("./code-editor.js"));
+const siblingFieldPath = (fieldPath, siblingName)=>{
+    const lastDot = fieldPath.lastIndexOf('.');
+    return -1 === lastDot ? siblingName : `${fieldPath.slice(0, lastDot + 1)}${siblingName}`;
+};
+const CodeField = ({ field, value, defaultValue, onChange, id, path, locale, components })=>{
+    const fieldPath = path ?? field.name;
+    const fieldError = useFieldError(fieldPath);
+    const fieldValue = useFieldValue(fieldPath);
+    const incomingValue = value ?? fieldValue ?? defaultValue ?? '';
+    const htmlId = id ?? fieldPath;
+    const siblingPath = field.languageField ? siblingFieldPath(fieldPath, field.languageField) : fieldPath;
+    const siblingLanguage = useFieldValue(siblingPath);
+    const effectiveLanguage = (field.languageField ? siblingLanguage : void 0) || field.language;
+    const handleChange = useCallback((value)=>{
+        if (onChange) onChange(value);
+    }, [
+        onChange
+    ]);
+    const slots = components;
+    const CustomLabel = slots?.Label;
+    const CustomHelpText = slots?.HelpText;
+    const CustomField = slots?.Field;
+    const BeforeField = slots?.beforeField;
+    const AfterField = slots?.afterField;
+    const slotBaseProps = {
+        field: field,
+        path: fieldPath,
+        value: incomingValue,
+        error: fieldError,
+        id: htmlId
+    };
+    const showBadge = !!locale && !!field.label;
+    const hasCustomLabel = !!CustomLabel;
+    const labelRowClass = classnames('byline-field-code-label-row', code_field_module["label-row"]);
+    const renderLabel = ()=>{
+        if (hasCustomLabel) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(CustomLabel, {
+                    ...slotBaseProps,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                showBadge && /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        if (field.label) return /*#__PURE__*/ jsxs("div", {
+            className: labelRowClass,
+            children: [
+                /*#__PURE__*/ jsx(Label, {
+                    id: `${htmlId}-label`,
+                    htmlFor: htmlId,
+                    label: field.label,
+                    required: !field.optional
+                }),
+                showBadge && /*#__PURE__*/ jsx(LocaleBadge, {
+                    locale: locale
+                })
+            ]
+        });
+        return null;
+    };
+    const renderInput = ()=>{
+        if (CustomField) return /*#__PURE__*/ jsx(CustomField, {
+            ...slotBaseProps,
+            onChange: handleChange,
+            defaultValue: defaultValue,
+            placeholder: field.placeholder
+        });
+        return /*#__PURE__*/ jsx(Suspense, {
+            fallback: /*#__PURE__*/ jsx("textarea", {
+                className: classnames('byline-field-code-loading', code_field_module.loading),
+                readOnly: true,
+                value: incomingValue,
+                rows: 6,
+                "aria-label": field.label
+            }),
+            children: /*#__PURE__*/ jsx(CodeEditor, {
+                id: htmlId,
+                value: incomingValue,
+                language: effectiveLanguage,
+                onChange: handleChange,
+                readOnly: true === field.readOnly,
+                ariaInvalid: null != fieldError,
+                ariaDescribedBy: null != fieldError ? `error-for-${htmlId}` : field.helpText ? `help-for-${htmlId}` : void 0
+            })
+        });
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `byline-field-code ${field.name}`,
+        children: [
+            renderLabel(),
+            BeforeField && /*#__PURE__*/ jsx(BeforeField, {
+                ...slotBaseProps
+            }),
+            renderInput(),
+            AfterField && /*#__PURE__*/ jsx(AfterField, {
+                ...slotBaseProps
+            }),
+            null != fieldError && /*#__PURE__*/ jsx(ErrorText, {
+                id: `error-for-${htmlId}`,
+                text: fieldError
+            }),
+            CustomHelpText ? /*#__PURE__*/ jsx(CustomHelpText, {
+                ...slotBaseProps,
+                helpText: field.helpText
+            }) : null == fieldError && field.helpText && /*#__PURE__*/ jsx(HelpText, {
+                id: `help-for-${htmlId}`,
+                text: field.helpText
+            })
+        ]
+    });
+};
+export { CodeField };

package/dist/fields/code/code-field.module.js

@@ -0,0 +1,7 @@
+import "./code-field_module.css";
+const code_field_module = {
+    "label-row": "label-row-bNilI8",
+    labelRow: "label-row-bNilI8",
+    loading: "loading-sejBT6"
+};
+export default code_field_module;