31:Taa7,md`# Embedded Editor with Syntax Highlighting This notebook provides a simple editor for Observable notebooks. The editor is super useful if you want to embed other programming languages or a domain-specific language (DSL) in Observable. The editor updates when you press shift+enter (unless *instant* is set to \`true\`). We implemented this editor with [CodeJar](https://medv.io/codejar/) and [highlight.js](https://highlightjs.org/). You can find examples in our [Editor collection](https://observablehq.com/collection/@cmudig/editor-examples). *Note that any changes in the editor are not saved if the page (or cell) reloads. If you just need a highlighter, you can use [@cmudig/highlighter](https://next.observablehq.com/@cmudig/highlighter).* ## Usage To use it in your notebook, add this import. ~~~js import {Editor} from '@cmudig/editor' ~~~ Then you can create an empty editor, add this to a new cell. ~~~js viewof content = Editor() ~~~ That's it, you can now write in the cell output and it will be in the content. The editor function takes a configuration object where you can set the initial content, language, etc. For example, you can create a JavaScript editor that has a simple hello world program with ~~~js viewof content = Editor({ language: 'js', value: 'console.log("Hello World")' }) ~~~ ### Make an editor with predefined options You can also create an editor with predefined options. ~~~js import {makeEditor} from '@cmudig/editor' ~~~ ~~~js SQLEditor = makeEditor({language: 'sql'}) ~~~ ~~~js SQLEditor({value: "SELECT * FROM foo"}) ~~~ ## API Here are all the available options * *value* - The initial value. Defaults to the empty string. * *language* - The language for syntax highlighting. We support all languages supported by highlight.js. You can find a list [here](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md). Defaults to plaintext. * *codeJarOpts* - Options for CodeJar editor. Learn more in the [CodeJar docs](https://github.com/antonmedv/codejar). Defaults to \`{ preserveIdent: false }\`, as \`shift + enter\` evaluation also adds a newline character when enabled. * *debounced* - A number in milliseconds representing a delay before the value is updated automatically. Defaults to zero. * *instant* - Whether to update the value of the editor immediately upon input. Defaults to false. * *label* - A label for the editor. * *higlight* - A function which defines how the editor will highlight content. Defaults to a highlightjs based function. * *styles* - The style for the editor. By default, adds a gray border. * *lineNumbers* - A boolean that indicates whether to show line numbers. Defaults to false. `32:Tf53,function Editor(opt = {}) { const {language, styles, value, label, lineNumbers, codeJarOpts, instant, debounced, highlight} = { language: 'plaintext', styles: defaultStyles, value: '', label: '', lineNumbers: false, instant: false, highlight: highlighter, debounced: 0, // TODO: figure out a way to make shift+enter work on indented lines without this codeJarOpts: { preserveIdent: false }, ...opt }; const container = html`

` const run = html`

${svg`${language}`) const ed = html`

${value}`; container.appendChild(ed); container.value = value; let jar = CodeJar(ed, lineNumbers ? withLineNumbers(highlight, { // unclear why but this makes line numbers black color: '#fff' }) : highlight, codeJarOpts); // support sending and receiving updates as per https://observablehq.com/@tophtucker/custom-input-example Object.defineProperty(container, "value", { get() { // console.log("editor.get called:", ed.textContent) return ed.textContent; }, set(v) { // console.log("editor.set called with: ",v) ed.textContent = v; jar.updateCode(v); } }); if (lineNumbers) { const lineNumberContainer = container.querySelector('.codejar-linenumbers'); lineNumberContainer.style.textAlign = "center"; lineNumberContainer.style.fontFamily = "monospace"; lineNumberContainer.style.paddingTop = "10px"; lineNumberContainer.style.fontSize = "13px"; } ed.addEventListener('input', (e) => { e.stopPropagation(); }) ed.addEventListener('keydown', (e) => { console.log('keydown', e) console.log('keydown e.key', e.key) console.log('keydown e.key.startsWith("Arrow")', e.key.startsWith("Arrow")) console.log('keydown e.code.startsWith("Arrow")', e.code.startsWith("Arrow")) if (e.key.startsWith("Arrow")) { console.log('keydown Arrow', e) e.preventDefault(); e.stopPropagation(); return; } if (e.key == "Shift") shiftDown = true; if (e.key == "Enter") { if (shiftDown) { e.preventDefault(); container.value = ed.textContent; container.dispatchEvent(new CustomEvent("input")); } } }) run.addEventListener('click', (e) => { container.value = ed.textContent; container.dispatchEvent(new CustomEvent("input")); }) ed.addEventListener('keyup', (e) => { console.log('keyup', e) if (e.key.startsWith("Arrow")) { e.preventDefault(); // e.stopPropagation(); return; } if (e.key == "Shift") shiftDown = false; e.stopPropagation(); }) const debouncedUpdate = debounce((code) => { container.value = code; container.dispatchEvent(new CustomEvent("input")); }, debounced); jar.onUpdate(code => { console.log('onUpdate', code) if (instant || debounced > 0) { debouncedUpdate(code); } }) const wrap = container.querySelector('.codejar-wrap'); return container; }33:[] 2f:{"title":"Embedded Editor with Syntax Highlighting","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":870,"value":"md`## Examples`","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"md`### Text\n\nYou can edit the text below.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":859,"value":"viewof text = Editor({ value: \"Hello CMU\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":863,"value":"text","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"md`### SQL`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"viewof query = Editor({\n language: 'sql',\n value:\n`SELECT *\nFROM foo\nWHERE foo.a > 12\n AND foo.b == 'yes'`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"query","pinned":true,"hidden":false,"mode":"ojs"},{"id":576,"value":"md`### JS`","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"viewof js = Editor({\n language: 'javascript',\n value: `const foo = \"Hello World\";\nconst a = [1,2,3];\nconsole.log(a);`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"js","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"### Python","pinned":false,"hidden":false,"mode":"md"},{"id":594,"value":"viewof python = Editor({\n language: 'python',\n value:\n`def chunk(list, size):\n return [list[i:i+size] for i in range(0, len(list), size)]`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":601,"value":"python","pinned":true,"hidden":false,"mode":"ojs"},{"id":1134,"value":"md`### Instant updates as you type`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1124,"value":"viewof instantText = Editor({\n value: \"Hello World\",\n instant: true,\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1131,"value":"instantText","pinned":true,"hidden":false,"mode":"ojs"},{"id":1591,"value":"md`You can also debounce the input update:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1430,"value":"viewof delayed = Editor({\n value: \"Hello Debounced\",\n debounced: 1000\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1432,"value":"delayed","pinned":true,"hidden":false,"mode":"ojs"},{"id":1006,"value":"md`### With Line Numbers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":960,"value":"Editor({\n value: \"Hello CMU\\nHello line two\\nHello line three\",\n lineNumbers: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1120,"value":"md`### With Label`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1118,"value":"Editor({ \n value: \"Hello World\",\n label: \"Text\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1693,"value":"md`### Adding Custom Syntax Highlighting\n*Any highlighter will suffice, this example uses highlightjs.*\n\nFor example we will define keywords for the Metal Shading Language, then register it into highlightjs, and use our custom highlighter as Editor's highlight function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1710,"value":"function metalSyntax(hljs) {\n return {\n name: \"Metal\",\n keywords: \"false true break case continue default discard do else for if return switch while kernel vertex fragment static typedef namespace const constant device constexpr vertex_id instance_id draw_id stage_in float4x4 sampler array void float float2 float3 float4 bool bool2 bool3 bool4 char char2 char3 char4 short short2 short3 short4 int int1 int3 int4 long long2 long3 long4 uchar uchar2 uchar3 uchar4 ushort ushort2 ushort3 ushort4 uint uint2 uint3 uint4 ulong ulong2 ulong3 ulong4 half half2 half3 half4 vector_float vector_float2 vector_float3 vector_float4 texture texture2 texture3 texture4\"\n,\n contains: [\n hljs.C_LINE_COMMENT_MODE,\n hljs.C_BLOCK_COMMENT_MODE,\n hljs.C_NUMBER_MODE,\n ]\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1700,"value":"function customHighlighter(editor) {\n editor.textContent = editor.textContent;\n highlightjs.registerLanguage(\"metal\", metalSyntax)\n highlightjs.highlightElement(editor)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1743,"value":"md`And now some Metal Shader code taken from [Apple's render pass setup example](https://developer.apple.com/documentation/metal/customizing_render_pass_setup?language=objc).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1716,"value":"Editor({\n highlight: customHighlighter,\n language: 'metal',\n value: `// Fragment shader that samples a texture and outputs the sampled color.\nfragment float4 textureFragmentShader(TexturePipelineRasterizerData in [[stage_in]],\n texture2d texture \n [[texture(AAPLTextureInputIndexColor)]])\n{\n sampler simpleSampler;\n\n // Sample data from the texture.\n float4 colorSample = texture.sample(simpleSampler, in.texcoord);\n\n // Return the color sample as the final color.\n return colorSample;\n}`\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1817,"value":"### Support Setting the value programmatically\n","pinned":false,"hidden":false,"mode":"md"},{"id":1819,"value":"function set(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1823,"value":"viewof programmableEditor = Editor() ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1821,"value":"Inputs.button([\n [\"Set to a sample value\", () => set(viewof programmableEditor, 'a sample value')],\n [\"Reset\", () => set(viewof programmableEditor, '')]\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1774,"value":"### Support persistence with localstorage","pinned":false,"hidden":false,"mode":"md"},{"id":1776,"value":"import {localStorageView} from '@tomlarkworthy/local-storage-view'\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":1785,"value":"viewof persistentEditor = Editor()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1787,"value":"viewof sourceStorage = localStorageView(\"persistentEditor\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1791,"value":"Inputs.bind(viewof persistentEditor, viewof sourceStorage)","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":516,"value":"function highlighter(editor) {\n editor.textContent = editor.textContent;\n highlightjs.highlightElement(editor)\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1300,"value":"function makeEditor(defaultOpt) {\n return (opt = {}) => Editor({...defaultOpt, ...opt})\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1103,"value":"languageLabelStyles = `\n z-index: 1;\n position: absolute;\n right: 25px;\n font-size: 12px;\n font-family: Menlo,Consolas,monospace;\n color: black;\n font-weight: bold;\n user-select: none;\n opacity: 0.2;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"defaultStyles = `\n border: 1px solid #eee;\n background: #fafafa;\n font-family: Menlo,Consolas,monospace;\n font-size: 13px;\n padding: 10px;\n tab-size: 4;\n line-height: 1.4;\n overflow-wrap: break-word;\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1137,"value":"runButton = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1373,"value":"hljsVersion = '10.7.1'","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"codeJarVersion = '3.3.0'","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"CodeJar = import(`https://cdn.jsdelivr.net/npm/codejar@${codeJarVersion}/codejar.min.js`).then(d => d.CodeJar)","pinned":false,"hidden":false,"mode":"ojs"},{"id":723,"value":"withLineNumbers = require(`https://bundle.run/codejar@${codeJarVersion}/linenumbers.js`).then(d => d.withLineNumbers)","pinned":false,"hidden":false,"mode":"ojs"},{"id":514,"value":"highlightjs = import(`https://jspm.dev/highlight.js@${hljsVersion}`).then(d => d.default)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1661,"value":"debounce = (await import('https://cdn.skypack.dev/lodash.debounce@4.0.8')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":1826,"value":"import {Editor as CmudigEditor} from '@cmudig/editor'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}