Class RichTextEditorModule

packages/core/src/rich_text_editor/index.ts:50–409

const eventsUp = `${CanvasEvents.refresh} frame:scroll ${ComponentsEvents.update}`;

export default class RichTextEditorModule extends Module<RichTextEditorConfig & { pStylePrefix?: string }> {
  pfx: string;
  toolbar!: HTMLElement;
  globalRte?: RichTextEditor;
  actionbar?: HTMLElement;
  lastEl?: HTMLElement;
  actions?: (RichTextEditorAction | string)[];
  customRte?: CustomRTE;
  model: Model<ModelRTE>;
  __dbdTrgCustom: Debounced;
  events = RichTextEditorEvents;

  /**
   * Get configuration object
   * @name getConfig
   * @function
   * @return {Object}
   */

  constructor(em: EditorModel) {
    super(em, 'RichTextEditor', defConfig());
    const { config } = this;
    const ppfx = config.pStylePrefix;

    if (ppfx) {
      config.stylePrefix = ppfx + config.stylePrefix;
    }

    this.pfx = config.stylePrefix!;
    this.actions = config.actions || [];
    const model = new Model();
    this.model = model;
    model.on('change:currentView', this.__trgCustom, this);
    this.__dbdTrgCustom = debounce(() => this.__trgCustom(), 0);
  }

  onLoad() {
    if (!hasWin()) return;
    const { config } = this;
    const ppfx = config.pStylePrefix;
    const isCustom = config.custom;
    const toolbar = createEl('div', {
      class: cx(`${ppfx}rte-toolbar`, !isCustom && `${ppfx}one-bg ${ppfx}rte-toolbar-ui`),
    });
    this.toolbar = toolbar;
    this.initRte(createEl('div'));

    //Avoid closing on toolbar clicking
    on(toolbar, 'mousedown', (e) => e.stopPropagation());
  }

  __trgCustom() {
    const { model, em, events } = this;
    em.trigger(events.custom, {
      enabled: !!model.get('currentView'),
      container: this.getToolbarEl(),
      actions: this.getAll(),
    });