Add options to mask texts (#540)

* feat: add options to mask texts

* feat: add the default mask function

* refactor: rename options to identify the difference between  mask text and mask input

* test: add tests about masking

* doc: add options about masking

* chore: bump up rrweb-snapshot version

src/record/mutation.ts

@@ -6,15 +6,18 @@ import {
   SlimDOMOptions,
   IGNORED_NODE,
   isShadowRoot,
+  needMaskingText,
 } from 'rrweb-snapshot';
 import {
   mutationRecord,
   blockClass,
+  maskTextClass,
   mutationCallBack,
   textCursor,
   attributeCursor,
   removedNodeMutation,
   addedNodeMutation,
+  MaskTextFn,
 } from '../types';
 import {
   mirror,
@@ -159,8 +162,11 @@ export default class MutationBuffer {
   private emissionCallback: mutationCallBack;
   private blockClass: blockClass;
   private blockSelector: string | null;
+  private maskTextClass: maskTextClass;
+  private maskTextSelector: string | null;
   private inlineStylesheet: boolean;
   private maskInputOptions: MaskInputOptions;
+  private maskTextFn: MaskTextFn | undefined;
   private recordCanvas: boolean;
   private slimDOMOptions: SlimDOMOptions;
   private doc: Document;
@@ -172,8 +178,11 @@ export default class MutationBuffer {
     cb: mutationCallBack,
     blockClass: blockClass,
     blockSelector: string | null,
+    maskTextClass: maskTextClass,
+    maskTextSelector: string | null,
     inlineStylesheet: boolean,
     maskInputOptions: MaskInputOptions,
+    maskTextFn: MaskTextFn | undefined,
     recordCanvas: boolean,
     slimDOMOptions: SlimDOMOptions,
     doc: Document,
@@ -182,8 +191,11 @@ export default class MutationBuffer {
   ) {
     this.blockClass = blockClass;
     this.blockSelector = blockSelector;
+    this.maskTextClass = maskTextClass;
+    this.maskTextSelector = maskTextSelector;
     this.inlineStylesheet = inlineStylesheet;
     this.maskInputOptions = maskInputOptions;
+    this.maskTextFn = maskTextFn;
     this.recordCanvas = recordCanvas;
     this.slimDOMOptions = slimDOMOptions;
     this.emissionCallback = cb;
@@ -266,9 +278,12 @@ export default class MutationBuffer {
         map: mirror.map,
         blockClass: this.blockClass,
         blockSelector: this.blockSelector,
+        maskTextClass: this.maskTextClass,
+        maskTextSelector: this.maskTextSelector,
         skipChild: true,
         inlineStylesheet: this.inlineStylesheet,
         maskInputOptions: this.maskInputOptions,
+        maskTextFn: this.maskTextFn,
         slimDOMOptions: this.slimDOMOptions,
         recordCanvas: this.recordCanvas,
         onSerialize: (currentN) => {
@@ -409,7 +424,16 @@ export default class MutationBuffer {
         const value = m.target.textContent;
         if (!isBlocked(m.target, this.blockClass) && value !== m.oldValue) {
           this.texts.push({
-            value,
+            value:
+              needMaskingText(
+                m.target,
+                this.maskTextClass,
+                this.maskTextSelector,
+              ) && value
+                ? this.maskTextFn
+                  ? this.maskTextFn(value)
+                  : value.replace(/[\S]/g, '*')
+                : value,
             node: m.target,
           });
         }