@next-core/editor-bricks-helper 0.49.30 → 0.49.32

package/dist/index.bundle.js

@@ -16,31 +16,24 @@
   var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
   exports.BuilderDataTransferType = void 0;
-
   (function (BuilderDataTransferType) {
     BuilderDataTransferType["NODE_TO_ADD"] = "builder/node-to-add";
     BuilderDataTransferType["NODE_TO_MOVE"] = "builder/node-to-move";
     BuilderDataTransferType["SNIPPET_TO_APPLY"] = "builder/snippet-to-apply";
   })(exports.BuilderDataTransferType || (exports.BuilderDataTransferType = {}));
-
   exports.EditorBrickType = void 0;
-
   (function (EditorBrickType) {
     EditorBrickType["DEFAULT"] = "editorOfDefault";
     EditorBrickType["CONTAINER"] = "editorOfContainer";
     EditorBrickType["TRANSPARENT_CONTAINER"] = "editorOfTransparentContainer";
   })(exports.EditorBrickType || (exports.EditorBrickType = {}));
-
   exports.EditorSelfLayout = void 0;
-
   (function (EditorSelfLayout) {
     EditorSelfLayout["BLOCK"] = "block";
     EditorSelfLayout["INLINE"] = "inline";
     EditorSelfLayout["CONTAINER"] = "container";
   })(exports.EditorSelfLayout || (exports.EditorSelfLayout = {}));
-
   exports.EditorSlotContentLayout = void 0;
-
   (function (EditorSlotContentLayout) {
     EditorSlotContentLayout["BLOCK"] = "block";
     EditorSlotContentLayout["INLINE"] = "inline";
@@ -54,27 +47,23 @@
     Licensed under the MIT License (MIT), see
     http://jedwatson.github.io/classnames
   */
-
   (function (module) {
     /* global define */
+
     (function () {
 
       var hasOwn = {}.hasOwnProperty;
-
       function classNames() {
         var classes = [];
-
         for (var i = 0; i < arguments.length; i++) {
           var arg = arguments[i];
           if (!arg) continue;
           var argType = typeof arg;
-
           if (argType === 'string' || argType === 'number') {
             classes.push(arg);
           } else if (Array.isArray(arg)) {
             if (arg.length) {
               var inner = classNames.apply(null, arg);
-
               if (inner) {
                 classes.push(inner);
               }
@@ -91,10 +80,8 @@
             }
           }
         }
-
         return classes.join(' ');
       }
-
       if (module.exports) {
         classNames.default = classNames;
         module.exports = classNames;
@@ -103,12 +90,10 @@
       }
     })();
   })(classnames);
-
   var classNames = classnames.exports;
 
   /*! (c) Andrea Giammarchi - ISC */
   var self = {};
-
   try {
     self.EventTarget = new EventTarget().constructor;
   } catch (EventTarget) {
@@ -120,7 +105,6 @@
         for (var secret = wm.get(this), listeners = secret[type] || (secret[type] = []), i = 0, length = listeners.length; i < length; i++) {
           if (listeners[i].listener === listener) return;
         }
-
         listeners.push({
           target: this,
           listener: listener,
@@ -130,7 +114,6 @@
       define(proto, 'dispatchEvent', function (event) {
         var secret = wm.get(this);
         var listeners = secret[event.type];
-
         if (listeners) {
           define(event, 'target', this);
           define(event, 'currentTarget', this);
@@ -138,13 +121,11 @@
           delete event.currentTarget;
           delete event.target;
         }
-
         return true;
       });
       define(proto, 'removeEventListener', function (type, listener) {
-        for (var secret = wm.get(this),
-        /* istanbul ignore next */
-        listeners = secret[type] || (secret[type] = []), i = 0, length = listeners.length; i < length; i++) {
+        for (var secret = wm.get(this), /* istanbul ignore next */
+          listeners = secret[type] || (secret[type] = []), i = 0, length = listeners.length; i < length; i++) {
           if (listeners[i].listener === listener) {
             listeners.splice(i, 1);
             return;
@@ -152,12 +133,10 @@
         }
       });
       self.EventTarget = EventTarget;
-
       function EventTarget() {
 
         wm.set(this, create(null));
       }
-
       function define(target, name, value) {
         defineProperty(target, name, {
           configurable: true,
@@ -165,7 +144,6 @@
           value: value
         });
       }
-
       function dispatch(info) {
         var options = info.options;
         if (options && options.once) info.target.removeEventListener(this.type, info.listener);
@@ -174,7 +152,6 @@
       }
     })(Object, new WeakMap());
   }
-
   var EventTarget$1 = self.EventTarget;
 
   var uniqueIdCursor = 0;
@@ -191,32 +168,25 @@
     } = _ref;
     var newEdges = edges.slice();
     var reorderedEdgesMap = new WeakMap();
-
     var walk = (uid, callback) => {
       var node = nodes.find(item => item.$$uid === uid);
       var childEdges = lodash.sortBy(edges.filter(edge => edge.parent === node.$$uid), edge => edge.sort);
       callback(node, childEdges);
-
       for (var edge of childEdges) {
         walk(edge.child, callback);
       }
     };
-
     var expandEdgesThroughTemplateChain = (node, mountPoint, childUid) => {
       var _node$$$templateProxy;
-
       var proxySlotConf;
       var delegateToParentUid;
-
       if (node.$$isExpandableTemplate && (_node$$$templateProxy = node.$$templateProxy) !== null && _node$$$templateProxy !== void 0 && _node$$$templateProxy.slots && brickUtils.hasOwnProperty(node.$$templateProxy.slots, mountPoint) && (proxySlotConf = node.$$templateProxy.slots[mountPoint]) && (delegateToParentUid = node.$$templateRefToUid.get(proxySlotConf.ref))) {
         var nextNode = nodes.find(n => n.$$uid === delegateToParentUid);
         var nextMountPoint = proxySlotConf.refSlot;
-
         if (nextNode.$$isExpandableTemplate) {
           expandEdgesThroughTemplateChain(nextNode, nextMountPoint, childUid);
         } else {
           var _proxySlotConf$refPos;
-
           var expandedEdge = {
             child: childUid,
             parent: delegateToParentUid,
@@ -226,12 +196,11 @@
           };
           var siblingEdges = lodash.sortBy(newEdges.filter(edge => edge.parent === delegateToParentUid), edge => {
             var _reorderedEdgesMap$ge;
-
             return (_reorderedEdgesMap$ge = reorderedEdgesMap.get(edge)) !== null && _reorderedEdgesMap$ge !== void 0 ? _reorderedEdgesMap$ge : edge.sort;
           });
-          var internalEdges = siblingEdges.filter(edge => edge.$$isTemplateInternal); // For more details about refPosition implementation detail,
+          var internalEdges = siblingEdges.filter(edge => edge.$$isTemplateInternal);
+          // For more details about refPosition implementation detail,
           // see `packages/brick-kit/src/core/CustomTemplates/expandCustomTemplate.ts`.
-
           var refPosition = (_proxySlotConf$refPos = proxySlotConf.refPosition) !== null && _proxySlotConf$refPos !== void 0 ? _proxySlotConf$refPos : -1;
           var clampedRefPosition = lodash.clamp(refPosition < 0 ? internalEdges.length + 1 + refPosition : refPosition, 0, internalEdges.length);
           siblingEdges.splice(clampedRefPosition < internalEdges.length ? siblingEdges.findIndex(edge => edge === internalEdges[clampedRefPosition]) : siblingEdges.length, 0, expandedEdge);
@@ -242,18 +211,15 @@
         }
       }
     };
-
     walk(rootId, (node, childEdges) => {
       if (!node.$$isExpandableTemplate) {
         return;
       }
-
       for (var childEdge of childEdges) {
         // Recursively expand templates.
         expandEdgesThroughTemplateChain(node, childEdge.mountPoint, childEdge.child);
       }
     });
-
     if (newEdges.length > edges.length) {
       return newEdges.map(edge => {
         var sort = reorderedEdgesMap.get(edge);
@@ -262,7 +228,6 @@
         });
       });
     }
-
     return edges;
   }
 
@@ -308,17 +273,14 @@
       wrapperNode: (wrapperNode === null || wrapperNode === void 0 ? void 0 : wrapperNode.$$uid) === nodeUid ? null : wrapperNode
     };
   }
-
   function collectIdsToDelete(nodeUid, edges, idsToDelete) {
     idsToDelete.add(nodeUid);
     var ids = new Set();
-
     for (var edge of edges) {
       if (edge.parent === nodeUid) {
         ids.add(edge.child);
       }
     }
-
     for (var id of ids) {
       collectIdsToDelete(id, edges, idsToDelete);
     }
@@ -328,37 +290,30 @@
     var nodesMap = new Map();
     var targetMap = new Map();
     var targetRefMap = new Map();
-
     for (var n of nodes) {
       nodesMap.set(n.$$uid, {
         upstreamNodes: new Set(),
         downstreamNodes: new Set()
       });
-
       for (var selector of n.$$matchedSelectors) {
         if (!targetMap.get(selector)) {
           targetMap.set(selector, n.$$uid);
         }
       }
-
       if (rootNodeIsCustomTemplate) {
         if (n.ref) {
           targetRefMap.set(n.ref, n.$$uid);
         }
       }
     }
-
     for (var node of nodes) {
       var handlers = [];
-
       if (!lodash.isEmpty(node.$$parsedEvents)) {
         handlers = Object.values(node.$$parsedEvents).flat();
       }
-
       if (!lodash.isEmpty(node.$$parsedLifeCycle)) {
         handlers = handlers.concat(Object.entries(node.$$parsedLifeCycle).flatMap(_ref => {
           var [lifeCycleName, lifeCycleConf] = _ref;
-
           switch (lifeCycleName) {
             case "onBeforePageLoad":
             case "onPageLoad":
@@ -368,10 +323,8 @@
             case "onAnchorUnload":
             case "onMessageClose":
               return lifeCycleConf;
-
             case "onMessage":
               return [].concat(lifeCycleConf).flatMap(messageConf => [].concat(messageConf.handlers));
-
             default:
               // eslint-disable-next-line no-console
               console.warn("unknown lifeCycle: ".concat(lifeCycleName));
@@ -379,21 +332,17 @@
           }
         }));
       }
-
       if (handlers.length > 0) {
         collectRelatedNodes(node, handlers, nodesMap, targetMap, targetRefMap);
       }
     }
-
     return nodesMap;
   }
-
   function collectRelatedNodes(node, handlers, nodesMap, targetMap, targetRefMap) {
     for (var handler of handlers) {
       if (handler) {
         if (handler.target) {
           var targetNodeUid = targetMap.get(handler.target);
-
           if (targetNodeUid) {
             nodesMap.get(node.$$uid).downstreamNodes.add(targetNodeUid);
             nodesMap.get(targetNodeUid).upstreamNodes.add(node.$$uid);
@@ -401,14 +350,12 @@
         } else if (handler.targetRef) {
           for (var ref of [].concat(handler.targetRef)) {
             var targetRefNodeUid = targetRefMap.get(ref);
-
             if (targetRefNodeUid) {
               nodesMap.get(node.$$uid).downstreamNodes.add(targetRefNodeUid);
               nodesMap.get(targetRefNodeUid).upstreamNodes.add(node.$$uid);
             }
           }
         }
-
         if (handler.callback) {
           for (var callbackHandlers of Object.values(handler.callback)) {
             collectRelatedNodes(node, [].concat(callbackHandlers), nodesMap, targetMap, targetRefMap);
@@ -418,33 +365,28 @@
     }
   }
 
-  var nodeIgnoreFields = ["parent", "children", "graphInfo", "mountPoint"]; // Match evaluations and placeholders,
-  // E.g.: `<% QUERY.x %>` or `${QUERY.x}`.
+  var nodeIgnoreFields = ["parent", "children", "graphInfo", "mountPoint"];
 
+  // Match evaluations and placeholders,
+  // E.g.: `<% QUERY.x %>` or `${QUERY.x}`.
   var computationRegExp = /[<{]/;
   function getBuilderNode(nodeData, nodeUid, isTemplateInternalNode) {
     var matchedSelectors = [];
-
     if (nodeData.brick) {
       matchedSelectors.push(nodeData.brick.replace(/\./g, "\\."));
     }
-
     var normalized = brickUtils.normalizeBuilderNode(nodeData);
     var jsonFieldsInBrick = ["properties", "events", "lifeCycle"];
     var parsedFields = [];
     var parsedId;
     var parsedTestId;
-
     for (var field of jsonFieldsInBrick) {
       var parsed = lodash.cloneDeep(normalized === null || normalized === void 0 ? void 0 : normalized[field]);
       parsedFields.push(["$$parsed".concat(lodash.upperFirst(field)), parsed !== null && parsed !== void 0 ? parsed : {}]);
-
       if (field === "properties") {
         var _parsed$dataset;
-
         var tempParsedId = void 0;
         var tempParsedTestId = void 0;
-
         if ((tempParsedTestId = parsed === null || parsed === void 0 ? void 0 : (_parsed$dataset = parsed.dataset) === null || _parsed$dataset === void 0 ? void 0 : _parsed$dataset.testid, typeof tempParsedTestId === "string") && !computationRegExp.test(tempParsedTestId)) {
           parsedTestId = tempParsedTestId;
         } else if ((tempParsedId = parsed === null || parsed === void 0 ? void 0 : parsed.id, typeof tempParsedId === "string") && !computationRegExp.test(tempParsedId)) {
@@ -453,23 +395,20 @@
         }
       }
     }
-
     var isBrick = brickUtils.isBrickNode(nodeData);
     var brickName = isBrick ? nodeData.brick.split(".").pop() : null;
     var unreachable = false;
-
     if ((normalized === null || normalized === void 0 ? void 0 : normalized.if) !== undefined && (isBrick || brickUtils.isRouteNode(nodeData))) {
       var check = {
         if: normalized.if
       };
       brickUtils.computeConstantCondition(check);
-
       if (check.if === false) {
         unreachable = true;
       }
     }
-
-    return Object.fromEntries(Object.entries(nodeData).filter(entry => !nodeIgnoreFields.includes(entry[0])).concat([["displayName", // Ignore alias which equals to brick name.
+    return Object.fromEntries(Object.entries(nodeData).filter(entry => !nodeIgnoreFields.includes(entry[0])).concat([["displayName",
+    // Ignore alias which equals to brick name.
     !(isBrick && nodeData.alias === brickName) && nodeData.alias || (isBrick ? nodeData.ref || parsedTestId || parsedId || brickName : undefined)], ["$$uid", nodeUid], ["$$matchedSelectors", matchedSelectors], ["$$isTemplateInternalNode", isTemplateInternalNode], ["$$normalized", normalized], ["$$unreachable", unreachable]]).concat(parsedFields));
   }
 
@@ -478,25 +417,19 @@
     var nodes = [];
     var edges = [];
     var wrapperNode;
-
     var walk = (nodeData, currentUid, processedTemplateSet, isTemplateInternalNode, inheritedTemplateRefToUid, layoutType) => {
       var _templateSource$child;
-
       var builderNode = getBuilderNode(nodeData, currentUid, isTemplateInternalNode);
       nodes.push(builderNode);
-
       if (inheritedTemplateRefToUid && builderNode.ref) {
         inheritedTemplateRefToUid.set(builderNode.ref, currentUid);
       }
-
       var templateSource;
-
       if (brickUtils.isBrickNode(builderNode) && !builderNode.brick.includes(".") && builderNode.brick.startsWith("tpl-") && !processedTemplateSet.has(builderNode.brick) && (templateSource = templateSourceMap === null || templateSourceMap === void 0 ? void 0 : templateSourceMap.get(builderNode.brick)) && ((_templateSource$child = templateSource.children) === null || _templateSource$child === void 0 ? void 0 : _templateSource$child.length) > 0) {
         if (templateSource.layoutType === "wrapper") {
           builderNode.layoutType = "wrapper";
-        } // Avoid nesting the same templates.
-
-
+        }
+        // Avoid nesting the same templates.
         processedTemplateSet.add(builderNode.brick);
         builderNode.$$isExpandableTemplate = true;
         builderNode.$$templateProxy = templateSource.proxy && JSON.parse(templateSource.proxy);
@@ -504,12 +437,12 @@
         builderNode.$$templateRefToUid = templateRefToUid;
         var sortedChildren = lodash.sortBy(templateSource.children, [item => {
           var _item$sort;
-
           return (_item$sort = item.sort) !== null && _item$sort !== void 0 ? _item$sort : -Infinity;
         }]);
         sortedChildren.forEach((child, index) => {
           var childUid = getUniqueNodeId();
-          walk(child, childUid, // Each child should be a branch.
+          walk(child, childUid,
+          // Each child should be a branch.
           new Set(processedTemplateSet), true, templateRefToUid);
           edges.push({
             child: childUid,
@@ -519,37 +452,28 @@
             $$isTemplateInternal: true
           });
         });
-
         if (!builderNode.$$isTemplateInternalNode) {
           // Here all internal nodes of the template including nested templates are ready.
           var processDelegatingSlots = (cursorNode, mountPoint, rootMountPoint) => {
             var _cursorNode$$$templat;
-
             if ((_cursorNode$$$templat = cursorNode.$$templateProxy) !== null && _cursorNode$$$templat !== void 0 && _cursorNode$$$templat.slots) {
               var _cursorNode$$$templat2;
-
               var slotEntries = Object.entries((_cursorNode$$$templat2 = cursorNode.$$templateProxy) === null || _cursorNode$$$templat2 === void 0 ? void 0 : _cursorNode$$$templat2.slots).filter(entry => mountPoint === undefined || entry[0] === mountPoint);
-
               var _loop = function (slotName, slotConf) {
                 var refUid = cursorNode.$$templateRefToUid.get(slotConf.ref);
-
                 if (refUid) {
                   var refNode = nodes.find(node => node.$$uid === refUid);
-
                   if (refNode.$$isExpandableTemplate) {
                     processDelegatingSlots(refNode, slotConf.refSlot, slotName);
                   } else {
                     if (!refNode.$$delegatedSlots) {
                       refNode.$$delegatedSlots = new Map();
                     }
-
                     var delegatedSlotsByRefSlot = refNode.$$delegatedSlots.get(slotConf.refSlot);
-
                     if (!delegatedSlotsByRefSlot) {
                       delegatedSlotsByRefSlot = [];
                       refNode.$$delegatedSlots.set(slotConf.refSlot, delegatedSlotsByRefSlot);
                     }
-
                     delegatedSlotsByRefSlot.push({
                       templateUid: builderNode.$$uid,
                       templateMountPoint: rootMountPoint || slotName
@@ -557,33 +481,25 @@
                   }
                 }
               };
-
               for (var [slotName, slotConf] of slotEntries) {
                 _loop(slotName, slotConf);
               }
             }
           };
-
           processDelegatingSlots(builderNode);
-
           var processDelegatingProperties = (cursorNode, previousPropertyName) => {
             var _cursorNode$$$templat3;
-
             if ((_cursorNode$$$templat3 = cursorNode.$$templateProxy) !== null && _cursorNode$$$templat3 !== void 0 && _cursorNode$$$templat3.properties) {
               var _cursorNode$$$templat4;
-
               var propertyEntries = Object.entries((_cursorNode$$$templat4 = cursorNode.$$templateProxy) === null || _cursorNode$$$templat4 === void 0 ? void 0 : _cursorNode$$$templat4.properties).filter(entry => previousPropertyName === undefined || entry[0] === previousPropertyName);
-
               for (var [propertyName, propertyConf] of propertyEntries) {
                 if (brickUtils.hasOwnProperty(cursorNode.$$parsedProperties, propertyName) && isBasicRefProperty(propertyConf)) {
                   (function () {
                     var refUid = cursorNode.$$templateRefToUid.get(propertyConf.ref);
                     var propertyValue = cursorNode.$$parsedProperties[propertyName];
-
                     if (refUid) {
                       var refNode = nodes.find(node => node.$$uid === refUid);
                       refNode.$$parsedProperties[propertyConf.refProperty] = propertyValue;
-
                       if (refNode.$$isExpandableTemplate) {
                         processDelegatingProperties(refNode, propertyConf.refProperty);
                       }
@@ -593,40 +509,33 @@
               }
             }
           };
-
           processDelegatingProperties(builderNode);
         }
       }
-
       if (Array.isArray(nodeData.children)) {
         // For routes and custom-templates, their children are fixed
         // and mount points should be ignored. To unify tree edge
         // data structure, just override their mount points.
         var overrideChildrenMountPoint;
-
         switch (builderNode.type) {
           case "bricks":
           case "custom-template":
           case "snippet":
             overrideChildrenMountPoint = "bricks";
             break;
-
           case "routes":
             overrideChildrenMountPoint = "routes";
             break;
         }
-
         var _sortedChildren = lodash.sortBy(nodeData.children, [item => {
           var _item$sort2;
-
           return (_item$sort2 = item.sort) !== null && _item$sort2 !== void 0 ? _item$sort2 : -Infinity;
         }]);
-
         _sortedChildren.forEach((child, index) => {
           var _overrideChildrenMoun;
-
           var childUid = getUniqueNodeId();
-          walk(child, childUid, // Each child should be a branch.
+          walk(child, childUid,
+          // Each child should be a branch.
           new Set(processedTemplateSet), isTemplateInternalNode, inheritedTemplateRefToUid);
           edges.push({
             child: childUid,
@@ -639,28 +548,21 @@
         });
       }
     };
-
     walk(nodeData, nodeUid, new Set());
-
     var _loop2 = function (i) {
       // 布局模板属于第一层
       var item = nodes[i];
-
       if (item.layoutType === "wrapper" && isRoot && edges.find(edge => edge.child === item.$$uid).parent === nodeUid) {
         if (!wrapperNode) {
           wrapperNode = item;
         }
-
         return "break";
       }
     };
-
     for (var i = 0; i < nodes.length; i++) {
       var _ret = _loop2(i);
-
       if (_ret === "break") break;
     }
-
     return {
       nodes,
       edges,
@@ -740,7 +642,6 @@
   };
 
   var BuilderInternalEventType;
-
   (function (BuilderInternalEventType) {
     BuilderInternalEventType["NODE_ADD"] = "builder.node.add";
     BuilderInternalEventType["NODE_MOVE"] = "builder.node.move";
@@ -760,120 +661,87 @@
     BuilderInternalEventType["DROPPING_STATUS_CHANGE"] = "builder.droppingStatus.change";
     BuilderInternalEventType["WORKBENCH_TREE_NODE_MOVE"] = "workbench.tree.node.move";
   })(BuilderInternalEventType || (BuilderInternalEventType = {}));
-
   var storageKeyOfOutlineDisabledNodes = "builder-outline-disabled-nodes";
   class BuilderDataManager {
     constructor() {
       var _this$localJsonStorag;
-
       _defineProperty__default["default"](this, "data", {
         rootId: null,
         nodes: [],
         edges: [],
         wrapperNode: null
       });
-
       _defineProperty__default["default"](this, "hoverNodeUid", void 0);
-
       _defineProperty__default["default"](this, "activeNodeUid", void 0);
-
       _defineProperty__default["default"](this, "sharedEditorList", void 0);
-
       _defineProperty__default["default"](this, "routeList", void 0);
-
       _defineProperty__default["default"](this, "storyList", void 0);
-
       _defineProperty__default["default"](this, "eventTarget", new EventTarget$1());
-
       _defineProperty__default["default"](this, "contextMenuStatus", {
         active: false
       });
-
       _defineProperty__default["default"](this, "showRelatedNodesBasedOnEvents", void 0);
-
       _defineProperty__default["default"](this, "relatedNodesBasedOnEventsMap", void 0);
-
       _defineProperty__default["default"](this, "highlightNodes", new Set());
-
       _defineProperty__default["default"](this, "templateSourceMap", void 0);
-
       _defineProperty__default["default"](this, "droppingStatus", new Map());
-
       _defineProperty__default["default"](this, "localJsonStorage", new brickUtils.JsonStorage(localStorage));
-
       _defineProperty__default["default"](this, "outlineDisabledNodes", new Set((_this$localJsonStorag = this.localJsonStorage.getItem(storageKeyOfOutlineDisabledNodes)) !== null && _this$localJsonStorag !== void 0 ? _this$localJsonStorag : []));
     }
-
     getData() {
       return this.data;
     }
-
     getContextMenuStatus() {
       return this.contextMenuStatus;
     }
-
     getRelatedNodesBasedOnEventsMap() {
       return this.relatedNodesBasedOnEventsMap;
     }
-
     sharedEditorListInit(data) {
       this.sharedEditorList = data;
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.SHARED_EDITOR_LIST_CHANGE));
     }
-
     getSharedEditorList() {
       var _this$sharedEditorLis;
-
       return (_this$sharedEditorLis = this.sharedEditorList) !== null && _this$sharedEditorLis !== void 0 ? _this$sharedEditorLis : [];
     }
-
     onSharedEditorListChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.SHARED_EDITOR_LIST_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.SHARED_EDITOR_LIST_CHANGE, fn);
       };
     }
-
     routeListInit(data) {
       this.routeList = data;
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.ROUTE_LIST_CHANGE));
     }
-
     getRouteList() {
       var _this$routeList;
-
       return (_this$routeList = this.routeList) !== null && _this$routeList !== void 0 ? _this$routeList : [];
     }
-
     storyListInit(data) {
       this.storyList = data;
     }
-
     getStoryList() {
       return this.storyList;
     }
-
     onRouteListChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.ROUTE_LIST_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.ROUTE_LIST_CHANGE, fn);
       };
     }
-
     dataInit(root, templateSourceMap) {
       this.templateSourceMap = templateSourceMap;
       var rootId = getUniqueNodeId();
-
       var newData = _objectSpread__default["default"]({
         rootId
       }, getAppendingNodesAndEdges(root, rootId, templateSourceMap, this.storyList, true));
-
       this.data = _objectSpread__default["default"](_objectSpread__default["default"]({}, newData), {}, {
         edges: expandTemplateEdges(newData)
       });
       this.triggerDataChange();
     }
-
     triggerDataChange() {
       var {
         rootId,
@@ -886,7 +754,6 @@
         detail: this.data
       }));
     }
-
     runAddNodeAction(detail) {
       var {
         rootId,
@@ -927,12 +794,10 @@
       });
       this.triggerDataChange();
     }
-
     updateBrick(detail) {
       this.data = deleteNodeFromTree(detail.nodeUid, this.data);
       this.runAddNodeAction(detail);
     }
-
     updateNode(instanceId, detail) {
       var {
         rootId,
@@ -945,23 +810,19 @@
         if (item.instanceId === instanceId) {
           var unreachable = false;
           var normalized = detail.$$normalized;
-
           if ((normalized === null || normalized === void 0 ? void 0 : normalized.if) !== undefined && (brickUtils.isBrickNode(item) || brickUtils.isRouteNode(item))) {
             var check = {
               if: normalized.if
             };
             brickUtils.computeConstantCondition(check);
-
             if (check.if === false) {
               unreachable = true;
             }
           }
-
           return _objectSpread__default["default"](_objectSpread__default["default"](_objectSpread__default["default"]({}, item), detail), {}, {
             $$unreachable: unreachable
           });
         }
-
         return item;
       });
       var newEdges = detail.mountPoint === undefined || detail.mountPoint === null ? edges : edges.map(item => {
@@ -970,7 +831,6 @@
             mountPoint: detail.mountPoint
           });
         }
-
         return item;
       });
       this.data = {
@@ -983,30 +843,24 @@
         detail: this.data
       }));
     }
-
     redirectMountPoint(detail) {
       var {
         rootId,
         wrapperNode
       } = this.data;
-
       if (detail.parentUid === rootId) {
         detail.nodeData.mountPoint = "bricks";
       }
-
       if (wrapperNode && wrapperNode.instanceId === detail.nodeData.parent) {
         detail.nodeData.mountPoint = "content";
       }
     }
-
     redirectSnippetMountPoint(detail) {
       var _detail$nodeDetails;
-
       (_detail$nodeDetails = detail.nodeDetails) === null || _detail$nodeDetails === void 0 ? void 0 : _detail$nodeDetails.forEach(item => {
         this.redirectMountPoint(item);
       });
     }
-
     nodeAdd(detail) {
       this.redirectMountPoint(detail);
       this.runAddNodeAction(detail);
@@ -1014,7 +868,6 @@
         detail
       }));
     }
-
     nodeAddStored(detail) {
       var {
         rootId,
@@ -1037,7 +890,6 @@
       };
       this.triggerDataChange();
     }
-
     snippetApply(detail) {
       this.redirectSnippetMountPoint(detail);
       var {
@@ -1053,7 +905,6 @@
       } = detail;
       var newNodes = nodes.slice();
       var newEdges = edges.slice();
-
       var walk = _ref => {
         var {
           parentUid,
@@ -1073,16 +924,13 @@
           sort: nodeData.sort,
           $$isTemplateDelegated: isParentExpandableTemplate(newNodes, parentUid)
         }, ...appendingEdges);
-
         for (var item of children) {
           walk(item);
         }
       };
-
       for (var item of nodeDetails) {
         walk(item);
       }
-
       var newData = {
         rootId,
         nodes: newNodes,
@@ -1100,7 +948,6 @@
         detail
       }));
     }
-
     snippetApplyStored(detail) {
       var {
         rootId,
@@ -1125,12 +972,11 @@
       };
       this.triggerDataChange();
     }
+
     /**
      * Move node anywhere by drag-n-drop.
      * @deprecated use `moveNode` instead.
      */
-
-
     nodeMove(detail) {
       var {
         rootId,
@@ -1168,11 +1014,10 @@
         detail
       }));
     }
+
     /**
      * Move node up or down.
      */
-
-
     moveNode(_ref2, direction) {
       var {
         $$uid: nodeUid
@@ -1186,22 +1031,18 @@
         mountPoints
       } = getRelatedEdgesAndMountPoint(this.data.edges, parentUid);
       /** Edges of the same mount-point */
-
       var siblingEdges = relatedEdges.filter(edge => edge.mountPoint === mountPoint);
       var index = siblingEdges.findIndex(edge => edge.child === nodeUid);
       var orderedSiblingEdges = moveItemInList(siblingEdges, index, direction);
-
       if (!orderedSiblingEdges) {
         return;
       }
-
       var orderedEdges = lodash.sortBy(relatedEdges, edge => mountPoints.indexOf(edge.mountPoint), edge => orderedSiblingEdges.indexOf(edge));
       this.reorder(parentUid, orderedEdges);
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.NODE_UPDATE, {
         detail: this.data
       }));
     }
-
     getDragInfo(_ref3) {
       var {
         nodeData,
@@ -1218,7 +1059,6 @@
       /*
        * 如果找不到edge, 则为新增状态, 否则为移动状态
        */
-
       var dragEdge = edges.find(item => item.child === dragNodeUid);
       var dragOverEdge = edges.find(item => item.child === dragOverNodeUid);
       /**
@@ -1226,7 +1066,6 @@
        * 如果是属于拖动进某个节点中, 默认使用 content
        * 其他情况, 使用被拖拽节点的mountPoint
        */
-
       var mountPoint = isDragRoot ? "bricks" : dragStatus === "inside" ? "content" : dragOverEdge.mountPoint;
       var parentEdge = edges.find(item => item.child === dragOverNodeUid);
       /**
@@ -1234,10 +1073,9 @@
        * 如果是拖动进某个节点, 则当前节点为该节点parent
        * 否则, 等于该节点的父节点
        */
-
       var parentUid = isDragRoot ? rootId : dragStatus === "inside" ? parentEdge.child : parentEdge.parent;
-      var parnetNodeData = nodes.find(item => item.$$uid === parentUid); // 找到节点父亲等于拖动节点的父节点(寻找兄弟节点)
-
+      var parnetNodeData = nodes.find(item => item.$$uid === parentUid);
+      // 找到节点父亲等于拖动节点的父节点(寻找兄弟节点)
       var siblingEdge = edges.filter(edge => edge.child !== dragNodeUid && edge.parent === parentUid);
       var sortUids = lodash.sortBy(siblingEdge, "sort").map(item => item.child);
       var sortNodeIds = [];
@@ -1248,24 +1086,21 @@
         sortNodeInstanceIds.push(node.instanceId);
       });
       var sortIndex;
-
       if (dragStatus === "inside") {
-        sortIndex = siblingEdge.length ? Math.max(...siblingEdge.map(item => item.sort)) + 1 : 0; // 插入默认插最后
-
+        sortIndex = siblingEdge.length ? Math.max(...siblingEdge.map(item => item.sort)) + 1 : 0;
+        // 插入默认插最后
         sortNodeIds.push(nodeData.id);
         sortNodeInstanceIds.push(nodeData.instanceId);
       } else if (dragStatus === "top" || dragStatus === "bottom") {
         var _dragEdge$child;
-
         var overIndex = sortUids.findIndex(item => item === dragOverNodeUid);
-        sortIndex = dragStatus === "top" ? overIndex : overIndex + 1; // 排序修正
-
-        sortNodeIds.splice(sortIndex, 0, nodeData.id); // 如果是新增的情况下, 没有edge, 则取dragNodeUid(新创建的uid)
-
+        sortIndex = dragStatus === "top" ? overIndex : overIndex + 1;
+        // 排序修正
+        sortNodeIds.splice(sortIndex, 0, nodeData.id);
+        // 如果是新增的情况下, 没有edge, 则取dragNodeUid(新创建的uid)
         sortUids.splice(sortIndex, 0, (_dragEdge$child = dragEdge === null || dragEdge === void 0 ? void 0 : dragEdge.child) !== null && _dragEdge$child !== void 0 ? _dragEdge$child : dragNodeUid);
         sortNodeInstanceIds.splice(sortIndex, 0, nodeData.instanceId);
       }
-
       return {
         parentUid,
         mountPoint,
@@ -1276,7 +1111,6 @@
         sortNodeInstanceIds
       };
     }
-
     workbenchNodeAdd(detail) {
       var isNeedUpdateSnippet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
       var {
@@ -1290,30 +1124,25 @@
         dragStatus,
         mountPoint
       } = detail;
-
       if (nodeData.instanceId && !nodeData.instanceId.startsWith("mock")) ; else {
         var _nodeData$id, _nodeData$instanceId;
-
         // insert
         var parentInstanceId = detail.parent || detail.parentInstanceId;
         var newNodeUid = nodeData.$$uid || getUniqueNodeId();
         var overNode = nodes.find(item => item.instanceId === dragOverInstanceId);
         var dragOverNodeUid = overNode.$$uid;
         var realDragStatus = dragStatus;
-
         if (dragOverNodeUid === rootId) {
           realDragStatus = "inside";
         } else {
           var overEdge = edges.find(item => item.child === dragOverNodeUid);
           var overParentNode = nodes.find(item => dragStatus === "inside" ? item.$$uid === overEdge.child : item.$$uid === overEdge.parent);
-
           if (overParentNode.instanceId !== parentInstanceId) {
             // 如果instanceId不相同, 说明父元素被修改, dragStatus强制等于inside, uid也需要切换成实际父元素的uid
             realDragStatus = "inside";
             dragOverNodeUid = nodes.find(item => item.instanceId === parentInstanceId).$$uid;
           }
         }
-
         var {
           parentUid,
           sortIndex,
@@ -1332,7 +1161,6 @@
         nodeData.parent = parentInstanceId;
         nodeData.mountPoint = mountPoint;
         nodeData.sort = sortIndex;
-
         if (nodeData.bricks) {
           // snippet
           var snippetData = {
@@ -1348,14 +1176,12 @@
             nodeIds,
             nodeUids
           };
-
           if (isNeedUpdateSnippet) {
             this.snippetApply(snippetData);
           } else {
             return snippetData;
           }
         }
-
         this.runAddNodeAction({
           nodeUid: newNodeUid,
           parentUid,
@@ -1382,7 +1208,6 @@
         }));
       }
     }
-
     workbenchTreeNodeMove(detail) {
       var {
         rootId,
@@ -1449,11 +1274,10 @@
         detail: this.data
       }));
     }
+
     /**
      * Move mount-point up or down.
      */
-
-
     moveMountPoint(_ref4, mountPoint, direction) {
       var {
         $$uid: parentUid
@@ -1464,15 +1288,12 @@
       } = getRelatedEdgesAndMountPoint(this.data.edges, parentUid);
       var index = mountPoints.indexOf(mountPoint);
       var orderedMountPoints = moveItemInList(mountPoints, index, direction);
-
       if (!orderedMountPoints) {
         return;
       }
-
       var orderedEdges = lodash.sortBy(relatedEdges, edge => orderedMountPoints.indexOf(edge.mountPoint), "sort");
       this.reorder(parentUid, orderedEdges);
     }
-
     reorder(parentUid, orderedEdges) {
       var {
         nodes
@@ -1495,7 +1316,6 @@
         }
       }));
     }
-
     contextUpdated(detail) {
       var {
         rootId,
@@ -1513,7 +1333,6 @@
       };
       this.triggerDataChange();
     }
-
     nodeReorder(detail) {
       var {
         nodeUids,
@@ -1530,234 +1349,195 @@
         detail
       }));
     }
-
     nodeDelete(detail) {
       this.data = deleteNodeFromTree(detail.$$uid, this.data);
       this.triggerDataChange();
     }
-
     nodeClick(detail) {
       this.setActiveNodeUid(detail.$$uid);
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.NODE_CLICK, {
         detail
       }));
     }
-
     contextMenuChange(detail) {
       this.contextMenuStatus = detail;
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.CONTEXT_MENU_CHANGE));
     }
-
     onDataChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.DATA_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.DATA_CHANGE, fn);
       };
     }
-
     onNodeAdd(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.NODE_ADD, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.NODE_ADD, fn);
       };
     }
-
     onSnippetApply(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.SNIPPET_APPLY, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.SNIPPET_APPLY, fn);
       };
     }
-
     onNodeReorder(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.NODE_REORDER, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.NODE_REORDER, fn);
       };
     }
-
     onNodeMove(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.NODE_MOVE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.NODE_MOVE, fn);
       };
     }
-
     onWorkbenchTreeNodeMove(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.WORKBENCH_TREE_NODE_MOVE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.WORKBENCH_TREE_NODE_MOVE, fn);
       };
     }
-
     onNodeClick(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.NODE_CLICK, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.NODE_CLICK, fn);
       };
     }
-
     onNodeUpdate(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.NODE_UPDATE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.NODE_UPDATE, fn);
       };
     }
-
     onContextMenuChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.CONTEXT_MENU_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.CONTEXT_MENU_CHANGE, fn);
       };
     }
-
     setShowRelatedNodesBasedOnEvents(show) {
       this.showRelatedNodesBasedOnEvents = show;
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.SHOW_RELATED_NODES_BASED_ON_EVENTS));
     }
-
     getShowRelatedNodesBasedOnEvents() {
       return this.showRelatedNodesBasedOnEvents;
     }
-
     onShowRelatedNodesBasedOnEventsChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.SHOW_RELATED_NODES_BASED_ON_EVENTS, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.SHOW_RELATED_NODES_BASED_ON_EVENTS, fn);
       };
     }
-
     setHoverNodeUid(uid) {
       if (this.hoverNodeUid !== uid) {
         this.hoverNodeUid = uid;
         this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.HOVER_NODE_CHANGE));
       }
     }
-
     getHoverNodeUid() {
       return this.hoverNodeUid;
     }
-
     onHoverNodeChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.HOVER_NODE_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.HOVER_NODE_CHANGE, fn);
       };
     }
-
     setActiveNodeUid(uid) {
       if (this.activeNodeUid !== uid) {
         this.activeNodeUid = uid;
         this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.ACTIVE_NODE_CHANGE));
       }
     }
-
     getActiveNodeUid() {
       return this.activeNodeUid;
     }
-
     onActiveNodeChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.ACTIVE_NODE_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.ACTIVE_NODE_CHANGE, fn);
       };
     }
-
     toggleOutline(nodeInstanceId) {
       if (this.outlineDisabledNodes.has(nodeInstanceId)) {
         this.outlineDisabledNodes.delete(nodeInstanceId);
       } else {
         this.outlineDisabledNodes.add(nodeInstanceId);
       }
-
       this.localJsonStorage.setItem(storageKeyOfOutlineDisabledNodes, Array.from(this.outlineDisabledNodes));
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.OUTLINE_DISABLED_NODES_CHANGE));
     }
-
     isOutlineEnabled(nodeInstanceId) {
       return !this.outlineDisabledNodes.has(nodeInstanceId);
     }
-
     onOutlineEnabledNodesChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.OUTLINE_DISABLED_NODES_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.OUTLINE_DISABLED_NODES_CHANGE, fn);
       };
     }
-
     setHighlightNodes(nodeUids) {
       this.highlightNodes = nodeUids;
       this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.HIGHLIGHT_NODES_CHANGE));
     }
-
     getHighlightNodes() {
       return this.highlightNodes;
     }
-
     onHighlightNodesChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.HIGHLIGHT_NODES_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.HIGHLIGHT_NODES_CHANGE, fn);
       };
     }
-
     updateDroppingStatus(nodeUid, mountPoint, isDraggingOver) {
       var nodeStatus = this.droppingStatus.get(nodeUid);
       this.droppingStatus = new Map(Array.from(this.droppingStatus.entries()).concat([[nodeUid, new Map((nodeStatus ? Array.from(nodeStatus) : []).concat([[mountPoint, isDraggingOver]]))]]));
-      this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.DROPPING_STATUS_CHANGE)); // When dragging nodes over `EditorContainer`, the `mouseout` events
+      this.eventTarget.dispatchEvent(new CustomEvent(BuilderInternalEventType.DROPPING_STATUS_CHANGE));
+
+      // When dragging nodes over `EditorContainer`, the `mouseout` events
       // are not triggered, which causes hover status does not get cleared.
       // So we manually reset hover status once dragging starts.
-
       if (this.hoverNodeUid && Array.from(this.droppingStatus.values()).flatMap(nodeStatus => Array.from(nodeStatus.values())).some(Boolean)) {
         this.setHoverNodeUid(undefined);
       }
     }
-
     getDroppingStatus() {
       return this.droppingStatus;
     }
-
     onDroppingStatusChange(fn) {
       this.eventTarget.addEventListener(BuilderInternalEventType.DROPPING_STATUS_CHANGE, fn);
       return () => {
         this.eventTarget.removeEventListener(BuilderInternalEventType.DROPPING_STATUS_CHANGE, fn);
       };
     }
-
   }
-
   function getRelatedEdgesAndMountPoint(edges, parentUid) {
     var relatedEdges = lodash.sortBy(edges.filter(edge => edge.parent === parentUid && !edge.$$isTemplateExpanded), "sort");
     var mountPointSet = new Set();
-
     for (var edge of relatedEdges) {
       mountPointSet.add(edge.mountPoint);
     }
-
     var mountPoints = Array.from(mountPointSet);
     return {
       relatedEdges,
       mountPoints
     };
   }
-
   function moveItemInList(list, index, direction) {
     var upperIndex;
-
     if (direction === "up") {
       if (index <= 0) {
         return;
       }
-
       upperIndex = index - 1;
     } else {
       if (index === -1 || index >= list.length - 1) {
         return;
       }
-
       upperIndex = index;
     }
-
     return [...list.slice(0, upperIndex), list[upperIndex + 1], list[upperIndex], ...list.slice(upperIndex + 2)];
   }
 
@@ -1772,11 +1552,9 @@
     var {
       manager
     } = React__default["default"].useContext(BuilderContext);
-
     if (!manager) {
       throw new Error("Expected builder data context");
     }
-
     return manager;
   }
 
@@ -1805,7 +1583,6 @@
       if (isWrapper) {
         return wrapperNode;
       }
-
       return nodes.find(node => node.$$uid === currentUid);
     }, [nodes, currentUid, isWrapper, wrapperNode]);
   }
@@ -1831,15 +1608,12 @@
   function styleInject(css, ref) {
     if (ref === void 0) ref = {};
     var insertAt = ref.insertAt;
-
     if (!css || typeof document === 'undefined') {
       return;
     }
-
     var head = document.head || document.getElementsByTagName('head')[0];
     var style = document.createElement('style');
     style.type = 'text/css';
-
     if (insertAt === 'top') {
       if (head.firstChild) {
         head.insertBefore(style, head.firstChild);
@@ -1849,7 +1623,6 @@
     } else {
       head.appendChild(style);
     }
-
     if (style.styleSheet) {
       style.styleSheet.cssText = css;
     } else {
@@ -1864,21 +1637,17 @@
   function isCurrentTargetByClassName(targetElement, currentElement) {
     // Traverse DOM from bottom to top.
     var element = targetElement;
-
     while (element) {
       if (element === currentElement) {
         return true;
       }
-
       if (element.classList.contains(styles$3.editorContainer) && !element.classList.contains(styles$3.isTemplateInternalNode)) {
         // It's not the current target if
         // matches another editor container first.
         return false;
       }
-
       element = element.parentElement;
     }
-
     return false;
   }
 
@@ -1911,7 +1680,6 @@
 
   function EditorContainer(_ref) {
     var _droppingStatus$get$v, _droppingStatus$get;
-
     var {
       nodeUid,
       type,
@@ -1941,7 +1709,6 @@
     var handleMouseOver = React.useCallback(event => {
       event.stopPropagation();
       setHover(true);
-
       if (hoverNodeUidRef.current !== nodeUid) {
         manager.setHoverNodeUid(nodeUid);
       }
@@ -1949,7 +1716,6 @@
     var handleMouseOut = React.useCallback(event => {
       event.stopPropagation();
       setHover(false);
-
       if (hoverNodeUidRef.current === nodeUid) {
         manager.setHoverNodeUid(undefined);
       }
@@ -1957,10 +1723,9 @@
     React.useEffect(() => {
       if (node.$$isTemplateInternalNode) {
         return;
-      } // Manually bind listeners since events which cross custom-elements
+      }
+      // Manually bind listeners since events which cross custom-elements
       // seem not working in React v16.
-
-
       var editorContainer = editorContainerRef.current;
       editorContainer.addEventListener("mouseover", handleMouseOver);
       editorContainer.addEventListener("mouseout", handleMouseOut);
@@ -1973,20 +1738,13 @@
       if (node.$$isTemplateInternalNode) {
         return;
       }
-
       setHover(hoverNodeUid === nodeUid);
-
       if (showRelatedEvents) {
         var _relatedNodes$get, _relatedNodes$get2;
-
         var relatedNodes = manager.getRelatedNodesBasedOnEventsMap();
-
         var _isUpstreamNode = (_relatedNodes$get = relatedNodes.get(hoverNodeUid)) === null || _relatedNodes$get === void 0 ? void 0 : _relatedNodes$get.upstreamNodes.has(nodeUid);
-
         setIsUpstreamNode(_isUpstreamNode);
-
         var _isDownstreamNode = (_relatedNodes$get2 = relatedNodes.get(hoverNodeUid)) === null || _relatedNodes$get2 === void 0 ? void 0 : _relatedNodes$get2.downstreamNodes.has(nodeUid);
-
         setIsDownstreamNode(_isDownstreamNode);
       }
     }, [hoverNodeUid, node, nodeUid, showRelatedEvents, manager]);
@@ -2038,6 +1796,7 @@
 
   var ANY_BRICK_EDITOR = "basic-bricks.any-brick--editor";
   var ANY_ROUTE_EDITOR = "basic-bricks.any-route--editor";
+
   /**
    * Get editor brick name by node.
    *
@@ -2053,44 +1812,36 @@
    *
    * And returns undefined if load failed.
    */
-
   function getEditorBrick(_x, _x2) {
     return _getEditorBrick.apply(this, arguments);
   }
-
   function _getEditorBrick() {
     _getEditorBrick = _asyncToGenerator__default["default"](function* (node, editor) {
       var tryEditorBricks = [];
-
       if (brickUtils.isRouteNode(node)) {
         tryEditorBricks.push(ANY_ROUTE_EDITOR);
       } else if (brickUtils.isBrickNode(node)) {
         if (node.brick.includes("-")) {
           tryEditorBricks.push("".concat(node.brick, "--editor"));
         }
-
         if (editor) {
           tryEditorBricks.push(editor);
         }
-
         tryEditorBricks.push(ANY_BRICK_EDITOR);
       } else {
         // Currently there should be no custom-template nodes to be rendered as editor.
         throw new Error("Unsupported node type: ".concat(node.type));
       }
-
       for (var editorBrick of tryEditorBricks) {
         try {
           yield brickKit.developHelper.loadEditorBricks([editorBrick]);
         } catch (error) {
           throw new Error("Load editor brick \"".concat(editorBrick, "\" failed"));
         }
-
         if (customElements.get(editorBrick)) {
           return editorBrick;
         }
       }
-
       throw new Error("Editor brick \"".concat(tryEditorBricks.join(", "), "\" not found"));
     });
     return _getEditorBrick.apply(this, arguments);
@@ -2143,7 +1894,6 @@
         setInitialized(false);
         var editorName;
         var editorError;
-
         try {
           editorName = yield getEditorBrick(node, installedBricksEnabled ? editorConf === null || editorConf === void 0 ? void 0 : editorConf.editor : brickDoc === null || brickDoc === void 0 ? void 0 : brickDoc.editor);
         } catch (error) {
@@ -2151,7 +1901,6 @@
           console.error(error);
           editorError = error.message;
         }
-
         setEditorBrick(editorName);
         setLoadEditorError(editorError);
         setInitialized(true);
@@ -2166,15 +1915,12 @@
     }), [brickDoc, editorBrick, editorConf, installedBricksEnabled, node.$$uid]);
     var selfLayout = React__default["default"].useMemo(() => {
       var _layout;
-
       var layout;
-
       if (initialized && editorBrick) {
         var editorConstructor = customElements.get(editorBrick);
         layout = editorConstructor.selfLayout;
-      } // For bricks with no editors, display as a container if it has children.
-
-
+      }
+      // For bricks with no editors, display as a container if it has children.
       return (_layout = layout) !== null && _layout !== void 0 ? _layout : hasChildren ? exports.EditorSelfLayout.CONTAINER : exports.EditorSelfLayout.INLINE;
     }, [initialized, editorBrick, hasChildren]);
     var [{
@@ -2246,21 +1992,17 @@
     } = _ref2;
     var groups = new Map();
     var relatedEdges = lodash.sortBy(edges.filter(edge => edge.parent === nodeUid && (doNotExpandTemplates ? !edge.$$isTemplateInternal : !edge.$$isTemplateDelegated)), [edge => edge.sort]);
-
     var _loop = function (edge) {
       var childNode = nodes.find(node => node.$$uid === edge.child);
-
       if (groups.has(edge.mountPoint)) {
         groups.get(edge.mountPoint).push(childNode);
       } else {
         groups.set(edge.mountPoint, [childNode]);
       }
     };
-
     for (var edge of relatedEdges) {
       _loop(edge);
     }
-
     return Array.from(groups.entries()).map(_ref3 => {
       var [mountPoint, childNodes] = _ref3;
       return {
@@ -2286,29 +2028,26 @@
         if (parentId === nodeUid) {
           return false;
         }
-
         return !edges.some(edge => {
           if (edge.parent === parentId) {
             return !traverse(edge.child);
           }
-
           return false;
         });
       };
-
       return traverse(draggingUid);
     }, [edges]);
   }
 
   /* istanbul-ignore-file */
   // Todo(steve): Ignore tests temporarily for potential breaking change in the future.
+
   var defaultGapHalf = 6;
   function getDropPositions(dropZone, dropZoneGrid) {
-    var zoneRect = dropZone.getBoundingClientRect(); // const gridRect = dropZoneGrid.getBoundingClientRect();
-
+    var zoneRect = dropZone.getBoundingClientRect();
+    // const gridRect = dropZoneGrid.getBoundingClientRect();
     var positions = [];
     var gridItemList = Array.from(dropZoneGrid.children).filter(item => !item.classList.contains("__isTemplateInternalNode"));
-
     if (gridItemList.length > 0) {
       var currentRow = {
         cells: []
@@ -2324,10 +2063,8 @@
           right: rect.right
         };
         var prevCell = currentRow.cells.length > 0 && currentRow.cells[currentRow.cells.length - 1];
-
         if (!prevCell || compareApproximately(rect.left, prevCell.right) > 0 && compareApproximately(rect.top, prevCell.bottom) < 0) {
           var _currentRow$top, _currentRow$bottom;
-
           currentRow.cells.push(cell);
           currentRow.top = Math.min((_currentRow$top = currentRow.top) !== null && _currentRow$top !== void 0 ? _currentRow$top : Infinity, rect.top);
           currentRow.bottom = Math.max((_currentRow$bottom = currentRow.bottom) !== null && _currentRow$bottom !== void 0 ? _currentRow$bottom : -Infinity, rect.bottom);
@@ -2339,7 +2076,8 @@
           };
           rows.push(currentRow);
         }
-      }); // console.log(rows);
+      });
+      // console.log(rows);
 
       var lastRectBottom = zoneRect.top;
       var nextCursorTop = zoneRect.top;
@@ -2360,8 +2098,9 @@
             }
           });
           lastRectBottom = rectBottom;
-          nextCursorTop = cell.bottom; // Append one more insert position after reached the end.
+          nextCursorTop = cell.bottom;
 
+          // Append one more insert position after reached the end.
           if (rowIndex === rows.length - 1) {
             positions.push({
               rect: {
@@ -2377,9 +2116,7 @@
             });
           } else if (rows[rowIndex + 1].cells.length > 1) {
             var nextRow = rows[rowIndex + 1];
-
             var _rectBottom = (cell.bottom + nextRow.top) / 2;
-
             positions.push({
               rect: {
                 top: lastRectBottom,
@@ -2397,9 +2134,7 @@
         } else {
           var lastRectRight = zoneRect.left;
           var nextCursorLeft = zoneRect.left;
-
           var _rectBottom2 = rowIndex < rows.length - 1 ? (rows[rowIndex + 1].top + row.bottom) / 2 : zoneRect.bottom;
-
           var cursorDefault = {
             isVertical: true,
             y: row.top - zoneRect.top,
@@ -2420,8 +2155,9 @@
               })
             });
             lastRectRight = rectRight;
-            nextCursorLeft = cell.right; // Append one more insert position after reached the row end.
+            nextCursorLeft = cell.right;
 
+            // Append one more insert position after reached the row end.
             if (cellIndex === row.cells.length - 1) {
               if (rowIndex === rows.length - 1) {
                 positions.push({
@@ -2457,12 +2193,10 @@
         }
       });
     }
-
     return positions;
   }
   function getDropPosition(x, y, dropZone, dropZoneGrid) {
     var positions = getDropPositions(dropZone, dropZoneGrid);
-
     for (var {
       rect,
       cursor
@@ -2472,13 +2206,11 @@
         return cursor;
       }
     }
-
     return {
       index: 0,
       y: 5
     };
   }
-
   function compareApproximately(a, b) {
     var diff = a - b;
     return Math.abs(diff) < 1 ? 0 : diff;
@@ -2536,17 +2268,15 @@
       droppingMountPoint,
       droppingSiblingGroups,
       droppingIndex
-    } = droppingInfo; // When applying a snippet, the dragging nodes will be an array.
-
+    } = droppingInfo;
+    // When applying a snippet, the dragging nodes will be an array.
     var draggingNodeUids = Array.isArray(draggingNodeUid) ? draggingNodeUid : [draggingNodeUid];
     var fullChildNodes = droppingSiblingGroups.flatMap(group => group.childNodes);
     var nodeUids = droppingSiblingGroups.flatMap(group => {
       var uids = group.childNodes.map(item => item.$$uid).filter(uid => !draggingNodeUids.includes(uid));
-
       if (group.mountPoint === droppingMountPoint) {
         uids.splice((draggingIndex !== null && draggingIndex !== void 0 ? draggingIndex : -1) >= 0 && droppingIndex > draggingIndex ? droppingIndex - 1 : droppingIndex, 0, ...draggingNodeUids);
       }
-
       return uids;
     });
     var nodeIds = nodeUids.map(uid => draggingNodeUids.includes(uid) ? draggingNodeId : fullChildNodes.find(item => item.$$uid === uid).id);
@@ -2569,7 +2299,6 @@
       droppingSiblingGroups,
       isPortalCanvas
     } = _ref;
-
     if (type === exports.BuilderDataTransferType.NODE_TO_ADD) {
       // Drag a new node into canvas.
       var {
@@ -2598,8 +2327,8 @@
     } else if (type === exports.BuilderDataTransferType.SNIPPET_TO_APPLY) {
       var {
         bricks
-      } = data; // https://stackoverflow.com/questions/5501581/javascript-new-arrayn-and-array-prototype-map-weirdness
-
+      } = data;
+      // https://stackoverflow.com/questions/5501581/javascript-new-arrayn-and-array-prototype-map-weirdness
       var draggingNodeUids = [...new Array(bricks.length)].map(() => getUniqueNodeId());
       manager.snippetApply(_objectSpread__default["default"](_objectSpread__default["default"]({}, getSortedIdsAfterDropped({
         draggingNodeUid: draggingNodeUids,
@@ -2624,9 +2353,9 @@
         nodeId: draggingNodeId,
         nodeInstanceId: draggingNodeInstanceId
       } = data;
-      var draggingIndex = droppingChildNodes.findIndex(item => item.$$uid === _draggingNodeUid); // If found dragging node in the same drop zone,
+      var draggingIndex = droppingChildNodes.findIndex(item => item.$$uid === _draggingNodeUid);
+      // If found dragging node in the same drop zone,
       // then apply a node reorder, otherwise apply a node move.
-
       if (draggingIndex >= 0) {
         // If the index is not changed, then there is nothing to do.
         if (droppingIndex !== draggingIndex && droppingIndex !== draggingIndex + 1) {
@@ -2665,7 +2394,6 @@
     return React.useMemo(() => {
       var mainCanvas = [];
       var portalCanvasList = [];
-
       for (var child of rootChildNodes) {
         if (child.portal) {
           portalCanvasList.push([child]);
@@ -2673,7 +2401,6 @@
           mainCanvas.push(child);
         }
       }
-
       return [mainCanvas, ...portalCanvasList, []];
     }, [rootChildNodes]);
   }
@@ -2729,32 +2456,27 @@
     var refinedSlotContentLayout = slotContentLayout !== null && slotContentLayout !== void 0 ? slotContentLayout : exports.EditorSlotContentLayout.BLOCK;
     var selfChildNodes = React__default["default"].useMemo(() => {
       var _groupedChildNodes$fi, _groupedChildNodes$fi2;
-
       return (_groupedChildNodes$fi = (_groupedChildNodes$fi2 = groupedChildNodes.find(group => group.mountPoint === mountPoint)) === null || _groupedChildNodes$fi2 === void 0 ? void 0 : _groupedChildNodes$fi2.childNodes) !== null && _groupedChildNodes$fi !== void 0 ? _groupedChildNodes$fi : [];
     }, [groupedChildNodes, mountPoint]);
     var canvasList = useCanvasList(selfChildNodes);
     var selfChildNodesInCurrentCanvas = React__default["default"].useMemo(() => separateCanvas ? selfChildNodes.filter(child => Boolean(Number(Boolean(isPortalCanvas)) ^ Number(!child.portal))) : independentPortalCanvas ? canvasList[lodash.clamp(canvasIndex !== null && canvasIndex !== void 0 ? canvasIndex : 0, 0, canvasList.length - 1)] : selfChildNodes, [canvasIndex, independentPortalCanvas, isPortalCanvas, selfChildNodes, canvasList, separateCanvas]);
     var canvasSettings = React__default["default"].useMemo(() => {
       var _selfChildNodesInCurr;
-
       return (_selfChildNodesInCurr = selfChildNodesInCurrentCanvas[0]) === null || _selfChildNodesInCurr === void 0 ? void 0 : _selfChildNodesInCurr.$$parsedProperties._canvas_;
     }, [selfChildNodesInCurrentCanvas]);
     var getDroppingIndexInFullCanvas = React__default["default"].useCallback(droppingIndexInCurrentCanvas => {
       if (!hasTabs) {
         return droppingIndexInCurrentCanvas;
       }
-
       if (selfChildNodesInCurrentCanvas.length > 0) {
         var cursorNode = selfChildNodesInCurrentCanvas[droppingIndexInCurrentCanvas === 0 ? 0 : droppingIndexInCurrentCanvas - 1];
         return selfChildNodes.findIndex(child => child === cursorNode) + (droppingIndexInCurrentCanvas === 0 ? 0 : 1);
       }
-
       return isGeneralizedPortalCanvas ? selfChildNodes.length : 0;
     }, [hasTabs, selfChildNodesInCurrentCanvas, isGeneralizedPortalCanvas, selfChildNodes]);
     var getDroppingContext = React__default["default"].useCallback(() => {
       if (delegatedContext) {
         var _siblingGroups$find$c, _siblingGroups$find;
-
         var siblingGroups = getBuilderGroupedChildNodes({
           nodeUid: delegatedContext.templateUid,
           nodes,
@@ -2769,7 +2491,6 @@
           droppingSiblingGroups: siblingGroups
         };
       }
-
       return {
         droppingParentUid: node.$$uid,
         droppingParentInstanceId: isWrapper ? wrapperNode.instanceId : node.instanceId,
@@ -2803,10 +2524,9 @@
       drop: (item, monitor) => {
         if (!monitor.didDrop()) {
           var {
-            type
-          } = item,
-              data = _objectWithoutProperties__default["default"](item, _excluded);
-
+              type
+            } = item,
+            data = _objectWithoutProperties__default["default"](item, _excluded);
           processDrop(_objectSpread__default["default"]({
             type: type,
             data,
@@ -2824,7 +2544,6 @@
     var dropZoneRef = React__default["default"].useRef();
     var dropZoneRefCallback = React__default["default"].useCallback(element => {
       dropZoneRef.current = element;
-
       if (droppable) {
         dropRef(element);
       }
@@ -2883,7 +2602,6 @@
   /* istanbul-ignore-file */
   function SlotContainer(_ref) {
     var _droppingStatus$get;
-
     var {
       nodeUid,
       slotName,
@@ -2900,9 +2618,8 @@
     var droppingStatus = useDroppingStatus();
     var delegatedContext = React.useMemo(() => {
       var _node$$$delegatedSlot;
-
-      var delegatedSlots = (_node$$$delegatedSlot = node.$$delegatedSlots) === null || _node$$$delegatedSlot === void 0 ? void 0 : _node$$$delegatedSlot.get(slotName); // Ignore when there are more than one delegated slots on a single slot.
-
+      var delegatedSlots = (_node$$$delegatedSlot = node.$$delegatedSlots) === null || _node$$$delegatedSlot === void 0 ? void 0 : _node$$$delegatedSlot.get(slotName);
+      // Ignore when there are more than one delegated slots on a single slot.
       return (delegatedSlots === null || delegatedSlots === void 0 ? void 0 : delegatedSlots.length) === 1 ? delegatedSlots[0] : null;
     }, [node, slotName]);
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2927,35 +2644,29 @@
   // See https://github.com/react-dnd/react-dnd/blob/main/packages/react-dnd/src/common/DndProvider.tsx
   var BuilderProvider = /*#__PURE__*/React__default["default"].memo(LegacyBuilderProvider);
   var instanceSymbol = Symbol.for("__BRICK_NEXT_BUILDER_CONTEXT_INSTANCE__");
-
   function createSingletonBuilderContext() {
     var ctx = window;
-
     if (!ctx[instanceSymbol]) {
       ctx[instanceSymbol] = createBuilderContext();
     }
-
     return ctx[instanceSymbol];
   }
-
   var refCount = 0;
-
   function LegacyBuilderProvider(_ref) {
     var {
       children
     } = _ref;
     var context = createSingletonBuilderContext();
+
     /**
      * If the global context was used to store the DND context
      * then where theres no more references to it we should
      * clean it up to avoid memory leaks
      */
-
     React__default["default"].useEffect(() => {
       refCount++;
       return () => {
         refCount--;
-
         if (refCount === 0) {
           window[instanceSymbol] = null;
         }
@@ -2971,12 +2682,9 @@
       class NewEditorElement extends _UpdatingElement {
         constructor() {
           super(...arguments);
-
           _initialize(this);
         }
-
       }
-
       return {
         F: NewEditorElement,
         d: [{
@@ -3009,13 +2717,11 @@
             if (!this.style.display) {
               this.style.display = "block";
             }
-
             if (options !== null && options !== void 0 && options.brickStyle) {
               for (var [key, value] of Object.entries(options.brickStyle)) {
                 this.style[key] = value;
               }
             }
-
             this._render();
           }
         }, {
@@ -3041,12 +2747,12 @@
         }]
       };
     }, brickKit.UpdatingElement);
-
     return NewEditorElement;
   }
 
-  // Todo(steve): remove this file.
+  // It indicates which mount point of a container is active dropping zone.
 
+  // Todo(steve): remove this file.
   /** @deprecated no more usage but for compatibility only. */
   var DroppingStatusContext = /*#__PURE__*/React.createContext({});
 
@@ -3064,11 +2770,9 @@
     return React.useMemo(() => {
       var mountPoints = new Set();
       var relatedEdges = lodash.sortBy(edges.filter(edge => edge.parent === currentUid && (doNotExpandTemplates ? !edge.$$isTemplateInternal : !edge.$$isTemplateDelegated)), [edge => edge.sort]);
-
       for (var edge of relatedEdges) {
         mountPoints.add(edge.mountPoint);
       }
-
       return Array.from(mountPoints);
     }, [currentUid, edges, doNotExpandTemplates]);
   }