Add PanelsConfig

src/panels/config/config.js → src/panels/config/config.ts

@@ -7,10 +7,32 @@ const obl = 'open-blocks';
 const ful = 'fullscreen';
 const prv = 'preview';
 
-export default {
-  stylePrefix: 'pn-',
+interface ButtonProps {
+  id?: string;
+  active?: boolean;
+  togglable?: boolean;
+  className?: string;
+  command?: string | (() => any);
+  context?: string;
+  attributes?: Record<string, any>;
+}
+
+interface PanelProps {
+  id?: string;
+  buttons?: ButtonProps[];
+}
+
+export interface PanelsConfig {
+  stylePrefix?: string;
+
+  /**
+   * Default panels.
+   */
+  defaults?: PanelProps[];
+}
 
-  // Default panels fa-sliders for features
+const config: PanelsConfig = {
+  stylePrefix: 'pn-',
   defaults: [
     {
       id: 'commands',
@@ -57,37 +79,33 @@ export default {
           className: 'fa fa-paint-brush',
           command: osm,
           active: true,
-          togglable: 0,
+          togglable: false,
           attributes: { title: 'Open Style Manager' },
         },
         {
           id: otm,
           className: 'fa fa-cog',
           command: otm,
-          togglable: 0,
+          togglable: false,
           attributes: { title: 'Settings' },
         },
         {
           id: ola,
           className: 'fa fa-bars',
           command: ola,
-          togglable: 0,
+          togglable: false,
           attributes: { title: 'Open Layer Manager' },
         },
         {
           id: obl,
           className: 'fa fa-th-large',
           command: obl,
-          togglable: 0,
+          togglable: false,
           attributes: { title: 'Open Blocks' },
         },
       ],
     },
   ],
-
-  // Editor model
-  em: null,
-
-  // Delay before show children buttons (in milliseconds)
-  delayBtnsShow: 300,
 };
+
+export default config;

src/panels/index.ts

@@ -1,5 +1,5 @@
 /**
- * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js)
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.ts)
  * ```js
  * const editor = grapesjs.init({
  *  panels: {
@@ -27,13 +27,12 @@
  */
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
-import defaults from './config/config';
-import Button from './model/Button';
+import defaults, { PanelsConfig } from './config/config';
 import Panel from './model/Panel';
 import Panels from './model/Panels';
 import PanelsView from './view/PanelsView';
 
-export default class PanelManager extends Module<typeof defaults> {
+export default class PanelManager extends Module<PanelsConfig> {
   //config = {};
   panels: Panels;
   PanelsViewObj?: PanelsView;
@@ -45,7 +44,7 @@ export default class PanelManager extends Module<typeof defaults> {
    */
   constructor(em: EditorModel) {
     super(em, 'Panels', defaults);
-    this.panels = new Panels(this, this.config.defaults);
+    this.panels = new Panels(this, this.config.defaults!);
     for (var name in defaults) {
       //@ts-ignore
       if (!(name in this.config)) this.config[name] = defaults[name];