@1urso/generic-editor 0.1.22 → 0.1.24

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://bearry.app">
-    <img src="https://bearry.app/logo.png" alt="Bearry - Streaming Tools" height="100">
+    <img src="https://cdn.bearry.app/images/logo_png.png" alt="Bearry - Streaming Tools" height="100">
   </a>
   <br />
   <br />
@@ -296,6 +296,39 @@ const htmlString = generateHTML(layout.elements, dados, {
 document.getElementById("preview").innerHTML = htmlString;
 ```
 
+### Dynamic List Updates (Real-time)
+
+When generating HTML for lists (`isList: true`), the editor automatically injects a smart script that enables real-time updates without regenerating the entire HTML.
+
+This is perfect for **OBS Overlays, Chat Widgets, or Live Feeds**.
+
+#### How to use:
+
+1. Generate the initial HTML using `generateHTML`.
+2. Load the HTML in your view (Browser, WebView, OBS).
+3. Call `window.addItem(data)` whenever you have new data.
+
+```javascript
+// Example: Adding a new item via WebSocket or Event
+const newItem = {
+  name: "New Subscriber",
+  message: "Hello World!",
+  avatar: "https://...",
+};
+
+// This function is automatically available in the generated HTML
+if (window.addItem) {
+  window.addItem(newItem);
+}
+```
+
+The injected script automatically handles:
+
+- **Rendering**: Uses the exact same layout configuration from the JSON.
+- **Animation**: Smooth slide-in animation for new items.
+- **Positioning**: Respects 'Newest on Top' or 'Bottom' settings.
+- **Scrolling**: Auto-scrolls to the newest item if configured.
+
 ---
 
 ## API Reference

package/dist/editor/components/ColorPicker.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface ColorPickerContentProps {
+    color: string;
+    onChange: (color: string) => void;
+}
+export declare const ColorPickerContent: React.FC<ColorPickerContentProps>;
+interface ColorInputProps extends ColorPickerContentProps {
+    label?: string;
+}
+export declare const ColorInput: React.FC<ColorInputProps>;
+export {};

package/dist/editor/components/DraggableElement.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { IElement } from '../context';
+interface DraggableElementProps {
+    element: IElement;
+    isSelected: boolean;
+}
+export declare const DraggableElement: React.FC<DraggableElementProps>;
+export {};

package/dist/editor/utils/helpers.d.ts

@@ -0,0 +1,3 @@
+import { IElementFormatting } from '../context';
+export declare const formatValue: (value: any, formatting: IElementFormatting) => string;
+export declare const checkCondition: (propValue: any, operator: string, ruleValue: string) => boolean;