@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/src/find/FindToolbar.tsx

@@ -0,0 +1,314 @@
+import { useCallback, useEffect, useId, useRef, useState } from 'react';
+import type { editor as MonacoEditorNs } from 'monaco-editor';
+import { useEditorContext } from '../EditorContext';
+import { Icon } from '../Icon';
+import { updateTiptapFindHighlights } from './FindHighlightExtension';
+import { findTextMatches, normalizeFindIndex } from './findModel';
+
+interface HighlightRegistryLike {
+  set(name: string, highlight: unknown): void;
+  delete(name: string): boolean;
+}
+
+interface HighlightConstructorLike {
+  new (...ranges: Range[]): unknown;
+}
+
+interface PreviewHighlightResult {
+  count: number;
+  cleanup: () => void;
+}
+
+export interface FindToolbarProps {
+  onClose: () => void;
+}
+
+/** Search controls shown immediately to the right of the Write/Source/Use tabs. */
+export function FindToolbar({ onClose }: FindToolbarProps) {
+  const { activeView, markdownSource, tiptapEditor, monacoEditor } = useEditorContext();
+  const [query, setQuery] = useState('');
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [matchCount, setMatchCount] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const reactId = useId().replace(/[^a-zA-Z0-9_-]/g, '');
+  const previewHighlightName = `squisq-find-${reactId}`;
+  const previewSelectedName = `${previewHighlightName}-selected`;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const style = document.createElement('style');
+    style.dataset.squisqFindHighlight = reactId;
+    style.textContent = `::highlight(${previewHighlightName}) { background: #fde68a; color: inherit; } ::highlight(${previewSelectedName}) { background: #f59e0b; color: #111827; }`;
+    document.head.append(style);
+    return () => style.remove();
+  }, [previewHighlightName, previewSelectedName, reactId]);
+
+  useEffect(() => {
+    let cleanup = () => {};
+    let count = 0;
+
+    if (activeView === 'raw' && monacoEditor) {
+      const model = monacoEditor.getModel();
+      const matches = model
+        ? model.findMatches(query.trim(), false, false, false, null, false)
+        : [];
+      count = query.trim() ? matches.length : 0;
+      const selected = normalizeFindIndex(selectedIndex, count);
+      const decorations = monacoEditor.createDecorationsCollection(
+        matches.slice(0, count).map((match, index) => ({
+          range: match.range,
+          options: monacoDecorationOptions(index === selected),
+        })),
+      );
+      if (count > 0) monacoEditor.revealRangeInCenter(matches[selected].range);
+      cleanup = () => decorations.clear();
+    } else if (activeView === 'wysiwyg' && tiptapEditor && !tiptapEditor.isDestroyed) {
+      count = updateTiptapFindHighlights(tiptapEditor, query, selectedIndex);
+      const selected = tiptapEditor.view.dom.querySelector<HTMLElement>(
+        '.squisq-find-match--selected',
+      );
+      selected?.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+      cleanup = () => {
+        if (!tiptapEditor.isDestroyed) updateTiptapFindHighlights(tiptapEditor, '', 0);
+      };
+    } else if (activeView === 'preview') {
+      const root = inputRef.current
+        ?.closest('.squisq-editor-shell')
+        ?.querySelector<HTMLElement>('[data-testid="preview-panel"]');
+      if (root) {
+        const result = applyPreviewHighlights(
+          root,
+          query,
+          selectedIndex,
+          previewHighlightName,
+          previewSelectedName,
+        );
+        count = result.count;
+        cleanup = result.cleanup;
+      }
+    }
+
+    setMatchCount(count);
+    setSelectedIndex((current) => normalizeFindIndex(current, count));
+    return cleanup;
+  }, [
+    activeView,
+    markdownSource,
+    monacoEditor,
+    previewHighlightName,
+    previewSelectedName,
+    query,
+    selectedIndex,
+    tiptapEditor,
+  ]);
+
+  const moveSelection = useCallback(
+    (delta: number) => {
+      if (matchCount === 0) return;
+      setSelectedIndex((current) => normalizeFindIndex(current + delta, matchCount));
+    },
+    [matchCount],
+  );
+
+  const resultLabel =
+    query.trim() === ''
+      ? '0 of 0'
+      : matchCount === 0
+        ? 'No results'
+        : `${normalizeFindIndex(selectedIndex, matchCount) + 1} of ${matchCount}`;
+
+  return (
+    <div className="squisq-find-toolbar" role="search" aria-label="Find in document">
+      <div className="squisq-find-field">
+        <Icon icon="fa-solid fa-magnifying-glass" />
+        <input
+          ref={inputRef}
+          type="search"
+          value={query}
+          className="squisq-find-input"
+          aria-label="Find in document"
+          placeholder="Find in document"
+          autoComplete="off"
+          spellCheck={false}
+          onChange={(event) => {
+            setQuery(event.target.value);
+            setSelectedIndex(0);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              moveSelection(event.shiftKey ? -1 : 1);
+            } else if (event.key === 'Escape') {
+              event.preventDefault();
+              onClose();
+            }
+          }}
+        />
+        <span className="squisq-find-count" aria-live="polite" aria-atomic="true">
+          {resultLabel}
+        </span>
+      </div>
+      <button
+        type="button"
+        className="squisq-find-button"
+        aria-label="Previous match"
+        data-tooltip="Previous match (Shift+Enter)"
+        disabled={matchCount === 0}
+        onClick={() => moveSelection(-1)}
+      >
+        <Icon icon="fa-solid fa-chevron-up" />
+      </button>
+      <button
+        type="button"
+        className="squisq-find-button"
+        aria-label="Next match"
+        data-tooltip="Next match (Enter)"
+        disabled={matchCount === 0}
+        onClick={() => moveSelection(1)}
+      >
+        <Icon icon="fa-solid fa-chevron-down" />
+      </button>
+      <button
+        type="button"
+        className="squisq-find-button squisq-find-close"
+        aria-label="Close find"
+        data-tooltip="Close find (Esc)"
+        onClick={onClose}
+      >
+        <Icon icon="fa-solid fa-xmark" />
+      </button>
+    </div>
+  );
+}
+
+function monacoDecorationOptions(selected: boolean): MonacoEditorNs.IModelDecorationOptions {
+  return {
+    inlineClassName: selected
+      ? 'squisq-find-match squisq-find-match--selected'
+      : 'squisq-find-match',
+  };
+}
+
+function applyPreviewHighlights(
+  root: HTMLElement,
+  query: string,
+  selectedIndex: number,
+  highlightName: string,
+  selectedName: string,
+): PreviewHighlightResult {
+  const ranges = collectTextRanges(root, query);
+  const selected = normalizeFindIndex(selectedIndex, ranges.length);
+  const css = globalThis.CSS as (typeof CSS & { highlights?: HighlightRegistryLike }) | undefined;
+  const HighlightConstructor = (
+    globalThis as typeof globalThis & {
+      Highlight?: HighlightConstructorLike;
+    }
+  ).Highlight;
+
+  if (css?.highlights && HighlightConstructor) {
+    css.highlights.set(highlightName, new HighlightConstructor(...ranges));
+    if (ranges.length > 0) {
+      css.highlights.set(selectedName, new HighlightConstructor(ranges[selected]));
+      scrollRangeIntoView(ranges[selected]);
+    } else {
+      css.highlights.delete(selectedName);
+    }
+    return {
+      count: ranges.length,
+      cleanup: () => {
+        css.highlights?.delete(highlightName);
+        css.highlights?.delete(selectedName);
+      },
+    };
+  }
+
+  // CSS Custom Highlight is broadly available in current browsers. Keep a
+  // DOM-mark fallback for older embedded webviews; Preview is read-only, and
+  // every inserted mark is unwrapped when the query changes or Find closes.
+  const marks = markPreviewRanges(ranges, selected);
+  marks
+    .find((mark) => mark.classList.contains('squisq-find-match--selected'))
+    ?.scrollIntoView?.({
+      block: 'center',
+      inline: 'nearest',
+    });
+  return {
+    count: ranges.length,
+    cleanup: () => {
+      const parents = new Set<Node>();
+      for (const mark of marks) {
+        const parent = mark.parentNode;
+        if (!parent) continue;
+        parents.add(parent);
+        mark.replaceWith(...Array.from(mark.childNodes));
+      }
+      parents.forEach((parent) => parent.normalize());
+    },
+  };
+}
+
+function collectTextRanges(root: HTMLElement, query: string): Range[] {
+  if (!query.trim()) return [];
+  const doc = root.ownerDocument;
+  const showText = doc.defaultView?.NodeFilter.SHOW_TEXT ?? 4;
+  const walker = doc.createTreeWalker(root, showText);
+  const ranges: Range[] = [];
+  let current = walker.nextNode();
+  while (current) {
+    const text = current as Text;
+    const parent = text.parentElement;
+    if (
+      parent &&
+      !parent.closest(
+        'button, input, textarea, select, script, style, [aria-hidden="true"], [data-squisq-find-ignore]',
+      )
+    ) {
+      for (const match of findTextMatches(text.data, query)) {
+        const range = doc.createRange();
+        range.setStart(text, match.from);
+        range.setEnd(text, match.to);
+        ranges.push(range);
+      }
+    }
+    current = walker.nextNode();
+  }
+  return ranges;
+}
+
+function scrollRangeIntoView(range: Range): void {
+  const element =
+    range.startContainer instanceof Element
+      ? range.startContainer
+      : range.startContainer.parentElement;
+  (element as HTMLElement | null)?.scrollIntoView?.({ block: 'center', inline: 'nearest' });
+}
+
+function markPreviewRanges(ranges: Range[], selectedIndex: number): HTMLElement[] {
+  const marks: HTMLElement[] = [];
+  // Work backwards so splitting a text node does not invalidate the offsets
+  // of an earlier match in that same node.
+  [...ranges]
+    .map((range, index) => ({ range, index }))
+    .reverse()
+    .forEach(({ range, index }) => {
+      const text = range.startContainer;
+      if (!(text instanceof Text) || text !== range.endContainer || !text.parentNode) return;
+      const after = text.splitText(range.endOffset);
+      const matched = text.splitText(range.startOffset);
+      const mark = text.ownerDocument.createElement('mark');
+      mark.className =
+        index === selectedIndex
+          ? 'squisq-find-match squisq-find-match--selected'
+          : 'squisq-find-match';
+      matched.replaceWith(mark);
+      mark.append(matched);
+      marks.push(mark);
+      // Keep the tail referenced so aggressive DOM implementations do not
+      // discard it before the next reverse-ordered range is processed.
+      void after;
+    });
+  return marks;
+}

package/src/find/findModel.ts

@@ -0,0 +1,77 @@
+import type { Node as ProseMirrorNode } from '@tiptap/pm/model';
+
+export interface FindTextMatch {
+  from: number;
+  to: number;
+}
+
+/**
+ * Find non-overlapping, case-insensitive literal matches. Offsets are UTF-16
+ * code-unit offsets, matching DOM Range, Monaco, and ProseMirror positions.
+ */
+export function findTextMatches(text: string, query: string): FindTextMatch[] {
+  const needle = query.trim();
+  if (!needle || !text) return [];
+
+  const matcher = new RegExp(escapeRegExp(needle), 'giu');
+  const matches: FindTextMatch[] = [];
+  let match: RegExpExecArray | null;
+  while ((match = matcher.exec(text)) !== null) {
+    matches.push({ from: match.index, to: match.index + match[0].length });
+    // Literal non-empty queries always advance, but retain this guard so a
+    // future matcher change cannot create an infinite loop.
+    if (match[0].length === 0) matcher.lastIndex += 1;
+  }
+  return matches;
+}
+
+export function normalizeFindIndex(index: number, count: number): number {
+  if (count <= 0) return 0;
+  return ((index % count) + count) % count;
+}
+
+/**
+ * Resolve visible text matches to ProseMirror document positions. Text from
+ * adjacent marked spans in one text block is searched as one run, so a query
+ * can cross a bold/italic boundary without matching across separate blocks.
+ */
+export function findProseMirrorMatches(doc: ProseMirrorNode, query: string): FindTextMatch[] {
+  const matches: FindTextMatch[] = [];
+
+  doc.descendants((node, blockPos) => {
+    if (!node.isTextblock) return true;
+
+    const spans: Array<FindTextMatch & { docFrom: number }> = [];
+    let text = '';
+    node.descendants((child, offset) => {
+      if (child.isText && child.text) {
+        const from = text.length;
+        text += child.text;
+        spans.push({ from, to: text.length, docFrom: blockPos + 1 + offset });
+      } else if (child.isInline) {
+        // Prevent a phrase from matching invisibly across an atom or hard break.
+        text += '\u0000';
+      }
+      return true;
+    });
+
+    for (const match of findTextMatches(text, query)) {
+      const startSpan = spans.find((span) => match.from >= span.from && match.from < span.to);
+      const endOffset = match.to - 1;
+      const endSpan = spans.find((span) => endOffset >= span.from && endOffset < span.to);
+      if (!startSpan || !endSpan) continue;
+      matches.push({
+        from: startSpan.docFrom + match.from - startSpan.from,
+        to: endSpan.docFrom + match.to - endSpan.from,
+      });
+    }
+
+    return false;
+  });
+
+  return matches;
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}

package/src/frontmatterSettings.ts

@@ -0,0 +1,23 @@
+/** Canonical and legacy keys for frontmatter settings managed by the editor. */
+export const FRONTMATTER_SETTING_KEYS = {
+  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] as const },
+  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
+  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
+  coverSlide: { canonical: 'squisq-cover-slide', legacy: 'cover-slide' as const },
+} as const;
+
+/** Runtime defaults whose equivalent frontmatter entries can be omitted. */
+export const FRONTMATTER_SETTING_DEFAULTS = {
+  theme: 'standard',
+  transform: '',
+  captions: 'standard',
+  coverSlide: true,
+} as const;
+
+/** Return `null` when a setting matches its runtime default so writers remove it. */
+export function omitFrontmatterDefault<T extends string | number | boolean>(
+  value: T,
+  defaultValue: T,
+): T | null {
+  return value === defaultValue ? null : value;
+}

package/src/index.ts

@@ -89,6 +89,7 @@ export type { RawEditorProps } from './RawEditor.js';
 
 export { WysiwygEditor } from './WysiwygEditor.js';
 export type { WysiwygEditorProps } from './WysiwygEditor.js';
+export type { WriteCanvasSettings } from './writeCanvasSettings.js';
 
 export { PreviewPanel } from './PreviewPanel.js';
 export type { PreviewPanelProps } from './PreviewPanel.js';
@@ -263,6 +264,7 @@ export {
   applyRepairCommand,
   replaceAsciiFenceText,
 } from './asciiDiagram/asciiDiagramCommands.js';
+export type { ApplyAsciiDiagramCommandOptions } 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
@@ -288,9 +290,98 @@ export {
   renameNodeOp,
   resizeNodeOp,
   sanitizeAsciiLabel,
+  translateDiagramOp,
 } from './asciiDiagram/asciiDiagramOps.js';
 export { shouldPasteAsAsciiFence } from './asciiDiagram/asciiPaste.js';
 
+// Complex diagram editor — every explicit `mermaid` fence is rendered through
+// Mermaid's public renderer inside the shared diagram chrome. Flowcharts add
+// source-backed node/edge gestures and the full Mermaid shape catalog; every
+// other diagram family remains lossless render + source editing.
+export {
+  MermaidDiagramExtension,
+  MERMAID_DIAGRAM_KEY,
+  findMermaidDiagramBlockPos,
+  isMermaidDiagramNode,
+  isMermaidSourceVisible,
+  toggleMermaidSource,
+} from './mermaid/MermaidDiagramExtension.js';
+export type {
+  MermaidDiagramBlockEntry,
+  MermaidDiagramExtensionOptions,
+  MermaidDiagramPluginState,
+} from './mermaid/MermaidDiagramExtension.js';
+export { MermaidDiagramWidget } from './mermaid/MermaidDiagramWidget.js';
+export type { MermaidDiagramWidgetProps } from './mermaid/MermaidDiagramWidget.js';
+export { MermaidDiagramCanvas } from './mermaid/MermaidDiagramCanvas.js';
+export type {
+  MermaidDiagramCanvasProps,
+  MermaidNodeCanvasAction,
+} from './mermaid/MermaidDiagramCanvas.js';
+export { useMermaidDiagramData } from './mermaid/mermaidData.js';
+export type { MermaidDiagramData } from './mermaid/mermaidData.js';
+export {
+  renderMermaidDiagram,
+  inspectMermaidSource,
+  mermaidErrorMessage,
+} from './mermaid/mermaidRenderer.js';
+export type { MermaidRenderResult } from './mermaid/mermaidRenderer.js';
+export { MermaidShapePalette } from './mermaid/MermaidShapePalette.js';
+export type { MermaidShapePaletteProps } from './mermaid/MermaidShapePalette.js';
+export {
+  MERMAID_FLOWCHART_SHAPES,
+  isMermaidFlowchartShapeId,
+  normalizeMermaidFlowchartShape,
+} from './mermaid/mermaidShapes.js';
+export type { MermaidFlowchartShape, MermaidFlowchartShapeId } from './mermaid/mermaidShapes.js';
+export type {
+  MermaidEditableEdge,
+  MermaidEditableModel,
+  MermaidEditableNode,
+  MermaidFlowchartDirection,
+  MermaidFlowchartModel,
+} from './mermaid/mermaidModel.js';
+export {
+  DEFAULT_MERMAID_DIAGRAM_TYPE,
+  MERMAID_DIAGRAM_TYPES,
+  mermaidDiagramMarkdown,
+} from './mermaid/mermaidDiagramTypes.js';
+export type {
+  MermaidDiagramCategory,
+  MermaidDiagramPreview,
+  MermaidDiagramType,
+} from './mermaid/mermaidDiagramTypes.js';
+export { MermaidDiagramTypeThumbnail } from './mermaid/MermaidDiagramTypeThumbnail.js';
+
+// Code snippets — every ordinary explicit-language fence is replaced in the
+// WYSIWYG surface by a Monaco inset. The fence node remains authoritative, so
+// edits preserve the exact language tag and source when serialized to Markdown.
+export {
+  CodeSnippetExtension,
+  CODE_SNIPPET_KEY,
+  findCodeSnippetBlockPos,
+  isCodeSnippetNode,
+} from './codeSnippet/CodeSnippetExtension.js';
+export type {
+  CodeSnippetBlockEntry,
+  CodeSnippetExtensionOptions,
+  CodeSnippetPluginState,
+} from './codeSnippet/CodeSnippetExtension.js';
+export { CodeSnippetWidget } from './codeSnippet/CodeSnippetWidget.js';
+export type { CodeSnippetWidgetProps } from './codeSnippet/CodeSnippetWidget.js';
+export { replaceCodeSnippetText } from './codeSnippet/codeSnippetCommands.js';
+export { useCodeSnippetData } from './codeSnippet/codeSnippetData.js';
+export type { CodeSnippetData } from './codeSnippet/codeSnippetData.js';
+export {
+  CODE_SNIPPET_LANGUAGES,
+  codeSnippetFenceLanguageToken,
+  codeSnippetLanguageLabel,
+  codeSnippetMarkdown,
+  isCodeSnippetFenceLanguage,
+  monacoLanguageForFence,
+} from './codeSnippet/codeSnippetLanguages.js';
+export type { CodeSnippetLanguage } from './codeSnippet/codeSnippetLanguages.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
@@ -367,7 +458,11 @@ export type { JsonEditorProps } from './jsonEditor/index.js';
 // `MediaProvider`. Previously published as `@bendyline/squisq-recorder-react`;
 // folded into editor-react so it ships with the editor it's wired into.
 export { RecorderModal } from './recorder/RecorderModal.js';
-export type { RecorderModalProps, RecorderSaveResult } from './recorder/RecorderModal.js';
+export type {
+  RecorderColorScheme,
+  RecorderModalProps,
+  RecorderSaveResult,
+} from './recorder/RecorderModal.js';
 export { RecorderButton } from './recorder/RecorderButton.js';
 export type { RecorderButtonProps } from './recorder/RecorderButton.js';
 export { RecorderPanel } from './recorder/RecorderPanel.js';

package/src/markdownCodeFence.ts

@@ -0,0 +1,72 @@
+/**
+ * Source-level Markdown fenced-code detection for editor features that cannot
+ * operate on the parsed AST. The returned mask includes opening and closing
+ * fence lines, and an unclosed fence remains active through EOF.
+ */
+
+interface FenceState {
+  marker: '`' | '~';
+  length: number;
+}
+
+const FENCE_RE = /^ {0,3}(`{3,}|~{3,})(.*)$/;
+const CLOSING_FENCE_RE = /^ {0,3}(`{3,}|~{3,})[ \t]*$/;
+
+function openingFence(line: string): FenceState | null {
+  const match = FENCE_RE.exec(line);
+  if (!match) return null;
+  const run = match[1];
+  const marker = run[0] as '`' | '~';
+  // CommonMark forbids backticks in a backtick fence's info string.
+  if (marker === '`' && match[2].includes('`')) return null;
+  return { marker, length: run.length };
+}
+
+function isClosingFence(line: string, fence: FenceState): boolean {
+  const match = CLOSING_FENCE_RE.exec(line);
+  return !!match && match[1][0] === fence.marker && match[1].length >= fence.length;
+}
+
+/** One boolean per physical source line; true means the whole line is fenced code. */
+export function markdownFencedCodeLineMask(source: string): boolean[] {
+  const lines = source.split(/\r\n|\r|\n/);
+  const mask: boolean[] = [];
+  let fence: FenceState | null = null;
+
+  for (const line of lines) {
+    if (fence) {
+      mask.push(true);
+      if (isClosingFence(line, fence)) fence = null;
+      continue;
+    }
+
+    const opening = openingFence(line);
+    mask.push(opening != null);
+    fence = opening;
+  }
+
+  return mask;
+}
+
+/** Whether a 1-based physical source line is an opening, body, or closing fence line. */
+export function isMarkdownFencedCodeLine(source: string, lineNumber: number): boolean {
+  if (!Number.isInteger(lineNumber) || lineNumber < 1) return false;
+  return markdownFencedCodeLineMask(source)[lineNumber - 1] ?? false;
+}
+
+/**
+ * Replace fenced-code line contents with spaces while retaining every line
+ * ending and character offset. Raw-source scanners can safely inspect the
+ * result and use any match offsets against the original source.
+ */
+export function maskMarkdownFencedCode(source: string): string {
+  const mask = markdownFencedCodeLineMask(source);
+  let lineIndex = 0;
+  return source
+    .split(/(\r\n|\r|\n)/)
+    .map((part, index) => {
+      if (index % 2 === 1) return part;
+      return mask[lineIndex++] ? ' '.repeat(part.length) : part;
+    })
+    .join('');
+}

package/src/mediaReferences.ts

@@ -1,4 +1,5 @@
 import { splitKeyValueToken, tokenizeAttrTokens } from '@bendyline/squisq/markdown';
+import { maskMarkdownFencedCode } from './markdownCodeFence';
 
 interface MediaReferenceRange {
   start: number;
@@ -32,9 +33,10 @@ const HTML_MEDIA_ATTRS = ['src', 'href', 'poster'] as const;
  */
 export function collectMediaReferencesFromMarkdown(source: string): ReadonlySet<string> {
   const refs = new Set<string>();
-  collectMarkdownInlineReferences(source, refs);
-  collectHtmlAttributeReferences(source, refs);
-  collectAnnotationReferences(source, refs);
+  const searchableSource = maskMarkdownFencedCode(source);
+  collectMarkdownInlineReferences(searchableSource, refs);
+  collectHtmlAttributeReferences(searchableSource, refs);
+  collectAnnotationReferences(searchableSource, refs);
   return refs;
 }