lynkow 3.4.0 → 3.4.1

package/README.md

@@ -88,6 +88,7 @@ The SDK is isomorphic and works on both browser and server environments. Some fe
 | Analytics tracking | ✅ | ❌ (no-op) |
 | Consent banner | ✅ | ❌ (no-op) |
 | Branding badge | ✅ | ❌ (no-op) |
+| Content enhancements | ✅ | ❌ (no-op) |
 | Locale detection | ✅ | ✅ (returns default) |
 | Cache | localStorage | In-memory |
 
@@ -400,6 +401,96 @@ lynkow.branding.remove()
 lynkow.branding.isVisible() // true/false
 ```
 
+## Content Enhancements (Browser-only)
+
+The SDK automatically enhances HTML content from the API with interactive features.
+
+### Features
+
+- **Code blocks**: Copy button with visual feedback
+- **Text alignment**: CSS rules to ensure `text-align` styles are respected
+
+```typescript
+// Enhancements are initialized automatically when the client is created
+const lynkow = createClient({ siteId: 'your-site-id' })
+
+// Manually re-initialize after loading dynamic content
+lynkow.enhancements.init()
+
+// Check if initialized
+lynkow.enhancements.isInitialized()
+
+// Clean up
+lynkow.enhancements.destroy()
+```
+
+### Rendering HTML Content
+
+The API returns HTML content in the `bodyHtml` field. To render it properly:
+
+#### Option 1: dangerouslySetInnerHTML (Simple)
+
+```jsx
+function Article({ content }) {
+  return (
+    <article dangerouslySetInnerHTML={{ __html: content.bodyHtml }} />
+  )
+}
+```
+
+#### Option 2: html-react-parser (Recommended)
+
+If you use `html-react-parser` to convert HTML to React components, **you must preserve the `style` attribute** for text alignment to work:
+
+```jsx
+import parse, { domToReact, attributesToProps } from 'html-react-parser'
+
+const options = {
+  replace: (domNode) => {
+    if (domNode.type !== 'tag') return
+
+    // Convert HTML attributes to React props (including style)
+    const props = attributesToProps(domNode.attribs)
+    const children = domToReact(domNode.children, options)
+
+    switch (domNode.name) {
+      case 'h2':
+        return <h2 {...props}>{children}</h2>
+      case 'h3':
+        return <h3 {...props}>{children}</h3>
+      case 'p':
+        return <p {...props}>{children}</p>
+      // Add other tags as needed
+    }
+  }
+}
+
+function Article({ content }) {
+  return <article>{parse(content.bodyHtml, options)}</article>
+}
+```
+
+> ⚠️ **Important**: The `attributesToProps` function automatically converts `style="text-align: center"` to `{ style: { textAlign: 'center' } }`. Without this, inline styles will be lost and text alignment won't work.
+
+### Code Block HTML Structure
+
+The API returns code blocks with this structure:
+
+```html
+<div class="code-block" data-language="javascript">
+  <div class="code-block-header">
+    <span class="code-block-language">JavaScript</span>
+    <button class="code-block-copy" data-copy-code>...</button>
+  </div>
+  <pre><code class="language-javascript">const x = 1;</code></pre>
+</div>
+```
+
+The SDK automatically:
+- Injects CSS styles for the code block UI
+- Binds click handlers to copy buttons
+- Shows visual feedback when code is copied
+
 ## Events
 
 Subscribe to SDK events for reactive updates.
@@ -556,6 +647,11 @@ import type {
 - Built-in caching (localStorage in browser, memory on server)
 - Debug logging option
 
+### New in v3.4
+
+- **Content enhancements**: Code block copy buttons, text alignment CSS fixes
+- Automatic binding with MutationObserver for dynamic content
+
 ### Upgrade Steps
 
 ```typescript

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lynkow",
-  "version": "3.4.0",
+  "version": "3.4.1",
   "description": "Official SDK for Lynkow Headless",
   "author": "Lynkow",
   "license": "SEE LICENSE IN LICENSE",