diff --git a/src/canvas/config/config.js b/src/canvas/config/config.ts similarity index 55% rename from src/canvas/config/config.js rename to src/canvas/config/config.ts index ac36ef9f2..baf78e90f 100644 --- a/src/canvas/config/config.js +++ 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 `` 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)[]; - /* - * Append external styles to the `` of the iframe - * Be aware that these styles will not be printed in the export code + /** + * Append external styles to the `` 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)[]; /** - * 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 '' */ - frameContent: '', + 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: '', 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; diff --git a/src/canvas/index.ts b/src/canvas/index.ts index ff6c4c189..a08d26d48 100644 --- 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 { +export default class CanvasModule extends Module { /** * Get configuration object * @name getConfig @@ -520,8 +520,7 @@ export default class CanvasModule extends Module { 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;