diff --git a/src/index.js b/src/index.ts similarity index 72% rename from src/index.js rename to src/index.ts index c8522ffd3..43fa78485 100644 --- a/src/index.js +++ b/src/index.ts @@ -4,30 +4,25 @@ import Editor from './editor'; import polyfills from './utils/polyfills'; import { getGlobal } from './utils/mixins'; import PluginManager from './plugin_manager'; +import { EditorConfig } from './editor/config/config'; + +interface InitEditorConfig extends EditorConfig { + grapesjs?: typeof GrapesJS; +} polyfills(); const plugins = new PluginManager(); -const editors = []; -const defaultConfig = { - // If true renders editor on init - autorender: 1, - - // Array of plugins to init - plugins: [], +const editors: Editor[] = []; - // Custom options for plugins - pluginsOpts: {}, -}; - -export default { +const GrapesJS = { $, editors, plugins, - // Will be replaced on build + // @ts-ignore Will be replaced on build version: __GJS_VERSION__, /** @@ -46,22 +41,29 @@ export default { * style: '.hello{color: red}', * }) */ - init(config = {}) { + init(config: EditorConfig = {}) { const { headless } = config; const els = config.container; if (!els && !headless) throw new Error("'container' is required"); - config = { ...defaultConfig, ...config, grapesjs: this }; - config.el = !headless && (isElement(els) ? els : document.querySelector(els)); - const editor = new Editor(config, { $ }); + const initConfig: InitEditorConfig = { + autorender: true, + plugins: [], + pluginsOpts: {}, + ...config, + grapesjs: this, + el: headless ? undefined : isElement(els) ? els : (document.querySelector(els!) as HTMLElement), + }; + const editor = new Editor(initConfig, { $ }); const em = editor.getModel(); // Load plugins - config.plugins.forEach(pluginId => { + initConfig.plugins!.forEach(pluginId => { let plugin = isFunction(pluginId) ? pluginId : plugins.get(pluginId); - const plgOptions = config.pluginsOpts[pluginId] || {}; + const plgOptions = initConfig.pluginsOpts![pluginId as string] || {}; // Try to search in global context if (!plugin) { + // @ts-ignore const wplg = getGlobal()[pluginId]; plugin = wplg?.default || wplg; } @@ -82,9 +84,11 @@ export default { // A plugin might have extended/added some custom type so this // is a good point to load stuff like components, css rules, etc. em.loadOnStart(); - config.autorender && !headless && editor.render(); + initConfig.autorender && !headless && editor.render(); editors.push(editor); return editor; }, }; + +export default GrapesJS;