Lit-markdown-editor NPM

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:

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="importmap">
      {
        "imports": {
          "lit": "https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js",
          "lit/decorators.js": "https://unpkg.com/lit/decorators.js",
          "@lit/reactive-element": "https://unpkg.com/@lit/reactive-element/reactive-element.js",
          "@lit/reactive-element/": "https://unpkg.com/@lit/reactive-element/",
          "lit-markdown-editor": "https://cdn.jsdelivr.net/npm/lit-markdown-editor@1.0.11/lib/index.js"
        }
      }
    </script>
  </head>

  <body>
    <lit-markdown-editor></lit-markdown-editor>
    <script type="module">
      import "lit-markdown-editor";
    </script>
  </body>
</html>

With Lit

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

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<unknown> | Map<PropertyKey, unknown>) {
    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 html`<label for="markdown">Input</label
      ><lit-markdown-editor name="markdown" id="markdown"></lit-markdown-editor>
      <p>Output</p>
      <article>${resolveMarkdown(this.raw, { includeImages: true })}</article>`;
  }
}

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

Extending with Lit

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

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

export class CustomMarkdownEditor extends LitMarkdownEditor {
  render() {
    return html`
      <input @input=${this.handleFileInput} id="add-file" type="file" hidden accept="image/*" />
      <nav>
        <ul>
          <li @click=${this.handleHeaderClick} id="h1">H1</li>
          <li @click=${this.handleHeaderClick} id="h2">H2</li>
          <li @click=${this.handleHeaderClick} id="h3">H3</li>
          <li @click=${this.handleHeaderClick} id="h4">H4</li>
          <li @click=${this.handleHeaderClick} id="h5">H5</li>
          <li @click=${this.handleModifierClick} id="i"><em>i</em></li>
          <li @click=${this.handleModifierClick} id="b"><strong>B</strong></li>
          <li @click=${this.handleTemplateClick} id="table">
            <table-icon></table-icon>
          </li>
          <li @click=${this.handleTemplateClick} id="link">
            <link-icon></link-icon>
          </li>
          <li @click=${this.handleAddPictureClick} style="position: relative;">
            ${this.loading
              ? html`<loading-icon small black></loading-icon>`
              : html`<new-picture-icon></new-picture-icon>`}
          </li>
        </ul>
      </nav>
      <textarea name=${this.name} autocomplete="off" @drop=${this.handleDrop}></textarea>
      <slot name="input"></slot>
    `;
  }
}

Loading Initial Values

You can load initial values by dumping text data inside the <lit-markdown-editor></lit-markdown-editor> element:

In a Template

<lit-markdown-editor name="markdown" id="markdown">
  # Rick and Morty _Wub a lub a dub dub!_ **speaks to my soul**.
</lit-markdown-editor>

Through Javascript

<lit-markdown-editor name="markdown" id="markdown"></lit-markdown-editor>
<script>
  const editor = document.querySelector("lit-markdown-editor");
  const cache = window.localStorage.getItem("cache");
  if (cache) {
    editor.innerHTML = cache;
  }
</script>

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.

lit rxjs

@infinitebrahmanuniverse/nolb-lit-@everything-registry/sub-chunk-2083 @zalastax/nolb-lit-

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago