fix addSubBlock

src/core/functions/data/CreateObject.ts

@@ -47,3 +47,26 @@ Functions.add(CreateObjectFunction, {
   configs: ([{name: '#extend', type: 'object'}] as (string | PropDesc)[]).concat(defaultConfigs),
   category: 'data',
 });
+
+export class CreateObjectFunctionOptional extends BaseFunction {
+  configChanged(config: BlockConfig, val: any): boolean {
+    switch (config._name) {
+      case '#extend':
+      case '#optional':
+        return true;
+      default:
+        return false;
+    }
+  }
+  run() {
+    let baseObj = this._data.getValue('#extend');
+    let output = baseObj ? {...baseObj} : {};
+    for (let field of this._data.getOptionalProps()) {
+      let value = this._data.getValue(field);
+      if (value !== undefined) {
+        output[field] = value;
+      }
+    }
+    this._data.output(output);
+  }
+}

src/editor/popup/PropertyDropdown.tsx

@@ -42,7 +42,7 @@ interface Props {
   paths: string[];
   name: string;
   baseName?: string;
-  onAddSubBlock: () => void;
+  onAddSubBlock: (id: string, desc?: FunctionDesc, data?: any) => void;
 }
 
 const PendingUpdate = <div />;
@@ -219,9 +219,8 @@ export class PropertyDropdown extends React.PureComponent<Props, State> {
 
   onAddSubBlock = (id: string, desc?: FunctionDesc, data?: any) => {
     let {onAddSubBlock} = this.props;
-    PropertyDropdown.addSubBlock(this.props, id, desc, data);
     this.setState({visible: false});
-    onAddSubBlock?.();
+    onAddSubBlock?.(id, desc, data);
   };
 
   getMenu() {

src/editor/property/PropertyEditor.tsx

@@ -273,8 +273,7 @@ export class PropertyEditor extends MultiSelectComponent<PropertyEditorProps, St
       // check drag from type
       let blockData = DragState.getData('blockData', conn.getBaseConn());
       if (blockData && blockData['#is']) {
-        PropertyDropdown.addSubBlock(this.props, blockData['#is'], null, getSubBlockFuncData(blockData));
-        this.onAddSubBlock();
+        this.onAddSubBlock(blockData['#is'], null, getSubBlockFuncData(blockData));
         return;
       }
     }
@@ -342,7 +341,8 @@ export class PropertyEditor extends MultiSelectComponent<PropertyEditorProps, St
     }
   };
 
-  onAddSubBlock = () => {
+  onAddSubBlock = (id: string, desc?: FunctionDesc, data?: any) => {
+    PropertyDropdown.addSubBlock(this.props, id, desc, data);
     this.safeSetState({showSubBlock: true});
   };
 

src/html/functions/CreateStyle.ts

@@ -1,32 +1,9 @@
 import {BaseFunction, defaultConfigs, Functions, PropDesc, PropGroupDesc} from '../../../src/core';
 import StyleDef from './StyleDef';
-import {BlockConfig} from '../../core/block/BlockProperty';
-
-export class CreateStyleFunction extends BaseFunction {
-  configChanged(config: BlockConfig, val: any): boolean {
-    switch (config._name) {
-      case '#optional':
-      case '#extend':
-        return true;
-      default:
-        return false;
-    }
-  }
-  run() {
-    let baseObj = this._data.getValue('#extend');
-    let output = baseObj ? {...baseObj} : {};
-    for (let field of this._data.getOptionalProps()) {
-      let value = this._data.getValue(field);
-      if (value !== undefined) {
-        output[field] = value;
-      }
-    }
-    this._data.output(output);
-  }
-}
+import {CreateObjectFunctionOptional} from '../../core/functions/data/CreateObject';
 
 Functions.add(
-  CreateStyleFunction,
+  CreateObjectFunctionOptional,
   {
     name: 'create-style',
     icon: 'fab:css3',

src/react/BaseElement.tsx

@@ -5,7 +5,7 @@ import {htmlAttributes, htmlEventHandlers, optionalHtmlProperties} from './HtmlA
 import {BlockConfig} from '../../src/core/block/BlockProperty';
 
 export class HtmlElementFunction extends BlockFunction {
-  // _comp never changes, this prevent re-render of any parent component, TicloComp should handle all the changes internally
+  // _comp never changes, this prevents re-render of any parent component, TicloComp should handle all the changes internally
   readonly _comp: React.ReactNode;
 
   readonly _eventHandlers = new Map<string, (e: any) => void>();