labellife-design-tool 1.0.4 → 1.0.5

package/README.md

@@ -252,9 +252,68 @@ function App() {
 }
 ```
 
+## WordPress Integration
+
+The library includes a special WordPress-compatible entry point that ensures proper compatibility with WordPress's React environment.
+
+### Using with WordPress
+
+When using this library in a WordPress environment, import from the WordPress-specific entry point:
+
+```tsx
+// Import from the WordPress-specific entry point
+import { CanvasEditor } from 'labellife-design-tool/wordpress';
+import 'labellife-design-tool/styles'; // Import CSS
+
+// Use as normal
+function MyWordPressComponent() {
+  return (
+    <CanvasEditor
+      name="WordPress Design Editor"
+      config={{
+        export: { png: true, jpg: true, json: true },
+        multiPage: true
+      }}
+    />
+  );
+}
+```
+
+### WordPress Helper Function
+
+For simpler integration with vanilla WordPress plugins, a helper function is provided:
+
+```javascript
+import { initWordPressCanvasEditor } from 'labellife-design-tool/wordpress';
+import 'labellife-design-tool/styles'; // Import CSS
+
+// Initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  const containerId = 'editor-container'; // ID of your container element
+  
+  initWordPressCanvasEditor(containerId, {
+    name: "WordPress Editor",
+    config: {
+      export: { png: true, jpg: true, json: true },
+      multiPage: true,
+      variables: true
+    }
+  });
+});
+```
+
+### How the WordPress Compatibility Works
+
+The WordPress integration automatically handles compatibility with WordPress's React environment by:
+
+1. Detecting when React is available globally (as in WordPress)
+2. Adding necessary JSX runtime compatibility functions
+3. Making the library work seamlessly in WordPress's React environment
+
 ## Project Structure
 
 - `src/lib/index.ts` - Library entry point (npm package)
+- `src/wordpress.tsx` - WordPress-specific entry point
 - `src/CanvasEditor.tsx` - Main editor component
 - `src/types/` - TypeScript type definitions
 - `src/components/` - React components