30:T431,# Editor: Reactive Userspace Cell Mutator [YouTube explainer](https://www.youtube.com/shorts/6FjeJRBC2iw) A cell that edits the source of other cells. It is implemented in userspace as a normal cell, so it follows exported notebooks, so exported notebooks become editable! It pairs particularly well with the [single file export](https://observablehq.com/@tomlarkworthy/exporter), because edits are also exported, so you can permanently save your works in a format that continues to be editable and exportable indefinitely. It works offline too! The editor is able to edit _any_ cell in the runtime, including those in dependancies. Import it into a notebook and then evaluate `viewof editor` ```js import {viewof editor} from '@tomlarkworthy/cell-editor' ``` There is a minimal example of the exporter + editor setup [here](https://observablehq.com/@tomlarkworthy/editable-exports) #### Use cases - Edit notebooks offline - Try things out without committing to them - Improved debugging workflow, as you can insert `debugger` expressions to dependancies on-demand. 31:T4aa,viewof editor = { console.log("rebuilding editor mutable editor_state", mutable editor_state); pull_jobs; const combined = view`

${["module", reversibleAttach(combine, viewof module)]}

${["cell", reversibleAttach(combine, viewof named_cell)]} ${["remove_variables", reversibleAttach(combine, viewof remove)]} ${["apply", reversibleAttach(combine, viewof apply)]}

${["editor", reversibleAttach(combine, viewof code_editor)]}

${["log", reversibleAttach(combine, viewof log)]}

`; combined.addEventListener("mouseup", (event) => {}); combined.addEventListener("click", (evt) => { evt.stopPropagation(); }); return combined; }32:T4e0,viewof named_cell = { cells.set("", []); const entries = [...cells.entries()]; const prior = mutable editor_state.last_cell && entries.find((cell) => cell[1][0] === mutable editor_state.last_cell[1][0]); // Also allow clicking to select cell const clickHandler = (evt) => { if (document.body.classList.contains("picking") && evt.isTrusted) { const div = evt.target.closest(".observablehq"); viewof picked_dom.value = div; viewof picked_dom.dispatchEvent(new Event("input")); const entry = divToCell(entries, div); if (entry && entry._module) { if (entry._module !== module.module) { viewof module.value = moduleOptions.find( (m) => m.module == entry._module ); viewof module.dispatchEvent(new Event("input")); } } else { select.value = entry; select.dispatchEvent(new Event("input")); } } }; document.body.addEventListener("click", clickHandler); invalidation.then(() => document.body.removeEventListener("click", clickHandler) ); const select = Inputs.select(entries, { //label: "cell", value: prior, nonce: refresh, format: (v) => v[0] }); return select; }33:T550,compile_and_update = (source, named_cell) => { viewof log.value = ""; const cell = named_cell[1]; try { let reposition = false, insertionIndex = -1; const newVariables = compile(source); if (!cell || cell.length !== newVariables.length) { reposition = true; cell.forEach((v) => v.delete()); for (let i = 0; i < newVariables.length; i++) { const newVariable = main.variable({}); cell.push(newVariable); } } if (reposition) { insertionIndex = [...runtime._variables].findIndex( (v) => v == mutable editor_state.last_selected_variable[1].at(-1) ) + 1; } newVariables.forEach((v, i) => { const variable = cell[i]; let _fn; eval("_fn = " + v._definition); if (v._name) { variable.define(v._name, v._inputs, _fn); } else { variable.define(v._inputs, _fn); } if (reposition) repositionSetElement(runtime._variables, variable, insertionIndex + i); }); mutable editor_state.last_cell = named_cell; mutable editor_state.last_module = module.name; console.log("compile_and_update: mutable editor_state", mutable editor_state); viewof refresh.dispatchEvent(new Event("input")); return named_cell; } catch (e) { viewof log.value = e.toString(); debugger; } }34:[{"id":"8d937d556d4cdaf134bf5ad4e30b8730e495766c84118ca3b4cb8c7c1b1e5b57eefe890fc67301d44323e4641fd30a61463361ce4c9e319ef6b8b1777b391f4b","href":"https://static.observableusercontent.com/files/8d937d556d4cdaf134bf5ad4e30b8730e495766c84118ca3b4cb8c7c1b1e5b57eefe890fc67301d44323e4641fd30a61463361ce4c9e319ef6b8b1777b391f4b","name":"observablejs@1.es.js.gz","type":"application/gzip","lastModified":1733437643302.228,"size":11668}] 2e:{"title":"Editor: Reactive Userspace Cell Mutator","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":1987,"value":"import { trackParent, preserveFocus } from \"@tomlarkworthy/track-parent\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1783,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":800,"value":"Save edits by exporting to a single file","pinned":false,"hidden":false,"mode":"md"},{"id":635,"value":"exporter()","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"## TODO\n\n- tagged templates\n- better syntax highlighter -- highlight syntax errors -- quite a lot of work, started, but see https://observablehq.com/@tomlarkworthy/observablehq-lezer)\n- Imports (maybe this is a different concern)","pinned":false,"hidden":false,"mode":"md"},{"id":895,"value":"### Known Issues\n- If you create a new cell, it is invisible, it will appear after exporting.","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"### Editor UI Components","pinned":false,"hidden":false,"mode":"md"},{"id":523,"value":"viewof combine = Inputs.toggle({\n label: \"untick to destructure\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof refresh = Inputs.button(\"🔄\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1946,"value":"viewof remove = Inputs.button(\"🗑️\", {\n reduce: () => {\n remove_variables(named_cell[1]);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"viewof apply = {\n const button = Inputs.button(\"▶️\", {\n reduce: () => {\n compile_and_update(viewof code_editor.value, named_cell);\n }\n });\n // supress gaining focus\n // doesn't work on observable iframe\n // https://issues.chromium.org/issues/40654608\n button.tabIndex = \"-1\";\n button.onmousedown = (e) => e.preventDefault();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2210,"value":"moduleOptions = [{ name: \"main\", module: main }, ...modules.values()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":904,"value":"viewof module = {\n const prior =\n moduleOptions.find((o) => o.name == mutable editor_state.last_module) ||\n moduleOptions[0];\n const select = Inputs.select(moduleOptions, {\n //label: \"module\",\n value: prior,\n format: (info) => info.name\n });\n\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof code_editor = {\n const editor = CodeMirror(\"initial text\", {\n extensions: [\n codemirror.keymap.of([\n {\n key: \"Shift-Enter\",\n run: (...args) => editor.apply(...args)\n }\n ]),\n codemirror.EditorView.lineWrapping,\n javascriptPlugin.javascript(),\n codemirror.basicSetup,\n myDefaultTheme\n ]\n });\n\n editor.addEventListener(\"click\", (evt) => {\n evt.stopPropagation();\n });\n invalidation.then(preserveFocus(editor));\n return editor;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"viewof log = Inputs.textarea({\n rows: 2,\n resize: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"## API","pinned":false,"hidden":false,"mode":"md"},{"id":2047,"value":"createCell = async ({ source = \"{}\" } = {}) =>\n viewof command.send({\n command: \"createCell\",\n args: {\n source\n }\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2180,"value":"deleteCell = async () =>\n viewof command.send({\n command: \"deleteCell\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2165,"value":"focusEditor = async ({} = {}) =>\n viewof command.send({\n command: \"focusEditor\"\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2089,"value":"viewof command = flowQueue() // need to isolate from all the refreshes","pinned":false,"hidden":false,"mode":"ojs"},{"id":2108,"value":"command","pinned":true,"hidden":false,"mode":"ojs"},{"id":2098,"value":"command_processor = {\n if (command.processed) return;\n\n let result = undefined;\n if (command.command == \"createCell\") {\n result = compile_and_update(\"{}\", [\"\", []]);\n } else if (command.command == \"focusEditor\") {\n viewof code_editor.querySelector(\"[contenteditable]\").focus();\n result = true;\n } else if (command.command == \"deleteCell\") {\n remove_variables(named_cell[1]);\n result = true;\n }\n if (result) {\n command.processed = true;\n viewof command.resolve(result);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1518,"value":"### UI State","pinned":false,"hidden":false,"mode":"md"},{"id":236,"value":"viewof cells = {\n refresh;\n return Inputs.input(await cellMap(module.module));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"mutable editor_state = ({\n last_cell: undefined\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1899,"value":"last_selected_variable = {\n if (named_cell && named_cell[0] !== \"\") {\n mutable editor_state.last_selected_variable = named_cell;\n console.log(\"last_selected_variable editor_state\", mutable editor_state);\n }\n return mutable editor_state.last_selected_variable;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2038,"value":"viewof picked_dom = Inputs.input(null)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1525,"value":"### UI Action","pinned":false,"hidden":false,"mode":"md"},{"id":1705,"value":"pull_jobs = {\n const jobs = [...runtime._variables].find((v) => v._name == \"editor_jobs\");\n invalidation.then(observe(jobs._module, jobs._name, {}));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"editor_manager = {\n viewof code_editor.apply = (view) => {\n const doc = view.state.doc.toString();\n compile_and_update(doc, named_cell);\n return true;\n };\n console.log(\"updating editor\", decompiled);\n viewof code_editor.value = decompiled;\n viewof code_editor.dispatchEvent(new Event(\"input\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1345,"value":"enable_picking = {\n document.body.classList.add(\"picking\");\n invalidation.then(() => document.body.classList.remove(\"picking\"));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1434,"value":"highlight_picked = {\n if (!named_cell || !named_cell[1][0]) return;\n const dom = isnode(named_cell[1][0]._value)\n ? named_cell[1][0]._value\n : named_cell[1][0]._observer._node;\n if (!dom) return;\n dom.classList.add(\"picked\");\n invalidation.then(() => {\n dom.classList.remove(\"picked\");\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1352,"value":"divToCell = (entries, div) => {\n if (!div) return undefined;\n if (div.variable) {\n return (\n entries.find(\n ([name, cell]) => cell[0] && cell.find((v) => v == div.variable)\n ) || div.variable\n );\n } else {\n return entries.find(\n ([name, cell]) => cell[0] && cell[0]._observer._node === div\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":615,"value":"### Decompiler","pinned":false,"hidden":false,"mode":"md"},{"id":1281,"value":"modules = {\n refresh;\n forcePeek([...runtime._variables].find((v) => v._name == \"submit_summary\"));\n return moduleMap(runtime);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"decompiled = {\n if (named_cell[1].length == 0) return \"\";\n return decompile(named_cell[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1285,"value":"editor_jobs = {\n // auto subscribe with forcePeek\n command_processor;\n enable_picking;\n highlight_picked;\n editor_manager;\n submit_summary;\n last_selected_variable;\n return \"editor_jobs\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":402,"value":"### Apply Update","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":1960,"value":"### Remove Cells","pinned":false,"hidden":false,"mode":"md"},{"id":1952,"value":"remove_variables = (variables) => {\n variables.forEach((v) => v.delete());\n viewof refresh.dispatchEvent(new Event(\"input\"));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"### Runtime Representation","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"viewof variable = Inputs.radio(named_cell[1], {\n label: \"variable in cell group\",\n format: (v) => v._name,\n value: named_cell[1][0]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"name = variable._name","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"inputs = variable._inputs.map((v) => v._name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"viewof definition = Inputs.textarea({\n label: \"variable._definition\",\n value: variable._definition.toString(),\n rows: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"Inputs.button(\"update definition\", {\n disabled: definition === variable._definition.toString(),\n reduce: () => {\n let _fn;\n eval(\"_fn = \" + definition);\n variable.define(variable._name, inputs, _fn);\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"### Editor Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":977,"value":"import { toObject, isnode, repositionSetElement} from \"@tomlarkworthy/runtime-sdk\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"import { runtime, main } from \"@mootari/access-runtime\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":260,"value":"import {\n CodeMirror,\n codemirror,\n myDefaultTheme\n} from \"@tomlarkworthy/codemirror-6-22-2-view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"import {\n decompile,\n compile,\n cellMap,\n sourceModule,\n findModuleName,\n parser\n} from \"@tomlarkworthy/observablejs-toolchain\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"javascriptPlugin = codemirror","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":1531,"value":"unzip = async (attachment) => {\n const response = await new Response(\n (await attachment.stream()).pipeThrough(new DecompressionStream(\"gzip\"))\n );\n\n return response.blob();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":511,"value":"import { view } from \"@tomlarkworthy/view\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"import { reversibleAttach } from \"@tomlarkworthy/reversible-attachment\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"import { exporter } from \"@tomlarkworthy/exporter\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1275,"value":"import {\n moduleMap,\n submit_summary,\n forcePeek,\n observe\n} from \"@tomlarkworthy/module-map\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2086,"value":"import { flowQueue } from \"@tomlarkworthy/flow-queue\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}