Format

packages/core/src/style_manager/view/LayersView.ts

@@ -37,20 +37,20 @@ export default class LayersView extends View<Layer> {
     const utils = em?.Utils;
     this.sorter = utils
       ? new utils.StyleManagerSorter({
-        em,
-        containerContext: {
-          container: this.el,
-          containerSel: `.${pfx}layers`,
-          itemSel: `.${pfx}layer`,
-          pfx: config.pStylePrefix,
-          documents: [document],
-          placeholderElement: placeholderElement,
-        },
-        dragBehavior: {
-          dragDirection: DragDirection.Vertical,
-          nested: false,
-        },
-      })
+          em,
+          containerContext: {
+            container: this.el,
+            containerSel: `.${pfx}layers`,
+            itemSel: `.${pfx}layer`,
+            pfx: config.pStylePrefix,
+            documents: [document],
+            placeholderElement: placeholderElement,
+          },
+          dragBehavior: {
+            dragDirection: DragDirection.Vertical,
+            nested: false,
+          },
+        })
       : undefined;
     // @ts-ignore
     coll.view = this;

packages/core/src/utils/Droppable.ts

@@ -36,7 +36,15 @@ export default class Droppable {
     const els = Array.isArray(el) ? el : [el];
     this.el = els[0];
     this.counter = 0;
-    bindAll(this, 'handleDragEnter', 'handleOnDrop', 'handleDragOver', 'handleDrop', 'handleDragLeave', 'handleDragEnd');
+    bindAll(
+      this,
+      'handleDragEnter',
+      'handleOnDrop',
+      'handleDragOver',
+      'handleDrop',
+      'handleDragLeave',
+      'handleDragEnd',
+    );
     els.forEach((el) => this.toggleEffects(el, true));
   }
 
@@ -177,14 +185,15 @@ export default class Droppable {
           canvasRelative: true,
         },
         eventHandlers: {
-          onDrop: (targetNode: CanvasNewComponentNode | undefined,
+          onDrop: (
+            targetNode: CanvasNewComponentNode | undefined,
             sourceNodes: CanvasNewComponentNode[],
             index: number | undefined,
           ) => {
             const addedModel = this.handleOnDrop(targetNode, sourceNodes, index);
-            this.handleDragEnd(addedModel, dt)
+            this.handleDragEnd(addedModel, dt);
           },
-          legacyOnEndMove: this.handleDragEnd
+          legacyOnEndMove: this.handleDragEnd,
         },
       });
       const sorterOptions = this.getSorterOptions?.(sorter);
@@ -242,7 +251,9 @@ export default class Droppable {
       // @ts-ignore
       model = targetNode.model?.getView?.()?.insertComponent?.(this.content, { action: 'add-component' });
     } else {
-      model = targetNode.model.components().add(this.content, { at: targetNode.getRealIndex(index || -1), action: 'add-component' });
+      model = targetNode.model
+        .components()
+        .add(this.content, { at: targetNode.getRealIndex(index || -1), action: 'add-component' });
     }
 
     return model;

packages/core/src/utils/sorter/BaseComponentNode.ts

@@ -3,8 +3,8 @@ import Component from '../../dom_components/model/Component';
 import { SortableTreeNode } from './SortableTreeNode';
 
 /**
- * BaseComponentNode is an abstract class that provides basic operations 
- * for managing component nodes in a tree structure. It extends 
+ * BaseComponentNode is an abstract class that provides basic operations
+ * for managing component nodes in a tree structure. It extends
  * SortableTreeNode to handle sorting behavior for components.
  * Subclasses must implement the `view` and `element` methods.
  */
@@ -15,7 +15,7 @@ export abstract class BaseComponentNode extends SortableTreeNode<Component> {
 
   /**
    * Get the list of child components.
-   * @returns {BaseComponentNode[] | null} - The list of children wrapped in 
+   * @returns {BaseComponentNode[] | null} - The list of children wrapped in
    * BaseComponentNode, or null if there are no children.
    */
   getChildren(): BaseComponentNode[] | null {
@@ -24,12 +24,12 @@ export abstract class BaseComponentNode extends SortableTreeNode<Component> {
 
   /**
    * Get the list of displayed children, i.e., components that have a valid HTML element.
-   * @returns {BaseComponentNode[] | null} - The list of displayed children wrapped in 
+   * @returns {BaseComponentNode[] | null} - The list of displayed children wrapped in
    * BaseComponentNode, or null if there are no displayed children.
    */
   private getDisplayedChildren(): BaseComponentNode[] | null {
     const children = this.model.components();
-    const displayedChildren = children.filter(child => {
+    const displayedChildren = children.filter((child) => {
       const element = child.getEl();
 
       return isDisplayed(element);
@@ -40,7 +40,7 @@ export abstract class BaseComponentNode extends SortableTreeNode<Component> {
 
   /**
    * Get the parent component of this node.
-   * @returns {BaseComponentNode | null} - The parent wrapped in BaseComponentNode, 
+   * @returns {BaseComponentNode | null} - The parent wrapped in BaseComponentNode,
    * or null if no parent exists.
    */
   getParent(): BaseComponentNode | null {
@@ -69,7 +69,7 @@ export abstract class BaseComponentNode extends SortableTreeNode<Component> {
 
     const newModel = this.model.components().add(node.model, {
       at: this.getRealIndex(displayIndex),
-      action: options.action
+      action: options.action,
     });
 
     return new (this.constructor as any)(newModel);
@@ -213,9 +213,11 @@ export abstract class BaseComponentNode extends SortableTreeNode<Component> {
 }
 
 function isDisplayed(element: HTMLElement | undefined) {
-  if (!!!element) return false
-  return element instanceof HTMLElement
-    && window.getComputedStyle(element).display !== 'none'
-    && element.offsetWidth > 0
-    && element.offsetHeight > 0;
+  if (!!!element) return false;
+  return (
+    element instanceof HTMLElement &&
+    window.getComputedStyle(element).display !== 'none' &&
+    element.offsetWidth > 0 &&
+    element.offsetHeight > 0
+  );
 }

packages/core/src/utils/sorter/ComponentSorter.ts

@@ -73,7 +73,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
   /**
    * Handles the drop action by moving the source nodes to the target node.
    * Calls appropriate handlers based on whether the move was successful or not.
-   * 
+   *
    * @param targetNode - The node where the source nodes will be dropped.
    * @param sourceNodes - The nodes being dropped.
    * @param index - The index at which to drop the source nodes.
@@ -82,7 +82,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
     const at = typeof index === 'number' ? index : -1;
     if (targetNode && sourceNodes.length > 0) {
       const addedNodes = this.handleNodeAddition(targetNode, sourceNodes, at);
-      if (addedNodes.length === 0) this.triggerNullOnEndMove(false)
+      if (addedNodes.length === 0) this.triggerNullOnEndMove(false);
     } else {
       this.triggerNullOnEndMove(true);
     }
@@ -94,7 +94,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
   /**
    * Handles the addition of multiple source nodes to the target node.
    * If the move is valid, adds the nodes at the specified index and increments the index.
-   * 
+   *
    * @param targetNode - The target node where source nodes will be added.
    * @param sourceNodes - The nodes being added.
    * @param index - The initial index at which to add the source nodes.
@@ -115,7 +115,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
 
   /**
    * Determines if a source node can be moved to the target node at the given index.
-   * 
+   *
    * @param targetNode - The node where the source node will be moved.
    * @param sourceNode - The node being moved.
    * @param index - The index at which to move the source node.
@@ -139,7 +139,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
 
   /**
    * Moves a source node to the target node at the specified index, handling edge cases.
-   * 
+   *
    * @param targetNode - The node where the source node will be moved.
    * @param sourceNode - The node being moved.
    * @param index - The index at which to move the source node.
@@ -164,7 +164,7 @@ export default class ComponentSorter<NodeType extends BaseComponentNode> extends
 
   /**
    * Triggers the end move event for a node that was added to the target.
-   * 
+   *
    * @param addedNode - The node that was moved and added to the target.
    */
   private triggerEndMoveEvent(addedNode: NodeType): void {

packages/core/src/utils/sorter/DropLocationDeterminer.ts

@@ -29,22 +29,22 @@ interface DropLocationDeterminerOptions<T, NodeType extends SortableTreeNode<T>>
  */
 type LastMoveData<NodeType> =
   | {
-    /** The target node under the mouse pointer during the last move. */
-    lastTargetNode: NodeType;
-    /** The index where the placeholder or dragged element should be inserted. */
-    lastIndex: number;
-    /** Placement relative to the target ('before' or 'after'). */
-    lastPlacement: Placement;
-    /** The dimensions of the child elements within the target node. */
-    lastChildrenDimensions: Dimension[];
-  }
+      /** The target node under the mouse pointer during the last move. */
+      lastTargetNode: NodeType;
+      /** The index where the placeholder or dragged element should be inserted. */
+      lastIndex: number;
+      /** Placement relative to the target ('before' or 'after'). */
+      lastPlacement: Placement;
+      /** The dimensions of the child elements within the target node. */
+      lastChildrenDimensions: Dimension[];
+    }
   | {
-    /** Indicates that there is no valid target node. */
-    lastTargetNode: undefined;
-    lastIndex: undefined;
-    lastPlacement: undefined;
-    lastChildrenDimensions: undefined;
-  };
+      /** Indicates that there is no valid target node. */
+      lastTargetNode: undefined;
+      lastIndex: undefined;
+      lastPlacement: undefined;
+      lastChildrenDimensions: undefined;
+    };
 
 export class DropLocationDeterminer<T, NodeType extends SortableTreeNode<T>> extends View {
   em: EditorModel;
@@ -444,9 +444,7 @@ export class DropLocationDeterminer<T, NodeType extends SortableTreeNode<T>> ext
    * @param {HTMLElement} el
    * @return {Dimension}
    */
-  private getDim(
-    el: HTMLElement,
-  ): Dimension {
+  private getDim(el: HTMLElement): Dimension {
     const em = this.em;
     const relative = this.positionOptions.relative;
     const windowMargin = this.positionOptions.windowMargin;

packages/core/src/utils/sorter/PlaceholderClass.ts

@@ -57,7 +57,7 @@ export class PlaceholderClass extends View {
     if (placement === 'inside') {
       this.setOrientation('horizontal');
       if (!this.allowNesting) {
-        this.hide()
+        this.hide();
         return;
       }
       const defaultMargin = 5;

packages/core/src/utils/sorter/Sorter.ts

@@ -39,7 +39,7 @@ export default class Sorter<T, NodeType extends SortableTreeNode<T>> {
     this.eventHandlers = {
       ...mergedOptions.eventHandlers,
       onPlaceholderPositionChange: this.handlePlaceholderMove,
-      onEnd: this.finalizeMove
+      onEnd: this.finalizeMove,
     };
 
     this.em = sorterOptions.em;

packages/core/src/utils/sorter/SorterUtils.ts

@@ -94,8 +94,8 @@ export function matches(el: HTMLElement, selector: string): boolean {
  * @param {Object} model1
  */
 export function sortDom(model1: any, model2: any) {
-  const model1Parents = parents(model1)
-  const model2Parents = parents(model2)
+  const model1Parents = parents(model1);
+  const model2Parents = parents(model2);
   // common ancesters
   const ancesters = model2Parents.filter((p: any) => model1Parents.includes(p));
   const ancester = ancesters[0];