Feature/robot rich test

packages/datasheet/package.json

@@ -203,6 +203,7 @@
     "raw-loader": "^4.0.2",
     "react-app-rewire-postcss": "^3.0.2",
     "react-dev-utils": "^11.0.3",
+    "slate-serializers": "^0.4.1",
     "stylelint": "15.10.1",
     "svgo-loader": "3.0.0",
     "typescript": "^4.8.2",

packages/datasheet/src/pc/components/robot/robot_detail/magic_variable_container/helper.ts

@@ -16,18 +16,46 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { htmlToSlate, payloadHtmlToSlateConfig } from 'slate-serializers';
 import {
-  IExpression, IExpressionOperand, IField, InputParser, IOperand,
-  MagicVariableParser, OperandTypeEnums, OperatorEnums,
-  ACTION_INPUT_PARSER_BASE_FUNCTIONS, EmptyNullOperand, IFieldPermissionMap, Strings, t,
+  ACTION_INPUT_PARSER_BASE_FUNCTIONS,
+  EmptyNullOperand,
+  IExpression,
+  IExpressionOperand,
+  IField,
+  IFieldPermissionMap,
+  InputParser,
+  IOperand,
+  MagicVariableParser,
+  OperandTypeEnums,
+  OperatorEnums,
+  Strings,
+  t,
 } from '@apitable/core';
 import produce from 'immer';
 import { isSafari } from 'react-device-detect';
-import { Transforms, Selection, BaseEditor } from 'slate';
+import { BaseEditor, Node, Selection, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { fields2Schema } from '../../helper';
 import { IJsonSchema, INodeOutputSchema, IUISchemaLayoutGroup } from '../../interface';
 
+const CONST_MAGIC_VARIABLE_NODE_ATTRI= 'data-magic-variable-entity';
+const parseConfig = {
+  ...payloadHtmlToSlateConfig,
+  elementTags: {
+    ...payloadHtmlToSlateConfig.elementTags,
+    // @ts-ignore
+    div: (args) => {
+      const data = args.attribs[CONST_MAGIC_VARIABLE_NODE_ATTRI];
+
+      if(!data) {
+        return null;
+      }
+      return JSON.parse(atob(data));
+    },
+  },
+};
+
 const parser = new MagicVariableParser<any>(ACTION_INPUT_PARSER_BASE_FUNCTIONS);
 const inputParser = new InputParser(parser);
 
@@ -487,8 +515,26 @@ export const transformSlateValue = (paragraphs: any): {
   };
 };
 
-export const withMagicVariable = (editor: any) => {
-  const { isInline, isVoid, onChange } = editor;
+const modifyTriggerId = (triggerId: string, list: Node[]) => {
+  return produce(list, draft => {
+    list.forEach(nodeItem => {
+      // @ts-ignore
+      if(nodeItem.type ==='magicVariable'){
+        // @ts-ignore
+        const firstOperand = nodeItem.data.operands[0];
+        // @ts-ignore
+        const firstOperandType = nodeItem.data.operands[0]?.type;
+        if(firstOperandType === 'Expression') {
+          const firstInnerOperand = firstOperand['value']?.operands[0];
+          firstInnerOperand.value = triggerId;
+        }
+      }
+    });
+  });
+};
+
+export const withMagicVariable = (editor: any, triggerId: string) => {
+  const { insertData, isInline, isVoid, onChange } = editor;
 
   editor.isInline = (element: { type: string; }) => {
     return element.type === 'magicVariable' ? true : isInline(element);
@@ -508,10 +554,18 @@ export const withMagicVariable = (editor: any) => {
     onChange(...params);
   };
 
-  // editor.normalizeNode = (node, editor) => {
-
-  // }
+  // @ts-ignore
+  editor.insertData = data => {
+    const html = data.getData('text/html');
 
+    if (html) {
+      const serializedToSlate = htmlToSlate(html, parseConfig);
+      const modifiedNodes = modifyTriggerId(triggerId, serializedToSlate);
+      Transforms.insertFragment(editor, modifiedNodes);
+      return;
+    }
+    insertData(data);
+  };
   return editor;
 };
 

packages/datasheet/src/pc/components/robot/robot_detail/magic_variable_container/magic_text_field.tsx

@@ -49,23 +49,19 @@
   triggerType: ITriggerType | null;
 };
 
-// The magic variable editor maintains state internally, and when out of focus, synchronization is given only to the parent form.
 export const MagicTextField = (props: IMagicTextFieldProps) => {
-  const { onChange, schema } = props;
-  // console.log(props.rawErrors);
-  // const fieldType = getSchemaType(props.schema);
-  // console.log('MagicTextField.fieldType', fieldType);
-  // console.log('MagicTextField.props.value', props.value);
+  const { onChange, schema, nodeOutputSchemaList: originalNodeOutputSchemaList } = props;
   const isJSONField = (schema as any)?.format === 'json';
   const [isOpen, setOpen] = useState(false);
   const ref = useRef(null);
   const inputRef = useRef<any>();
   const triggerRef = useRef<any>(null);
   const popupRef = useRef<any>(null);
-  const editor = useMemo(() => withHistory(withMagicVariable(withReact(createEditor() as ReactEditor))), []);
-  // console.log('3.Form input init value', props.value);
+  const triggerId = originalNodeOutputSchemaList?.[0]?.id;
+
+  const editor = useMemo(() => withHistory(withMagicVariable(withReact(createEditor() as ReactEditor), triggerId)), []);
+
   const slateValue = formData2SlateValue(props.value);
-  // console.log('4.Form input slate value', slateValue);
   const [value, setValue] = useState(slateValue);
 
   useClickAway(() => {
@@ -120,7 +116,7 @@
     }
     return nodeOutputSchema;
   });
-
+  
   const renderElement = (props: any) => {
     switch (props.element.type) {
       case 'magicVariable':

packages/datasheet/src/pc/components/robot/robot_detail/magic_variable_container/magic_variable_element.tsx

@@ -25,10 +25,12 @@ import { Strings, t } from '@apitable/core';
 
 export const MagicVariableElement = (props: { nodeOutputSchemaList?: INodeOutputSchema[]; element?: any; children?: any; }) => {
   const { element, children } = props;
+  const stringfyElement = btoa(JSON.stringify(element));
+
   const theme = useTheme();
   const nodeOutputSchemaList = props.nodeOutputSchemaList as INodeOutputSchema[];
+
   const chainList = getExpressionChainList(element.data).reverse();
-  // console.log('MagicVariableElement');
 
   const nodeSchemaIndex = nodeOutputSchemaList.findIndex(item => item.id === chainList[0].value);
   const nodeSchema = nodeOutputSchemaList[nodeSchemaIndex];
@@ -96,6 +98,7 @@ export const MagicVariableElement = (props: { nodeOutputSchemaList?: INodeOutput
       display="inline-flex"
       margin="0 2px"
       verticalAlign='middle'
+      data-magic-variable-entity={stringfyElement }
       flexWrap="wrap"
     // border='1px solid transparent'
     >

packages/datasheet/src/pc/components/robot/robot_detail/select.tsx

@@ -16,8 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// eslint-disable-next-line no-restricted-imports
-import { Select as SelectBase } from '@apitable/components';
+import { DropdownSelect as SelectBase } from '@apitable/components';
 import { useControllableValue } from 'ahooks';
 
 /**