From 37c7c2e42eb4a8700fdaac0868105fcfa647aa68 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Sat, 21 Jan 2023 13:57:16 +0400 Subject: [PATCH] Move ComponentTextView to TS --- src/dom_components/model/types.ts | 2 +- ...ponentTextView.js => ComponentTextView.ts} | 72 +++++++++++-------- src/editor/model/Editor.ts | 3 +- src/rich_text_editor/index.ts | 2 +- src/rich_text_editor/model/RichTextEditor.ts | 1 + 5 files changed, 47 insertions(+), 33 deletions(-) rename src/dom_components/view/{ComponentTextView.js => ComponentTextView.ts} (75%) diff --git a/src/dom_components/model/types.ts b/src/dom_components/model/types.ts index bcc5de83c..55db0b0ac 100644 --- a/src/dom_components/model/types.ts +++ b/src/dom_components/model/types.ts @@ -201,7 +201,7 @@ export interface ComponentModelProperties extends ComponentProperties { [key: string]: any; } -type ComponentAddType = Component | ComponentDefinitionDefined | ComponentDefinitionDefined | string; +type ComponentAddType = Component | ComponentDefinition | ComponentDefinitionDefined | string; export type ComponentAdd = ComponentAddType | ComponentAddType[]; diff --git a/src/dom_components/view/ComponentTextView.js b/src/dom_components/view/ComponentTextView.ts similarity index 75% rename from src/dom_components/view/ComponentTextView.js rename to src/dom_components/view/ComponentTextView.ts index 02a5b5eb6..78b003f86 100644 --- a/src/dom_components/view/ComponentTextView.js +++ b/src/dom_components/view/ComponentTextView.ts @@ -1,10 +1,19 @@ -import { on, off, getModel } from 'utils/mixins'; -import ComponentView from './ComponentView'; import { bindAll } from 'underscore'; - -const compProt = ComponentView.prototype; +import { ObjectAny } from '../../common'; +import RichTextEditorModule from '../../rich_text_editor'; +import RichTextEditor from '../../rich_text_editor/model/RichTextEditor'; +import { getModel, off, on } from '../../utils/mixins'; +import Component from '../model/Component'; +import ComponentText from '../model/ComponentText'; +import { ComponentDefinition } from '../model/types'; +import ComponentView from './ComponentView'; export default class ComponentTextView extends ComponentView { + rte?: RichTextEditorModule; + rteEnabled?: boolean; + activeRte?: RichTextEditor; + lastContent?: string; + events() { return { dblclick: 'onActive', @@ -12,18 +21,18 @@ export default class ComponentTextView extends ComponentView { }; } - initialize(o) { - compProt.initialize.apply(this, arguments); + initialize(props: any) { + super.initialize(props); bindAll(this, 'disableEditing', 'onDisable'); const model = this.model; const em = this.em; this.listenTo(model, 'focus', this.onActive); this.listenTo(model, 'change:content', this.updateContentText); this.listenTo(model, 'sync:content', this.syncContent); - this.rte = em && em.get('RichTextEditor'); + this.rte = em?.RichTextEditor; } - updateContentText(m, v, opts = {}) { + updateContentText(m: any, v: any, opts: { fromDisable?: boolean } = {}) { !opts.fromDisable && this.disableEditing(); } @@ -60,7 +69,7 @@ export default class ComponentTextView extends ComponentView { * Enable element content editing * @private * */ - async onActive(ev) { + async onActive(ev: Event) { const { rte, em } = this; const { result, delegate } = this.canActivate(); @@ -80,13 +89,13 @@ export default class ComponentTextView extends ComponentView { if (rte) { try { - this.activeRte = await rte.enable(this, this.activeRte, { event: ev }); + this.activeRte = await rte.enable(this, this.activeRte!, { event: ev }); } catch (err) { - em.logError(err); + em.logError(err as any); } } - this.toggleEvents(1); + this.toggleEvents(true); } onDisable() { @@ -107,7 +116,7 @@ export default class ComponentTextView extends ComponentView { try { await rte.disable(this, activeRte); } catch (err) { - em.logError(err); + em.logError(err as any); } if (editable && this.getContent() !== this.lastContent) { @@ -125,33 +134,32 @@ export default class ComponentTextView extends ComponentView { */ getContent() { const { activeRte } = this; - const canGetRteContent = activeRte && typeof activeRte.getContent === 'function'; - return canGetRteContent ? activeRte.getContent() : this.getChildrenContainer().innerHTML; + return typeof activeRte?.getContent === 'function' ? activeRte.getContent() : this.getChildrenContainer().innerHTML; } /** * Merge content from the DOM to the model */ - syncContent(opts = {}) { + syncContent(opts: ObjectAny = {}) { const { model, rte, rteEnabled } = this; if (!rteEnabled && !opts.force) return; const content = this.getContent(); const comps = model.components(); - const contentOpt = { fromDisable: 1, ...opts }; + const contentOpt: ObjectAny = { fromDisable: 1, ...opts }; model.set('content', '', contentOpt); // If there is a custom RTE the content is just baked staticly // inside 'content' - if (rte.customRte) { - comps.length && comps.reset(null, opts); + if (rte?.customRte) { + comps.length && comps.reset(undefined, opts); model.set('content', content, contentOpt); } else { comps.resetFromString(content, opts); } } - insertComponent(content, opts = {}) { + insertComponent(content: ComponentDefinition, opts = {}) { const { model, el } = this; const doc = el.ownerDocument; const selection = doc.getSelection(); @@ -160,15 +168,15 @@ export default class ComponentTextView extends ComponentView { const range = selection.getRangeAt(0); const textNode = range.startContainer; const offset = range.startOffset; - const textModel = getModel(textNode); - const newCmps = []; + const textModel = getModel(textNode) as ComponentText; + const newCmps: (ComponentDefinition | Component)[] = []; if (textModel && textModel.is?.('textnode')) { const cmps = textModel.collection; cmps.forEach(cmp => { if (cmp === textModel) { const type = 'textnode'; - const cnt = cmp.get('content'); + const cnt = cmp.get('content') || ''; newCmps.push({ type, content: cnt.slice(0, offset) }); newCmps.push(content); newCmps.push({ type, content: cnt.slice(offset) }); @@ -206,7 +214,7 @@ export default class ComponentTextView extends ComponentView { * @param {Event} * @private * */ - disablePropagation(e) { + disablePropagation(e: Event) { e.stopPropagation(); } @@ -214,11 +222,11 @@ export default class ComponentTextView extends ComponentView { * Enable/Disable events * @param {Boolean} enable */ - toggleEvents(enable) { + toggleEvents(enable?: boolean) { const { em, model, $el } = this; const mixins = { on, off }; const method = enable ? 'on' : 'off'; - em.setEditing(enable ? this : 0); + em.setEditing(enable ? this : false); this.rteEnabled = !!enable; // The ownerDocument is from the frame @@ -231,8 +239,9 @@ export default class ComponentTextView extends ComponentView { model.trigger(`rte:${enable ? 'enable' : 'disable'}`); } - // Avoid closing edit mode on component click - $el && $el.off('mousedown', this.disablePropagation); + // @ts-ignore Avoid closing edit mode on component click + $el?.off('mousedown', this.disablePropagation); + // @ts-ignore $el && $el[method]('mousedown', this.disablePropagation); // Fixes #2210 but use this also as a replacement @@ -243,8 +252,11 @@ export default class ComponentTextView extends ComponentView { while (el) { el.draggable = enable ? !1 : !0; // Note: el.parentNode is sometimes null here - el = el.parentNode; - el && el.tagName == 'BODY' && (el = 0); + el = el.parentNode as HTMLElement; + if (el && el.tagName == 'BODY') { + // @ts-ignore + el = 0; + } } } } diff --git a/src/editor/model/Editor.ts b/src/editor/model/Editor.ts index bfd0e0875..9375d4ef6 100644 --- a/src/editor/model/Editor.ts +++ b/src/editor/model/Editor.ts @@ -36,6 +36,7 @@ import StyleManager from '../../style_manager'; import CssRule from '../../css_composer/model/CssRule'; import { HTMLGeneratorBuildOptions } from '../../code_manager/model/HtmlGenerator'; import { CssGeneratorBuildOptions } from '../../code_manager/model/CssGenerator'; +import ComponentView from '../../dom_components/view/ComponentView'; export interface ProjectData { [key: string]: any; @@ -1027,7 +1028,7 @@ export default class EditorModel extends Model { return (res && res.model) || undefined; } - setEditing(value: boolean) { + setEditing(value: boolean | ComponentView) { this.set('editing', value); return this; } diff --git a/src/rich_text_editor/index.ts b/src/rich_text_editor/index.ts index 11d6a60c9..0c4476b44 100644 --- a/src/rich_text_editor/index.ts +++ b/src/rich_text_editor/index.ts @@ -327,7 +327,7 @@ export default class RichTextEditorModule extends Module string; constructor(em: EditorModel, el: HTMLElement & { _rte?: RichTextEditor }, settings: RichTextEditorOptions = {}) { this.em = em;