Add record option maskInputFn for custom mask input function (#409)

src/record/index.ts

@@ -37,6 +37,7 @@ function record<T = eventWithTime>(
     inlineStylesheet = true,
     maskAllInputs,
     maskInputOptions: _maskInputOptions,
+    maskInputFn,
     hooks,
     packFn,
     sampling = {},
@@ -293,6 +294,7 @@ function record<T = eventWithTime>(
             blockClass,
             ignoreClass,
             maskInputOptions,
+            maskInputFn,
             inlineStylesheet,
             sampling,
             recordCanvas,

src/record/observer.ts

@@ -35,6 +35,7 @@ import {
   canvasMutationCallback,
   fontCallback,
   fontParam,
+  MaskInputFn,
 } from '../types';
 import MutationBuffer from './mutation';
 
@@ -223,6 +224,7 @@ function initInputObserver(
   blockClass: blockClass,
   ignoreClass: string,
   maskInputOptions: MaskInputOptions,
+  maskInputFn: MaskInputFn | undefined,
   sampling: SamplingStrategy,
 ): listenerHandler {
   function eventHandler(event: Event) {
@@ -252,7 +254,11 @@ function initInputObserver(
       ] ||
       maskInputOptions[type as keyof MaskInputOptions]
     ) {
-      text = '*'.repeat(text.length);
+      if(maskInputFn) {
+        text = maskInputFn(text)
+      } else {
+        text = '*'.repeat(text.length);
+      }
     }
     cbWithDedup(target, { text, isChecked });
     // if a radio was checked
@@ -593,6 +599,7 @@ export function initObservers(
     o.blockClass,
     o.ignoreClass,
     o.maskInputOptions,
+    o.maskInputFn,
     o.sampling,
   );
   const mediaInteractionHandler = initMediaInteractionObserver(

src/types.ts

@@ -174,6 +174,7 @@ export type recordOptions<T> = {
   ignoreClass?: string;
   maskAllInputs?: boolean;
   maskInputOptions?: MaskInputOptions;
+  maskInputFn?: MaskInputFn;
   inlineStylesheet?: boolean;
   hooks?: hooksParam;
   packFn?: PackFn;
@@ -195,6 +196,7 @@ export type observerParam = {
   blockClass: blockClass;
   ignoreClass: string;
   maskInputOptions: MaskInputOptions;
+  maskInputFn?: MaskInputFn;
   inlineStylesheet: boolean;
   styleSheetRuleCb: styleSheetRuleCallback;
   canvasMutationCb: canvasMutationCallback;
@@ -461,3 +463,5 @@ export enum ReplayerEvents {
   Flush = 'flush',
   StateChange = 'state-change',
 }
+
+export type MaskInputFn = (text: string) => string;