tsai
/
grapesjs
mirror of https://github.com/artf/grapesjs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Update canvas config TS

pull/4695/head
Artur Arseniev 4 years ago
parent
b2ca2da88e
commit
342fdc9ade
2 changed files with 49 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      src/canvas/config/config.ts
  2. 7
      src/canvas/index.ts

72
src/canvas/config/config.js → src/canvas/config/config.ts
View File

@ -1,63 +1,83 @@
export default { import Component from '../../dom_components/model/Component';
stylePrefix: 'cv-',
export interface CanvasConfig {
stylePrefix?: string;
/* /**
* Append external scripts to the `<head>` of the iframe. * 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 * @example
* scripts: [ 'https://...1.js', 'https://...2.js' ] * scripts: [ 'https://...1.js', 'https://...2.js' ]
* * // or passing objects as attributes * // or passing objects as attributes
* scripts: [ { src: '/file.js', someattr: 'value' }, ... ] * scripts: [ { src: '/file.js', someattr: 'value' }, ... ]
*/ */
scripts: [], scripts?: (string | Record<string, any>)[];
/* /**
* Append external styles to the `<head>` of the iframe * Append external styles to the `<head>` of the iframe.
* Be aware that these styles will not be printed in the export code * Be aware that these scripts will not be printed in the export code.
* @default []
* @example * @example
* styles: [ 'https://...1.css', 'https://...2.css' ] * styles: [ 'https://...1.css', 'https://...2.css' ]
* // or passing objects as attributes * // or passing objects as attributes
* styles: [ { href: '/style.css', someattr: 'value' }, ... ] * styles: [ { href: '/style.css', someattr: 'value' }, ... ]
*/ */
styles: [], styles?: (string | Record<string, any>)[];
/** /**
* Add custom badge naming strategy * Add custom badge naming strategy.
* @example * @example
* customBadgeLabel: function(component) { * customBadgeLabel: component => component.getName(),
* return 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. * Initial content to load in all frames.
* The default value enables the standard mode for the iframe. * 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. * 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: ` frameStyle: `
body { background-color: #fff } body { background-color: #fff }
* ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) } * ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1) }
* ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) } * ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) }
* ::-webkit-scrollbar { width: 10px } * ::-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]'], notTextable: ['button', 'a', 'input[type=checkbox]', 'input[type=radio]'],
}; };
export default config;

7
src/canvas/index.ts
View File

@ -51,13 +51,13 @@ import { isUndefined } from 'underscore';
import { Module } from '../abstract'; import { Module } from '../abstract';
import EditorModel from '../editor/model/Editor'; import EditorModel from '../editor/model/Editor';
import { getElement, getViewEl } from '../utils/mixins'; import { getElement, getViewEl } from '../utils/mixins';
import defaults from './config/config'; import defaults, { CanvasConfig } from './config/config';
import Canvas from './model/Canvas'; import Canvas from './model/Canvas';
import Frame from './model/Frame'; import Frame from './model/Frame';
import CanvasView from './view/CanvasView'; import CanvasView from './view/CanvasView';
import FrameView from './view/FrameView'; import FrameView from './view/FrameView';
export default class CanvasModule extends Module<typeof defaults> { export default class CanvasModule extends Module<CanvasConfig> {
/** /**
* Get configuration object * Get configuration object
* @name getConfig * @name getConfig
@ -520,8 +520,7 @@ export default class CanvasModule extends Module<typeof defaults> {
isInputFocused() { isInputFocused() {
const doc = this.getDocument(); const doc = this.getDocument();
const frame = this.getFrameEl(); 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 docActive = frame && document.activeElement === frame;
const focused = docActive ? doc && doc.activeElement : document.activeElement; const focused = docActive ? doc && doc.activeElement : document.activeElement;

Write Preview
Loading…
Cancel
Save