@bendyline/squisq-editor-react 1.4.0 → 1.5.0

package/src/index.ts

@@ -33,6 +33,10 @@ export type {
   ImageDisplayMode,
   MentionCandidate,
   MentionProvider,
+  DocumentLinkCandidate,
+  DocumentLinkProvider,
+  ViewPreferences,
+  ThemeInheritance,
 } from './EditorContext.js';
 
 // File-kind detection — useful for hosts that want to pre-decide chrome
@@ -40,6 +44,11 @@ export type {
 export { resolveFileKind, detectLanguageFromFileName } from './fileKind.js';
 export type { FileKind } from './fileKind.js';
 
+// Image viewer — exported standalone so hosts can use it without the
+// full EditorShell when they already have their own chrome.
+export { ImageViewer } from './ImageViewer.js';
+export type { ImageViewerProps } from './ImageViewer.js';
+
 // Individual editors (for custom layouts)
 export { RawEditor } from './RawEditor.js';
 export type { RawEditorProps } from './RawEditor.js';
@@ -49,6 +58,16 @@ export type { WysiwygEditorProps } from './WysiwygEditor.js';
 
 export { PreviewPanel } from './PreviewPanel.js';
 export type { PreviewPanelProps } from './PreviewPanel.js';
+export { PlainHtmlPreview } from './PlainHtmlPreview.js';
+export type { PlainHtmlPreviewProps } from './PlainHtmlPreview.js';
+export { EmojiPicker } from './EmojiPicker.js';
+export type { EmojiPickerProps } from './EmojiPicker.js';
+export { DocumentSettingsDialog } from './DocumentSettingsDialog.js';
+export type { DocumentSettingsDialogProps } from './DocumentSettingsDialog.js';
+export { ThemePicker } from './ThemePicker.js';
+export type { ThemePickerProps } from './ThemePicker.js';
+export { EMOJI_CATEGORIES, ALL_EMOJIS, searchEmojis } from './emojiData.js';
+export type { EmojiEntry, EmojiCategory } from './emojiData.js';
 export {
   PreviewSettingsProvider,
   PreviewToolbarControls,
@@ -63,6 +82,16 @@ export type { ViewSwitcherProps } from './ViewSwitcher.js';
 export { Toolbar } from './Toolbar.js';
 export type { ToolbarProps } from './Toolbar.js';
 
+export { VersionHistoryPanel } from './VersionHistoryPanel.js';
+export { ViewMenuPanel } from './ViewMenuPanel.js';
+export { OutlinePanel } from './OutlinePanel.js';
+export type { OutlinePanelProps } from './OutlinePanel.js';
+export { ThemeCustomizerPanel } from './ThemeCustomizerPanel.js';
+export type { ThemeCustomizerPanelProps } from './ThemeCustomizerPanel.js';
+export { TemplatePicker, templateLabel } from './TemplatePicker.js';
+export { InlinePreviewGutter } from './InlinePreviewGutter.js';
+export type { InlinePreviewGutterProps } from './InlinePreviewGutter.js';
+
 export { MediaBin } from './MediaBin.js';
 export type { MediaBinProps } from './MediaBin.js';
 
@@ -99,3 +128,56 @@ export { buildPreviewDoc } from './buildPreviewDoc.js';
 
 // Tiptap extension: Heading with template annotation support
 export { HeadingWithTemplate } from './TemplateAnnotation.js';
+
+// JSON Form — editable component
+export { JsonEditor } from './jsonEditor/index.js';
+export type { JsonEditorProps } from './jsonEditor/index.js';
+
+// Recorder — browser-based audio/camera/screen capture. Components and
+// hooks for capturing media via `MediaRecorder` and persisting the
+// resulting blob into a `ContentContainer` through the host's
+// `MediaProvider`. Previously published as `@bendyline/squisq-recorder-react`;
+// folded into editor-react so it ships with the editor it's wired into.
+export { RecorderModal } from './recorder/RecorderModal.js';
+export type { RecorderModalProps, RecorderSaveResult } from './recorder/RecorderModal.js';
+export { RecorderButton } from './recorder/RecorderButton.js';
+export type { RecorderButtonProps } from './recorder/RecorderButton.js';
+export { RecorderPanel } from './recorder/RecorderPanel.js';
+export type { RecorderPanelProps } from './recorder/RecorderPanel.js';
+export { useMediaRecorder, getCaptureKind } from './recorder/hooks/useMediaRecorder.js';
+export type {
+  UseMediaRecorderOptions,
+  UseMediaRecorderResult,
+  RecorderSource,
+  RecorderState,
+} from './recorder/hooks/useMediaRecorder.js';
+export { useStreamPreview } from './recorder/hooks/useStreamPreview.js';
+export { requestMicStream } from './recorder/sources/micStream.js';
+export { requestCameraStream } from './recorder/sources/cameraStream.js';
+export type { CameraStreamOptions } from './recorder/sources/cameraStream.js';
+export { requestScreenStream } from './recorder/sources/screenStream.js';
+export type { ScreenStreamOptions, ScreenStreamHandle } from './recorder/sources/screenStream.js';
+export {
+  resolveFormat,
+  supportsMediaRecorder,
+  supportsUserMedia,
+  supportsDisplayMedia,
+  buildFilename,
+} from './recorder/formats.js';
+export type { CaptureKind, ResolvedFormat } from './recorder/formats.js';
+export { buildTimingJson, encodeTimingJson, timingPathFor } from './recorder/timingJson.js';
+export type { TimingJson, RecordedBookmark } from './recorder/timingJson.js';
+
+// Image editor — layered, sidecar-persisted raster authoring surface.
+// Pairs with `ImageViewer` and the `<basename>_files/` sidecar convention.
+export { ImageEditor } from './ImageEditor.js';
+export type { ImageEditorProps } from './ImageEditor.js';
+export { useImageEditor } from './imageEditor/useImageEditor.js';
+export type { UseImageEditorOptions, UseImageEditorReturn } from './imageEditor/useImageEditor.js';
+export { imageEditorReducer, initialImageEditorState } from './imageEditor/state.js';
+export type {
+  ImageEditorState,
+  ImageEditorAction,
+  ImageEditorTool,
+  CanvasRect,
+} from './imageEditor/state.js';

package/src/jsonEditor/EmbeddedRichTextField.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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

@@ -0,0 +1,81 @@
+/**
+ * <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

@@ -0,0 +1,75 @@
+/**
+ * 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, 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 errors = useMemo(() => {
+    if (!validate) return new Map<string, JsonFormValidationError[]>();
+    const list = validate(rootData, rootSchema);
+    if (onValidate) onValidate(list);
+    const grouped = new Map<string, JsonFormValidationError[]>();
+    for (const e of list) {
+      const arr = grouped.get(e.path) ?? [];
+      arr.push(e);
+      grouped.set(e.path, arr);
+    }
+    return grouped;
+  }, [validate, rootData, rootSchema, 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

@@ -0,0 +1,66 @@
+/**
+ * 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 { 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 { 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 editorEl = (
+    <Editor
+      value={props.value}
+      schema={resolved}
+      pointer={props.pointer}
+      disabled={disabled}
+      // 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 className="squisq-jf-field__label">{label}</label> : null}
+      {editorEl}
+      {help ? <p className="squisq-jf-field__help">{help}</p> : null}
+      {fieldErrors.length > 0 ? (
+        <p className="squisq-jf-field__error">{fieldErrors[0].message}</p>
+      ) : null}
+    </div>
+  );
+}