diff --git a/README.md b/README.md index d916bac..ebeb2d0 100644 --- 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`
` + } +} + +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 new file mode 100644 index 0000000..3653d76 --- /dev/null +++ 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`` + } +} + +customElements.define('ink-mde', InkMde) + +document.querySelector('#app')!.innerHTML = '