We are a research group at the CMU HCII. Our mission is to empower people to analyze and communicate data with interactive systems.
Public
Edited
Feb 16, 2024
3 forks
Importers
48 stars
text
query
js
python
viewof instantText = Editor({
value: "Hello World",
instant: true,
})
instantText
viewof delayed = Editor({
value: "Hello Debounced",
debounced: 1000
})
delayed
Editor({
value: "Hello CMU\nHello line two\nHello line three",
lineNumbers: true
})
Editor({
value: "Hello World",
label: "Text"
})
function metalSyntax(hljs) {
return {
name: "Metal",
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"
,
contains: [
hljs.C_LINE_COMMENT_MODE,
hljs.C_BLOCK_COMMENT_MODE,
hljs.C_NUMBER_MODE,
]
}
}
function customHighlighter(editor) {
editor.textContent = editor.textContent;
highlightjs.registerLanguage("metal", metalSyntax)
highlightjs.highlightElement(editor)
}
Editor({
highlight: customHighlighter,
language: 'metal',
value: `// Fragment shader that samples a texture and outputs the sampled color.
fragment float4 textureFragmentShader(TexturePipelineRasterizerData in [[stage_in]],
texture2d<float> texture
[[texture(AAPLTextureInputIndexColor)]])
{
sampler simpleSampler;
// Sample data from the texture.
float4 colorSample = texture.sample(simpleSampler, in.texcoord);
// Return the color sample as the final color.
return colorSample;
}`
})
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", {bubbles: true}));
}
viewof programmableEditor = Editor()
Inputs.button([
["Set to a sample value", () => set(viewof programmableEditor, 'a sample value')],
["Reset", () => set(viewof programmableEditor, '')]
])
import {localStorageView} from '@tomlarkworthy/local-storage-view'
viewof persistentEditor = Editor()
viewof sourceStorage = localStorageView("persistentEditor")
Inputs.bind(viewof persistentEditor, viewof sourceStorage)
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`<div>`
const run = html`<div style="display: ${"none"}; position: absolute; right: 10px; cursor: pointer; top: ${label && typeof label == "string" ? "32px" : "7px"}; z-index: 1;">${svg`<svg width=12 height=12 viewbox="0 0 14 14">${runButton}`}`;
container.addEventListener('mouseenter', (e) => {
run.style.display = "inline-block";
})
container.addEventListener('mouseleave', (e) => {
run.style.display = "none";
})
container.append(run)
let shiftDown = false;
let lb;
if (label) {
const isString = typeof label == "string";
lb = html`${isString ? `<label style="display: block; font-family: sans-serif; color: #333; font-size: 0.9em;">${label}:` : label}`;
container.append(lb);
}
container.append(html`<span style="${languageLabelStyles}
top: ${label && typeof label == "string" ? `35px` : "10px"}">${language}`)
const ed = html`<div style="${styles} padding-left: ${lineNumbers ? '45px' : '10px'};" class="language-${language}">${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);
let settingInternally = false
// 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)
// Only set this when we are receiving an external message, otherwise it moves the cursor within the input
if (!settingInternally) {
ed.textContent = v;
jar.updateCode(v);
}
settingInternally = false
}
});
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) => {
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) => {
if (e.key == "Shift") shiftDown = false;
})
const debouncedUpdate = debounce((code) => {
settingInternally = true;
container.value = code;
container.dispatchEvent(new CustomEvent("input"));
}, debounced);
jar.onUpdate(code => {
if (instant || debounced > 0) {
debouncedUpdate(code);
}
})
const wrap = container.querySelector('.codejar-wrap');
return container;
}
function highlighter(editor) {
editor.textContent = editor.textContent;
highlightjs.highlightElement(editor)
}
function makeEditor(defaultOpt) {
return (opt = {}) => Editor({...defaultOpt, ...opt})
}
import {Editor as CmudigEditor} from '@cmudig/editor'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
