@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/src/jsonEditor/EmbeddedRichTextField.tsx

@@ -1,81 +0,0 @@
-/**
- * Standalone Tiptap-backed rich text field for use inside `<JsonEditor>`.
- * Doesn't share `EditorContext` with the document editor — value is a
- * controlled markdown string. Reuses `markdownToTiptap` /
- * `tiptapToMarkdown` so fidelity matches the WysiwygEditor.
- */
-
-import { useEffect, useRef } from 'react';
-import { useEditor, EditorContent } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import Table from '@tiptap/extension-table';
-import TableRow from '@tiptap/extension-table-row';
-import TableCell from '@tiptap/extension-table-cell';
-import TableHeader from '@tiptap/extension-table-header';
-import TaskList from '@tiptap/extension-task-list';
-import TaskItem from '@tiptap/extension-task-item';
-import Placeholder from '@tiptap/extension-placeholder';
-import { markdownToTiptap, tiptapToMarkdown } from '../tiptapBridge';
-
-export interface EmbeddedRichTextFieldProps {
-  value: string;
-  onChange: (next: string) => void;
-  readOnly?: boolean;
-  placeholder?: string;
-  className?: string;
-}
-
-export function EmbeddedRichTextField(props: EmbeddedRichTextFieldProps) {
-  const { value, onChange, readOnly = false, placeholder, className } = props;
-  const isExternalUpdate = useRef(false);
-  const lastValueRef = useRef(value);
-
-  const editor = useEditor({
-    editable: !readOnly,
-    extensions: [
-      StarterKit.configure({
-        codeBlock: { HTMLAttributes: { class: 'squisq-code-block' } },
-      }),
-      Table.configure({ resizable: false }),
-      TableRow,
-      TableCell,
-      TableHeader,
-      TaskList,
-      TaskItem.configure({ nested: true }),
-      Placeholder.configure({ placeholder: placeholder ?? '' }),
-    ],
-    content: markdownToTiptap(value),
-    onUpdate: ({ editor: ed }) => {
-      if (isExternalUpdate.current) return;
-      const html = ed.getHTML();
-      const md = tiptapToMarkdown(html);
-      lastValueRef.current = md;
-      onChange(md);
-    },
-    editorProps: {
-      attributes: {
-        class: 'squisq-jf-richtext-prose',
-      },
-    },
-  });
-
-  // Sync external value changes back into the editor (e.g., undo at the host level).
-  useEffect(() => {
-    if (!editor) return;
-    if (value === lastValueRef.current) return;
-    isExternalUpdate.current = true;
-    try {
-      editor.commands.setContent(markdownToTiptap(value), false);
-      lastValueRef.current = value;
-    } finally {
-      isExternalUpdate.current = false;
-    }
-  }, [editor, value]);
-
-  useEffect(() => {
-    if (editor) editor.setEditable(!readOnly);
-  }, [editor, readOnly]);
-
-  const cls = 'squisq-jf-richtext' + (className ? ` ${className}` : '');
-  return <EditorContent editor={editor} className={cls} />;
-}

package/src/jsonEditor/JsonEditor.tsx

@@ -1,81 +0,0 @@
-/**
- * <JsonEditor>
- *
- * Friendly, theme-aware editor for any JSON value bound to a Squisq-
- * annotated JSON Schema. Hides JSON syntax behind delightful controls:
- * arrays of objects become card stacks, arrays of primitives become
- * chip bins, color fields become swatches, and so on.
- *
- * Companion to `<JsonView>` from `@bendyline/squisq-react` — both share
- * the same `chooseControl()` dispatcher in core, so view and edit modes
- * always agree on what each field _is_.
- */
-
-import type {
-  JsonFormValidationError,
-  JsonFormValidator,
-  SquisqAnnotatedSchema,
-} from '@bendyline/squisq/jsonForm';
-import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
-import { JsonEditorProvider } from './JsonEditorContext';
-import { RenderNode } from './RenderNode';
-import { useJsonEditorTokens } from './useJsonEditorTokens';
-
-export interface JsonEditorProps {
-  /** Schema describing the value's shape (with optional `squisq` hints). */
-  schema: SquisqAnnotatedSchema;
-  /** Controlled value. */
-  value: unknown;
-  /** Called with the new root after each edit. Omit for read-only behavior. */
-  onChange?: (next: unknown) => void;
-  /** Optional theme. Defaults to `DEFAULT_THEME`. */
-  theme?: Theme;
-  /** Light/dark surface override; `'auto'` uses `prefers-color-scheme`. */
-  surface?: SurfaceScheme | 'auto';
-  /** Padding/gap density. Default: 'comfortable'. */
-  density?: 'comfortable' | 'compact';
-  /** Optional consumer-supplied validator (e.g. ajv-backed). */
-  validate?: JsonFormValidator;
-  /** Notified after validation runs. */
-  onValidate?: (errors: readonly JsonFormValidationError[]) => void;
-  /** Optional CSS class for the outer container. */
-  className?: string;
-}
-
-export function JsonEditor(props: JsonEditorProps) {
-  const {
-    schema,
-    value,
-    onChange,
-    theme,
-    surface,
-    density = 'comfortable',
-    validate,
-    onValidate,
-    className,
-  } = props;
-  const { style } = useJsonEditorTokens(theme, surface);
-
-  // No onChange → fully inert (still validates if a validator is supplied).
-  const handleChange = onChange ?? (() => {});
-
-  const cls =
-    'squisq-jsonform' +
-    (density === 'compact' ? ' squisq-jsonform--compact' : '') +
-    (className ? ` ${className}` : '');
-
-  return (
-    <div className={cls} style={style}>
-      <JsonEditorProvider
-        rootSchema={schema}
-        rootData={value}
-        onRootChange={handleChange}
-        density={density}
-        validate={validate}
-        onValidate={onValidate}
-      >
-        <RenderNode value={value} schema={schema} pointer="" parentDisabled={!onChange} />
-      </JsonEditorProvider>
-    </div>
-  );
-}

package/src/jsonEditor/JsonEditorContext.tsx

@@ -1,81 +0,0 @@
-/**
- * Shared state for `<JsonEditor>`. Each editor renderer reads its
- * slice via JSON Pointer and calls `setAtPath` to commit edits — the
- * top-level component owns the canonical value and propagates changes
- * to the host's `onChange`.
- */
-
-import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
-import type {
-  JsonFormValidationError,
-  JsonFormValidator,
-  SquisqAnnotatedSchema,
-} from '@bendyline/squisq/jsonForm';
-import { setByPointer } from '@bendyline/squisq/jsonForm';
-
-export interface JsonEditorContextValue {
-  rootSchema: SquisqAnnotatedSchema;
-  rootData: unknown;
-  /** Commit a new value at `pointer`, computing & emitting a new root. */
-  setAtPath: (pointer: string, value: unknown) => void;
-  density: 'comfortable' | 'compact';
-  errors: ReadonlyMap<string, JsonFormValidationError[]>;
-  /** Optional richtext editor component, supplied internally. */
-}
-
-const JsonEditorContext = createContext<JsonEditorContextValue | null>(null);
-
-export interface JsonEditorProviderProps {
-  rootSchema: SquisqAnnotatedSchema;
-  rootData: unknown;
-  onRootChange: (next: unknown) => void;
-  density: 'comfortable' | 'compact';
-  validate?: JsonFormValidator;
-  onValidate?: (errors: readonly JsonFormValidationError[]) => void;
-  children: ReactNode;
-}
-
-export function JsonEditorProvider(props: JsonEditorProviderProps) {
-  const { rootSchema, rootData, onRootChange, density, validate, onValidate, children } = props;
-
-  const validationErrors = useMemo(
-    () => (validate ? validate(rootData, rootSchema) : []),
-    [validate, rootData, rootSchema],
-  );
-  const errors = useMemo(() => {
-    const grouped = new Map<string, JsonFormValidationError[]>();
-    for (const e of validationErrors) {
-      const arr = grouped.get(e.path) ?? [];
-      arr.push(e);
-      grouped.set(e.path, arr);
-    }
-    return grouped;
-  }, [validationErrors]);
-
-  useEffect(() => {
-    if (!onValidate) return;
-    onValidate(validationErrors);
-  }, [validationErrors, onValidate]);
-
-  const setAtPath = useMemo(
-    () => (pointer: string, value: unknown) => {
-      const next = setByPointer(rootData, pointer, value);
-      onRootChange(next);
-    },
-    [rootData, onRootChange],
-  );
-
-  const value: JsonEditorContextValue = useMemo(
-    () => ({ rootSchema, rootData, setAtPath, density, errors }),
-    [rootSchema, rootData, setAtPath, density, errors],
-  );
-
-  return <JsonEditorContext.Provider value={value}>{children}</JsonEditorContext.Provider>;
-}
-
-// eslint-disable-next-line react-refresh/only-export-components
-export function useJsonEditor(): JsonEditorContextValue {
-  const ctx = useContext(JsonEditorContext);
-  if (!ctx) throw new Error('useJsonEditor must be used inside <JsonEditor>');
-  return ctx;
-}

package/src/jsonEditor/RenderNode.tsx

@@ -1,87 +0,0 @@
-/**
- * Recursive editor dispatcher: looks at a schema slice, evaluates
- * `hidden`/`disabled` rules, picks an editor component, and wraps it
- * with label + help + error chrome unless the editor is composite
- * (group / card-stack / tabs / richtext, which present their own).
- */
-
-import {
-  chooseControl,
-  resolveFlag,
-  resolveRef,
-  type SquisqAnnotatedSchema,
-} from '@bendyline/squisq/jsonForm';
-import { useId } from 'react';
-import { useJsonEditor } from './JsonEditorContext';
-import { EDITORS, isCompositeControl } from './editors';
-
-export interface RenderNodeProps {
-  value: unknown;
-  schema: SquisqAnnotatedSchema;
-  pointer: string;
-  parentDisabled?: boolean;
-  suppressTopGroupTitle?: boolean;
-}
-
-export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
-  const generatedId = useId().replace(/:/g, '');
-  const { rootSchema, rootData, errors } = useJsonEditor();
-  const resolved = resolveRef(props.schema, rootSchema) ?? props.schema;
-
-  if (resolveFlag(resolved.squisq?.hidden, rootData)) return null;
-
-  const disabled =
-    (props.parentDisabled ?? false) || resolveFlag(resolved.squisq?.disabled, rootData);
-  const kind = chooseControl(resolved);
-  const Editor = EDITORS[kind];
-  const label = resolved.squisq?.label ?? resolved.title;
-  const help = resolved.squisq?.help ?? resolved.description;
-  const fieldErrors = errors.get(props.pointer) ?? [];
-  const controlId = `squisq-json-control-${generatedId}`;
-  const labelId = label ? `${controlId}-label` : undefined;
-  const helpId = help ? `${controlId}-help` : undefined;
-  const errorId = fieldErrors.length > 0 ? `${controlId}-error` : undefined;
-  const describedBy = [helpId, errorId].filter(Boolean).join(' ') || undefined;
-
-  const editorEl = (
-    <Editor
-      value={props.value}
-      schema={resolved}
-      pointer={props.pointer}
-      disabled={disabled}
-      controlId={controlId}
-      labelledBy={labelId}
-      describedBy={describedBy}
-      invalid={fieldErrors.length > 0}
-      // GroupEditor honors this — other editors ignore the extra prop.
-      // @ts-expect-error optional renderer-specific prop
-      suppressTitle={props.suppressTopGroupTitle}
-    />
-  );
-
-  if (isCompositeControl(kind, resolved)) {
-    // Composite editors handle their own labeling.
-    return editorEl;
-  }
-
-  return (
-    <div className={`squisq-jf-field${disabled ? ' squisq-jf-field--disabled' : ''}`}>
-      {label ? (
-        <label id={labelId} htmlFor={controlId} className="squisq-jf-field__label">
-          {label}
-        </label>
-      ) : null}
-      {editorEl}
-      {help ? (
-        <p id={helpId} className="squisq-jf-field__help">
-          {help}
-        </p>
-      ) : null}
-      {fieldErrors.length > 0 ? (
-        <p id={errorId} className="squisq-jf-field__error" role="alert">
-          {fieldErrors[0].message}
-        </p>
-      ) : null}
-    </div>
-  );
-}