feat: advanced model editor should support changing UI language (#3430)

This commit is contained in:
Coki
2024-12-15 15:53:29 +08:00
committed by GitHub
parent bd4a6775dd
commit f9a6efc00f

View File

@ -17,6 +17,7 @@ import React, {forwardRef, useEffect, useImperativeHandle, useRef, useState} fro
const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) => { const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) => {
const iframeRef = useRef(null); const iframeRef = useRef(null);
const [iframeReady, setIframeReady] = useState(false); const [iframeReady, setIframeReady] = useState(false);
const currentLang = localStorage.getItem("language") || "en";
useEffect(() => { useEffect(() => {
const handleMessage = (event) => { const handleMessage = (event) => {
@ -30,6 +31,7 @@ const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) =>
iframeRef.current.contentWindow.postMessage({ iframeRef.current.contentWindow.postMessage({
type: "initializeModel", type: "initializeModel",
modelText: initialModelText, modelText: initialModelText,
lang: currentLang,
}, "*"); }, "*");
} }
} }
@ -37,7 +39,7 @@ const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) =>
window.addEventListener("message", handleMessage); window.addEventListener("message", handleMessage);
return () => window.removeEventListener("message", handleMessage); return () => window.removeEventListener("message", handleMessage);
}, [onModelTextChange, initialModelText]); }, [onModelTextChange, initialModelText, currentLang]);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
getModelText: () => { getModelText: () => {
@ -60,7 +62,7 @@ const IframeEditor = forwardRef(({initialModelText, onModelTextChange}, ref) =>
return ( return (
<iframe <iframe
ref={iframeRef} ref={iframeRef}
src="https://editor.casbin.org/model-editor" src={`https://editor.casbin.org/model-editor?lang=${currentLang}`}
frameBorder="0" frameBorder="0"
width="100%" width="100%"
height="500px" height="500px"