boltless.me
markdown editor web component for tangled
1<!doctype html>
2<html lang="en">
3 <head>
4 <script type="module" src="./tangled-md-editor.js"></script>
5 <style>
6 /* dark mode for my eyes */
7 body, textarea {
8 color: #ddd;
9 background-color: #222;
10 }
11 tangled-md-editor textarea {
12 padding: 1em;
13 }
14 tangled-md-editor.drag-hover textarea {
15 outline: dashed 2px #ccc;
16 outline-offset: -0.5em;
17 }
18 tangled-md-editor:not(.drag-hover) button > .condensed,
19 tangled-md-editor.drag-hover button > .spacious {
20 display: none;
21 }
22 </style>
23 </head>
24 <body>
25 <div style="width: min-content">
26 <tangled-md-editor>
27 <textarea rows="20" cols="80"></textarea>
28 <button onclick="this.parentElement.insertFile()">
29 <span class="condensed">Add Files</span>
30 <span class="spacious">Paste, drop, or click to add files</span>
31 </button>
32 </tangled-md-editor>
33 </div>
34 </body>
35</html>