Add textinput directive with Dexie store persistence

[Copilot]

Implement text-input markdown directive

This PR adds a new ::textinput directive that enables users to input text that is stored in the Dexie store.

Implementation Plan

• Explore repository structure and understand directive pattern
• Set up build environment and verify tests pass
• Extend Dexie store schema to include textinput table
• Create remarkDirectiveTextinput.ts for the directive logic
• Create directive assets (client.js and style.css)
• Register directive in process.ts
• Create comprehensive tests
• Build and test the implementation
• Verify manual testing with example usage
• Address code review feedback (error handling and debouncing)
• Fix light/dark mode support to respect theme toggle
• Add changeset and update changelog

Directive Syntax

::textinput{placeholder="Your solution" height="400px"}

Screenshots

Light Mode

Dark Mode

Implementation Details

Changes Made:

1. Store Extension: Added textinput: 'id,text' to Dexie store schema in assets/store.js
2. Directive Logic: Created remarkDirectiveTextinput.ts that:
   • Accepts placeholder, height, and optional id attributes
   • Generates a textarea element with proper styling
   • Uses hash-based ID generation for uniqueness
3. Client Script: Created directive-textinput/client.js that:
   • Loads saved text from Dexie store on page load
   • Saves text to store on input events with 500ms debouncing
   • Supports dynamic DOM updates via MutationObserver
   • Includes proper error handling for database operations
4. Styling: Created directive-textinput/style.css with:
   • Uses CSS variables for theme-aware colors
   • Respects manual theme toggle (not just OS preference)
   • Light mode: white background, dark text
   • Dark mode: dark background, light text
5. Tests: Created comprehensive test suite with 7 tests covering:
   • Default behavior
   • Attribute handling (placeholder, height, id)
   • Directive registration
   • Snapshot testing
6. Documentation: Added example page showing all usage patterns
7. Changeset: Added changeset for v0.63.0 release
8. Changelog: Updated website changelog with new directive information

Features:

• ✅ Automatic save to Dexie store (debounced for performance)
• ✅ Persistence across page reloads
• ✅ Customizable placeholder and height
• ✅ Multiple independent inputs per page via custom IDs
• ✅ Full light and dark mode support
• ✅ Error handling for database operations
• ✅ Responsive design

Testing:

• All 101 tests pass across 27 test files
• Manual testing confirms text persistence works correctly
• Built website successfully with directive properly integrated
• Verified theme switching works correctly in both modes

Security Summary

No security vulnerabilities were introduced. The implementation:

• Uses the existing Dexie store infrastructure
• Does not expose sensitive data
• Stores data only in the user's local browser storage
• Includes proper error handling to prevent unhandled exceptions

Original prompt

Implement a new markdown directiv text-input. This directive should enable a user to input text. This should be stored in the dexie store. So you have to expand the store. The syntax should look like this:

::textinput{placeholder="Your solution" height="400px"}

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
hyperbook-4fwa	Ready	Preview	Comment	Nov 5, 2025 10:22pm

[mikebarkmin]

@copilot the text input does not respect light mode only dark mode.

[Copilot]

@copilot the text input does not respect light mode only dark mode.

Fixed in commit 43d14fc. The directive now uses CSS variables (--color-background, --color-text, --color-nav-border, --color-text-deactivated) instead of hardcoded colors and media queries, so it properly respects the theme toggle.

Light mode:

Dark mode:

[mikebarkmin]

@copilot add a changeset and update the changelog in website/en

[Copilot]

@copilot add a changeset and update the changelog in website/en

Done in commit e5071a8. Added:

• Changeset file .changeset/add-textinput-directive.md marking this as a minor version bump to @hyperbook/markdown
• Updated website/en/book/changelog.md with v0.63.0 entry describing the new textinput directive feature