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

Update editor TS

pull/4849/head
Artur Arseniev 4 years ago
parent
0e6455e1eb
commit
e0f434618f
4 changed files with 67 additions and 41 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. 2
      src/code_manager/index.ts
  2. 53
      src/editor/index.ts
  3. 51
      src/editor/model/Editor.ts
  4. 2
      src/editor/model/Selected.ts

2
src/code_manager/index.ts
View File

@ -175,7 +175,7 @@ export default class CodeManagerModule extends Module<CodeManagerConfig & { pSty
* @example * @example
* var codeStr = codeManager.getCode(model, 'html'); * var codeStr = codeManager.getCode(model, 'html');
* */ * */
getCode(model: any, genId: string, opt: any = {}) { getCode(model: any, genId: string, opt: any = {}): string {
opt.em = this.em; opt.em = this.em;
const generator = this.getGenerator(genId); const generator = this.getGenerator(genId);
return generator ? generator.build(model, opt) : ''; return generator ? generator.build(model, opt) : '';

53
src/editor/index.ts
View File

@ -61,7 +61,7 @@ import { CustomParserCss } from '../parser/config/config';
import cash from '../utils/cash-dom'; import cash from '../utils/cash-dom';
import html from '../utils/html'; import html from '../utils/html';
import defaults, { EditorConfig, EditorConfigKeys } from './config/config'; import defaults, { EditorConfig, EditorConfigKeys } from './config/config';
import EditorModel from './model/Editor'; import EditorModel, { ProjectData } from './model/Editor';
import EditorView from './view/EditorView'; import EditorView from './view/EditorView';
export type ParsedRule = { export type ParsedRule = {
@ -73,6 +73,8 @@ export type ParsedRule = {
type EditorConfigType = EditorConfig & { pStylePrefix?: string }; type EditorConfigType = EditorConfig & { pStylePrefix?: string };
type EditorModelParam<T extends keyof EditorModel, N extends number> = Parameters<EditorModel[T]>[N];
export default class EditorModule implements IBaseModule<EditorConfig> { export default class EditorModule implements IBaseModule<EditorConfig> {
editorView?: EditorView; editorView?: EditorView;
editor: EditorModel; editor: EditorModel;
@ -194,6 +196,10 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
return this.em.Devices; return this.em.Devices;
} }
get EditorModel() {
return this.em;
}
/** /**
* Returns configuration object * Returns configuration object
* @returns {any} Returns the configuration object or the value of the specified property * @returns {any} Returns the configuration object or the value of the specified property
@ -212,7 +218,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically) * @param {Boolean} [opts.cleanId=false] Remove unnecessary IDs (eg. those created automatically)
* @returns {string} HTML string * @returns {string} HTML string
*/ */
getHtml(opts?: any) { getHtml(opts?: { component?: Component; cleanId?: boolean }) {
return this.em.getHtml(opts); return this.em.getHtml(opts);
} }
@ -226,7 +232,13 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @param {Boolean} [opts.keepUnusedStyles=false] Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor. * @param {Boolean} [opts.keepUnusedStyles=false] Force keep all defined rules. Toggle on in case output looks different inside/outside of the editor.
* @returns {String|Array<CssRule>} CSS string or array of CssRules * @returns {String|Array<CssRule>} CSS string or array of CssRules
*/ */
getCss(opts?: any) { getCss(opts?: {
component?: Component;
json?: boolean;
avoidProtected?: boolean;
onlyMatched?: boolean;
keepUnusedStyles?: boolean;
}) {
return this.em.getCss(opts); return this.em.getCss(opts);
} }
@ -236,7 +248,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @param {Component} [opts.component] Get the JS of a specific component * @param {Component} [opts.component] Get the JS of a specific component
* @returns {String} JS string * @returns {String} JS string
*/ */
getJs(opts: any) { getJs(opts?: { component?: Component }) {
return this.em.getJs(opts); return this.em.getJs(opts);
} }
@ -245,7 +257,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @return {Components} * @return {Components}
*/ */
getComponents() { getComponents() {
return this.em.get('DomComponents').getComponents(); return this.Components.getComponents();
} }
/** /**
@ -253,7 +265,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @return {Component} * @return {Component}
*/ */
getWrapper() { getWrapper() {
return this.em.get('DomComponents').getWrapper(); return this.Components.getWrapper();
} }
/** /**
@ -270,7 +282,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* content: 'New component' * content: 'New component'
* }); * });
*/ */
setComponents(components: any, opt = {}) { setComponents(components: any, opt: any = {}) {
this.em.setComponents(components, opt); this.em.setComponents(components, opt);
return this; return this;
} }
@ -292,7 +304,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* content: 'New component' * content: 'New component'
* }); * });
*/ */
addComponents(components: any, opts: any) { addComponents(components: any, opts?: any): Component[] {
return this.getWrapper().append(components, opts); return this.getWrapper().append(components, opts);
} }
@ -301,7 +313,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @return {Object} * @return {Object}
*/ */
getStyle() { getStyle() {
return this.em.get('CssComposer').getAll(); return this.em.Css.getAll();
} }
/** /**
@ -316,7 +328,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* style: { color: 'red' } * style: { color: 'red' }
* }); * });
*/ */
setStyle(style: any, opt = {}) { setStyle(style: any, opt: any = {}) {
this.em.setStyle(style, opt); this.em.setStyle(style, opt);
return this; return this;
} }
@ -376,7 +388,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* editor.select(model); * editor.select(model);
* }); * });
*/ */
select(el?: Component | Component[], opts?: any) { select(el?: EditorModelParam<'setSelected', 0>, opts?: { scroll?: boolean }) {
this.em.setSelected(el, opts); this.em.setSelected(el, opts);
return this; return this;
} }
@ -388,7 +400,8 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @example * @example
* editor.selectAdd(model); * editor.selectAdd(model);
*/ */
selectAdd(el: any) { // selectAdd(el: Parameters<EditorModel['addSelected']>[0]) {
selectAdd(el: EditorModelParam<'addSelected', 0>) {
this.em.addSelected(el); this.em.addSelected(el);
return this; return this;
} }
@ -400,7 +413,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @example * @example
* editor.selectRemove(model); * editor.selectRemove(model);
*/ */
selectRemove(el: any) { selectRemove(el: EditorModelParam<'removeSelected', 0>) {
this.em.removeSelected(el); this.em.removeSelected(el);
return this; return this;
} }
@ -412,7 +425,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @example * @example
* editor.selectToggle(model); * editor.selectToggle(model);
*/ */
selectToggle(el: any) { selectToggle(el: EditorModelParam<'toggleSelected', 0>) {
this.em.toggleSelected(el); this.em.toggleSelected(el);
return this; return this;
} }
@ -451,7 +464,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* console.log(device); * console.log(device);
* // 'Tablet' * // 'Tablet'
*/ */
getDevice() { getDevice(): string {
return this.em.get('device'); return this.em.get('device');
} }
@ -464,7 +477,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* editor.runCommand('myCommand', {someValue: 1}); * editor.runCommand('myCommand', {someValue: 1});
*/ */
runCommand(id: string, options: Record<string, unknown> = {}) { runCommand(id: string, options: Record<string, unknown> = {}) {
return this.em.get('Commands').run(id, options); return this.Commands.run(id, options);
} }
/** /**
@ -476,7 +489,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* editor.stopCommand('myCommand', {someValue: 1}); * editor.stopCommand('myCommand', {someValue: 1});
*/ */
stopCommand(id: string, options: Record<string, unknown> = {}) { stopCommand(id: string, options: Record<string, unknown> = {}) {
return this.em.get('Commands').stop(id, options); return this.Commands.stop(id, options);
} }
/** /**
@ -519,7 +532,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @example * @example
* editor.loadProjectData({ pages: [...], styles: [...], ... }) * editor.loadProjectData({ pages: [...], styles: [...], ... })
*/ */
loadProjectData(data: any) { loadProjectData(data: ProjectData) {
return this.em.loadData(data); return this.em.loadData(data);
} }
@ -565,7 +578,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* @param {Object} [options] Options * @param {Object} [options] Options
* @param {Boolean} [options.tools=false] Update the position of tools (eg. rich text editor, component highlighter, etc.) * @param {Boolean} [options.tools=false] Update the position of tools (eg. rich text editor, component highlighter, etc.)
*/ */
refresh(opts?: any) { refresh(opts?: { tools?: boolean }) {
this.em.refreshCanvas(opts); this.em.refreshCanvas(opts);
} }
@ -652,7 +665,7 @@ export default class EditorModule implements IBaseModule<EditorConfig> {
* // options, as arguments, eg: * // options, as arguments, eg:
* // editor.on('log:info', (msg, opts) => console.info(msg, opts)) * // editor.on('log:info', (msg, opts) => console.info(msg, opts))
*/ */
log(msg: string, opts = {}) { log(msg: string, opts: { ns?: string; level?: string } = {}) {
this.em.log(msg, opts); this.em.log(msg, opts);
return this; return this;
} }

51
src/editor/model/Editor.ts
View File

@ -33,6 +33,11 @@ import UndoManagerModule from '../../undo_manager';
import RichTextEditorModule from '../../rich_text_editor'; import RichTextEditorModule from '../../rich_text_editor';
import CommandsModule from '../../commands'; import CommandsModule from '../../commands';
import StyleManager from '../../style_manager'; import StyleManager from '../../style_manager';
import CssRule from '../../css_composer/model/CssRule';
export interface ProjectData {
[key: string]: any;
}
//@ts-ignore //@ts-ignore
Backbone.$ = $; Backbone.$ = $;
@ -588,7 +593,7 @@ export default class EditorModel extends Model {
* @param {Object} [opts={}] Options, optional * @param {Object} [opts={}] Options, optional
* @public * @public
*/ */
addSelected(el: Component, opts: any = {}) { addSelected(el: Component | Component[], opts: any = {}) {
const model = getModel(el, $); const model = getModel(el, $);
const models = isArray(model) ? model : [model]; const models = isArray(model) ? model : [model];
@ -618,7 +623,7 @@ export default class EditorModel extends Model {
* @param {Object} [opts={}] Options, optional * @param {Object} [opts={}] Options, optional
* @public * @public
*/ */
removeSelected(el: any, opts = {}) { removeSelected(el: Component | Component[], opts = {}) {
this.selected.removeComponent(getModel(el, $), opts); this.selected.removeComponent(getModel(el, $), opts);
} }
@ -628,7 +633,7 @@ export default class EditorModel extends Model {
* @param {Object} [opts={}] Options, optional * @param {Object} [opts={}] Options, optional
* @public * @public
*/ */
toggleSelected(el: any, opts = {}) { toggleSelected(el: Component | Component[], opts: any = {}) {
const model = getModel(el, $); const model = getModel(el, $);
const models = isArray(model) ? model : [model]; const models = isArray(model) ? model : [model];
@ -725,7 +730,7 @@ export default class EditorModel extends Model {
* @returns {Array<CssRule>} * @returns {Array<CssRule>}
* @public * @public
*/ */
addStyle(style: any, opts = {}) { addStyle(style: any, opts = {}): CssRule[] {
const res = this.getStyle().add(style, opts); const res = this.getStyle().add(style, opts);
return isArray(res) ? res : [res]; return isArray(res) ? res : [res];
} }
@ -736,7 +741,7 @@ export default class EditorModel extends Model {
* @private * @private
*/ */
getStyle() { getStyle() {
return this.get('CssComposer').getAll(); return this.Css.getAll();
} }
/** /**
@ -763,7 +768,7 @@ export default class EditorModel extends Model {
* @returns {string} HTML string * @returns {string} HTML string
* @public * @public
*/ */
getHtml(opts: any = {}) { getHtml(opts: { component?: Component; cleanId?: boolean } = {}): string {
const { config } = this; const { config } = this;
const { optsHtml } = config; const { optsHtml } = config;
const js = config.jsInHtml ? this.getJs(opts) : ''; const js = config.jsInHtml ? this.getJs(opts) : '';
@ -784,17 +789,25 @@ export default class EditorModel extends Model {
* @returns {string} CSS string * @returns {string} CSS string
* @public * @public
*/ */
getCss(opts: any = {}) { getCss(
const config = this.config; opts: {
component?: Component;
json?: boolean;
avoidProtected?: boolean;
onlyMatched?: boolean;
keepUnusedStyles?: boolean;
} = {}
) {
const { config } = this;
const { optsCss } = config; const { optsCss } = config;
const avoidProt = opts.avoidProtected; const avoidProt = opts.avoidProtected;
const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles; const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles;
const cssc = this.get('CssComposer'); const cssc = this.get('CssComposer');
const wrp = opts.component || this.get('DomComponents').getComponent(); const wrp = opts.component || this.Components.getComponent();
const protCss = !avoidProt ? config.protectedCss : ''; const protCss = !avoidProt ? config.protectedCss : '';
const css = const css =
wrp && wrp &&
this.get('CodeManager').getCode(wrp, 'css', { this.CodeManager.getCode(wrp, 'css', {
cssc, cssc,
keepUnusedStyles, keepUnusedStyles,
...optsCss, ...optsCss,
@ -808,9 +821,9 @@ export default class EditorModel extends Model {
* @return {string} JS string * @return {string} JS string
* @public * @public
*/ */
getJs(opts: any = {}) { getJs(opts: { component?: Component } = {}) {
var wrp = opts.component || this.get('DomComponents').getWrapper(); var wrp = opts.component || this.Components.getWrapper();
return wrp ? this.get('CodeManager').getCode(wrp, 'js').trim() : ''; return wrp ? this.CodeManager.getCode(wrp, 'js').trim() : '';
} }
/** /**
@ -819,7 +832,7 @@ export default class EditorModel extends Model {
*/ */
async store(options?: any) { async store(options?: any) {
const data = this.storeData(); const data = this.storeData();
await this.get('StorageManager').store(data, options); await this.Storage.store(data, options);
this.clearDirtyCount(); this.clearDirtyCount();
return data; return data;
} }
@ -829,12 +842,12 @@ export default class EditorModel extends Model {
* @public * @public
*/ */
async load(options?: any) { async load(options?: any) {
const result = await this.get('StorageManager').load(options); const result = await this.Storage.load(options);
this.loadData(result); this.loadData(result);
return result; return result;
} }
storeData() { storeData(): ProjectData {
let result = {}; let result = {};
// Sync content if there is an active RTE // Sync content if there is an active RTE
const editingCmp = this.getEditing(); const editingCmp = this.getEditing();
@ -846,7 +859,7 @@ export default class EditorModel extends Model {
return JSON.parse(JSON.stringify(result)); return JSON.parse(JSON.stringify(result));
} }
loadData(data = {}) { loadData(data: ProjectData = {}): ProjectData {
if (!isEmptyObj(data)) { if (!isEmptyObj(data)) {
this.storables.forEach(module => module.clear()); this.storables.forEach(module => module.clear());
this.storables.forEach(module => module.load(data)); this.storables.forEach(module => module.load(data));
@ -1015,9 +1028,9 @@ export default class EditorModel extends Model {
hasWin() && $(config.el).empty().attr(this.attrsOrig); hasWin() && $(config.el).empty().attr(this.attrsOrig);
} }
getEditing() { getEditing(): Component | undefined {
const res = this.get('editing'); const res = this.get('editing');
return (res && res.model) || null; return (res && res.model) || undefined;
} }
setEditing(value: boolean) { setEditing(value: boolean) {

2
src/editor/model/Selected.ts
View File

@ -27,7 +27,7 @@ export default class Selected extends Collection<Selectable> {
lastComponent() { lastComponent() {
const last = this.last(); const last = this.last();
return last && this.getComponent(last); return last ? this.getComponent(last) : undefined;
} }
allComponents() { allComponents() {

Write Preview
Loading…
Cancel
Save