hoity-toity
v0.0.5
Published
Feature Packed Code Editor Web Component
Readme
hoity-toity
Hoity Toity: Feature Packed Code Editor Web Component
npm i hoity-toity;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>demo</title>
<script src="hoity-toity.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<hoity-toity id="js" language="javascript" value="console.log('bork!');"></hoity-toity>
<!-- see index.html for a codebin demo -->
<script>
const js = document.getElementById("js");
js.addEventListener('change', (e)=>console.log(e.detail.value));
</script>
</body>
</html>Key Features:
- Multi-language Support: The component supports JavaScript, HTML, and CSS through CodeMirror's language modules
- Shadow DOM: Uses Shadow DOM for style encapsulation
- Reactive Attributes: Responds to
language,theme, andvalueattribute changes - Custom Events: Emits a
changeevent when content is modified - Public Methods: Exposes
getValue(),setValue(), andfocus()methods
Usage Example:
<!-- Basic usage -->
<hoity-toity language="javascript" wrap="true"></hoity-toity>
<!-- With initial value -->
<hoity-toity language="html" value="<h1>Hello</h1>"></hoity-toity>
<!-- Listen for changes -->
<hoity-toity id="editor" language="css"></hoity-toity>
<script>
const editor = document.getElementById('editor');
editor.addEventListener('change', (e) => {
console.log('Content changed:', e.detail.value);
});
</script>
<!-- multiple editors -->
<div class="row">
<div id="collapseJs" class="col col-shown" style="">
<hoity-toity id="js" language="javascript"></hoity-toity>
</div>
<div id="collapseCss" class="col col-shown" style="">
<hoity-toity id="css" language="css"></hoity-toity>
</div>
<div id="collapseHtml" class="col col-shown" style="">
<hoity-toity id="html" language="html"></hoity-toity>
</div>
</div>