Add ctzn-code custom element

static/js/com/custom-html.js

@@ -5,6 +5,7 @@ import * as session from '../lib/session.js'
 import { decodeBase64 } from '../lib/strings.js'
 
 import '../ctzn-tags/card.js'
+import '../ctzn-tags/code.js'
 import '../ctzn-tags/post-view.js'
 import '../ctzn-tags/posts-feed.js'
 import '../ctzn-tags/followers-list.js'

static/js/ctzn-tags/code.js

@@ -0,0 +1,55 @@
+import { LitElement, html } from '../../vendor/lit-element/lit-element.js'
+
+export class Code extends LitElement {
+  constructor () {
+    super()
+    this.setAttribute('ctzn-elem', '1')
+  }
+
+  firstUpdated () {
+    this.style.counterReset = 'line'
+    const rawLines = this.textContent.trim().split('\n')
+    this.innerHTML = ''
+    for (const rawLine of rawLines) {
+      const codeLine = document.createElement('code')
+      codeLine.textContent = rawLine
+      this.appendChild(codeLine)
+    }
+  }
+
+  render () {
+    return html`
+      <style>
+        div {
+          overflow-x: scroll;
+          background-color: darkgray;
+          padding: 0.8rem;
+          border: 1px solid gray;
+          border-radius: 5px;
+        }
+        ::slotted(:last-child) {
+          margin-bottom: 0 !important;
+        }
+        ::slotted(code) {
+          display: block;
+          white-space: pre;
+          background-color: transparent;
+        }
+        ::slotted(code)::before {
+          display: inline-block;
+          text-align: right;
+          width: 2ch;
+          margin-right: 1ch;
+          color: gray;
+          counter-increment: line;
+          content: counter(line);
+        }
+      </style>
+      <div>
+        <slot></slot>
+      </div>
+    `
+  }
+}
+
+customElements.define('ctzn-code', Code)

static/js/lib/ctzn-html.js

@@ -51,6 +51,7 @@ export function sanitize (str, context = undefined) {
     return DOMPurify.sanitize(str, {
       ADD_TAGS: [
         'ctzn-card',
+        'ctzn-code',
         'ctzn-posts-feed',
         'ctzn-post-view',
         'ctzn-followers-list',
@@ -70,6 +71,7 @@ export function sanitize (str, context = undefined) {
     return DOMPurify.sanitize(str, {
       ADD_TAGS: [
         'ctzn-card',
+        'ctzn-code',
         'ctzn-post-view'
       ],
       ADD_ATTR: ['view', 'user-id', 'mode'],