CodeEditorDemo.json

{"uuid":"91af22b0-9548-11ee-bd8a-f77d23459a43","page":{"id":216600679,"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\",null,\"paddingType\",\"normal\",\"enableFullBleed\",false,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",false]],\"style\",[\"^3\",[]],\"position2\",null,\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"container\",\"\",\"createdAt\",\"~m1701984946485\",\"updatedAt\",\"~m1701984946485\",\"folder\",\"\",\"screen\",null]]],\"codeEditor\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"codeEditor\",\"^4\",\"39a68fb8-220c-4d42-be4b-e9a532d355bb\",\"^5\",\"widget\",\"^6\",\"CustomComponentWidget\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"allowTopNavigation\",false,\"heightType\",\"fixed\",\"allowDownloads\",false,\"allowFullscreen\",false,\"allowForms\",false,\"model\",\"{\\n  \\\"code\\\": \\\"Deno.serve(req => new Response(\\\\\\\"Hello, world!\\\\\\\"));\\\",\\n}\",\"allowCamera\",false,\"allowModals\",false,\"allowPopups\",false,\"iframeCode\",\"<script \\n  src=\\\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.js\\\" \\n  integrity=\\\"sha512-rdFIN28+neM8H8zNsjRClhJb1fIYby2YCNmoqwnqBDEvZgpcp7MJiX8Wd+Oi6KcJOMOuvGztjrsI59rly9BsVQ==\\\" \\n  crossorigin=\\\"anonymous\\\" \\n  referrerpolicy=\\\"no-referrer\\\">\\n</script>\\n<script \\n  src=\\\"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/javascript/javascript.min.js\\\" \\n  integrity=\\\"sha512-Cbz+kvn+l5pi5HfXsEB/FYgZVKjGIhOgYNBwj4W2IHP2y8r3AdyDCQRnEUqIQ+6aJjygKPTyaNT2eIihaykJlw==\\\" \\n  crossorigin=\\\"anonymous\\\" \\n  referrerpolicy=\\\"no-referrer\\\">\\n</script>\\n\\n<style>\\n@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.css');\\n@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/theme/eclipse.min.css');\\n\\nhtml, body {\\n  height: 100%;\\n  width: 100%;\\n  overflow: hidden;\\n  padding: 0;\\n  margin: 0;\\n  box-sizing: border-box;\\n}\\n\\nhtml {\\n  border: 1px solid #d1d1d1;\\n  border-radius: 4px;\\n}\\n\\nbody {\\n  padding: 0 4px;\\n}\\n\\n.CodeMirror {\\n  height: auto;\\n}\\n</style>\\n\\n<script>\\nlet codeEditor = null;\\nlet mostRecentCode = \\\"\\\";\\n\\n// Init a CodeMirror editor (with timeouts to ensure scripts are loaded first)\\nfunction createEditor() {\\n  if (!CodeMirror) {\\n    setTimeout(createEditor, 50);\\n  } else {\\n    // Initialize code editor\\n    codeEditor = CodeMirror(document.body, {\\n      value: \\\"// Initializing...\\\",\\n      mode: \\\"javascript\\\",\\n      tabSize: 2,\\n      lineNumbers: true\\n    });\\n    \\n    codeEditor.on(\\\"change\\\", () => {\\n      mostRecentCode = codeEditor.getValue();\\n      window.Retool.modelUpdate({\\n        code: mostRecentCode\\n      });\\n    });\\n  }\\n}\\n\\n// Set the contents of the CodeMirror editor (with timeouts to ensure the\\n// editor has been created first)\\nfunction setCode(code) {\\n  if (!codeEditor) {\\n    // If code editor is not initialized, wait and retry\\n    setTimeout(() => {\\n      setCode(code);\\n    }, 60);\\n  } else {\\n    codeEditor.setValue(code);\\n  }\\n}\\n\\n// Subscribe for updates from the Retool host page\\nwindow.Retool.subscribe(function(model) {\\n  // If the model hasn't been initialized yet, ignore\\n  if (!model) return;\\n  \\n  // Set code in editor if available\\n  if (model.code !== mostRecentCode) {\\n    mostRecentCode = model.code;\\n    setCode(model.code);\\n  }\\n});\\n\\n// Run initial load for the code editor\\ncreateEditor();\\n</script>\",\"allowMicrophone\",false,\"allowSameOrigin\",false,\"allowPopupsToEscapeSandbox\",false,\"allowPayment\",false,\"allowGeolocation\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",0,\"col\",0,\"height\",10,\"width\",7,\"tabNum\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1701984954087\",\"^B\",\"~m1701984971530\",\"^C\",\"\",\"^D\",null]]],\"html1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"html1\",\"^4\",\"65d72108-4ab8-4fd0-8cbe-4bf49baf2d05\",\"^5\",\"widget\",\"^6\",\"HTMLWidget\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"clickable\",false,\"css\",\"\",\"marginType\",\"normal\",\"hidden\",false,\"html\",\"<h4>Editor code</h4>\\n<pre>{{ codeEditor.model.code }}</pre>\",\"showInEditor\",false,\"tooltipText\",\"\",\"events\",[\"^3\",[]],\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",1.1999999999999975,\"col\",7,\"^G\",0.2,\"^H\",5,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1701985047674\",\"^B\",\"~m1701985150545\",\"^C\",\"\",\"^D\",null]]],\"button1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"button1\",\"^4\",\"42faeddd-2e81-4b19-84fc-8b1b88ae8b4c\",\"^5\",\"widget\",\"^6\",\"ButtonWidget2\",\"^7\",null,\"^8\",null,\"^9\",null,\"^:\",[\"^3\",[\"horizontalAlign\",\"stretch\",\"clickable\",false,\"iconAfter\",\"\",\"submitTargetId\",null,\"marginType\",\"normal\",\"hidden\",false,\"text\",\"Reset Code\",\"showInEditor\",false,\"tooltipText\",\"\",\"styleVariant\",\"solid\",\"submit\",false,\"iconBefore\",\"\",\"events\",[\"~#iL\",[[\"^3\",[\"event\",\"click\",\"type\",\"widget\",\"method\",\"updateModel\",\"pluginId\",\"codeEditor\",\"targetId\",null,\"params\",[\"^3\",[\"model\",\"{ code: 'Deno.serve(req => new Response(\\\"Hello, world!\\\"));' }\"]],\"waitType\",\"debounce\",\"waitMs\",\"0\"]]]],\"loading\",false,\"loaderPosition\",\"auto\",\"disabled\",false,\"maintainSpaceWhenHidden\",false]],\"^;\",[\"^3\",[]],\"^<\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^@\",\"\",\"^E\",\"body\",\"^F\",\"\",\"row\",0.1999999999999993,\"col\",7,\"^G\",1,\"^H\",2,\"^I\",0]]],\"^=\",null,\"^>\",null,\"^?\",null,\"^@\",\"\",\"^A\",\"~m1701985210297\",\"^B\",\"~m1701985360220\",\"^C\",\"\",\"^D\",null]]]]],\"^A\",null,\"version\",\"3.25.0\",\"appThemeId\",null,\"appThemeName\",null,\"appMaxWidth\",\"100%\",\"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\",false,\"multiScreenMobileApp\",false,\"mobileAppSettings\",[\"^ \",\"mobileOfflineModeEnabled\",false,\"mobileOfflineModeDelaySync\",false,\"mobileOfflineModeBannerMode\",\"default\",\"displaySetting\",[\"^ \",\"landscapeMode\",false,\"tabletMode\",false]],\"folders\",[\"^J\",[]],\"queryStatusVisibility\",false,\"markdownLinkBehavior\",\"auto\",\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"rootScreen\",null,\"instrumentationEnabled\",false,\"experimentalFeatures\",[\"^ \",\"sourceControlTemplateDehydration\",false,\"multiplayerEditingEnabled\",false,\"disableMultiplayerEditing\",false],\"experimentalDataTabEnabled\",true,\"customComponentCollections\",[],\"savePlatform\",\"web\"]]]"},"changesRecord":[{"type":"WIDGET_REPOSITION2","payload":{"moves":[{"move":{"col":7,"row":-49,"width":0,"height":0,"rowGroup":"body","container":"","subcontainer":""},"screen":{"descendentIds":[]},"moveType":"drag","widgetIds":["button1"],"widgetTypes":["ButtonWidget2"]},{"move":{"row":5,"height":0},"widgetIds":["html1"]}],"largeScreen":true},"hideChangelogEntry":false}],"gitSha":null,"checksum":null,"createdAt":"2023-12-07T21:43:30.613Z","updatedAt":"2023-12-07T21:43:30.613Z","pageId":2678880,"userId":647494,"branchId":null,"page":{"name":"Code Editor Demo"}},"modules":{}}

component.html

<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.js" 
  integrity="sha512-rdFIN28+neM8H8zNsjRClhJb1fIYby2YCNmoqwnqBDEvZgpcp7MJiX8Wd+Oi6KcJOMOuvGztjrsI59rly9BsVQ==" 
  crossorigin="anonymous" 
  referrerpolicy="no-referrer">
</script>
<script 
  src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/mode/javascript/javascript.min.js" 
  integrity="sha512-Cbz+kvn+l5pi5HfXsEB/FYgZVKjGIhOgYNBwj4W2IHP2y8r3AdyDCQRnEUqIQ+6aJjygKPTyaNT2eIihaykJlw==" 
  crossorigin="anonymous" 
  referrerpolicy="no-referrer">
</script>

<style>
@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/codemirror.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.11/theme/eclipse.min.css');

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  border: 1px solid #d1d1d1;
  border-radius: 4px;
}

body {
  padding: 0 4px;
}

.CodeMirror {
  height: auto;
}
</style>

<script>
let codeEditor = null;
let mostRecentCode = "";

// Init a CodeMirror editor (with timeouts to ensure scripts are loaded first)
function createEditor() {
  if (!CodeMirror) {
    setTimeout(createEditor, 50);
  } else {
    // Initialize code editor
    codeEditor = CodeMirror(document.body, {
      value: "// Initializing...",
      mode: "javascript",
      tabSize: 2,
      lineNumbers: true
    });
    
    codeEditor.on("change", () => {
      mostRecentCode = codeEditor.getValue();
      window.Retool.modelUpdate({
        code: mostRecentCode
      });
    });
  }
}

// Set the contents of the CodeMirror editor (with timeouts to ensure the
// editor has been created first)
function setCode(code) {
  if (!codeEditor) {
    // If code editor is not initialized, wait and retry
    setTimeout(() => {
      setCode(code);
    }, 60);
  } else {
    codeEditor.setValue(code);
  }
}

// Subscribe for updates from the Retool host page
window.Retool.subscribe(function(model) {
  // If the model hasn't been initialized yet, ignore
  if (!model) return;
  
  // Set code in editor if available
  if (model.code !== mostRecentCode) {
    mostRecentCode = model.code;
    setCode(model.code);
  }
});

// Run initial load for the code editor
createEditor();
</script>

model.json

{
  "code": "Deno.serve(req => new Response(\"Hello, world!\"));",
}