JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<!-- 
Code for Import https://scriptui.joonas.me — (Triple click to select): 
{"activeId":38,"items":{"item-0":{"id":0,"type":"Dialog","parentId":false,"style":{"text":"Import Multiple PDF pages","preferredSize":[0,0],"margins":16,"orientation":"row","spacing":10,"alignChildren":["left","top"],"varName":null,"windowType":"Dialog","creationProps":{"su1PanelCoordinates":false,"maximizeButton":false,"minimizeButton":false,"independent":false,"closeButton":true,"borderless":false,"resizeable":false},"enabled":true}},"item-1":{"id":1,"type":"Panel","parentId":20,"style":{"text":"Page Selection","preferredSize":[0,205],"margins":10,"orientation":"column","spacing":10,"alignChildren":["left","top"],"alignment":null,"varName":null,"creationProps":{"borderStyle":"etched","su1PanelCoordinates":false},"enabled":true}},"item-2":{"id":2,"type":"StaticText","parentId":1,"style":{"text":"Import PDF...

JavaScript

<script>function selectAll(e,t){"string"==typeof t&&null===(t=document.querySelector(t))&&console.log("%cMake sure the %cPARENT %cselector is correct!: %c"+e,"font-weight: bold;","color: red;","font-weight: bold;","color: red;");var i=(t||document).querySelectorAll(e);return null===i&&console.log("%cMake sure the %cCHILD %cselector is correct!: %c"+e,"font-weight: bold;","color: red;","font-weight: bold;","color: red;"),[...i]}function select(e,t){"string"==typeof t&&null===(t=document.querySelector(t))&&console.log("%cMake sure the %cPARENT %cselector is correct!: %c"+e,"font-weight: bold;","color: red;","font-weight: bold;","color: red;");var i=(t||document).querySelector(e);return null===i&&console.log("%cMake sure the %cCHILD %cselector is correct!: %c"+e,"font-weight: bold;","color: red;","font-weight: bold;","color: red;"),i}function elementAll(e,t){return selectAll(e,t)}function element(e,t){return select(e,t)}function pickAll(e,t){return selectAll(e,t)}function pick(e,t){return select(e,t)}var SDB={init:function(){for(var e=pickAll('[data-item-type="edittext"]'),t=0;t<e.length;t++){pick(".edit-text-inner-wrap",e[t]).addEventListener("click",function(){pick(".text-container",this).focus()})}},elementGetter:function(e,t,i,n){var a="";if(t){var c="";"string"==typeof t&&(c="name"),"number"==typeof t&&(c="id"),a="[data-item-"+c+'="'+t+'"] > .padding-box > '}return n?selectAll(a+"[data-item-"+i+'="'+e+'"]'):select(a+"[data-item-"+i+'="'+e+'"]')},id:function(e,t){return SDB.elementGetter(e,t,"id")},name:function(e,t){return SDB.elementGetter(e,t,"name")},typeAll:function(e,t){return SDB.elementGetter(e,t,"type","all")},disabled:function(e){return e.classList.contains("disable-item")},disable:{init:function(e){e.classList.add("disable-item"),"edittext"===e.getAttribute("data-item-type")&&select("[contenteditable]",e).setAttribute("contenteditable",!1)},element:function(e){if(Array.isArray(e))for(var t of e)SDB.disable.init(t);else...