@bendyline/squisq-editor-react 2.0.1 → 2.2.0

package/src/codeContext/CodeContextZones.tsx

@@ -1,121 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { useEditorContext } from '../EditorContext';
-import { CodeContextZoneManager } from './CodeContextZoneManager';
-import { CodeContextSectionView } from './CodeContextSectionView';
-import type { ZoneSpec } from './diffContextSections';
-import type { CodeContext, CodeContextSection } from './types';
-
-/**
- * Bridges a host-supplied {@link CodeContext} onto the live Monaco editor:
- * owns a {@link CodeContextZoneManager} per editor instance, reconciles zones
- * when the context prop changes, and portals a `CodeContextSectionView` into
- * each zone's dom node. Mounted by EditorShell in code mode; also exported
- * for hosts composing a custom shell around `RawEditor`.
- */
-export function CodeContextZones({ options }: { options: CodeContext }) {
-  const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState<CodeContextZoneManager | null>(null);
-  // Bumped whenever the zone set changes so portals rebuild.
-  const [, setZonesVersion] = useState(0);
-  // Expansion state per section id: seeded from defaultExpanded the first
-  // time an id appears; the user's toggle wins afterwards.
-  const [expandedById, setExpandedById] = useState<Record<string, boolean>>({});
-  const seenIds = useRef(new Set<string>());
-
-  useEffect(() => {
-    if (!monacoEditor) return;
-    const mgr = new CodeContextZoneManager(monacoEditor);
-    const off = mgr.onDidChangeZones(() => setZonesVersion((v) => v + 1));
-    setManager(mgr);
-    return () => {
-      off();
-      mgr.dispose();
-      setManager(null);
-    };
-  }, [monacoEditor]);
-
-  const fileTop = options.fileTop;
-  const sections = options.sections;
-
-  // Resolved render list: fileTop pinned above line 1 at ordinal 0, then the
-  // host's sections in array order.
-  const resolved = useMemo(() => {
-    const out: Array<{ spec: ZoneSpec; section: Omit<CodeContextSection, 'line'> }> = [];
-    if (fileTop) {
-      out.push({ spec: { id: fileTop.id, line: 0, ordinal: 0 }, section: fileTop });
-    }
-    sections?.forEach((s, i) => {
-      out.push({ spec: { id: s.id, line: s.line, ordinal: i + 1 }, section: s });
-    });
-    return out;
-  }, [fileTop, sections]);
-
-  useEffect(() => {
-    if (!manager) return;
-    manager.sync(resolved.map((r) => r.spec));
-    // Seed expansion defaults for ids we haven't seen before (sections can
-    // arrive after mount).
-    setExpandedById((prev) => {
-      let next: Record<string, boolean> | null = null;
-      for (const { section } of resolved) {
-        if (seenIds.current.has(section.id)) continue;
-        seenIds.current.add(section.id);
-        if (section.defaultExpanded) {
-          next = next ?? { ...prev };
-          next[section.id] = true;
-        }
-      }
-      return next ?? prev;
-    });
-  }, [manager, resolved]);
-
-  const onToggleSection = options.onToggleSection;
-  const handleToggle = useCallback(
-    (id: string) => {
-      setExpandedById((prev) => {
-        const expanded = !prev[id];
-        onToggleSection?.(id, expanded);
-        return { ...prev, [id]: expanded };
-      });
-    },
-    [onToggleSection],
-  );
-
-  const handleMeasure = useCallback(
-    (id: string, px: number) => manager?.setHeight(id, px),
-    [manager],
-  );
-
-  const handleRevealLine = useCallback(
-    (line: number) => {
-      monacoEditor?.revealLineInCenter(line);
-      monacoEditor?.setPosition({ lineNumber: line, column: 1 });
-    },
-    [monacoEditor],
-  );
-
-  if (!manager) return null;
-  return (
-    <>
-      {resolved.map(({ section }) => {
-        const domNode = manager.getDomNode(section.id);
-        if (!domNode) return null;
-        return createPortal(
-          <CodeContextSectionView
-            key={section.id}
-            section={section}
-            expanded={!!expandedById[section.id]}
-            onToggle={handleToggle}
-            linkSchemes={options.linkSchemes}
-            onLinkClick={options.onLinkClick}
-            onRevealLine={handleRevealLine}
-            onMeasure={handleMeasure}
-          />,
-          domNode,
-          section.id,
-        );
-      })}
-    </>
-  );
-}

package/src/codeContext/diffContextSections.ts

@@ -1,38 +0,0 @@
-/**
- * Pure reconciler for context-section zones. Diffs the previous resolved spec
- * list against the next by section id, so the zone layer can apply one
- * changeViewZones batch: create `add`, delete `remove`, and re-anchor `move`
- * (same id, different line or ordinal). Content-only changes are not the zone
- * layer's business — React re-renders the portal and the resize observer
- * corrects the height.
- */
-
-export interface ZoneSpec {
-  id: string;
-  /** 1-based anchor line (0 = file-top, above line 1). */
-  line: number;
-  /** Stable order among zones sharing an anchor line. */
-  ordinal: number;
-}
-
-export interface ZoneDiff {
-  add: ZoneSpec[];
-  remove: string[];
-  move: ZoneSpec[];
-}
-
-export function diffContextSections(prev: ZoneSpec[], next: ZoneSpec[]): ZoneDiff {
-  const prevById = new Map(prev.map((z) => [z.id, z]));
-  const nextIds = new Set<string>();
-  const add: ZoneSpec[] = [];
-  const move: ZoneSpec[] = [];
-  for (const spec of next) {
-    if (nextIds.has(spec.id)) continue; // duplicate id — first occurrence wins
-    nextIds.add(spec.id);
-    const before = prevById.get(spec.id);
-    if (!before) add.push(spec);
-    else if (before.line !== spec.line || before.ordinal !== spec.ordinal) move.push(spec);
-  }
-  const remove = prev.filter((z) => !nextIds.has(z.id)).map((z) => z.id);
-  return { add, remove, move };
-}

package/src/codeContext/types.ts

@@ -1,75 +0,0 @@
-/**
- * Host-supplied context sections rendered INSIDE the Monaco (raw/code)
- * surface: collapsible markdown blurbs injected above anchor lines, plus an
- * optional file-top summary. Squisq stays host-agnostic — anchors are plain
- * line numbers, ids are opaque strings, links are intercepted via callback.
- *
- * Accessibility note: Monaco marks its view-zone layer `aria-hidden`, so
- * sections are invisible to screen readers in v1.
- */
-
-/**
- * One host-supplied markdown blurb anchored above a line of the code buffer.
- * Rendered as a compact one-line strip that expands in place to the full
- * markdown body.
- */
-export interface CodeContextSection {
-  /**
-   * Stable identity used to reconcile zones across prop updates — e.g. a
-   * symbol id like 'resolveImportEdges@60'. Zones are diffed by id: same id +
-   * new line moves the zone; same id + new markdown re-renders in place; a
-   * new id creates a new zone.
-   */
-  id: string;
-  /**
-   * 1-based line the section renders ABOVE. Out-of-range values are clamped
-   * by Monaco. In editable buffers the zone rides Monaco's whitespace
-   * semantics — it shifts as lines are inserted/deleted above it and
-   * collapses onto the previous line if its anchor lines are deleted. Squisq
-   * never re-derives anchors from edits; the host re-supplies lines when it
-   * re-analyzes the file.
-   */
-  line: number;
-  /**
-   * Compact markdown for the collapsed strip. Rendered on one line (block
-   * structure flattened, overflow ellipsized). Links work here too and go
-   * through `onLinkClick`.
-   */
-  summaryMarkdown: string;
-  /**
-   * Full markdown body shown when expanded. Omit while still loading — the
-   * expanded view shows a muted loading row and fills in when a later prop
-   * update supplies it.
-   */
-  markdown?: string;
-  /** Start expanded. The user's toggle wins after first interaction. Default false. */
-  defaultExpanded?: boolean;
-}
-
-/** The full context dictionary passed to `EditorShell.codeContext`. */
-export interface CodeContext {
-  /**
-   * Section pinned above line 1 (file summary). Rendered before any line-1
-   * `sections` entry. `line` is implicit.
-   */
-  fileTop?: Omit<CodeContextSection, 'line'>;
-  /** Line-anchored sections. Array order is preserved for equal lines. */
-  sections?: CodeContextSection[];
-  /**
-   * Extra URI schemes section links may use (e.g. `['workspace-nav']`).
-   * http/https/mailto/tel are always allowed; executable schemes
-   * (javascript:, data:) are never allowed regardless.
-   */
-  linkSchemes?: readonly string[];
-  /**
-   * Intercepts link clicks inside sections, receiving the href exactly as
-   * authored in the markdown. Return `false` to let the browser's default
-   * navigation proceed; any other return (or void) suppresses it. Fragment
-   * links of the form `#L<digits>` are handled natively by squisq (reveal
-   * that line in the editor) and never reach this callback. When omitted:
-   * http(s)/mailto links open normally, custom-scheme links do nothing.
-   */
-  onLinkClick?: (href: string, meta: { sectionId: string }) => boolean | undefined;
-  /** Notified on expand/collapse — lets hosts lazy-load bodies on first expand. */
-  onToggleSection?: (sectionId: string, expanded: boolean) => void;
-}

package/src/customTemplates/AddBin.tsx

@@ -1,126 +0,0 @@
-/**
- * AddBin — the template designer's "things you can add" sidebar.
- *
- * Three sections, all feeding the same canvas:
- *   - Placeholders: dynamic tokens ({title}, {content}, …) substituted at
- *     render time. See {@link TOKEN_DEFS}.
- *   - Shapes: Squisq's standard shape library. See {@link SHAPE_DEFS}.
- *   - Media: drop an image to pin as a static, full-bleed background.
- *
- * Tokens and shapes can be placed two ways — drag onto the canvas, or
- * click to arm the matching tool and then click the canvas. The drag
- * carries the entry id under {@link TOKEN_DRAG_MIME} / {@link SHAPE_DRAG_MIME};
- * the TemplateDesigner's drop handler reads it (see `buildTokenLayer` /
- * `buildShapeLayer`). Media is upload-backed and handled by the designer.
- */
-
-import { useRef } from 'react';
-import { TOKEN_DEFS, TOKEN_DRAG_MIME } from './tokenDefs';
-import { SHAPE_DEFS, SHAPE_DRAG_MIME } from './shapeDefs';
-import { ShapeGlyph } from './ShapeGlyph';
-
-interface AddBinProps {
-  /** Currently active tool id — the matching button is highlighted. */
-  activeToolId: string;
-  /** Switch the Scene's active tool (a token or shape place tool). */
-  onActivate: (toolId: string) => void;
-  /** Whether media can be added (a MediaProvider is wired up). */
-  canAddMedia: boolean;
-  /** Add picked image files as static background layer(s). */
-  onAddMediaFiles: (files: File[]) => void;
-}
-
-export function AddBin({ activeToolId, onActivate, canAddMedia, onAddMediaFiles }: AddBinProps) {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  return (
-    <aside className="squisq-template-designer-palette" aria-label="Add to layout">
-      <h3 className="squisq-template-designer-palette-title">Add</h3>
-
-      {/* Placeholders — dynamic tokens substituted at render time. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Placeholders</div>
-        <div className="squisq-template-designer-palette-list">
-          {TOKEN_DEFS.map((t) => (
-            <button
-              key={t.id}
-              type="button"
-              draggable
-              className={`squisq-template-designer-palette-item${
-                activeToolId === t.id ? ' squisq-template-designer-palette-item--active' : ''
-              }`}
-              onDragStart={(e) => {
-                e.dataTransfer.setData(TOKEN_DRAG_MIME, t.id);
-                // Some browsers require text/plain for the drag to start.
-                e.dataTransfer.setData('text/plain', t.token);
-                e.dataTransfer.effectAllowed = 'copy';
-              }}
-              onClick={() => onActivate(t.id)}
-              title={t.desc}
-            >
-              <span className="squisq-template-designer-palette-item-preview">{t.token}</span>
-              <span className="squisq-template-designer-palette-item-label">{t.label}</span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Shapes — the standard shape library. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Shapes</div>
-        <div className="squisq-template-designer-palette-shapes">
-          {SHAPE_DEFS.map((s) => (
-            <button
-              key={s.id}
-              type="button"
-              draggable
-              className={`squisq-template-designer-shape-item${
-                activeToolId === s.id ? ' squisq-template-designer-shape-item--active' : ''
-              }`}
-              onDragStart={(e) => {
-                e.dataTransfer.setData(SHAPE_DRAG_MIME, s.id);
-                e.dataTransfer.setData('text/plain', s.label);
-                e.dataTransfer.effectAllowed = 'copy';
-              }}
-              onClick={() => onActivate(s.id)}
-              title={s.label}
-              aria-label={s.label}
-            >
-              <ShapeGlyph kind={s.kind} rounded={s.rounded} />
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Media — drop an image to pin a static background. */}
-      <div className="squisq-template-designer-palette-section">
-        <div className="squisq-template-designer-palette-section-title">Media</div>
-        <p className="squisq-template-designer-palette-hint">
-          {canAddMedia
-            ? 'Drop an image on the canvas to add a full-bleed background.'
-            : 'Connect media storage to add image backgrounds.'}
-        </p>
-        <button
-          type="button"
-          className="squisq-template-designer-palette-media-add"
-          disabled={!canAddMedia}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          Add image…
-        </button>
-        <input
-          ref={fileInputRef}
-          type="file"
-          accept="image/*"
-          multiple
-          style={{ display: 'none' }}
-          onChange={(e) => {
-            const files = Array.from(e.target.files ?? []);
-            if (files.length) onAddMediaFiles(files);
-            e.target.value = ''; // allow re-selecting the same file
-          }}
-        />
-      </div>
-    </aside>
-  );
-}

package/src/customTemplates/CustomLayoutManager.tsx

@@ -1,234 +0,0 @@
-/**
- * CustomLayoutManager — a near-full-window modal for managing custom
- * layouts (templates). The left rail lists every layout available to the
- * document — those inlined in the doc and those saved to the browser
- * library — plus a "New layout" button. The right pane embeds the
- * existing {@link TemplateDesigner} (in `embedded` mode) so the selected
- * layout can be authored in place.
- *
- * The manager seeds its own {@link CustomTemplateProvider} from the
- * active doc (via {@link useDocCustomTemplates}) so it works whether or
- * not the host already mounted a provider — the toolbar that opens it
- * sits outside the WYSIWYG editor's provider.
- */
-
-import { useCallback, useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import type { CustomTemplateDefinition, MediaProvider } from '@bendyline/squisq/schemas';
-import {
-  CustomTemplateProvider,
-  useCustomTemplates,
-  type CustomTemplateContextValue,
-} from './CustomTemplateContext';
-import { TemplateDesigner, type DesignerSaveTarget } from './TemplateDesigner';
-import { TemplateThumbnail } from './thumbnail';
-import { useDocCustomTemplates } from './useDocCustomTemplates';
-import { useEditorContext } from '../EditorContext';
-
-export interface CustomLayoutManagerProps {
-  /** Close the manager. */
-  onClose: () => void;
-}
-
-/**
- * A picked sidebar entry: `'new'` for the blank-slate designer, or an
- * existing template tagged by which pool it came from.
- *
- * `def` carries the definition directly for the just-saved case: the doc
- * re-parses on a 150ms debounce (see EditorContext), so immediately after
- * a save the doc-template list is briefly stale. Holding the saved
- * definition here lets the designer re-seed from it without waiting for —
- * or racing — that re-parse. User-initiated selections omit `def` and
- * resolve from the (by-then fresh) list.
- */
-type Selection =
-  | 'new'
-  | { source: 'doc' | 'library'; name: string; def?: CustomTemplateDefinition };
-
-export function CustomLayoutManager({ onClose }: CustomLayoutManagerProps) {
-  const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const { mediaProvider, colorScheme } = useEditorContext();
-
-  // Close on Escape, mirroring the other editor dialogs.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  return createPortal(
-    <div
-      className="squisq-editor-shell squisq-layout-manager-overlay"
-      data-theme={colorScheme}
-      role="dialog"
-      aria-modal="true"
-      aria-label="Custom layouts"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div className="squisq-layout-manager-panel">
-        <header className="squisq-layout-manager-header">
-          <h2 className="squisq-layout-manager-title">Custom layouts</h2>
-          <button
-            type="button"
-            className="squisq-template-designer-close"
-            onClick={onClose}
-            aria-label="Close custom layouts"
-            title="Close (Esc)"
-          >
-            ×
-          </button>
-        </header>
-        <CustomTemplateProvider
-          docTemplates={docTemplates}
-          onDocTemplatesChange={onDocTemplatesChange}
-        >
-          <ManagerBody mediaProvider={mediaProvider} />
-        </CustomTemplateProvider>
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-/** Inner body — runs under the provider so it can read/write both pools. */
-function ManagerBody({ mediaProvider }: { mediaProvider: MediaProvider | null }) {
-  const ctx = useCustomTemplates();
-  // The provider is mounted just above by CustomLayoutManager, so this is
-  // never null in practice; narrow defensively rather than asserting.
-  if (!ctx) return null;
-  return <ManagerContent ctx={ctx} mediaProvider={mediaProvider} />;
-}
-
-function ManagerContent({
-  ctx,
-  mediaProvider,
-}: {
-  ctx: CustomTemplateContextValue;
-  mediaProvider: MediaProvider | null;
-}) {
-  const { docTemplates, libraryTemplates, upsertDocTemplate, upsertLibraryTemplate } = ctx;
-
-  // The doc and library pools are listed in full and kept separate — a
-  // layout can legitimately exist in both (the doc's inlined copy and a
-  // reusable library copy), so saving a doc layout "to library" produces
-  // a visible second entry rather than silently merging into the doc one.
-
-  // Default selection: first doc layout, else first library layout, else
-  // the blank-slate "new" designer.
-  const [selection, setSelection] = useState<Selection>(() => {
-    if (docTemplates[0]) return { source: 'doc', name: docTemplates[0].name };
-    if (libraryTemplates[0]) return { source: 'library', name: libraryTemplates[0].name };
-    return 'new';
-  });
-
-  // Resolve the selected definition (undefined for the "new" slate). A
-  // `def` carried on the selection wins over the list lookup so a freshly
-  // saved layout shows immediately, before the doc re-parse lands.
-  const selected: CustomTemplateDefinition | undefined =
-    selection === 'new'
-      ? undefined
-      : (selection.def ??
-        (selection.source === 'doc' ? docTemplates : libraryTemplates).find(
-          (t) => t.name === selection.name,
-        ));
-
-  const handleSave = useCallback(
-    (def: CustomTemplateDefinition, target: DesignerSaveTarget) => {
-      if (target === 'doc') upsertDocTemplate(def);
-      else upsertLibraryTemplate(def);
-      // After saving, select the just-saved layout so the list highlights
-      // it and further edits target the same entry (rather than the blank
-      // "new" slate). Carry the saved def so the designer re-seeds from it
-      // even while the doc re-parse (debounced) is still in flight.
-      setSelection({ source: target === 'doc' ? 'doc' : 'library', name: def.name, def });
-    },
-    [upsertDocTemplate, upsertLibraryTemplate],
-  );
-
-  const isActive = (source: 'doc' | 'library', name: string) =>
-    selection !== 'new' && selection.source === source && selection.name === name;
-
-  const renderItem = (def: CustomTemplateDefinition, source: 'doc' | 'library') => (
-    <button
-      key={`${source}:${def.name}`}
-      type="button"
-      className={`squisq-layout-manager-item${
-        isActive(source, def.name) ? ' squisq-layout-manager-item--active' : ''
-      }`}
-      onClick={() => setSelection({ source, name: def.name })}
-    >
-      <span className="squisq-layout-manager-item-thumb">
-        <TemplateThumbnail def={def} />
-      </span>
-      <span className="squisq-layout-manager-item-text">
-        <span className="squisq-layout-manager-item-label">{def.label || def.name}</span>
-        <span className="squisq-layout-manager-item-name">{def.name}</span>
-      </span>
-    </button>
-  );
-
-  return (
-    <div className="squisq-layout-manager-body">
-      <aside className="squisq-layout-manager-sidebar">
-        <button
-          type="button"
-          className={`squisq-layout-manager-new${
-            selection === 'new' ? ' squisq-layout-manager-new--active' : ''
-          }`}
-          onClick={() => setSelection('new')}
-        >
-          + New layout
-        </button>
-
-        {docTemplates.length > 0 && (
-          <>
-            <div className="squisq-layout-manager-section-title">This document</div>
-            <div className="squisq-layout-manager-list">
-              {docTemplates.map((def) => renderItem(def, 'doc'))}
-            </div>
-          </>
-        )}
-
-        {libraryTemplates.length > 0 && (
-          <>
-            <div className="squisq-layout-manager-section-title">Library</div>
-            <div className="squisq-layout-manager-list">
-              {libraryTemplates.map((def) => renderItem(def, 'library'))}
-            </div>
-          </>
-        )}
-
-        {docTemplates.length === 0 && libraryTemplates.length === 0 && (
-          <p className="squisq-layout-manager-empty-hint">
-            No custom layouts yet. Design one on the right and save it to this document or your
-            library.
-          </p>
-        )}
-      </aside>
-
-      <div className="squisq-layout-manager-main">
-        <TemplateDesigner
-          // Remount when the selection changes so the designer re-seeds
-          // its internal state from the newly chosen definition.
-          key={selection === 'new' ? 'new' : `${selection.source}:${selection.name}`}
-          embedded
-          initial={selected}
-          mediaProvider={mediaProvider}
-          // A layout already in the doc just "Save"s; a new or library
-          // layout reads "Save to this doc" since saving adds it.
-          primarySaveLabel={
-            selection !== 'new' && selection.source === 'doc' ? 'Save' : 'Save to this doc'
-          }
-          onSave={handleSave}
-          onClose={() => {
-            /* embedded: the manager frame owns dismissal */
-          }}
-        />
-      </div>
-    </div>
-  );
-}