Public
Edited
Nov 3, 2022
Importers
2 stars
YAML.dump(() => 3, {schema: makeYAMLSchema.makeJSExtSchema(YAML)})
makeImport = {
let keyword = name => {
let e = document.createElement("span");
e.classList.add("tok-keyword");
e.textContent = name;
};
let brace = Object.create(null, {
open: {
get: function openBrace() {
let b = document.createElement("span");
b.classList.add("tok-punctuation");
b.textContent = "{";
return b;
},
enumerable: true
},
close: {
get: function closeBrace() {
let b = document.createElement("span");
b.classList.add("tok-punctuation");
b.textContent = "}";
return b;
},
enumerable: true
}
});
return function makeImport({
cell = "cell",
overrides,
link = "@rmw4269/js-yaml"
} = {}) {
let wrap = document.createElement("code");
wrap.classList.add("observablehq--md-pre");
wrap.spellcheck = false;
wrap.setAttribute("autocorrect", "off");
wrap.autocapitalize = "off";
wrap.translate = false;
wrap.textContent = link;
return wrap;
};
}
makeImport()
overrideInput = {
let asFrag;
{
asFrag = document.createDocumentFragment();
let asSpan = document.createElement("span");
asSpan.textContent = "as";
asSpan.classList.add("tok-keyword");
asFrag.append(" ", asSpan, " ");
}
let makeName = name => {
let wrap = document.createElement("span");
wrap.classList.add("tok-variableName", "tok-definition");
let anchor = document.createElement("a");
anchor.style.color = "unset";
if (name = name.trim()) {
anchor.setAttribute("href", `#${name}`);
anchor.textContent = name;
}
wrap.append(anchor);
return wrap;
};
let f = function overrideInput(variable, suggestion) {
/*
<span class="tok-variableName variableNameInput" inputmode="text" contenteditable>JSExtSchemaProperTypeCheck</span>
<span class="tok-keyword">as</span>
<span class="tok-variableName tok-definition"><a href="#JSExtSchemaProperTypeCheck" style="color: unset;">
JSExtSchemaProperTypeCheck
</a></span>
*/
variable = variable.trim();
(typeof suggestion == "string" || (typeof suggestion == "object" && suggestion instanceof String)) && (suggestion = suggestion.trim());
suggestion ||= undefined;
let wrap = document.createDocumentFragment();
if (suggestion) {
let newHolder = document.createElement("span");
newHolder.classList.add("tok-variableName", "variableNameInput");
newHolder.inputMode = "text";
newHolder.contentEditable = true;
newHolder.textContent = suggestion;
wrap.append(newHolder, asFrag.cloneNode(Infinity), makeName(variable));
} else {
let holder = document.createElement("span");
holder.classList.add("tok-variableName", "tok-definition");
holder.inputMode = "text";
holder.contentEditable = true;
holder.textContent = variable;
wrap.append(holder);
holder.addEventListener("input", () => {
let newHolder = holder;
holder = makeName(variable);
newHolder.classList.remove("tok-definition");
newHolder.classList.add("variableNameInput");
newHolder.parentNode.insertBefore(holder, newHolder.nextSibling);
holder.parentNode.insertBefore(asFrag.cloneNode(Infinity), holder);
// newHolder.after(asFrag.cloneNode(Infinity), holder);
}, {once: true, passive: true});
}
return wrap;
};
return f;
}
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.
