On JavaScript injection in markdown component

Ignition
,
1

Sooo in perspective you got this markdown component to parse markdown and HTML if you check escapeHtml: true. There are some few posts on this feature, I'd like to point some things out as I know someone else will find them useful though.

markdown

  1. Not every javascript event works out and if they do, not all of them as expected. In my script at the bottom of this post onLoad event did not work, for instance.
  2. Whether the script has tab spaces and white spaces do affect its functionality. Sometimes it won't matter, sometimes that'll stop your script from running, so if you are up to try js scripting within this component be prepared to test the exact same script with some extra or less white/tab spaces.
  3. Variables can be assigned and used, but it seems in a limited manner. If you're going to use the DOM to change, modify or use visual properties of components that you cannot modify otherwise (within the designer or project root) you may consider using it as directly as possible instead of defining variables for the sake of readability. Example: may work: document.getElementById(...).innerHtml = document.getElementsByClass(...); may work too, but more likely won't: var test = document.getElementById(...); document.getElementsByClass(...) = test.innerHtml
  4. This scripting has priority over React variables states setting; this means that if a label component, for instance, is changed through a js code within a markdown component no binding will make it behave differently, so this label would ultimately exists and be useful to you from markdown scripting and not the designer anymore.
  5. Arrow functions do not work in the event you want to handle the script on. Instead, use regular functions. However, within this function arrow functions do work. Example: works: onClick="function test() {..}; test();" doesn't work: onClick="()=>{}"

These were my observations. I'm leaving the screenshot of my markdown component and the content of its source prop. If you know JavaScript, have a lot of fun and any feedback, advice or observation is more than welcome :slight_smile:

markdownSource

function test(){
try{var table=document.querySelector('.ia_table.ia_container--secondary');if(table){table.addEventListener('click', () => {document.getElementById('eventValue-val').innerHTML=document.getElementById(document.querySelector('.rowSelectedOverlay~div~[data-column-id=\'eventValue\'] > div > div').innerHTML + 'fc').innerHTML;});}}catch (e) {};
2

Take a look at some of my posts, i do a bunch of stuff with markdown js.
There is a lot more you can do with this.

With some string replace, i fixed the space/tab formatting issues, allowing you to code a bit more cleanly.
Using an img' onload function you can trigger anything screen wide,
With some mutation observers you can trigger stuff on data changes (quite advanced js knowledge required).
With window.__client, you can access perspective properties and even write to them ect.

(ive done a lot of stuff so these are just a few examples)

It can also be used to add some dynamic css to parts of components that otherwise cant be accesed

Not the markdown, but another way to add js in perspective, though i have not really done a lot with this yet

6 Likes