just use react!

package.json

@@ -73,7 +73,6 @@
     "html-webpack-plugin": "^3.2.0",
     "less": "^3.8.1",
     "less-loader": "^4.1.0",
-    "lit-html": "^1.0.0",
     "localforage": "^1.7.2",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.4.3",

src/Playroom/CodeMirror-JSX.js

@@ -1,7 +1,30 @@
 /* eslint-disable new-cap */
 
+import React from 'react';
+import ReactDom from 'react-dom';
 import styles from './CodeMirror-JSX.less';
-import { html, render } from 'lit-html';
+
+// Convert attribute values to arrays that addon-xml can handle
+function prepareSchema(tags) {
+  return Object.keys(tags).reduce((all, key) => {
+    const tag = tags[key];
+
+    all[key] = {
+      ...tag,
+      attrs: Object.keys(tag.attrs).reduce((allAttrs, name) => {
+        if (name === 'component_description') {
+          return allAttrs;
+        }
+
+        const attr = tag.attrs[name];
+        allAttrs[name] = Array.isArray(attr) ? attr : attr.values;
+        return allAttrs;
+      }, {})
+    };
+
+    return all;
+  }, {});
+}
 
 function getTypeColor(data) {
   if (data.type === 'boolean') {
@@ -19,57 +42,51 @@ function getTypeColor(data) {
   return null;
 }
 
-function makeTooltip(data) {
-  const required = data.required
-    ? html`
-        <span class=${styles.required}>ⓘ</span>
-      `
-    : '';
-  const defaultValue =
-    data.default !== null && typeof data.default !== 'undefined'
-      ? html`
-          <div class=${styles.default}>
-            <span class=${styles.defaultLabel}>Default:</span>
-            <span style="color:${getTypeColor(data)}">${data.default}</span>
-          </div>
-        `
-      : '';
-  const type =
-    data.type !== null && typeof data.type !== 'undefined'
-      ? html`
-          <div class=${styles.default}>
-            <span class=${styles.defaultLabel}>Type:</span>
-            <span>${data.type}</span>
-          </div>
-        `
-      : '';
-
-  return html`
-    <div>
-      ${required} <span>${data.description}</span> ${defaultValue} ${type}
-    </div>
-  `;
-}
+const Tooltip = ({ data }) => (
+  <div className={styles.tooltip}>
+    {data.required && <span className={styles.required}>ⓘ</span>}
+    <span>{data.description}</span>
+    {data.default !== null && typeof data.default !== 'undefined' && (
+      <div className={styles.default}>
+        <span className={styles.defaultLabel}>Default:</span>
+        <span style={{ color: getTypeColor(data) }}>{data.default}</span>
+      </div>
+    )}
+    {data.type !== null && typeof data.type !== 'undefined' && (
+      <div className={styles.default}>
+        <span className={styles.defaultLabel}>Type:</span>
+        <span>{data.type}</span>
+      </div>
+    )}
+  </div>
+);
+
+function getAttribute(cm, tags, data) {
+  const CodeMirror = cm.constructor;
+  const cur = cm.getCursor();
+  const token = cm.getTokenAt(cur);
 
-function prepareSchema(tags) {
-  return Object.keys(tags).reduce((all, key) => {
-    const tag = tags[key];
+  if (token.end > cur.ch) {
+    token.end = cur.ch;
+    token.string = token.string.slice(0, cur.ch - token.start);
+  }
 
-    all[key] = {
-      ...tag,
-      attrs: Object.keys(tag.attrs).reduce((allAttrs, name) => {
-        if (name === 'component_description') {
-          return allAttrs;
-        }
+  const inner = CodeMirror.innerMode(cm.getMode(), token.state);
+  let attr;
 
-        const attr = tag.attrs[name];
-        allAttrs[name] = Array.isArray(attr) ? attr : attr.values;
-        return allAttrs;
-      }, {})
+  // Attribute
+  if (tags[inner.state.tagName]) {
+    attr = tags[inner.state.tagName].attrs[data];
+  }
+
+  // Tag
+  if (data.match(/<\S+/)) {
+    attr = {
+      description: tags[data.slice(1)].attrs.component_description
     };
+  }
 
-    return all;
-  }, {});
+  return attr;
 }
 
 export default function getHints(cm, options) {
@@ -83,48 +100,24 @@ export default function getHints(cm, options) {
   );
 
   const container = document.createElement('div');
-  document.body.appendChild(container);
 
   CodeMirror.on(hint, 'close', () => container.remove());
   CodeMirror.on(hint, 'update', () => container.remove());
   CodeMirror.on(hint, 'select', (data, node) => {
-    const cur = cm.getCursor();
-    const token = cm.getTokenAt(cur);
-
-    if (token.end > cur.ch) {
-      token.end = cur.ch;
-      token.string = token.string.slice(0, cur.ch - token.start);
-    }
-
-    const inner = CodeMirror.innerMode(cm.getMode(), token.state);
-    let attr;
-
-    // Attribute
-    if (tags[inner.state.tagName]) {
-      attr = tags[inner.state.tagName].attrs[data];
-    }
-
-    // Tag
-    if (data.match(/<\S+/)) {
-      attr = {
-        description: tags[data.slice(1)].attrs.component_description
-      };
-    }
-
+    const attr = getAttribute(cm, tags, data);
     container.remove();
 
     if (attr && attr.description) {
-      const tooltip = makeTooltip(attr);
       const x =
         node.parentNode.getBoundingClientRect().right + window.pageXOffset;
       const y = node.getBoundingClientRect().top + window.pageYOffset;
 
       container.style.left = `${x}px`;
       container.style.top = `${y}px`;
-      container.className = styles.tooltip;
-      document.body.appendChild(container);
+      container.className = styles.container;
 
-      render(tooltip, container);
+      ReactDom.render(<Tooltip data={attr} />, container);
+      document.body.appendChild(container);
     }
   });
 

src/Playroom/CodeMirror-JSX.less

@@ -1,11 +1,14 @@
-.tooltip {
+.container {
   position: absolute;
+  z-index: 10;
+}
+
+.tooltip {
   background: white;
   border-radius: 3px;
   font-family: monospace;
   white-space: pre-wrap;
   padding: 4px 8px;
-  z-index: 10;
   box-shadow: 2px 3px 5px rgba(0, 0, 0, 0.2);
   border: 1px solid silver;
   max-width: 25em;

yarn.lock

@@ -6174,11 +6174,6 @@ listr@^0.14.2:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-lit-html@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.0.0.tgz#3dc3781a8ca68a9b5c2ff2a61e263662b9b2267b"
-  integrity sha512-oeWlpLmBW3gFl7979Wol2LKITpmKTUFNn7PnFbh6YNynF61W74l6x5WhwItAwPRSATpexaX1egNnRzlN4GOtfQ==
-
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"