feat: support advanced editor in model edit page (#3176)

* feat: integrate external model editor and handle message events for model updates

* feat: add CasbinEditor and IframeEditor components for model editing

* feat: add tabbed editor interface for CasbinEditor

* fix: Synchronize content between basic and advanced editors

* refactor: simplify CasbinEditor and ModelEditPage components

* refactor: Refactor CasbinEditor for improved iframe initialization and model synchronization

* refactor: update default state of CasbinEditor active tab to "advanced

* chore: add Apache License header to CasbinEditor.js and IframeEditor.js files

* refactor: update CasbinEditor class names for consistency

web/src/IframeEditor.js

@@ -0,0 +1,66 @@
+// Copyright 2024 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
+
+const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) => {
+  const iframeRef = useRef(null);
+  const [iframeReady, setIframeReady] = useState(false);
+
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.origin !== "https://editor.casbin.org") {return;}
+
+      if (event.data.type === "modelUpdate") {
+        onModelTextChange(event.data.modelText);
+      } else if (event.data.type === "iframeReady") {
+        setIframeReady(true);
+        iframeRef.current?.contentWindow.postMessage({
+          type: "initializeModel",
+          modelText: initialModelText,
+        }, "*");
+      }
+    };
+
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onModelTextChange, initialModelText]);
+
+  useImperativeHandle(ref, () => ({
+    getModelText: () => {
+      iframeRef.current?.contentWindow.postMessage({type: "getModelText"}, "*");
+    },
+    updateModelText: (newModelText) => {
+      if (iframeReady) {
+        iframeRef.current?.contentWindow.postMessage({
+          type: "updateModelText",
+          modelText: newModelText,
+        }, "*");
+      }
+    },
+  }));
+
+  return (
+    <iframe
+      ref={iframeRef}
+      src="https://editor.casbin.org/model-editor"
+      frameBorder="0"
+      width="100%"
+      height="500px"
+      title="Casbin Model Editor"
+    />
+  );
+});
+
+export default IframeEditor;