The Experience Philosophy

Every custom block shares the same DNA: zero accidental drags, pixel-perfect controls tucked into a consistent corner, and a strict promise that heavy lifting happens behind the curtain. The writer should feel welcoming to first-time users and unstoppable for power editors. That north star gives us three pillars:

• Frictionless media handling – Upload once, resize with a handle, delete with a friendly button, and keep everything authenticated automatically.
• Intelligent assistance – AI generation, regeneration, and in-line suggestions stay out of the way until you need them, then land exactly where you are writing.
• Persistent learning widgets – Charts, flashcards, quizzes, and whiteboards cache their data, sync across reloads, and feel just as natural as plain text.

Media Extensions: Your Studio, Your Rules

Images, audio, video, and YouTube embeds share a common core built on BaseMediaExtensionOptions, meaning you get the same quality-of-life upgrades everywhere:

• Secure source handling – Tokens are appended on demand, so private assets stay private.
• Bottom-right control cluster – Delete, reset, and resize controls live in muscle memory territory and never overlap content.
• Resizing with feedback – Pointer-driven handles snap sizes, keep minimum widths, and write dimensions back to the node attributes.
• Original-dimension reset – Lost the perfect crop? One click restores the native resolution.

Highlights

1. ImageExtension keeps aspect ratios, strips stale auth tokens, and supports authenticated Cloudinary/CDN URLs.
2. VideoExtension auto-detects intrinsic dimensions, respects posters, and supports shift-drag freeform resizing.
3. AudioExtension focuses on width-only resizing, preload metadata, and accessible controls.
4. YoutubeExtension sanitizes every link, builds embed URLs with optional nocookie mode, and remembers custom playback parameters.
5. DocumentExtension surfaces metadata-rich download cards with file size, mime type, and secure direct links.

Interactive Canvas Nodes

When text is not enough, Senthema offers two drawing surfaces that respect flow while embracing creativity.

TLDraw Whiteboard

Built on TLDraw v2 with lazy-loaded bundles, the TldrawWhiteboardNode captures snapshots, filters out base64 blobs to keep documents lean, and supports fullscreen immersion. Controls sit quietly in the corner, and debounced persistence means you never lose a stroke.

Canvas Whiteboard

The classic WhiteboardNode gives you brush presets, erasers, undo/redo stacks, and one-click exports. Every path is JSON-serialized, stored in attributes, and redrawn using a carefully tuned render loop.

Data & STEM Powerhouses

Researchers, educators, and builders need more than paragraphs. Our data-driven nodes keep insights visual.

Plotly Charts

ChartNode lazy-loads Plotly, preserves attrs for titles and axes, and opens an animator-grade editor with dataset CRUD, color pickers, and type switching (bar, line, scatter). The view memoizes props so re-renders happen only when data changes.

Desmos Graphs

For algebraic explorations, DesmosNode embeds the official API, persists expressions as JSON, and lets authors add, edit, or remove equations without touching raw configs.

Math in Every Form

• MathInline and MathBlock channel KaTeX for crisp typesetting, with inline editing and atom-level node views.
• CodeBlockWithControls wraps Lowlight syntax highlighting in a custom shell featuring language auto-detection, telemetry-friendly defaults, and a hoverable delete action.

Learning Widgets: Flashcards & Quizzes

senthema’s writer doubles as a study studio. The widget ecosystem marries service data with responsive UI—and it never fetches twice if it can help it.

Flashcard Node

Backed by nodeDataCache, flashcards pull once, animate flips, shuffle decks, and stay resilient to unmounts. A full-screen learner mode keeps focus while inline controls handle delete and navigation.

Quiz Node

QuizNode interprets multiple question types—multiple choice, fill-in-the-blank, true/false—and leans on async helpers for “compare answer” and “explain answer” flows. Every attempt is normalized before hitting the API, so analytics remain trustworthy.

• Debounced attribute updates prevent jitter.
• Global cache avoids duplicate network calls across widgets.
• Deletion is a hover-revealed action that matches the media suite’s affordances.

AI Assistance: Commands, Regeneration, Suggestions

senthema’s writer is fluent in AI-first workflows:

• AIGenerateExtension listens for /generate slash commands and pipes instructions into OpenAI workflows without disrupting selection state.
• AIRegenerateExtension captures the exact range you highlight and invokes regeneration flows, complete with keyboard shortcuts.
• AISuggestionExtension watches transactions, debounces API calls, maps plain-text indices back to document positions, and renders non-intrusive decorations for grammar or style hints.

Because each extension reads tokens and IDs via getter functions, the editor can hot-swap spaces or services without recreating the extension—a huge performance win for long sessions.

Productivity Niceties You’ll Feel Every Day

Why Every Node Is Undraggable

Drag handles are great in theory, but they often steal focus from authors. We flipped the default: all custom nodes set draggable: false, yet remain perfectly selectable. Combined with higher z-index controls and explicit focus commands, it’s almost impossible to misfire an action while editing.

The Road Ahead

• Collaborative presence – Multi-cursor awareness and shared widget state.
• Node analytics – Insight into which learning blocks drive outcomes.
• Custom voice overlays – Pair media nodes with AI-generated narration clips.

If you’ve dreamed about turning documents into studios, labs, and classrooms, the Senthema editor is already there—and we’re still iterating.

Ready to Build With Us?

Open any space, hit “Writer” and start experimenting with the nodes above. For team-wide rollouts or custom integrations, reach out at hello@Senthema.com.