Merge pull request #80 from davidmyersdev/support-web-components

Add support for Web Components
davidmyersdev · Mar 15, 2024 · 79154e8 · 79154e8
2 parents 0d72fb4 + da0d2c9
commit 79154e8
Show file tree

Hide file tree

Showing 12 changed files with 350 additions and 281 deletions.
diff --git a/README.md b/README.md
@@ -108,6 +108,28 @@ const editor = ink(document.getElementById('editor')!, options)
 editor.update(state.doc)
 ```
 
+#### Web Components
+
+```ts
+// ./examples/web-component.ts#L1-L16
+import { ink } from 'ink-mde'
+import { LitElement, html } from 'lit'
+
+class InkMde extends LitElement {
+  firstUpdated() {
+    ink(this.renderRoot.querySelector('#editor')!, {
+      doc: '# Hello, World!',
+    })
+  }
+
+  render() {
+    return html`<div id="editor"></div>`
+  }
+}
+
+customElements.define('ink-mde', InkMde)
+```
+
 ### Examples for `ink-mde/vue`
 
 The `ink-mde/vue` subpath exports a Vue 3 component.

diff --git a/examples/web-component.ts b/examples/web-component.ts
@@ -0,0 +1,18 @@
+import { ink } from 'ink-mde'
+import { LitElement, html } from 'lit'
+
+class InkMde extends LitElement {
+  firstUpdated() {
+    ink(this.renderRoot.querySelector('#editor')!, {
+      doc: '# Hello, World!',
+    })
+  }
+
+  render() {
+    return html`<div id="editor"></div>`
+  }
+}
+
+customElements.define('ink-mde', InkMde)
+
+document.querySelector('#app')!.innerHTML = '<ink-mde></ink-mde>'
diff --git a/index.html b/index.html
@@ -13,70 +13,16 @@
         box-sizing: border-box;
       }
 
-      :root {
-        --ink-code-font-family: 'Fira Code';
-      }
+      body, :host {
+        --ink-font-family: 'Inter', Helvetica, sans-serif;
+        --ink-code-font-family: 'Fira Code', monospace;
 
-      body {
-        font-family: 'Inter', Helvetica, sans-serif;
         margin: 0;
       }
-
-      .dark body {
-        background-color: rgb(24, 24, 27);
-        color: #fafafa;
-      }
-
-      .light body {
-        background-color: #fafafa;
-        color: rgb(24, 24, 27);
-      }
-
-      @media (prefers-color-scheme: dark) {
-        .auto body {
-          background-color: rgb(24, 24, 27);
-          color: #fafafa;
-        }
-      }
-
-      @media (prefers-color-scheme: light) {
-        .auto body {
-          background-color: #fafafa;
-          color: rgb(24, 24, 27);
-        }
-      }
-
-      .app-wrapper {
-        margin: auto;
-        max-width: 120ch;
-      }
-
-      .ink-mde .ink-mde-container {
-        max-width: 80ch;
-      }
-
-      #app .cm-editor.cm-focused {
-        outline: none;
-      }
-
-      html, body, .app-wrapper, #app, .ink-mde {
-        height: 100%;
-      }
-
-      .app-wrapper {
-        padding: 0.5rem;
-      }
-
-      /* .ink-mde-container {
-        max-width: 30rem;
-      } */
     </style>
   </head>
   <body>
-    <div class="app-wrapper">
-      <div id="app"></div>
-    </div>
-    <!-- <script type="module" src="/examples/demo.ts"></script> -->
-    <script type="module" src="/examples/plugins.tsx"></script>
+    <div id="app"></div>
+    <script type="module" src="/examples/web-component.ts"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -133,22 +133,22 @@
     }
   },
   "dependencies": {
-    "@codemirror/autocomplete": "^6.11.1",
+    "@codemirror/autocomplete": "^6.15.0",
     "@codemirror/commands": "^6.3.3",
-    "@codemirror/lang-markdown": "^6.2.3",
-    "@codemirror/language": "^6.10.0",
-    "@codemirror/language-data": "^6.3.1",
-    "@codemirror/search": "^6.5.5",
-    "@codemirror/state": "^6.4.0",
-    "@codemirror/view": "^6.23.0",
-    "@lezer/common": "^1.2.0",
+    "@codemirror/lang-markdown": "^6.2.4",
+    "@codemirror/language": "^6.10.1",
+    "@codemirror/language-data": "^6.4.1",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.4.1",
+    "@codemirror/view": "^6.26.0",
+    "@lezer/common": "^1.2.1",
     "@lezer/highlight": "^1.2.0",
     "@lezer/markdown": "^1.2.0",
-    "@replit/codemirror-vim": "^6.1.0",
+    "@replit/codemirror-vim": "^6.2.0",
     "ink-mde": "workspace:*",
     "katex": "^0.16.9",
     "solid-js": "^1.8.7",
-    "style-mod": "^4.1.0"
+    "style-mod": "^4.1.2"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.0",
@@ -163,6 +163,7 @@
     "eslint-plugin-solid": "^0.13.1",
     "express": "^4.18.2",
     "jsdom": "^23.0.1",
+    "lit": "^3.1.2",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.5",
     "rollup": "^4.9.2",