aindredacteur Package

A standalone JavaScript package for AI-powered text editing, designed for the Tweakers DSP but usable in any CMS environment.

The package is fully autonomous - it handles CMS detection, layout modifications, field discovery, and UI creation automatically. No DOM manipulation required from your side.

Installation

``bash
npm install aindredacteur-package
`

Quick Start

$3

The package handles everything automatically - just call init() with your API endpoints:

`javascript
import { Aindredacteur } from 'aindredacteur-package';

const aiPackage = new Aindredacteur();

await aiPackage.init({
api: {
endpoints: {
proofreader: 'https://your-api/proofreader',
titleSuggester: 'https://your-api/title-suggester',
feedback: 'https://your-api/feedback'
},
apiKey: 'your-api-key'
},
options: {
autoRegister: true, // Auto-detect and register CMS fields (default)
debug: false
}
});

// That's it! The package will:
// 1. Detect your CMS type automatically
// 2. Apply necessary layout modifications
// 3. Discover and register all relevant fields
// 4. Create and display AI panels
`

$3

When you call init(), the package:

1. Detects CMS Type: Uses built-in detection to identify your CMS (News, Review, Geek, etc.)
2. Applies Layout: Injects CSS to create side-by-side layout for editors and AI panels
3. Prepares Containers: Enhances field containers with appropriate classes and ARIA attributes
4. Registers Fields: Discovers and registers all CMS fields automatically
5. Creates UI: Generates AI panels and suggestion buttons in the correct positions

No manual DOM manipulation needed - the package is fully self-contained.

Configuration

$3

`javascript
{
api: {
endpoints: {
proofreader: 'https://...', // Text analysis endpoint
titleSuggester: 'https://...', // Title suggestions endpoint
feedback: 'https://...' // Content feedback endpoint
},
// Single API key for all endpoints
apiKey: 'your-key',
// Or per-endpoint keys
apiKeys: {
proofreader: 'key1',
titleSuggester: 'key2',
feedback: 'key3'
}
}
}
`

$3

`javascript
{
options: {
autoRegister: true, // Auto-detect and register CMS fields (default: true)
debug: false, // Enable debug logging
useV2Pipeline: true // Use V2 suggestion pipeline (recommended)
}
}
`

#### autoRegister Option

The autoRegister option controls automatic field detection and registration:

autoRegister: true (Default - Recommended)
`javascript
await aiPackage.init({
api: { endpoints: { / ... / } },
options: { autoRegister: true }
});

// Package automatically:
// - Detects CMS type
// - Applies layout modifications
// - Discovers all fields
// - Registers fields with StateManager
// - Creates AI panels
`

autoRegister: false (Manual Control)
`javascript
await aiPackage.init({
api: { endpoints: { / ... / } },
options: { autoRegister: false }
});

// Package still detects CMS and applies layout, but you must register fields manually:
const fieldElement = document.querySelector('#my_field');
const containerElement = document.querySelector('#my_container');
aiPackage.addField(fieldElement, containerElement, 'articleBody');
`

Use autoRegister: false only if you need custom field registration logic or want to control which fields are registered.

$3

The old configuration format is still supported but deprecated:

`javascript
// Old format (deprecated)
await aiPackage.init({
apiEndpoints: {
proofReader: 'https://...',
titleSuggester: 'https://...',
feedback: 'https://...'
},
apiKey: 'your-key'
});
`

Migration Guide

$3

Before (Old Pattern - Deprecated)

`javascript
// 1. Manually detect CMS type
const cmsType = detectCMSType();

// 2. Manually apply layout modifications
applyLayoutCSS(cmsType);
createFieldContainers();

// 3. Initialize package
const aiPackage = new Aindredacteur();
await aiPackage.init({
apiEndpoints: { / ... / }
});

// 4. Manually register each field
const bodyField = document.querySelector('#news_form_body');
const bodyContainer = document.querySelector('#row_news_form_body .field');
aiPackage.addField(bodyField, bodyContainer, 'articleBody');

const titleField = document.querySelector('#news_form_name');
const titleContainer = document.querySelector('#row_news_form_name .field');
aiPackage.addField(titleField, titleContainer, 'title');
`

After (New Pattern - Recommended)

`javascript
// Just initialize - package handles everything
const aiPackage = new Aindredacteur();
await aiPackage.init({
api: {
endpoints: {
proofreader: 'https://...',
titleSuggester: 'https://...',
feedback: 'https://...'
},
apiKey: 'your-key'
},
options: {
autoRegister: true // Default, can be omitted
}
});

// That's it! No manual DOM manipulation needed.
`

$3

Before (Old Extension Pattern)

`javascript
// extension/content.js
import { ChromeExtensionAdapter } from './chrome-extension-adapter.js';
import { Aindredacteur } from './aindredacteur-package/index.js';

// 1. Create adapter
const adapter = new ChromeExtensionAdapter();

// 2. Detect CMS and apply layout
await adapter.detectAndSetupCMS();

// 3. Initialize package
const aiPackage = new Aindredacteur();
await aiPackage.init({ apiEndpoints: { / ... / } });

// 4. Register fields via adapter
adapter.registerFieldsWithAI(aiPackage);
`

After (New Extension Pattern)

`javascript
// extension/content.js
import { Aindredacteur } from './aindredacteur-package/index.js';

// Just initialize - package handles CMS detection, layout, and field registration
const aiPackage = new Aindredacteur();
await aiPackage.init({
api: {
endpoints: {
proofreader: chrome.runtime.getURL('api/proofreader'),
titleSuggester: chrome.runtime.getURL('api/title-suggester'),
feedback: chrome.runtime.getURL('api/feedback')
}
},
options: {
autoRegister: true
}
});

// ChromeExtensionAdapter is no longer needed
`

$3

1. No Manual CMS Detection: Package detects CMS automatically using CMSRegistry
2. No Manual Layout: Package applies layout CSS automatically using LayoutManager
3. No Manual Field Registration: Package discovers and registers fields automatically
4. Simplified Configuration: Just provide API endpoints, package handles the rest
5. Cleaner Code: Reduced from ~100 lines to ~10 lines for typical integration

Custom Transport Layer

For advanced use cases, you can provide a custom transport:

`javascript
import { Aindredacteur } from 'aindredacteur-package';
import { FetchTransport, MockTransport } from 'aindredacteur-package/core/transport.js';

// Custom fetch transport
const transport = new FetchTransport({
apiKey: 'your-key',
timeout: 30000
});

await aiPackage.init({
transport,
api: {
endpoints: { / ... / }
}
});

// Mock transport for testing
const mockTransport = new MockTransport({
'proofreader': { changes: [], flags: {} }
});

await aiPackage.init({ transport: mockTransport });
`

Architecture

$3

The package is fully autonomous and handles all DOM manipulation internally:

`
┌─────────────────────────────────────────────────────────────┐
│ Your Application │
│ │
│ await aiPackage.init({ api: { endpoints: {...} } }) │
└──────────────────────┬──────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Aindredacteur Package │
│ │
│ ┌────────────────┐ ┌─────────────────┐ ┌──────────────┐ │
│ │ CMSRegistry │ │ LayoutManager │ │ StateManager │ │
│ │ │ │ │ │ │ │
│ │ • Detect CMS │ │ • Apply CSS │ │ • Track │ │
│ │ • Get config │ │ • Prepare │ │ fields │ │
│ │ │ │ containers │ │ • Manage UI │ │
│ └────────────────┘ └─────────────────┘ └──────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ Auto-Registration │ │
│ │ • Discover fields from CMS config │ │
│ │ • Register with StateManager │ │
│ │ • Create AI panels │ │
│ └────────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
`

$3

CMSRegistry: Detects CMS type by checking DOM structure against known patterns. Returns configuration with field selectors and layout dimensions.

LayoutManager: Applies CMS-specific CSS modifications to create side-by-side layout. Prepares field containers with appropriate classes and ARIA attributes.

StateManager: Tracks registered fields, manages UI panels, and coordinates suggestion application.

Auto-Registration: Discovers fields based on CMS configuration and automatically registers them with the StateManager.

$3

1. CMS Detection: CMSRegistry.detect() identifies CMS type
2. Layout Application: LayoutManager.applyLayout() injects CSS
3. Container Preparation: LayoutManager.prepareContainers() enhances containers
4. Field Discovery: Iterate over fields from CMS configuration
5. Field Registration: Register each field with StateManager
6. UI Creation: Create AI panels and suggestion buttons

All of this happens automatically when you call init() with autoRegister: true.

Supported CMS Types

The package auto-detects these CMS types and applies appropriate layout modifications:

| CMS Type | Detection Selector | Auto-Registered Fields |
|----------|-------------------|------------------------|
| News | #row_news_form_body .field | Article Body, Title, Introduction |
| Geek | #row_geek_form_body .field | Article Body, Title, Introduction |
| Review | #row_review_page_form_body | Chapter Body, Title |
| Review Snippet | #review_form_articleSnippet_snippetText | Snippet Text |
| Plan | #row_plan_form_body .field | Article Body, Title, Introduction |
| Product Card | #row_product_card_form_description .field | Description |
| Scorecard | textarea#scorecard_form_bottomline | Bottom Line |

When a CMS is detected, the package automatically:
- Applies CMS-specific layout CSS (page width, grid layout, styling)
- Prepares field containers with appropriate classes and ARIA attributes
- Discovers and registers all fields defined in the CMS configuration
- Creates AI panels in the correct positions

If no CMS is detected, the package logs a warning and continues without layout modifications. You can still use manual field registration in this case.

Troubleshooting

$3

If you see the warning [Aindredacteur] No CMS detected, skipping layout modifications:

1. Check DOM Structure: Ensure your page has the expected CMS selectors
2. Manual Registration: Use autoRegister: false and register fields manually
3. Custom CMS: Add your CMS to CMSRegistry if it's not supported

`javascript
// Manual registration when CMS not detected
await aiPackage.init({
api: { endpoints: { / ... / } },
options: { autoRegister: false }
});

const field = document.querySelector('#my_custom_field');
const container = document.querySelector('#my_custom_container');
aiPackage.addField(field, container, 'articleBody');
`

$3

If the layout doesn't appear correctly:

1. Check Console: Look for error messages in browser console
2. Verify CMS Detection: Check aiPackage.cmsType to confirm detection
3. Inspect CSS: Verify layout CSS was injected (check for