📝 Text Formatter

Overview

The Text Formatter feature brings powerful rich text editing capabilities to JobTread's text fields. With a Microsoft Word-style toolbar and keyboard shortcuts, you can format budget descriptions, notes, and other text areas with professional styling.

Key Features

• Rich Formatting Toolbar - Appears automatically when you click in text fields
• Keyboard Shortcuts - Ctrl/Cmd + B/I/U for bold, italic, underline
• Active State Detection - Buttons highlight to show current formatting
• Smart Color Switching - Click different colors to change, same color to remove
• Text Styling - Bold, italic, underline, strikethrough
• Headings - H1, H2, H3 for structured content
• Lists - Bullets and numbered lists
• Advanced Features - Tables, links, quotes, alerts, text alignment
• Color Options - Multiple text colors with visual preview

Getting Started

Prerequisites

• JT Power Tools extension installed in Chrome
• Access to JobTread pages with text fields

Enabling the Feature

1. Click the JT Power Tools extension icon in your Chrome toolbar
2. Locate the "Text Formatter" toggle
3. Toggle it ON - the switch will turn blue
4. Navigate to any JobTread page with text fields (Budget, Notes, etc.)
5. Click in any text field to see the formatting toolbar appear

Using the Toolbar

Accessing the Toolbar

1. Click inside any text field or text area
2. The formatting toolbar appears above the field
3. Select text you want to format, or place cursor where you want to start formatting
4. Click toolbar buttons to apply formatting

Toolbar Buttons

Text Styling

Button	Function	Shortcut
B	Bold text	Ctrl/Cmd + B
I	Italic text	Ctrl/Cmd + I
U	Underline text	Ctrl/Cmd + U
S	Strikethrough text	Button only

Headings

• H1 - Large heading for main sections
• H2 - Medium heading for subsections
• H3 - Small heading for minor sections

Lists

• Bullet List - Unordered list with bullet points
• Numbered List - Ordered list with numbers

Alignment

• Left - Align text to the left
• Center - Center text
• Right - Align text to the right

Colors

Multiple color options for text:

• Red
• Blue
• Green
• Orange
• Purple
• Black (default)

Advanced Features

• Link - Insert hyperlinks
• Table - Create tables (basic structure)
• Quote - Format text as a blockquote
• Alert - Highlight important information

Keyboard Shortcuts

Essential Shortcuts

Windows/Linux	Mac	Function
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

Active State Detection

How It Works

The toolbar intelligently detects your current formatting:

1. Place your cursor in any formatted text
2. The toolbar buttons highlight to show active formatting
3. Blue highlight = that format is currently applied
4. Click a highlighted button to remove that formatting

Example

• Place cursor in bold text → Bold button highlights
• Place cursor in red text → Red color button highlights
• Place cursor in bold italic → Both Bold and Italic buttons highlight

Common Use Cases

Budget Descriptions

Format budget line item descriptions for clarity:

• Use bold for important materials or costs
• Use italic for notes or special instructions
• Use colors to categorize items (red for urgent, blue for optional)
• Use lists for itemized breakdowns

Project Notes

Create structured, professional notes:

• Use H1/H2/H3 for section headers
• Use bullet lists for action items
• Use numbered lists for sequential steps
• Use blockquotes for client requests
• Use alerts for critical information

Client Communications

Enhance readability of client-facing content:

• Use headings to organize long messages
• Use bold for key points or decisions
• Use lists to make options clear
• Use links to reference documents or resources

Best Practices

Formatting Tips

1. Don't Overformat - Use formatting sparingly for maximum impact
2. Consistent Style - Stick to a consistent formatting scheme within a project
3. Headings Hierarchy - Use H1 for main topics, H2 for subtopics, H3 for details
4. Color Meaning - Establish color meanings (e.g., red = urgent, blue = info)
5. Lists for Clarity - Use lists instead of long paragraphs when possible

Accessibility Considerations

• Avoid using color alone to convey meaning (add bold or underline too)
• Don't use all caps for emphasis (use bold or headings instead)
• Keep color combinations readable (avoid red on blue, etc.)
• Use headings in order (don't skip from H1 to H3)

Where It Works

Compatible Fields

Text Formatter works on most JobTread text inputs:

• Budget Pages - Description fields for line items and groups
• Notes - Project notes and comments
• Tasks - Task descriptions and notes
• Emails - Draft emails to clients (if JobTread supports rich text)
• Custom Fields - Any custom text areas you've created

Not Compatible With

• Single-line input fields (name fields, numbers, etc.)
• Non-editable/read-only text
• Fields that JobTread specifically locks down

Troubleshooting

Toolbar Doesn't Appear

Solution:

• Verify Text Formatter is enabled in extension popup
• Refresh the JobTread page
• Make sure you're clicking in an editable text field (not a label or button)
• Check browser console (F12) for errors

Keyboard Shortcuts Not Working

Solution:

• Ensure your cursor is inside the text field
• Check if JobTread or another extension is overriding the shortcuts
• Try using the toolbar buttons instead
• On Mac, make sure you're using Cmd (not Ctrl)

Formatting Disappears After Save

Solution:

• This may happen if JobTread's backend doesn't support HTML formatting in that field
• Try using a different field type if available
• Contact JobTread support to request rich text support for that field
• As a workaround, use plain text alternatives (like asterisks for emphasis)

Colors Look Different After Saving

Solution:

• JobTread may process colors differently - this is expected
• The formatter uses standard HTML color codes
• If critical, verify colors after saving and adjust as needed

Active State Buttons Not Highlighting

Solution:

• Make sure your cursor is directly in the formatted text, not next to it
• Some complex nested formatting may not be detected perfectly
• Refresh the page if detection seems stuck

Technical Details

React Compatibility

The formatter is designed to work with JobTread's React-based interface:

• Uses React synthetic events where available
• Falls back to native browser events when needed
• Dispatches input events to trigger React state updates
• Compatible with controlled and uncontrolled components

Content Editable

The formatter uses browser's contenteditable API:

• document.execCommand() for formatting operations
• window.getSelection() to detect active formatting
• HTML tags for structure (h1, ul, ol, etc.)
• Inline styles for colors and some formatting

Related Guides

• Budget Hierarchy Shading - Visual organization for budgets
• Dark Mode - Themed toolbar when using dark mode
• Custom Theme - Toolbar adapts to your theme
• Installation & Setup - Get started with JT Power Tools