👁️ Preview Mode

Overview

Preview Mode is a premium feature that brings live, real-time previews of your formatted text with a floating preview panel. See exactly how your markdown formatting will look before saving, with beautifully styled HTML rendering that updates as you type.

Key Features

• Live Preview Panel - Floating panel shows rendered formatting in real-time
• Intelligent Positioning - Automatically positions to avoid viewport edges
• Real-Time Updates - Preview updates instantly as you type
• Rich Markdown Support - Renders bold, italic, underline, strikethrough, headings, lists, tables, links, alerts, and colored text
• Theme Integration - Adapts to Dark Mode and Custom Theme settings
• Eye Icon Button - Accessible via formatter toolbar or standalone button
• Click to Toggle - Click preview button again to close the preview
• Works Where You Need It - Budget descriptions and daily log fields

Getting Started

Prerequisites

• JT Power Tools extension installed from Chrome Web Store
• Active premium license (see Premium Features)
• Text Formatter enabled (recommended for best experience)
• Access to JobTread budget or daily log pages

Enabling Preview Mode

1. Install JT Power Tools from the Chrome Web Store
2. Activate your premium license in the extension popup
3. Click the JT Power Tools extension icon in your Chrome toolbar
4. Locate the "Preview Mode" toggle (under Premium Features)
5. Toggle it ON - the switch will turn blue
6. Navigate to any JobTread budget or daily log page
7. Look for the eye icon button on textareas

Using Preview Mode

Opening the Preview Panel

1. Navigate to a JobTread budget page or daily log page
2. Click inside a budget description field or daily log field
3. Look for the eye icon button (appears when you focus on the field)
4. Click the eye icon to open the preview panel
5. The preview panel opens next to the textarea
6. Start typing to see live updates in the preview

Closing the Preview Panel

There are several ways to close the preview panel:

• Click the preview button again - Toggles the preview off
• Click outside the textarea - Preview closes when focus leaves the field
• Press Escape - Keyboard shortcut to close the preview

Supported Markdown Formatting

Text Styling

Markdown	Result	Description
*bold text*	bold text	Bold formatting
^italic text^	italic text	Italic formatting
_underlined text_	underlined text	Underline formatting
~strikethrough~	strikethrough	Strikethrough formatting

Headings

Markdown	Description
# Heading 1	Large heading for main sections
## Heading 2	Medium heading for subsections
### Heading 3	Small heading for minor sections

Lists

Bullet Lists

- First item
- Second item
- Third item

Numbered Lists

1. First step
2. Second step
3. Third step

Text Alignment

Markdown	Description
--: Centered text	Center align the text
---: Right aligned	Right align the text

Colors

Add color to your text with the color syntax:

[!color:red] This text will be red
[!color:blue] This text will be blue
[!color:green] This text will be green
[!color:orange] This text will be orange
[!color:purple] This text will be purple

Links

[Link text](https://example.com)

Tables

| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1   | Cell 2   | Cell 3   |
| Cell 4   | Cell 5   | Cell 6   |

Blockquotes

> This is a quote
> It can span multiple lines

Alerts

Create visually distinct alert boxes:

> [!color:blue] ### [!icon: info] Information
> This is an informational alert
> It can contain multiple lines

> [!color:yellow] ### [!icon: exclamationTriangle] Warning
> This is a warning alert

> [!color:red] ### [!icon: octogonAlert] Danger
> This is a danger alert

> [!color:green] ### [!icon: checkCircle] Success
> This is a success alert

Available Alert Icons

• lightbulb - Light bulb icon
• info / infoCircle - Information icon
• exclamationTriangle - Warning triangle
• checkCircle - Success checkmark
• octogonAlert - Danger/alert icon

Available Alert Colors

• blue - Information (blue background)
• yellow - Warning (yellow background)
• red - Danger (red background)
• green - Success (green background)
• orange - Notice (orange background)
• purple - Custom (purple background)

Preview Panel Features

Intelligent Positioning

The preview panel automatically positions itself to ensure maximum visibility:

• Right of textarea - Default position if space available
• Left of textarea - If not enough space on the right
• Below textarea - If not enough space on left or right
• Above textarea - If would go off bottom of viewport
• Scrolls with page - Panel stays visible when scrolling

Real-Time Updates

The preview updates instantly as you type:

• No need to click "refresh" or "preview"
• See changes immediately as you format text
• Perfect for experimenting with formatting
• Helps catch formatting errors before saving

Theme Integration

Preview Mode adapts to your appearance settings:

• Dark Mode - Dark preview panel with light text
• Custom Theme - Matches your custom color palette
• Default Theme - Clean white background with dark text
• Consistent Styling - Preview matches your JobTread theme

Where It Works

Compatible Fields

Preview Mode works on specific JobTread text fields:

• Budget Pages - Description fields for line items and groups
• Daily Log Fields - All daily log text entry fields
• Formatted Textareas - Any textarea with formatting support

Not Compatible With

• Time entry notes fields
• Time Clock notes field in sidebar
• Single-line input fields
• Read-only or disabled fields
• Files, vendors, or customers pages (excluded by design)

Common Use Cases

Budget Descriptions

Preview complex budget descriptions before saving:

• Check that tables render correctly
• Verify heading hierarchy makes sense
• Ensure colors provide good contrast
• Test alert boxes for important notes
• Preview links to make sure they're formatted correctly

Daily Logs

Format professional daily log entries:

• Use headings to organize the day's activities
• Create bullet lists for completed tasks
• Add alerts for important events or issues
• Color-code different types of activities
• Preview before submitting to ensure clarity

Client Communications

Craft well-formatted client-facing content:

• Preview how clients will see your formatted text
• Check readability of complex information
• Verify that tables are easy to understand
• Ensure professional appearance before saving

Best Practices

Formatting Tips

1. Preview Before Saving - Always check the preview before saving complex formatting
2. Use Headings Wisely - Preview helps you see if heading levels are appropriate
3. Check Table Formatting - Tables can be tricky; preview ensures they render correctly
4. Test Alert Colors - Preview shows which alert colors work best for your message
5. Verify Nested Formatting - Check that bold inside lists, colors in tables, etc. look good

Workflow Integration

1. Write your content with markdown formatting
2. Open the preview panel to see the rendered result
3. Adjust formatting based on what you see in the preview
4. Close preview and save when satisfied

Performance Tips

• Close preview when not needed to reduce browser resource usage
• Preview panel automatically closes when you navigate away
• Only one preview can be open at a time for better performance

Troubleshooting

Preview Button Doesn't Appear

Solution:

• Verify Preview Mode is enabled in extension popup
• Ensure you have an active premium license
• Refresh the JobTread page
• Make sure you're on a budget or daily log page
• Check that you're clicking in a compatible textarea
• Verify the field is not excluded (time entry notes, etc.)

Preview Panel Not Opening

Solution:

• Try clicking the preview button again
• Check browser console (F12) for JavaScript errors
• Disable other extensions temporarily to check for conflicts
• Reload the extension from chrome://extensions
• Make sure the textarea has content (empty fields show "No content to preview")

Preview Not Updating

Solution:

• Close and reopen the preview panel
• Verify the textarea still has focus
• Try typing in the field to trigger an update
• Refresh the page if updates seem stuck

Preview Panel Positioned Incorrectly

Solution:

• The panel auto-positions based on available space
• Try resizing your browser window
• Scroll to give the panel more space
• Close and reopen to recalculate position

Formatting Not Rendering in Preview

Solution:

• Check that you're using the correct markdown syntax (see supported formatting above)
• Some markdown features may require specific syntax (e.g., tables need proper pipe alignment)
• Try simpler formatting first to isolate the issue
• Refer to the Text Formatter guide for proper syntax

Preview Stays Open After Clicking Away

Solution:

• Click the preview button again to toggle it off
• Click outside the textarea to trigger the blur event
• Press Escape to close the preview
• If stuck, refresh the page

Premium License Not Recognized

Solution:

• Ensure you installed from the Chrome Web Store (not GitHub)
• Verify your license is activated in the extension popup
• Try reactivating your license
• Check that your license hasn't expired
• See Premium Features for license troubleshooting

Technical Details

How It Works

Preview Mode uses advanced markdown parsing to render your formatted text:

• Markdown Parser - Custom parser converts markdown to HTML
• Real-Time Rendering - Updates on every keystroke via input event listener
• Floating Panel - Absolutely positioned div with intelligent placement algorithm
• Theme Detection - Reads extension settings to apply correct theme
• CSS Styling - Applies theme-specific styles from preview-mode.css

Supported Markdown Extensions

Preview Mode supports custom markdown extensions for JobTread:

• Custom color syntax: [!color:name]
• Icon syntax: [!icon:name]
• Alert blocks with color and icon combinations
• Text alignment with --: and ---:
• Modified italic syntax using ^ instead of traditional * or _

Performance Optimizations

• Only one preview panel active at a time
• Event listeners cleaned up when preview closes
• Mutation observer watches for new textareas efficiently
• Theme detection cached to reduce Chrome storage API calls
• Lightweight markdown parser optimized for speed

Keyboard Shortcuts

Shortcut	Action
Click Eye Icon	Toggle preview panel
Escape	Close preview panel
Click Outside	Close preview panel

Combining with Other Features

Text Formatter + Preview Mode

The perfect combination for formatted text:

• Use Text Formatter toolbar to insert markdown formatting
• Click preview button to see rendered result
• Preview updates automatically as you format
• No need to memorize markdown syntax

Dark Mode + Preview Mode

• Preview panel uses dark theme automatically
• Easy to read in low-light conditions
• Matches your overall JobTread appearance

Custom Theme + Preview Mode

• Preview panel matches your custom color palette
• Consistent branding throughout JobTread
• Preview shows exactly how colors will look

Related Guides

• Text Formatter - Learn markdown syntax and formatting
• Premium Features - Activate your premium license
• Dark Mode - Enable dark theme for preview panel
• Custom Theme - Customize preview panel colors
• Installation & Setup - Get started with JT Power Tools