feat: add onContentChange to synchronize the result with style-panel

ZenUml · Oct 20, 2023 · a6fab6d · a6fab6d
1 parent 53d9ac6
commit a6fab6d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx
@@ -66,8 +66,20 @@ export default class ContentWrap extends Component {
 	}
 	componentDidMount() {
 		this.props.onRef(this);
+		window.addEventListener('message', this.handleMessageCodeUpdate.bind(this));
 	}
 
+	componentWillUnmount() {
+		window.removeEventListener('message', this.handleMessageCodeUpdate.bind(this));
+	}
+
+	handleMessageCodeUpdate(e) {
+		const code = e.data && e.data.code;
+		if (code) {
+			this.cm.js.setValue(code);
+			this.cm.js.refresh();
+		}
+	}
 	onHtmlCodeChange(editor, change) {
 		this.cmCodes.html = editor.getValue();
 		this.props.onCodeChange(

diff --git a/src/computes.js b/src/computes.js
@@ -178,7 +178,9 @@ export function computeJs(
 		const cursor = e.data && e.data.cursor;
 
 	  if (code && app) {
-		  app.render(code, { enableMultiTheme: false });
+		  app.render(code, { enableMultiTheme: false, onContentChange: (code) => {
+		  	window.parent.postMessage({ code })
+		  }});
 	  }
 
 	  if(app && (cursor !== null || cursor !== undefined)) {

diff --git a/src/extension/script.js b/src/extension/script.js
@@ -1,13 +1,17 @@
-window.addEventListener("load", function (event) {
-	console.log("window loaded");
+window.addEventListener('load', function(event) {
+	console.log('window loaded');
 	window.app = new window.zenuml.default('#mounting-point');
 });
 window.addEventListener('message', (e) => {
 	const code = e.data && e.data.code;
 	const cursor = e.data && e.data.cursor;
 
 	if (code && app) {
-		app.render(code, { enableMultiTheme: false });
+		app.render(code, {
+			enableMultiTheme: false, onContentChange: (code) => {
+				window.parent.postMessage({ code });
+			}
+		});
 	}
 
 	if (app && (cursor !== null || cursor !== undefined)) {