Text&Code Edit+ Application Documentation

1. Overview

Text&Code Edit+ is a browser-based, dual-mode text editor designed to bridge the gap between raw code editing and formatted document creation. It operates entirely client-side, using advanced DOM manipulation to handle file generation without external servers.

What to Expect

• Dual-Engine Editing:

  • Code Engine: Powered by CodeMirror 5 for syntax highlighting, bracket matching, and indentation.

  • Document Engine: A WYSIWYG (What You See Is What You Get) editor for formatted text.

• True File Generation: The app now includes a custom conversion engine that parses your visual document and translates it into valid Rich Text Format (RTF) syntax (not just HTML saved with an .rtf extension).

• Intelligent Saving: The application automatically handles MIME types and file extensions based on the active mode.

What NOT to Expect

• Code Execution: This is an editor, not an IDE. It will highlight Python or C++ syntax, but it cannot run scripts or compile binaries.

• Complex RTF Features: The RTF generator handles standard formatting (Fonts, Sizes, Bold, Italic, Lists, Links). It does not currently support complex tables, embedded images, or custom color palettes in the exported file.

2. Supported Languages & Formats

The application supports specific file extensions and utilizes different saving strategies for each:

3. Interface Guide

A. The Toolbar

The toolbar is context-aware. It stays static for file operations but changes its lower half based on whether you are coding or writing a document.

• File Operations: Open (Folder icon), Save (Disk icon). Note: The Save button auto-detects the extension.

• Clipboard: Cut, Copy, Paste buttons are provided for touch users or restricted environments.

• Preview (Eye Icon): Only appears when HTML is selected.

B. Visual Mode (Rich Text)

When you switch to Rich Text, the CodeMirror engine is hidden, and the HTML-based visual editor loads.

• Styles: Dropdown for Headings (Title, H1-H3) and Paragraphs.

• Formatting: Bold, Italic, Underline.

• Alignment: Left, Center, Right, Justify.

• Lists: Bullet points and Numbered lists.

• Font Size: Specific point-size selection (6pt to 72pt).

• Links: Insert clickable hyperlinks.

C. Code Mode

When in a coding language (e.g., Python, JS), the interface provides:

• Line Numbers & Active Line Highlight.

• Magic Wand: Auto-indents and formats the current code block.

• Syntax Highlighting: Colors keywords based on the selected language.

4. Technical Specifications

For developers maintaining or extending the app, the following details the architecture changes in the latest update:

RTF Conversion Logic

Previously, the app saved HTML content into .rtf files. The new update implements a convertHtmlToRtf(rootNode) function that traverses the DOM tree to generate standard RTF markup.

1. Traversal: The engine recursively walks the DOM nodes of the visual editor.

2. Mapping:

   • Nodes: HTML Block elements (DIV, P, H1) are converted to \par.

   • Styles: CSS fontWeight: bold maps to \b, fontStyle: italic to \i.

   • Sizes: Computed CSS pixels are converted to RTF half-points (approx px * 1.5).

   • Unicode: Non-ASCII characters are escaped to \uN? format.

3. Blob Generation: The resulting string is saved with the MIME type application/rtf.

Libraries Used

• CodeMirror (v5.65.16): Core text editor engine.

• Tailwind CSS: Utility-first styling.

• Lucide Icons: SVG iconography.

5. Troubleshooting

• "My text color didn't save in the RTF file":

  • The current RTF converter focuses on structure and font style (Bold/Italic/Size). It does not yet generate a Color Table (\colortbl), so text colors may default to black in some viewers (like WordPad), though the HTML preview will show them.

• "Preview button is missing":

  • The live preview is exclusively available for the HTML mode. It is disabled for Markdown, PHP, and other languages to prevent security risks or rendering errors.

• Copy/Paste Issues:

  • If the on-screen Paste button is unresponsive, it is likely blocked by browser security permissions. Please use the keyboard shortcut Ctrl+V / Cmd+V.