Update canvas config TS

4 years ago · 342fdc9ade
2 changed files with 49 additions and 30 deletions
--- a/src/canvas/config/config.ts
+++ b/src/canvas/config/config.ts
@ -1,63 +1,83 @@
-export default {
-  stylePrefix: 'cv-',
+import Component from '../../dom_components/model/Component';
+
+export interface CanvasConfig {
+  stylePrefix?: string;

-  /*
+  /**
   * Append external scripts to the `<head>` of the iframe.
-   * Be aware that these scripts will not be printed in the export code
+   * Be aware that these scripts will not be printed in the export code.
+   * @default []
   * @example
   * scripts: [ 'https://...1.js', 'https://...2.js' ]
-   * * // or passing objects as attributes
+   * // or passing objects as attributes
   * scripts: [ { src: '/file.js', someattr: 'value' }, ... ]
   */
-  scripts: [],
+  scripts?: (string | Record<string, any>)[];

-  /*
-   * Append external styles to the `<head>` of the iframe
-   * Be aware that these styles will not be printed in the export code
+  /**
+   * Append external styles to the `<head>` of the iframe.
+   * Be aware that these scripts will not be printed in the export code.
+   * @default []
   * @example
   * styles: [ 'https://...1.css', 'https://...2.css' ]
   * // or passing objects as attributes
   * styles: [ { href: '/style.css', someattr: 'value' }, ... ]
   */
-  styles: [],
+  styles?: (string | Record<string, any>)[];

  /**
-   * Add custom badge naming strategy
+   * Add custom badge naming strategy.
   * @example
-   * customBadgeLabel: function(component) {
-   *  return component.getName();
-   * }
+   * customBadgeLabel: component => component.getName(),
   */
-  customBadgeLabel: '',
+  customBadgeLabel?: (component: Component) => string;

  /**
-   * Indicate when to start the auto scroll of the canvas on component/block dragging (value in px )
+   * Indicate when to start the autoscroll of the canvas on component/block dragging (value in px).
+   * @default 50
   */
-  autoscrollLimit: 50,
+  autoscrollLimit?: number;

-  // Experimental: external highlighter box
-  extHl: 0,
+  /**
+   * Experimental: external highlighter box
+   */
+  extHl?: boolean;

  /**
   * Initial content to load in all frames.
   * The default value enables the standard mode for the iframe.
+   * @default '<!DOCTYPE html>'
   */
-  frameContent: '<!DOCTYPE html>',
+  frameContent?: string;

  /**
   * Initial style to load in all frames.
   */
+  frameStyle?: string;
+
+  /**
+   * When some textable component is selected and focused (eg. input or text component), the editor
+   * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).
+   * This option allows to customize, by a selector, which element should not be considered textable.
+   */
+  notTextable?: string[];
+}
+
+const config: CanvasConfig = {
+  stylePrefix: 'cv-',
+  scripts: [],
+  styles: [],
+  customBadgeLabel: undefined,
+  autoscrollLimit: 50,
+  extHl: false,
+  frameContent: '<!DOCTYPE html>',
  frameStyle: `
    body { background-color: #fff }
    * ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) }
    * ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) }
    * ::-webkit-scrollbar { width: 10px }
  `,
-
-  /**
-   * When some textable component is selected and focused (eg. input or text component) the editor
-   * stops some commands (eg. disables the copy/paste of components with CTRL+C/V to allow the copy/paste of the text).
-   * This option allows to customize, by a selector, which element should not be considered textable
-   */
  notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]'],
 };
+
+export default config;
--- a/src/canvas/index.ts
+++ b/src/canvas/index.ts
@ -51,13 +51,13 @@ import { isUndefined } from 'underscore';
 import { Module } from '../abstract';
 import EditorModel from '../editor/model/Editor';
 import { getElement, getViewEl } from '../utils/mixins';
-import defaults from './config/config';
+import defaults, { CanvasConfig } from './config/config';
 import Canvas from './model/Canvas';
 import Frame from './model/Frame';
 import CanvasView from './view/CanvasView';
 import FrameView from './view/FrameView';

-export default class CanvasModule extends Module<typeof defaults> {
+export default class CanvasModule extends Module<CanvasConfig> {
  /**
   * Get configuration object
   * @name getConfig
@ -520,8 +520,7 @@ export default class CanvasModule extends Module<typeof defaults> {
  isInputFocused() {
    const doc = this.getDocument();
    const frame = this.getFrameEl();
-    //console.log(this.config)
-    const toIgnore = ['body', ...this.config.notTextable];
+    const toIgnore = ['body', ...this.config.notTextable!];
    const docActive = frame && document.activeElement === frame;
    const focused = docActive ? doc && doc.activeElement : document.activeElement;