@next-core/editor-bricks-helper 0.49.31 → 0.49.33

package/dist/index.esm.js

@@ -14,31 +14,24 @@ import ReactDOM from 'react-dom';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 var BuilderDataTransferType;
-
 (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";
 })(BuilderDataTransferType || (BuilderDataTransferType = {}));
-
 var EditorBrickType;
-
 (function (EditorBrickType) {
   EditorBrickType["DEFAULT"] = "editorOfDefault";
   EditorBrickType["CONTAINER"] = "editorOfContainer";
   EditorBrickType["TRANSPARENT_CONTAINER"] = "editorOfTransparentContainer";
 })(EditorBrickType || (EditorBrickType = {}));
-
 var EditorSelfLayout;
-
 (function (EditorSelfLayout) {
   EditorSelfLayout["BLOCK"] = "block";
   EditorSelfLayout["INLINE"] = "inline";
   EditorSelfLayout["CONTAINER"] = "container";
 })(EditorSelfLayout || (EditorSelfLayout = {}));
-
 var EditorSlotContentLayout;
-
 (function (EditorSlotContentLayout) {
   EditorSlotContentLayout["BLOCK"] = "block";
   EditorSlotContentLayout["INLINE"] = "inline";
@@ -52,27 +45,23 @@ var classnames = {exports: {}};
   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);
             }
@@ -89,10 +78,8 @@ var classnames = {exports: {}};
           }
         }
       }
-
       return classes.join(' ');
     }
-
     if (module.exports) {
       classNames.default = classNames;
       module.exports = classNames;
@@ -101,12 +88,10 @@ var classnames = {exports: {}};
     }
   })();
 })(classnames);
-
 var classNames = classnames.exports;
 
 /*! (c) Andrea Giammarchi - ISC */
 var self = {};
-
 try {
   self.EventTarget = new EventTarget().constructor;
 } catch (EventTarget) {
@@ -118,7 +103,6 @@ try {
       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,
@@ -128,7 +112,6 @@ try {
     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);
@@ -136,13 +119,11 @@ try {
         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;
@@ -150,12 +131,10 @@ try {
       }
     });
     self.EventTarget = EventTarget;
-
     function EventTarget() {
 
       wm.set(this, create(null));
     }
-
     function define(target, name, value) {
       defineProperty(target, name, {
         configurable: true,
@@ -163,7 +142,6 @@ try {
         value: value
       });
     }
-
     function dispatch(info) {
       var options = info.options;
       if (options && options.once) info.target.removeEventListener(this.type, info.listener);
@@ -172,7 +150,6 @@ try {
     }
   })(Object, new WeakMap());
 }
-
 var EventTarget$1 = self.EventTarget;
 
 var uniqueIdCursor = 0;
@@ -189,32 +166,25 @@ function expandTemplateEdges(_ref) {
   } = _ref;
   var newEdges = edges.slice();
   var reorderedEdgesMap = new WeakMap();
-
   var walk = (uid, callback) => {
     var node = nodes.find(item => item.$$uid === uid);
     var childEdges = 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 && 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,
@@ -224,12 +194,11 @@ function expandTemplateEdges(_ref) {
         };
         var siblingEdges = 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 = 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);
@@ -240,18 +209,15 @@ function expandTemplateEdges(_ref) {
       }
     }
   };
-
   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);
@@ -260,7 +226,6 @@ function expandTemplateEdges(_ref) {
       });
     });
   }
-
   return edges;
 }
 
@@ -306,17 +271,14 @@ function deleteNodeFromTree(nodeUid, _ref) {
     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);
   }
@@ -326,37 +288,30 @@ function getRelatedNodesBasedOnEvents(nodes, rootNodeIsCustomTemplate) {
   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 (!isEmpty(node.$$parsedEvents)) {
       handlers = Object.values(node.$$parsedEvents).flat();
     }
-
     if (!isEmpty(node.$$parsedLifeCycle)) {
       handlers = handlers.concat(Object.entries(node.$$parsedLifeCycle).flatMap(_ref => {
         var [lifeCycleName, lifeCycleConf] = _ref;
-
         switch (lifeCycleName) {
           case "onBeforePageLoad":
           case "onPageLoad":
@@ -366,10 +321,8 @@ function getRelatedNodesBasedOnEvents(nodes, rootNodeIsCustomTemplate) {
           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));
@@ -377,21 +330,17 @@ function getRelatedNodesBasedOnEvents(nodes, rootNodeIsCustomTemplate) {
         }
       }));
     }
-
     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);
@@ -399,14 +348,12 @@ function collectRelatedNodes(node, handlers, nodesMap, targetMap, targetRefMap)
       } 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);
@@ -416,33 +363,28 @@ function collectRelatedNodes(node, handlers, nodesMap, targetMap, targetRefMap)
   }
 }
 
-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 = normalizeBuilderNode(nodeData);
   var jsonFieldsInBrick = ["properties", "events", "lifeCycle"];
   var parsedFields = [];
   var parsedId;
   var parsedTestId;
-
   for (var field of jsonFieldsInBrick) {
     var parsed = cloneDeep(normalized === null || normalized === void 0 ? void 0 : normalized[field]);
     parsedFields.push(["$$parsed".concat(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)) {
@@ -451,23 +393,20 @@ function getBuilderNode(nodeData, nodeUid, isTemplateInternalNode) {
       }
     }
   }
-
   var isBrick = 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 || isRouteNode(nodeData))) {
     var check = {
       if: normalized.if
     };
     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));
 }
 
@@ -476,25 +415,19 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
   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 (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);
@@ -502,12 +435,12 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
       builderNode.$$templateRefToUid = templateRefToUid;
       var sortedChildren = 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,
@@ -517,37 +450,28 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
           $$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
@@ -555,33 +479,25 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
                 }
               }
             };
-
             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 (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);
                     }
@@ -591,40 +507,33 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
             }
           }
         };
-
         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 = 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,
@@ -637,28 +546,21 @@ function getAppendingNodesAndEdges(nodeData, nodeUid, templateSourceMap) {
       });
     }
   };
-
   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,
@@ -738,7 +640,6 @@ var getObjectIdByNode = node => {
 };
 
 var BuilderInternalEventType;
-
 (function (BuilderInternalEventType) {
   BuilderInternalEventType["NODE_ADD"] = "builder.node.add";
   BuilderInternalEventType["NODE_MOVE"] = "builder.node.move";
@@ -758,120 +659,87 @@ var BuilderInternalEventType;
   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(this, "data", {
       rootId: null,
       nodes: [],
       edges: [],
       wrapperNode: null
     });
-
     _defineProperty(this, "hoverNodeUid", void 0);
-
     _defineProperty(this, "activeNodeUid", void 0);
-
     _defineProperty(this, "sharedEditorList", void 0);
-
     _defineProperty(this, "routeList", void 0);
-
     _defineProperty(this, "storyList", void 0);
-
     _defineProperty(this, "eventTarget", new EventTarget$1());
-
     _defineProperty(this, "contextMenuStatus", {
       active: false
     });
-
     _defineProperty(this, "showRelatedNodesBasedOnEvents", void 0);
-
     _defineProperty(this, "relatedNodesBasedOnEventsMap", void 0);
-
     _defineProperty(this, "highlightNodes", new Set());
-
     _defineProperty(this, "templateSourceMap", void 0);
-
     _defineProperty(this, "droppingStatus", new Map());
-
     _defineProperty(this, "localJsonStorage", new JsonStorage(localStorage));
-
     _defineProperty(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({
       rootId
     }, getAppendingNodesAndEdges(root, rootId, templateSourceMap, this.storyList, true));
-
     this.data = _objectSpread(_objectSpread({}, newData), {}, {
       edges: expandTemplateEdges(newData)
     });
     this.triggerDataChange();
   }
-
   triggerDataChange() {
     var {
       rootId,
@@ -884,7 +752,6 @@ class BuilderDataManager {
       detail: this.data
     }));
   }
-
   runAddNodeAction(detail) {
     var {
       rootId,
@@ -925,12 +792,10 @@ class BuilderDataManager {
     });
     this.triggerDataChange();
   }
-
   updateBrick(detail) {
     this.data = deleteNodeFromTree(detail.nodeUid, this.data);
     this.runAddNodeAction(detail);
   }
-
   updateNode(instanceId, detail) {
     var {
       rootId,
@@ -943,23 +808,19 @@ class BuilderDataManager {
       if (item.instanceId === instanceId) {
         var unreachable = false;
         var normalized = detail.$$normalized;
-
         if ((normalized === null || normalized === void 0 ? void 0 : normalized.if) !== undefined && (isBrickNode(item) || isRouteNode(item))) {
           var check = {
             if: normalized.if
           };
           computeConstantCondition(check);
-
           if (check.if === false) {
             unreachable = true;
           }
         }
-
         return _objectSpread(_objectSpread(_objectSpread({}, item), detail), {}, {
           $$unreachable: unreachable
         });
       }
-
       return item;
     });
     var newEdges = detail.mountPoint === undefined || detail.mountPoint === null ? edges : edges.map(item => {
@@ -968,7 +829,6 @@ class BuilderDataManager {
           mountPoint: detail.mountPoint
         });
       }
-
       return item;
     });
     this.data = {
@@ -981,30 +841,24 @@ class BuilderDataManager {
       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);
@@ -1012,7 +866,6 @@ class BuilderDataManager {
       detail
     }));
   }
-
   nodeAddStored(detail) {
     var {
       rootId,
@@ -1035,7 +888,6 @@ class BuilderDataManager {
     };
     this.triggerDataChange();
   }
-
   snippetApply(detail) {
     this.redirectSnippetMountPoint(detail);
     var {
@@ -1051,7 +903,6 @@ class BuilderDataManager {
     } = detail;
     var newNodes = nodes.slice();
     var newEdges = edges.slice();
-
     var walk = _ref => {
       var {
         parentUid,
@@ -1071,16 +922,13 @@ class BuilderDataManager {
         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,
@@ -1098,7 +946,6 @@ class BuilderDataManager {
       detail
     }));
   }
-
   snippetApplyStored(detail) {
     var {
       rootId,
@@ -1123,12 +970,11 @@ class BuilderDataManager {
     };
     this.triggerDataChange();
   }
+
   /**
    * Move node anywhere by drag-n-drop.
    * @deprecated use `moveNode` instead.
    */
-
-
   nodeMove(detail) {
     var {
       rootId,
@@ -1166,11 +1012,10 @@ class BuilderDataManager {
       detail
     }));
   }
+
   /**
    * Move node up or down.
    */
-
-
   moveNode(_ref2, direction) {
     var {
       $$uid: nodeUid
@@ -1184,22 +1029,18 @@ class BuilderDataManager {
       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 = 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,
@@ -1216,7 +1057,6 @@ class BuilderDataManager {
     /*
      * 如果找不到edge, 则为新增状态, 否则为移动状态
      */
-
     var dragEdge = edges.find(item => item.child === dragNodeUid);
     var dragOverEdge = edges.find(item => item.child === dragOverNodeUid);
     /**
@@ -1224,7 +1064,6 @@ class BuilderDataManager {
      * 如果是属于拖动进某个节点中, 默认使用 content
      * 其他情况, 使用被拖拽节点的mountPoint
      */
-
     var mountPoint = isDragRoot ? "bricks" : dragStatus === "inside" ? "content" : dragOverEdge.mountPoint;
     var parentEdge = edges.find(item => item.child === dragOverNodeUid);
     /**
@@ -1232,10 +1071,9 @@ class BuilderDataManager {
      * 如果是拖动进某个节点, 则当前节点为该节点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 = sortBy(siblingEdge, "sort").map(item => item.child);
     var sortNodeIds = [];
@@ -1246,24 +1084,21 @@ class BuilderDataManager {
       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,
@@ -1274,7 +1109,6 @@ class BuilderDataManager {
       sortNodeInstanceIds
     };
   }
-
   workbenchNodeAdd(detail) {
     var isNeedUpdateSnippet = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     var {
@@ -1288,30 +1122,25 @@ class BuilderDataManager {
       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,
@@ -1330,7 +1159,6 @@ class BuilderDataManager {
       nodeData.parent = parentInstanceId;
       nodeData.mountPoint = mountPoint;
       nodeData.sort = sortIndex;
-
       if (nodeData.bricks) {
         // snippet
         var snippetData = {
@@ -1346,14 +1174,12 @@ class BuilderDataManager {
           nodeIds,
           nodeUids
         };
-
         if (isNeedUpdateSnippet) {
           this.snippetApply(snippetData);
         } else {
           return snippetData;
         }
       }
-
       this.runAddNodeAction({
         nodeUid: newNodeUid,
         parentUid,
@@ -1380,7 +1206,6 @@ class BuilderDataManager {
       }));
     }
   }
-
   workbenchTreeNodeMove(detail) {
     var {
       rootId,
@@ -1447,11 +1272,10 @@ class BuilderDataManager {
       detail: this.data
     }));
   }
+
   /**
    * Move mount-point up or down.
    */
-
-
   moveMountPoint(_ref4, mountPoint, direction) {
     var {
       $$uid: parentUid
@@ -1462,15 +1286,12 @@ class BuilderDataManager {
     } = getRelatedEdgesAndMountPoint(this.data.edges, parentUid);
     var index = mountPoints.indexOf(mountPoint);
     var orderedMountPoints = moveItemInList(mountPoints, index, direction);
-
     if (!orderedMountPoints) {
       return;
     }
-
     var orderedEdges = sortBy(relatedEdges, edge => orderedMountPoints.indexOf(edge.mountPoint), "sort");
     this.reorder(parentUid, orderedEdges);
   }
-
   reorder(parentUid, orderedEdges) {
     var {
       nodes
@@ -1493,7 +1314,6 @@ class BuilderDataManager {
       }
     }));
   }
-
   contextUpdated(detail) {
     var {
       rootId,
@@ -1511,7 +1331,6 @@ class BuilderDataManager {
     };
     this.triggerDataChange();
   }
-
   nodeReorder(detail) {
     var {
       nodeUids,
@@ -1528,234 +1347,195 @@ class BuilderDataManager {
       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 = 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)];
 }
 
@@ -1770,11 +1550,9 @@ function useBuilderDataManager() {
   var {
     manager
   } = React.useContext(BuilderContext);
-
   if (!manager) {
     throw new Error("Expected builder data context");
   }
-
   return manager;
 }
 
@@ -1803,7 +1581,6 @@ function useBuilderNode(_ref) {
     if (isWrapper) {
       return wrapperNode;
     }
-
     return nodes.find(node => node.$$uid === currentUid);
   }, [nodes, currentUid, isWrapper, wrapperNode]);
 }
@@ -1829,15 +1606,12 @@ function useShowRelatedNodesBasedOnEvents() {
 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);
@@ -1847,7 +1621,6 @@ function styleInject(css, ref) {
   } else {
     head.appendChild(style);
   }
-
   if (style.styleSheet) {
     style.styleSheet.cssText = css;
   } else {
@@ -1862,21 +1635,17 @@ styleInject(css_248z$3);
 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;
 }
 
@@ -1909,7 +1678,6 @@ function useDroppingStatus() {
 
 function EditorContainer(_ref) {
   var _droppingStatus$get$v, _droppingStatus$get;
-
   var {
     nodeUid,
     type,
@@ -1939,7 +1707,6 @@ function EditorContainer(_ref) {
   var handleMouseOver = useCallback(event => {
     event.stopPropagation();
     setHover(true);
-
     if (hoverNodeUidRef.current !== nodeUid) {
       manager.setHoverNodeUid(nodeUid);
     }
@@ -1947,7 +1714,6 @@ function EditorContainer(_ref) {
   var handleMouseOut = useCallback(event => {
     event.stopPropagation();
     setHover(false);
-
     if (hoverNodeUidRef.current === nodeUid) {
       manager.setHoverNodeUid(undefined);
     }
@@ -1955,10 +1721,9 @@ function EditorContainer(_ref) {
   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);
@@ -1971,20 +1736,13 @@ function EditorContainer(_ref) {
     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]);
@@ -2036,6 +1794,7 @@ function EditorContainer(_ref) {
 
 var ANY_BRICK_EDITOR = "basic-bricks.any-brick--editor";
 var ANY_ROUTE_EDITOR = "basic-bricks.any-route--editor";
+
 /**
  * Get editor brick name by node.
  *
@@ -2051,44 +1810,36 @@ var ANY_ROUTE_EDITOR = "basic-bricks.any-route--editor";
  *
  * And returns undefined if load failed.
  */
-
 function getEditorBrick(_x, _x2) {
   return _getEditorBrick.apply(this, arguments);
 }
-
 function _getEditorBrick() {
   _getEditorBrick = _asyncToGenerator(function* (node, editor) {
     var tryEditorBricks = [];
-
     if (isRouteNode(node)) {
       tryEditorBricks.push(ANY_ROUTE_EDITOR);
     } else if (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 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);
@@ -2141,7 +1892,6 @@ function EditorBrickAsComponent(_ref) {
       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) {
@@ -2149,7 +1899,6 @@ function EditorBrickAsComponent(_ref) {
         console.error(error);
         editorError = error.message;
       }
-
       setEditorBrick(editorName);
       setLoadEditorError(editorError);
       setInitialized(true);
@@ -2164,15 +1913,12 @@ function EditorBrickAsComponent(_ref) {
   }), [brickDoc, editorBrick, editorConf, installedBricksEnabled, node.$$uid]);
   var selfLayout = React.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 ? EditorSelfLayout.CONTAINER : EditorSelfLayout.INLINE;
   }, [initialized, editorBrick, hasChildren]);
   var [{
@@ -2244,21 +1990,17 @@ function getBuilderGroupedChildNodes(_ref2) {
   } = _ref2;
   var groups = new Map();
   var relatedEdges = 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 {
@@ -2284,29 +2026,26 @@ function useCanDrop() {
       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: []
@@ -2322,10 +2061,8 @@ function getDropPositions(dropZone, dropZoneGrid) {
         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);
@@ -2337,7 +2074,8 @@ function getDropPositions(dropZone, dropZoneGrid) {
         };
         rows.push(currentRow);
       }
-    }); // console.log(rows);
+    });
+    // console.log(rows);
 
     var lastRectBottom = zoneRect.top;
     var nextCursorTop = zoneRect.top;
@@ -2358,8 +2096,9 @@ function getDropPositions(dropZone, dropZoneGrid) {
           }
         });
         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: {
@@ -2375,9 +2114,7 @@ function getDropPositions(dropZone, dropZoneGrid) {
           });
         } 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,
@@ -2395,9 +2132,7 @@ function getDropPositions(dropZone, dropZoneGrid) {
       } 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,
@@ -2418,8 +2153,9 @@ function getDropPositions(dropZone, dropZoneGrid) {
             })
           });
           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({
@@ -2455,12 +2191,10 @@ function getDropPositions(dropZone, dropZoneGrid) {
       }
     });
   }
-
   return positions;
 }
 function getDropPosition(x, y, dropZone, dropZoneGrid) {
   var positions = getDropPositions(dropZone, dropZoneGrid);
-
   for (var {
     rect,
     cursor
@@ -2470,13 +2204,11 @@ function getDropPosition(x, y, dropZone, dropZoneGrid) {
       return cursor;
     }
   }
-
   return {
     index: 0,
     y: 5
   };
 }
-
 function compareApproximately(a, b) {
   var diff = a - b;
   return Math.abs(diff) < 1 ? 0 : diff;
@@ -2534,17 +2266,15 @@ function getSortedIdsAfterDropped(droppingInfo) {
     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);
@@ -2567,7 +2297,6 @@ function processDrop(_ref) {
     droppingSiblingGroups,
     isPortalCanvas
   } = _ref;
-
   if (type === BuilderDataTransferType.NODE_TO_ADD) {
     // Drag a new node into canvas.
     var {
@@ -2596,8 +2325,8 @@ function processDrop(_ref) {
   } else if (type === 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(_objectSpread({}, getSortedIdsAfterDropped({
       draggingNodeUid: draggingNodeUids,
@@ -2622,9 +2351,9 @@ function processDrop(_ref) {
       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) {
@@ -2663,7 +2392,6 @@ function useCanvasList(rootChildNodes) {
   return useMemo(() => {
     var mainCanvas = [];
     var portalCanvasList = [];
-
     for (var child of rootChildNodes) {
       if (child.portal) {
         portalCanvasList.push([child]);
@@ -2671,7 +2399,6 @@ function useCanvasList(rootChildNodes) {
         mainCanvas.push(child);
       }
     }
-
     return [mainCanvas, ...portalCanvasList, []];
   }, [rootChildNodes]);
 }
@@ -2727,32 +2454,27 @@ function DropZone(_ref) {
   var refinedSlotContentLayout = slotContentLayout !== null && slotContentLayout !== void 0 ? slotContentLayout : EditorSlotContentLayout.BLOCK;
   var selfChildNodes = React.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.useMemo(() => separateCanvas ? selfChildNodes.filter(child => Boolean(Number(Boolean(isPortalCanvas)) ^ Number(!child.portal))) : independentPortalCanvas ? canvasList[clamp(canvasIndex !== null && canvasIndex !== void 0 ? canvasIndex : 0, 0, canvasList.length - 1)] : selfChildNodes, [canvasIndex, independentPortalCanvas, isPortalCanvas, selfChildNodes, canvasList, separateCanvas]);
   var canvasSettings = React.useMemo(() => {
     var _selfChildNodesInCurr;
-
     return (_selfChildNodesInCurr = selfChildNodesInCurrentCanvas[0]) === null || _selfChildNodesInCurr === void 0 ? void 0 : _selfChildNodesInCurr.$$parsedProperties._canvas_;
   }, [selfChildNodesInCurrentCanvas]);
   var getDroppingIndexInFullCanvas = React.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.useCallback(() => {
     if (delegatedContext) {
       var _siblingGroups$find$c, _siblingGroups$find;
-
       var siblingGroups = getBuilderGroupedChildNodes({
         nodeUid: delegatedContext.templateUid,
         nodes,
@@ -2767,7 +2489,6 @@ function DropZone(_ref) {
         droppingSiblingGroups: siblingGroups
       };
     }
-
     return {
       droppingParentUid: node.$$uid,
       droppingParentInstanceId: isWrapper ? wrapperNode.instanceId : node.instanceId,
@@ -2801,10 +2522,9 @@ function DropZone(_ref) {
     drop: (item, monitor) => {
       if (!monitor.didDrop()) {
         var {
-          type
-        } = item,
-            data = _objectWithoutProperties(item, _excluded);
-
+            type
+          } = item,
+          data = _objectWithoutProperties(item, _excluded);
         processDrop(_objectSpread({
           type: type,
           data,
@@ -2822,7 +2542,6 @@ function DropZone(_ref) {
   var dropZoneRef = React.useRef();
   var dropZoneRefCallback = React.useCallback(element => {
     dropZoneRef.current = element;
-
     if (droppable) {
       dropRef(element);
     }
@@ -2881,7 +2600,6 @@ styleInject(css_248z);
 /* istanbul-ignore-file */
 function SlotContainer(_ref) {
   var _droppingStatus$get;
-
   var {
     nodeUid,
     slotName,
@@ -2898,9 +2616,8 @@ function SlotContainer(_ref) {
   var droppingStatus = useDroppingStatus();
   var delegatedContext = 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.createElement("div", {
@@ -2925,35 +2642,29 @@ function SlotContainer(_ref) {
 // See https://github.com/react-dnd/react-dnd/blob/main/packages/react-dnd/src/common/DndProvider.tsx
 var BuilderProvider = /*#__PURE__*/React.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.useEffect(() => {
     refCount++;
     return () => {
       refCount--;
-
       if (refCount === 0) {
         window[instanceSymbol] = null;
       }
@@ -2969,12 +2680,9 @@ function EditorElementFactory(EditorComponent, options) {
     class NewEditorElement extends _UpdatingElement {
       constructor() {
         super(...arguments);
-
         _initialize(this);
       }
-
     }
-
     return {
       F: NewEditorElement,
       d: [{
@@ -3007,13 +2715,11 @@ function EditorElementFactory(EditorComponent, options) {
           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();
         }
       }, {
@@ -3039,12 +2745,12 @@ function EditorElementFactory(EditorComponent, options) {
       }]
     };
   }, 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__*/createContext({});
 
@@ -3062,11 +2768,9 @@ function useBuilderNodeMountPoints(_ref) {
   return useMemo(() => {
     var mountPoints = new Set();
     var relatedEdges = 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]);
 }