File size: 4,271 Bytes
3002579 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
class CodeEditor extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
:host {
display: block;
margin: 2rem 0;
}
.editor-container {
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.editor-header {
background: #2d3748;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
color: white;
}
.editor-header-title {
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
font-weight: 500;
}
.editor-body {
background: #1a202c;
padding: 1rem;
font-family: 'Fira Code', monospace;
color: #e2e8f0;
min-height: 200px;
max-height: 400px;
overflow-y: auto;
}
.line-numbers {
color: #718096;
user-select: none;
margin-right: 1rem;
}
.code-line {
display: flex;
margin-bottom: 0.5rem;
}
.keyword {
color: #f687b3;
}
.string {
color: #68d391;
}
.comment {
color: #718096;
font-style: italic;
}
.number {
color: #f6ad55;
}
.function {
color: #63b3ed;
}
</style>
<div class="editor-container">
<div class="editor-header">
<span class="editor-header-title">code.js</span>
</div>
<div class="editor-body">
<div class="code-line"><span class="line-numbers">1</span> <span class="keyword">const</span> <span class="function">encodeMessage</span> = (<span class="keyword">message</span>) => {</div>
<div class="code-line"><span class="line-numbers">2</span> <span class="keyword">return</span> <span class="function">btoa</span>(<span class="function">encodeURIComponent</span>(<span class="keyword">message</span>));</div>
<div class="code-line"><span class="line-numbers">3</span> };</div>
<div class="code-line"><span class="line-numbers">4</span> </div>
<div class="code-line"><span class="line-numbers">5</span> <span class="keyword">const</span> <span class="function">decodeMessage</span> = (<span class="keyword">encoded</span>) => {</div>
<div class="code-line"><span class="line-numbers">6</span> <span class="keyword">try</span> {</div>
<div class="code-line"><span class="line-numbers">7</span> <span class="keyword">return</span> <span class="function">decodeURIComponent</span>(<span class="function">atob</span>(<span class="keyword">encoded</span>));</div>
<div class="code-line"><span class="line-numbers">8</span> } <span class="keyword">catch</span> (<span class="keyword">e</span>) {</div>
<div class="code-line"><span class="line-numbers">9</span> <span class="keyword">return</span> <span class="string">"Invalid encoding"</span>;</div>
<div class="code-line"><span class="line-numbers">10</span> }</div>
<div class="code-line"><span class="line-numbers">11</span> };</div>
<div class="code-line"><span class="line-numbers">12</span> </div>
<div class="code-line"><span class="line-numbers">13</span> <span class="comment">// Example usage:</span></div>
<div class="code-line"><span class="line-numbers">14</span> <span class="keyword">const</span> <span class="keyword">secret</span> = <span class="string">"Hello World!"</span>;</div>
<div class="code-line"><span class="line-numbers">15</span> <span class="keyword">const</span> <span class="keyword">encoded</span> = <span class="function">encodeMessage</span>(<span class="keyword">secret</span>);</div>
<div class="code-line"><span class="line-numbers">16</span> <span class="keyword">const</span> <span class="keyword">decoded</span> = <span class="function">decodeMessage</span>(<span class="keyword">encoded</span>);</div>
</div>
</div>
`;
}
}
customElements.define('code-editor', CodeEditor); |