Use prismjs to highlight editor

example/demo.md

@@ -27,10 +27,10 @@
 <hunch-tabs>
   <div slot="tabs" class="tabs">
     <div>tab 1</div>
-    <div>tab 2</div>
+    <div>tab 2tab tab tab tab tab tab tab tab tab 222222222</div>
   </div>
   <div slot="panels" class="panels">
-    <div>panel1</div>
+    <div>panel1panel1111111111111111111111111111111111111111111111111111111111111111111</div>
     <div>panel2</div>
   </div>
 </hunch-tabs>

package.json

@@ -30,5 +30,8 @@
   "devDependencies": {
     "marked": "^0.8.0",
     "typescript": "^3.8.2"
+  },
+  "dependencies": {
+    "prismjs": "^1.19.0"
   }
 }

src/live-element.ts

@@ -1,42 +1,108 @@
+import Prism from "prismjs";
+
 const template = document.createElement("template");
 
 template.innerHTML = `
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.19.0/themes/prism.min.css" />
+
 <style>
 :host {
   display: grid;
   grid-template-columns: 1fr 1fr;
 }
+
+#editor-wrap {
+  position: relative;
+  font-family: monospace;
+  border: 1px solid gray;
+  height: 100%;
+  overflow: auto;
+}
+
+#editor {
+  color: transparent;
+  caret-color: black;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: none;
+  resize: none;
+  overflow: hidden;
+  font: inherit;
+  padding: 10px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+#editor:focus {
+  outline: none;
+}
+
+#highlight {
+  position: relative;
+  pointer-events: none;
+  margin: 0;
+  font: inherit;
+  padding: 10px;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+::slotted(*) {
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
 </style>
-<textarea></textarea>
+
+<div id="editor-wrap">
+  <div style="position: relative;">
+    <textarea id="editor"></textarea>
+    <pre id="highlight"></pre>
+  </div>
+</div>
 <slot></slot>
 `;
 
 class LiveElement extends HTMLElement {
   editor: HTMLTextAreaElement | null = null;
-  preview: HTMLElement | null = null;
+  highlight: HTMLElement | null = null;
 
   constructor() {
     super();
     const shadow = this.attachShadow({ mode: "open" });
     shadow.appendChild(template.content.cloneNode(true));
 
-    this.editor = shadow.querySelector("textarea");
-    this.preview = shadow.querySelector("slot");
+    this.editor = shadow.querySelector("#editor");
+    this.highlight = shadow.querySelector("#highlight");
 
     this.editor?.addEventListener("input", this.onChange);
   }
 
   connectedCallback() {
-    const innerHTML = this.querySelector("template")?.innerHTML;
+    const innerHTML = this.querySelector("template")?.innerHTML.trim();
     if (this.editor && innerHTML) {
       this.editor.value = innerHTML;
       this.innerHTML = innerHTML;
+      this.renderHighlight(innerHTML);
     }
   }
 
+  renderHighlight(innerHTML) {
+    this.highlight?.innerHTML = Prism.highlight(
+      innerHTML,
+      Prism.languages.html,
+      "html"
+    );
+  }
+
   onChange = () => {
     if (this.editor) {
-      this.innerHTML = this.editor.value;
+      const innerHTML = this.editor.value.trim();
+      this.innerHTML = innerHTML;
+      this.renderHighlight(innerHTML);
       setTimeout(() => {
         this.editor?.focus();
       });

yarn.lock

@@ -2,11 +2,49 @@
 # yarn lockfile v1
 
 
+clipboard@^2.0.0:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/clipboard/-/clipboard-2.0.4.tgz#836dafd66cf0fea5d71ce5d5b0bf6e958009112d"
+  integrity sha512-Vw26VSLRpJfBofiVaFb/I8PVfdI1OxKcYShe6fm0sP/DtmiWQNCjhM/okTvdCo0G+lMMm1rMYbk4IK4x1X+kgQ==
+  dependencies:
+    good-listener "^1.2.2"
+    select "^1.1.2"
+    tiny-emitter "^2.0.0"
+
+delegate@^3.1.2:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/delegate/-/delegate-3.2.0.tgz#b66b71c3158522e8ab5744f720d8ca0c2af59166"
+  integrity sha512-IofjkYBZaZivn0V8nnsMJGBr4jVLxHDheKSW88PyxS5QC4Vo9ZbZVvhzlSxY87fVq3STR6r+4cGepyHkcWOQSw==
+
+good-listener@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50"
+  integrity sha1-1TswzfkxPf+33JoNR3CWqm0UXFA=
+  dependencies:
+    delegate "^3.1.2"
+
 marked@^0.8.0:
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.8.0.tgz#ec5c0c9b93878dc52dd54be8d0e524097bd81a99"
   integrity sha512-MyUe+T/Pw4TZufHkzAfDj6HarCBWia2y27/bhuYkTaiUnfDYFnCP3KUN+9oM7Wi6JA2rymtVYbQu3spE0GCmxQ==
 
+prismjs@^1.19.0:
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.19.0.tgz#713afbd45c3baca4b321569f2df39e17e729d4dc"
+  integrity sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==
+  optionalDependencies:
+    clipboard "^2.0.0"
+
+select@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
+  integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=
+
+tiny-emitter@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 typescript@^3.8.2:
   version "3.8.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.8.2.tgz#91d6868aaead7da74f493c553aeff76c0c0b1d5a"