Amplitude-TypeScript icon indicating copy to clipboard operation
Amplitude-TypeScript copied to clipboard

feat(session replay): added ability to change maskTextFn

Open MYXOMOPX opened this issue 2 years ago • 2 comments

Summary

Allow to change maskTextFn: passes maskTextFn deep down to rrweb

Checklist

  • [x] Does your PR title have the correct title format?
  • Does your PR have a breaking change?: No

MYXOMOPX avatar Apr 15 '24 12:04 MYXOMOPX

Hey there! Thanks for the contribution. I'm implementing something related in (#756). I'd be curious if that solves what you're trying to do here?

lewgordon-amplitude avatar May 24 '24 14:05 lewgordon-amplitude

@lewgordon-amplitude Hi! Actually my idea was to change maskTextFn and check there CSS variable. If on element css-variable value is 1 (f.e. --amplitude-mask: 1) - then mask text. Else - not. With this logic we can use amp-mask, amp-unmask classes and only last one will affect element. So in my example I will be able to do smth like this:

<div class="amp-mask">
    <span>This text is masked</span>
    <div class="amp-unmask">
        This UNmasked
        <span class="amp-mask">Masked</span>
        <input placeholder="Unmasked input"/>
    </div>
</div>

And somewhere in CSS i will place

.amp-mask {
  --amplitude-mask: 1;
}

.amp-unmask {
  --amplitude-mask: 0;
}

Not sure that mask-levels can help in using nested mask/unmask classes. But if you will implement it - i'll be thankful

MYXOMOPX avatar May 31 '24 10:05 MYXOMOPX