npm - @byline/admin - Versions diffs - 4.1.0 → 4.3.0 - Mend

@byline/admin 4.1.0 → 4.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (58) hide show

package/dist/fields/array/array-field.d.ts +12 -2
package/dist/fields/array/array-field.js +46 -20
package/dist/fields/array/array-field.module.js +5 -1
package/dist/fields/array/array-field_module.css +23 -0
package/dist/fields/blocks/blocks-field.js +34 -12
package/dist/fields/blocks/blocks-field.module.js +2 -0
package/dist/fields/blocks/blocks-field_module.css +37 -0
package/dist/fields/code/code-editor.d.ts +20 -0
package/dist/fields/code/code-editor.js +239 -0
package/dist/fields/code/code-field.d.ts +21 -0
package/dist/fields/code/code-field.js +124 -0
package/dist/fields/code/code-field.module.js +7 -0
package/dist/fields/code/code-field_module.css +58 -0
package/dist/fields/draggable-context-menu.js +2 -1
package/dist/fields/field-admin.d.ts +15 -0
package/dist/fields/field-admin.js +11 -0
package/dist/fields/field-admin.test.node.d.ts +8 -0
package/dist/fields/field-helpers.js +1 -0
package/dist/fields/field-renderer.d.ts +11 -2
package/dist/fields/field-renderer.js +21 -4
package/dist/fields/group/group-field.d.ts +23 -2
package/dist/fields/group/group-field.js +7 -3
package/dist/fields/relation/relation-picker.js +8 -2
package/dist/fields/select/select-field.js +4 -2
package/dist/fields/select/select-field.module.js +1 -0
package/dist/fields/select/select-field_module.css +4 -0
package/dist/fields/sortable-item.d.ts +6 -0
package/dist/fields/sortable-item.js +44 -25
package/dist/fields/text/text-field_module.css +1 -0
package/dist/fields/text-area/text-area-field_module.css +1 -0
package/dist/forms/form-context.js +1 -1
package/dist/forms/form-renderer.d.ts +1 -1
package/dist/forms/form-renderer.js +3 -1
package/dist/forms/tree-placement-widget.d.ts +1 -1
package/package.json +23 -10
package/src/fields/array/array-field.module.css +30 -0
package/src/fields/array/array-field.tsx +74 -20
package/src/fields/blocks/blocks-field.module.css +53 -0
package/src/fields/blocks/blocks-field.tsx +38 -1
package/src/fields/code/code-editor.tsx +246 -0
package/src/fields/code/code-field.module.css +84 -0
package/src/fields/code/code-field.tsx +191 -0
package/src/fields/draggable-context-menu.tsx +9 -1
package/src/fields/field-admin.test.node.ts +49 -0
package/src/fields/field-admin.ts +39 -0
package/src/fields/field-helpers.ts +1 -0
package/src/fields/field-renderer.tsx +33 -2
package/src/fields/field-services-types.ts +1 -1
package/src/fields/group/group-field.tsx +29 -2
package/src/fields/relation/relation-picker.tsx +11 -0
package/src/fields/select/select-field.module.css +5 -0
package/src/fields/select/select-field.tsx +9 -2
package/src/fields/sortable-item.tsx +115 -34
package/src/fields/text/text-field.module.css +1 -0
package/src/fields/text-area/text-area-field.module.css +1 -0
package/src/forms/form-context.tsx +9 -1
package/src/forms/form-renderer.tsx +3 -1
package/src/forms/tree-placement-widget.tsx +1 -1

package/src/fields/code/code-editor.tsx ADDED Viewed

@@ -0,0 +1,246 @@
+/**
+ * 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 { useEffect, useRef } from 'react'
+import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands'
+import { bracketMatching, HighlightStyle, syntaxHighlighting } from '@codemirror/language'
+import type { Extension } from '@codemirror/state'
+import { Compartment, EditorState } from '@codemirror/state'
+import { EditorView, keymap, lineNumbers } from '@codemirror/view'
+import { tags } from '@lezer/highlight'
+// ---------------------------------------------------------------------------
+// CodeEditor — the CodeMirror 6 half of the `code` field widget.
+//
+// This module owns EVERY CodeMirror import and is loaded through
+// `React.lazy` from `code-field.tsx`, so none of it lands in the main admin
+// chunk — the consuming app's bundler splits it out and fetches it the first
+// time a code field actually renders. Keep it dependency-tight: anything
+// imported here ships in the lazy chunk.
+//
+// Theming: one theme + one highlight style, both defined entirely in terms
+// of `--byline-code-*` CSS custom properties (declared with light/dark
+// values in `code-field.module.css`). The admin theme contract is a
+// `.dark`/`.light` class on <html>, so the editor follows theme flips live
+// with zero JS involvement.
+// ---------------------------------------------------------------------------
+/**
+ * Per-language lazy loaders. Each grammar stays in its own chunk — adding a
+ * code field to a document only fetches the grammar it actually uses.
+ * Unknown languages resolve to `null` → plain text (no language extension).
+ */
+const LANGUAGE_LOADERS: Record<string, () => Promise<Extension>> = {
+  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()),
+}
+/** Common aliases → canonical loader keys. */
+const LANGUAGE_ALIASES: Record<string, string> = {
+  js: 'javascript',
+  ts: 'typescript',
+  md: 'markdown',
+  py: 'python',
+  yml: 'yaml',
+}
+const resolveLanguageLoader = (language: string | undefined): (() => Promise<Extension>) | null => {
+  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)' },
+])
+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
+}
+const CodeEditor = ({
+  id,
+  value,
+  language,
+  readOnly,
+  onChange,
+  ariaInvalid,
+  ariaDescribedBy,
+}: CodeEditorProps) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const viewRef = useRef<EditorView | null>(null)
+  // Keep the latest onChange without recreating the EditorView.
+  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)
+  // Create the view once per mount. The form store lives above the tab
+  // layout, so remounts (tab switches, conditional visibility) re-seed from
+  // the store-backed `value` — same contract the other widgets follow.
+  useEffect(() => {
+    if (containerRef.current == null) return
+    const state = EditorState.create({
+      doc: initialValueRef.current,
+      extensions: [
+        lineNumbers(),
+        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
+    }
+  }, [])
+  // External value sync — only while unfocused, so we never fight the
+  // editor's own keystrokes (our own onChange echoes back as an equal doc).
+  useEffect(() => {
+    const view = viewRef.current
+    if (view == null || view.hasFocus) return
+    const current = view.state.doc.toString()
+    if (current !== value) {
+      view.dispatch({ changes: { from: 0, to: current.length, insert: value } })
+    }
+  }, [value])
+  // Language switching through a compartment: each grammar loads lazily the
+  // first time it's requested and reconfigures in place (no view recreation).
+  useEffect(() => {
+    let cancelled = false
+    const view = viewRef.current
+    if (view == null) return
+    const loader = resolveLanguageLoader(language)
+    if (loader == null) {
+      view.dispatch({ effects: languageCompartment.current.reconfigure([]) })
+      return
+    }
+    loader()
+      .then((extension) => {
+        if (!cancelled && viewRef.current != null) {
+          viewRef.current.dispatch({
+            effects: languageCompartment.current.reconfigure(extension),
+          })
+        }
+      })
+      .catch(() => {
+        // Grammar chunk failed to load — degrade to plain text.
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [language])
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: readOnlyCompartment.current.reconfigure([
+        EditorState.readOnly.of(readOnly === true),
+        EditorView.editable.of(readOnly !== true),
+      ]),
+    })
+  }, [readOnly])
+  // ARIA lives on CodeMirror's own contenteditable (which already carries
+  // role="textbox"), not on the wrapper div.
+  useEffect(() => {
+    const attributes: Record<string, string> = {}
+    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 <div ref={containerRef} id={id} className="byline-code-editor" />
+}
+export default CodeEditor

package/src/fields/code/code-field.module.css ADDED Viewed

@@ -0,0 +1,84 @@
+/**
+ * CodeField — CodeMirror-backed source-code input.
+ *
+ * Override handles:
+ *   .byline-field-code            — the wrapper div (also carries the
+ *                                   --byline-code-* theme variables)
+ *   .byline-field-code-label-row  — the label + locale-badge row
+ *   .byline-field-code-loading    — the Suspense fallback textarea
+ *   .byline-code-editor           — the CodeMirror mount point
+ *
+ * Theming: the CodeMirror theme (see code-editor.tsx) is written entirely in
+ * terms of the --byline-code-* custom properties declared here, with dark
+ * values scoped under the admin's `.dark` root class — the editor follows
+ * theme flips live with zero JS. Consumers can re-skin the editor by
+ * overriding these variables on `.byline-field-code`.
+ */
+.label-row,
+:global(.byline-field-code-label-row) {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.25rem;
+}
+:global(.byline-field-code) {
+  /* Chrome */
+  --byline-code-bg: var(--canvas-50, #fafafa);
+  --byline-code-fg: var(--canvas-950, #1c1c1e);
+  --byline-code-border: var(--canvas-300, #d6d6d6);
+  --byline-code-gutter-bg: var(--canvas-100, #f2f2f2);
+  --byline-code-gutter-fg: var(--canvas-500, #8b8b90);
+  --byline-code-active-line: rgba(0, 0, 0, 0.04);
+  --byline-code-selection: rgba(59, 130, 246, 0.18);
+  --byline-code-caret: var(--canvas-950, #1c1c1e);
+  --byline-code-focus-ring: rgba(59, 130, 246, 0.6);
+  /* Syntax */
+  --byline-code-keyword: #7c3aed;
+  --byline-code-string: #15803d;
+  --byline-code-comment: #767680;
+  --byline-code-number: #c2410c;
+  --byline-code-function: #1d4ed8;
+  --byline-code-type: #0f766e;
+  --byline-code-property: #a16207;
+  --byline-code-operator: #52525b;
+}
+:is([data-theme="dark"], :global(.dark)) {
+  :global(.byline-field-code) {
+    /* Chrome */
+    --byline-code-bg: var(--canvas-900, #1b1b1f);
+    --byline-code-fg: var(--canvas-100, #e6e6ea);
+    --byline-code-border: var(--canvas-700, #3f3f46);
+    --byline-code-gutter-bg: var(--canvas-800, #232327);
+    --byline-code-gutter-fg: var(--canvas-500, #77777f);
+    --byline-code-active-line: rgba(255, 255, 255, 0.05);
+    --byline-code-selection: rgba(96, 165, 250, 0.28);
+    --byline-code-caret: var(--canvas-100, #e6e6ea);
+    --byline-code-focus-ring: rgba(96, 165, 250, 0.55);
+    /* Syntax */
+    --byline-code-keyword: #c4b5fd;
+    --byline-code-string: #86efac;
+    --byline-code-comment: #8e8e96;
+    --byline-code-number: #fdba74;
+    --byline-code-function: #93c5fd;
+    --byline-code-type: #5eead4;
+    --byline-code-property: #fde047;
+    --byline-code-operator: #a1a1aa;
+  }
+}
+.loading,
+:global(.byline-field-code-loading) {
+  width: 100%;
+  resize: none;
+  font-family: var(--byline-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: var(--byline-code-font-size, 13px);
+  color: var(--byline-code-fg);
+  background-color: var(--byline-code-bg);
+  border: 1px solid var(--byline-code-border);
+  border-radius: var(--byline-code-radius, 4px);
+  padding: 0.5rem;
+}

package/src/fields/code/code-field.tsx ADDED Viewed

@@ -0,0 +1,191 @@
+/**
+ * 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, { Suspense, useCallback } from 'react'
+import type { Field, FieldComponentSlots, CodeField as FieldType } from '@byline/core'
+import { ErrorText, HelpText, Label } from '@byline/ui/react'
+import cx from 'classnames'
+import { useFieldError, useFieldValue } from '../../forms/form-context'
+import { LocaleBadge } from '../locale-badge'
+import styles from './code-field.module.css'
+// The CodeMirror half of the widget. `React.lazy` is the bundle-splitting
+// boundary: `code-editor.tsx` owns every CodeMirror import, so the editor
+// (and its per-language grammars) stays out of the main admin chunk and is
+// fetched the first time a code field actually renders.
+const CodeEditor = React.lazy(() => import('./code-editor'))
+/**
+ * Resolve the form-store path of a sibling field (same group/block/array
+ * item scope). `content[0].code` + `language` → `content[0].language`;
+ * a top-level `code` + `language` → `language`.
+ */
+const siblingFieldPath = (fieldPath: string, siblingName: string): string => {
+  const lastDot = fieldPath.lastIndexOf('.')
+  return lastDot === -1 ? siblingName : `${fieldPath.slice(0, lastDot + 1)}${siblingName}`
+}
+export 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
+}) => {
+  const fieldPath = path ?? field.name
+  const fieldError = useFieldError(fieldPath)
+  const fieldValue = useFieldValue<string | undefined>(fieldPath)
+  const incomingValue = value ?? fieldValue ?? defaultValue ?? ''
+  const htmlId = id ?? fieldPath
+  // Effective highlight language: a sibling `languageField` selection (e.g.
+  // a `select` next to the code field) wins over the schema's static
+  // `language` hint. The hook subscribes to the sibling path, so switching
+  // the select re-highlights live. When no `languageField` is declared we
+  // subscribe to our own path — a stable no-op (hooks must run
+  // unconditionally).
+  const siblingPath = field.languageField
+    ? siblingFieldPath(fieldPath, field.languageField)
+    : fieldPath
+  const siblingLanguage = useFieldValue<string | undefined>(siblingPath)
+  const effectiveLanguage = (field.languageField ? siblingLanguage : undefined) || field.language
+  const handleChange = useCallback(
+    (value: string) => {
+      if (onChange) {
+        onChange(value)
+      }
+    },
+    [onChange]
+  )
+  // Custom component slots (from admin config)
+  const slots = components
+  const CustomLabel = slots?.Label
+  const CustomHelpText = slots?.HelpText
+  const CustomField = slots?.Field
+  const BeforeField = slots?.beforeField
+  const AfterField = slots?.afterField
+  // Shared props available to every slot component
+  const slotBaseProps = {
+    field: field as Field,
+    path: fieldPath,
+    value: incomingValue,
+    error: fieldError,
+    id: htmlId,
+  }
+  const showBadge = !!locale && !!field.label
+  const hasCustomLabel = !!CustomLabel
+  const labelRowClass = cx('byline-field-code-label-row', styles['label-row'])
+  // ── Label rendering ──────────────────────────────────────────
+  const renderLabel = () => {
+    if (hasCustomLabel) {
+      return (
+        <div className={labelRowClass}>
+          <CustomLabel {...slotBaseProps} label={field.label} required={!field.optional} />
+          {showBadge && <LocaleBadge locale={locale!} />}
+        </div>
+      )
+    }
+    if (field.label) {
+      return (
+        <div className={labelRowClass}>
+          <Label
+            id={`${htmlId}-label`}
+            htmlFor={htmlId}
+            label={field.label}
+            required={!field.optional}
+          />
+          {showBadge && <LocaleBadge locale={locale!} />}
+        </div>
+      )
+    }
+    return null
+  }
+  // ── Field input rendering ────────────────────────────────────
+  const renderInput = () => {
+    if (CustomField) {
+      return (
+        <CustomField
+          {...slotBaseProps}
+          onChange={handleChange}
+          defaultValue={defaultValue}
+          placeholder={field.placeholder}
+        />
+      )
+    }
+    return (
+      <Suspense
+        fallback={
+          // Read-only monospace textarea: keeps the layout stable and the
+          // content visible while the editor chunk loads.
+          <textarea
+            className={cx('byline-field-code-loading', styles.loading)}
+            readOnly
+            value={incomingValue}
+            rows={6}
+            aria-label={field.label}
+          />
+        }
+      >
+        <CodeEditor
+          id={htmlId}
+          value={incomingValue}
+          language={effectiveLanguage}
+          onChange={handleChange}
+          readOnly={field.readOnly === true}
+          ariaInvalid={fieldError != null}
+          ariaDescribedBy={
+            fieldError != null
+              ? `error-for-${htmlId}`
+              : field.helpText
+                ? `help-for-${htmlId}`
+                : undefined
+          }
+        />
+      </Suspense>
+    )
+  }
+  return (
+    <div className={`byline-field-code ${field.name}`}>
+      {renderLabel()}
+      {BeforeField && <BeforeField {...slotBaseProps} />}
+      {renderInput()}
+      {AfterField && <AfterField {...slotBaseProps} />}
+      {fieldError != null && <ErrorText id={`error-for-${htmlId}`} text={fieldError} />}
+      {CustomHelpText ? (
+        <CustomHelpText {...slotBaseProps} helpText={field.helpText} />
+      ) : (
+        fieldError == null &&
+        field.helpText && <HelpText id={`help-for-${htmlId}`} text={field.helpText} />
+      )}
+    </div>
+  )
+}

package/src/fields/draggable-context-menu.tsx CHANGED Viewed

@@ -37,7 +37,15 @@ export function DraggableContextMenu({
   return (
     <DropdownMenu.Root modal={false}>
-      <DropdownMenu.Trigger render={<IconButton variant="text" size="sm" />}>
+      <DropdownMenu.Trigger
+        render={
+          <IconButton
+            variant="text"
+            size="sm"
+            aria-label={t('fields.draggableMenu.triggerAriaLabel')}
+          />
+        }
+      >
         <EllipsisIcon width="16px" height="16px" />
       </DropdownMenu.Trigger>

package/src/fields/field-admin.test.node.ts ADDED Viewed

@@ -0,0 +1,49 @@
+/**
+ * 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 { describe, expect, it } from 'vitest'
+import { sliceFieldAdmin } from './field-admin.js'
+describe('sliceFieldAdmin', () => {
+  const answer = { editor: (() => null) as any }
+  const question = { components: {} }
+  it('returns undefined for an undefined map', () => {
+    expect(sliceFieldAdmin(undefined, 'faq')).toBeUndefined()
+  })
+  it('returns undefined when no entry addresses a descendant of the child', () => {
+    expect(sliceFieldAdmin({ faq: question, other: question }, 'faq')).toBeUndefined()
+  })
+  it('strips the child prefix from descendant keys', () => {
+    expect(sliceFieldAdmin({ 'faq.answer': answer, 'faq.question': question }, 'faq')).toEqual({
+      answer,
+      question,
+    })
+  })
+  it('keeps deeper paths dotted for the next level to slice', () => {
+    const map = { 'files.filesGroup.publicationFile': question }
+    const level1 = sliceFieldAdmin(map, 'files')
+    expect(level1).toEqual({ 'filesGroup.publicationFile': question })
+    expect(sliceFieldAdmin(level1, 'filesGroup')).toEqual({ publicationFile: question })
+  })
+  it('does not match on name prefixes that are not path segments', () => {
+    // 'faqExtra.answer' must not be sliced by child 'faq'.
+    expect(sliceFieldAdmin({ 'faqExtra.answer': answer }, 'faq')).toBeUndefined()
+  })
+  it('excludes the child’s own exact-name entry from the slice', () => {
+    expect(sliceFieldAdmin({ faq: question, 'faq.answer': answer }, 'faq')).toEqual({
+      answer,
+    })
+  })
+})

package/src/fields/field-admin.ts ADDED Viewed

@@ -0,0 +1,39 @@
+/**
+ * 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 type { FieldAdminConfig } from '@byline/core'
+// ---------------------------------------------------------------------------
+// Field admin map slicing — `fields{}` override maps (CollectionAdminConfig /
+// BlockAdminConfig) are keyed by dotted, index-free schema paths relative to
+// the map's root ('title', 'faq.answer'). Structural widgets thread the map
+// down one level at a time: a child field takes its own entry by exact name,
+// and receives the descendant entries re-keyed relative to itself.
+// ---------------------------------------------------------------------------
+/**
+ * Entries of `map` addressing descendants of `childName`, re-keyed with the
+ * `childName.` prefix stripped — the sub-map a structural child (group /
+ * array) threads to its own children. Returns `undefined` when `map` has no
+ * descendant entries for the child, so leaf widgets aren't handed empty maps.
+ */
+export function sliceFieldAdmin(
+  map: Record<string, FieldAdminConfig> | undefined,
+  childName: string
+): Record<string, FieldAdminConfig> | undefined {
+  if (map == null) return undefined
+  const prefix = `${childName}.`
+  let sliced: Record<string, FieldAdminConfig> | undefined
+  for (const [key, value] of Object.entries(map)) {
+    if (key.startsWith(prefix)) {
+      sliced ??= {}
+      sliced[key.slice(prefix.length)] = value
+    }
+  }
+  return sliced
+}

package/src/fields/field-helpers.ts CHANGED Viewed

@@ -30,6 +30,7 @@ export const placeholderForField = (f: Field): any => {
   switch (f.type) {
     case 'text':
     case 'textArea':
+    case 'code':
       return ''
     case 'checkbox':
       return false