Merge remote-tracking branch 'origin/master' into chore-table913

packages/amis-core/src/components/CustomStyle.tsx

@@ -12,8 +12,8 @@ interface CustomStyleProps {
 }
 
 export default function (props: CustomStyleProps) {
-  const {themeCss, classNames, id, defaultData, wrapperCustomStyle} =
-    props.config;
+  const {config, env} = props;
+  const {themeCss, classNames, id, defaultData, wrapperCustomStyle} = config;
   if (!themeCss && !wrapperCustomStyle) {
     return null;
   }
@@ -24,19 +24,26 @@ export default function (props: CustomStyleProps) {
       themeCss,
       classNames,
       defaultData,
-      customStyleClassPrefix: props.env?.customStyleClassPrefix
+      customStyleClassPrefix: env?.customStyleClassPrefix,
+      doc: env.getModalContainer?.().ownerDocument
     });
     return () => {
-      styleDom.removeCustomStyle();
+      styleDom.removeCustomStyle('', env.getModalContainer?.().ownerDocument);
     };
-  }, [props.config.themeCss]);
+  }, [config.themeCss]);
 
   useEffect(() => {
-    styleDom.insertEditCustomStyle(wrapperCustomStyle);
+    styleDom.insertEditCustomStyle(
+      wrapperCustomStyle,
+      env.getModalContainer?.().ownerDocument
+    );
     return () => {
-      styleDom.removeCustomStyle('wrapperCustomStyle');
+      styleDom.removeCustomStyle(
+        'wrapperCustomStyle',
+        env.getModalContainer?.().ownerDocument
+      );
     };
-  }, [props.config.wrapperCustomStyle]);
+  }, [config.wrapperCustomStyle]);
 
   return null;
 }

packages/amis-core/src/utils/style-helper.ts

@@ -43,18 +43,19 @@ interface extra {
   suf?: string;
 }
 
-export function findOrCreateStyle(id: string) {
-  let varStyleTag = document.getElementById(id);
+export function findOrCreateStyle(id: string, doc?: Document) {
+  doc = doc || document;
+  let varStyleTag = doc.getElementById(id);
   if (!varStyleTag) {
-    varStyleTag = document.createElement('style');
+    varStyleTag = doc.createElement('style');
     varStyleTag.id = id;
-    document.body.appendChild(varStyleTag);
+    doc.body.appendChild(varStyleTag);
   }
   return varStyleTag;
 }
 
-export function insertStyle(style: string, id: string) {
-  const varStyleTag = findOrCreateStyle(id);
+export function insertStyle(style: string, id: string, doc?: Document) {
+  const varStyleTag = findOrCreateStyle(id, doc);
 
   // bca-disable-line
   varStyleTag.innerHTML = style;
@@ -273,7 +274,8 @@ export function insertCustomStyle(
   classNames?: CustomStyleClassName[],
   id?: string,
   defaultData?: any,
-  customStyleClassPrefix?: string
+  customStyleClassPrefix?: string,
+  doc?: Document
 ) {
   if (!themeCss) {
     return;
@@ -284,7 +286,7 @@ export function insertCustomStyle(
     value = customStyleClassPrefix
       ? `${customStyleClassPrefix} ${value}`
       : value;
-    insertStyle(value, id?.replace('u:', '') || uuid());
+    insertStyle(value, id?.replace('u:', '') || uuid(), doc);
   }
 }
 
@@ -331,7 +333,11 @@ function traverseStyle(style: any, path: string, result: any) {
 /**
  * 设置源码编辑自定义样式
  */
-export function insertEditCustomStyle(customStyle: any, id?: string) {
+export function insertEditCustomStyle(
+  customStyle: any,
+  id?: string,
+  doc?: Document
+) {
   let styles: any = {};
   traverseStyle(customStyle, '', styles);
 
@@ -358,7 +364,8 @@ export function insertEditCustomStyle(customStyle: any, id?: string) {
   }
   insertStyle(
     content,
-    'wrapperCustomStyle-' + (id?.replace('u:', '') || uuid())
+    'wrapperCustomStyle-' + (id?.replace('u:', '') || uuid()),
+    doc
   );
 }
 
@@ -368,6 +375,7 @@ export interface InsertCustomStyle {
   id?: string;
   defaultData?: any;
   customStyleClassPrefix?: string;
+  doc?: Document;
 }
 
 export class StyleDom {
@@ -388,14 +396,16 @@ export class StyleDom {
     themeCss,
     classNames,
     defaultData,
-    customStyleClassPrefix
+    customStyleClassPrefix,
+    doc
   }: InsertCustomStyle) {
     insertCustomStyle(
       themeCss,
       classNames,
       this.id,
       defaultData,
-      customStyleClassPrefix
+      customStyleClassPrefix,
+      doc
     );
   }
 
@@ -404,14 +414,14 @@ export class StyleDom {
    *
    * @param wrapperCustomStyle 自定义样式
    */
-  insertEditCustomStyle(wrapperCustomStyle: any) {
-    insertEditCustomStyle(wrapperCustomStyle, this.id);
+  insertEditCustomStyle(wrapperCustomStyle: any, doc?: Document) {
+    insertEditCustomStyle(wrapperCustomStyle, this.id, doc);
   }
   /**
    * 移除自定义样式
    */
-  removeCustomStyle(type?: string) {
-    const style = document.getElementById(
+  removeCustomStyle(type?: string, doc?: Document) {
+    const style = (doc || document).getElementById(
       (type ? type + '-' : '') + this.id.replace('u:', '')
     );
     if (style) {

packages/amis-editor-core/scss/style-control/_theme-css-code.scss

@@ -99,3 +99,15 @@
     }
   }
 }
+
+.cxd-ThemeCssCode-custom-editor {
+  .suggest-widget {
+    width: auto !important;
+    left: 16px !important;
+    right: 0 !important;
+
+    .monaco-sash:first-child {
+      display: none;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import {observer} from 'mobx-react';
 import {EditorStoreType} from '../store/editor';
-import React from 'react';
+import React, {memo} from 'react';
 import {EditorManager} from '../manager';
 import Frame, {useFrame} from 'react-frame-component';
 import {
@@ -111,6 +111,7 @@ export default class IFramePreview extends React.Component<IFramePreviewProps> {
             getModalContainer: this.getModalContainer
           }
         )}
+        <InnerSvgSpirit />
       </Frame>
     );
   }
@@ -219,3 +220,19 @@ function InnerComponent({
 
   return null;
 }
+
+const InnerSvgSpirit = memo(() => {
+  // @ts-ignore 这里取的是平台的变量
+  let spiriteIcons = window.spiriteIcons;
+  if (spiriteIcons) {
+    return (
+      <div
+        id="amis-icon-manage-mount-node"
+        style={{display: 'none'}}
+        dangerouslySetInnerHTML={{__html: spiriteIcons}}
+      ></div>
+    );
+  } else {
+    return null;
+  }
+});

packages/amis-editor/src/plugin/Image.tsx

@@ -155,7 +155,7 @@ export class ImagePlugin extends BasePlugin {
 
               {
                 name: 'thumbMode',
-                visibleOn: 'imageMode ===  "thumb"',
+                visibleOn: '${!imageMode || imageMode ===  "thumb"}',
                 type: 'select',
                 label: '展示模式',
                 mode: 'horizontal',

packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx

@@ -138,6 +138,7 @@ function ThemeCssCode(props: FormControlProps) {
         </a>
         <div className="ThemeCssCode-editor-wrap" style={{height: '180px'}}>
           <Editor
+            className="ThemeCssCode-custom-editor"
             value={value}
             placeholder={editorPlaceholder}
             language="scss"

packages/amis/package.json

@@ -84,6 +84,8 @@
     "@svgr/rollup": "^6.2.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.4.0",
+    "@testing-library/dom": "8.20.1",
+    "regexp.prototype.flags": "1.5.0",
     "@types/async": "^2.0.45",
     "@types/codemirror": "^5.60.3",
     "@types/echarts": "^4.9.2",