30:T5e9,viewof exampleShiftEnter = { // This string will be parsed as HTML, so to embed HTML requires using < > const defaultShiftEnterText = `<h2>Setting Up Key Commands</h2> <p>This editor follows Observable style <i>"Run on <kbd>Shift</kbd> + <kbd>Enter</kbd>"</i></p> <p>Since <kbd>Shift</kbd> + <kbd>Enter</kbd> is kinda hard to accomplish in mobile environments, there's a button too. However, it seems to mess up the focussing behavior of Observable a bit at the moment</p>` const {editor, view} = ace(defaultShiftEnterText, undefined, {mode: "ace/mode/html"}); // For some reason I don't understand the `wrapper.value` // approach from above resulted incorrect behavior. // A mutable cell works as expected though. mutable exampleShiftEnterValue = editor.getValue(); // Add callback for Shift-Enter command editor.commands.addCommand({ name: 'Observablish', bindKey: {win: 'Shift-Enter', mac: 'Shift-Enter', linux: 'Shift-Enter'}, exec: (editor) => { mutable exampleShiftEnterValue = editor.getValue(); }, readOnly: true // false if this command should not apply in readOnly mode }); const refresh = html`` const wrapper = html`

${view}${refresh}

` refresh.onclick = () => { mutable exampleShiftEnterValue = editor.getValue() }; return wrapper; }31:[{"id":"551614d323d9bc3ac1b8584a39a94aa04216268c3c3d9e2b167771a36e8811bbc771a9a63aa001ae21ae53b9770c24e262c38a8ee37ac02cd810f8c6dea54f84","href":"https://static.observableusercontent.com/files/551614d323d9bc3ac1b8584a39a94aa04216268c3c3d9e2b167771a36e8811bbc771a9a63aa001ae21ae53b9770c24e262c38a8ee37ac02cd810f8c6dea54f84","name":"ace-logo.png","type":"image/png","lastModified":1579353151650.966,"size":60546}] 2e:{"title":"Hello, Ace!","cells":[{"id":307,"value":"html`

Hello, Ace!

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"aceLogo = FileAttachment(\"ace-logo.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"md`Would anyone out there like some syntax-highlighted editable text areas for their code examples? Then [Ace](https://ace.c9.io/) (_**A**jax.org **C**loud9 **E**ditor_) might be what you need (note that if all you need is fancy syntax highlighting, there probably are more lightweight options out there - Ace is a couple of hundred KB even when minified and gzipped). We'll start with a skeleton example for how to set it up, which also covers the (presumed) most common use-case of extracting the plain text content. Below that is a more easy-to-use wrapper function, with some examples.\n\nBeyond that, it supports a lot more complicated interactions, so if you have grand ambitions look into the docs!\n\nMore info:\n\n- [Ace main page](https://ace.c9.io/)\n- [Quick how-to introduction to various configuration options](https://ace.c9.io/#nav=howto)\n- [API docs](https://ace.c9.io/#nav=api)\n- [Github repo](https://github.com/ajaxorg/ace)\n\n---\n\n## Basic example\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"example.container","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"example = {\n // Note that any newlines in the raw HTML will be converted to\n // lines in the editor. The same will happen to leading\n // spaces so keep that in mind!\n const container = html`

/* Hello Observable! */\n\n${initial_code}

`;\n\n const editor = aceJS.edit(container, {\n minLines: 7,\n maxLines: 9000,\n theme: \"ace/theme/monokai\",\n mode: \"ace/mode/javascript\"\n });\n\n // The text extraction is most easily done with a callback and\n // a mutable cell, as shown here, but see the up linked\n // documentation for more complex examples.\n editor.session.on('change', () => {mutable text = editor.getValue()})\n mutable text = editor.getValue()\n return { editor, container };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"/* \nIMPORTANT: DON'T use the mutable `text` cell here!\nThat would be a circular definition that isn't caught\nby Observable and cause an infinite loop\n\nIn other words: the initial text should be a separate,\nindependent string value from the extracted text!\n*/\ninitial_code = `function foo(items) {\n var x = \"All this is syntax highlighted\";\n return x;\n}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"mutable text = initial_code","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"md`\n---\n\n# A wrapper to make this easier to use\n\nThe above shows you how to set up an example Ace editor while directly interacting with the library. But I assume most of the time people just want a text field with bells and whistles, so we are probably better off writing a wrapper to make that scenario less of a hassle:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"// convenience function to instantiate\nfunction ace(textOrDiv, containerStyle, aceConfig){\n // if not a string or undefined, assume object with fontSize and/or height\n if (typeof containerStyle !== 'string') {\n if (!containerStyle) containerStyle = {};\n if (!containerStyle.fontSize) containerStyle.fontSize = \"1em\";\n containerStyle = `font-size:${containerStyle.fontSize};`\n }\n if (textOrDiv === undefined || typeof textOrDiv === 'string') {\n textOrDiv = html`

${textOrDiv || \"\"}

`\n } else {\n textOrDiv.style = containerStyle;\n }\n const editor = aceJS.edit(textOrDiv, Object.assign({\n minLines: 7,\n maxLines: 9000,\n theme: \"ace/theme/monokai\",\n mode: \"ace/mode/javascript\"\n }, aceConfig));\n return {editor, view: textOrDiv};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":248,"value":"md`Import it like so:\n\n\\`\\`\\`js\n import {ace} from '@jobleonard/ace'\n\\`\\`\\`\n\nThen use it in a cell like this:\n\n\\`\\`\\`js\n ace([a string with a text body, or an HTML div node], [CSS styling], [ace config object])\n\\`\\`\\`\n\nBelow are some examples for how you might set up interactive text fields with it.\n\n---\n\n## Read-only code fields\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"exampleReadOnly.view","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"exampleReadOnly = ace(`const example1 = \\` This is a read-only editor field!\nFor when you just want to show some code (but if that is all\nthat you need please just use MarkDown's built-in syntax\nhighligher for that - even minified Ace is 370 KiB).\n\nNote that the editor window height will default to seven lines\nunless you set it manually, which we also do here for\ndemonstration purposes, alongside custom fonts\\`;\n`, {fontSize: \"1.2em\"}, {readOnly: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"liveMarkdown = md`${exampleLiveMarkdown}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"viewof exampleLiveMarkdown = {\n const defaultLiveMarkdownText = `## Extracting text on every keystroke\n\nThe cell that is rendered by this bit of markdown will update\nwith every change to the text field.\n\n[Test to see if markdown highlighting works as expected](#liveMarkdown)`\n \n // Instantiating the editor\n const {editor, view} = ace(defaultLiveMarkdownText, undefined, {mode: \"ace/mode/markdown\"});\n\n // initial value for viewof\n view.value = editor.getValue();\n\n // Setting up the callback that reacts to the changes\n editor.on('change', () => {view.value = editor.getValue()})\n \n return view;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"html`${exampleShiftEnterValue}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"mutable exampleShiftEnterValue = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"aceJS = require('ace-builds@1.12.0/src-min-noconflict/ace.js').catch(() => window[\"ace\"])","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}