=== Re{code} Front HTML Editor ===
Contributors:      recodecommerce
Tags:              frontend editor, html editor, post editor, inline editor, codemirror
Requires at least: 5.9
Tested up to:      6.9
Stable tag:        3.5.1
Requires PHP:      7.4
License:           GPLv2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html

Frontend HTML editor for WordPress — edit post_content directly on the page and preview changes instantly without a page reload.

== Description ==

**Re{code} Front HTML Editor** adds a fixed toolbar to the frontend of your WordPress site (visible only to users who can edit the current post). Click **Edit**, modify the HTML directly in a full-featured CodeMirror editor, then hit **Save & Preview** — the page updates in place with no reload required.

= Features =

* **Live on-page editing** — no page reload, no switching to the backend
* **CodeMirror 5 editor** with HTML/CSS/JS syntax highlighting, tag auto-close, and bracket matching
* **Format toolbar** — Bold, Italic, Strikethrough, Highlight, Inline code, H2, H3, Paragraph, Blockquote, UL, OL, Insert link, Insert image
* **Keyboard shortcuts** — Ctrl+E (open/close), Ctrl+S (save), Escape (cancel), Ctrl+B/I/K
* **Custom Snippets** — save any HTML block as a toolbar button; use {|} to mark where the cursor lands after inserting
* **Element Picker** — click any element on the page to discover its CSS selector, navigate ancestor breadcrumbs, and copy it to Settings
* **Dark and Light themes** (Dracula / Eclipse) configurable in Settings → Front HTML Editor
* **Configurable content selector** — choose from popular theme defaults or enter any custom CSS selector
* **Secure** — nonce-verified AJAX, `edit_post` capability check per-post, content sanitized with `wp_kses_post`
* Works with Twenty* themes, Astra, GeneratePress, Kadence, Divi, OceanWP, Flatsome, and most other themes

= How It Works =

1. Visit any post or page on the frontend while logged in as an editor or administrator
2. The **✏️ HTML Editor** toolbar appears at the top of the page
3. Click **Edit** — the plugin loads the raw `post_content` from the database into the CodeMirror editor
4. Edit the HTML, use the format toolbar or keyboard shortcuts
5. Click **💾 Save & Preview** — your changes are saved and the page content updates instantly
6. Use **🎯 Pick element** if the editor can't find the content area — click any block to get its CSS selector

= Custom Snippets =

Go to **Settings → Front HTML Editor → Custom Snippets** to add reusable HTML blocks.
Each snippet gets its own button in the editor toolbar.
Use `{|}` in the HTML code to control where the cursor appears after the snippet is inserted.

Example:

`<div class="see-also-block"><div class="see-also-title">See also:</div><ul><li><a href="{|}"></a></li></ul></div>`

= Security =

* AJAX requests are nonce-verified
* Every action checks `current_user_can('edit_post', $post_id)` for the specific post
* Saved content passes through `wp_kses_post`
* The toolbar is never rendered for unauthenticated users or users without edit rights for the current post

== Installation ==

1. Upload the `recode-front-html-editor` folder to the `/wp-content/plugins/` directory
2. Activate the plugin through the **Plugins** menu in WordPress
3. Navigate to **Settings → Front HTML Editor** to configure the content selector and editor theme
4. Visit any post or page on the frontend — the toolbar will appear for users with edit rights

== Frequently Asked Questions ==

= The editor doesn't find the content area on my theme. What do I do? =

Use the **🎯 Pick element** button in the toolbar, click on your content area, then copy the selector to **Settings → Front HTML Editor → Custom selector**.

= Which user roles can see the editor toolbar? =

Any user who has the `edit_post` capability for the currently viewed post. This typically includes Editors and Administrators, and Authors for their own posts.

= Can I use this with the block editor (Gutenberg)? =

Yes. The plugin edits the raw `post_content` stored in the database. For classic posts this is regular HTML. For Gutenberg posts this is HTML with block comments — you can edit it, but be careful not to break block markup. For block-based themes, use `.wp-block-post-content` as the selector.

= Does this work on archive pages, home pages, or WooCommerce pages? =

No — the editor only activates on singular posts and pages (`is_singular()`).

== Screenshots ==

1. Frontend toolbar in dark theme — preview mode
2. CodeMirror editor open with format toolbar
3. Settings page with selector and theme options
4. Element Picker with breadcrumb ancestor navigation

== Changelog ==

= 3.5.1 =
* Fixed: removed load_plugin_textdomain() — WordPress 4.6+ loads translations automatically
* Fixed: escaped output in field_editor_theme() to satisfy Plugin Check requirements
* Updated: Tested up to WordPress 6.9

= 3.5.0 =
* Added: Custom Snippets — add any HTML block as a toolbar button via Settings
* Added: {|} cursor marker — controls where the cursor lands after snippet insert
* Added: Snippet Tips card in Settings sidebar with usage example
* Added: Distinct visual style for snippet buttons in the editor toolbar (amber color)
* Changed: Format toolbar HTML now built dynamically to support variable number of snippet buttons

= 3.4.3 =
* Changed: internal prefix renamed from `rfie` to `rfhe` (option key, nonce, AJAX actions, CSS/JS identifiers, admin page slug)
* Changed: plugin description updated — more accurate wording
* Changed: Plugin URI and Author URI now point to the dedicated plugin page on recodecommerce.com
* Added: footer block on Settings page (Plugin Page / GitHub / Contact links), consistent with other re{code}commerce plugins
* Added: `PLUGIN_URL` and `GITHUB_URL` constants for easy maintenance

= 3.4.2 =
* Security: `ajax_get_content` now verifies `edit_post($post_id)` per-post (previously only checked general `edit_posts`)
* Fixed: `body { padding-top }` no longer applies globally — only when the toolbar is active (`body.rfhe-active`)
* Fixed: Pick button colors now respect dark/light theme setting
* Fixed: CSS version comment updated to match plugin version
* Improved: `settings_errors()` replaces manual `$_GET['settings-updated']` check
* Improved: All output properly escaped with `esc_html_e()`, `esc_attr_e()`, `esc_url()`
* Added: `load_plugin_textdomain()` — strings are now translatable
* Added: `Plugin URI`, `License URI`, `Requires at least`, `Requires PHP` header fields
* Added: `uninstall.php` for clean removal
* Added: `index.php` security files

= 3.4.0 =
* Added Element Picker with ancestor breadcrumb navigation
* Added format toolbar (Bold, Italic, Strikethrough, Highlight, code, headings, lists, link, image)
* Added keyboard shortcuts (Ctrl+B, Ctrl+I, Ctrl+K, Ctrl+S, Escape)
* Added dark/light theme support (Dracula / Eclipse)
* Added configurable content selector in Settings

= 3.0.0 =
* Initial public release

== Upgrade Notice ==

= 3.5.1 =
Plugin Check fixes.