The Highlite Pro plugin offers a seamless and user-friendly frontend experience for highlighting text, attaching notes, customizing highlight colors, and managing saved highlights. This section walks through the entire workflow from the user’s perspective.
✨ How It Works on the Frontend #
Once the plugin is installed, activated, and configured for the correct post types, it automatically enables highlight functionality on the frontend of those posts/pages.
🧑💻 Step-by-Step User Workflow #
1. Highlight Text #
- Logged-in users can select any text or entire block elements (paragraphs, list items, etc.).
- A floating 🖍️ “Highlight” button appears just below the selected text.
- Highlights work with both:
- Inline text selections
- Full blocks (like
<p>,<li>,<div>)
🛑 Note: If a guest user tries to highlight, they are redirected to the login page.
2. Color Selection #
- Clicking the 🖍️ Highlight button opens a color picker modal near the selection.
- Two color selection options:
- Preset Colors: Yellow, Red, Green, Blue
- Custom Color Picker: Offers full palette via native input
- Once a color is selected, the highlight is applied and stored.
3. Add Notes to Highlights #
- After applying a color, a SweetAlert2 modal appears with a rich-text note editor (powered by Quill.js).
- Users can:
- Add a formatted note (bold, italic, lists, etc.)
- Save the note along with the highlight
- Skip or cancel note entry
💡 Notes are saved per highlight and are retrievable later.
4. Edit or Delete Highlights #
When a user clicks on a highlighted area:
- Three contextual action buttons appear:
- 🗑️ Delete Highlight
- 📝 Edit Note
- 🖌️ Change Color
Each option triggers a corresponding modal or action:
- Notes are edited using the same rich-text editor.
- Colors can be updated via the same color picker.
- Deleting removes the highlight and associated note/text.
🧠 Behind the Scenes (Technical Summary) #
- Data Persistence: All highlight metadata (text, color, note, timestamp) is stored in the WordPress
usermetatable. - DOM Tracking: Highlights are associated with DOM paths and offsets using encoded keys.
- Auto-Restoration: Upon page reload, the plugin:
- Retrieves all highlight data
- Applies the correct colors instantly
- Ensures there’s no yellow “flash” before applying custom colors
📱 Responsive & Accessible #
- All frontend interfaces, including modals and icons, are mobile-friendly.
- SweetAlert2 modals are resizable, and Quill editor adapts to viewport dimensions.
- Action icons are clean, minimal, and use WordPress Dashicons for visual consistency.
🛡️ Security & Performance #
- Only logged-in users can save, edit, or delete highlights.
- Nonce verification is used on all actions (color, note, print, download).
- Only selected post types load the scripts/styles — optimizing page performance.
