31:T4a6,md` # Side-By-Side Editor And Tabs for Observable

${md` **This project is abandoned.** Observable's web interface changed too frequently to keep up, and without any semantic classes there was no way to reliably target elements. **Demos on Twitter:** - [basic UI and hot reloading](https://twitter.com/mootari/status/994585830411984896) - [editor options and resizable panes](https://twitter.com/mootari/status/997630005726334976) *Note: If the video quality is low, try watching a few minutes later. Twitter transcodes and caches videos on demand.* `}

If you ever put a lot of code into a notebook, then at some point you might have wished for a side by side view or a quick way to access to all your cells. I know I did, and in the spirit of overengineering I created a bookmarklet for it. **A quick warning about bookmarklets and content scripts:** Running a user script on a page lets it do whatever you can do. As with everything on the web you want to be sure that you can trust the author's intentions. See the [FAQ](#faq) for details. `32:T760,function compileBookmarklet(label, hotReload = false) { // Base plugins for all configurations. const commonPlugins = [ pluginUnloadOnBrowse, pluginPersist, pluginOptionUi, pluginCssOptions, pluginEditorStyle, pluginSandboxStyle, pluginResizable ]; // Selectors required by init script and plugins. const commonSelectors = ['$CONTAINER', '$SANDBOX_AREA']; const css = compileCss(true, true); // Maps macros to selectors. const mapMacros = macros => macros.reduce((obj, name) => (obj[name] = css.macros[name], obj), {}); const selectorsMap = mapMacros(commonSelectors); const options = {}; const plugins = commonPlugins.slice(); if(hotReload) { notifyUpdate(css.editor, css.sandbox); plugins.push(pluginMessaging, pluginHotReload); } else { plugins.push(pluginStatic); options.editorCss = css.editor; options.sandboxCss = css.sandbox; } const script = wrap(init, [selectorsMap, plugins, options]); return createLink(script, label); // Merges multiple arrays. function merge(...arr) { return Array.from(new Set([].concat(...arr))) } // Wraps init function and arguments. function wrap(fn, args) { return `(${fn.toString()}).apply(window,${serialize(args)})` } function createLink(script, label) { const element = DOM.element('a', { href: 'javascript:void ' + encodeURIComponent(script), title: 'Shift+click to edit label, shift+click again to finish.', class: 'bookmarklet', }); element.onclick = function(e) { e.stopPropagation(); e.preventDefault(); if(e.shiftKey) this.contentEditable = '' + (this.contentEditable !== 'true'); }; element.textContent = label; const copy = html`

Copy to clipboard`; copy.onclick = function(e) { clipboard.writeText(script); }; return html`${element} ${copy}`; } }33:Ta0e,selectorMacros = { // Utility. Turns a combination of class names into a selector string. const cc = str => str.split(' ').map(str => '.' + str).join(''); // Utility. Produces a selector that matches exactly one class. const cs = str => `[class="${str}"]`; const cn = str => str.split(' ').map(str => ':not(.' + str + ')').join(''); return { // Outer shared structure. '$PAGE': 'div' + cc('w-100 mw8 ph3 center mt4'), '$TOOLBAR': 'div' + cc('w-100 mw8 ph3 center flex justify-between pv2 items-center'), '$TOOLBAR_LOGO': 'a' + cc('flex items-center ph2-ns pv2 mr3 mr2-ns no-underline'), '$TOOLBAR_SEARCH': 'input' + cc('w5 f6 ba b--black-10 input-reset bg-white outline-0 search mr1 mr2-m mr3-l pl4 pr3 br2 fw6'), '$TOOLBAR_BUTTON': 'a' + cc('inline-flex pa2 mr3-ns mr2 f6 fw6 no-underline br2 bn'), '$CONTAINER': 'div' + cc('relative mh0-ns nr3 nl3 mt5') + ' > div' + cc('relative outline-0'), // Cells container. '$EDITOR_AREA': 'div' + cc('absolute w-100 black pen'), // Output container. '$SANDBOX_AREA': 'iframe' + cc('w-100 bn'), // ??? '$UNKNOWN_AREA': 'div.vh-25', // A single cell input, containing label, actions and editor. '$CELL': '$EDITOR_AREA > div' + cs('relative'), // Like above, but without the parent. Used in sibling selectors. '$CELL_REL': 'div' + cs('relative'), // Insert/Merge button. '$ACTION_INSERT': 'a' + cc('absolute pointer pea hover-dark-blue hover-bg-near-white br-pill'), '$ACTION_INSERT_ACTIVE': '$ACTION_INSERT' + cc('black-30'), '$ACTION_INSERT_INACTIVE': '$ACTION_INSERT' + cn('black-30'), // '$ASIDE_WRAP': 'div' + cc('absolute pointer pea tr top-0 br'), '$ASIDE_WRAP_ACTIVE': '$ASIDE_WRAP.b--black', '$ASIDE_LABEL': '$ASIDE_WRAP > div' + cs('absolute'), '$ASIDE_LABEL_REL': '> div' + cs('absolute'), '$ASIDE_ICON_ARROW': '$ASIDE_WRAP > svg', '$ASIDE_ACTIONS': 'div' + cc('absolute right-0 ma1'), '$ASIDE_ICON_LINK': '$ASIDE_ACTIONS > a' + cc('dib black-30 hover-black') + '[title^="Link"]', '$ASIDE_ACTION_PIN': '$ASIDE_ACTIONS > a' + cc('dib br-pill v-top') + '[title*="pin"]', '$EDITOR_WRAP': 'div' + cc('relative transparent hover-black-30 bg-near-white pea'), '$EDITOR_WRAP_INACTIVE': '$ACTION_INSERT_INACTIVE ~ $EDITOR_WRAP', '$EDITOR_ACTION_SAVE': 'a' + cc('absolute top-0 right-0 pa2 z-2 pointer'), '$EDITOR_CODE': 'div.CodeMirror', '$EDITOR_CODE_INACTIVE': 'div.CodeMirror:not(.CodeMirror-focused)', }; }34:T5fc,function init(selectors, plugins, options) { // Code runs outside sandbox, invoked via bookmarklet. 'use strict'; if(window.TABS_UI_UNLOAD) return window.TABS_UI_UNLOAD(); var doc = document, select = doc.querySelector.bind(doc), main = select('#app'), iframe = select(selectors.$SANDBOX_AREA), worker = iframe ? iframe.contentWindow : null, handlers = {}; if(!main || !main._reactRootContainer) return console.warn('Editor not found.'); if(!worker) return console.warn('Sandbox not found.'); var pluginApi = { selectors: selectors, document: doc, root: doc.documentElement, worker: worker, select: select, create: doc.createElement.bind(doc), append: doc.body.appendChild.bind(doc.body), randomId: randomId, on: function(type, callback) { if(!handlers[type]) handlers[type] = new Set(); handlers[type].add(callback); }, off: function(type, callback) { if(handlers[type]) handlers[type].delete(callback); }, trigger: function(type, data) { if(handlers[type]) handlers[type].forEach(function(fn) { fn(data); }); } }; plugins.forEach(function(fn) { fn(pluginApi, options); }); pluginApi.on('unload', function() { delete window.TABS_UI_UNLOAD; }); window.TABS_UI_UNLOAD = pluginApi.trigger.bind(null, 'unload'); pluginApi.trigger('load'); function randomId() { return +('' + Date.now() + ~~(1000 * Math.random())); } }35:Ta39,function pluginOptionUi(api, options) { var options = new Map(), wrapper, form; api.on('option_declare', function(info) { options.set(info.name, createOption(info)); appendOptions(); }); api.on('load', function() { wrapper = initContainer(); form = wrapper.querySelector('form'); api.append(wrapper); form.addEventListener('input', function(e) { api.trigger('option_changed', { name: e.target.value, checked: e.target.checked }); }); }); api.on('unload', function() { options.clear(); wrapper.parentNode.removeChild(wrapper); }); function appendOptions() { options.forEach(form.appendChild.bind(form)); } function initContainer() { var button = element('

≡≡'); var form = element('

'); button.addEventListener('click', function() { form.style.display = form.style.display ? null : 'none'; }); var wrapper = element('

'); wrapper.appendChild(button); wrapper.appendChild(form); return wrapper; } function createOption(info) { var id = 'tabs-ui-option-' + info.name; var input = setProperties(api.create('input'), { type: 'checkbox', style: 'margin-right:6px', autocomplete: 'off', name: 'option', id: id, checked: info.enabled, value: info.name }); var label = setProperties(api.create('label'), { for: id, class: 'flex items-center ph3 pv2 f6 fw6 black-70 hover-black hover-bg-near-white pointer' }); label.appendChild(input); label.appendChild(text(info.label)); return label; } function setProperties(element, props) { Object.keys(props).forEach(function(name) { var value = props[name]; typeof value !== 'number' && !value ? element.removeAttribute(name) : element.setAttribute(name, value); }); return element; } function fromTemplate(html) { var template = api.create('template'); template.innerHTML = html; return template.content; } function element(html) { var template = api.create('template'); template.innerHTML = html; return template.content.firstChild; } function text(str) { var fragment = document.createDocumentFragment(); fragment.textContent = str; return fragment; } }36:T4b1,function pluginCssOptions(api, options) { var cssOptions = { 'codeNoCollapse': 'Keep editors open', 'tabNoSticky': 'Disable sticky tabs', 'tabNamedFirst': 'List named tabs first', 'tabHideUnnamed': 'Hide unnamed cells' }; api.on('load', function() { Object.keys(cssOptions).forEach(function(name) { api.trigger('option_declare', { name: name, label: cssOptions[name], checked: !!options[name] }); }); }); api.on('option_changed', function(opt) { if(cssOptions[opt.name]) opt.checked ? add(opt.name) : remove(opt.name); }); api.on('unload', function() { api.root.removeAttribute('data-tabsui-options'); }); function add(name) { setEnabled( getEnabled().concat(name) ); } function remove(name) { var values = getEnabled(), i = values.indexOf(name); if(i > -1) setEnabled( (values.splice(i, 1), values) ); } function getEnabled() { return (api.root.getAttribute('data-tabsui-options') || '').split(' ').filter(function(v) { return v }); } function setEnabled(options) { var value = Array.from(new Set(options)).join(' '); api.root.setAttribute('data-tabsui-options', value.trim()); } }37:T8a0,function pluginResizable(api, options) { var dragging = false, root, container, target, style, setCss; var flexMappings = { 'row': { edge: 'left', size: 'width', mouse: 'clientX', mod: 1 }, 'row-reverse': { edge: 'right', size: 'width', mouse: 'clientX', mod: -1 }, 'column': { edge: 'top', size: 'height', mouse: 'clientY', mod: 1 }, 'column-reverse': { edge: 'bottom', size: 'height', mouse: 'clientY', mod: -1 }, }; api.on('load', function() { root = api.root; container = api.select(api.selectors.$CONTAINER); target = api.select(api.selectors.$SANDBOX_AREA); style = api.append(api.create('style')); var index = style.sheet.insertRule(api.selectors.$SANDBOX_AREA + '{}', 0); var rule = style.sheet.cssRules[index]; setCss = rule.style.setProperty.bind(rule.style); container.addEventListener('mousedown', start); api.document.documentElement.addEventListener('mousemove', move); api.document.documentElement.addEventListener('mouseup', stop); if(options.initialSize) setSize(options.initialSize); }); api.on('unload', function() { style.parentNode.removeChild(style); container.removeEventListener('mousedown', start); root.removeEventListener('mousemove', move); root.removeEventListener('mouseup', stop); }); function setSize(size) { setCss('flex-basis', size + 'px', 'important'); } function setMask(status) { setCss('pointer-events', status ? 'none' : ''); }; function start(e) { if(!dragging && e.target === container) { setMask(true); setCss('pointer-events', 'none'); dragging = true; } } function stop(e) { if(dragging) { setCss('pointer-events', ''); dragging = false; } } function move(e) { if(dragging) { e.preventDefault(); // Slow, but safe. var direction = window.getComputedStyle(container).getPropertyValue('flex-direction'); var map = flexMappings[direction]; var box = target.getBoundingClientRect(); var delta = map.mod * (box[map.edge] - e[map.mouse]); setSize( Math.max(0, box[map.size] + delta) ); } } }38:T1560,viewof editorStyles = print(` body { overflow: hidden !important; } $PAGE { margin: 0; max-width: initial; --tabsui-editor-width: 70%; --tabscol-shade: rgba(0, 0, 0, .05); --tabscol-lightest: #f7f7f9; --tabscol-light: hsl(240, 14%, 93%); --tabscol-darkest: #6f7c90; --tabscol-accent: #266bd9; } $TOOLBAR { max-width: initial; padding: 2px 6px; z-index: 2; box-shadow: 0 2px 4px 2px rgba(0,0,0,.1); padding-bottom: 4px; } $TOOLBAR_LOGO { padding: 0; } $CONTAINER { display: flex; flex-direction: row; position: fixed; width: 100%; top: 40px; bottom: 0; left: 0; z-index: 1; background: white; overflow: hidden; } $CONTAINER:fullscreen, $CONTAINER:-moz-full-screen, $CONTAINER:-webkit-full-screen { top: 0; } /* Resize handle. */ $CONTAINER:after { content: ""; display: block; flex: 0 0 6px; order: 1; background: #ccc; cursor: move; } $EDITOR_AREA, $SANDBOX_AREA { position: relative !important; height: 100% !important; overflow: auto; overflow-y: scroll; } $SANDBOX_AREA { order: 2; flex: 0 0 50vw; } $EDITOR_AREA { order: 0; flex: 1 1 auto; pointer-events: initial; width: initial !important; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; counter-reset: index 0; padding: 9px 3px 6px 6px; } /* Separates tabs and editor */ $EDITOR_AREA:after { content: ""; order: 2; height: 1px; background: var(--tabscol-shade); margin: 0 -3px 18px -6px; display: block; flex: 1 0 auto; width: 100%; } $CELL { margin-top: auto !important; margin-bottom: 50px !important; padding-top: initial !important; position: relative; display: contents; } $ACTION_INSERT, $ASIDE_WRAP, $EDITOR_WRAP { order: 1; } $ACTION_INSERT { flex: 0 0 auto; opacity: 0; display: block; top: 0 !important; left: 0 !important; width: 13px !important; height: auto !important; line-height: 32px; padding: 0 !important; z-index: 101; overflow: hidden; margin: 0 0 0 -13px; position: relative; background: var(--tabscol-darkest); border-radius: initial; color: white; } $ACTION_INSERT:hover { opacity: 1; } $CELL:first-child $ACTION_INSERT { display: none; } $ACTION_INSERT > svg { transform: rotate(90deg); position:relative; left: -1px; vertical-align: -4px; } $ASIDE_WRAP { flex: 1 0 auto; width: initial !important; height: initial !important; top: 0 !important; left: initial !important; position: relative !important; z-index: 1; white-space: nowrap; padding: 6px 28px 2px 10px!important; margin: 0 6px 6px 0; background: var(--tabscol-lightest); color: var(--tabscol-darkest); border: none; border-bottom: 2px solid transparent; line-height: 18px; text-align: left; outline: 2px solid #fff; } $CELL:not([id]) $ASIDE_WRAP { } $CELL:hover $ASIDE_WRAP { position: sticky !important; z-index: 100; } $ASIDE_WRAP_ACTIVE { border-bottom-color: var(--tabscolr-darkest); } $ASIDE_LABEL { padding: 0; text-align: left; display: inline-block; position: static; text-overflow: ellipsis; overflow: hidden; counter-increment: index; color: var(--tabscol-darkest); font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica,helvetica neue,ubuntu,roboto,noto,segoe ui,arial,sans-serif; font-weight: 600; } $ASIDE_LABEL:empty { } $ASIDE_WRAP_ACTIVE $ASIDE_LABEL_REL, $ASIDE_WRAP:hover $ASIDE_LABEL_REL { color: black; } $ASIDE_LABEL:empty:after { content: "#"counter(index); } $ASIDE_ACTIONS { display: inline; position: static; padding: 0; margin: 0; } $ASIDE_ICON_ARROW, $ASIDE_ICON_LINK { display: none; } $ASIDE_ACTION_PIN { display: block; padding: 0 !important; right: 4px; top: 8px; position: absolute; } $EDITOR_WRAP { box-sizing: border-box; order: 3; margin: 9px 0 9px 6px; flex: 0 0 auto; width: calc(100% - 12px - 9px); position: relative; } $EDITOR_ACTION_SAVE { z-index: 99; } $EDITOR_CODE { display: block; position: relative; margin-bottom: 0 !important; } /* Lefthand stroke on active editor area */ $EDITOR_CODE:before { content: ""; position: absolute; left: 0; width: 3px; background-color: var(--tabscol-darkest); height: 100%; } $EDITOR_WRAP_INACTIVE $EDITOR_CODE:not(:focus):before { display: none; } $EDITOR_WRAP_INACTIVE $EDITOR_CODE { max-height: 30px; } $EDITOR_WRAP_INACTIVE $EDITOR_CODE:after { content: ""; position: absolute; width: 0; height: 0; right: -.5px; /* Counters rounding issues */ bottom: -.5px; /* Counters rounding issues */ border-style: solid; border-color: transparent white white transparent; border-width: 6px 10px; } $UNKNOWN_AREA { display: none; } $SANDBOX_AREA { max-height: 100vh; width: 100%; } $CELL:hover $ASIDE_WRAP, $CELL:hover $EDITOR_CODE_INACTIVE { background: var(--tabscol-light); } /* Option: Keep editors open */ html[data-tabsui-options~="codeNoCollapse"] $EDITOR_CODE_INACTIVE { max-height: none; } html[data-tabsui-options~="codeNoCollapse"] $EDITOR_CODE_INACTIVE:after { display: none; } /* Option: Disable sticky tabs */ html[data-tabsui-options~="tabNoSticky"] $CELL:hover $ASIDE_WRAP { position: relative !important; } /* Option: List named tabs first */ html[data-tabsui-options~="tabNamedFirst"] $CELL[id] $ASIDE_WRAP { order: 0; } /* Option: Hide unnamed cells */ html[data-tabsui-options~="tabHideUnnamed"] $CELL:not([id]) { display: none; } `)39:[] 2f:{"title":"Side-By-Side Editor And Tabs for Observable","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"md`\n## Browser Support\n\n- **Chrome:** *Fully supported.* Baseline browser.\n- **Safari:** *Working,* but all unnamed cells are labeled as \"#1\" due to bug in handling of counters inside \"display: contents\".\n- **Firefox:** *Requires workaround.* Blocks user scripts on CSP enabled sites ([see bug report for details](https://bugzilla.mozilla.org/show_bug.cgi?id=866522)).\n- **Edge:** *Unsupported.* \"display: contents\" is not implemented.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"md`\n## Getting started\n${compileBookmarklet('Θ Tabs UI')}\n${compileBookmarklet('Θ Tabs UI (dev)', true)}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"{\n const m = selectorMacros;\n const script = `(${check}).call(null, ${JSON.stringify(selectorMacros)})`;\n const copy = html`

Selector counting: Copy to clipboard`;\n  copy.onclick = function(e) { clipboard.writeText(script) };\n  return copy;\n  \n  function check(m){\n    Object.keys(m).forEach(k=> {\n      try { console.log(k,document.querySelectorAll(m[k]).length); }\n      catch(e) { console.log(k,'?'); }\n    })\n  }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1419,"value":"faq = md`\n## FAQ\n
\n**How can I be certain the code doesn't mess with my account?**\n\nYou can take a few steps to securely test the code:\n- Run the bookmarklet inside a private/incognito window where you are not logged in.\n- Fork notebooks from untrusted authors first, because a notebook may change at any given time. Take your time to closely inspect the source, and verify that the script only does what it claims.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1260,"value":"// Recursively inlines Function, RegExp and undefined.\nfunction serialize(value) {\n  const type = typeof value;\n  const json = JSON.stringify;\n\n  if(type === 'function') {\n    return value.toString();\n  }\n  if(type === 'object') {\n    if(value === null) {\n      return json(value);\n    }\n    if(value instanceof RegExp) {\n      return value.toString();\n    }\n    if(Array.isArray(value)) {\n      return '[' + value.map(serialize).join(',') + ']';\n    }\n    const body = Object.keys(value).map(name => json(name) + ':' + serialize(value[name]));\n    return '{' + body.join(',') + '}';\n  }\n  if(type === 'undefined') {\n    return type;\n  }\n  return json(value);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1247,"value":"function notifyUpdate(editorCss, sandboxCss) {\n  const hostname = 'https://beta.observablehq.com';\n  // Observable's worker throws whenever an unhandled event gets\n  // sent to it. Luckily it also implements a \"bundle\" message\n  // type that is used to process multiple events at once.\n  const message = {\n    type: 'bundle',\n    events: [],\n    tabs_ui_event: {\n      type:    'update',\n      editor:  editorCss,\n      sandbox: sandboxCss\n    }\n  };\n  // Pass updated CSS to bookmarklet instance.\n  window.parent.postMessage(message, hostname);\n  // Listen for ready events sent by the bookmarklet.\n  window.addEventListener('message', onUiReady);\n  // Prevent handlers from stacking.\n  invalidation.then(() => window.removeEventListener('message', onUiReady));\n  \n  function onUiReady(e) {\n    const data = e.data.tabs_ui_event;\n    if(data && data.type === 'ready') {\n      window.parent.postMessage(message, hostname);\n    }\n  }\n  \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`\n## The Dirty Details\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`\nIn Observable's structure most classes appear in unique combinations and can thus be used to uniquely identify an element type.\n\nAll classes are presentational though (i.e. they don't add semantic meaning) and could therefore change with any new update. Using macros in place of actual selectors provides two advantages:\n1. It keeps the styles readable.\n2. We can respond more easily to changes in Observable's document structure.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":701,"value":"md`\n## Design Decisions (todo)\n\n1. (tabs, first insert hidden)\n1. (width, fixed for sandbox, prevent update)\n\n## Known Issues\n\n- \"Featured in ... / Fork ...\" overlays toolbar\n- Reverting to default UI may leave some sandbox cells mispositioned\n- Editor autoscroll in horizontal split layout limited to one direction ([CodeMirror issue](https://github.com/codemirror/CodeMirror/issues/4142))\n- Pinned tabs do not toggle their editors (systemic)\n- Clicking outside pinned editor collapsed editor (systemic)\n- Syntax error in named cell reverts label to number (systemic)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"function macroReplacer(macros, inPlace = false) {\n  const compiled = inPlace ? macros : Object.assign({}, macros);\n  const pattern = Object.keys(macros)\n    // Sort by descending string length to handle shared suffixes.\n    .sort((a, b) => b.length - a.length || -1 * (ab)\n    // Escape special RegExp characters.\n    .map(s => s.replace(/[$]/, '\\\\$&'))\n    .join('|');\n  const regex = new RegExp('(' + pattern + ')\\\\b', 'g');\n\n  const replace = s => s.replace(regex, m => compiled[m]);\n  Object.keys(compiled).forEach(name => {\n    compiled[name] = replace(compiled[name]);\n  });\n\n  return replace;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"function compileCss(minify = false, debug = false) {\n  const processCss  = v => !minify ? v : csso.minify(v).css;\n  const macros      = selectorMacros;\n  const replace     = macroReplacer(macros, true);\n  const editorStyle = replace(editorStyles);\n  const debugStyle  = debug ? replace(annotationStyles) : '';\n  \n  return {\n    macros:  macros,\n    editor:  processCss(editorStyle + debugStyle),\n    sandbox: processCss(outputStyles)\n  };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1222,"value":"function pluginEditorStyle(api, options) {\n  var style;\n  \n  api.on('load', function() {\n    style = api.append(api.create('style'));\n  });\n  \n  api.on('style_editor', function(str) {\n    style.textContent = str;\n  });\n  \n  api.on('unload', function() {\n    style.parentNode.removeChild(style);\n  });\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1226,"value":"function pluginSandboxStyle(api, options) {\n  var nodeId;\n  \n  api.on('load', function() {\n    nodeId = api.randomId();\n    send('insert_node', nodeId, wrap(mask(nodeId)));\n  });\n  \n  api.on('style_sandbox', function(css) {\n    send('modify_node', nodeId, wrap(css) + wrap(mask(nodeId)));\n  });\n  \n  api.on('unload', function(str) {\n    send('remove_node', nodeId);\n  });\n  \n  function wrap(css) {\n    var style = api.create('style');\n    style.textContent = css;\n    return style.outerHTML;\n  }\n  \n  function mask(nodeId) {\n    return '#r' + nodeId + '{display:none!important}';\n  }\n    \n  function send(eventType, nodeId, html) {\n    var event = { type: eventType, node_id: nodeId };\n    if(html) {\n      event.new_node_value = {\n        body:    '\"use strict\";(function(html){return(html`' + html + '`)})',\n        inputs:  ['html'],\n        mutable: false,\n        view:    false\n      };\n    };\n    api.worker.postMessage(event, '*');\n  }\n         \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1257,"value":"function pluginStatic(api, options) {\n  api.on('load', function() {\n    api.trigger('style_editor', options.editorCss);\n    api.trigger('style_sandbox', options.sandboxCss);\n  });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1316,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1324,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1303,"value":"function pluginMessaging(api, options) {\n  \n  api.on('send', function(data) {\n    api.worker.postMessage({ type: 'bundle', events: [], tabs_ui_event: data }, '*');\n  });\n  \n  api.on('load', function() {\n    window.addEventListener('message', onMessage);\n  });\n  \n  api.on('unload', function() {\n    window.removeEventListener('message', onMessage);\n  });\n\n  function onMessage(e) {\n    if(e.data.tabs_ui_event) api.trigger('message', e.data.tabs_ui_event);\n  }  \n  \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1229,"value":"function pluginHotReload(api, options) {\n  \n  api.on('message', function(data) {\n    if(data.type === 'update') {\n      api.trigger('style_editor', data.editor);\n      api.trigger('style_sandbox', data.sandbox);\n    }\n  });\n  \n  api.on('load', function() {\n    api.trigger('send', {type: 'ready'});\n  });\n  \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1210,"value":"function pluginUnloadOnBrowse(api, options) {\n  var location, interval, timeout;\n  \n  api.on('load', function() {\n    interval = options.unloadInterval || 1000;\n    location = window.location.href;\n    track();\n  });\n  \n  api.on('unload', function() {\n    window.clearTimeout(timeout);\n  });\n  \n  function track() {\n    if(location !== window.location.href) return api.trigger('unload');\n    timeout = setTimeout(track, interval);\n  }\n  \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1375,"value":"function pluginPersist(api, options) {\n  \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1201,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"$38","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"viewof outputStyles = print(`\nhtml, body {\n  height: 100%;\n}\n\nbody {\n  overflow: auto;\n  overflow-y: scroll;\n}\n\n.observablehq {\n  margin-bottom: 17px !important;\n  padding-left: 4px;\n}\n\nbody > div:not([style]),\nbody > div[style=\"margin-bottom: 17px;\"] {\n  display: none;\n}\n`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof annotationStyles = {\n  let rules = [];\n  Object.keys(selectorMacros).forEach(name => {\n    // Remove prefix to keep the value from getting replaced.\n    const label = name.replace(/^\\$/, '');\n    rules.push(`${name} { --macro: \"${label}\" }`);\n  });\n  return print(rules.join('\\n'));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"function print(str, rows = 5) {\n  const wrapper = html``;\n  wrapper.value = '' + str;\n  const form = html``;\n  form.value = '' + str.trim();\n  wrapper.appendChild(form);\n  return wrapper;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"csso = (await import('https://cdn.skypack.dev/csso@3.5.0')).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":281,"value":"html`<style>\n.warning {\n  padding: 15px 10px 10px;\n  border: 2px solid #ffa600;\n  border-radius: 10px;\n  overflow: hidden;\n  max-width: 640px;\n  margin-bottom: 1em;\n}\n.warning h3 {\n  margin: -15px -10px 10px -10px;\n  padding: .5em;\n  color: white;\n  background: #ffa600;\n}\n.bookmarklet {\n  cursor: move;\n  text-decoration: none !important;\n  display: inline-block;\n  border: 1px solid #888;\n  border-radius: 5px;\n  padding: 5px 8px;\n  color: black !important;\n  box-shadow: 0px 1px 2px rgba(0,0,0,.2);\n  background: #fafafa;\n}\n.bookmarklet[contenteditable=\"true\"] {\n  background: #eefaff;\n  cursor: initial;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"import {color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"clipboard = require('clipboard-polyfill@2.4.6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}
</article></body></html>