PCF Markdown Editor Control

A rich, feature-packed Markdown editor control for Power Platform applications built with Power Apps Component Framework (PCF).

Features

• Preview-First Design: Shows rendered markdown by default for better readability
• On-Demand Source Editing: Access the source editor when needed via toolbar button
• VS Code-Style Minimap: Visual document overview with color-coded content types
• Live Preview: Real-time preview of rendered markdown content
• Formatting Toolbar: Quick access buttons for common markdown formatting
  • Bold and italic text
  • Headers (H1, H2, H3)
  • Bullet and numbered lists
  • Links and code blocks
  • Blockquotes
• Three-Panel Layout: Preview, editor, and document minimap when editing
• Full Screen Mode: Maximize the editor for distraction-free writing
• Responsive Design: Adapts to different screen sizes and container dimensions
• Configurable Properties: Customize behavior through Power Apps properties

Layout Design

Default View (Preview Mode)

• Main Content: Full-width rendered markdown preview
• Toolbar: Show Editor button and Full Screen option

Editor View (When "Show Editor" is clicked)

• Left Panel (40%): Rendered markdown preview
• Center Panel (40%): Source code editor
• Right Panel (20%): VS Code-style minimap with color-coded overview

Properties

Input Properties

• markdownContent (Multiple Line Text) - The markdown content to edit/display
• showEditor (Yes/No) - Whether to show the editor panel by default (default: No)
• editorHeight (Whole Number) - Height of the editor in pixels (default: 400)
• readOnly (Yes/No) - Whether the editor is read-only (default: No)

Output Properties

• markdownContent - The updated markdown content from the editor

Usage

1. In Power Apps Studio:

   • Add the control to your form or canvas app
   • Bind the markdownContent property to a text field in your data source
   • Configure the display properties as needed

2. In Model-Driven Apps:

   • Add the control to a form field for multiple line text fields
   • Configure the control properties in the field properties panel

Toolbar Actions

Button	Action	Markdown Syntax
B	Bold text	**text**
I	Italic text	*text*
H	Headers	# H1, ## H2, ### H3
•	Bullet list	- item
1.	Numbered list	1. item
🔗	Links	[text](url)
<>	Code	`code`
"	Blockquote	> quote
✏️	Toggle editor	Show/hide source editor
⛶	Full screen	Maximize editor

Document Minimap

When the editor is visible, a VS Code-style minimap appears on the right side of the editor:

• Visual Overview: Scaled-down representation of the entire document
• Color-Coded Elements: Different colors for various markdown elements:
  • Headers: Blue shades (darker for higher levels H1-H6)
  • Code Blocks: Brown color for code sections
  • Blockquotes: Purple color for quoted text
  • Lists: Green color for bullet and numbered lists
  • Text: Gray color for regular paragraphs
• Viewport Indicator: Blue highlight showing current visible area
• Quick Navigation: Click anywhere on the minimap to jump to that location
• Collapsible Design: Click header to minimize/expand the minimap

Minimap Features

• Real-time Updates: Automatically reflects document structure changes
• Scroll Synchronization: Viewport indicator follows editor scroll position
• Smart Line Representation: Line width varies based on content length
• Responsive Design: Adapts to document length and content complexity
• Hover Effects: Visual feedback when hovering over minimap lines

Keyboard Shortcuts

The editor supports standard keyboard shortcuts for common formatting actions when text is selected:

• Ctrl+B: Make selected text bold
• Ctrl+I: Make selected text italic

Building and Deployment

Prerequisites

• Node.js (version 14 or higher)
• Power Platform CLI
• Power Apps Component Framework

Build Steps

1. Clone or download the project

2. Install dependencies:

   npm install

3. Build the control:

   npm run build

4. Test the control:

   npm run start

5. Create solution package:

   pac solution init --publisher-name YourName --publisher-prefix yourprefix
   pac solution add-reference --path ./
   msbuild /p:configuration=Release

Technical Details

Dependencies

• React 16.8.6: UI framework
• Fluent UI React 8.29.0: Microsoft's design system components
• Marked 5.1.1: Markdown parsing and rendering

Browser Support

• Modern browsers that support ES2020
• Internet Explorer 11 (with polyfills)
• Mobile browsers (responsive design)

Security

The control uses the marked library for markdown parsing, which provides built-in XSS protection. The rendered HTML is safely inserted using React's dangerouslySetInnerHTML with sanitized content.

Customization

The control can be customized through:

1. CSS Variables: Modify the included CSS file for styling changes
2. Configuration Properties: Use the Power Apps property panel
3. Code Modifications: Extend the React components for additional features

Troubleshooting

Common Issues

1. Control not showing: Ensure all dependencies are installed and the build was successful
2. Styling issues: Check that the CSS file is properly referenced in the manifest
3. Preview not updating: Verify that the markdown syntax is valid

Debug Mode

Use the browser developer tools to inspect the control and check for JavaScript errors. Enable verbose logging in the control's development mode.

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is available under the MIT License. See the LICENSE file for details.

Version History

• 1.0.0: Initial release with core markdown editing features
  • Text editor with syntax highlighting
  • Live preview panel
  • Formatting toolbar
  • Full screen mode
  • Configurable properties