@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/imageEditor/image-editor.css

@@ -193,6 +193,73 @@
 .squisq-image-editor-layers {
   border-bottom: 1px solid var(--squisq-image-editor-panel-border);
 }
+.squisq-image-editor-layers-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 32px;
+}
+.squisq-image-editor-layer-add {
+  position: relative;
+  display: inline-flex;
+}
+.squisq-image-editor-layer-add-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  color: inherit;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  font: inherit;
+}
+.squisq-image-editor-layer-add-button:hover,
+.squisq-image-editor-layer-add-button[aria-expanded='true'] {
+  background: var(--squisq-image-editor-control-bg);
+  border-color: var(--squisq-image-editor-control-border);
+}
+.squisq-image-editor-layer-add-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 20;
+  min-width: 150px;
+  padding: 4px;
+  background: var(--squisq-image-editor-panel-bg);
+  border: 1px solid var(--squisq-image-editor-panel-border);
+  border-radius: 5px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  text-transform: none;
+  letter-spacing: normal;
+}
+.squisq-image-editor-layer-add-menu-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 6px 8px;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-radius: 3px;
+  cursor: pointer;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+}
+.squisq-image-editor-layer-add-menu-item:hover,
+.squisq-image-editor-layer-add-menu-item:focus-visible {
+  background: var(--squisq-image-editor-control-bg);
+  outline: none;
+}
+.squisq-image-editor-layer-add-menu-item svg {
+  flex: 0 0 auto;
+  width: 14px;
+}
 .squisq-image-editor-layer-list {
   list-style: none;
   margin: 0;
@@ -239,6 +306,7 @@
   cursor: not-allowed;
 }
 .squisq-image-editor-layer-name {
+  min-width: 0;
   flex: 1 1 auto;
   text-align: left;
   background: transparent;
@@ -254,7 +322,14 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.squisq-image-editor-layer-name-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .squisq-image-editor-layer-kind {
+  flex: 0 0 auto;
   margin-left: auto;
   font-size: 10px;
   color: var(--squisq-image-editor-text-muted);

package/src/imageEditor/layers/SelectionHandles.tsx

@@ -35,7 +35,7 @@ export function SelectionHandles({ box, onHandlePointerDown }: Props) {
   ];
 
   return (
-    <g pointerEvents="none">
+    <g className="squisq-image-editor-selection-handles" pointerEvents="none">
       {/*
        * Outline: rendered as two stacked rectangles so the selection
        * stays visible over both light and dark imagery. The white

package/src/imageEditor/useImageEditor.ts

@@ -110,6 +110,7 @@ export function useImageEditor(options: UseImageEditorOptions): UseImageEditorRe
         const seeded = await seedFromSource(container, initialSrc);
         if (cancelled) return;
         await writeImageEditDoc(container, seeded, stateFilename);
+        if (cancelled) return;
         dispatch({ type: 'load', doc: seeded });
         setReady(true);
         // Capture an initial snapshot of the freshly-seeded state so the
@@ -131,27 +132,53 @@ export function useImageEditor(options: UseImageEditorOptions): UseImageEditorRe
   // ── Debounced persistence of state.json ────────────────────────────────
   const persistTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const docRef = useRef<ImageEditDoc | null>(null);
-  docRef.current = state?.doc ?? null;
+  const dirtyRef = useRef(false);
+  const revisionRef = useRef(0);
+  const previousDocRef = useRef<ImageEditDoc | null>(null);
+  const nextDoc = state?.doc ?? null;
+  if (nextDoc !== previousDocRef.current) {
+    previousDocRef.current = nextDoc;
+    revisionRef.current += 1;
+  }
+  docRef.current = nextDoc;
+  dirtyRef.current = state?.dirty ?? false;
+  const writeQueueRef = useRef<Promise<void>>(Promise.resolve());
+  const persistTargetRef = useRef({ container, stateFilename });
+  persistTargetRef.current = { container, stateFilename };
+
+  const enqueueWrite = useCallback(
+    (doc: ImageEditDoc, revision: number, markClean: boolean): Promise<void> => {
+      const write = writeQueueRef.current
+        .catch(() => undefined)
+        .then(() => writeImageEditDoc(container, doc, stateFilename));
+      writeQueueRef.current = write.catch(() => undefined);
+      return write.then(() => {
+        if (markClean && revision === revisionRef.current && docRef.current === doc) {
+          dispatch({ type: 'mark-clean' });
+        }
+      });
+    },
+    [container, stateFilename],
+  );
 
   useEffect(() => {
     if (!state?.dirty) return;
     if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
     persistTimerRef.current = setTimeout(() => {
-      const doc = docRef.current;
+      const doc = state.doc;
       if (!doc) return;
-      writeImageEditDoc(container, doc, stateFilename)
-        .then(() => dispatch({ type: 'mark-clean' }))
-        .catch((err: unknown) => {
-          console.warn(
-            '[squisq-editor] image-edit state persist failed:',
-            err instanceof Error ? err.message : err,
-          );
-        });
+      const revision = revisionRef.current;
+      enqueueWrite(doc, revision, true).catch((err: unknown) => {
+        console.warn(
+          '[squisq-editor] image-edit state persist failed:',
+          err instanceof Error ? err.message : err,
+        );
+      });
     }, persistDebounceMs);
     return () => {
       if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
     };
-  }, [state?.dirty, state?.doc, container, stateFilename, persistDebounceMs]);
+  }, [state?.dirty, state?.doc, persistDebounceMs, enqueueWrite]);
 
   const flush = useCallback(async () => {
     const doc = docRef.current;
@@ -160,9 +187,29 @@ export function useImageEditor(options: UseImageEditorOptions): UseImageEditorRe
       clearTimeout(persistTimerRef.current);
       persistTimerRef.current = null;
     }
-    await writeImageEditDoc(container, doc, stateFilename);
-    dispatch({ type: 'mark-clean' });
-  }, [container, stateFilename]);
+    await enqueueWrite(doc, revisionRef.current, true);
+  }, [enqueueWrite]);
+
+  // A quick modal close must not discard the final edit that is still inside
+  // the debounce window. Queue it behind any in-flight write on unmount.
+  useEffect(
+    () => () => {
+      if (persistTimerRef.current) clearTimeout(persistTimerRef.current);
+      const doc = docRef.current;
+      if (!dirtyRef.current || !doc) return;
+      const target = persistTargetRef.current;
+      const write = writeQueueRef.current
+        .catch(() => undefined)
+        .then(() => writeImageEditDoc(target.container, doc, target.stateFilename));
+      writeQueueRef.current = write.catch((err: unknown) => {
+        console.warn(
+          '[squisq-editor] image-edit final persist failed:',
+          err instanceof Error ? err.message : err,
+        );
+      });
+    },
+    [],
+  );
 
   // ── Versioning ─────────────────────────────────────────────────────────
   const versioning = useMemo(
@@ -204,17 +251,26 @@ export function useImageEditor(options: UseImageEditorOptions): UseImageEditorRe
 
   // ── Asset URL cache ────────────────────────────────────────────────────
   const urlCacheRef = useRef<Map<string, string>>(new Map());
+  const urlCacheGenerationRef = useRef(0);
 
   const resolveAssetUrl = useCallback(
     async (path: string): Promise<string> => {
       const cache = urlCacheRef.current;
+      const generation = urlCacheGenerationRef.current;
       const cached = cache.get(path);
       if (cached) return cached;
       const data = await container.readFile(path);
+      if (generation !== urlCacheGenerationRef.current) {
+        throw new Error('useImageEditor: asset resolution cancelled');
+      }
       if (!data) throw new Error(`useImageEditor: missing asset "${path}"`);
       const list = await container.listFiles(path);
       const mime = list.find((e) => e.path === path)?.mimeType ?? 'application/octet-stream';
       const url = URL.createObjectURL(new Blob([data], { type: mime }));
+      if (generation !== urlCacheGenerationRef.current) {
+        URL.revokeObjectURL(url);
+        throw new Error('useImageEditor: asset resolution cancelled');
+      }
       cache.set(path, url);
       return url;
     },
@@ -225,6 +281,7 @@ export function useImageEditor(options: UseImageEditorOptions): UseImageEditorRe
   useEffect(() => {
     const cache = urlCacheRef.current;
     return () => {
+      urlCacheGenerationRef.current += 1;
       for (const url of cache.values()) URL.revokeObjectURL(url);
       cache.clear();
     };

package/src/index.ts

@@ -45,6 +45,7 @@ export type {
   DocumentLinkProvider,
   ViewPreferences,
   ThemeInheritance,
+  BlockTagVisibility,
   LayoutMode,
 } from './EditorContext.js';
 
@@ -99,11 +100,12 @@ 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 { PICKER_CATEGORIES, ALL_PICKER_ENTRIES, searchPickerEntries } from './emojiData.js';
+export type { PickerEntry, PickerCategory } from './emojiData.js';
 export {
   PreviewSettingsProvider,
   PreviewToolbarControls,
+  PreviewModeMenu,
   PreviewModeSwitch,
   PreviewFormatSwitch,
   usePreviewSettings,
@@ -141,10 +143,10 @@ export {
   readHeadingLineTransition,
   setHeadingLineTransition,
   readBlockAttrsTransition,
-  setBlockAttrsTransition,
+  setHeadingAttrsTransition,
   EMPTY_TRANSITION,
 } from './headingTransition.js';
-export type { TransitionFields } from './headingTransition.js';
+export type { HeadingTransitionAttrs, TransitionFields } from './headingTransition.js';
 export {
   readBlockAttrsParams,
   readBlockAttrsValue,
@@ -189,12 +191,26 @@ export {
 export { useMonacoLoader } from './useMonacoLoader.js';
 export type { UseMonacoLoaderResult } from './useMonacoLoader.js';
 
+// Monaco language-service worker wiring — the host supplies the `?worker`
+// constructors, this owns the label→worker mapping. See monacoWorkers.ts.
+export { configureMonacoWorkers } from './monacoWorkers.js';
+export type { MonacoWorkerConstructor, MonacoWorkerConstructors } from './monacoWorkers.js';
+
 // Custom themes — provider stack (doc frontmatter + browser-local library)
-export { CustomThemeProvider, useCustomThemes, useDocCustomThemes } from './customThemes/index.js';
+export {
+  CustomThemeProvider,
+  useCustomThemes,
+  useDocCustomThemes,
+  ImportThemeSection,
+  draftPatchFromImportedTheme,
+} from './customThemes/index.js';
 export type {
   CustomThemeContextValue,
   CustomThemeProviderProps,
   DocCustomThemes,
+  ImportThemeSectionProps,
+  ImportedThemeResult,
+  ThemeSaveExtras,
 } from './customThemes/index.js';
 
 // Custom templates — provider stack (doc frontmatter + browser-local library)
@@ -218,24 +234,128 @@ export { buildPreviewDoc } from './buildPreviewDoc.js';
 // Tiptap extension: Heading with template annotation support
 export { HeadingWithTemplate } from './TemplateAnnotation.js';
 
-// Diagram editor — Tiptap extension that mounts a React-Flow canvas
-// below any `### Title {[diagram]}` heading and hides the section's
-// child headings (they're rendered as nodes in the canvas).
-export { DiagramExtension } from './diagram/DiagramExtension.js';
+// Diagram editor — ASCII fences are the authored diagram format. The
+// AsciiDiagramExtension turns code fences containing box-and-line art
+// into interactive canvases; edits re-render the art (the fence stays the
+// source of truth). Legacy `{[diagram]}` heading sections still RENDER in
+// preview/player via core, but heading-based canvas editing was removed
+// (BREAKING: DiagramExtension / DiagramWidget / useDiagramData / the
+// heading command helpers are gone).
 export { DiagramCanvas } from './diagram/DiagramCanvas.js';
 export type { DiagramCommand } from './diagram/DiagramCanvas.js';
-export { DiagramWidget } from './diagram/DiagramWidget.js';
-export { useDiagramData } from './diagram/useDiagramData.js';
-export type { DiagramData, DiagramRFNode, DiagramRFEdge } from './diagram/useDiagramData.js';
+export type { DiagramData, DiagramNode, DiagramEdge } from './diagram/types.js';
+export {
+  AsciiDiagramExtension,
+  findAsciiDiagramBlockPos,
+  isAsciiSourceVisible,
+  toggleAsciiSource,
+} from './asciiDiagram/AsciiDiagramExtension.js';
+export type {
+  AsciiDiagramBlockEntry,
+  AsciiDiagramExtensionOptions,
+  AsciiDiagramPluginState,
+} from './asciiDiagram/AsciiDiagramExtension.js';
+export { AsciiDiagramWidget } from './asciiDiagram/AsciiDiagramWidget.js';
+export { useAsciiDiagramData, asciiDiagramToCanvas } from './asciiDiagram/asciiDiagramData.js';
+export type { AsciiDiagramView } from './asciiDiagram/asciiDiagramData.js';
+export {
+  applyAsciiDiagramCommand,
+  applyRepairCommand,
+  replaceAsciiFenceText,
+} from './asciiDiagram/asciiDiagramCommands.js';
+// RepairableDiagramExtension mounts an inline "Repair as diagram" button on
+// code fences holding BROKEN box art — art too misaligned for clean detection
+// (so it renders as a faithful code block). One click reconstructs it into
+// clean `diagram`-tagged art that the AsciiDiagramExtension turns into a
+// canvas. Peer to the diagram/tree editors; claims the fences neither does.
+export {
+  RepairableDiagramExtension,
+  findRepairableBlockPos,
+  isRepairableFence,
+  REPAIRABLE_KEY,
+} from './asciiDiagram/RepairableDiagramExtension.js';
+export type {
+  RepairableBlockEntry,
+  RepairableDiagramExtensionOptions,
+  RepairablePluginState,
+} from './asciiDiagram/RepairableDiagramExtension.js';
+export {
+  addEdgeOp,
+  addNodeOp,
+  moveNodeOp,
+  removeEdgeOp,
+  removeNodeOp,
+  renameNodeOp,
+  resizeNodeOp,
+  sanitizeAsciiLabel,
+} from './asciiDiagram/asciiDiagramOps.js';
+export { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste.js';
+
+// Treeview editor — ASCII file-tree / outline fences get an interactive
+// outline widget; edits re-render the tree art (the fence stays the source
+// of truth). Peer to the ASCII diagram editor; mutually exclusive with it
+// (a fence with boxes is a diagram, not a tree).
+export { TreeViewExtension, findTreeBlockPos } from './treeview/TreeViewExtension.js';
+export type {
+  TreeBlockEntry,
+  TreeViewExtensionOptions,
+  TreeViewPluginState,
+} from './treeview/TreeViewExtension.js';
+export { TreeOutlineWidget } from './treeview/TreeOutlineWidget.js';
+export { useTreeViewData } from './treeview/treeViewData.js';
+export type { TreeViewData } from './treeview/treeViewData.js';
+export { applyTreeCommand, replaceTreeFenceText } from './treeview/treeViewCommands.js';
+export type { TreeCommand } from './treeview/treeViewCommands.js';
+export {
+  addItemOp,
+  indentItemOp,
+  moveItemDownOp,
+  moveItemUpOp,
+  outdentItemOp,
+  removeItemOp,
+  renameItemOp,
+  sanitizeTreeLabel,
+  toggleDirOp,
+} from './treeview/treeOps.js';
+export { shouldPasteAsTreeFence } from './treeview/treePaste.js';
+
+// Timeline editor — authored marker-rail fences become an accessible canvas
+// with add-point affordances and a selected-point inspector. Semantic edits
+// re-render the canonical `timeline` fence in one undoable transaction.
+export {
+  TimelineViewExtension,
+  TIMELINE_VIEW_KEY,
+  findTimelineBlockPos,
+  getTimelineForNode,
+  parseTimelineForNode,
+} from './timeline/TimelineViewExtension.js';
+export type {
+  TimelineBlockEntry,
+  TimelineViewExtensionOptions,
+  TimelineViewPluginState,
+} from './timeline/TimelineViewExtension.js';
+export { TimelineEditorWidget } from './timeline/TimelineEditorWidget.js';
+export type { TimelineEditorWidgetProps } from './timeline/TimelineEditorWidget.js';
+export { useTimelineData } from './timeline/timelineData.js';
+export type { TimelineViewData } from './timeline/timelineData.js';
 export {
-  moveNode,
-  addConnection,
-  removeConnection,
-  renameNode,
-  addNode,
-  removeNode,
-  listDiagramChildren,
-} from './diagram/diagramCommands.js';
+  applyTimelineCommand,
+  isTimelineSourceSafeForSemanticEdit,
+} from './timeline/timelineCommands.js';
+export type { TimelineCommand, TimelineCommandResult } from './timeline/timelineCommands.js';
+export {
+  addTimelineEventOp,
+  nextTimelineEventId,
+  removeTimelineEventOp,
+  sanitizeTimelineText,
+  updateTimelineEventOp,
+} from './timeline/timelineOps.js';
+export type {
+  AddTimelineEventOptions,
+  AddTimelineEventResult,
+  TimelineEventPatch,
+} from './timeline/timelineOps.js';
+export { shouldPasteAsTimelineFence } from './timeline/timelinePaste.js';
 
 // JSON Form — editable component
 export { JsonEditor } from './jsonEditor/index.js';
@@ -276,6 +396,59 @@ export type { CaptureKind, ResolvedFormat } from './recorder/formats.js';
 export { buildTimingJson, encodeTimingJson, timingPathFor } from './recorder/timingJson.js';
 export type { TimingJson, RecordedBookmark } from './recorder/timingJson.js';
 
+// Teleprompter — the Narrate display mode under the Use tab: voice-paced
+// prompter surface, floating-window tiers, and the mic analysis pipeline.
+export {
+  TeleprompterView,
+  TeleprompterSurface,
+  TeleprompterControls,
+  useTeleprompter,
+  useNarrationRecorder,
+  buildNarrationSavePlan,
+  executeNarrationSave,
+  insertNarrationPreamble,
+  narrationAnnotationLine,
+  cameraVideoLine,
+  vadConfigForSensitivity,
+  useMicAnalysis,
+  PCM_WORKLET_SOURCE,
+  PCM_WORKLET_NAME,
+  registerPcmWorklet,
+  createFloatingWindowManager,
+  detectFloatTiers,
+  useFloatingWindow,
+  measureTokenLines,
+  targetOffsetFor,
+  stepScroll,
+  EYE_LINE_FRACTION,
+  TELEPROMPTER_CSS,
+  ensureTeleprompterStyles,
+  prompterVarsFromTheme,
+  DEFAULT_TELEPROMPTER_PREFS,
+} from './teleprompter/index.js';
+export type {
+  TeleprompterViewProps,
+  TeleprompterSurfaceProps,
+  TeleprompterControlsProps,
+  TeleprompterController,
+  TeleprompterRecordingDeps,
+  NarrationRecorderController,
+  NarrationRecorderState,
+  NarrationTake,
+  NarrationSavePlan,
+  NarrationSaveResult,
+  MicAnalysisHandle,
+  MicAnalysisStatus,
+  FloatingWindowManager,
+  FloatOpenOptions,
+  CanvasSink,
+  FloatingWindowHandle,
+  TokenLineMap,
+  TeleprompterPrefs,
+  PrompterTransport,
+  FloatTier,
+} from './teleprompter/index.js';
+
 // Image editor — layered, sidecar-persisted raster authoring surface.
 // Pairs with `ImageViewer` and the `<basename>_files/` sidecar convention.
 export { ImageEditor } from './ImageEditor.js';

package/src/jsonEditor/JsonEditorContext.tsx

@@ -5,7 +5,7 @@
  * to the host's `onChange`.
  */
 
-import { createContext, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, useContext, useEffect, useMemo, type ReactNode } from 'react';
 import type {
   JsonFormValidationError,
   JsonFormValidator,
@@ -38,18 +38,24 @@ export interface JsonEditorProviderProps {
 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(() => {
-    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) {
+    for (const e of validationErrors) {
       const arr = grouped.get(e.path) ?? [];
       arr.push(e);
       grouped.set(e.path, arr);
     }
     return grouped;
-  }, [validate, rootData, rootSchema, onValidate]);
+  }, [validationErrors]);
+
+  useEffect(() => {
+    if (!onValidate) return;
+    onValidate(validationErrors);
+  }, [validationErrors, onValidate]);
 
   const setAtPath = useMemo(
     () => (pointer: string, value: unknown) => {

package/src/jsonEditor/RenderNode.tsx

@@ -11,6 +11,7 @@ import {
   resolveRef,
   type SquisqAnnotatedSchema,
 } from '@bendyline/squisq/jsonForm';
+import { useId } from 'react';
 import { useJsonEditor } from './JsonEditorContext';
 import { EDITORS, isCompositeControl } from './editors';
 
@@ -23,6 +24,7 @@ export interface RenderNodeProps {
 }
 
 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;
 
@@ -35,6 +37,11 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
   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
@@ -42,6 +49,10 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
       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}
@@ -55,11 +66,21 @@ export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
 
   return (
     <div className={`squisq-jf-field${disabled ? ' squisq-jf-field--disabled' : ''}`}>
-      {label ? <label className="squisq-jf-field__label">{label}</label> : null}
+      {label ? (
+        <label id={labelId} htmlFor={controlId} className="squisq-jf-field__label">
+          {label}
+        </label>
+      ) : null}
       {editorEl}
-      {help ? <p className="squisq-jf-field__help">{help}</p> : null}
+      {help ? (
+        <p id={helpId} className="squisq-jf-field__help">
+          {help}
+        </p>
+      ) : null}
       {fieldErrors.length > 0 ? (
-        <p className="squisq-jf-field__error">{fieldErrors[0].message}</p>
+        <p id={errorId} className="squisq-jf-field__error" role="alert">
+          {fieldErrors[0].message}
+        </p>
       ) : null}
     </div>
   );