diff --git a/packages/amis-core/src/components/CustomStyle.tsx b/packages/amis-core/src/components/CustomStyle.tsx index eb69d8d10..8eb7f682c 100644 --- a/packages/amis-core/src/components/CustomStyle.tsx +++ b/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; } diff --git a/packages/amis-core/src/utils/style-helper.ts b/packages/amis-core/src/utils/style-helper.ts index daeaeaa54..1b8dd2a41 100644 --- a/packages/amis-core/src/utils/style-helper.ts +++ b/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) { diff --git a/packages/amis-editor-core/scss/style-control/_theme-css-code.scss b/packages/amis-editor-core/scss/style-control/_theme-css-code.scss index a6ffceacf..819a2f532 100644 --- a/packages/amis-editor-core/scss/style-control/_theme-css-code.scss +++ b/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; + } + } +} diff --git a/packages/amis-editor-core/src/component/IFramePreview.tsx b/packages/amis-editor-core/src/component/IFramePreview.tsx index 85ca56add..ff7aa2e99 100644 --- a/packages/amis-editor-core/src/component/IFramePreview.tsx +++ b/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 { getModalContainer: this.getModalContainer } )} + ); } @@ -219,3 +220,19 @@ function InnerComponent({ return null; } + +const InnerSvgSpirit = memo(() => { + // @ts-ignore 这里取的是平台的变量 + let spiriteIcons = window.spiriteIcons; + if (spiriteIcons) { + return ( +
+ ); + } else { + return null; + } +}); diff --git a/packages/amis-editor/src/plugin/Image.tsx b/packages/amis-editor/src/plugin/Image.tsx index 5d29639c4..45f00f205 100644 --- a/packages/amis-editor/src/plugin/Image.tsx +++ b/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', diff --git a/packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx b/packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx index fd4e85683..85ddc2929 100644 --- a/packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx +++ b/packages/amis-editor/src/renderer/style-control/ThemeCssCode.tsx @@ -138,6 +138,7 @@ function ThemeCssCode(props: FormControlProps) {