fix(react-simulator-renderer): fix missing i18n of customCreateElement

packages/react-simulator-renderer/src/locale/en-US.json

@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "Drag and drop components or templates here",
+  "Locked elements and child elements cannot be edited": "Locked elements and child elements cannot be edited"
+}

packages/react-simulator-renderer/src/locale/index.ts

@@ -0,0 +1,21 @@
+import { createElement } from 'react';
+import enUS from './en-US.json';
+import zhCN from './zh-CN.json';
+
+const instance: Record<string, Record<string, string>> = {
+  'zh-CN': zhCN as Record<string, string>,
+  'en-US': enUS as Record<string, string>,
+};
+
+export function createIntl(locale: string = 'zh-CN') {
+  const intl = (id: string) => {
+    return instance[locale][id];
+  };
+
+  const intlNode = (id: string) => createElement('span', instance[locale][id]);
+
+  return {
+    intl,
+    intlNode,
+  };
+}

packages/react-simulator-renderer/src/locale/zh-CN.json

@@ -0,0 +1,4 @@
+{
+  "Drag and drop components or templates here": "拖拽组件或模板到这里",
+  "Locked elements and child elements cannot be edited": "锁定元素及子元素无法编辑"
+}

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -10,6 +10,7 @@ import { SimulatorRendererContainer, DocumentInstance } from './renderer';
 import { host } from './host';
 import { isRendererDetached } from './utils/misc';
 import './renderer.less';
+import { createIntl } from './locale';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = window.React.cloneElement;
@@ -130,6 +131,7 @@ class Renderer extends Component<{
   documentInstance: DocumentInstance;
 }> {
   startTime: number | null = null;
+  schemaChangedSymbol = false;
 
   componentDidUpdate() {
     this.recordTime();
@@ -152,8 +154,6 @@ class Renderer extends Component<{
     this.recordTime();
   }
 
-  schemaChangedSymbol = false;
-
   getSchemaChangedSymbol = () => {
     return this.schemaChangedSymbol;
   };
@@ -172,6 +172,8 @@ class Renderer extends Component<{
 
     if (!container.autoRender || isRendererDetached()) return null;
 
+    const { intl } = createIntl(locale);
+
     return (
       <LowCodeRenderer
         locale={locale}
@@ -206,12 +208,12 @@ class Renderer extends Component<{
             (children == null || (Array.isArray(children) && !children.length)) &&
             (!viewProps.style || Object.keys(viewProps.style).length === 0)
           ) {
-            let defaultPlaceholder = '拖拽组件或模板到这里';
+            let defaultPlaceholder = intl('Drag and drop components or templates here');
             const lockedNode = getClosestNode(leaf, (node) => {
               return node?.getExtraProp('isLocked')?.getValue() === true;
             });
             if (lockedNode) {
-              defaultPlaceholder = '锁定元素及子元素无法编辑';
+              defaultPlaceholder = intl('Locked elements and child elements cannot be edited');
             }
             children = (
               <div className={cn('lc-container-placeholder', { 'lc-container-locked': !!lockedNode })} style={viewProps.placeholderStyle}>