About this Package

This package is a web component written using Lit to provide simple tools for writing markdown in the browser.

Most markdown tools are very complicated; this component aims to offer a very ___unsophisticated___ solution.

Dependencies

This package uses Lit as a basis for the web component.

Accredations

The icons used in this element are from Google Fonts.

Usage

In the browser

This component can be used out of the box in browsers that support import maps:

``html















`

With Lit

This element can be used in a Lit building environment as shown below:

`typescript
import { LitElement, html, PropertyValueMap } from "lit";
import { customElement, query, state } from "lit/decorators.js";
import { resolveMarkdown } from "lit-markdown";
import "lit-markdown-editor";

@customElement("my-element")
export class MyElement extends LitElement {
@query("lit-markdown-editor")
private textarea!: HTMLTextAreaElement;
@state()
private raw = "";

firstUpdated(_changedProperties: PropertyValueMap | Map) {
super.firstUpdated(_changedProperties);
this.textarea.addEventListener("input", this.handleTextareaInput);
}

private handleTextareaInput: EventListener = () => {
const { value } = this.textarea;
if (!value) return;
this.raw = value.trim();
};

render() {
return htmlInput >

Output

${resolveMarkdown(this.raw, { includeImages: true })}

;
}
}

declare global {
interface HTMLElementTagNameMap {
"my-element": MyElement;
}
}
`

Extending with Lit

You may also extend this element class in Lit and customize the buttons:

`typescript
import { LitMarkdownEditor } from "lit-markdown-editor";
import { html } from "lit";

export class CustomMarkdownEditor extends LitMarkdownEditor {
render() {
return html

;
}
}
`

Loading Initial Values

You can load initial values by dumping text data inside the element:

$3

`html

# Rick and Morty _Wub a lub a dub dub!_ speaks to my soul.

`

$3

`html


`

About the Add Image button

The add image button will add your image as a data object string by default.

If you wish to change the logic of the add image button, please create a custom class and modify the protected provideFileURL` function, returning a Promise of the URL of the image you added.