@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/jsonEditor/editors.tsx

@@ -8,6 +8,7 @@
 
 import { useEffect, useId, useRef, useState, type ChangeEvent } from 'react';
 import {
+  appendPointer,
   arrayItemKind,
   type ControlKind,
   type SquisqAnnotatedSchema,
@@ -21,6 +22,19 @@ export interface EditorProps {
   schema: SquisqAnnotatedSchema;
   pointer: string;
   disabled: boolean;
+  controlId?: string;
+  labelledBy?: string;
+  describedBy?: string;
+  invalid?: boolean;
+}
+
+function accessibilityProps(props: EditorProps) {
+  return {
+    id: props.controlId,
+    'aria-labelledby': props.labelledBy,
+    'aria-describedby': props.describedBy,
+    'aria-invalid': props.invalid || undefined,
+  };
 }
 
 // ── Helpers ───────────────────────────────────────────────────────
@@ -38,10 +52,12 @@ function asNumber(v: unknown): number | '' {
 
 // ── Primitive editors ────────────────────────────────────────────
 
-export function TextEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function TextEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   return (
     <input
+      {...accessibilityProps(props)}
       type="text"
       className="squisq-jf-input"
       value={asString(value)}
@@ -52,7 +68,8 @@ export function TextEditor({ value, schema, pointer, disabled }: EditorProps) {
   );
 }
 
-export function MultilineEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function MultilineEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const ref = useRef<HTMLTextAreaElement>(null);
   // Auto-grow vertically.
@@ -64,6 +81,7 @@ export function MultilineEditor({ value, schema, pointer, disabled }: EditorProp
   }, [value]);
   return (
     <textarea
+      {...accessibilityProps(props)}
       ref={ref}
       className="squisq-jf-textarea"
       value={asString(value)}
@@ -86,7 +104,8 @@ export function RichTextEditor({ value, schema, pointer, disabled }: EditorProps
   );
 }
 
-export function NumberStepperEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function NumberStepperEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const isInt = schema.type === 'integer';
   const step = schema.squisq?.step ?? schema.multipleOf ?? (isInt ? 1 : 0.1);
@@ -111,6 +130,7 @@ export function NumberStepperEditor({ value, schema, pointer, disabled }: Editor
         −
       </button>
       <input
+        {...accessibilityProps(props)}
         className="squisq-jf-stepper__input"
         type="number"
         value={num === '' ? '' : num}
@@ -138,7 +158,8 @@ export function NumberStepperEditor({ value, schema, pointer, disabled }: Editor
   );
 }
 
-export function SliderEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function SliderEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const min = (schema.minimum ?? schema.exclusiveMinimum ?? 0) as number;
   const max = (schema.maximum ?? schema.exclusiveMaximum ?? 100) as number;
@@ -148,6 +169,7 @@ export function SliderEditor({ value, schema, pointer, disabled }: EditorProps)
   return (
     <span className="squisq-jf-slider-row">
       <input
+        {...accessibilityProps(props)}
         type="range"
         className="squisq-jf-slider"
         min={min}
@@ -162,11 +184,13 @@ export function SliderEditor({ value, schema, pointer, disabled }: EditorProps)
   );
 }
 
-export function ToggleEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function ToggleEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const on = Boolean(value);
   return (
     <button
+      {...accessibilityProps(props)}
       type="button"
       className={`squisq-jf-toggle${on ? ' squisq-jf-toggle--on' : ''}`}
       disabled={disabled}
@@ -189,12 +213,17 @@ export function ToggleEditor({ value, schema, pointer, disabled }: EditorProps)
   );
 }
 
-export function CheckboxEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function CheckboxEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
-  const id = useId();
+  const generatedId = useId();
+  const id = props.controlId ?? generatedId;
   return (
     <label htmlFor={id} className="squisq-jf-toggle">
       <input
+        aria-labelledby={props.labelledBy}
+        aria-describedby={props.describedBy}
+        aria-invalid={props.invalid || undefined}
         id={id}
         type="checkbox"
         checked={Boolean(value)}
@@ -214,11 +243,12 @@ function enumOptions(schema: SquisqAnnotatedSchema): { value: unknown; label: st
   }));
 }
 
-export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function SegmentedEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   return (
-    <span className="squisq-jf-segmented">
+    <span {...accessibilityProps(props)} className="squisq-jf-segmented" role="group">
       {options.map((opt, i) => {
         const active = value === opt.value;
         return (
@@ -228,6 +258,7 @@ export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProp
             className={`squisq-jf-segmented__btn${active ? ' squisq-jf-segmented__btn--active' : ''}`}
             disabled={disabled}
             onClick={() => setAtPath(pointer, opt.value)}
+            aria-pressed={active}
           >
             {opt.label}
           </button>
@@ -237,12 +268,13 @@ export function SegmentedEditor({ value, schema, pointer, disabled }: EditorProp
   );
 }
 
-export function RadioEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function RadioEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   const name = useId();
   return (
-    <div className="squisq-jf-radio">
+    <div {...accessibilityProps(props)} className="squisq-jf-radio" role="radiogroup">
       {options.map((opt, i) => {
         const active = value === opt.value;
         return (
@@ -262,11 +294,13 @@ export function RadioEditor({ value, schema, pointer, disabled }: EditorProps) {
   );
 }
 
-export function ComboboxEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function ComboboxEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const options = enumOptions(schema);
   return (
     <select
+      {...accessibilityProps(props)}
       className="squisq-jf-select"
       value={asString(value)}
       disabled={disabled}
@@ -285,12 +319,14 @@ export function ComboboxEditor({ value, schema, pointer, disabled }: EditorProps
   );
 }
 
-export function ColorEditor({ value, pointer, disabled }: EditorProps) {
+export function ColorEditor(props: EditorProps) {
+  const { value, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const hex = typeof value === 'string' && /^#[0-9a-f]{6}$/i.test(value) ? value : '#000000';
   return (
     <span className="squisq-jf-color">
       <input
+        {...accessibilityProps(props)}
         type="color"
         className="squisq-jf-color__input"
         value={hex}
@@ -308,7 +344,8 @@ export function ColorEditor({ value, pointer, disabled }: EditorProps) {
   );
 }
 
-export function DateEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function DateEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
   const fmt = schema.format;
   const inputType = fmt === 'time' ? 'time' : fmt === 'date' ? 'date' : 'datetime-local';
@@ -321,6 +358,7 @@ export function DateEditor({ value, schema, pointer, disabled }: EditorProps) {
       : asString(value);
   return (
     <input
+      {...accessibilityProps(props)}
       type={inputType}
       className="squisq-jf-input"
       value={display}
@@ -348,7 +386,7 @@ export function GroupEditor(props: EditorProps & { suppressTitle?: boolean }) {
           key={key}
           value={obj[key]}
           schema={propSchema}
-          pointer={`${pointer}/${key}`}
+          pointer={appendPointer(pointer, key)}
           parentDisabled={disabled}
         />
       ))}
@@ -581,7 +619,9 @@ function defaultForSchema(schema: SquisqAnnotatedSchema): unknown {
   }
 }
 
-export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
+export function TabsEditor(props: EditorProps) {
+  const { value, schema, pointer, disabled } = props;
+  const tabsId = useId().replace(/:/g, '');
   const branches = (schema.oneOf ?? schema.anyOf ?? []) as readonly SquisqAnnotatedSchema[];
   const initial = pickMatchingBranch(branches, value);
   const [active, setActive] = useState(initial);
@@ -593,9 +633,14 @@ export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
 
   const branch = branches[active];
   if (!branch) return null;
+  const activateTab = (index: number) => {
+    const next = (index + branches.length) % branches.length;
+    setActive(next);
+    requestAnimationFrame(() => document.getElementById(`${tabsId}-tab-${next}`)?.focus());
+  };
   return (
-    <div>
-      <div className="squisq-jf-tabs__strip">
+    <div {...accessibilityProps(props)}>
+      <div className="squisq-jf-tabs__strip" role="tablist">
         {branches.map((b, i) => (
           <button
             key={i}
@@ -603,12 +648,34 @@ export function TabsEditor({ value, schema, pointer, disabled }: EditorProps) {
             className={`squisq-jf-tabs__tab${i === active ? ' squisq-jf-tabs__tab--active' : ''}`}
             disabled={disabled}
             onClick={() => setActive(i)}
+            onKeyDown={(event) => {
+              if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
+                event.preventDefault();
+                activateTab(i + 1);
+              } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
+                event.preventDefault();
+                activateTab(i - 1);
+              } else if (event.key === 'Home') {
+                event.preventDefault();
+                activateTab(0);
+              } else if (event.key === 'End') {
+                event.preventDefault();
+                activateTab(branches.length - 1);
+              }
+            }}
+            role="tab"
+            id={`${tabsId}-tab-${i}`}
+            aria-selected={i === active}
+            aria-controls={`${tabsId}-panel`}
+            tabIndex={i === active ? 0 : -1}
           >
             {b.squisq?.label ?? b.title ?? `Option ${i + 1}`}
           </button>
         ))}
       </div>
-      <RenderNode value={value} schema={branch} pointer={pointer} parentDisabled={disabled} />
+      <div id={`${tabsId}-panel`} role="tabpanel" aria-labelledby={`${tabsId}-tab-${active}`}>
+        <RenderNode value={value} schema={branch} pointer={pointer} parentDisabled={disabled} />
+      </div>
     </div>
   );
 }

package/src/mediaEntries.ts

@@ -0,0 +1,12 @@
+import type { MediaEntry } from '@bendyline/squisq/schemas';
+
+/** Files managed by the container but intentionally omitted from the Files panel. */
+export function isVisibleMediaEntry(entry: MediaEntry): boolean {
+  const basename = entry.name.slice(entry.name.lastIndexOf('/') + 1);
+  return basename.toLowerCase() !== '.gitignore';
+}
+
+/** Return the entries that should participate in the Files panel and its count. */
+export function filterVisibleMediaEntries(entries: readonly MediaEntry[]): MediaEntry[] {
+  return entries.filter(isVisibleMediaEntry);
+}

package/src/monaco.ts

@@ -0,0 +1,35 @@
+/**
+ * Canonical Monaco entry for squisq — and for apps downstream of it.
+ *
+ * Anything that needs Monaco (squisq's own RawEditor via {@link useMonacoLoader},
+ * or a downstream app that wants its own editor) should get it from *here*
+ * rather than importing `monaco-editor` directly. That guarantees a single
+ * shared instance — one language / theme / completion-provider registry — and
+ * gives squisq one place to decide which slice of Monaco ships. Downstream
+ * hosts therefore need no bundler aliasing or hand-rolled "slim" Monaco entry
+ * (getting that recipe wrong silently breaks features like the suggest widget).
+ *
+ * This is the FULL editor. `editor.main.js` pulls in:
+ *   - every editor-feature contribution — the suggest-widget controller
+ *     (completion popups), hover, folding, find, parameter hints, bracket
+ *     matching, …
+ *   - TM grammars for ~70 languages (syntax highlighting in fenced code), and
+ *   - the rich css / html / json / typescript language *services*.
+ *
+ * `editor.main.js` has no sibling `.d.ts` (only `editor.api.d.ts` is
+ * published), so we take the types from `editor.api`: the side-effect import
+ * registers all the contributions, and the re-export exposes the — now
+ * augmented — API surface. Both reference the same underlying singleton.
+ *
+ * NOTE: the language *services* (css/html/json/typescript) need Monaco web
+ * workers wired via `globalThis.MonacoEnvironment`. Without that host-side
+ * setup their in-editor IntelliSense stays dormant — but highlighting,
+ * editing, and custom completion providers (e.g. the `{[template]}` typeahead)
+ * all run on the main thread and work with no worker configuration.
+ */
+
+// Side-effect: register the full editor + all language contributions.
+import 'monaco-editor/esm/vs/editor/editor.main.js';
+
+// Typed API surface (the only barrel Monaco publishes declarations for).
+export * from 'monaco-editor/esm/vs/editor/editor.api';

package/src/monacoWorkers.ts

@@ -0,0 +1,89 @@
+/**
+ * Monaco language-service worker wiring.
+ *
+ * Monaco offloads its heavy language services — css / html / json / typescript
+ * IntelliSense — plus a base editor service (word-based completions, link
+ * detection, diffing) to web workers. Those worker bundles must be produced by
+ * the HOST application's bundler: the mechanisms for it (Vite's `?worker`
+ * import suffix, `new Worker(new URL(...))`, webpack loaders) are all
+ * bundler-specific and cannot live inside this tsup-built library.
+ *
+ * So the division of labor is: the host supplies the five worker constructors
+ * (one line each with Vite's `?worker`), and this helper owns the
+ * `label → worker` mapping — the part that's fiddly and easy to get wrong.
+ *
+ * Call once, before the first editor mounts (typically in the app entry):
+ *
+ * ```ts
+ * import { configureMonacoWorkers } from '@bendyline/squisq-editor-react';
+ * import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+ * import JsonWorker   from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+ * import CssWorker    from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+ * import HtmlWorker   from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+ * import TsWorker     from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+ *
+ * configureMonacoWorkers({
+ *   editor: EditorWorker, json: JsonWorker, css: CssWorker,
+ *   html: HtmlWorker, ts: TsWorker,
+ * });
+ * ```
+ *
+ * This is purely additive: without it, highlighting, editing, and custom
+ * completion providers (e.g. the `{[template]}` typeahead) still work — they
+ * run on the main thread. Only the language-service IntelliSense is dormant
+ * until the workers are wired.
+ */
+
+/** Zero-arg worker constructor, as produced by Vite's `?worker` import. */
+export type MonacoWorkerConstructor = new () => Worker;
+
+export interface MonacoWorkerConstructors {
+  /** Base editor worker (word completions, links, diff). Required. */
+  editor: MonacoWorkerConstructor;
+  /** JSON language service. */
+  json?: MonacoWorkerConstructor;
+  /** CSS/SCSS/LESS language service. */
+  css?: MonacoWorkerConstructor;
+  /** HTML/Handlebars/Razor language service. */
+  html?: MonacoWorkerConstructor;
+  /** TypeScript service — also handles JavaScript. */
+  ts?: MonacoWorkerConstructor;
+}
+
+type MonacoEnvironmentHost = typeof globalThis & {
+  MonacoEnvironment?: { getWorker(workerId: string, label: string): Worker };
+};
+
+/**
+ * Install `globalThis.MonacoEnvironment.getWorker` so Monaco routes each
+ * language to the matching worker, falling back to the base editor worker for
+ * any label without a dedicated service (which is every plain language — its
+ * grammar-based highlighting needs no worker).
+ */
+export function configureMonacoWorkers(workers: MonacoWorkerConstructors): void {
+  const host = globalThis as MonacoEnvironmentHost;
+  host.MonacoEnvironment = {
+    getWorker(_workerId: string, label: string): Worker {
+      switch (label) {
+        case 'json':
+          if (workers.json) return new workers.json();
+          break;
+        case 'css':
+        case 'scss':
+        case 'less':
+          if (workers.css) return new workers.css();
+          break;
+        case 'html':
+        case 'handlebars':
+        case 'razor':
+          if (workers.html) return new workers.html();
+          break;
+        case 'typescript':
+        case 'javascript':
+          if (workers.ts) return new workers.ts();
+          break;
+      }
+      return new workers.editor();
+    },
+  };
+}

package/src/outlineSource.ts

@@ -0,0 +1,171 @@
+/**
+ * Source-preserving section moves for the document outline.
+ *
+ * Markdown headings form a flat AST, so a section extends from its heading
+ * through the next heading of equal or shallower depth. Reordering only direct
+ * siblings keeps heading levels and hierarchy intact; promote/demote remains a
+ * separate outline operation.
+ */
+
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+
+export type OutlineDropPlacement = 'before' | 'after';
+
+interface SourceHeading {
+  line: number;
+  depth: number;
+  parentLine: number | null;
+  start: number;
+  end: number;
+}
+
+interface SectionSlot extends SourceHeading {
+  content: string;
+  gap: string;
+}
+
+/**
+ * Move one heading-rooted section before or after a sibling section.
+ *
+ * The current source is parsed inside the helper so fenced-code lookalikes and
+ * stale/non-heading line numbers are rejected. The moved section includes its
+ * body and every descendant heading. Returns `null` for an invalid or no-op
+ * move.
+ */
+export function moveHeadingSectionInSource(
+  source: string,
+  fromHeadingLine: number,
+  targetHeadingLine: number,
+  placement: OutlineDropPlacement,
+): string | null {
+  if (fromHeadingLine === targetHeadingLine || (placement !== 'before' && placement !== 'after')) {
+    return null;
+  }
+
+  const headings = readSourceHeadings(source);
+  if (!headings) return null;
+
+  const from = headings.find((heading) => heading.line === fromHeadingLine);
+  const target = headings.find((heading) => heading.line === targetHeadingLine);
+  if (!from || !target) return null;
+
+  // A reorder must not silently promote, demote, or re-parent a section.
+  if (from.depth !== target.depth || from.parentLine !== target.parentLine) return null;
+
+  const siblings = headings.filter((heading) => heading.parentLine === from.parentLine);
+  const fromIndex = siblings.findIndex((heading) => heading.line === fromHeadingLine);
+  const targetIndex = siblings.findIndex((heading) => heading.line === targetHeadingLine);
+  if (fromIndex < 0 || targetIndex < 0) return null;
+
+  // Direct sibling ranges must be contiguous. Aborting here is safer than
+  // rewriting source if a parser ever reports an unexpected position shape.
+  for (let i = 0; i < siblings.length - 1; i++) {
+    if (siblings[i].end !== siblings[i + 1].start) return null;
+  }
+
+  const slots: SectionSlot[] = siblings.map((heading) => {
+    const raw = source.slice(heading.start, heading.end);
+    const { content, gap } = splitTrailingLineGap(raw);
+    return { ...heading, content, gap };
+  });
+
+  const reordered = [...slots];
+  const [moved] = reordered.splice(fromIndex, 1);
+  const targetAfterRemoval = reordered.findIndex((heading) => heading.line === targetHeadingLine);
+  if (!moved || targetAfterRemoval < 0) return null;
+
+  const insertionIndex = targetAfterRemoval + (placement === 'after' ? 1 : 0);
+  reordered.splice(insertionIndex, 0, moved);
+
+  if (reordered.every((heading, index) => heading.line === slots[index].line)) return null;
+
+  // Whitespace belongs to positions, not to the section being moved. Keeping
+  // the original slot gaps preserves blank-line style, CRLF, and the exact
+  // final-newline state even when the former EOF section moves earlier.
+  const replacement = reordered
+    .map((heading, index) => heading.content + slots[index].gap)
+    .join('');
+  const rangeStart = slots[0].start;
+  const rangeEnd = slots[slots.length - 1].end;
+  const next = source.slice(0, rangeStart) + replacement + source.slice(rangeEnd);
+
+  // The move should never change the number of authored headings. This also
+  // catches any unforeseen boundary issue before the editor source is updated.
+  const nextHeadings = readSourceHeadings(next);
+  if (!nextHeadings || nextHeadings.length !== headings.length) return null;
+
+  return next;
+}
+
+/** Parse source headings and derive their parent + complete-section range. */
+function readSourceHeadings(source: string): SourceHeading[] | null {
+  try {
+    const document = parseMarkdown(source);
+    const lineStarts = sourceLineStarts(source);
+    const headings: SourceHeading[] = [];
+    const stack: SourceHeading[] = [];
+
+    for (const node of document.children) {
+      if (node.type !== 'heading' || !node.position) continue;
+
+      const line = node.position.start.line;
+      const start = lineStarts[line - 1];
+      if (start == null) return null;
+
+      while (stack.length > 0 && stack[stack.length - 1].depth >= node.depth) {
+        stack.pop();
+      }
+
+      const heading: SourceHeading = {
+        line,
+        depth: node.depth,
+        parentLine: stack[stack.length - 1]?.line ?? null,
+        start,
+        end: source.length,
+      };
+      headings.push(heading);
+      stack.push(heading);
+    }
+
+    for (let i = 0; i < headings.length; i++) {
+      const heading = headings[i];
+      for (let j = i + 1; j < headings.length; j++) {
+        if (headings[j].depth <= heading.depth) {
+          heading.end = headings[j].start;
+          break;
+        }
+      }
+    }
+
+    return headings;
+  } catch (err: unknown) {
+    // Source mutations are best-effort UI operations. A parse failure leaves
+    // the current markdown untouched; EditorContext owns user-facing errors.
+    void err;
+    return null;
+  }
+}
+
+/** 0-based offsets of every physical line, preserving mixed EOL sequences. */
+function sourceLineStarts(source: string): number[] {
+  const starts = [0];
+  const eol = /\r\n|\r|\n/g;
+  let match: RegExpExecArray | null;
+  while ((match = eol.exec(source)) != null) {
+    starts.push(match.index + match[0].length);
+  }
+  return starts;
+}
+
+/**
+ * Split the line-ending separator from a section without stealing spaces
+ * before the first newline (which may be an authored Markdown hard break).
+ */
+function splitTrailingLineGap(value: string): { content: string; gap: string } {
+  const match = value.match(/(?:\r\n|\r|\n)(?:[ \t]*(?:\r\n|\r|\n))*[ \t]*$/);
+  if (!match || match.index == null) return { content: value, gap: '' };
+  return {
+    content: value.slice(0, match.index),
+    gap: value.slice(match.index),
+  };
+}