2d:null 2e:["$","title",null,{"children":"CodeMirror iFrame | Benjamin Atkin | Observable"}] 33:T927,function codeView({value, mode}) { const fn = ({CodeMirror} = {}) => { return ({id, value, mode}) => { const cm = CodeMirror(document.body, { value, mode, lineNumbers: true }) CodeMirror.modeURL = 'https://codemirror.net/mode/%N/%N.js' CodeMirror.autoLoadMode(cm, mode) cm.on('change', (cm, changes) => { window.parent.postMessage({ id, value: cm.getValue(), height: document.body.offsetHeight }, `https://${document.domain}`) }) setInterval(() => { window.parent.postMessage({ id, height: document.body.offsetHeight }, `https://${document.domain}`) }, 100) } } const randomId = `el${Math.floor(Math.random() * 1000000)}` const frameSrc = ` ` const frameStyle = `width: 100%; height: 50px; border: 0; overflow-y: hidden;` const frame = html`` const messageListener = event => { if (document.contains(frame)) { if (event.data.id === randomId) { if (event.data.value !== undefined) { frame.value = event.data.value frame.dispatchEvent(new CustomEvent("input")) } frame.style.height = `${event.data.height + 30}px` } } else { window.removeEventListener('message', messageListener) } } window.addEventListener('message', messageListener, false) frame.srcdoc = frameSrc frame.value = value return frame }34:[] 31:{"id":"b6df3d9aebc2e5b8","slug":"codemirror-iframe","title":"CodeMirror iFrame","thumbnail":"f06d568e68b3f8ca5516624416b2d635e402893d1d22d54b3f055dc83b6e84ab","access_level":"public","create_time":"$D2018-08-12T19:47:48.229Z","update_time":"$D2020-04-17T03:13:54.449Z","view_time":null,"first_public_time":"$D2018-08-13T00:02:41.667Z","has_unpublished_edits":null,"fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"037d14fb7fd36dd8","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":"starter_2024"},"version":228,"publish_version":228,"role":null,"authored":false,"authors":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null}],"members":[{"type":"individual","id":"fdc30039652586fd","login":"benatkin","name":"Benjamin Atkin","avatar_url":"https://avatars-next.observableusercontent.com/fb19f2adb461b285dcce2e54a984cde190d16c7a95034960b716cc397ab6cb8d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":8,"collection":null,"type":"notebook","body":{"title":"CodeMirror iFrame","cells":[{"id":0,"value":"md`# CodeMirror iFrame\n\nI wanted to experiment with getting other languages in Observable, so I tried getting CodeMirror working inside of it. I had trouble with CodeMirror's UMD loading and instead used an iFrame with postMessage to make it expand automatically. To use this, import it like this:\n\n\\`\\`\\` js\nimport {codeView} from '@benatkin/codemirror-iframe'\n\\`\\`\\`\n\nHere are a couple examples:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"viewof jsxExample = {\n const value = `export default ({color}) => (\n

Hello World

\n)`\n return codeView({mode: 'jsx', value})\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"html`The code is stored in the jsxExample variable and shown below. Edit the code above and the code below will be updated reactively.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"jsxExample","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`Here's a go example:`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"viewof goExample = codeView({\n value: `package main\nimport \"fmt\"\nfunc main() {\n fmt.Println(\"hello world\")\n}`,\n mode: 'go',\n gutter: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"goExample","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"md`All of the code for codeView is inside this block:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"