refactor(core): turn MaskitoContentEditable class into `maskitoAdap…

…tContentEditable` utility

projects/core/src/index.ts

@@ -1,4 +1,3 @@
-export {MaskitoContentEditable} from './lib/classes';
 export {
     MASKITO_DEFAULT_ELEMENT_PREDICATE,
     MASKITO_DEFAULT_OPTIONS,
@@ -15,6 +14,7 @@ export {
     MaskitoPreprocessor,
 } from './lib/types';
 export {
+    maskitoAdaptContentEditable,
     maskitoInitialCalibrationPlugin,
     maskitoPipe,
     maskitoStrictCompositionPlugin,

projects/core/src/lib/classes/index.ts

@@ -1,3 +1,2 @@
-export {MaskitoContentEditable} from './content-editable';
 export {MaskHistory} from './mask-history';
 export {MaskModel} from './mask-model/mask-model';

projects/core/src/lib/constants/default-element-predicate.ts

@@ -1,8 +1,8 @@
-import {MaskitoContentEditable} from '../classes';
-import type {MaskitoElement, MaskitoElementPredicate} from '../types';
+import type {MaskitoElementPredicate} from '../types';
+import {maskitoAdaptContentEditable} from '../utils';
 
 export const MASKITO_DEFAULT_ELEMENT_PREDICATE: MaskitoElementPredicate = e =>
     e.isContentEditable
-        ? (new MaskitoContentEditable(e) as unknown as MaskitoElement)
+        ? maskitoAdaptContentEditable(e)
         : e.querySelector<HTMLInputElement | HTMLTextAreaElement>('input,textarea') ||
           (e as HTMLInputElement | HTMLTextAreaElement);

projects/core/src/lib/utils/content-editable.ts

@@ -0,0 +1,49 @@
+import {MaskitoElement, TextfieldLike} from '../types';
+import {getContentEditableSelection, setContentEditableSelection} from './index';
+
+class ContentEditableAdapter implements TextfieldLike {
+    public maxLength = Infinity;
+
+    constructor(private readonly element: HTMLElement) {}
+
+    public get value(): string {
+        return this.element.textContent || '';
+    }
+
+    public set value(value) {
+        this.element.textContent = value;
+    }
+
+    public get selectionStart(): number | null {
+        return getContentEditableSelection(this.element)[0];
+    }
+
+    public get selectionEnd(): number | null {
+        return getContentEditableSelection(this.element)[1];
+    }
+
+    public setSelectionRange(from: number | null, to: number | null): void {
+        setContentEditableSelection(this.element, [from || 0, to || 0]);
+    }
+}
+
+export function maskitoAdaptContentEditable(element: HTMLElement): MaskitoElement {
+    const adapter = new ContentEditableAdapter(element);
+
+    return new Proxy(element, {
+        get(target, prop: keyof HTMLElement) {
+            if (prop in adapter) {
+                return adapter[prop as keyof ContentEditableAdapter];
+            }
+
+            const nativeProperty = target[prop];
+
+            return typeof nativeProperty === 'function'
+                ? nativeProperty.bind(target)
+                : nativeProperty;
+        },
+        set(target, prop: keyof HTMLElement, val, receiver) {
+            return Reflect.set(prop in adapter ? adapter : target, prop, val, receiver);
+        },
+    }) as MaskitoElement;
+}

projects/core/src/lib/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './content-editable';
 export * from './dom/event-listener';
 export * from './dom/get-content-editable-selection';
 export * from './dom/history-events';