{"uuid":"04828854-74f6-11ee-92e2-ab811bcae565","page":{"id":204045704,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"isFetching\",false,\"plugins\",[\"~#iOM\",[\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"uuid\",null,\"type\",\"frame\",\"subtype\",\"Frame\",\"namespace\",null,\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^3\",[\"type\",\"main\",\"sticky\",false,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",false,\"paddingType\",\"normal\"]],\"style\",[\"^3\",[]],\"position2\",null,\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"container\",\"\",\"createdAt\",\"~m1668698597560\",\"updatedAt\",\"~m1698431082703\",\"folder\",\"\",\"screen\",null]]],\"listView1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"listView1\",\"^4\",\"b164114e-db62-4f4f-af85-beead864c310\",\"^5\",\"widget\",\"^6\",\"ListViewWidget\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"heightType\",\"auto\",\"layoutType\",\"list\",\"marginType\",\"normal\",\"showBorder\",true,\"data\",\"\",\"paddingType\",\"normal\",\"showDropShadow\",true,\"formDataKey\",\"{{ self.id }}\",\"itemWidth\",\"\",\"dynamicHeightsEnabled\",true,\"numColumns\",\"3\",\"itemHeight\",\"3\",\"overflowType\",\"scroll\",\"instances\",\"{{ length.value }}\",\"direction\",\"vertical\"]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",2,\"col\",3,\"height\",5,\"width\",6,\"tabNum\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698431069318\",\"^B\",\"~m1698431261595\",\"^C\",\"\",\"^D\",null]]],\"customComponent2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customComponent2\",\"^4\",\"f7619090-7731-4f34-ac56-db0f85e461ce\",\"^5\",\"widget\",\"^6\",\"CustomComponentWidget\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{body: 'foo'}\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"UTF-8\\\" />\\n    <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" />\\n    <style>\\n      /* Added CSS for the button */\\n      .red-button {\\n        background-color: red;\\n        color: white; /* White text color */\\n        padding: 10px 20px; /* Some padding for better appearance */\\n        border: none; /* Remove default borders */\\n        cursor: pointer; /* Hand cursor on hover */\\n        border-radius: 5px; /* Rounded corners */\\n        font-size: 16px; /* Increase font size */\\n        transition: background-color 0.3s; /* Smooth transition effect */\\n      }\\n\\n      .red-button:hover {\\n        background-color: darkred; /* Darker red on hover */\\n      }\\n    </style>\\n  </head>\\n  <body>\\n    <p><div id=\\\"editor\\\"></div></p>\\n    <p><div>\\n      <!-- Added the class to the button -->\\n      <button class=\\\"red-button\\\" onclick=\\\"window.Retool.triggerQuery('query2')\\\">Trigger query</button>\\n    </div></p>\\n    <script type=\\\"text/javascript\\\">\\n      function saveBodyInModel() {\\n        // Ensure you've initialized 'quill' somewhere if you're using it\\n        // window.Retool.modelUpdate({ body: quill.root.innerHTML });\\n        // window.Retool.triggerQuery(\\\"update_stanza_body\\\");\\n      }\\n      \\n      window.Retool.subscribe(function (model) {\\n        document.getElementById('editor').innerText = model.body; \\n      });\\n    </script>\\n  </body>\\n</html>\\n\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"listView1\",\"^E\",\"body\",\"^F\",\"\",\"row\",0,\"col\",0,\"^G\",4,\"^H\",12,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698431159222\",\"^B\",\"~m1698433825319\",\"^C\",\"\",\"^D\",null]]],\"button1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"button1\",\"^4\",\"6bfdd556-649b-4b96-b4d1-4b5348cb2cac\",\"^5\",\"widget\",\"^6\",\"ButtonWidget2\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"horizontalAlign\",\"stretch\",\"clickable\",false,\"iconAfter\",\"\",\"submitTargetId\",null,\"marginType\",\"normal\",\"hidden\",false,\"text\",\"Button\",\"showInEditor\",false,\"tooltipText\",\"\",\"styleVariant\",\"solid\",\"submit\",false,\"iconBefore\",\"\",\"events\",[\"~#iL\",[[\"^3\",[\"event\",\"click\",\"type\",\"datasource\",\"method\",\"trigger\",\"pluginId\",\"write\",\"targetId\",null,\"params\",[\"^3\",[]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"loading\",false,\"loaderPosition\",\"auto\",\"disabled\",false,\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",17.6,\"col\",3,\"^G\",1,\"^H\",3,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698565308253\",\"^B\",\"~m1698856662693\",\"^C\",\"\",\"^D\",null]]],\"fooo\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"fooo\",\"^4\",null,\"^5\",\"state\",\"^6\",\"State\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"_persistedValueGetter\",null,\"_persistedValueSetter\",null,\"persistValue\",false,\"persistedValueKey\",\"\",\"value\",\"\\\"\\\"\"]],\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698565322683\",\"^B\",\"~m1698864943428\",\"^C\",\"\",\"^D\",null]]],\"write\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"write\",\"^4\",null,\"^5\",\"datasource\",\"^6\",\"JavascriptQuery\",\"^7\",null,\"^8\",\"JavascriptQuery\",\"^9\",null,\"^:\",[\"^3\",[\"queryRefreshTime\",\"\",\"streamResponse\",false,\"lastReceivedFromResourceAt\",null,\"queryDisabledMessage\",\"\",\"servedFromCache\",false,\"offlineUserQueryInputs\",\"\",\"successMessage\",\"\",\"queryDisabled\",\"\",\"playgroundQuerySaveId\",\"latest\",\"workflowParams\",null,\"resourceNameOverride\",\"\",\"runWhenModelUpdates\",false,\"workflowRunId\",null,\"showFailureToaster\",true,\"query\",\"customComponent3.updateModel({state: new Date().getTime()});\\nfooo.setValue(customComponent3.model.body)\\n//setTimeout(() => fooo.setValue(customComponent3.model.body), 10000); //doesnt work either\",\"playgroundQueryUuid\",\"\",\"playgroundQueryId\",null,\"error\",null,\"workflowRunBodyType\",\"raw\",\"privateParams\",[\"^J\",[]],\"runWhenPageLoadsDelay\",\"\",\"data\",null,\"importedQueryInputs\",[\"^3\",[]],\"_additionalScope\",[\"^J\",[]],\"isImported\",false,\"showSuccessToaster\",true,\"cacheKeyTtl\",\"\",\"requestSentTimestamp\",null,\"metadata\",null,\"workflowActionType\",null,\"queryRunTime\",null,\"changesetObject\",\"\",\"errorTransformer\",\"// The variable 'data' allows you to reference the request's data in the transformer. \\n// example: return data.find(element => element.isError)\\nreturn data.error\",\"finished\",null,\"confirmationMessage\",null,\"isFetching\",false,\"changeset\",\"\",\"rawData\",null,\"queryTriggerDelay\",\"0\",\"resourceTypeOverride\",null,\"watchedParams\",[\"^J\",[]],\"enableErrorTransformer\",false,\"showLatestVersionUpdatedWarning\",false,\"timestamp\",0,\"importedQueryDefaults\",[\"^3\",[]],\"enableTransformer\",false,\"showUpdateSetValueDynamicallyToggle\",true,\"overrideOrgCacheForUserCache\",false,\"runWhenPageLoads\",false,\"transformer\",\"// Query results are available as the `data` variable\\nreturn data\",\"events\",[\"^J\",[]],\"isMultiplayerEdited\",false,\"queryTimeout\",\"10000\",\"workflowId\",null,\"requireConfirmation\",false,\"queryFailureConditions\",\"\",\"changesetIsObject\",false,\"enableCaching\",false,\"allowedGroups\",[\"^J\",[]],\"workflowBlockPluginId\",null,\"offlineQueryType\",\"None\",\"queryThrottleTime\",\"750\",\"updateSetValueDynamically\",true,\"notificationDuration\",\"\"]],\"^;\",null,\"^<\",null,\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698565386650\",\"^B\",\"~m1698865076006\",\"^C\",\"\",\"^D\",null]]],\"text1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"text1\",\"^4\",\"03a24c37-5e9b-4d9f-982a-84999bb3fc56\",\"^5\",\"widget\",\"^6\",\"TextWidget2\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"heightType\",\"auto\",\"horizontalAlign\",\"left\",\"marginType\",\"normal\",\"hidden\",false,\"imageWidth\",\"fit\",\"showInEditor\",false,\"verticalAlign\",\"center\",\"tooltipText\",\"\",\"value\",\"model.body is {{customComponent3.model.body}}\\n\\nfooo value is {{fooo.value}}\",\"disableMarkdown\",false,\"overflowType\",\"scroll\",\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",16.8,\"col\",3,\"^G\",0.6,\"^H\",3,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698862429793\",\"^B\",\"~m1698864961470\",\"^C\",\"\",\"^D\",null]]],\"customComponent3\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"customComponent3\",\"^4\",\"2b2665ff-c6ab-4ecc-a025-3afa269ec3c0\",\"^5\",\"widget\",\"^6\",\"CustomComponentWidget\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{body:  \\\"\\\", state: {{new Date().getTime()}} }\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<!DOCTYPE html>\\n<html lang=\\\"en\\\">\\n  <head>\\n    <meta charset=\\\"UTF-8\\\" />\\n    <meta http-equiv=\\\"X-UA-Compatible\\\" content=\\\"IE=edge\\\" />\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\" />\\n    <link\\n      href=\\\"https://cdn.quilljs.com/1.3.7/quill.snow.css\\\"\\n      rel=\\\"stylesheet\\\"\\n    />\\n    <script src=\\\"https://cdn.quilljs.com/1.3.7/quill.js\\\"></script>\\n  </head>\\n  <body>\\n    <div id=\\\"editor\\\" style=\\\"height: 200px; font-size: 16px\\\"></div>\\n    <script type=\\\"text/javascript\\\">\\n\\n      let toolbarOptions = [\\n        [{ header: [1, 2, 3, 4, 5, false] }],\\n        [\\\"bold\\\", \\\"italic\\\", \\\"underline\\\"],\\n\\n        [{ direction: \\\"rtl\\\" }],\\n      ];\\n      function saveBodyInModel() {\\n        window.Retool.modelUpdate({ body: quill.root.innerHTML });\\n      }\\n      let quill = new Quill(\\\"#editor\\\", {\\n        history: {\\n          delay: 2000,\\n          maxStack: 150,\\n        },\\n        modules: {\\n          toolbar: toolbarOptions,\\n        },\\n        theme: \\\"snow\\\",\\n      });\\n      let state = new Date().getTime();\\n      window.Retool.subscribe(function (model) {\\n        if(model.state > state){\\n          saveBodyInModel();\\n          state = model.state;\\n        }\\n      });\\n    </script>\\n  </body>\\n</html>\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",12.8,\"col\",3,\"^G\",4,\"^H\",5,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1698864803479\",\"^B\",\"~m1698867147251\",\"^C\",\"\",\"^D\",null]]]]],\"^A\",null,\"version\",\"3.18.0\",\"appThemeId\",null,\"appThemeName\",null,\"appMaxWidth\",\"1560px\",\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[],\"testEntities\",[],\"tests\",[],\"appStyles\",\"\",\"responsiveLayoutDisabled\",false,\"loadingIndicatorsDisabled\",false,\"urlFragmentDefinitions\",[\"^J\",[]],\"pageLoadValueOverrides\",[\"^J\",[]],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"isGlobalWidget\",false,\"isMobileApp\",false,\"isFormApp\",false,\"shortlink\",null,\"multiScreenMobileApp\",false,\"mobileAppSettings\",[\"^ \",\"mobileOfflineModeEnabled\",false],\"folders\",[\"^J\",[]],\"queryStatusVisibility\",false,\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalFeatures\",[\"^ \",\"sourceControlTemplateDehydration\",false,\"multiplayerEditingEnabled\",false,\"disableMultiplayerEditing\",false],\"experimentalDataTabEnabled\",true,\"customComponentCollections\",[]]]]"},"changesRecord":[{"type":"WIDGET_TEMPLATE_UPDATE","payload":{"plugin":{"id":"customComponent3","type":"widget","uuid":"2b2665ff-c6ab-4ecc-a025-3afa269ec3c0","style":{},"folder":"","subtype":"CustomComponentWidget","template":{"model":"{body:  \"\", state: {{new Date().getTime()}} }","allowForms":false,"heightType":"fixed","iframeCode":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link\n      href=\"https://cdn.quilljs.com/1.3.7/quill.snow.css\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.quilljs.com/1.3.7/quill.js\"></script>\n  </head>\n  <body>\n    <div id=\"editor\" style=\"height: 200px; font-size: 16px\"></div>\n    <script type=\"text/javascript\">\n      var DirectionAttribute = Quill.import(\"attributors/attribute/direction\");\n      Quill.register(DirectionAttribute, true);\n      var AlignClass = Quill.import(\"attributors/class/align\");\n      Quill.register(AlignClass, true);\n      var BackgroundClass = Quill.import(\"attributors/class/background\");\n      Quill.register(BackgroundClass, true);\n      var ColorClass = Quill.import(\"attributors/class/color\");\n      Quill.register(ColorClass, true);\n      var DirectionClass = Quill.import(\"attributors/class/direction\");\n      Quill.register(DirectionClass, true);\n      var FontClass = Quill.import(\"attributors/class/font\");\n      Quill.register(FontClass, true);\n      var SizeClass = Quill.import(\"attributors/class/size\");\n      Quill.register(SizeClass, true);\n      var AlignStyle = Quill.import(\"attributors/style/align\");\n      Quill.register(AlignStyle, true);\n      var BackgroundStyle = Quill.import(\"attributors/style/background\");\n      Quill.register(BackgroundStyle, true);\n      var ColorStyle = Quill.import(\"attributors/style/color\");\n      Quill.register(ColorStyle, true);\n      var DirectionStyle = Quill.import(\"attributors/style/direction\");\n      Quill.register(DirectionStyle, true);\n      var FontStyle = Quill.import(\"attributors/style/font\");\n      Quill.register(FontStyle, true);\n      var SizeStyle = Quill.import(\"attributors/style/size\");\n      Quill.register(SizeStyle, true);\n\n      let toolbarOptions = [\n        [{ header: [1, 2, 3, 4, 5, false] }],\n        [\"bold\", \"italic\", \"underline\"],\n\n        [{ direction: \"rtl\" }],\n      ];\n      function saveBodyInModel() {\n        window.Retool.modelUpdate({ body: quill.root.innerHTML });\n        document.getElementsByClassName(\"ql-container\")[0].style.height =\n          (quill.root.innerHTML.match(/<p/g).length < 4\n            ? 4\n            : quill.root.innerHTML.match(/<p/g).length) *\n            50 +\n          \"px\";\n      }\n      let quill = new Quill(\"#editor\", {\n        history: {\n          delay: 2000,\n          maxStack: 150,\n        },\n        modules: {\n          toolbar: toolbarOptions,\n        },\n        theme: \"snow\",\n      });\n      quill.on(\"text-change\", function (delta, oldDelta, source) {\n        if (source === \"user\") {\n         // saveBodyInModel();\n        }\n      });\n      let state = new Date().getTime();\n      window.Retool.subscribe(function (model) {\n        if(model.state > state){\n          saveBodyInModel();\n          state = model.state;\n        }\n        else if(quill.root.innerHTML !== model.body){\n          \n          let body = model.body || \"\";\n          // quill.clipboard.dangerouslyPasteHTML(model.body);\n          // let delta = quill.clipboard.convert(body);\n          // quill.setContents(delta, 'api');\n          // let location = quill.getSelection();\n          // quill.setSelection(location.index);\n          // if(location){\n          //   setTimeout(() => quill.setSelection(location.index), 1);\n            \n          // }\n          // quill.setText((new Date()).toString())\n        }\n      });\n    </script>\n  </body>\n</html>\n<!-- \n  - have another property in the Model eg model.state (datetime),\n  - when clicking the + or the delete buttons:\n      for j in customcomponent1\n        customcomponent1[j].setIn([customComponent1[j], model, state], new DateTime())\n    in customcomponent1 subscribe and saveBodyInModel\n  - then do add or delete\n -->","allowCamera":false,"allowModals":false,"allowPopups":false,"allowPayment":false,"allowDownloads":false,"allowFullscreen":false,"allowMicrophone":false,"allowSameOrigin":false,"allowGeolocation":false,"allowTopNavigation":false,"allowPopupsToEscapeSandbox":false},"container":"","createdAt":"2023-11-01T18:53:23.479Z","position2":{"col":3,"row":12.8,"width":5,"height":4,"tabNum":0,"rowGroup":"body","container":"","subcontainer":""},"updatedAt":"2023-11-01T18:53:48.895Z"},"update":{"iframeCode":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <link\n      href=\"https://cdn.quilljs.com/1.3.7/quill.snow.css\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.quilljs.com/1.3.7/quill.js\"></script>\n  </head>\n  <body>\n    <div id=\"editor\" style=\"height: 200px; font-size: 16px\"></div>\n    <script type=\"text/javascript\">\n\n      let toolbarOptions = [\n        [{ header: [1, 2, 3, 4, 5, false] }],\n        [\"bold\", \"italic\", \"underline\"],\n\n        [{ direction: \"rtl\" }],\n      ];\n      function saveBodyInModel() {\n        window.Retool.modelUpdate({ body: quill.root.innerHTML });\n      }\n      let quill = new Quill(\"#editor\", {\n        history: {\n          delay: 2000,\n          maxStack: 150,\n        },\n        modules: {\n          toolbar: toolbarOptions,\n        },\n        theme: \"snow\",\n      });\n      let state = new Date().getTime();\n      window.Retool.subscribe(function (model) {\n        if(model.state > state){\n          saveBodyInModel();\n          state = model.state;\n        }\n      });\n    </script>\n  </body>\n</html>"},"widgetId":"customComponent3","shouldRecalculateTemplate":true},"isUserTriggered":true}],"gitSha":null,"checksum":null,"createdAt":"2023-11-01T19:32:29.554Z","updatedAt":"2023-11-01T19:32:29.554Z","pageId":2543633,"userId":null,"branchId":null,"page":{"name":"Custom Component Bug"}},"modules":{}}