Merge pull request #6652 from igrowp/fix-expression

Fix: 修复表达式PM走查问题
2024-12-02 20:09:08 +08:00 · 2023-04-20 17:07:06 +08:00 · 2023-04-20 17:07:06 +08:00 · 99132159d1
commit 99132159d1
parent f6c8140f54 5f5a157674
37 changed files with 77 additions and 46 deletions
--- a/packages/amis-editor-core/scss/control/_formula-control.scss
+++ b/packages/amis-editor-core/scss/control/_formula-control.scss
@ -3,6 +3,7 @@ div.ae-editor-FormulaControl {
  @include flexBox();
  align-items: stretch;
  max-width: 100%;
+  height: var(--input-size-default-height);
 }
 .ae-editor-FormulaControl {
  & > &-button {
--- a/packages/amis-editor-core/scss/control/_textarea-formula-control.scss
+++ b/packages/amis-editor-core/scss/control/_textarea-formula-control.scss
@ -155,6 +155,7 @@
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
+    line-height: 16px;

    &:hover {
      background: var(--button-primary-hover-bg-color);
@ -168,6 +169,7 @@
    font-size: 12px;
    color: white;
    cursor: pointer;
+    margin-left: 4px;
  }

  &-popover {
--- a/packages/amis-editor-core/scss/control/_tpl-formula-control.scss
+++ b/packages/amis-editor-core/scss/control/_tpl-formula-control.scss
@ -2,7 +2,7 @@
  position: relative;
  width: 100%;
  display: flex;
-  height: 32px;
+  height: var(--input-size-default-height);

  .ae-TplResultBox {
    position: relative;
@ -130,4 +130,8 @@
      padding-right: 28px;
    }
  }
+
+  .cm-expression-text {
+    max-width: 48px;
+  }
 }
--- a/packages/amis-editor-core/src/builder/ApiBuilder.ts
+++ b/packages/amis-editor-core/src/builder/ApiBuilder.ts
@ -12,8 +12,8 @@ import {
 } from './DSBuilder';
 import cloneDeep from 'lodash/cloneDeep';
 import {getEnv} from 'mobx-state-tree';
-import {ButtonSchema} from 'amis/lib/renderers/Action';
-import {FormSchema, SchemaCollection, SchemaObject} from 'amis/lib/Schema';
+import type {ButtonSchema} from 'amis/lib/renderers/Action';
+import type {FormSchema, SchemaCollection, SchemaObject} from 'amis/lib/Schema';

 import type {DSSourceSettingFormConfig} from './DSBuilder';
 import {getSchemaTpl, tipedLabel} from '../tpl';
--- a/packages/amis-editor-core/src/builder/DSBuilder.ts
+++ b/packages/amis-editor-core/src/builder/DSBuilder.ts
@ -2,9 +2,9 @@
 * 数据源构造器，可用于对接当前amis中的扩展数据源
 */

-import {ButtonSchema} from 'amis/lib/renderers/Action';
-import {CRUD2Schema} from 'amis/lib/renderers/CRUD2';
-import {FormSchema, SchemaCollection, SchemaObject} from 'amis/lib/Schema';
+import type {ButtonSchema} from 'amis/lib/renderers/Action';
+import type {CRUD2Schema} from 'amis/lib/renderers/CRUD2';
+import type {FormSchema, SchemaCollection, SchemaObject} from 'amis/lib/Schema';
 import {EditorNodeType} from '../store/node';

 /**
--- a/packages/amis-editor-core/src/component/Editor.tsx
+++ b/packages/amis-editor-core/src/component/Editor.tsx
@ -3,7 +3,7 @@ import cx from 'classnames';
 import Preview from './Preview';
 import {autobind} from '../util';
 import {MainStore, EditorStoreType} from '../store/editor';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import {EditorManager, EditorManagerConfig, PluginClass} from '../manager';
 import {reaction} from 'mobx';
 import {RenderOptions, toast} from 'amis';
--- a/packages/amis-editor-core/src/component/factory.tsx
+++ b/packages/amis-editor-core/src/component/factory.tsx
@ -19,7 +19,7 @@ import {CommonConfigWrapper} from './CommonConfigWrapper';
 import type {Schema} from 'amis';
 import type {DataScope} from 'amis-core';
 import type {RendererConfig} from 'amis-core/lib/factory';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';
 import {omit} from 'lodash';

 // 创建 Node Store 并构建成树
--- a/packages/amis-editor-core/src/manager.ts
+++ b/packages/amis-editor-core/src/manager.ts
@ -66,7 +66,7 @@ import findIndex from 'lodash/findIndex';
 import {EditorDNDManager} from './dnd';
 import {VariableManager} from './variable';
 import {IScopedContext} from 'amis';
-import {SchemaObject, SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaObject, SchemaCollection} from 'amis/lib/Schema';
 import type {RendererConfig} from 'amis-core/lib/factory';
 import isPlainObject from 'lodash/isPlainObject';
 import {omit} from 'lodash';
--- a/packages/amis-editor-core/src/tpl.tsx
+++ b/packages/amis-editor-core/src/tpl.tsx
@ -1,4 +1,4 @@
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';

 /**
 * @file amis schema 配置模板，主要很多地方都要全部配置的化，
--- a/packages/amis-editor-core/src/util.ts
+++ b/packages/amis-editor-core/src/util.ts
@ -8,7 +8,7 @@ import DeepDiff, {Diff} from 'deep-diff';
 import isPlainObject from 'lodash/isPlainObject';
 import isNumber from 'lodash/isNumber';
 import type {Schema} from 'amis';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import {assign, cloneDeep} from 'lodash';
 import {getGlobalData} from 'amis-theme-editor-helper';

--- a/packages/amis-editor/src/component/BaseControl.ts
+++ b/packages/amis-editor/src/component/BaseControl.ts
@ -9,7 +9,6 @@ import {
 } from '../renderer/event-control/helper';
 import {getSchemaTpl, isObject, tipedLabel} from 'amis-editor-core';
 import type {BaseEventContext} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';

 // 默认动作
 export const BUTTON_DEFAULT_ACTION = {
--- a/packages/amis-editor/src/plugin/Alert.tsx
+++ b/packages/amis-editor/src/plugin/Alert.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import {registerEditorPlugin} from 'amis-editor-core';
 import {BaseEventContext, BasePlugin} from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';

 export class AlertPlugin extends BasePlugin {
  static scene = ['layout'];
--- a/packages/amis-editor/src/plugin/Button.tsx
+++ b/packages/amis-editor/src/plugin/Button.tsx
@ -11,7 +11,7 @@ import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import {BUTTON_DEFAULT_ACTION} from '../component/BaseControl';
 import {getEventControlConfig} from '../renderer/event-control/helper';
 import {RendererPluginAction, RendererPluginEvent} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import {getOldActionSchema} from '../renderer/event-control/helper';

 export class ButtonPlugin extends BasePlugin {
--- a/packages/amis-editor/src/plugin/CRUD2.tsx
+++ b/packages/amis-editor/src/plugin/CRUD2.tsx
@ -24,10 +24,10 @@ import {
  RendererPluginEvent
 } from 'amis-editor-core';
 import {flattenDeep, fromPairs, isObject, remove} from 'lodash';
-import {ButtonSchema} from 'amis/lib/renderers/Action';
-import {FormSchema, SchemaObject} from 'amis/lib/Schema';
+import type {ButtonSchema} from 'amis/lib/renderers/Action';
+import type {FormSchema, SchemaObject} from 'amis/lib/Schema';
 import {findTree} from 'amis';
-import {CRUD2Schema} from 'amis/lib/renderers/CRUD2';
+import type {CRUD2Schema} from 'amis/lib/renderers/CRUD2';
 import {FeatureOption} from '../renderer/FeatureControl';
 import {getArgsWrapper} from '../renderer/event-control/helper';

--- a/packages/amis-editor/src/plugin/Form/Combo.tsx
+++ b/packages/amis-editor/src/plugin/Form/Combo.tsx
@ -188,14 +188,12 @@ export class ComboControlPlugin extends BasePlugin {
            placeholder: '变量名',
            source: '${__setValueDs}'
          },
-          {
+          getSchemaTpl('formulaControl', {
            name: 'val',
-            type: 'input-formula',
            variables: '${variables}',
-            evalMode: false,
            variableMode: 'tabs',
            inputMode: 'input-group'
-          }
+          })
        ]
      })
    },
--- a/packages/amis-editor/src/plugin/Form/InputSubForm.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputSubForm.tsx
@ -1,5 +1,5 @@
 import {Button} from 'amis';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';
 import React from 'react';
 import {
  BaseEventContext,
--- a/packages/amis-editor/src/plugin/Others/Action.tsx
+++ b/packages/amis-editor/src/plugin/Others/Action.tsx
@ -10,7 +10,7 @@ import {
 } from 'amis-editor-core';
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 import {diff} from 'amis-editor-core';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';

 export class ActionPlugin extends BasePlugin {
  panelTitle = '按钮';
--- a/packages/amis-editor/src/plugin/SearchBox.tsx
+++ b/packages/amis-editor/src/plugin/SearchBox.tsx
@ -8,7 +8,7 @@ import {
 import {getSchemaTpl} from 'amis-editor-core';
 import {getEventControlConfig} from '../renderer/event-control/helper';

-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';

 export class SearchBoxPlugin extends BasePlugin {
  // 关联渲染器名字
--- a/packages/amis-editor/src/plugin/Table.tsx
+++ b/packages/amis-editor/src/plugin/Table.tsx
@ -22,7 +22,7 @@ import {
 import {defaultValue, getSchemaTpl, tipedLabel} from 'amis-editor-core';
 import {mockValue} from 'amis-editor-core';
 import {EditorNodeType} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import {
  getEventControlConfig,
  getArgsWrapper
--- a/packages/amis-editor/src/plugin/Table2.tsx
+++ b/packages/amis-editor/src/plugin/Table2.tsx
@ -25,7 +25,7 @@ import {
  getEventControlConfig,
  getArgsWrapper
 } from '../renderer/event-control/helper';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';

 export class Table2Plugin extends BasePlugin {
  // 关联渲染器名字
--- a/packages/amis-editor/src/plugin/TableCell2.tsx
+++ b/packages/amis-editor/src/plugin/TableCell2.tsx
@ -16,8 +16,8 @@ import {
 } from 'amis-editor-core';
 import type {DSField} from 'amis-editor-core';
 import {fromPairs} from 'lodash';
-import {TabsSchema} from 'amis/lib/renderers/Tabs';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {TabsSchema} from 'amis/lib/renderers/Tabs';
+import type {SchemaObject} from 'amis/lib/Schema';
 import {remarkTpl} from '../component/BaseControl';

 export class TableCell2Plugin extends BasePlugin {
--- a/packages/amis-editor/src/renderer/DataBindingControl.tsx
+++ b/packages/amis-editor/src/renderer/DataBindingControl.tsx
@ -21,7 +21,7 @@ import React from 'react';
 import {EditorManager, EditorNodeType, autobind} from 'amis-editor-core';
 import type {DSField, DSFieldGroup} from 'amis-editor-core';
 import {matchSorter} from 'match-sorter';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';
 import {default as cx} from 'classnames';

 export interface DataBindingProps extends FormControlProps {
--- a/packages/amis-editor/src/renderer/FormulaControl.tsx
+++ b/packages/amis-editor/src/renderer/FormulaControl.tsx
@ -690,6 +690,7 @@ export default class FormulaControl extends React.Component<
 }

@FormItem({
-  type: 'ae-formulaControl'
+  type: 'ae-formulaControl',
+  detectProps: ['rendererSchema']
 })
 export class FormulaControlRenderer extends FormulaControl {}
--- a/packages/amis-editor/src/renderer/MapSourceControl.tsx
+++ b/packages/amis-editor/src/renderer/MapSourceControl.tsx
@ -7,7 +7,7 @@ import cx from 'classnames';
 import {FormItem} from 'amis';
 import {autobind, getSchemaTpl, tipedLabel} from 'amis-editor-core';
 import {FormControlProps, isObject} from 'amis-core';
-import {SchemaApi} from 'amis/lib/Schema';
+import type {SchemaApi} from 'amis/lib/Schema';
 import debounce from 'lodash/debounce';

 enum MapType {
--- a/packages/amis-editor/src/renderer/NavSourceControl.tsx
+++ b/packages/amis-editor/src/renderer/NavSourceControl.tsx
@ -12,7 +12,7 @@ import {FormItem, Button, InputBox, Switch, Radios} from 'amis';
 import {autobind} from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';
 import type {FormControlProps} from 'amis-core';
-import {SchemaApi} from 'amis/lib/Schema';
+import type {SchemaApi} from 'amis/lib/Schema';

 export type valueType = 'text' | 'boolean' | 'number';

--- a/packages/amis-editor/src/renderer/OptionControl.tsx
+++ b/packages/amis-editor/src/renderer/OptionControl.tsx
@ -27,7 +27,7 @@ import type {Option} from 'amis';
 import {createObject, FormControlProps} from 'amis-core';
 import type {TextControlSchema} from 'amis/lib/renderers/Form/inputText';
 import type {OptionValue} from 'amis-core';
-import {SchemaApi} from 'amis/lib/Schema';
+import type {SchemaApi} from 'amis/lib/Schema';

 export type valueType = 'text' | 'boolean' | 'number';

--- a/packages/amis-editor/src/renderer/TimelineItemControl.tsx
+++ b/packages/amis-editor/src/renderer/TimelineItemControl.tsx
@ -11,7 +11,7 @@ import {getI18nEnabled, tipedLabel} from 'amis-editor-core';
 import {autobind} from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';
 import type {FormControlProps} from 'amis-core';
-import {SchemaApi} from 'amis/lib/Schema';
+import type {SchemaApi} from 'amis/lib/Schema';
 import {isObject} from 'lodash';

 type TimelineItem = {
--- a/packages/amis-editor/src/renderer/TplFormulaControl.tsx
+++ b/packages/amis-editor/src/renderer/TplFormulaControl.tsx
@ -220,6 +220,7 @@ export class TplFormulaControl extends React.Component<
    // 去除可能包裹的最外层的${}
    value = value.replace(/^\$\{(.*)\}$/, (match: string, p1: string) => p1);
    value = value ? `\${${value}}` : value;
+    value = value.replace(/\r\n|\r|\n/g, ' ');
    this.editorPlugin?.insertContent(value, 'expression', expressionBrace);
    this.setState({
      formulaPickerOpen: false,
@ -237,7 +238,7 @@ export class TplFormulaControl extends React.Component<
  checkOpenFormulaPicker(value: string) {
    const preLength = this.props.value?.length || 0;
    // 删除了文本，无需检测
-    if (value.length < preLength) {
+    if (value.length < preLength || value === this.props.value) {
      return;
    }
    let left = 0;
@ -330,7 +331,8 @@ export class TplFormulaControl extends React.Component<
      getProps: () => ({...this.props, variables}),
      onExpressionClick: this.onExpressionClick,
      onExpressionMouseEnter: this.onExpressionMouseEnter,
-      showPopover: false
+      showPopover: false,
+      showClearIcon: true
    });
  }

--- a/packages/amis-editor/src/renderer/TransferTableControl.tsx
+++ b/packages/amis-editor/src/renderer/TransferTableControl.tsx
@ -5,7 +5,7 @@
 import React from 'react';
 import {render as amisRender, FormItem} from 'amis';
 import {omit} from 'lodash';
-import {SchemaApi} from 'amis/lib/Schema';
+import type {SchemaApi} from 'amis/lib/Schema';
 import {autobind, getSchemaTpl} from 'amis-editor-core';
 import cx from 'classnames';
 import {tipedLabel} from 'amis-editor-core';
--- a/packages/amis-editor/src/renderer/TreeOptionControl.tsx
+++ b/packages/amis-editor/src/renderer/TreeOptionControl.tsx
@ -23,7 +23,7 @@ import {getSchemaTpl, tipedLabel} from 'amis-editor-core';

 import type {Option} from 'amis';
 import type {FormControlProps} from 'amis-core';
-import {SchemaApi, SchemaObject} from 'amis/lib/Schema';
+import type {SchemaApi, SchemaObject} from 'amis/lib/Schema';

 export type OptionControlItem = Option & {checked?: boolean; _key?: string};

--- a/packages/amis-editor/src/renderer/ValidationItem.tsx
+++ b/packages/amis-editor/src/renderer/ValidationItem.tsx
@ -9,7 +9,7 @@ import {render, Button, Switch} from 'amis';
 import {autobind, getI18nEnabled} from 'amis-editor-core';
 import {Validator} from '../validator';
 import {tipedLabel} from 'amis-editor-core';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';

 export type ValidatorData = {
  name: string;
--- a/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx
+++ b/packages/amis-editor/src/renderer/textarea-formula/TextareaFormulaControl.tsx
@ -86,6 +86,20 @@ export interface TextareaFormulaControlProps extends FormControlProps {
   */
  customFormulaPicker?: React.FC<CustomFormulaPickerProps>;

+  /**
+   * 自定义标记文本
+   * @param editor
+   * @returns
+   */
+  customMarkText?: (editor: CodeMirror.Editor) => void;
+
+  /**
+   * 插件初始化生命周期回调
+   * @param plugin 插件实例，内部包含公式插件的方法
+   * @returns
+   */
+  onPluginInit?: (plugin: FormulaPlugin) => void;
+
  /**
   * 弹窗顶部标题，默认为 "表达式"
   */
@ -93,6 +107,8 @@ export interface TextareaFormulaControlProps extends FormControlProps {
 }

 interface TextareaFormulaControlState {
+  value: string; // 当前文本值
+
  variables: Array<VariableItem>; // 变量数据

  formulaPickerOpen: boolean; // 是否打开公式编辑器
@ -129,6 +145,7 @@ export class TextareaFormulaControl extends React.Component<
  constructor(props: TextareaFormulaControlProps) {
    super(props);
    this.state = {
+      value: '',
      variables: [],
      formulaPickerOpen: false,
      formulaPickerValue: '',
@ -268,11 +285,13 @@ export class TextareaFormulaControl extends React.Component<
  }
  @autobind
  handleEditorMounted(cm: any, editor: any) {
-    const variables = this.props.variables || this.state.variables;
+    const variables = this.state.variables || this.props.variables || [];
    this.editorPlugin = new FormulaPlugin(editor, {
      getProps: () => ({...this.props, variables}),
      onExpressionClick: this.onExpressionClick,
-      onExpressionMouseEnter: this.onExpressionMouseEnter
+      onExpressionMouseEnter: this.onExpressionMouseEnter,
+      customMarkText: this.props.customMarkText,
+      onPluginInit: this.props.onPluginInit
    });
  }

--- a/packages/amis-editor/src/renderer/textarea-formula/plugin.tsx
+++ b/packages/amis-editor/src/renderer/textarea-formula/plugin.tsx
@ -31,6 +31,8 @@ interface FormulaPluginConfig {
    expression: string,
    brace?: Array<CodeMirror.Position>
  ) => any;
+  customMarkText?: (editor: CodeMirror.Editor) => void;
+  onPluginInit?: (plugin: FormulaPlugin) => void;
  showPopover?: boolean;
  showClearIcon?: boolean; // 表达式是否展示删除icon
 }
@ -56,6 +58,10 @@ export class FormulaPlugin {

    this.setValue = this.setValue.bind(this);
    this.insertContent = this.insertContent.bind(this);
+    this.autoMark = this.autoMark.bind(this);
+    this.focus = this.focus.bind(this);
+    this.dispose = this.dispose.bind(this);
+    this.config.onPluginInit?.(this);
  }

  autoMark() {
@ -82,6 +88,7 @@ export class FormulaPlugin {
        );
      }
    }
+    this.config.customMarkText?.(editor);
  }

  // 找到表达式所在的位置
--- a/packages/amis-editor/src/tpl/common.tsx
+++ b/packages/amis-editor/src/tpl/common.tsx
@ -7,7 +7,7 @@ import {
  EditorManager
 } from 'amis-editor-core';
 import type {DSField} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import flatten from 'lodash/flatten';
 import _ from 'lodash';
 import {InputComponentName} from '../component/InputComponentName';
--- a/packages/amis-editor/src/tpl/options.tsx
+++ b/packages/amis-editor/src/tpl/options.tsx
@ -5,7 +5,7 @@ import {
  getI18nEnabled
 } from 'amis-editor-core';
 import {tipedLabel} from 'amis-editor-core';
-import {SchemaObject} from 'amis/lib/Schema';
+import type {SchemaObject} from 'amis/lib/Schema';
 import assign from 'lodash/assign';
 import cloneDeep from 'lodash/cloneDeep';
 import omit from 'lodash/omit';
--- a/packages/amis-editor/src/tpl/style.tsx
+++ b/packages/amis-editor/src/tpl/style.tsx
@ -1,5 +1,5 @@
 import {setSchemaTpl, getSchemaTpl, defaultValue} from 'amis-editor-core';
-import {SchemaCollection} from 'amis/lib/Schema';
+import type {SchemaCollection} from 'amis/lib/Schema';
 import kebabCase from 'lodash/kebabCase';

 setSchemaTpl('style:formItem', ({renderer, schema}: any) => {
--- a/packages/amis-editor/src/validator.tsx
+++ b/packages/amis-editor/src/validator.tsx
@ -1,5 +1,3 @@
-import {SchemaObject} from 'amis/lib/schema';
-
 /**
 * @file 所有可用验证器
 */