feat: 扩展编辑器功能

packages/amis-editor-core/scss/editor.scss

@@ -83,6 +83,7 @@
   min-width: 980px;
   overflow: hidden;
   user-select: none;
+  position: relative;
 
   // 覆盖amis默认top值，避免导致未垂直居中
   .ae-Editor-toolbar svg.icon {
@@ -125,6 +126,18 @@
   border: 1px dashed rgb(206, 208, 211);
 }
 
+.subEditor-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  & .subEditor-dialog {
+    height: 100%;
+    margin: 0;
+  }
+}
+
 // 弹窗编辑器面板
 .subEditor-dialog {
   overflow: hidden;

packages/amis-editor-core/src/component/Editor.tsx

@@ -135,6 +135,7 @@ export interface EditorProps extends PluginEventListener {
   getHostNodeDataSchema?: () => Promise<any>;
 
   getAvaiableContextFields?: (node: EditorNodeType) => Promise<any>;
+  readonly?: boolean;
 }
 
 export default class Editor extends Component<EditorProps> {
@@ -275,6 +276,10 @@ export default class Editor extends Component<EditorProps> {
       return;
     }
 
+    if (this.props.readonly) {
+      return;
+    }
+
     const manager = this.manager;
     const store = manager.store;
 
@@ -573,7 +578,8 @@ export default class Editor extends Component<EditorProps> {
       previewProps,
       autoFocus,
       isSubEditor,
-      amisEnv
+      amisEnv,
+      readonly
     } = this.props;
 
     return (
@@ -588,7 +594,7 @@ export default class Editor extends Component<EditorProps> {
         )}
       >
         <div className="ae-Editor-inner" onContextMenu={this.handleContextMenu}>
-          {!preview && (
+          {!preview && !readonly && (
             <LeftPanels
               store={this.store}
               manager={this.manager}
@@ -618,6 +624,7 @@ export default class Editor extends Component<EditorProps> {
               amisEnv={amisEnv}
               autoFocus={autoFocus}
               toolbarContainer={this.getToolbarContainer}
+              readonly={readonly}
             ></Preview>
           </div>
 
@@ -628,6 +635,7 @@ export default class Editor extends Component<EditorProps> {
               theme={theme}
               appLocale={appLocale}
               amisEnv={amisEnv}
+              readonly={readonly}
             />
           )}
 
@@ -639,6 +647,7 @@ export default class Editor extends Component<EditorProps> {
           manager={this.manager}
           theme={theme}
           amisEnv={amisEnv}
+          readonly={readonly}
         />
         <ScaffoldModal
           store={this.store}

packages/amis-editor-core/src/component/HighlightBox.tsx

@@ -19,6 +19,7 @@ export interface HighlightBoxProps {
   onSwitch?: (id: string) => void;
   manager: EditorManager;
   children?: React.ReactNode;
+  readonly?: boolean;
 }
 
 export default observer(function ({
@@ -30,7 +31,8 @@ export default observer(function ({
   node,
   toolbarContainer,
   onSwitch,
-  manager
+  manager,
+  readonly
 }: HighlightBoxProps) {
   const handleWResizerMouseDown = React.useCallback(
     (e: MouseEvent) => startResize(e, 'horizontal'),
@@ -250,7 +252,7 @@ export default observer(function ({
       draggable={!!curFreeContainerId || isDraggableContainer}
       onDragStart={handleDragStart}
     >
-      {isActive ? (
+      {isActive && !readonly ? (
         <div
           className={`ae-Editor-toolbarPopover ${
             isRightElem ? 'is-right-elem' : ''

packages/amis-editor-core/src/component/Panel/RightPanels.tsx

@@ -1,6 +1,6 @@
 import {observer} from 'mobx-react';
 import React from 'react';
-import {Tab, Tabs} from 'amis';
+import {Tab, Tabs, toast} from 'amis';
 import cx from 'classnames';
 import {EditorManager} from '../../manager';
 import {EditorStoreType} from '../../store/editor';
@@ -16,6 +16,7 @@ interface RightPanelsProps {
   theme?: string;
   appLocale?: string;
   amisEnv?: any;
+  readonly?: boolean;
 }
 
 interface RightPanelsStates {
@@ -62,6 +63,29 @@ export class RightPanels extends React.Component<
     return findDOMNode(this) as HTMLElement;
   }
 
+  @autobind
+  handlePanelChangeValue(
+    ...arg: Parameters<typeof this.props.manager.panelChangeValue>
+  ) {
+    const {manager, readonly} = this.props;
+
+    if (readonly) {
+      const diff = arg[1];
+      if (
+        !diff?.find((item: any) =>
+          item.path.find(
+            (p: string) => !p.startsWith('__') && p !== 'pullRefresh'
+          )
+        )
+      ) {
+        return;
+      }
+      toast.error('不支持编辑');
+    } else {
+      manager.panelChangeValue(...arg);
+    }
+  }
+
   render() {
     const {store, manager, theme} = this.props;
     const {isOpenStatus, isFixedStatus} = this.state;
@@ -77,7 +101,7 @@ export class RightPanels extends React.Component<
           path: node?.path,
           node: node,
           value: store.value,
-          onChange: manager.panelChangeValue,
+          onChange: this.handlePanelChangeValue,
           store: store,
           manager: manager,
           popOverContainer: this.getPopOverContainer
@@ -90,7 +114,7 @@ export class RightPanels extends React.Component<
           info={node?.info}
           path={node?.path}
           value={store.value}
-          onChange={manager.panelChangeValue}
+          onChange={this.handlePanelChangeValue}
           store={store}
           manager={manager}
           popOverContainer={this.getPopOverContainer}

packages/amis-editor-core/src/component/Preview.tsx

@@ -39,6 +39,8 @@ export interface PreviewProps {
   autoFocus?: boolean;
 
   toolbarContainer?: () => any;
+
+  readonly?: boolean;
 }
 
 export interface PreviewState {
@@ -604,9 +606,11 @@ export default class Preview extends Component<PreviewProps> {
               toolbarContainer={toolbarContainer}
               onSwitch={this.handleNavSwitch}
               manager={manager}
+              readonly={this.props.readonly}
             >
               {node.childRegions.map(region =>
                 !node.memberImmutable(region.region) &&
+                !this.props.readonly &&
                 store.isRegionActive(region.id, region.region) ? (
                   <RegionHighlightBox
                     manager={manager}

packages/amis-editor-core/src/component/SubEditor.tsx

@@ -19,6 +19,7 @@ export interface SubEditorProps {
   manager: EditorManager;
   theme?: string;
   amisEnv?: RenderOptions;
+  readonly?: boolean;
 }
 
 @observer
@@ -97,7 +98,7 @@ export class SubEditor extends React.Component<SubEditorProps> {
   }
 
   buildSchema() {
-    const {store, manager, amisEnv} = this.props;
+    const {store, manager, amisEnv, readonly} = this.props;
     const subEditorContext = store.subEditorContext;
     const config = manager.config;
     let superEditorData: any = store.superEditorData;
@@ -118,6 +119,7 @@ export class SubEditor extends React.Component<SubEditorProps> {
         ? {
             type: 'form',
             mode: 'normal',
+            wrapWithPanel: false,
             wrapperComponent: 'div',
             onValidate: async (value: any) => {
               const result = await store.subEditorContext?.validate?.(value);
@@ -190,6 +192,7 @@ export class SubEditor extends React.Component<SubEditorProps> {
                     getAvaiableContextFields={node =>
                       manager.getAvailableContextFields(node)
                     }
+                    readonly={readonly}
                   />
                 )
               }
@@ -244,10 +247,14 @@ export class SubEditor extends React.Component<SubEditorProps> {
   }
 
   render() {
-    const {store, theme, manager} = this.props;
+    const {store, theme, manager, readonly} = this.props;
+    if (!store.subEditorContext) {
+      return null;
+    }
     return render(
       {
-        type: 'dialog',
+        type: readonly ? 'container' : 'dialog',
+        className: readonly ? 'subEditor-container' : 'subEditor-dialog',
         ...this.buildSchema()
       },
 

packages/amis-editor-core/src/component/base/SchemaForm.tsx

@@ -101,6 +101,8 @@ export function SchemaFrom({
     return schema;
   }, [body, controls, submitOnChange]);
 
+  const [init, setInit] = React.useState(true);
+
   const themeConfig = React.useMemo(() => getThemeConfig(), []);
   const submitSubscribers = React.useRef<Array<Function>>([]);
   const subscribeSubmit = React.useCallback(
@@ -147,10 +149,10 @@ export function SchemaFrom({
         newValue = pipeOut ? await pipeOut(newValue, value) : newValue;
         const diffValue = diff(value, newValue);
         // 没有变化时不触发onChange
-        if (!diffValue) {
+        if (!diffValue || init) {
+          setInit(false);
           return;
         }
-
         onChange(newValue, diffValue, (schema, value, id, diff) => {
           return submitSubscribers.current.reduce((schema, fn) => {
             return fn(schema, value, id, diff);

packages/amis-editor-core/src/plugin.ts

@@ -1029,6 +1029,9 @@ export abstract class BasePlugin implements PluginInterface {
 
   static scene = ['global'];
 
+  name?: string;
+  rendererName?: string;
+
   /**
    * 如果配置里面有 rendererName 自动返回渲染器信息。
    * @param renderer
@@ -1279,6 +1282,13 @@ export abstract class BasePlugin implements PluginInterface {
       originalValue: node.schema.value // 记录原始值，循环引用检测需要
     } as any;
   }
+
+  getKeyAndName() {
+    return {
+      key: this.rendererName,
+      name: this.name
+    };
+  }
 }
 
 /**