InfiEditor is a feature-packed, distraction-free WYSIWYG (What You See Is What You Get) editor embedded directly inside Visual Studio Code.
Designed for developers who want to write documentation, blogs, or notes visually without wrestling with raw syntax, while retaining the ability to export clean Markdown and HTML.
✨ Key Features
✍️ Powerful Typography & Formatting
Rich Text Styling: Bold, Italic, Underline, Strikethrough, Subscript, and Superscript.
Font Customization: Choose from modern fonts like Poppins, Arial, Courier New, Georgia, and Verdana.
Highlighter: Custom text colors and background highlight colors.
Blocks: Support for Blockquotes and Code Blocks (<pre>).
🚀 Productivity Tools
Slash Commands: Type / to open a quick menu for inserting headings, lists, tables, images, and code blocks.
Markdown Shortcuts: Auto-format text as you type:
# → Heading 1
## → Heading 2
> → Blockquote
- or * → Bullet List
1. → Numbered List
``` → Code Block
Focus Mode: Toggle a distraction-free mode that hides all toolbars and status bars.
Read Aloud: Built-in Text-to-Speech to proofread your document audibly.
🖼️ Media & Tables
Interactive Tables: Insert tables with a visual picker. Use the Floating Table Toolbar to add/delete rows and columns easily.
Media Support:
Insert images via URL.
Drag & Drop support for resizing images and tables directly in the editor.
Embed Videos (YouTube) and SVGs.
Smart Containers: Insert pre-styled alert boxes:
🔵 Info
🟢 Success
🟡 Warning
🔴 Error
🛠️ Developer Friendly
Source View: Toggle between the Visual Editor and the raw HTML Source Code (powered by CodeMirror).
Import/Export:
Import: Open .html, .txt, or .md files directly.
Export: Save your work as clean HTML or Markdown (.md) files.
Theme Sync: Automatically detects VS Code's theme (Light/Dark) and adjusts the UI accordingly.
🎮 Usage Guide
1. Opening the Editor
Open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P) and type:
2. Floating Toolbars
Text: Select any text to see a floating toolbar for quick formatting (Bold, Italic, H2, Quote, Lists).
Images/Media: Click an image to resize it using drag handles or access the media toolbar (Cut/Copy/Delete).
Tables: Click inside any table cell to reveal row/column controls.
3. Keyboard Shortcuts
Key
Action
/
Open Slash Command Menu
Ctrl+B / Cmd+B
Bold
Ctrl+I / Cmd+I
Italic
Ctrl+U / Cmd+U
Underline
Ctrl+Z / Cmd+Z
Undo
Ctrl+Y / Cmd+Shift+Z
Redo
📦 Extension Settings
This extension runs as a webview and currently uses internal state management.
Global Theme: Respects the active VS Code Color Theme.
File Access: Uses a secure context. Exporting files currently triggers a browser-style download dialog.
🔧 Tech Stack
This extension is built using robust open-source libraries:
Tailwind CSS (Styling)
CodeMirror (Source Code Editing)
Turndown (HTML to Markdown Conversion)
Marked.js (Markdown to HTML Conversion)
FontAwesome / SVG Sprites (Icons)
⚠️ Known Issues & Limitations
FileSystem Access: Due to Webview security restrictions, Ctrl+S does not yet overwrite the file on disk directly. Please use the Export button in the toolbar to save your work.
Images: Local images must be drag-and-dropped (converted to Base64) or hosted via a URL. Relative paths to workspace files require specific configuration in future updates.
🤝 Contributing
Found a bug or have a feature request?
Fork the repository.
Create a new branch (git checkout -b feature/AmazingFeature).
Commit your changes (git commit -m 'Add some AmazingFeature').
Push to the branch (git push origin feature/AmazingFeature).
Open a Pull Request.
📄 License
Distributed under the MIT License. See LICENSE for more information.
