HTML editor: rework quill module integration types (#30563)

Author: aleksei-semikozov

packages/devextreme/js/__internal/ui/html_editor/converters/m_delta.ts

@@ -1,30 +1,40 @@
 import ConverterController from '../m_converterController';
+import type { Delta, QuillInstance } from '../types/quill';
 
 class DeltaConverter {
-  quillInstance: any;
+  quillInstance: QuillInstance | null = null;
 
-  setQuillInstance(quillInstance) {
+  setQuillInstance(quillInstance: QuillInstance): void {
     this.quillInstance = quillInstance;
   }
 
-  toHtml() {
+  toHtml(): string | undefined {
     if (!this.quillInstance) {
-      return;
+      return undefined;
     }
 
     return this._isQuillEmpty()
       ? ''
       : this.quillInstance.getSemanticHTML(0, this.quillInstance.getLength() + 1);
   }
 
-  _isQuillEmpty() {
+  private _isQuillEmpty(): boolean {
+    if (!this.quillInstance) {
+      return true;
+    }
+
     const delta = this.quillInstance.getContents();
 
-    return delta.length() === 1 && this._isDeltaEmpty(delta);
+    return delta.length() === 1 && DeltaConverter._isDeltaEmpty(delta);
   }
 
-  _isDeltaEmpty(delta) {
-    return delta.reduce((__, { insert }) => insert.indexOf('\n') !== -1);
+  private static _isDeltaEmpty(delta: Delta): boolean {
+    return delta.reduce<boolean>((_, operation) => {
+      if (typeof operation.insert === 'string') {
+        return operation.insert.includes('\n');
+      }
+      return false;
+    }, false);
   }
 }
 

packages/devextreme/js/__internal/ui/html_editor/formats/m_align.ts

@@ -1,11 +1,12 @@
 import Quill from 'devextreme-quill';
 
-// eslint-disable-next-line import/no-mutable-exports
-let AlignStyle = {};
+import type { AttributorConstructor } from '../types/quill';
 
-if (Quill) {
-  AlignStyle = Quill.import('attributors/style/align');
-  // @ts-expect-error
+type OptionalAttributor = AttributorConstructor | Record<string, never>;
+
+const AlignStyle: OptionalAttributor = Quill?.import('attributors/style/align') || {};
+
+if (Array.isArray(AlignStyle.whitelist)) {
   AlignStyle.whitelist.push('left');
 }
 

packages/devextreme/js/__internal/ui/html_editor/formats/m_font.ts

@@ -1,11 +1,12 @@
 import Quill from 'devextreme-quill';
 
-// eslint-disable-next-line import/no-mutable-exports
-let FontStyle = {};
+import type { AttributorConstructor } from '../types/quill';
 
-if (Quill) {
-  FontStyle = Quill.import('attributors/style/font');
-  // @ts-expect-error
+type OptionalAttributor = AttributorConstructor | Record<string, never>;
+
+const FontStyle: OptionalAttributor = Quill?.import('attributors/style/font') || {};
+
+if ('whitelist' in FontStyle) {
   FontStyle.whitelist = null;
 }
 

packages/devextreme/js/__internal/ui/html_editor/formats/m_size.ts

@@ -1,11 +1,12 @@
 import Quill from 'devextreme-quill';
 
-// eslint-disable-next-line import/no-mutable-exports
-let SizeStyle = {};
+import type { AttributorConstructor } from '../types/quill';
 
-if (Quill) {
-  SizeStyle = Quill.import('attributors/style/size');
-  // @ts-expect-error
+type OptionalAttributor = AttributorConstructor | Record<string, never>;
+
+const SizeStyle: OptionalAttributor = Quill?.import('attributors/style/size') || {};
+
+if ('whitelist' in SizeStyle) {
   SizeStyle.whitelist = null;
 }
 

packages/devextreme/js/__internal/ui/html_editor/html_editor.ts

@@ -31,8 +31,7 @@ import type { Converter, HtmlEditorFormat, Properties } from '@js/ui/html_editor
 import type { OptionChanged } from '@ts/core/widget/types';
 import type { ValueChangedEvent } from '@ts/ui/editor/editor';
 import Editor from '@ts/ui/editor/editor';
-import type DeltaConverterType from '@ts/ui/html_editor/converters/m_delta';
-import ConverterController from '@ts/ui/html_editor/m_converterController';
+import ConverterController, { type BaseConverter } from '@ts/ui/html_editor/m_converterController';
 import { getQuill } from '@ts/ui/html_editor/m_quill_importer';
 import QuillRegistrator from '@ts/ui/html_editor/m_quill_registrator';
 import getWordMatcher from '@ts/ui/html_editor/matchers/m_wordLists';
@@ -89,7 +88,7 @@ class HtmlEditor extends Editor<Properties> {
 
   _htmlConverter?: Converter;
 
-  _deltaConverter!: DeltaConverterType;
+  _deltaConverter!: BaseConverter;
 
   _updateContentTask?: DeferredObj<unknown> & { abort: () => void };
 
@@ -367,10 +366,11 @@ class HtmlEditor extends Editor<Properties> {
     if (isFunction(customizeModules)) {
       customizeModules(modulesConfig);
     }
+    const { placeholder, readOnly, disabled } = this.option();
 
     this._quillInstance = this._getRegistrator().createEditor(this._$htmlContainer[0], {
-      placeholder: this.option('placeholder'),
-      readOnly: this.option('readOnly') || this.option('disabled'),
+      placeholder,
+      readOnly: Boolean(readOnly) || Boolean(disabled),
       modules: modulesConfig,
       theme: 'basic',
     });
@@ -783,7 +783,7 @@ class HtmlEditor extends Editor<Properties> {
     this._contentInitializedCallback.add(callback);
   }
 
-  register(components: unknown): void {
+  register(components: Record<string, unknown>): void {
     this._getRegistrator().registerModules(components);
 
     if (this._quillInstance) {

packages/devextreme/js/__internal/ui/html_editor/m_converterController.ts

@@ -1,19 +1,29 @@
+import type { QuillInstance } from './types/quill';
+
+interface BaseConverter {
+  setQuillInstance: (quillInstance: QuillInstance) => void;
+  toHtml: () => string | undefined;
+}
+
+type ConverterConstructor = new () => BaseConverter;
+
 class ConverterController {
-  _converters = {};
+  _converters: Record<string, ConverterConstructor> = {};
 
   constructor() {
     this._converters = {};
   }
 
-  addConverter(name, converter) {
+  addConverter(name: string, converter: ConverterConstructor): void {
     this._converters[name] = converter;
   }
 
-  getConverter(name) {
+  getConverter(name: string): ConverterConstructor | undefined {
     return this._converters[name];
   }
 }
 
 const controller = new ConverterController();
 
+export type { BaseConverter, ConverterConstructor };
 export default controller;

packages/devextreme/js/__internal/ui/html_editor/m_quill_importer.ts

@@ -1,10 +1,12 @@
 import Errors from '@js/ui/widget/ui.errors';
 import Quill from 'devextreme-quill';
 
-export function getQuill() {
+import type { QuillStatic } from './types/quill';
+
+export function getQuill(): QuillStatic {
   if (!Quill) {
     throw Errors.Error('E1041', 'Quill');
   }
 
-  return Quill;
+  return Quill as QuillStatic;
 }

packages/devextreme/js/__internal/ui/html_editor/m_quill_registrator.ts

@@ -14,16 +14,12 @@ import TableResizing from './modules/m_tableResizing';
 import Toolbar from './modules/m_toolbar';
 import Variables from './modules/m_variables';
 import BaseTheme from './themes/m_base';
+import type { QuillInstance, QuillOptions, QuillStatic } from './types/quill';
 
 class QuillRegistrator {
-  _customModules: any[] = [];
+  private readonly _customModules: string[] = [];
 
   constructor() {
-    // @ts-expect-error
-    if (QuillRegistrator.initialized) {
-      return;
-    }
-
     const quill = this.getQuill();
     const DirectionStyle = quill.import('attributors/style/direction');
 
@@ -53,21 +49,18 @@ class QuillRegistrator {
     );
 
     this._customModules = [];
-    // @ts-expect-error
-    QuillRegistrator._initialized = true;
   }
 
-  createEditor(container, config) {
-    const quill = this.getQuill();
+  createEditor(container: string | Element, config: QuillOptions): QuillInstance {
+    const QuillConstructor = this.getQuill();
 
-    // eslint-disable-next-line new-cap
-    return new quill(container, config);
+    return new QuillConstructor(container, config);
   }
 
-  registerModules(modulesConfig) {
+  registerModules(modulesConfig: Record<string, unknown>): void {
     const isModule = RegExp('modules/*');
     const quill = this.getQuill();
-    const isRegisteredModule = (modulePath) => !!quill.imports[modulePath];
+    const isRegisteredModule = (modulePath: string): boolean => Boolean(quill.imports[modulePath]);
 
     // eslint-disable-next-line no-restricted-syntax
     for (const modulePath in modulesConfig) {
@@ -79,11 +72,11 @@ class QuillRegistrator {
     quill.register(modulesConfig, true);
   }
 
-  getRegisteredModuleNames() {
+  getRegisteredModuleNames(): string[] {
     return this._customModules;
   }
 
-  getQuill() {
+  getQuill(): QuillStatic {
     return getQuill();
   }
 }