# 📦 Installation Guide - MyUIbrix Elementor Features

## Quick Setup

### Step 1: Install Frontend Dependencies

```bash
cd frontend
npm install react-markdown react-syntax-highlighter
npm install --save-dev @types/react-syntax-highlighter
```

### Step 2: Backend Routes Setup

Add to your `main.go`:

```go
import "your-app/internal/controllers"

// Setup documentation routes
docsController := controllers.NewDocsController("./DOCS")
adminDocs := router.Group("/api/v1/admin/docs")
adminDocs.Use(middleware.RequireAuth())
adminDocs.Use(middleware.RequireAdmin())
{
    adminDocs.GET("/file/*filepath", docsController.GetDocFile)
    adminDocs.GET("/list", docsController.ListDocFiles)
    adminDocs.GET("/search", docsController.SearchDocs)
}
```

### Step 3: Add Admin Route

In your admin routes file (e.g., `frontend/src/App.tsx`):

```tsx
import DevDocsPage from './pages/admin/DevDocsPage';

// Add route
<Route path="/admin/docs" element={<DevDocsPage />} />
```

### Step 4: Add Navigation Link

In your admin navigation component:

```tsx
import { FiBook } from 'react-icons/fi';

<NavLink to="/admin/docs">
  <HStack>
    <Icon as={FiBook} />
    <Text>Developer Docs</Text>
  </HStack>
</NavLink>
```

### Step 5: Verify Files

Ensure all these files exist:
- ✅ `frontend/src/components/editor/InlineTextEditor.tsx`
- ✅ `frontend/src/components/editor/CustomCSSEditor.tsx`
- ✅ `frontend/src/components/editor/ColumnLayoutManager.tsx`
- ✅ `frontend/src/components/editor/ContextualAdminLinks.tsx`
- ✅ `frontend/src/components/editor/VisualStylePanel.tsx` (enhanced)
- ✅ `frontend/src/pages/admin/DevDocsPage.tsx`
- ✅ `internal/controllers/docs_controller.go`
- ✅ All `.md` files in `/DOCS`

---

## Testing

### Test Documentation Viewer

1. Navigate to `/admin/docs`
2. Should see list of documentation files
3. Click any document to view
4. Test search functionality
5. Try downloading a document

### Test Elementor Features

1. Go to any page (e.g., homepage)
2. Add `?myuibrix=edit` to URL
3. Click edit button (bottom left)
4. Select any element
5. Test all 5 tabs:
   - Content
   - Style
   - Layout
   - CSS
   - Admin

### Test Inline Editor

1. In edit mode, click any text
2. Toolbar should appear
3. Test Bold, Italic, Underline
4. Test link insertion
5. Changes should auto-save

### Test Column Layouts

1. Select element
2. Open Layout tab
3. Choose a template
4. Element should split into columns
5. Save and reload to verify persistence

### Test Custom CSS

1. Select element
2. Open CSS tab
3. Write custom CSS
4. Enable preview
5. Apply and save

---

## Troubleshooting

### "Module not found" errors

**Solution**: Install missing dependencies
```bash
npm install react-markdown react-syntax-highlighter
npm install --save-dev @types/react-syntax-highlighter
```

### Documentation viewer shows "Document Not Found"

**Solution**: Check backend routes are configured and DOCS folder is accessible

### Custom CSS not applying

**Solution**: 
- Check for syntax errors
- Enable preview mode first
- Verify CSS is valid
- Check browser console for errors

### Inline editor not appearing

**Solution**:
- Ensure element has proper `data-element` attribute
- Check if edit mode is active
- Verify admin permissions

---

## Configuration

### Environment Variables

No additional environment variables needed.

### Database

No database migrations required for these features.

### Permissions

All features require admin authentication.

---

## Deployment

### Development

```bash
# Frontend
cd frontend
npm run dev

# Backend
go run main.go
```

### Production

```bash
# Frontend
cd frontend
npm run build

# Backend
go build -o app main.go
./app
```

### Docker

If using Docker, ensure DOCS folder is included:

```dockerfile
COPY DOCS /app/DOCS
```

---

## Uninstallation

To remove these features:

1. Remove frontend components:
   ```bash
   rm frontend/src/components/editor/InlineTextEditor.tsx
   rm frontend/src/components/editor/CustomCSSEditor.tsx
   rm frontend/src/components/editor/ColumnLayoutManager.tsx
   rm frontend/src/components/editor/ContextualAdminLinks.tsx
   rm frontend/src/pages/admin/DevDocsPage.tsx
   ```

2. Remove backend controller:
   ```bash
   rm internal/controllers/docs_controller.go
   ```

3. Remove routes from `main.go`

4. Remove navigation link

5. Revert `VisualStylePanel.tsx` changes

---

## Support

For issues:
1. Check `/admin/docs` for documentation
2. Review `COMPLETE_IMPLEMENTATION_SUMMARY.md`
3. Check browser console for errors
4. Verify all dependencies installed

---

**Status**: ✅ Ready for Installation