@anywhichway/nerd-editor
Version:
A JavaScript rich text editor based on and with support for custom elements.
73 lines (68 loc) • 4.79 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nerd Editor</title>
<style>
.ne-editable:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='10' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M373.2 16.97C395.1-4.901 430.5-4.901 452.4 16.97L495 59.6C516.9 81.47 516.9 116.9 495 138.8L182.3 451.6C170.9 462.9 156.9 471.2 141.5 475.8L20.52 511.3C14.9 512.1 8.827 511.5 4.687 507.3C.5466 503.2-1.002 497.1 .6506 491.5L36.23 370.5C40.76 355.1 49.09 341.1 60.44 329.7L373.2 16.97zM429.8 39.6C420.4 30.22 405.2 30.22 395.8 39.6L341 94.4L417.6 170.1L472.4 116.2C481.8 106.8 481.8 91.6 472.4 82.23L429.8 39.6zM109.6 402.4L173.4 415.2L394.1 193.6L318.4 117L96.84 338.6L109.6 402.4zM70.51 370.2C69.08 373.2 67.88 376.3 66.93 379.5L39.63 472.4L132.4 445.1C135.7 444.1 138.8 442.9 141.8 441.5L92.86 431.7C86.53 430.4 81.58 425.5 80.31 419.1L70.51 370.2z'/%3E%3C/svg%3E"), auto;
}
code {
white-space: pre;
}
ins {
text-decoration-line: underline; text-decoration-style: wavy;
}
aside {
width: 40%;
padding-left: .5rem;
margin-left: .5rem;
float: right;
box-shadow: inset 5px 0 5px -5px #29627e;
font-style: italic;
color: #29627e;
}
[contenteditable] {
outline: 1px solid transparent;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/styles/default.min.css" integrity="sha256-+94KwJIdhsNWxBUy5zGciHojvRuP8ABgyrRHJJ8Dx88=" crossorigin="anonymous">
<script type="text/javascript" async src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.6.0/build/highlight.min.js" integrity="sha256-4v2jQZxK6PbZEeZ2xl2ziov6NHMksBFgBlxtMZVYbQk=" crossorigin="anonymous"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/repl-host@0.0.10"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/inline-function@0.0.7"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/math-science-formula@0.0.5"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/gravatar-display@0.0.1"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/sheet-music@0.0.1"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="https://cdn.jsdelivr.net/npm/@anywhichway/plotly-chart@0.0.2"></script>
<script type="text/javascript" async src="https://cdn.jsdelivr.net/npm/@anywhichway/quick-component@0.0.12/quick-component.min.js" component="../components/data-block"></script>
</head>
<body>
<template id="ne-control">
<button title="${title}"><slot>${innerHTML}</slot></button>
<script type="module">
self.properties(({
connected() {
this.classList.add("ne-control");
if(this.icon && this.innerHTML!==this.icon) {
this.innerHTML = this.icon;
}
const css = this.css || "button {min-width:4ch;margin:1px 0px;}";
if(!this.shadowRoot.querySelector("style")) {
const style = document.createElement("style");
style.innerText = css;
this.shadowRoot.insertBefore(style,this.shadowRoot.firstElementChild)
}
if(this.hasAttribute("title")) {
this.shadowRoot.querySelector("button").removeAttribute("title")
}
}
}))
</script>
</template>
<script type="module" src="./index.js"></script>
<slot name="toolbar"></slot>
<slot name="content"></slot>
<slot name="footer"></slot>
<slot name="placeholder" style="display:none"></slot>
</body>
</html>