=== codeSelector. ===
Contributors: marketincode
Donate link: https://marketincode.com/codeselector/
Tags: elementor, ai, code editor, chatgpt, custom html
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Stable tag: 1.4.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

The Visual-to-Code Bridge for Elementor. Paste ChatGPT, Claude or v0 code & edit text, images, and HTML/CSS live on canvas with 1 click.

== Description ==

**Generating UI components with AI takes 30 seconds. Editing them inside Elementor used to take 30 minutes.**

When you generate a hero section, pricing table, or bento grid in **ChatGPT, Claude, v0, Bolt, Lovable, or Cursor**, pasting 1,500 lines of raw HTML and CSS into a standard custom HTML widget creates a maintenance nightmare. Finding a single heading to fix a typo or swapping an image URL requires endless `Ctrl+F` scrolling—and generic AI CSS classes (`h1`, `button`, `.card`, `.container`) often break your WordPress theme layout.

**codeSelector.** by [Marketincode](https://marketincode.com/codeselector/) solves this forever. It is the missing **bidirectional Visual-to-Code Bridge** built specifically for Elementor designers, developers, and AI builders.

### How It Works in 3 Simple Steps

1. **Paste Your AI Code:** Drag the **codeSelector.** widget onto any Elementor page and paste your HTML/CSS snippet.
2. **1-Click Visual-to-Code Jump:** Click any element on the visual canvas—a badge, button, paragraph, or card—and the Ace code editor jumps in `< 5 ms` to its exact HTML line, highlighting the block. You can also **double-click any line in the code editor** to scroll the visual preview straight to that element.
3. **Double-Click Live Inline Editing:** Double-click any text or image directly on the Elementor preview canvas to rewrite copy in place or select a new photo from the WordPress Media Library. Your changes are automatically encoded and synced back into the exact line of HTML code.

### Free Features (Included in WordPress.org Edition)

* **Bidirectional Visual ⟷ Code Sync:** Click any visual element to highlight its exact HTML line in Ace Editor, or double-click a code line to locate it visually on the canvas.
* **Live Inline Text Editing (2x Click):** Double-click headings, paragraphs, buttons, list items, or badges to edit text directly on screen with exact character caret placement (`caretRangeFromPoint`) and multiline preservation.
* **1-Click & 2x-Click Image Replacement:** Click any `<img>` on canvas to open the floating Image Inspector. Pick a replacement photo directly from the **WordPress Media Library**, paste a custom URL, and edit SEO `alt` text with instant code synchronization.
* **Enhanced Ace Code Editor:** Syntax-highlighted editor with active line pills, automatic scrolling, and real-time preview rendering.
* **0 KB Frontend Overhead:** All bridge scripts and editor styles load **exclusively inside the Elementor editor**. Your public website visitors receive pure, clean HTML/CSS with zero extra JavaScript or performance penalty on Core Web Vitals.
* **Hardened Native Security (`wp_kses`):** Custom extended whitelist supporting modern HTML5 semantics, SVG icons, Flexbox, CSS Grid, CSS custom properties (`--var`), `clamp()`, and `calc()` while stripping unauthorized scripts, iframes, and XSS event handlers.
* **Multilingual Ready (i18n):** Fully localized interface available in English, Spanish (`es_ES`, `es_MX`), French (`fr_FR`), German (`de_DE`), Brazilian Portuguese (`pt_BR`), and Italian (`it_IT`).

### Pro Features (For Agencies, Freelancers & Power Users)

Unlock the full professional workflow with [codeSelector. Pro](https://marketincode.com/codeselector/):

* **Recursive CSS Auto-Scoping:** Automatically prefixes all `<style>` rules under the unique widget container (`[data-codeselector-id]`), intelligently handling `:root`, `body`, `html`, nested `@media` queries, `@supports`, and preserving `@keyframes` names. Generic AI styles never bleed into your header, footer, or other Elementor sections.
* **Alt + Click Direct CSS Rule Jump:** Hold `Alt` and click any element on the canvas to jump directly to the CSS selector that styles it inside your `<style>` block.
* **Ctrl / Cmd + Click JavaScript Jump:** Hold `Ctrl` (or `Cmd` on Mac) and click an interactive element to jump straight to its event listener or animation logic inside `<script>`.
* **Safe Inline `<script>` Execution:** Enable interactive JavaScript for custom sliders, tabs, accordions, countdowns, and micro-animations (strictly validated against the content author's `unfiltered_html` capability while blocking external `src` scripts).
* **Carousel & Gallery Slide Inspector:** Automatically detects multi-slide carousels and image grids, allowing you to switch between hidden slides and replace individual slide images from a unified thumbnail strip.
* **Live Link (`href`) Editing:** When editing a link or button inline, a floating `href` input appears so you can update destination URLs or anchor tags on the fly.
* **Quick Section Navigator:** A smart dropdown in the Elementor panel that indexes your `<style>` blocks, HTML comments (`<!-- 01. Hero -->`), `<h1>`/`<h2>` headings, and `<script>` sections for 1-click navigation in large files.

Learn more and see the interactive live demo at [marketincode.com/codeselector](https://marketincode.com/codeselector/).

== Installation ==

1. In your WordPress admin dashboard, go to **Plugins > Add New** and search for **codeSelector**, or upload the `codeselector.zip` file via **Upload Plugin**.
2. Click **Install Now** and then **Activate**.
3. Open any page or template with **Elementor** (compatible with Elementor Free 3.5+ and Elementor Pro 4.x).
4. In the Elementor widgets panel, find **codeSelector.** under the **Marketincode** category (or search for `codeSelector` / `AI`) and drag it onto your canvas.
5. Click any element in the starter template to test the 1-Click HTML Jump, or double-click any heading to edit text live!

== Frequently Asked Questions ==

= Does codeSelector. require Elementor Pro? =
No! **codeSelector.** works seamlessly with the free version of Elementor (version 3.5.0 and above) as well as Elementor Pro.

= Will this plugin slow down my website or affect Core Web Vitals? =
Not at all. The visual-to-code bridge, inline editor, and synchronization scripts are only enqueued inside the Elementor editor screen. On the public frontend, **codeSelector. adds 0 KB of JavaScript and 0 extra HTTP requests**, rendering only your sanitized HTML and CSS.

= Can I use code generated by ChatGPT, Claude, v0, Bolt, or Lovable? =
Yes! That is the exact use case **codeSelector.** was built for. You can paste complete HTML + `<style>` components generated by any AI assistant and immediately edit text, swap images, and inspect lines visually.

= How does CSS Auto-Scoping work in Pro? =
AI tools frequently output generic selectors like `body`, `section`, `.container`, or `.btn` that accidentally override your WordPress theme styles. In **codeSelector. Pro**, our recursive CSS parser automatically scopes every rule to `[data-codeselector-id="..."]`—even inside `@media` queries—while remapping `body`/`html`/:root variables to the widget wrapper.

= Is it safe against XSS and malicious code? =
Yes. All output passes through `CodeSelector_Sanitizer::sanitize()`, built on WordPress's native `wp_kses()` engine. Inline `on*` event attributes (`onclick`, `onerror`), `<iframe/object/embed>` tags, and external `<script src="...">` tags are strictly stripped. In the Pro version, inline `<script>` blocks only execute if the post author and last editor hold the WordPress `unfiltered_html` capability.

= Which languages are supported? =
**codeSelector.** is fully internationalized (`i18n`) with English as the base language and ships with complete translations for **Spanish** (`es_ES`, `es_MX`), **French** (`fr_FR`), **German** (`de_DE`), **Portuguese** (`pt_BR`), and **Italian** (`it_IT`).

= What happens if I deactivate Pro or downgrade to Free? =
Your HTML and CSS content remains safely stored in your Elementor page. Pro-only features (such as automatic CSS scoping, inline `<script>` execution, and `Alt+Click` CSS jumping) simply deactivate gracefully without deleting your code.

= Do you offer a refund guarantee on the Pro version? =
Yes. Every **codeSelector. Pro** license (Monthly, Annual, or Lifetime) is backed by a **14-day 100% money-back guarantee** processed securely through Freemius.

== Screenshots ==

1. **Bidirectional Visual-to-Code Bridge:** Click any element on the Elementor canvas to jump in `< 5 ms` to its exact HTML line in the Ace Code Editor.
2. **Live Inline Text & Link Editing:** Double-click any heading, paragraph, or button to rewrite copy and update `href` URLs directly on the canvas.
3. **1-Click Image & Carousel Inspector:** Click any image to replace it from the WordPress Media Library, update its SEO `alt` text, or switch between carousel slides.
4. **Recursive CSS Auto-Scoping & Alt+Click CSS Jump (Pro):** Isolate AI styles automatically so they never break your theme, and `Alt + Click` to jump straight to CSS rules.
5. **Quick Section Navigator (Pro):** Jump effortlessly between `<style>`, HTML sections, and `<script>` blocks in 1,500+ line components.
6. **Zero Frontend Bloat:** Clean, semantic output on the live site with 0 KB of extra JavaScript.

== Changelog ==

= 1.4.2 =
* Added full internationalization (i18n) across PHP and JavaScript editor bridge (`codeselector` text domain).
* Added bundled translations for Spanish (`es_ES`, `es_MX`), French (`fr_FR`), German (`de_DE`), Brazilian Portuguese (`pt_BR`), and Italian (`it_IT`).
* Added master `languages/codeselector.pot` translation template.
* Replaced external offloaded placeholder URLs with bundled local SVG assets for WordPress.org compliance.
* Verified compatibility with WordPress 7.1 and Elementor 4.x.
* Removed trialware features and ensured 100% compliance with WordPress.org Guideline 5.
* Migrated starter code templates to static assets and enqueued styles via native WordPress APIs.

= 1.4.1 =
* Resolved WordPress.org header URI guidelines.
* Integrated Freemius SDK for seamless Free/Pro licensing.

= 1.4.0 =
* Initial public release of codeSelector. Visual-to-Code Bridge for Elementor.

== Upgrade Notice ==

= 1.4.2 =
Includes full multilingual support (English, Spanish, French, German, Portuguese, Italian), bundled local SVG assets, and WordPress 7.1 compatibility.
