# QuickDocumentation Component

A collapsible documentation panel that provides inline Twig syntax reference with interactive examples for the WPBitsBlockStudio template editor.

## Features

- **Six Documentation Sections**: Variables, Loops, Conditionals, Filters, Escaping, and Security
- **Interactive Examples**: Each section contains multiple code examples with descriptions
- **Snippet Insertion**: Click "Insert" to add examples directly into the CodeMirror editor at cursor position
- **Copy to Clipboard**: Quick copy functionality for all code snippets
- **Search/Filter**: Real-time search across all documentation sections and examples
- **WordPress Block-Specific**: Examples tailored for WordPress block development with Twig

## Usage

```javascript
import QuickDocumentation from './QuickDocumentation';

// In your component
<QuickDocumentation
    codeMirror={codeMirrorInstance}
    onInsertSnippet={(code) => console.log('Inserted:', code)}
/>
```

## Props

### `codeMirror` (Object, optional)
The CodeMirror instance for snippet insertion. If provided, the "Insert" button will be shown and snippets can be inserted at the cursor position.

### `onInsertSnippet` (Function, optional)
Callback function called when a snippet is inserted. Receives the inserted code as a parameter.

```javascript
onInsertSnippet={(code) => {
    console.log('User inserted:', code);
}}
```

## Documentation Sections

### 1. Variables
- Display attribute values
- Default values
- Nested properties
- Block wrapper attributes

### 2. Loops
- Basic loops
- Loop with index
- Loop with object properties
- Empty loop fallback

### 3. Conditionals
- Basic if statements
- If-else statements
- Multiple conditions (elseif)
- Variable existence checks

### 4. Filters
- Text transformation (upper, lower, title, capitalize)
- String manipulation (trim, slice, join)
- Date formatting
- WordPress filters (wp_kses_post, esc_url, esc_attr)
- Array operations (length, first, last)

### 5. Escaping
- Automatic escaping
- Raw output (with warnings)
- Explicit escape filter
- WordPress escaping functions

### 6. Security
- Safe user input handling
- Safe URL handling
- Safe HTML attributes
- Trusted HTML content

## Styling

The component uses WordPress admin UI styling conventions and is fully responsive. Styles are defined in `admin/styles/admin.scss` under the `.wpbs-quick-documentation` class.

## Search Functionality

The search feature filters documentation sections and examples in real-time based on:
- Example titles
- Code snippets
- Descriptions

Empty sections are automatically hidden when no matches are found.

## Accessibility

- Keyboard navigation support
- Focus management for inserted snippets
- Tooltip descriptions for icon buttons
- Semantic HTML structure with proper headings

## Integration with TemplateEditor

This component is designed to be integrated into the TemplateEditor component (task 8) where it will:
- Be shown only in Twig mode
- Be positioned adjacent to the CodeMirror editor
- Be collapsible via a toggle button
- Support keyboard shortcut (Ctrl+/) to toggle visibility

## Example Integration

```javascript
import QuickDocumentation from './QuickDocumentation';

function TemplateEditor({ templateMode, codeMirror }) {
    const [showQuickDocs, setShowQuickDocs] = useState(false);

    return (
        <div className="wpbs-template-editor">
            {/* Editor */}
            <div className="wpbs-code-editor-wrapper">
                <textarea ref={textareaRef} />
            </div>

            {/* Quick Documentation (Twig mode only) */}
            {templateMode === 'twig' && showQuickDocs && (
                <QuickDocumentation
                    codeMirror={codeMirror}
                    onInsertSnippet={(code) => {
                        console.log('Snippet inserted:', code);
                    }}
                />
            )}
        </div>
    );
}
```

## Browser Support

- Modern browsers with ES6+ support
- Clipboard API for copy functionality (graceful degradation if not available)
- CSS Grid and Flexbox for layout

## Notes

- All strings are internationalized using WordPress `__()` function
- Component follows WordPress coding standards
- Uses WordPress components (@wordpress/components) for UI consistency
- Fully responsive with mobile-friendly layout
