@easy-editor/react-renderer 1.0.2 → 1.0.3

package/LICENSE

@@ -1,9 +1,9 @@
-MIT License
-
-Copyright © 2024-PRESENT JinSo <https://github.com/JinSooo>
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+MIT License
+
+Copyright © 2024-PRESENT JinSo <https://github.com/JinSooo>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,15 +1,15 @@
-# @easy-editor/react-renderer
-
-React renderer implementation for EasyEditor. This package provides the React-specific implementation of the renderer-core interfaces, enabling schema-driven rendering using React components.
-
-## Features
-
-- **React Component Rendering**: Converts EasyEditor schema into React component hierarchy
-- **React Context Integration**: Provides schema context to all rendered components
-- **Lifecycle Management**: Handles React component lifecycle methods based on schema
-- **Error Boundaries**: React-specific error handling with fallback components
-- **Ref Forwarding**: Automatic reference collection for component manipulation
-- **Dynamic Props**: Support for dynamic props and expressions within React components
-- **State Management**: Integration with React's state system
-- **Event Handling**: React-specific event binding from schema definitions
-
+# @easy-editor/react-renderer
+
+React renderer implementation for EasyEditor. This package provides the React-specific implementation of the renderer-core interfaces, enabling schema-driven rendering using React components.
+
+## Features
+
+- **React Component Rendering**: Converts EasyEditor schema into React component hierarchy
+- **React Context Integration**: Provides schema context to all rendered components
+- **Lifecycle Management**: Handles React component lifecycle methods based on schema
+- **Error Boundaries**: React-specific error handling with fallback components
+- **Ref Forwarding**: Automatic reference collection for component manipulation
+- **Dynamic Props**: Support for dynamic props and expressions within React components
+- **State Management**: Integration with React's state system
+- **Event Handling**: React-specific event binding from schema definitions
+

package/dist/index.cjs

@@ -673,13 +673,51 @@ const patchDidCatch = (Comp, {
   }
 };
 const cache$1 = new Map();
+
+/** 获取数据源数据 */
+const getDataSource = baseRenderer => {
+  // component
+  const componentDataSource = {};
+  if (baseRenderer.dataSourceMap) {
+    const {
+      dataSourceMap,
+      state
+    } = baseRenderer;
+    Object.keys(dataSourceMap).forEach(key => {
+      componentDataSource[key] = state[key];
+    });
+  }
+
+  // page
+  const pageDataSource = {};
+  if (baseRenderer.page.dataSourceMap) {
+    const {
+      dataSourceMap,
+      state
+    } = baseRenderer.page;
+    Object.keys(dataSourceMap).forEach(key => {
+      pageDataSource[key] = state[key];
+    });
+  }
+  if (Object.keys(componentDataSource).length > 0 || Object.keys(pageDataSource).length > 0) {
+    return {
+      component: componentDataSource,
+      page: pageDataSource
+    };
+  }
+  return undefined;
+};
 const compWrapper = (Comp, info) => {
+  const {
+    baseRenderer,
+    schema
+  } = info;
   if (Comp?.prototype?.isReactComponent || Comp?.prototype instanceof react.Component) {
     patchDidCatch(Comp, info);
     return Comp;
   }
-  if (info.schema.id && cache$1.has(info.schema.id) && cache$1.get(info.schema.id)?.Comp === Comp) {
-    return cache$1.get(info.schema.id)?.WrapperComponent;
+  if (schema.id && cache$1.has(schema.id) && cache$1.get(schema.id)?.Comp === Comp) {
+    return cache$1.get(schema.id)?.WrapperComponent;
   }
   class Wrapper extends react.Component {
     static displayName = Comp.displayName;
@@ -688,16 +726,16 @@ const compWrapper = (Comp, info) => {
         forwardRef,
         ...rest
       } = this.props;
-      // @ts-ignore
       return /*#__PURE__*/react.createElement(Comp, {
         ...rest,
-        ref: forwardRef
+        ref: forwardRef,
+        __dataSource: getDataSource(baseRenderer)
       });
     }
   }
   patchDidCatch(Wrapper, info);
   const WrapperComponent = createForwardRefHocElement(Wrapper, Comp);
-  info.schema.id && cache$1.set(info.schema.id, {
+  schema.id && cache$1.set(schema.id, {
     WrapperComponent,
     Comp
   });
@@ -1342,7 +1380,7 @@ function baseRendererFactory() {
     /**
      * this method is for legacy purpose only, which used _ prefix instead of __ as private for some historical reasons
      */
-    __getComponentView = () => {
+    __getComponentView = schema => {
       const {
         __components,
         __schema
@@ -1350,6 +1388,9 @@ function baseRendererFactory() {
       if (!__components) {
         return;
       }
+      if (schema) {
+        return __components[schema.componentName];
+      }
       return __components[__schema.componentName];
     };
     __bindCustomMethods = props => {
@@ -1577,7 +1618,7 @@ function baseRendererFactory() {
         if (!rendererCore.isSchema(schema)) {
           return null;
         }
-        let Comp = components[schema.componentName] || this.props.__container?.components?.[schema.componentName];
+        let Comp = this.__getComponentView(schema);
 
         // 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
         const otherProps = rendererCore.isSchema(schema) ? {
@@ -1591,6 +1632,7 @@ function baseRendererFactory() {
             componentName: schema.componentName,
             componentId: schema.id,
             enableStrictNotFoundMode: engine.props.enableStrictNotFoundMode,
+            schema,
             ref: ref => {
               ref && engine.props?.onCompGetRef?.(schema, ref);
             }
@@ -1614,36 +1656,6 @@ function baseRendererFactory() {
         if (!condition && !displayInHook) {
           return null;
         }
-
-        // TODO: scope
-        // let scopeKey = ''
-        // // 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
-        // if (Comp.generateScope) {
-        //   const key = this.__parseExpression(schema.props?.key, scope)
-        //   if (key) {
-        //     // 如果组件自己设置key则使用组件自己的key
-        //     scopeKey = key
-        //   } else if (schema.__ctx) {
-        //     // 需要判断循环的情况
-        //     scopeKey = schema.__ctx.lceKey + (idx !== undefined ? `_${idx}` : '')
-        //   } else {
-        //     // 在生产环境schema没有__ctx上下文，需要手动生成一个lceKey
-        //     schema.__ctx = {
-        //       lceKey: `lce${++scopeIdx}`,
-        //     }
-        //     scopeKey = schema.__ctx.lceKey
-        //   }
-        //   if (!this.__compScopes[scopeKey]) {
-        //     this.__compScopes[scopeKey] = Comp.generateScope(this, schema)
-        //   }
-        // }
-        // // 如果组件有设置scope，需要为组件生成一个新的scope上下文
-        // if (scopeKey && this.__compScopes[scopeKey]) {
-        //   const compSelf = { ...this.__compScopes[scopeKey] }
-        //   compSelf.__proto__ = scope
-        //   scope = compSelf
-        // }
-
         if (engine.props?.designMode) {
           otherProps.__designMode = engine.props.designMode;
         }
@@ -2007,9 +2019,6 @@ function componentRendererFactory() {
     static displayName = 'CompRenderer';
     __namespace = 'component';
     __afterInit(props, ...rest) {
-      this.__generateCtx({
-        component: this
-      });
       const schema = props.__schema || {};
       this.state = this.__parseData(schema.state || {});
       this.__initDataSource(props);
@@ -2105,19 +2114,23 @@ const FaultComponent = ({
   error
 }) => {
   rendererCore.logger.error(`${componentName} 组件渲染异常, 异常原因: ${error?.message || error || '未知'}`);
-  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
     role: "alert",
     "aria-label": `${componentName} 组件渲染异常`,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       width: '100%',
-      height: '50px',
-      lineHeight: '50px',
+      height: '100%',
       textAlign: 'center',
       fontSize: '15px',
       color: '#ef4444',
       border: '2px solid #ef4444'
     },
-    children: [componentName, " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7"]
+    children: /*#__PURE__*/jsxRuntime.jsxs("span", {
+      children: [componentName, " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7"]
+    })
   });
 };
 
@@ -2136,15 +2149,19 @@ const NotFoundComponent = ({
     role: "alert",
     "aria-label": `${componentName} component not found`,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       width: '100%',
-      height: '50px',
-      lineHeight: '50px',
+      height: '100%',
       textAlign: 'center',
       fontSize: '15px',
       color: '#eab308',
       border: '2px solid #eab308'
     },
-    children: `${componentName} Component Not Found`
+    children: /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: `${componentName} Component Not Found`
+    })
   });
 };
 
@@ -2252,6 +2269,63 @@ function rendererFactory() {
   };
 }
 
+/**
+ * Setter Placeholder
+ * 设置器加载占位符组件
+ */
+
+/**
+ * 设置器加载占位符
+ * 当设置器尚未加载完成时显示
+ */
+const SetterPlaceholder = ({
+  setterType
+}) => {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '8px',
+      fontSize: '12px',
+      color: '#999',
+      borderRadius: '4px'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx(LoadingSpinner, {}), /*#__PURE__*/jsxRuntime.jsx("span", {
+      children: setterType ? `加载中: ${setterType}` : '设置器加载中...'
+    })]
+  });
+};
+
+/**
+ * 简单的加载动画
+ */
+const LoadingSpinner = () => {
+  return /*#__PURE__*/jsxRuntime.jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      animation: 'spin 1s linear infinite'
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsx("style", {
+      children: `
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `
+    }), /*#__PURE__*/jsxRuntime.jsx("path", {
+      d: "M21 12a9 9 0 1 1-6.219-8.56"
+    })]
+  });
+};
+
 const SettingRendererContext = /*#__PURE__*/react.createContext({});
 const useSettingRendererContext = () => {
   try {
@@ -2338,6 +2412,13 @@ const SettingSetter = mobxReact.observer(({
     component: SetterComponent,
     props: mixedSetterProps
   } = setters.createSetterContent(setterType, setterProps);
+
+  // 处理设置器未加载的情况
+  if (!SetterComponent) {
+    return /*#__PURE__*/jsxRuntime.jsx(SetterPlaceholder, {
+      setterType: setterType
+    });
+  }
   return /*#__PURE__*/jsxRuntime.jsx(SetterComponent, {
     field: field,
     selected: field.top?.getNode(),
@@ -2461,19 +2542,6 @@ const SettingRenderer = mobxReact.observer(props => {
       })
     });
   }
-
-  // 当节点被锁定，且未开启锁定后容器可设置属性
-  if (settings.isLocked) {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsxRuntime.jsx("p", {
-          children: "Current node is locked"
-        })
-      })
-    });
-  }
   if (Array.isArray(settings.items) && settings.items.length === 0) {
     return /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "lc-settings-main",
@@ -2505,6 +2573,8 @@ const SettingRenderer = mobxReact.observer(props => {
   });
 });
 
+exports.FaultComponent = FaultComponent;
+exports.NotFoundComponent = NotFoundComponent;
 exports.RendererContext = RendererContext;
 exports.SettingFieldView = SettingFieldView;
 exports.SettingRenderer = SettingRenderer;

package/dist/index.d.ts

@@ -8,3 +8,5 @@ export * from './renderer';
 export * from './setting-renderer';
 export * from './types';
 export * from './utils';
+export { default as NotFoundComponent } from './components/NotFoundComponent';
+export { default as FaultComponent } from './components/FaultComponent';

package/dist/index.js

@@ -1,5 +1,5 @@
 import { DESIGNER_EVENT, TRANSFORM_STAGE, isJSExpression, isJSFunction, isSetterConfig } from '@easy-editor/core';
-import { logger, isSchema, getValue as getValue$1, parseExpression, parseData, DataHelper, isUseLoop, transformArrayToMap, transformStringToFunction, classnames, getFileCssName, checkPropTypes } from '@easy-editor/renderer-core';
+import { logger, parseExpression, parseData, DataHelper, getValue as getValue$1, isSchema, isUseLoop, transformArrayToMap, transformStringToFunction, classnames, getFileCssName, checkPropTypes } from '@easy-editor/renderer-core';
 import { createContext, useContext, forwardRef, createElement, Component, PureComponent, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { observer } from 'mobx-react';
@@ -671,13 +671,51 @@ const patchDidCatch = (Comp, {
   }
 };
 const cache$1 = new Map();
+
+/** 获取数据源数据 */
+const getDataSource = baseRenderer => {
+  // component
+  const componentDataSource = {};
+  if (baseRenderer.dataSourceMap) {
+    const {
+      dataSourceMap,
+      state
+    } = baseRenderer;
+    Object.keys(dataSourceMap).forEach(key => {
+      componentDataSource[key] = state[key];
+    });
+  }
+
+  // page
+  const pageDataSource = {};
+  if (baseRenderer.page.dataSourceMap) {
+    const {
+      dataSourceMap,
+      state
+    } = baseRenderer.page;
+    Object.keys(dataSourceMap).forEach(key => {
+      pageDataSource[key] = state[key];
+    });
+  }
+  if (Object.keys(componentDataSource).length > 0 || Object.keys(pageDataSource).length > 0) {
+    return {
+      component: componentDataSource,
+      page: pageDataSource
+    };
+  }
+  return undefined;
+};
 const compWrapper = (Comp, info) => {
+  const {
+    baseRenderer,
+    schema
+  } = info;
   if (Comp?.prototype?.isReactComponent || Comp?.prototype instanceof Component) {
     patchDidCatch(Comp, info);
     return Comp;
   }
-  if (info.schema.id && cache$1.has(info.schema.id) && cache$1.get(info.schema.id)?.Comp === Comp) {
-    return cache$1.get(info.schema.id)?.WrapperComponent;
+  if (schema.id && cache$1.has(schema.id) && cache$1.get(schema.id)?.Comp === Comp) {
+    return cache$1.get(schema.id)?.WrapperComponent;
   }
   class Wrapper extends Component {
     static displayName = Comp.displayName;
@@ -686,16 +724,16 @@ const compWrapper = (Comp, info) => {
         forwardRef,
         ...rest
       } = this.props;
-      // @ts-ignore
       return /*#__PURE__*/createElement(Comp, {
         ...rest,
-        ref: forwardRef
+        ref: forwardRef,
+        __dataSource: getDataSource(baseRenderer)
       });
     }
   }
   patchDidCatch(Wrapper, info);
   const WrapperComponent = createForwardRefHocElement(Wrapper, Comp);
-  info.schema.id && cache$1.set(info.schema.id, {
+  schema.id && cache$1.set(schema.id, {
     WrapperComponent,
     Comp
   });
@@ -1340,7 +1378,7 @@ function baseRendererFactory() {
     /**
      * this method is for legacy purpose only, which used _ prefix instead of __ as private for some historical reasons
      */
-    __getComponentView = () => {
+    __getComponentView = schema => {
       const {
         __components,
         __schema
@@ -1348,6 +1386,9 @@ function baseRendererFactory() {
       if (!__components) {
         return;
       }
+      if (schema) {
+        return __components[schema.componentName];
+      }
       return __components[__schema.componentName];
     };
     __bindCustomMethods = props => {
@@ -1575,7 +1616,7 @@ function baseRendererFactory() {
         if (!isSchema(schema)) {
           return null;
         }
-        let Comp = components[schema.componentName] || this.props.__container?.components?.[schema.componentName];
+        let Comp = this.__getComponentView(schema);
 
         // 容器类组件的上下文通过props传递，避免context传递带来的嵌套问题
         const otherProps = isSchema(schema) ? {
@@ -1589,6 +1630,7 @@ function baseRendererFactory() {
             componentName: schema.componentName,
             componentId: schema.id,
             enableStrictNotFoundMode: engine.props.enableStrictNotFoundMode,
+            schema,
             ref: ref => {
               ref && engine.props?.onCompGetRef?.(schema, ref);
             }
@@ -1612,36 +1654,6 @@ function baseRendererFactory() {
         if (!condition && !displayInHook) {
           return null;
         }
-
-        // TODO: scope
-        // let scopeKey = ''
-        // // 判断组件是否需要生成scope，且只生成一次，挂在this.__compScopes上
-        // if (Comp.generateScope) {
-        //   const key = this.__parseExpression(schema.props?.key, scope)
-        //   if (key) {
-        //     // 如果组件自己设置key则使用组件自己的key
-        //     scopeKey = key
-        //   } else if (schema.__ctx) {
-        //     // 需要判断循环的情况
-        //     scopeKey = schema.__ctx.lceKey + (idx !== undefined ? `_${idx}` : '')
-        //   } else {
-        //     // 在生产环境schema没有__ctx上下文，需要手动生成一个lceKey
-        //     schema.__ctx = {
-        //       lceKey: `lce${++scopeIdx}`,
-        //     }
-        //     scopeKey = schema.__ctx.lceKey
-        //   }
-        //   if (!this.__compScopes[scopeKey]) {
-        //     this.__compScopes[scopeKey] = Comp.generateScope(this, schema)
-        //   }
-        // }
-        // // 如果组件有设置scope，需要为组件生成一个新的scope上下文
-        // if (scopeKey && this.__compScopes[scopeKey]) {
-        //   const compSelf = { ...this.__compScopes[scopeKey] }
-        //   compSelf.__proto__ = scope
-        //   scope = compSelf
-        // }
-
         if (engine.props?.designMode) {
           otherProps.__designMode = engine.props.designMode;
         }
@@ -2005,9 +2017,6 @@ function componentRendererFactory() {
     static displayName = 'CompRenderer';
     __namespace = 'component';
     __afterInit(props, ...rest) {
-      this.__generateCtx({
-        component: this
-      });
       const schema = props.__schema || {};
       this.state = this.__parseData(schema.state || {});
       this.__initDataSource(props);
@@ -2103,19 +2112,23 @@ const FaultComponent = ({
   error
 }) => {
   logger.error(`${componentName} 组件渲染异常, 异常原因: ${error?.message || error || '未知'}`);
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsx("div", {
     role: "alert",
     "aria-label": `${componentName} 组件渲染异常`,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       width: '100%',
-      height: '50px',
-      lineHeight: '50px',
+      height: '100%',
       textAlign: 'center',
       fontSize: '15px',
       color: '#ef4444',
       border: '2px solid #ef4444'
     },
-    children: [componentName, " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7"]
+    children: /*#__PURE__*/jsxs("span", {
+      children: [componentName, " \u7EC4\u4EF6\u6E32\u67D3\u5F02\u5E38\uFF0C\u8BF7\u67E5\u770B\u63A7\u5236\u53F0\u65E5\u5FD7"]
+    })
   });
 };
 
@@ -2134,15 +2147,19 @@ const NotFoundComponent = ({
     role: "alert",
     "aria-label": `${componentName} component not found`,
     style: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       width: '100%',
-      height: '50px',
-      lineHeight: '50px',
+      height: '100%',
       textAlign: 'center',
       fontSize: '15px',
       color: '#eab308',
       border: '2px solid #eab308'
     },
-    children: `${componentName} Component Not Found`
+    children: /*#__PURE__*/jsx("span", {
+      children: `${componentName} Component Not Found`
+    })
   });
 };
 
@@ -2250,6 +2267,63 @@ function rendererFactory() {
   };
 }
 
+/**
+ * Setter Placeholder
+ * 设置器加载占位符组件
+ */
+
+/**
+ * 设置器加载占位符
+ * 当设置器尚未加载完成时显示
+ */
+const SetterPlaceholder = ({
+  setterType
+}) => {
+  return /*#__PURE__*/jsxs("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '8px',
+      padding: '8px',
+      fontSize: '12px',
+      color: '#999',
+      borderRadius: '4px'
+    },
+    children: [/*#__PURE__*/jsx(LoadingSpinner, {}), /*#__PURE__*/jsx("span", {
+      children: setterType ? `加载中: ${setterType}` : '设置器加载中...'
+    })]
+  });
+};
+
+/**
+ * 简单的加载动画
+ */
+const LoadingSpinner = () => {
+  return /*#__PURE__*/jsxs("svg", {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: {
+      animation: 'spin 1s linear infinite'
+    },
+    children: [/*#__PURE__*/jsx("style", {
+      children: `
+          @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `
+    }), /*#__PURE__*/jsx("path", {
+      d: "M21 12a9 9 0 1 1-6.219-8.56"
+    })]
+  });
+};
+
 const SettingRendererContext = /*#__PURE__*/createContext({});
 const useSettingRendererContext = () => {
   try {
@@ -2336,6 +2410,13 @@ const SettingSetter = observer(({
     component: SetterComponent,
     props: mixedSetterProps
   } = setters.createSetterContent(setterType, setterProps);
+
+  // 处理设置器未加载的情况
+  if (!SetterComponent) {
+    return /*#__PURE__*/jsx(SetterPlaceholder, {
+      setterType: setterType
+    });
+  }
   return /*#__PURE__*/jsx(SetterComponent, {
     field: field,
     selected: field.top?.getNode(),
@@ -2459,19 +2540,6 @@ const SettingRenderer = observer(props => {
       })
     });
   }
-
-  // 当节点被锁定，且未开启锁定后容器可设置属性
-  if (settings.isLocked) {
-    return /*#__PURE__*/jsx("div", {
-      className: "lc-settings-main",
-      children: /*#__PURE__*/jsx("div", {
-        className: "lc-settings-notice",
-        children: /*#__PURE__*/jsx("p", {
-          children: "Current node is locked"
-        })
-      })
-    });
-  }
   if (Array.isArray(settings.items) && settings.items.length === 0) {
     return /*#__PURE__*/jsx("div", {
       className: "lc-settings-main",
@@ -2503,4 +2571,4 @@ const SettingRenderer = observer(props => {
   });
 });
 
-export { RendererContext, SettingFieldView, SettingRenderer, adapter, baseRendererFactory, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getSchemaChildren, isReactClass, isReactComponent, leafWrapper, pageRendererFactory, rendererFactory, useRendererContext };
+export { FaultComponent, NotFoundComponent, RendererContext, SettingFieldView, SettingRenderer, adapter, baseRendererFactory, cloneEnumerableProperty, compWrapper, componentRendererFactory, contextFactory, createForwardRefHocElement, executeLifeCycleMethod, getSchemaChildren, isReactClass, isReactComponent, leafWrapper, pageRendererFactory, rendererFactory, useRendererContext };

package/dist/setting-renderer/SetterPlaceholder.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Setter Placeholder
+ * 设置器加载占位符组件
+ */
+interface SetterPlaceholderProps {
+    /** 设置器类型名称 */
+    setterType?: string;
+}
+/**
+ * 设置器加载占位符
+ * 当设置器尚未加载完成时显示
+ */
+export declare const SetterPlaceholder: ({ setterType }: SetterPlaceholderProps) => import("react").JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/react-renderer",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "React Renderer package for EasyEditor",
   "type": "module",
   "main": "dist/index.js",
@@ -48,12 +48,12 @@
   },
   "peerDependencies": {
     "mobx-react": "^9.2.0",
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19",
-    "@types/react": "^18 || ^19",
-    "@types/react-dom": "^18 || ^19",
-    "@easy-editor/core": "^1.0.2",
-    "@easy-editor/renderer-core": "^1.0.2"
+    "react": "^19",
+    "react-dom": "^19",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@easy-editor/core": "^1.0.3",
+    "@easy-editor/renderer-core": "^1.0.3"
   },
   "dependencies": {
     "lodash-es": "^4.17.21"