feat(editor): Add inline preview for fragment references

[RickCogley]

Summary

When a fragment reference is inserted in the editor (via /fragment command or toolbar), it currently shows only a placeholder like "Fragment: password-vault-master-password". Users would benefit from seeing an actual preview of the fragment content.

Current Behavior

┌─────────────────────────────────────────┐
│ FRAGMENT • EN     `fragment-id`         │
│ Fragment: password-vault-master-password│
└─────────────────────────────────────────┘

Desired Behavior

┌─────────────────────────────────────────┐
│ FRAGMENT • EN     `fragment-id`         │
│ ┌─────────────────────────────────────┐ │
│ │  [Actual diagram SVG or text       │ │
│ │   content rendered inline]         │ │
│ └─────────────────────────────────────┘ │
└─────────────────────────────────────────┘

Technical Notes

The fragment-reference.ts extension already has infrastructure for this:

• preview attribute to store preview content
• onFragmentLoad callback option (not wired up)
• Rendering logic that displays preview when available (lines 94-95)

Implementation Approach

1. Create API endpoint /api/fragments/[id]/preview to return fragment content
2. Wire up onFragmentLoad callback in createEditor()
3. Call preview API when:
   • Fragment reference is inserted
   • Editor loads with existing fragment references
4. For diagram fragments: fetch SVG from R2 and display inline
5. For text fragments: show truncated content preview
6. Add loading state indicator

Files to Modify

• src/lib/editor/editor.ts - Pass onFragmentLoad to extension
• src/lib/editor/extensions/fragment-reference.ts - May need NodeView for async loading
• src/routes/api/fragments/[id]/preview/+server.ts - New endpoint
• src/lib/components/editor/HanawaEditor.svelte - Pass preview loader

Related

• Fragment reference extension: src/lib/editor/extensions/fragment-reference.ts
• HanawaEditor component: src/lib/components/editor/HanawaEditor.svelte