Move editor config to TS

src/editor/config/config.ts

@@ -1,151 +1,462 @@
-export default {
+import { AssetManagerConfig } from '../../asset_manager/config/config';
-  // Style prefix
+import { BlockManagerConfig } from '../../block_manager/config/config';
-  stylePrefix: 'gjs-',
+import { CanvasConfig } from '../../canvas/config/config';
+import { CodeManagerConfig } from '../../code_manager/config/config';
+import { CssComposerConfig } from '../../css_composer/config/config';
+import { DeviceManagerConfig } from '../../device_manager/config/config';
+import { I18nConfig } from '../../i18n/config';
+import { ParserConfig } from '../../parser/config/config';
+import { RichTextEditorConfig } from '../../rich_text_editor/config/config';
+import { UndoManagerConfig } from '../../undo_manager/config';
+
+type AnyObject = Record<string, any>;
+
+export interface EditorConfig {
+  /**
+   * Style class name prefix.
+   * @default 'gjs-'
+   */
+  stylePrefix?: string;
+
+  /**
+   * Selector which indicates where render the editor.
+   */
+  container?: string | HTMLElement;
+
+  /**
+   * If true, auto-render the content
+   * @default true
+   */
+  autorender?: boolean;
+
+  /**
+   * Array of plugins to execute on start.
+   * @default []
+   */
+  plugins?: (string | Plugin)[];
+
+  /**
+   * Custom options for plugins
+   * @default {}
+   */
+  pluginsOpts?: Record<string, any>;
+
+  /**
+   * Init headless editor.
+   * @default false
+   */
+  headless?: boolean;
+
+  /**
+   * Initial project data (JSON containing your components/styles/etc) to load.
+   */
+  projectData?: AnyObject;
 
   /**
    * HTML string or object of components
    * @deprecated Rely on `projectData` option
+   * @default ''
    */
-  components: '',
+  components?: string;
 
   /**
    * CSS string or object of rules
    * @deprecated Rely on `projectData` option
+   * @default ''
    */
-  style: '',
+  style?: string;
 
   /**
-   * If true, will fetch HTML and CSS from selected container
+   * If true, will fetch HTML and CSS from the selected container.
    * @deprecated
+   * @default false
    */
-  fromElement: false,
+  fromElement?: boolean;
 
   /**
-   * Initial project data
+   * Show an alert before unload the page with unsaved changes
+   * @default true
    */
-  projectData: null,
+  noticeOnUnload?: boolean;
 
-  // Show an alert before unload the page with unsaved changes
+  /**
-  noticeOnUnload: true,
+   * Show paddings and margins.
-
+   * @default false
-  // Show paddings and margins
+   */
-  showOffsets: false,
+  showOffsets?: boolean;
 
-  // Show paddings and margins on selected component
+  /**
-  showOffsetsSelected: false,
+   * Show paddings and margins on selected component
+   * @default false
+   */
+  showOffsetsSelected?: boolean;
 
-  // On creation of a new Component (via object), if the 'style' attribute is not
+  /**
-  // empty, all those roles will be moved in its new class
+   * On creation of a new Component (via object), if the 'style' attribute is not
-  forceClass: true,
+   * empty, all those roles will be moved in its new class.
+   * @default true
+   */
+  forceClass?: boolean;
 
-  // Height for the editor container
+  /**
-  height: '900px',
+   * Height for the editor container
+   * @default '900px'
+   */
+  height?: string;
 
-  // Width for the editor container
+  /**
-  width: '100%',
+   * Width for the editor container
+   * @default '100%'
+   */
+  width?: string;
 
-  // Type of logs to print with the logger (by default is used the devtool console).
+  /**
-  // Available by default: debug, info, warning, error
+   * Type of logs to print with the logger (by default is used the devtool console).
-  // You can use `false` to disable all of them or `true` to print all of them
+   * Available by default: debug, info, warning, error.
-  log: ['warning', 'error'],
+   * You can use `false` to disable all of them or `true` to print all of them.
+   * @default ['warning', 'error']
+   */
+  log?: ('debug' | 'info' | 'warning' | 'error')[];
 
   /**
+   * By default Grapes injects base CSS into the canvas. For example, it sets body margin to 0
+   * and sets a default background color of white. This CSS is desired in most cases.
+   * use this property if you wish to overwrite the base CSS to your own CSS. This is most
+   * useful if for example your template is not based off a document with 0 as body margin.
    * @deprecated in favor of `config.canvas.frameStyle`
+   * @default ''
    */
-  baseCss: '',
+  baseCss?: string;
 
-  // CSS that could only be seen (for instance, inside the code viewer)
+  /**
-  protectedCss: '* { box-sizing: border-box; } body {margin: 0;}',
+   * CSS that could only be seen (for instance, inside the code viewer)
+   * @default '* { box-sizing: border-box; } body {margin: 0;}'
+   */
+  protectedCss?: string;
 
-  // CSS for the iframe which containing the canvas, useful if you need to custom something inside
+  /**
-  // (eg. the style of the selected component)
+   * CSS for the iframe which containing the canvas, useful if you need to customize
-  canvasCss: '',
+   * something inside (eg. the style of the selected component).
+   * @default ''
+   */
+  canvasCss?: string;
 
-  // Default command
+  /**
-  defaultCommand: 'select-comp',
+   * Default command
+   * @default 'select-comp'
+   */
+  defaultCommand?: string;
 
-  // Show a toolbar when the component is selected
+  /**
-  showToolbar: true,
+   * Show a toolbar when the component is selected
+   * @default true
+   */
+  showToolbar?: boolean;
 
   // Allow script tag importing
   // @deprecated in favor of `config.parser.optionsHtml.allowScripts`
   // allowScripts: 0,
 
-  // If true render a select of available devices
+  /**
-  showDevices: true,
+   * If true render a select of available devices
+   * @default true
+   */
+  showDevices?: boolean;
 
-  // When enabled, on device change media rules won't be created
+  /**
-  devicePreviewMode: false,
+   * When enabled, on device change media rules won't be created
+   * @default false
+   */
+  devicePreviewMode?: boolean;
 
-  // THe condition to use for media queries, eg. 'max-width'
+  /**
-  // Comes handy for mobile-first cases
+   * The condition to use for media queries, eg. 'max-width'.
-  mediaCondition: 'max-width',
+   * Comes handy for mobile-first cases.
+   * @default 'max-width'
+   */
+  mediaCondition?: string;
 
-  // Starting tag for variable inside scripts in Components
+  /**
-  tagVarStart: '{[ ',
+   * Starting tag for variable inside scripts in Components
+   * @deprecated Rely on 'script-props' https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
+   * @default '{[ '
+   */
+  tagVarStart?: string;
 
-  // Ending tag for variable inside scripts in Components
+  /**
-  tagVarEnd: ' ]}',
+   * Ending tag for variable inside scripts in Components
+   * @deprecated Rely on 'script-props' https://grapesjs.com/docs/modules/Components-js.html#passing-properties-to-scripts
+   * @default ' ]}'
+   */
+  tagVarEnd?: string;
 
-  // When false, removes empty text nodes when parsed, unless they contain a space
+  /**
-  keepEmptyTextNodes: false,
+   * When false, removes empty text nodes when parsed, unless they contain a space.
+   * @default false
+   */
+  keepEmptyTextNodes?: boolean;
 
-  // Return JS of components inside HTML from 'editor.getHtml()'
+  /**
-  jsInHtml: true,
+   * Return JS of components inside HTML from 'editor.getHtml()'.
+   * @default true
+   */
+  jsInHtml?: boolean;
 
-  // Enable native HTML5 drag and drop
+  /**
-  nativeDnD: true,
+   * Enable native HTML5 drag and drop.
+   * @default true
+   */
+  nativeDnD?: boolean;
 
-  // Enable multiple selection
+  /**
-  multipleSelection: true,
+   * Enable multiple component selection.
+   * @default true
+   */
+  multipleSelection?: boolean;
 
-  // Pass default available options wherever `editor.getHtml()` is called
+  // TODO
-  optsHtml: {},
+  /**
+   * Pass default available options wherever `editor.getHtml()` is called.
+   * @default {}
+   */
+  optsHtml?: Record<string, any>;
+  /**
+   * Pass default available options wherever `editor.getCss()` is called
+   * @default {}
+   */
+  optsCss?: Record<string, any>;
 
-  // Pass default available options wherever `editor.getCss()` is called
+  /**
-  optsCss: {},
+   * Usually when you update the `style` of the component this changes the
+   * element's `style` attribute. Unfortunately, inline styling doesn't allow
+   * use of media queries (@media) or even pseudo selectors (eg. :hover).
+   * When `avoidInlineStyle` is true all styles are inserted inside the css rule
+   * @deprecated Don't use this option, we don't support inline styling anymore.
+   */
+  avoidInlineStyle?: boolean;
 
-  // Usually when you update the `style` of the component this changes the
+  /**
-  // element's `style` attribute. Unfortunately, inline styling doesn't allow
+   * Avoid default properties from storable JSON data, like `components` and `styles`.
-  // use of media queries (@media) or even pseudo selectors (eg. :hover).
+   * With this option enabled your data will be smaller (usefull if need to
-  // When `avoidInlineStyle` is true all styles are inserted inside the css rule
+   * save some storage space).
-  // @deprecated Don't use this option, we don't support inline styling anymore
+   * @default true
-  avoidInlineStyle: true,
+   */
+  avoidDefaults?: boolean;
 
-  // Avoid default properties from storable JSON data, like `components` and `styles`.
+  /**
-  // With this option enabled your data will be smaller (usefull if need to
+   * (experimental)
-  // save some storage space)
+   * The structure of components is always on the screen but it's not the same
-  avoidDefaults: true,
+   * for style rules. When you delete a component you might leave a lot of styles
+   * which will never be used again, therefore they might be removed.
+   * With this option set to true, styles not used from the CSS generator (so in
+   * any case where `CssGenerator.build` is used) will be removed automatically.
+   * But be careful, not always leaving the style not used mean you wouldn't
+   * use it later, but this option comes really handy when deal with big templates.
+   * @default false
+   */
+  clearStyles?: boolean;
 
-  // (experimental)
+  /**
-  // The structure of components is always on the screen but it's not the same
+   * Specify the global drag mode of components. By default, components are moved
-  // for style rules. When you delete a component you might leave a lot of styles
+   * following the HTML flow. Two other options are available:
-  // which will never be used again, therefore they might be removed.
+   * 'absolute' - Move components absolutely (design tools way)
-  // With this option set to true, styles not used from the CSS generator (so in
+   * 'translate' - Use translate CSS from transform property
-  // any case where `CssGenerator.build` is used) will be removed automatically.
+   * To get more about this feature read: https://github.com/artf/grapesjs/issues/1936.
-  // But be careful, not always leaving the style not used mean you wouldn't
+   */
-  // use it later, but this option comes really handy when deal with big templates.
+  dragMode?: 'translate' | 'absolute';
-  clearStyles: false,
 
-  // Specify the global drag mode of components. By default, components are moved
+  /**
-  // following the HTML flow. Two other options are available:
+   * When the editor is placed in a scrollable container (eg. modals) this might
-  // 'absolute' - Move components absolutely (design tools way)
+   * cause elements inside the canvas (eg. floating toolbars) to be misaligned.
-  // 'translate' - Use translate CSS from transform property
+   * To avoid that, you can specify an array of DOM elements on which their scroll will
-  // To get more about this feature read: https://github.com/artf/grapesjs/issues/1936
+   * trigger the canvas update.
-  dragMode: 0,
+   * Be default, if the array is empty, the first parent element will be appended.
-
+   * listenToEl: [document.querySelector('#scrollable-el')],
-  // When the editor is placed in a scrollable container (eg. modals) this might
+   * @default []
-  // cause elements inside the canvas (eg. floating toolbars) to be misaligned.
+   * */
-  // To avoid that, you can specify an array of DOM elements on which their scroll will
+  listenToEl?: HTMLElement[];
-  // trigger the canvas update.
-  // Be default, if the array is empty, the first parent element will be appended.
-  // listenToEl: [document.querySelector('#scrollable-el')],
-  listenToEl: [],
 
-  // Import asynchronously CSS to use as icons
+  /**
-  cssIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
+   * Import asynchronously CSS to use as icons.
+   * @default 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
+   * */
+  cssIcons?: string;
+
+  /**
+   * Experimental: don't use.
+   * Editor icons
+   */
+  icons?: AnyObject;
+
+  /**
+   * Configurations for I18n.
+   */
+  i18n?: I18nConfig;
+
+  /**
+   * Configurations for Undo Manager
+   */
+  undoManager?: UndoManagerConfig | boolean;
+
+  /**
+   * Configurations for Asset Manager.
+   */
+  assetManager?: AssetManagerConfig | boolean;
+
+  /**
+   * Configurations for Canvas.
+   */
+  canvas?: CanvasConfig | boolean;
+
+  // TODO
+  /**
+   * Configurations for Layers.
+   */
+  layers?: AnyObject | boolean;
+
+  // TODO
+  /**
+   * Configurations for Storage Manager.
+   */
+  storageManager?: AnyObject | boolean;
+
+  /**
+   * Configurations for Rich Text Editor.
+   */
+  richTextEditor?: RichTextEditorConfig;
+
+  // TODO
+  /**
+   * Configurations for DomComponents
+   */
+  domComponents?: AnyObject;
+
+  // TODO
+  /**
+   * Configurations for Modal Dialog.
+   */
+  modal?: AnyObject | boolean;
+
+  /**
+   * Configurations for Code Manager.
+   */
+  codeManager?: CodeManagerConfig;
+
+  // TODO
+  /**
+   * Configurations for Panels.
+   */
+  panels?: AnyObject;
+
+  // TODO
+  /**
+   * Configurations for Commands.
+   */
+  commands?: AnyObject;
+
+  /**
+   * Configurations for Css Composer.
+   */
+  cssComposer?: CssComposerConfig;
+
+  // TODO
+  /**
+   * Configurations for Selector Manager.
+   */
+  selectorManager?: AnyObject;
+
+  /**
+   * Configurations for Device Manager.
+   */
+  deviceManager?: DeviceManagerConfig;
+
+  // TODO
+  /**
+   * Configurations for Style Manager.
+   */
+  styleManager?: AnyObject;
+
+  // TODO
+  /**
+   * Configurations for Block Manager.
+   */
+  blockManager?: BlockManagerConfig | boolean;
+
+  // TODO
+  /**
+   * Configurations for Trait Manager.
+   */
+  traitManager?: AnyObject;
+
+  // TODO
+  /**
+   * Configurations for Page Manager.
+   */
+  pageManager?: AnyObject;
+
+  // TODO
+  /**
+   * Configurations for Layer Manager.
+   */
+  layerManager?: AnyObject;
+
+  /**
+   * Configurations for Parser module.
+   */
+  parser?: ParserConfig;
+
+  /** Texts **/
+  textViewCode?: string;
+
+  /**
+   * Keep unused styles within the editor.
+   * @default false
+   */
+  keepUnusedStyles?: boolean;
+
+  /**
+   * Experimental: don't use.
+   * Avoid default UI styles.
+   */
+  customUI?: boolean;
+  el?: HTMLElement;
+  multiFrames?: boolean;
+}
 
-  // Experimental: don't use.
+const config: EditorConfig = {
+  stylePrefix: 'gjs-',
+  components: '',
+  style: '',
+  fromElement: false,
+  projectData: undefined,
+  noticeOnUnload: true,
+  showOffsets: false,
+  showOffsetsSelected: false,
+  forceClass: true,
+  height: '900px',
+  width: '100%',
+  log: ['warning', 'error'],
+  baseCss: '',
+  protectedCss: '* { box-sizing: border-box; } body {margin: 0;}',
+  canvasCss: '',
+  defaultCommand: 'select-comp',
+  showToolbar: true,
+  showDevices: true,
+  devicePreviewMode: false,
+  mediaCondition: 'max-width',
+  tagVarStart: '{[ ',
+  tagVarEnd: ' ]}',
+  keepEmptyTextNodes: false,
+  jsInHtml: true,
+  nativeDnD: true,
+  multipleSelection: true,
+  optsHtml: {},
+  optsCss: {},
+  avoidInlineStyle: true,
+  avoidDefaults: true,
+  clearStyles: false,
+  listenToEl: [],
+  cssIcons: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css',
   icons: {
     close:
       '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"></path></svg>',
@@ -163,74 +474,28 @@ export default {
     eyeOff:
       '<svg viewBox="0 0 24 24"><path fill="currentColor" d="M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z" /></svg>',
   },
-
-  // Dom element
-  el: '',
-
-  // Configurations for I18n
   i18n: {},
-
-  // Configurations for Undo Manager
   undoManager: {},
-
-  //Configurations for Asset Manager
   assetManager: {},
-
-  //Configurations for Canvas
   canvas: {},
-
-  //Configurations for Layers
   layers: {},
-
-  //Configurations for Storage Manager
   storageManager: {},
-
-  //Configurations for Rich Text Editor
   richTextEditor: {},
-
-  //Configurations for DomComponents
   domComponents: {},
-
-  //Configurations for Modal Dialog
   modal: {},
-
-  //Configurations for Code Manager
   codeManager: {},
-
-  //Configurations for Panels
   panels: {},
-
-  //Configurations for Commands
   commands: {},
-
-  //Configurations for Css Composer
   cssComposer: {},
-
-  //Configurations for Selector Manager
   selectorManager: {},
-
-  //Configurations for Device Manager
   deviceManager: {},
-
-  //Configurations for Style Manager
   styleManager: {},
-
-  // Configurations for Block Manager
   blockManager: {},
-
-  // Configurations for Trait Manager
   traitManager: {},
-
-  // Texts
   textViewCode: 'Code',
-
-  // Keep unused styles within the editor
   keepUnusedStyles: false,
-
-  // TODO
   multiFrames: false,
-
-  // Experimental: don't use.
-  // Avoid default UI styles
   customUI: false,
 };
+
+export default config;

src/utils/mixins.ts

@@ -1,4 +1,5 @@
 import { keys, isUndefined, isElement, isArray } from 'underscore';
+import EditorModel from '../editor/model/Editor';
 
 export const isDef = (value: any) => typeof value !== 'undefined';
 
@@ -13,8 +14,7 @@ const elProt = hasWin() ? window.Element.prototype : {};
 // @ts-ignore
 const matches = elProt.matches || elProt.webkitMatchesSelector || elProt.mozMatchesSelector || elProt.msMatchesSelector;
 
-// @ts-ignore
+export const getUiClass = (em: EditorModel, defCls: string) => {
-export const getUiClass = (em, defCls) => {
   const { stylePrefix, customUI } = em.getConfig();
   return [customUI && `${stylePrefix}cui`, defCls].filter(i => i).join(' ');
 };