Fixes

.vscode/launch.json

@@ -1,20 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "msedge",
-      "request": "launch",
-      "name": "Launch Edge against localhost",
-      "url": "http://localhost:8080",
-      "webRoot": "${workspaceFolder}/src/trait_managerindex.ts",
-      "sourceMapPathOverrides": {
-        "meteor://💻app/*": "${workspaceFolder}/*",
-        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
-        "webpack://?:*/*": "${workspaceFolder}/*"
-      }
-    }
-  ]
-}

.vscode/settings.json

@@ -1,24 +0,0 @@
-{
-  "grammarly.selectors": [
-    {
-      "language": "markdown",
-      "scheme": "file",
-      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
-    },
-    {
-      "language": "markdown",
-      "scheme": "file",
-      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
-    },
-    {
-      "language": "markdown",
-      "scheme": "file",
-      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
-    },
-    {
-      "language": "markdown",
-      "scheme": "file",
-      "pattern": "c:\\Users\\amirmohammad.r\\Desktop\\pr\\Grapesjs.md"
-    }
-  ]
-}

src/abstract/ModuleCategory.ts

@@ -33,7 +33,7 @@ export default class Category extends Model<CategoryProperties> {
     return {
       id: '',
       label: '',
-      open: false,
+      open: true,
       attributes: {},
     };
   }

src/index.ts

@@ -92,6 +92,11 @@ export const grapesjs = {
   },
 };
 
+/**
+ * @deprecated Changed to CategoryProperties
+ */
+export type { CategoryProperties as BlockCategoryProperties } from './abstract/ModuleCategory';
+
 // Exports for TS
 export type { default as Asset } from './asset_manager/model/Asset';
 export type { default as Assets } from './asset_manager/model/Assets';

src/styles/scss/_gjs_traits.scss

@@ -1,31 +1,3 @@
-.#{$app-prefix}traits-c {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-}
-
-.#{$app-prefix}trait-categories {
-  display: flex;
-  flex-direction: column;
-}
-
-.#{$app-prefix}trait-category {
-  width: 100%;
-
-  &.#{$app-prefix}open {
-    @extend .#{$app-prefix}category-open;
-  }
-
-  .#{$app-prefix}title {
-    @extend .#{$app-prefix}category-title;
-  }
-
-  .#{$app-prefix}caret-icon {
-    margin-right: 5px;
-  }
-}
-
-
 .#{$app-prefix} {
   &traits-label {
     border-bottom: 1px solid var(--gjs-main-dark-color);
@@ -49,6 +21,32 @@
       flex-grow: 1;
     }
   }
+
+  &traits-c {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &trait-categories {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &trait-category {
+    width: 100%;
+
+    &.#{$app-prefix}open {
+      @extend .#{$app-prefix}category-open;
+    }
+
+    .#{$app-prefix}title {
+      @extend .#{$app-prefix}category-title;
+    }
+
+    .#{$app-prefix}caret-icon {
+      margin-right: 5px;
+    }
+  }
 }
 
 .#{$trt-prefix}header {
@@ -63,6 +61,7 @@
   font-weight: lighter;
   align-items: center;
   text-align: left;
+  gap: 5px;
 
   &s {
     font-size: var(--gjs-font-size);

src/trait_manager/index.ts

@@ -46,8 +46,6 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
   types: { [id: string]: { new (o: any): TraitView } };
   model: Model;
   __ctn?: any;
-  traits: Traits;
-  traitsVisible: Traits;
   categories: Categories;
 
   TraitsView = TraitsView;
@@ -77,10 +75,6 @@ export default class TraitManager extends Module<TraitManagerConfig & { pStylePr
     this.types = typesDef;
     const ppfx = this.config.pStylePrefix;
     ppfx && (this.config.stylePrefix = `${ppfx}${this.config.stylePrefix}`);
-
-    // Global traits collection
-    this.traits = new Traits([], { em });
-    this.traitsVisible = new Traits(this.traits.models, { em });
     this.categories = new Categories();
 
     const upAll = debounce(() => this.__upSel(), 0);

src/trait_manager/view/TraitsView.ts

@@ -29,13 +29,14 @@ export default class TraitsView extends DomainViews {
 
     const em = o.editor;
     this.em = em;
-    this.ppfx = config.pStylePrefix || '';
-    this.pfx = this.ppfx + config.stylePrefix || '';
+    const ppfx = config.pStylePrefix || '';
+    this.ppfx = ppfx;
+    this.pfx = ppfx + config.stylePrefix || '';
     this.className = `${this.pfx}traits`;
     this.categories = o.categories || '';
-    this.noCatClass = `${this.ppfx}traits-no-cat`;
-    this.traitContClass = `${this.ppfx}traits-c`;
-    this.catsClass = `${this.ppfx}trait-categories`;
+    this.noCatClass = `${ppfx}traits-no-cat`;
+    this.traitContClass = `${ppfx}traits-c`;
+    this.catsClass = `${ppfx}trait-categories`;
     this.listenTo(em, 'component:toggled', this.updatedCollection);
     this.updatedCollection();
   }
@@ -53,15 +54,6 @@ export default class TraitsView extends DomainViews {
     this.render();
   }
 
-  /**
-   * Add new model to the collection
-   * @param {Model} model
-   * @private
-   */
-  addTo(model: Trait) {
-    this.add(model);
-  }
-
   /**
    * Render new model inside the view
    * @param {Model} model
@@ -136,32 +128,30 @@ export default class TraitsView extends DomainViews {
   }
 
   append(el: HTMLElement | DocumentFragment) {
-    let traits = this.getTraitsEl();
-    traits && traits.appendChild(el);
+    const traits = this.getTraitsEl();
+    traits?.appendChild(el);
   }
 
   render() {
-    const ppfx = this.ppfx;
+    const { ppfx, catsClass, noCatClass, traitContClass } = this;
     const frag = document.createDocumentFragment();
     delete this.catsEl;
     delete this.traitsEl;
     this.renderedCategories = new Map();
     this.el.innerHTML = `
-    <div class="${this.catsClass}"></div>
-    <div class="${this.noCatClass}">
-    <div class="${this.traitContClass}"></div>
-    </div>
+      <div class="${catsClass}"></div>
+        <div class="${noCatClass}">
+        <div class="${traitContClass}"></div>
+      </div>
     `;
-    if (this.collection.length) {
-      this.collection.each(model => this.add(model, frag));
-    }
+
+    this.collection.forEach(model => this.add(model, frag));
     this.append(frag);
-    const cls = `${this.traitContClass}s ${ppfx}one-bg ${ppfx}two-color`;
+    const cls = `${traitContClass}s ${ppfx}one-bg ${ppfx}two-color`;
     this.$el.addClass(cls);
     this.rendered = true;
     return this;
   }
 }
 
-// @ts-ignore
 TraitsView.prototype.itemView = TraitView;