A comprehensive PowerApps Component Framework (PCF) control that provides a universal textbox component using Fluent UI React v9. The component supports multiple text formats including Markdown, JSON, HTML, Rich Text, and Plain Text with advanced rendering capabilities.
- 🎯 Multiple Text Formats: Supports Markdown, JSON, HTML, Rich Text, and Plain Text
- 🎨 Modern UI: Built with Fluent UI React v9 for consistent Microsoft design language
- 📊 Mermaid Diagrams: Renders flowcharts, sequence diagrams, and more within Markdown
- 🧮 Mathematical Expressions: KaTeX support for complex mathematical notation
- 🎨 Syntax Highlighting: Code blocks with language-specific highlighting
- 🖼️ Image Modal: Click-to-zoom functionality with keyboard controls
- 🐛 Debug Mode: View rendered HTML source for troubleshooting
- 📱 Responsive Design: Adapts to container size and device capabilities
- ♿ Accessibility: ARIA labels and keyboard navigation support
| View Type | Screenshot |
|---|---|
| Markdown View |  |
| JSON View |  |
| Debug View |  |
| Model-Driven App |  |
- Download the latest release from GitHub Releases
- Import the solution to your Power Platform environment
- Add the control to your forms or canvas apps
# Clone the repository
git clone https://github.com/illusion615/PCF-Universal-Textbox-Fluent.git
cd PCF-Universal-Textbox-Fluent
# Install dependencies
npm install
# Build and package
npm run build
npm run rebuildPCF-Universal-Textbox-Fluent/
├── 📁 docs/ # 📚 Comprehensive documentation
│ ├── ARCHITECTURE.md # System architecture and design
│ ├── DEVELOPMENT.md # Development guide and best practices
│ ├── DEPLOYMENT.md # Deployment instructions and troubleshooting
│ ├── API.md # Complete API reference
│ └── TODO.md # Roadmap and known issues
├── 📁 UniversalTextbox/ # 🎯 Main control implementation
│ ├── index.ts # PCF control class
│ ├── UniversalTextboxComponent.tsx # React component
│ ├── UniversalTextboxComponent.css # Component styles
│ └── ControlManifest.Input.xml # PCF manifest
├── 📁 UniversalTextboxFluentSolution/ # 📦 Solution packaging
├── 📁 screenshots/ # 📸 Documentation images
├── 📁 types/ # 📝 TypeScript definitions
└── 📄 Configuration files # Build and development setup
| Property | Type | Description | Default |
|---|---|---|---|
| Text | Text |
Main text content (bound field) | Required |
| Text Type | Enum |
Format: Markdown(1), JSON(2), HTML(3) | Markdown |
| Display Mode | Enum |
View(1), Edit(2), View and Edit(3) | View |
| Debug Mode | Boolean |
Enable debug view | false |
| Font Size | Text |
Custom font size | Optional |
| Background Color | Text |
Custom background color | Optional |
| Line Height | Text |
Custom line height | Optional |
- Mermaid Diagrams: Use
mermaidcode blocks for flowcharts, sequence diagrams, gantt charts - Mathematical Expressions: LaTeX syntax with
$...$for inline and$$...$$for block math - Syntax Highlighting: 190+ programming languages supported
- Tables: GitHub Flavored Markdown table support
- HTML Integration: Embed HTML within markdown content
- Collapsible Tree: Navigate large JSON structures easily
- Type Highlighting: Visual distinction for strings, numbers, booleans, null
- Error Handling: Graceful handling of invalid JSON with error display
- Image Zoom: Click any image to open in modal with zoom controls
- Copy Function: One-click content copying to clipboard
- Edit Mode: Live editing with auto-resize textarea
- Debug View: Inspect rendered HTML for troubleshooting
| Document | Description |
|---|---|
| Architecture Guide | System design, component architecture, and data flow |
| Development Guide | Setup, coding guidelines, and contribution instructions |
| Deployment Guide | Installation, configuration, and troubleshooting |
| API Reference | Complete API documentation and examples |
| Roadmap & Issues | Known issues, feature roadmap, and technical debt |
- Node.js 14.x or higher
- PowerApps CLI (latest version)
- Visual Studio Code (recommended)
# Start development server
npm run start
# Watch mode for continuous development
npm run start:watch
# Lint and fix code
npm run lint:fix
# Clean build artifacts
npm run clean# Create optimized production build
npm run build
# Package solution for deployment
npm run rebuild- Power Platform environment with PCF support
- System Administrator or System Customizer role
- Attachment size limit: Minimum 100MB (see deployment guide)
- Download latest solution from releases
- Import solution to Power Platform environment
- Configure control properties on forms/apps
- Test functionality in target environment
⚠️ Important: Large bundle size may require increasing attachment limits. See Deployment Guide for details.
- Framework: PowerApps Component Framework (PCF)
- Frontend: React 16.14.0 + TypeScript 4.9.5
- UI Library: Fluent UI React v9.46.2
- Build Tool: Webpack with optimization
- Text Processing: markdown-it, Mermaid, KaTeX, highlight.js
- Chrome 80+
- Firefox 74+
- Safari 13+
- Edge 80+
- Code splitting: Separate chunks for better loading
- Minification: Terser for JavaScript, CSS minimizer
- Tree shaking: Removes unused code
- Performance: Lazy loading for heavy features
We welcome contributions! Please see our Development Guide for details.
- Fork the repository
- Create a feature branch
- Make your changes with tests
- Update documentation
- Submit a pull request
- TypeScript with strict mode
- ESLint configuration
- React functional components with hooks
- Comprehensive documentation
- ✅ Mermaid diagram support
- ✅ Mathematical expressions (KaTeX)
- ✅ Syntax highlighting
- ✅ Image modal with zoom
- ✅ JSON tree viewer
- 🔄 Layout and sizing improvements
- 🔄 Rich text editor integration
- 🔄 Performance optimizations
- 🔄 Enhanced accessibility
See TODO.md for complete roadmap and known issues.
- Bug Reports: GitHub Issues
- Feature Requests: GitHub Discussions
- Documentation: Project Wiki
- Community: Power Platform Community
This project is licensed under the MIT License - see the LICENSE file for details.
⭐ Star this repo if you find it useful! ⭐
📥 Download Latest Release • 📖 Read the Docs • 🐛 Report Bug • 💡 Request Feature