@bendyline/squisq-editor-react 1.6.1 → 2.0.0

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/mediaReferences.ts

@@ -0,0 +1,299 @@
+import { splitKeyValueToken, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
+
+interface MediaReferenceRange {
+  start: number;
+  end: number;
+}
+
+interface MarkdownReferenceMatch {
+  destination: string;
+  range: MediaReferenceRange;
+}
+
+const MEDIA_REFERENCE_PARAM_KEYS = new Set([
+  'audio',
+  'file',
+  'href',
+  'image',
+  'imagesrc',
+  'path',
+  'poster',
+  'src',
+  'url',
+  'video',
+]);
+
+const HTML_MEDIA_ATTRS = ['src', 'href', 'poster'] as const;
+
+/**
+ * Collect media references from the document source. Used by the Files panel
+ * to distinguish stored files that are actually referenced by the document
+ * from files that only exist in the bin.
+ */
+export function collectMediaReferencesFromMarkdown(source: string): ReadonlySet<string> {
+  const refs = new Set<string>();
+  collectMarkdownInlineReferences(source, refs);
+  collectHtmlAttributeReferences(source, refs);
+  collectAnnotationReferences(source, refs);
+  return refs;
+}
+
+/**
+ * Remove markdown/html references to a media asset without reparsing and
+ * reserializing the whole document. This targets the ref shapes the editor
+ * emits for uploaded files while preserving unrelated author formatting.
+ */
+export function removeMediaReferencesFromMarkdown(source: string, mediaPath: string): string {
+  if (!mediaPath) return source;
+  const withoutMarkdownRefs = removeMarkdownInlineReferences(source, mediaPath);
+  const withoutImageTags = removeHtmlTagsByAttribute(withoutMarkdownRefs, 'img', 'src', mediaPath);
+  return removeHtmlTagsByAttribute(withoutImageTags, 'a', 'href', mediaPath);
+}
+
+function removeMarkdownInlineReferences(source: string, mediaPath: string): string {
+  let result = '';
+  let cursor = 0;
+
+  while (cursor < source.length) {
+    const range = findNextMarkdownReference(source, cursor, mediaPath);
+    if (!range) break;
+    result += source.slice(cursor, range.start);
+    cursor = range.end;
+  }
+
+  return result + source.slice(cursor);
+}
+
+function findNextMarkdownReference(
+  source: string,
+  startIndex: number,
+  mediaPath: string,
+): MediaReferenceRange | null {
+  const match = findNextMarkdownReferenceMatch(source, startIndex, mediaPath);
+  return match?.range ?? null;
+}
+
+function collectMarkdownInlineReferences(source: string, refs: Set<string>): void {
+  let cursor = 0;
+  while (cursor < source.length) {
+    const match = findNextMarkdownReferenceMatch(source, cursor);
+    if (!match) return;
+    refs.add(match.destination);
+    cursor = Math.max(match.range.end, cursor + 1);
+  }
+}
+
+function findNextMarkdownReferenceMatch(
+  source: string,
+  startIndex: number,
+  mediaPath?: string,
+): MarkdownReferenceMatch | null {
+  let bracketIndex = source.indexOf('[', startIndex);
+
+  while (bracketIndex !== -1) {
+    const previous = source[bracketIndex - 1];
+    const isImage = previous === '!';
+    if (previous === '@') {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const closeBracket = findClosingBracket(source, bracketIndex);
+    if (closeBracket === -1 || source[closeBracket + 1] !== '(') {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const openParen = closeBracket + 1;
+    const closeParen = findClosingParen(source, openParen);
+    if (closeParen === -1) {
+      bracketIndex = source.indexOf('[', bracketIndex + 1);
+      continue;
+    }
+
+    const destination = readLinkDestination(source.slice(openParen + 1, closeParen));
+    if (destination && (mediaPath === undefined || destination === mediaPath)) {
+      const tokenStart = isImage ? bracketIndex - 1 : bracketIndex;
+      return {
+        destination,
+        range: expandStandaloneLine(source, tokenStart, closeParen + 1),
+      };
+    }
+
+    bracketIndex = source.indexOf('[', bracketIndex + 1);
+  }
+
+  return null;
+}
+
+function collectHtmlAttributeReferences(source: string, refs: Set<string>): void {
+  const tagPattern = /<[a-z][^>]*>/gi;
+  let match: RegExpExecArray | null;
+
+  while ((match = tagPattern.exec(source))) {
+    const tag = match[0];
+    for (const attrName of HTML_MEDIA_ATTRS) {
+      const value = readHtmlAttribute(tag, attrName);
+      if (value) refs.add(value);
+    }
+  }
+}
+
+function collectAnnotationReferences(source: string, refs: Set<string>): void {
+  const annotationPattern = /\{\[([^\]]*)\]\}/g;
+  let match: RegExpExecArray | null;
+
+  while ((match = annotationPattern.exec(source))) {
+    const inner = match[1];
+    if (!inner) continue;
+    const tokens = tokenizeAttrTokens(inner);
+    for (const token of tokens) {
+      const pair = splitKeyValueToken(token);
+      if (!pair) continue;
+      if (MEDIA_REFERENCE_PARAM_KEYS.has(pair.key.toLowerCase())) {
+        refs.add(pair.value);
+      }
+    }
+  }
+}
+
+function findClosingBracket(source: string, openIndex: number): number {
+  let depth = 0;
+  for (let i = openIndex; i < source.length; i++) {
+    if (source[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (source[i] === '[') depth += 1;
+    if (source[i] === ']') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+
+function findClosingParen(source: string, openIndex: number): number {
+  let depth = 0;
+  let inAngleDestination = false;
+
+  for (let i = openIndex; i < source.length; i++) {
+    const ch = source[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (inAngleDestination) {
+      if (ch === '>') inAngleDestination = false;
+      continue;
+    }
+    if (ch === '<') {
+      inAngleDestination = true;
+      continue;
+    }
+    if (ch === '(') {
+      depth += 1;
+      continue;
+    }
+    if (ch === ')') {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+
+  return -1;
+}
+
+function readLinkDestination(raw: string): string {
+  const content = raw.trimStart();
+  if (!content) return '';
+
+  if (content.startsWith('<')) {
+    const close = findUnescaped(content, '>', 1);
+    if (close === -1) return '';
+    return unescapeMarkdownUrl(content.slice(1, close));
+  }
+
+  let depth = 0;
+  for (let i = 0; i < content.length; i++) {
+    const ch = content[i];
+    if (ch === '\\') {
+      i += 1;
+      continue;
+    }
+    if (ch === '(') {
+      depth += 1;
+      continue;
+    }
+    if (ch === ')' && depth > 0) {
+      depth -= 1;
+      continue;
+    }
+    if (depth === 0 && /\s/.test(ch)) {
+      return unescapeMarkdownUrl(content.slice(0, i));
+    }
+  }
+
+  return unescapeMarkdownUrl(content);
+}
+
+function findUnescaped(source: string, needle: string, startIndex: number): number {
+  for (let i = startIndex; i < source.length; i++) {
+    if (source[i] === '\\') {
+      i += 1;
+      continue;
+    }
+    if (source[i] === needle) return i;
+  }
+  return -1;
+}
+
+function unescapeMarkdownUrl(value: string): string {
+  return value.replace(/\\([\\`*{}[\]()#+\-.!_>])/g, '$1');
+}
+
+function expandStandaloneLine(source: string, start: number, end: number): MediaReferenceRange {
+  const lineStart = source.lastIndexOf('\n', start - 1) + 1;
+  const nextNewline = source.indexOf('\n', end);
+  const lineEnd = nextNewline === -1 ? source.length : nextNewline;
+  const before = source.slice(lineStart, start);
+  const after = source.slice(end, lineEnd);
+
+  if (before.trim() === '' && after.trim() === '') {
+    return {
+      start: lineStart,
+      end: nextNewline === -1 ? lineEnd : lineEnd + 1,
+    };
+  }
+
+  return { start, end };
+}
+
+function removeHtmlTagsByAttribute(
+  source: string,
+  tagName: 'a' | 'img',
+  attrName: 'href' | 'src',
+  mediaPath: string,
+): string {
+  const tagPattern = tagName === 'img' ? /<img\b[^>]*>/gi : /<a\b[^>]*>[\s\S]*?<\/a>/gi;
+  return source.replace(tagPattern, (tag) => {
+    const value = readHtmlAttribute(tag, attrName);
+    return value === mediaPath ? '' : tag;
+  });
+}
+
+function readHtmlAttribute(tag: string, attrName: string): string | null {
+  const attrPattern = new RegExp(`\\b${attrName}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, 'i');
+  const match = attrPattern.exec(tag);
+  if (!match) return null;
+  return unescapeHtmlAttribute(match[2] ?? match[3] ?? match[4] ?? '');
+}
+
+function unescapeHtmlAttribute(value: string): string {
+  return value
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&quot;/g, '"')
+    .replace(/&#39;|&apos;/g, "'")
+    .replace(/&amp;/g, '&');
+}

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';