Fix/parent to child data passing via props

packages/core/dist/TextIgniter.d.ts

@@ -86,5 +86,6 @@ declare class TextIgniter extends EventEmitter {
     }) => void): void;
     getContent(): string;
     getTextContent(): string;
+    loadHtmlContent(html: string): void;
 }
 export { TextIgniter };

packages/core/dist/TextIgniter.js

@@ -1436,6 +1436,21 @@ class TextIgniter extends EventEmitter {
         var _a;
         return ((_a = this.editorContainer) === null || _a === void 0 ? void 0 : _a.textContent) || '';
     }
+    loadHtmlContent(html) {
+        this.undoRedoManager.saveUndoSnapshot();
+        this.htmlToJsonParser = new HtmlToJsonParser(html);
+        const jsonOutput = this.htmlToJsonParser.parse();
+        this.document.blocks = jsonOutput;
+        if (jsonOutput.length > 0) {
+            this.document.dataIds[0] = jsonOutput[0].dataId;
+            this.document.selectedBlockId = jsonOutput[0].dataId;
+        }
+        else {
+            this.document.dataIds = [];
+            this.document.selectedBlockId = null;
+        }
+        this.document.emit('documentChanged', this.document);
+    }
 }
 window.TextIgniter = TextIgniter;
 export { TextIgniter };

packages/core/src/TextIgniter.ts

@@ -2021,6 +2021,25 @@ class TextIgniter extends EventEmitter {
   public getTextContent(): string {
     return this.editorContainer?.textContent || '';
   }
+
+  /**
+   * Load HTML content into the editor
+   * @param html - The HTML string to load
+   */
+  public loadHtmlContent(html: string): void {
+    this.undoRedoManager.saveUndoSnapshot();
+    this.htmlToJsonParser = new HtmlToJsonParser(html);
+    const jsonOutput = this.htmlToJsonParser.parse();
+    this.document.blocks = jsonOutput;
+    if (jsonOutput.length > 0) {
+      this.document.dataIds[0] = jsonOutput[0].dataId;
+      this.document.selectedBlockId = jsonOutput[0].dataId;
+    } else {
+      this.document.dataIds = [];
+      this.document.selectedBlockId = null;
+    }
+    this.document.emit('documentChanged', this.document);
+  }
 }
 (window as any).TextIgniter = TextIgniter;
 export { TextIgniter };

packages/example/react/src/App.tsx

@@ -6,18 +6,49 @@ const Textigniter = OriginalComponent as ElementType;
 const App: FC = () => {
   const [htmlContent, setHtmlContent] = useState('');
   const [textContent, setTextContent] = useState('');
+  const [editorValue, setEditorValue] = useState<string | undefined>(undefined);
 
   const handleContentChange = (data: { html: string; text: string }) => {
     console.log('Content changed:', data);
     setHtmlContent(data.html);
     setTextContent(data.text);
   };
 
+  const loadTemplate1 = () => {
+    setEditorValue('<div data-id="block-template-1" class="paragraph-block" type="text" style="text-align: left;"><span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Loaded <strong>Template One</strong> successfully! 🎉</span></div>');
+  };
+
+  const loadTemplate2 = () => {
+    setEditorValue('<div data-id="block-template-2" class="paragraph-block" type="text" style="text-align: left;"><span style="font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">This is <em>Template Two</em> with some inline italicized styling.</span></div>');
+  };
+
   return (
     <>
-      {/* <h1>TextIgniter React Example</h1> */}
-      <div></div>
+      {/* Test Interactive Controls */}
+      <div style={{ marginBottom: '15px', display: 'flex', gap: '10px' }}>
+        <button 
+          onClick={loadTemplate1}
+          style={{ padding: '8px 16px', background: '#4CAF50', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
+        >
+          Load Template 1 (Reactive Prop)
+        </button>
+        <button 
+          onClick={loadTemplate2}
+          style={{ padding: '8px 16px', background: '#008CBA', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
+        >
+          Load Template 2 (Reactive Prop)
+        </button>
+        <button 
+          onClick={() => setEditorValue(undefined)}
+          style={{ padding: '8px 16px', background: '#f44336', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold' }}
+        >
+          Reset / Clear value prop
+        </button>
+      </div>
+
       <Textigniter
+        initialValue="<div data-id='block-initial' class='paragraph-block' type='text' style='text-align: left;'><span style='font-family: Arial; font-size: 12px; color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);'>Welcome to <strong>TextIgniter React</strong>! This was loaded via <code>initialValue</code> prop.</span></div>"
+        value={editorValue}
         config={{
           showToolbar: true,
           features: [

packages/react/dist/index.mjs

@@ -2,6 +2,8 @@
 import React, { useEffect, useRef } from "react";
 var TextigniterReactBase = ({
   config,
+  value,
+  initialValue,
   onContentChange
 }) => {
   const builderRef = useRef(null);
@@ -22,6 +24,20 @@ var TextigniterReactBase = ({
       }
     }
   }, [config]);
+  useEffect(() => {
+    if (builderRef.current && initialValue !== void 0) {
+      if (!builderRef.current.getAttribute("value")) {
+        builderRef.current.setAttribute("value", initialValue);
+      }
+    }
+  }, []);
+  useEffect(() => {
+    if (builderRef.current && value !== void 0) {
+      if (builderRef.current.getAttribute("value") !== value) {
+        builderRef.current.setAttribute("value", value);
+      }
+    }
+  }, [value]);
   useEffect(() => {
     const element = builderRef.current;
     if (!element)
@@ -39,7 +55,7 @@ var TextigniterReactBase = ({
   return React.useMemo(() => /* @__PURE__ */ React.createElement("text-igniter", { ref: builderRef }), []);
 };
 var TextigniterReact = React.memo(TextigniterReactBase, (prevProps, nextProps) => {
-  return JSON.stringify(prevProps.config) === JSON.stringify(nextProps.config);
+  return JSON.stringify(prevProps.config) === JSON.stringify(nextProps.config) && prevProps.value === nextProps.value && prevProps.initialValue === nextProps.initialValue;
 });
 export {
   TextigniterReact as Textigniter